Refactor - Migrate to Plate

lerna.json

@@ -1,4 +1,4 @@
 {
     "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-    "version": "0.117.0"
+    "version": "0.117.4-alpha.0"
 }

package.json

@@ -41,9 +41,9 @@
         "@types/react-dom": "^18.3.0",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",
-        "slate": "^0.101.5",
-        "slate-history": "^0.100.0",
-        "slate-react": "^0.101.5"
+        "slate": "^0.110.2",
+        "slate-history": "^0.110.3",
+        "slate-react": "^0.111.0"
     },
     "devDependencies": {
         "@babel/cli": "^7.23.9",

packages/slate-commons/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@prezly/slate-commons",
-    "version": "0.117.0",
+    "version": "0.117.3-alpha.0",
     "description": "Low-level commands, utilities, plugins, types, etc. used throughout Prezly-Slate packages",
     "license": "MIT",
     "type": "module",
@@ -42,11 +42,12 @@
         "clean:build": "rimraf build/ *.tsbuildinfo"
     },
     "peerDependencies": {
+        "@udecode/plate-common": "^40.0.0",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",
-        "slate": "^0.101.5",
-        "slate-history": "^0.100.0",
-        "slate-react": "^0.101.5"
+        "slate": "^0.110.2",
+        "slate-history": "^0.110.3",
+        "slate-react": "^0.111.0"
     },
     "dependencies": {
         "@prezly/slate-types": "workspace:*",

packages/slate-commons/src/commands/alignment.ts

@@ -1,10 +1,10 @@
 import type { AlignableNode, Alignment } from '@prezly/slate-types';
 import { isAlignableElement, isTableCellNode } from '@prezly/slate-types';
-import type { Node, NodeEntry, Path } from 'slate';
-import { Editor, Transforms } from 'slate';
+import { getAboveNode, type SlateEditor, type TNodeEntry } from '@udecode/plate-common';
+import type { Node, Path } from 'slate';
 
-export function getAlignment(editor: Editor, defaultAlignment: Alignment): Alignment[] {
-    const nodes = Editor.nodes<AlignableNode>(editor, {
+export function getAlignment(editor: SlateEditor, defaultAlignment: Alignment): Alignment[] {
+    const nodes = editor.nodes<AlignableNode>({
         match: (node, path) => isTopLevelAlignableElement(editor, node, path),
     });
 
@@ -17,27 +17,30 @@ export function getAlignment(editor: Editor, defaultAlignment: Alignment): Align
     return [...alignments];
 }
 
-export function toggleAlignment(editor: Editor, align: Alignment | undefined): void {
+export function toggleAlignment(editor: SlateEditor, align: Alignment | undefined): void {
     if (align === undefined) {
-        Transforms.unsetNodes(editor, 'align', {
+        editor.unsetNodes('align', {
             match: (node, path) => isTopLevelAlignableElement(editor, node, path),
         });
         return;
     }
 
-    Transforms.setNodes<AlignableNode>(
-        editor,
+    editor.setNodes<AlignableNode>(
         { align },
         { match: (node, path) => isTopLevelAlignableElement(editor, node, path) },
     );
 }
 
-function isAlignmentRoot([node, path]: NodeEntry): boolean {
+function isAlignmentRoot([node, path]: TNodeEntry): boolean {
     // We allow aligning elements either at top-level or inside table cells.
     return path.length === 0 || isTableCellNode(node);
 }
 
-function isTopLevelAlignableElement(editor: Editor, node: Node, path: Path): node is AlignableNode {
-    const parent = Editor.above(editor, { at: path });
+function isTopLevelAlignableElement(
+    editor: SlateEditor,
+    node: Node,
+    path: Path,
+): node is AlignableNode {
+    const parent = getAboveNode(editor, { at: path });
     return parent !== undefined && isAlignmentRoot(parent) && isAlignableElement(node);
 }

packages/slate-commons/src/commands/blur.ts

@@ -1,6 +1,6 @@
-import type { Editor } from 'slate';
-import { ReactEditor } from 'slate-react';
+import type { SlateEditor } from '@udecode/plate-common';
+import { deselectEditor } from '@udecode/plate-common/react';
 
-export function blur(editor: Editor & ReactEditor): void {
-    ReactEditor.deselect(editor);
+export function blur(editor: SlateEditor): void {
+    deselectEditor(editor);
 }

packages/slate-commons/src/commands/findLeafLocation.ts

@@ -1,11 +1,12 @@
-import type { Editor, Location } from 'slate';
+import type { SlateEditor } from '@udecode/plate-common';
+import type { Location } from 'slate';
 import { Path, Point } from 'slate';
 
 import { findLeafPath } from './findLeafPath';
 import { findLeafPoint } from './findLeafPoint';
 import { findLeafRange } from './findLeafRange';
 
-export function findLeafLocation(editor: Editor, location: Location): Location | undefined {
+export function findLeafLocation(editor: SlateEditor, location: Location): Location | undefined {
     if (Path.isPath(location)) {
         return findLeafPath(editor, location);
     }

packages/slate-commons/src/commands/findLeafPath.ts

@@ -1,9 +1,14 @@
+import type { SlateEditor } from '@udecode/plate-common';
 import type { Path } from 'slate';
-import { Editor, Node, Text } from 'slate';
+import { Node, Text } from 'slate';
 
 export type Edge = 'highest' | 'lowest';
 
-export function findLeafPath(editor: Editor, path: Path, edge: Edge = 'highest'): Path | undefined {
+export function findLeafPath(
+    editor: SlateEditor,
+    path: Path,
+    edge: Edge = 'highest',
+): Path | undefined {
     if (!Node.has(editor, path)) {
         return undefined;
     }
@@ -14,8 +19,7 @@ export function findLeafPath(editor: Editor, path: Path, edge: Edge = 'highest')
         return path;
     }
 
-    const [, nestedPath] =
-        edge === 'highest' ? Editor.first(editor, path) : Editor.last(editor, path);
+    const [, nestedPath] = edge === 'highest' ? editor.first(path) : editor.last(path);
 
     return findLeafPath(editor, nestedPath);
 }

packages/slate-commons/src/commands/findLeafPoint.ts

@@ -1,10 +1,11 @@
-import { Editor, Path, Point } from 'slate';
+import type { SlateEditor } from '@udecode/plate-common';
+import { Path, Point } from 'slate';
 
 import type { Edge } from './findLeafPath';
 import { findLeafPath } from './findLeafPath';
 
 export function findLeafPoint(
-    editor: Editor,
+    editor: SlateEditor,
     point: Point,
     edge: Edge = 'highest',
 ): Point | undefined {
@@ -14,7 +15,7 @@ export function findLeafPoint(
         return undefined;
     }
 
-    const [, end] = Editor.edges(editor, path);
+    const [, end] = editor.edges(path);
 
     if (Path.equals(point.path, path)) {
         if (Point.isAfter(point, end)) {

packages/slate-commons/src/commands/findLeafRange.ts

@@ -1,8 +1,9 @@
-import type { Editor, Range } from 'slate';
+import type { SlateEditor } from '@udecode/plate-common';
+import type { Range } from 'slate';
 
 import { findLeafPoint } from './findLeafPoint';
 
-export function findLeafRange(editor: Editor, range: Range): Range | undefined {
+export function findLeafRange(editor: SlateEditor, range: Range): Range | undefined {
     const anchor = findLeafPoint(editor, range.anchor);
     const focus = findLeafPoint(editor, range.focus);
 

packages/slate-commons/src/commands/focus.ts

@@ -1,9 +1,9 @@
-import type { Editor } from 'slate';
-import { ReactEditor } from 'slate-react';
+import type { SlateEditor } from '@udecode/plate-common';
+import { focusEditor } from '@udecode/plate-common/react';
 
 import { moveCursorToEndOfDocument } from './moveCursorToEndOfDocument';
 
-export function focus(editor: Editor & ReactEditor): void {
-    ReactEditor.focus(editor);
+export function focus(editor: SlateEditor): void {
+    focusEditor(editor);
     moveCursorToEndOfDocument(editor);
 }

packages/slate-commons/src/commands/getCurrentDomNode.ts

@@ -1,15 +1,14 @@
-import type { Editor } from 'slate';
-import type { ReactEditor } from 'slate-react';
+import type { SlateEditor } from '@udecode/plate-common';
+import { toDOMNode } from '@udecode/plate-common/react';
 
 import { getCurrentNodeEntry } from './getCurrentNodeEntry';
-import { toDomNode } from './toDomNode';
 
-export function getCurrentDomNode(editor: Editor & ReactEditor): HTMLElement | null {
+export function getCurrentDomNode(editor: SlateEditor): HTMLElement | null {
     const [currentNode] = getCurrentNodeEntry(editor) || [];
 
     if (!currentNode) {
         return null;
     }
 
-    return toDomNode(editor, currentNode);
+    return toDOMNode(editor, currentNode) ?? null;
 }

packages/slate-commons/src/commands/getCurrentNodeEntry.ts

@@ -1,12 +1,12 @@
-import type { NodeEntry } from 'slate';
-import { Editor } from 'slate';
+import type { TNodeEntry } from '@udecode/plate-common';
+import { getNodeEntry, type SlateEditor } from '@udecode/plate-common';
 
 import { isSelectionValid } from './isSelectionValid';
 
-export function getCurrentNodeEntry(editor: Editor): NodeEntry | null {
+export function getCurrentNodeEntry(editor: SlateEditor): TNodeEntry | null {
     if (!editor.selection || !isSelectionValid(editor)) {
         return null;
     }
 
-    return Editor.node(editor, editor.selection, { depth: 1 });
+    return getNodeEntry(editor, editor.selection, { depth: 1 }) ?? null;
 }

packages/slate-commons/src/commands/getEditorRange.ts

@@ -1,14 +1,14 @@
+import type { SlateEditor } from '@udecode/plate-common';
 import type { Range } from 'slate';
-import { Editor } from 'slate';
 
-export function getEditorRange(editor: Editor): Range | undefined {
+export function getEditorRange(editor: SlateEditor): Range | undefined {
     // editor.children can sometimes be undefined, even though TypeScript says otherwise
     if (!editor.children || editor.children.length === 0) {
         return undefined;
     }
 
     return {
-        anchor: Editor.start(editor, [0]),
-        focus: Editor.end(editor, [editor.children.length - 1]),
+        anchor: editor.start([0]),
+        focus: editor.end([editor.children.length - 1]),
     };
 }

packages/slate-commons/src/commands/getNodePath.ts

@@ -1,10 +1,10 @@
+import type { SlateEditor } from '@udecode/plate-common';
 import type { Path } from 'slate';
-import { Editor } from 'slate';
 
 export function getNodePath(
-    editor: Editor,
-    options: NonNullable<Parameters<typeof Editor.nodes>[1]>,
+    editor: SlateEditor,
+    options: NonNullable<Parameters<typeof editor.nodes>[0]>,
 ): Path | null {
-    const [entry] = Editor.nodes(editor, options);
+    const [entry] = editor.nodes(options);
     return entry ? entry[1] : null;
 }

packages/slate-commons/src/commands/getPrevChars.ts

@@ -1,24 +1,25 @@
-import { Editor, Path, Text } from 'slate';
+import type { SlateEditor } from '@udecode/plate-common';
+import { Path, Text } from 'slate';
 
 import { isVoid } from './isVoid';
 
-export function getPrevChars(editor: Editor, length: number): string {
+export function getPrevChars(editor: SlateEditor, length: number): string {
     const selection = editor.selection;
 
     if (!selection) {
         return '';
     }
 
     const { focus } = selection;
-    let text = Editor.string(editor, { focus, anchor: { path: focus.path, offset: 0 } });
+    let text = editor.string({ focus, anchor: { path: focus.path, offset: 0 } });
 
     if (text.length > length) {
         return text.slice(-length);
     }
 
     const start = { path: [...Path.parent(focus.path), 0], offset: 0 };
 
-    const nodes = Editor.nodes(editor, {
+    const nodes = editor.nodes({
         mode: 'lowest',
         at: { anchor: start, focus },
         reverse: true,

packages/slate-commons/src/commands/hasVoidElements.tsx

@@ -1,9 +1,10 @@
-import type { Node, Editor } from 'slate';
+import type { SlateEditor } from '@udecode/plate-common';
+import type { Node } from 'slate';
 import { Text } from 'slate';
 
 import { isVoid } from './isVoid';
 
-export function hasVoidElements(editor: Editor, node: Node): boolean {
+export function hasVoidElements(editor: SlateEditor, node: Node): boolean {
     if (Text.isText(node)) {
         return false;
     }

packages/slate-commons/src/commands/index.ts

@@ -23,7 +23,6 @@ export {
 } from './isCursorOnEdgeOfContainer';
 export { isEmpty } from './isEmpty';
 export { isEmptyParagraphElement } from './isEmptyParagraphElement';
-export { isInline } from './isInline';
 export { isMarkActive } from './isMarkActive';
 export { isNodeEmpty } from './isNodeEmpty';
 export { isSelectionAtBlockEnd } from './isSelectionAtBlockEnd';
@@ -53,7 +52,5 @@ export {
 } from './roughly-normalize';
 export { saveSelection } from './saveSelection';
 export { selectNode } from './selectNode';
-export { toDomNode } from './toDomNode';
-export { toDomRange } from './toDomRange';
 export { toggleMark } from './toggleMark';
 export { unsetMark } from './unsetMark';

packages/slate-commons/src/commands/insertEmptyParagraph.ts

@@ -1,7 +1,7 @@
 import type { ParagraphNode } from '@prezly/slate-types';
 import { PARAGRAPH_NODE_TYPE } from '@prezly/slate-types';
-import type { Editor, Location } from 'slate';
-import { Transforms } from 'slate';
+import type { SlateEditor } from '@udecode/plate-common';
+import type { Location } from 'slate';
 
 function createEmptyParagraph(): ParagraphNode {
     return {
@@ -11,10 +11,10 @@ function createEmptyParagraph(): ParagraphNode {
 }
 
 export function insertEmptyParagraph(
-    editor: Editor,
+    editor: SlateEditor,
     options: { at?: Location; select?: boolean } = {},
 ): void {
     // Using `mode: 'highest' under assumption that "paragraph" can only be
     // at the root of the document.
-    Transforms.insertNodes(editor, [createEmptyParagraph()], { ...options, mode: 'highest' });
+    editor.insertNodes([createEmptyParagraph()], { ...options, mode: 'highest' });
 }