Smart editor selection: Ensure start word is fully selected if selection spans multiple words

Author: eriksson-daniel

frontend/src/plate/plugins/plugin-sets/default.ts

@@ -16,6 +16,7 @@ import { ELEMENT_MALTEKST, ELEMENT_PLACEHOLDER } from '@app/plate/plugins/elemen
 import { createNormalizeNodePlugin } from '@app/plate/plugins/normalize-node';
 import { createPageBreakPlugin } from '@app/plate/plugins/page-break';
 import { createProhibitDeletionPlugin } from '@app/plate/plugins/prohibit-deletion/prohibit-deletion';
+import { createSelectionPlugin } from '@app/plate/plugins/selection';
 
 export const defaultPlugins: PlatePlugin[] = [
   createInsertDataPlugin(),
@@ -90,6 +91,7 @@ export const defaultPlugins: PlatePlugin[] = [
   createPageBreakPlugin(),
   createProhibitDeletionPlugin(),
   createCopyPlugin(),
+  createSelectionPlugin(),
   createNormalizeNodePlugin(),
   createCustomAbbreviationPlugin(),
 ];

frontend/src/plate/plugins/selection.ts

@@ -0,0 +1,60 @@
+import { createPluginFactory, getNode, getSelectionText, isText } from '@udecode/plate-common';
+import { Range } from 'slate';
+
+export const createSelectionPlugin = createPluginFactory({
+  key: 'selection',
+  withOverrides: (editor) => {
+    const { select } = editor;
+
+    editor.select = (target) => {
+      if (!Range.isRange(target) || Range.isCollapsed(target)) {
+        return select(target);
+      }
+
+      if (!containsMultipleWords(getSelectionText(editor))) {
+        return select(target);
+      }
+
+      const node = getNode(editor, target.anchor.path);
+
+      if (!isText(node)) {
+        return select(target);
+      }
+
+      const isForward = Range.isForward(target);
+
+      const anchorOffset = isForward
+        ? getWordStart(node.text, target.anchor.offset)
+        : getWordEnd(node.text, target.anchor.offset);
+
+      const focusOffset = isForward
+        ? getWordEnd(node.text, target.focus.offset)
+        : getWordStart(node.text, target.focus.offset);
+
+      return select({
+        anchor: { ...target.anchor, offset: anchorOffset },
+        focus: { ...target.focus, offset: focusOffset },
+      });
+    };
+
+    return editor;
+  },
+});
+
+const START_REGEX = /\S+$/;
+const END_REGEX = /^\S*/;
+const CONTAINS_REGEX = /\s/;
+
+const getWordStart = (text: string, offset: number): number => {
+  const match = text.slice(0, offset).match(START_REGEX);
+
+  return match ? offset - match[0].length : offset;
+};
+
+const getWordEnd = (text: string, offset: number): number => {
+  const match = text.slice(offset).match(END_REGEX);
+
+  return match ? offset + match[0].length : offset;
+};
+
+const containsMultipleWords = (text: string): boolean => CONTAINS_REGEX.test(text);