Make placeholder navigation more intuitive

Author: cskrov

frontend/src/plate/functions/is-editable-text.ts

@@ -0,0 +1,35 @@
+import { ELEMENT_PLACEHOLDER, ELEMENT_REGELVERK_CONTAINER, UNCHANGEABLE } from '@app/plate/plugins/element-types';
+import { NodeApi, type Path } from 'platejs';
+import type { PlateEditor } from 'platejs/react';
+
+export const isEditableTextNode = (editor: PlateEditor, path: Path): boolean => {
+  const parent = editor.api.parent(path);
+
+  if (parent === undefined) {
+    return false;
+  }
+
+  const [parentNode] = parent;
+
+  if (parentNode.type === ELEMENT_PLACEHOLDER) {
+    return true;
+  }
+
+  const ancestors = NodeApi.ancestors(editor, path, { reverse: true });
+
+  for (const [ancestor] of ancestors) {
+    if (
+      NodeApi.isEditor(ancestor) ||
+      ancestor.type === ELEMENT_PLACEHOLDER ||
+      ancestor.type === ELEMENT_REGELVERK_CONTAINER
+    ) {
+      return true;
+    }
+
+    if (UNCHANGEABLE.includes(ancestor.type)) {
+      return false;
+    }
+  }
+
+  return false;
+};

frontend/src/plate/plate-editor.tsx

@@ -1,16 +1,14 @@
 import { merge } from '@app/functions/classes';
 import type { SpellCheckLanguage } from '@app/hooks/use-smart-editor-language';
-import { ELEMENT_MALTEKST, ELEMENT_PLACEHOLDER } from '@app/plate/plugins/element-types';
-import type { FormattedText } from '@app/plate/types';
+import { isEditableTextNode } from '@app/plate/functions/is-editable-text';
 import {
   PlateContent,
   type PlateContentProps,
   type PlateEditor,
   useEditorReadOnly,
   useEditorRef,
 } from '@platejs/core/react';
-import { NodeApi } from 'platejs';
-import type { HTMLAttributes } from 'react';
+import type { TText } from 'platejs';
 
 interface Props extends PlateContentProps {
   lang: SpellCheckLanguage;
@@ -27,44 +25,24 @@ export const KabalPlateEditor = ({ className, spellCheck = true, ...props }: Pro
       className={merge('min-h-full outline-none', className)}
       spellCheck={spellCheck}
       renderLeaf={({ attributes, children, text }) => (
-        <span {...attributes} contentEditable={contentEditable(editor, readOnly, text)} suppressContentEditableWarning>
+        <span
+          {...attributes}
+          contentEditable={readOnly ? false : getContentEditable(editor, text)}
+          suppressContentEditableWarning
+        >
           {children}
         </span>
       )}
     />
   );
 };
 
-const contentEditable = (
-  editor: PlateEditor,
-  isReadOnly: boolean,
-  text: FormattedText,
-): HTMLAttributes<HTMLSpanElement>['contentEditable'] => {
-  if (isReadOnly) {
-    return undefined;
-  }
-
-  const path = editor.api.findPath(text);
+const getContentEditable = (editor: PlateEditor, textNode: TText) => {
+  const path = editor.api.findPath(textNode);
 
   if (path === undefined) {
     return false;
   }
 
-  const ancestorEntries = NodeApi.ancestors(editor, path, { reverse: true });
-
-  if (ancestorEntries === undefined) {
-    return false;
-  }
-
-  for (const [node] of ancestorEntries) {
-    if (node.type === ELEMENT_PLACEHOLDER) {
-      return true;
-    }
-
-    if (node.type === ELEMENT_MALTEKST) {
-      return false;
-    }
-  }
-
-  return true;
+  return isEditableTextNode(editor, path);
 };

frontend/src/plate/plugins/placeholder/arrows.ts

@@ -0,0 +1,62 @@
+import { isMetaKey, Keys } from '@app/keys';
+import { ELEMENT_PLACEHOLDER } from '@app/plate/plugins/element-types';
+import { selectNextTextNode } from '@app/plate/plugins/placeholder/select-next-text-node';
+import { selectPreviousTextNode } from '@app/plate/plugins/placeholder/select-previous-text-node';
+import type { PlateEditor } from 'platejs/react';
+import type { KeyboardEvent } from 'react';
+
+export const handleNavigation = (editor: PlateEditor, event: KeyboardEvent): boolean => {
+  if (editor.selection === null || isMetaKey(event) || editor.api.isExpanded()) {
+    return false;
+  }
+
+  if (
+    event.key !== Keys.Enter &&
+    event.key !== Keys.ArrowRight &&
+    event.key !== Keys.ArrowLeft &&
+    event.key !== Keys.ArrowUp &&
+    event.key !== Keys.ArrowDown
+  ) {
+    return false;
+  }
+
+  const placeholderEntry = editor.api.node({ match: { type: ELEMENT_PLACEHOLDER } });
+
+  if (placeholderEntry === undefined) {
+    return false;
+  }
+
+  const [, placeholderPath] = placeholderEntry;
+
+  if (event.key === Keys.Enter) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    event.shiftKey ? selectPreviousTextNode(editor, placeholderPath) : selectNextTextNode(editor, placeholderPath);
+    return true; // Prevent further handling
+  }
+
+  if (
+    event.key === Keys.ArrowDown ||
+    (event.key === Keys.ArrowRight && editor.api.isEnd(editor.selection.focus, placeholderPath))
+  ) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    selectNextTextNode(editor, placeholderPath);
+    return true; // Prevent further handling
+  }
+
+  if (
+    event.key === Keys.ArrowUp ||
+    (event.key === Keys.ArrowLeft && editor.api.isStart(editor.selection.focus, placeholderPath))
+  ) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    selectPreviousTextNode(editor, placeholderPath);
+    return true; // Prevent further handling
+  }
+
+  return false;
+};

