Fix placeholder remove and insert

navikt · Feb 5, 2025 · a709a40 · a709a40
1 parent c22a6f7
commit a709a40
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/frontend/src/plate/toolbar/insert-placeholder.tsx b/frontend/src/plate/toolbar/insert-placeholder.tsx
@@ -1,5 +1,6 @@
 import { useOnClickOutside } from '@app/hooks/use-on-click-outside';
 import { MOD_KEY } from '@app/keys';
+import { useSelection } from '@app/plate/hooks/use-selection';
 import { createPlaceHolder } from '@app/plate/templates/helpers';
 import { ToolbarIconButton } from '@app/plate/toolbar/toolbarbutton';
 import { useMyPlateEditorRef } from '@app/plate/types';
@@ -8,12 +9,13 @@ import { insertPlaceholderFromSelection, removePlaceholder } from '@app/plate/ut
 import { PencilWritingIcon, PlusIcon, XMarkIcon } from '@navikt/aksel-icons';
 import { Button, TextField } from '@navikt/ds-react';
 import { RangeApi } from '@udecode/plate';
-import { useEditorState } from '@udecode/plate-core/react';
+import { useEditorRef } from '@udecode/plate-core/react';
 import { useRef, useState } from 'react';
 import { styled } from 'styled-components';
 
 export const InsertPlaceholder = () => {
-  const editor = useEditorState();
+  const editor = useEditorRef();
+  const selection = useSelection();
   const [isOpen, setIsOpen] = useState(false);
   const toggleOpen = () => setIsOpen(!isOpen);
   const ref = useRef<HTMLSpanElement>(null);
@@ -27,18 +29,18 @@ export const InsertPlaceholder = () => {
   useOnClickOutside(ref, resetAndClose, true);
 
   const onClick = () => {
-    if (RangeApi.isCollapsed()) {
+    if (RangeApi.isCollapsed(selection)) {
       if (isPlaceholderActive(editor)) {
         removePlaceholder(editor);
       } else {
         toggleOpen();
       }
     } else {
-      insertPlaceholderFromSelection(editor);
+      insertPlaceholderFromSelection(editor, selection);
     }
   };
 
-  const disabled = editor.selection === null || (RangeApi.isExpanded(editor.selection) && isPlaceholderActive(editor));
+  const disabled = selection === null || (RangeApi.isExpanded(selection) && isPlaceholderActive(editor));
 
   return (
     <span ref={ref}>

diff --git a/frontend/src/plate/utils/transforms.ts b/frontend/src/plate/utils/transforms.ts
@@ -3,7 +3,7 @@ import { ELEMENT_PLACEHOLDER } from '@app/plate/plugins/element-types';
 import { createPageBreak, createPlaceHolder, createSimpleParagraph } from '@app/plate/templates/helpers';
 import type { PlaceholderElement } from '@app/plate/types';
 import { isInTable, isPlaceholderActive } from '@app/plate/utils/queries';
-import { RangeApi, TextApi } from '@udecode/plate';
+import { RangeApi } from '@udecode/plate';
 import type { PlateEditor } from '@udecode/plate-core/react';
 import { Range } from 'slate';
 
@@ -17,9 +17,7 @@ export const insertPageBreak = (editor: PlateEditor): boolean => {
   return true;
 };
 
-export const insertPlaceholderFromSelection = (editor: PlateEditor) => {
-  const { selection } = editor;
-
+export const insertPlaceholderFromSelection = (editor: PlateEditor, selection: Range | null) => {
   if (selection === null || RangeApi.isCollapsed(selection)) {
     return;
   }
@@ -32,9 +30,9 @@ export const insertPlaceholderFromSelection = (editor: PlateEditor) => {
 
   editor.tf.withoutNormalizing(() => {
     editor.tf.delete();
-    editor.tf.insertNodes([createPlaceHolder(textFromSelection), { text: '' }], {
+    editor.tf.insertNode(createPlaceHolder(textFromSelection), {
       at: Range.start(selection),
-      match: TextApi.isText,
+      select: true,
     });
   });
 };