Update the remaining code to use Plate API

Author: kudlajz

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 { SlateEditor } from '@udecode/plate-common';
 import type { Node, NodeEntry, Path } from 'slate';
-import { Editor, Transforms } 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,16 +17,15 @@ 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) },
     );
@@ -37,7 +36,7 @@ function isAlignmentRoot([node, path]: NodeEntry): boolean {
     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 = editor.above({ at: path });
     return parent !== undefined && isAlignmentRoot(parent) && isAlignableElement(node);
 }

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/isCursorOnEdgeOfContainer.ts

@@ -1,19 +1,19 @@
-import { Editor } from 'slate';
+import type { SlateEditor } from '@udecode/plate-common';
+import { toDOMRange } from '@udecode/slate-react';
 import type { Range, Point } from 'slate';
-import { ReactEditor } from 'slate-react';
 
 export type ContainerEdge = 'top' | 'bottom';
 
-export function isCursorOnFirstLine(editor: ReactEditor, container: Point, cursor: Point): boolean {
+export function isCursorOnFirstLine(editor: SlateEditor, container: Point, cursor: Point): boolean {
     return isCursorOnEdgeOfContainer(editor, container, cursor, 'top');
 }
 
-export function isCursorOnLastLine(editor: ReactEditor, container: Point, cursor: Point): boolean {
+export function isCursorOnLastLine(editor: SlateEditor, container: Point, cursor: Point): boolean {
     return isCursorOnEdgeOfContainer(editor, container, cursor, 'bottom');
 }
 
 export function isCursorOnEdgeOfContainer(
-    editor: ReactEditor,
+    editor: SlateEditor,
     container: Point,
     cursor: Point,
     edge: ContainerEdge,
@@ -33,8 +33,8 @@ export function isCursorOnEdgeOfContainer(
     }
 }
 
-function getPointRect(editor: ReactEditor, point: Point) {
-    const range = Editor.range(editor, { ...point, offset: Math.max(point.offset, 0) });
+function getPointRect(editor: SlateEditor, point: Point) {
+    const range = editor.range({ ...point, offset: Math.max(point.offset, 0) });
     try {
         return getRangeRect(editor, range);
     } catch {
@@ -45,8 +45,9 @@ function getPointRect(editor: ReactEditor, point: Point) {
 /**
  * @throws error when `ReactEditor.toDOMRange()` cannot match range to a DOM node
  */
-function getRangeRect(editor: ReactEditor, range: Range) {
-    const domRange = ReactEditor.toDOMRange(editor, range);
+function getRangeRect(editor: SlateEditor, range: Range) {
+    const domRange = toDOMRange(editor, range);
+    // @ts-expect-error TODO: Fix this
     const rects = domRange.getClientRects();
 
     // if the cursor will be in the beginning of next line there will be two rects:
@@ -55,5 +56,6 @@ function getRangeRect(editor: ReactEditor, range: Range) {
         return Array.from(rects);
     }
 
+    // @ts-expect-error TODO: Fix this
     return [domRange.getBoundingClientRect()];
 }

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

@@ -1,7 +1,7 @@
+import type { SlateEditor } from '@udecode/plate-common';
 import type { Text } from 'slate';
-import { Editor } from 'slate';
 
-export function isMarkActive<T extends Text>(editor: Editor, mark: keyof Omit<T, 'text'>): boolean {
-    const marks = Editor.marks(editor) as Record<keyof T, boolean>;
+export function isMarkActive<T extends Text>(editor: SlateEditor, mark: keyof Omit<T, 'text'>): boolean {
+    const marks = editor.getMarks() as Record<keyof T, boolean>;
     return marks ? marks[mark] === true : false;
 }

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

@@ -1,5 +1,5 @@
-import type { Editor, Path } from 'slate';
-import { Transforms } from 'slate';
+import type { SlateEditor } from '@udecode/plate-common';
+import type { Path } from 'slate';
 import { v4 as uuidV4 } from 'uuid';
 
 const DIRTY_PROPERTY_NAME = uuidV4();
@@ -9,7 +9,7 @@ const DIRTY_PROPERTY_NAME = uuidV4();
  * It is useful when a normalization is applicable on a node multiple times.
  * Without it, Slate will not run subsequent normalization.
  */
-export function makeDirty(editor: Editor, at: Path): void {
-    Transforms.setNodes(editor, { [DIRTY_PROPERTY_NAME]: uuidV4() }, { at });
-    Transforms.setNodes(editor, { [DIRTY_PROPERTY_NAME]: undefined }, { at });
+export function makeDirty(editor: SlateEditor, at: Path): void {
+    editor.setNodes({ [DIRTY_PROPERTY_NAME]: uuidV4() }, { at });
+    editor.setNodes({ [DIRTY_PROPERTY_NAME]: undefined }, { at });
 }

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

@@ -1,13 +1,13 @@
+import type { SlateEditor } from '@udecode/plate-common';
 import type { Location } from 'slate';
-import { Editor, Transforms } from 'slate';
 
 export function moveCursorToNextBlock(
-    editor: Editor,
+    editor: SlateEditor,
     location: Location | null = editor.selection,
 ): void {
     if (location) {
-        const next = Editor.after(editor, location, { unit: 'block' });
-        const nextBlockPoint = next ?? Editor.end(editor, []);
-        Transforms.select(editor, nextBlockPoint);
+        const next = editor.after(location, { unit: 'block' });
+        const nextBlockPoint = next ?? editor.end([]);
+        editor.select(nextBlockPoint);
     }
 }

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

@@ -1,13 +1,13 @@
+import type { SlateEditor } from '@udecode/plate-common';
 import type { Location } from 'slate';
-import { Editor, Transforms } from 'slate';
 
 export function moveCursorToPreviousBlock(
-    editor: Editor,
+    editor: SlateEditor,
     location: Location | null = editor.selection,
 ): void {
     if (location) {
-        const before = Editor.before(editor, location, { unit: 'block' });
-        const prevBlockPoint = before ?? Editor.start(editor, []);
-        Transforms.select(editor, prevBlockPoint);
+        const before = editor.before(location, { unit: 'block' });
+        const prevBlockPoint = before ?? editor.start([]);
+        editor.select(prevBlockPoint);
     }
 }

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

@@ -1,16 +1,17 @@
 import type { ElementNode } from '@prezly/slate-types';
 import { isElementNode } from '@prezly/slate-types';
+import { isInline, isVoid, type SlateEditor } from '@udecode/plate-common';
 import type { ElementEntry } from 'slate';
-import { Editor, Element, Transforms } from 'slate';
+import { Element } from 'slate';
 
 import { makeDirty } from './makeDirty';
 
 export function normalizeNestedElement(
-    editor: Editor,
+    editor: SlateEditor,
     [element, path]: ElementEntry,
     isParentAllowed: (element: Element) => boolean,
 ): boolean {
-    const ancestor = Editor.above(editor, { at: path });
+    const ancestor = editor.above({ at: path });
     if (!ancestor) {
         return false;
     }
@@ -28,17 +29,17 @@ export function normalizeNestedElement(
     makeDirty(editor, path);
 
     if (
-        Editor.isInline(editor, element) ||
-        Editor.isVoid(editor, element) ||
+        isInline(editor, element) ||
+        isVoid(editor, element) ||
         isElementNode(ancestorNode, (element as ElementNode).type)
     ) {
         if (ancestorNode.children.length === 1) {
-            Transforms.unwrapNodes(editor, { at: ancestorPath, voids: true });
+            editor.unwrapNodes({ at: ancestorPath, voids: true });
         } else {
-            Transforms.liftNodes(editor, { at: path, voids: true });
+            editor.liftNodes({ at: path, voids: true });
         }
     } else {
-        Transforms.unwrapNodes(editor, { at: path });
+        editor.unwrapNodes({ at: path });
     }
 
     return true;

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

@@ -1,12 +1,12 @@
-import type { Editor, ElementEntry } from 'slate';
-import { Transforms } from 'slate';
+import type { SlateEditor } from '@udecode/plate-common';
+import type { ElementEntry } from 'slate';
 
 import { NODE_ID_MANAGER_ID_PROPERTY_NAME } from '../constants';
 
 const GLOBALLY_ALLOWED_ATTRIBUTES = [NODE_ID_MANAGER_ID_PROPERTY_NAME];
 
 export function normalizeRedundantAttributes(
-    editor: Editor,
+    editor: SlateEditor,
     [element, path]: ElementEntry,
     allowedAttributes: string[],
 ): boolean {
@@ -27,7 +27,7 @@ export function normalizeRedundantAttributes(
         {},
     );
 
-    Transforms.setNodes(editor, attributesToUnset, { at: path });
+    editor.setNodes(attributesToUnset, { at: path });
 
     return true;
 }

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

@@ -1,12 +1,13 @@
+import type { SlateEditor } from '@udecode/plate-common';
 import type { NodeEntry } from 'slate';
-import { Editor, Element, Text, Transforms } from 'slate';
+import { Element, Text } from 'slate';
 
 /**
  * Ensures given element has a single, empty `Text` child.
  * Returns `true` when removal occurred.
  * Returns `false` when nothing changed.
  */
-export function removeChildren(editor: Editor, [node, path]: NodeEntry): boolean {
+export function removeChildren(editor: SlateEditor, [node, path]: NodeEntry): boolean {
     if (!Element.isElement(node)) {
         return false;
     }
@@ -17,11 +18,11 @@ export function removeChildren(editor: Editor, [node, path]: NodeEntry): boolean
         return false;
     }
 
-    Editor.withoutNormalizing(editor, () => {
-        Transforms.insertNodes(editor, [{ text: '' }], { at: [...path, 0] });
+    editor.withoutNormalizing(() => {
+        editor.insertNodes([{ text: '' }], { at: [...path, 0] });
 
         node.children.forEach(() => {
-            Transforms.removeNodes(editor, {
+            editor.removeNodes({
                 at: [...path, 1],
                 voids: true,
             });

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

@@ -1,14 +1,14 @@
+import type { SlateEditor } from '@udecode/plate-common';
 import type { Node } from 'slate';
-import { Editor, Transforms } from 'slate';
 
 export function removeNode<N extends Node>(
-    editor: Editor,
-    options: NonNullable<Parameters<typeof Editor.nodes>[1]>,
+    editor: SlateEditor,
+    options: NonNullable<Parameters<typeof editor.nodes>[0]>,
 ): N | null {
-    const [nodeEntry] = Editor.nodes<N>(editor, options);
+    const [nodeEntry] = editor.nodes<N>(options);
     if (nodeEntry) {
         const [node, nodePath] = nodeEntry;
-        Transforms.removeNodes(editor, { at: nodePath });
+        editor.removeNodes({ at: nodePath });
         return node;
     }
     return null;

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

@@ -1,15 +1,16 @@
+import type { SlateEditor } from '@udecode/plate-common';
+import { toDOMRange } from '@udecode/slate-react';
 import type { Range } from 'slate';
-import { ReactEditor } from 'slate-react';
 
 /**
  * Type-safe wrapper for `ReactEditor.toDOMRange`
  */
-export function toDomRange(editor: ReactEditor, range: Range): globalThis.Range | null {
+export function toDomRange(editor: SlateEditor, range: Range): globalThis.Range | null {
     try {
         // "Slate throws exceptions too liberally in relation to selection failures"
         // see: https://app.clubhouse.io/prezly/story/20456/error-cannot-resolve-a-dom-node-from-slate-node-text
         // see: https://github.com/ianstormtaylor/slate/issues/3641
-        return ReactEditor.toDOMRange(editor, range);
+        return toDOMRange(editor, range) ?? null;
     } catch {
         return null;
     }

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

@@ -1,18 +1,18 @@
+import type { SlateEditor } from '@udecode/plate-common';
 import type { Text } from 'slate';
-import { Editor } from 'slate';
 
 import { isMarkActive } from './isMarkActive';
 
 export function toggleMark<T extends Text>(
-    editor: Editor,
+    editor: SlateEditor,
     mark: keyof Omit<T, 'text'>,
     force?: boolean,
 ): void {
     const shouldSet = force ?? !isMarkActive(editor, mark);
 
     if (shouldSet) {
-        Editor.addMark(editor, mark as string, true);
+        editor.addMark(mark as string, true);
     } else {
-        Editor.removeMark(editor, mark as string);
+        editor.removeMark(mark as string);
     }
 }

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

@@ -1,16 +1,15 @@
-import { Transforms } from 'slate';
+import type { SlateEditor } from '@udecode/plate-common';
 import type { Text, NodeEntry } from 'slate';
-import type { Editor } from 'slate';
 
 export function unsetMark<T extends Text>(
-    editor: Editor,
+    editor: SlateEditor,
     entry: NodeEntry<T>,
     mark: keyof Omit<T, 'text'>,
 ) {
     const [node, path] = entry;
 
     if (node[mark]) {
-        Transforms.unsetNodes<T>(editor, mark.toString(), {
+        editor.unsetNodes(mark.toString(), {
             at: path,
             match: (n) => n === node,
         });

packages/slate-commons/src/plugins/withNormalization.ts

@@ -1,10 +1,9 @@
-/* eslint-disable no-param-reassign */
-import type { Editor } from 'slate';
+import type { SlateEditor } from '@udecode/plate-common';
 
 import type { Extension } from '../types';
 
 export function withNormalization(getExtensions: () => Extension[]) {
-    return function <T extends Editor>(editor: T) {
+    return function <T extends SlateEditor>(editor: T) {
         const { normalizeNode } = editor;
 
         editor.normalizeNode = (entry) => {

packages/slate-commons/src/types/Normalize.ts

@@ -1,3 +1,4 @@
-import type { Editor, NodeEntry } from 'slate';
+import type { SlateEditor } from '@udecode/plate-common';
+import type { NodeEntry } from 'slate';
 
-export type Normalize = (editor: Editor, entry: NodeEntry) => boolean;
+export type Normalize = (editor: SlateEditor, entry: NodeEntry) => boolean;

packages/slate-commons/src/types/WithOverrides.ts

@@ -1,3 +1,3 @@
-import type { Editor } from 'slate';
+import type { SlateEditor } from '@udecode/plate-common';
 
-export type WithOverrides = <T extends Editor>(editor: T) => T;
+export type WithOverrides = <T extends SlateEditor>(editor: T) => T;

packages/slate-editor/package.json

@@ -69,7 +69,6 @@
         "@technically/is-not-undefined": "^1.0.0",
         "@technically/lodash": "^4.17.0",
         "@types/combine-reducers": "^1.0.1",
-        "@udecode/plate-core": "^9.0.0",
         "classnames": "^2.3.1",
         "combine-reducers": "^1.0.0",
         "emoji-picker-react": "^4.10.0",