frontend/src/plate/plugins/placeholder/handle-navigation.ts

@@ -1,6 +1,6 @@
 import { isMetaKey } from '@app/keys';
 import { RedaktørPlaceholder } from '@app/plate/components/placeholder/placeholder';
-import { handleArrows } from '@app/plate/plugins/placeholder/arrows';
+import { handleNavigation } from '@app/plate/plugins/placeholder/handle-navigation';
 import { parsers } from '@app/plate/plugins/placeholder/html-parsers';
 import { handleSelectAll } from '@app/plate/plugins/placeholder/select-all';
 import { isPlaceholderActive } from '@app/plate/utils/queries';
@@ -17,12 +17,17 @@ export const RedaktoerPlaceholderPlugin = createPlatePlugin({
     isInline: true,
     component: RedaktørPlaceholder,
   },
+  rules: { selection: { affinity: 'directional' } }, // Makes it possible to place the caret at the edges of the placeholder in Chrome.
   handlers: {
     onKeyDown: ({ editor, event }) => {
-      if (handleSelectAll(editor, event) || handleArrows(editor, event)) {
+      if (handleSelectAll(editor, event)) {
         return;
       }
 
+      if (handleNavigation(editor, event)) {
+        return true; // Prevent further handling
+      }
+
       if (isMetaKey(event) && event.key.toLowerCase() === 'j') {
         event.preventDefault();
         event.stopPropagation();

frontend/src/plate/plugins/placeholder/redaktoer.ts

@@ -1,14 +1,14 @@
-import { isMetaKey } from '@app/keys';
+import { isMetaKey, Keys } from '@app/keys';
 import { SaksbehandlerPlaceholder } from '@app/plate/components/placeholder/placeholder';
-import { handleArrows } from '@app/plate/plugins/placeholder/arrows';
+import { handleNavigation } from '@app/plate/plugins/placeholder/handle-navigation';
 import { parsers } from '@app/plate/plugins/placeholder/html-parsers';
 import { handleSelectAll } from '@app/plate/plugins/placeholder/select-all';
+import { withOverrides } from '@app/plate/plugins/placeholder/with-overrides';
 import { createPlatePlugin, type PlateEditor } from '@platejs/core/react';
 import { ElementApi, type NodeEntry } from 'platejs';
 import type { BasePoint } from 'slate';
 import type { PlaceholderElement } from '../../types';
 import { ELEMENT_PLACEHOLDER } from '../element-types';
-import { withOverrides } from './with-overrides';
 
 export const SaksbehandlerPlaceholderPlugin = createPlatePlugin({
   key: ELEMENT_PLACEHOLDER,
@@ -18,13 +18,18 @@ export const SaksbehandlerPlaceholderPlugin = createPlatePlugin({
     isInline: true,
     component: SaksbehandlerPlaceholder,
   },
+  rules: { selection: { affinity: 'directional' } }, // Makes it possible to place the caret at the edges of the placeholder in Chrome.
   handlers: {
     onKeyDown: ({ editor, event }) => {
-      if (handleSelectAll(editor, event) || handleArrows(editor, event)) {
+      if (handleSelectAll(editor, event)) {
         return;
       }
 
-      if (isMetaKey(event) && event.key.toLowerCase() === 'j') {
+      if (handleNavigation(editor, event)) {
+        return true; // Prevent further handling
+      }
+
+      if (isMetaKey(event) && event.key.toLowerCase() === Keys.J) {
         event.preventDefault();
         event.stopPropagation();
 

frontend/src/plate/plugins/placeholder/saksbehandler.ts

@@ -0,0 +1,29 @@
+import { isEditableTextNode } from '@app/plate/functions/is-editable-text';
+import { type Path, TextApi, type TText } from 'platejs';
+import type { PlateEditor } from 'platejs/react';
+
+export const selectNextTextNode = (editor: PlateEditor, currentPath: Path): boolean => {
+  const next = editor.api.next<TText>({
+    at: currentPath,
+    mode: 'lowest',
+    text: true,
+    match: (n, p) => TextApi.isText(n) && isEditableTextNode(editor, p),
+  });
+
+  if (next === undefined) {
+    return false;
+  }
+
+  const [, nextPath] = next;
+
+  const nextStartPoint = editor.api.start(nextPath);
+
+  if (nextStartPoint === undefined) {
+    return false;
+  }
+
+  editor.tf.select(nextStartPoint);
+  editor.tf.focus();
+
+  return true;
+};

frontend/src/plate/plugins/placeholder/select-next-text-node.ts

@@ -0,0 +1,29 @@
+import { isEditableTextNode } from '@app/plate/functions/is-editable-text';
+import { type Path, TextApi, type TText } from 'platejs';
+import type { PlateEditor } from 'platejs/react';
+
+export const selectPreviousTextNode = (editor: PlateEditor, currentPath: Path): boolean => {
+  const previous = editor.api.previous<TText>({
+    at: currentPath,
+    mode: 'lowest',
+    text: true,
+    match: (n, p) => TextApi.isText(n) && isEditableTextNode(editor, p),
+  });
+
+  if (previous === undefined) {
+    return false;
+  }
+
+  const [, previousPath] = previous;
+
+  const previousEndPoint = editor.api.end(previousPath);
+
+  if (previousEndPoint === undefined) {
+    return false;
+  }
+
+  editor.tf.select(previousEndPoint);
+  editor.tf.focus();
+
+  return true;
+};