Merge pull request #3086 from udecode/fix/table-mark

fix: table-marks

.changeset/clever-flowers-approve.md

@@ -0,0 +1,5 @@
+---
+"@udecode/slate-utils": patch
+---
+
+`toggleMark` use `editor.removeMark`

.changeset/tender-geckos-cover.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-table": patch
+---
+
+fix add/removeMark behavior When selection is aboving table.

packages/slate-utils/src/transforms/toggleMark.ts

@@ -25,7 +25,7 @@ export const toggleMark = <V extends Value = Value>(
     const isActive = isMarkActive(editor, key);
 
     if (isActive) {
-      removeMark(editor, { key });
+      editor.removeMark(key);
       return;
     }
 

packages/table/src/withMarkTable.tsx

@@ -0,0 +1,97 @@
+import {
+  getNodeEntries,
+  isCollapsed,
+  isText,
+  PlateEditor,
+  setNodes,
+  unsetNodes,
+  Value,
+} from '@udecode/plate-common';
+
+import { getTableGridAbove } from './queries';
+
+export const withMarkTable = <
+  V extends Value = Value,
+  E extends PlateEditor<V> = PlateEditor<V>,
+>(
+  editor: E
+) => {
+  const { addMark, removeMark, getMarks } = editor;
+
+  editor.addMark = (key: string, value: any) => {
+    const { selection } = editor;
+    if (!selection || isCollapsed(selection)) return addMark(key, value);
+
+    const matchesCell = getTableGridAbove(editor, { format: 'cell' });
+
+    if (matchesCell.length === 0) return addMark(key, value);
+
+    matchesCell.forEach(([cell, cellPath]) => {
+      setNodes(
+        editor,
+        //@ts-ignore
+        {
+          [key]: value,
+        },
+        {
+          at: cellPath,
+          match: (n) => isText(n),
+          split: true,
+          voids: true,
+        }
+      );
+    });
+  };
+
+  editor.removeMark = (key: string) => {
+    const { selection } = editor;
+    if (!selection || isCollapsed(selection)) return removeMark(key);
+
+    const matchesCell = getTableGridAbove(editor, { format: 'cell' });
+
+    if (matchesCell.length === 0) return removeMark(key);
+
+    matchesCell.forEach(([cell, cellPath]) => {
+      unsetNodes(editor, key, {
+        at: cellPath,
+        match: (n) => isText(n),
+        split: true,
+        voids: true,
+      });
+    });
+  };
+
+  editor.getMarks = () => {
+    const { selection } = editor;
+
+    if (!selection || isCollapsed(selection)) return getMarks();
+
+    const matchesCell = getTableGridAbove(editor, { format: 'cell' });
+
+    if (matchesCell.length === 0) return getMarks();
+
+    const totalMarks: Record<string, any> = {};
+
+    matchesCell.forEach(([cell, cellPath]) => {
+      const textNodeEntry = getNodeEntries(editor, {
+        at: cellPath,
+        match: (n) => isText(n),
+      });
+
+      Array.from(textNodeEntry, (item) => item[0]).forEach((item) => {
+        const keys = Object.keys(item);
+        if (keys.length === 1) return;
+
+        keys.splice(keys.indexOf('text'), 1);
+
+        keys.forEach((k) => {
+          totalMarks[k] = true;
+        });
+      });
+    });
+
+    return totalMarks;
+  };
+
+  return editor;
+};

packages/table/src/withTable.ts

@@ -5,6 +5,7 @@ import { withDeleteTable } from './withDeleteTable';
 import { withGetFragmentTable } from './withGetFragmentTable';
 import { withInsertFragmentTable } from './withInsertFragmentTable';
 import { withInsertTextTable } from './withInsertTextTable';
+import { withMarkTable } from './withMarkTable';
 import { withNormalizeTable } from './withNormalizeTable';
 import { withSelectionTable } from './withSelectionTable';
 import { withSetFragmentDataTable } from './withSetFragmentDataTable';
@@ -23,6 +24,7 @@ export const withTable = <
   editor = withInsertTextTable<V, E>(editor, plugin);
   editor = withSelectionTable<V, E>(editor);
   editor = withSetFragmentDataTable<V, E>(editor);
+  editor = withMarkTable<V, E>(editor);
 
   return editor;
 };