Merge remote-tracking branch 'refs/remotes/origin/feature/dev-19130-u…

…pgrade-plate-to-v42' into refactor/dev-19141-find-a-way-to-make-hoc-func-plugins-introducing-new-editor # Conflicts: # packages/slate-editor/src/index.ts # packages/slate-editor/src/modules/editor/createEditor.ts # packages/slate-editor/src/modules/editor/index.ts # packages/slate-editor/src/modules/editor/plugins/ElementsEqualityCheckPlugin.ts # packages/slate-editor/src/modules/editor/plugins/withDefaultTextBlock.ts # packages/slate-editor/src/modules/editor/plugins/withRichBlocks.ts # packages/slate-editor/src/modules/editor/useCreateEditor.ts # packages/slate-types/src/nodes/ElementNode.ts # packages/slate-types/src/nodes/TableNode.ts # packages/slate-types/src/nodes/TextNode.ts
prezly · Jan 15, 2025 · d04aae7 · d04aae7
2 parents 94a3fd8 + f4d160e
commit d04aae7
Show file tree

Hide file tree

Showing 298 changed files with 896 additions and 1,040 deletions.
diff --git a/packages/slate-commons/src/commands/isAtEmptyBlock.ts b/packages/slate-commons/src/commands/isAtEmptyBlock.ts
@@ -29,6 +29,8 @@ export function isAtEmptyBlock(
 
     const [node] = entry;
     return (
-        ElementApi.isElement(node) && editor.api.isBlock(node) && isNodeEmpty(editor, node, options?.trim)
+        ElementApi.isElement(node) &&
+        editor.api.isBlock(node) &&
+        isNodeEmpty(editor, node, options?.trim)
     );
 }
diff --git a/packages/slate-commons/src/commands/removeNode.ts b/packages/slate-commons/src/commands/removeNode.ts
@@ -1,9 +1,9 @@
-import type { Node, SlateEditor } from '@udecode/plate';
+import type { Editor, EditorNodesOptions, ElementOrTextOf, SlateEditor } from '@udecode/plate';
 
-export function removeNode(
+export function removeNode<T extends ElementOrTextOf<Editor>>(
     editor: SlateEditor,
-    options: NonNullable<Parameters<typeof editor.api.nodes>[0]>,
-): Node | null {
+    options: NonNullable<EditorNodesOptions>,
+): T | null {
     const [nodeEntry] = editor.api.nodes(options);
     if (nodeEntry) {
         const [node, nodePath] = nodeEntry;

diff --git a/packages/slate-commons/src/commands/replaceChildren.ts b/packages/slate-commons/src/commands/replaceChildren.ts
@@ -1,4 +1,10 @@
-import { type Editor, ElementApi, type ElementOrTextOf, type NodeEntry, type SlateEditor } from '@udecode/plate';
+import {
+    type Editor,
+    ElementApi,
+    type ElementOrTextOf,
+    type NodeEntry,
+    type SlateEditor,
+} from '@udecode/plate';
 
 /**
  * Replaces the given element children with a new list of nodes.
@@ -15,7 +21,8 @@ export function replaceChildren(
         return false;
     }
 
-    const newChildren: ElementOrTextOf<Editor>[] = children.length === 0 ? [{ text: '' }] : children;
+    const newChildren: ElementOrTextOf<Editor>[] =
+        children.length === 0 ? [{ text: '' }] : children;
 
     editor.tf.withoutNormalizing(() => {
         node.children.forEach(() => {

diff --git a/packages/slate-commons/src/commands/replaceNode.tsx b/packages/slate-commons/src/commands/replaceNode.tsx
@@ -9,11 +9,7 @@ interface Options {
     select?: boolean;
 }
 
-export function replaceNode(
-    editor: SlateEditor,
-    newNode: Node,
-    options: Options,
-) {
+export function replaceNode(editor: SlateEditor, newNode: Node, options: Options) {
     const { at, match, select = false } = options;
     editor.tf.withoutNormalizing(() => {
         const [entry] = editor.api.nodes({ at, match, mode: 'highest' });

diff --git a/packages/slate-editor/src/components/EditorBlock/EditorBlock.tsx b/packages/slate-editor/src/components/EditorBlock/EditorBlock.tsx
@@ -1,12 +1,11 @@
 import { EditorCommands } from '@prezly/slate-commons';
 import type { ElementNode } from '@prezly/slate-types';
 import { Alignment } from '@prezly/slate-types';
-import { findNodePath, focusEditor, useEditorRef } from '@udecode/plate-common/react';
+import { type RenderElementProps } from '@udecode/plate';
+import { useEditorRef, useSelected } from '@udecode/plate/react';
 import classNames from 'classnames';
 import type { MouseEvent, ReactNode } from 'react';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
-import type { RenderElementProps } from 'slate-react';
-import { useSelected } from 'slate-react';
 
 import { NewParagraphDelimiter } from '#components';
 import { useFunction } from '#lib';
@@ -102,7 +101,7 @@ export const EditorBlock = forwardRef<HTMLDivElement, Props>(function (
     const isNodeSelected = useSelected();
     const isOnlyBlockSelected =
         isNodeSelected &&
-        Array.from(editor.nodes({ match: EditorCommands.isTopLevelNode })).length === 1;
+        Array.from(editor.api.nodes({ match: EditorCommands.isTopLevelNode })).length === 1;
     const isSelected = selected ?? isNodeSelected;
     const isOverlayEnabled = overlay === 'always' || (overlay === 'autohide' && !isSelected);
     const popperOptions = usePopperOptionsContext();
@@ -113,7 +112,7 @@ export const EditorBlock = forwardRef<HTMLDivElement, Props>(function (
 
     const closeMenu = useCallback(() => {
         setMenuOpen(false);
-        focusEditor(editor);
+        editor.tf.focus();
     }, [editor]);
 
     const handleFrameClick = useFunction(function (event: MouseEvent) {
@@ -122,9 +121,9 @@ export const EditorBlock = forwardRef<HTMLDivElement, Props>(function (
         event.stopPropagation();
 
         if (!isSelected) {
-            const path = findNodePath(editor, element);
+            const path = editor.api.findPath(element);
             if (path) {
-                editor.select(path);
+                editor.tf.select(path);
             }
         }
     });

diff --git a/packages/slate-editor/src/components/NewParagraphDelimiter/NewParagraphDelimiter.tsx b/packages/slate-editor/src/components/NewParagraphDelimiter/NewParagraphDelimiter.tsx
@@ -1,9 +1,9 @@
 import type { ElementNode } from '@prezly/slate-types';
-import { findNodePath, useEditorRef } from '@udecode/plate-common/react';
+import { PathApi } from '@udecode/plate';
+import { useEditorRef } from '@udecode/plate/react';
 import classNames from 'classnames';
 import type { MouseEvent } from 'react';
 import React from 'react';
-import { Path } from 'slate';
 
 import { useFunction } from '#lib';
 
@@ -26,13 +26,14 @@ export function NewParagraphDelimiter(props: Props) {
     const handleClick = useFunction((event: MouseEvent) => {
         preventBubbling(event);
 
-        const path = findNodePath(editor, element);
+        const path = editor.api.findPath(element);
         if (!path) {
             return;
         }
 
-        editor.insertNodes(editor.createDefaultTextBlock(), {
-            at: position === 'top' ? path : Path.next(path),
+        // @ts-expect-error TODO: Fix types
+        editor.tf.insertNodes(editor.createDefaultTextBlock(), {
+            at: position === 'top' ? path : PathApi.next(path),
             select: true,
         });
 

diff --git a/packages/slate-editor/src/components/Portals/TextSelectionPortalV2.tsx b/packages/slate-editor/src/components/Portals/TextSelectionPortalV2.tsx
@@ -1,6 +1,6 @@
 import { identity } from '@technically/lodash';
-import type { SlateEditor } from '@udecode/plate-common';
-import { toDOMRange, useEditorRef } from '@udecode/plate-common/react';
+import type { SlateEditor } from '@udecode/plate';
+import { toDOMRange, useEditorRef } from '@udecode/plate/react';
 import classNames from 'classnames';
 import RangeFix from 'rangefix';
 import React, { useCallback, useRef, useState } from 'react';

diff --git a/packages/slate-editor/src/extensions/blockquote/components/BlockQuoteElement.tsx b/packages/slate-editor/src/extensions/blockquote/components/BlockQuoteElement.tsx
@@ -1,7 +1,7 @@
 import { EditorCommands } from '@prezly/slate-commons';
 import type { QuoteNode } from '@prezly/slate-types';
 import { Alignment } from '@prezly/slate-types';
-import { useEditorRef } from '@udecode/plate-common/react';
+import { useEditorRef } from '@udecode/plate/react';
 import classNames from 'classnames';
 import type { HTMLAttributes, Ref } from 'react';
 import React, { forwardRef } from 'react';

diff --git a/packages/slate-editor/src/extensions/blockquote/lib/normalizeRedundantAttributes.ts b/packages/slate-editor/src/extensions/blockquote/lib/normalizeRedundantAttributes.ts
@@ -1,8 +1,7 @@
 import { EditorCommands } from '@prezly/slate-commons';
 import type { QuoteNode } from '@prezly/slate-types';
 import { isQuoteNode } from '@prezly/slate-types';
-import type { SlateEditor } from '@udecode/plate-common';
-import type { NodeEntry } from 'slate';
+import type { NodeEntry, SlateEditor } from '@udecode/plate';
 
 const shape: Record<keyof QuoteNode, true> = {
     type: true,

diff --git a/packages/slate-editor/src/extensions/button-block/ButtonBlockNode.ts b/packages/slate-editor/src/extensions/button-block/ButtonBlockNode.ts
@@ -1,7 +1,6 @@
 import type { ElementNode } from '@prezly/slate-types';
 import { isElementNode } from '@prezly/slate-types';
-import type { TNode } from '@udecode/plate-common';
-import type { Node } from 'slate';
+import type { Node } from '@udecode/plate';
 
 type Uuid = string;
 
@@ -30,7 +29,7 @@ export namespace ButtonBlockNode {
         OUTLINE = 'outline',
     }
 
-    export function isButtonBlockNode(node: Node | TNode): node is ButtonBlockNode {
+    export function isButtonBlockNode(node: Node): node is ButtonBlockNode {
         return isElementNode(node, Type);
     }
 }
diff --git a/packages/slate-editor/src/extensions/button-block/components/ButtonBlockElement.tsx b/packages/slate-editor/src/extensions/button-block/components/ButtonBlockElement.tsx
@@ -1,7 +1,7 @@
 import type * as Popper from '@popperjs/core';
-import { useEditorRef } from '@udecode/plate-common/react';
+import { type RenderElementProps } from '@udecode/plate';
+import { useEditorRef } from '@udecode/plate/react';
 import React, { useCallback } from 'react';
-import { type RenderElementProps } from 'slate-react';
 
 import type { InfoText } from '#components';
 import { EditorBlock } from '#components';

diff --git a/packages/slate-editor/src/extensions/button-block/lib/fixDuplicateButtonBlockUuid.ts b/packages/slate-editor/src/extensions/button-block/lib/fixDuplicateButtonBlockUuid.ts
@@ -1,22 +1,20 @@
-import type { SlateEditor } from '@udecode/plate-common';
-import type { NodeEntry } from 'slate';
-import { Path } from 'slate';
+import { PathApi, type NodeEntry, type SlateEditor } from '@udecode/plate';
 import * as uuid from 'uuid';
 
 import { ButtonBlockNode } from '../ButtonBlockNode';
 
 export function fixDuplicateButtonBlockUuid(editor: SlateEditor, [node, path]: NodeEntry): boolean {
     if (ButtonBlockNode.isButtonBlockNode(node)) {
-        const [dupe] = editor.nodes({
+        const [dupe] = editor.api.nodes({
             at: [],
             match: (anotherNode, anotherPath) =>
                 ButtonBlockNode.isButtonBlockNode(anotherNode) &&
                 anotherNode.uuid === node.uuid &&
-                !Path.equals(path, anotherPath),
+                !PathApi.equals(path, anotherPath),
         });
 
         if (dupe) {
-            editor.setNodes<ButtonBlockNode>({ uuid: uuid.v4() }, { at: path });
+            editor.tf.setNodes<ButtonBlockNode>({ uuid: uuid.v4() }, { at: path });
             return true;
         }
     }

diff --git a/packages/slate-editor/src/extensions/button-block/lib/insertButtonBlock.ts b/packages/slate-editor/src/extensions/button-block/lib/insertButtonBlock.ts
@@ -1,9 +1,7 @@
 import { EditorCommands } from '@prezly/slate-commons';
 import type { Alignment } from '@prezly/slate-types';
 import { isAlignableElement, isImageNode } from '@prezly/slate-types';
-import { type SlateEditor } from '@udecode/plate-common';
-import type { Node } from 'slate';
-import { Path, Range } from 'slate';
+import { type Node, PathApi, RangeApi, type SlateEditor } from '@udecode/plate';
 
 import type { ButtonBlockNode } from '../ButtonBlockNode';
 
@@ -34,10 +32,20 @@ function inferPrevBlockAlignment(editor: SlateEditor): Alignment | undefined {
 }
 
 function prevBlock(editor: SlateEditor): Node | undefined {
-    if (editor.selection && Range.isCollapsed(editor.selection)) {
+    if (editor.selection && RangeApi.isCollapsed(editor.selection)) {
         const topLevelPath = editor.selection.focus.path.slice(0, 1);
-        if (Path.hasPrevious(topLevelPath)) {
-            const [node] = editor.node(Path.previous(topLevelPath));
+        if (PathApi.hasPrevious(topLevelPath)) {
+            const previousPath = PathApi.previous(topLevelPath);
+            if (!previousPath) {
+                return undefined;
+            }
+
+            const nodeEntry = editor.api.node(previousPath);
+            if (!nodeEntry) {
+                return undefined;
+            }
+
+            const [node] = nodeEntry;
             return node;
         }
     }

diff --git a/...s/slate-editor/src/extensions/button-block/lib/normalizeRedundantButtonBlockAttributes.ts b/...s/slate-editor/src/extensions/button-block/lib/normalizeRedundantButtonBlockAttributes.ts
@@ -1,6 +1,5 @@
 import { EditorCommands } from '@prezly/slate-commons';
-import type { SlateEditor } from '@udecode/plate-common';
-import type { Node, NodeEntry } from 'slate';
+import type { Node, NodeEntry, SlateEditor } from '@udecode/plate';
 
 import { ButtonBlockNode } from '../ButtonBlockNode';
 

diff --git a/packages/slate-editor/src/extensions/button-block/transforms/removeButtonBlock.ts b/packages/slate-editor/src/extensions/button-block/transforms/removeButtonBlock.ts
@@ -1,13 +1,13 @@
 import { EditorCommands } from '@prezly/slate-commons';
-import type { SlateEditor } from '@udecode/plate-common';
+import type { SlateEditor } from '@udecode/plate';
 
 import { ButtonBlockNode } from '../ButtonBlockNode';
 
 export function removeButtonBlock(
     editor: SlateEditor,
     buttonBlock?: ButtonBlockNode,
 ): ButtonBlockNode | null {
-    return EditorCommands.removeNode<ButtonBlockNode>(editor, {
+    return EditorCommands.removeNode(editor, {
         match: (node) =>
             buttonBlock ? node === buttonBlock : ButtonBlockNode.isButtonBlockNode(node),
     });

diff --git a/packages/slate-editor/src/extensions/button-block/transforms/updateButtonBlock.ts b/packages/slate-editor/src/extensions/button-block/transforms/updateButtonBlock.ts
@@ -1,4 +1,4 @@
-import type { SlateEditor } from '@udecode/plate-common';
+import type { SlateEditor } from '@udecode/plate';
 
 import type { ButtonBlockNode } from '../ButtonBlockNode';
 
@@ -7,7 +7,7 @@ export function updateButtonBlock(
     buttonBlock: ButtonBlockNode,
     patch: Partial<Pick<ButtonBlockNode, 'href' | 'label' | 'layout' | 'variant' | 'new_tab'>>,
 ) {
-    editor.setNodes<ButtonBlockNode>(patch, {
+    editor.tf.setNodes<ButtonBlockNode>(patch, {
         at: [],
         match: (node) => node === buttonBlock,
     });

diff --git a/packages/slate-editor/src/extensions/callout/components/CalloutElement.tsx b/packages/slate-editor/src/extensions/callout/components/CalloutElement.tsx
@@ -2,14 +2,13 @@ import type { Placement } from '@popperjs/core';
 import { EditorCommands } from '@prezly/slate-commons';
 import type { CalloutNode } from '@prezly/slate-types';
 import { Alignment } from '@prezly/slate-types';
-import { useEditorRef } from '@udecode/plate-common/react';
+import { useEditorRef, useSelected } from '@udecode/plate/react';
 import classNames from 'classnames';
 import EmojiPicker, { EmojiStyle, SuggestionMode } from 'emoji-picker-react';
 import type { HTMLAttributes, Ref } from 'react';
 import React, { forwardRef, useCallback, useState } from 'react';
 import { useRootClose } from 'react-overlays';
 import { type Modifier, Popper } from 'react-popper';
-import { useSelected } from 'slate-react';
 
 import { NewParagraphDelimiter, TooltipV2 } from '#components';
 import { mergeRefs } from '#lib';
@@ -29,7 +28,7 @@ export const CalloutElement = forwardRef(
         const [buttonElement, setButtonElement] = useState<HTMLElement | null>(null);
 
         const togglePicker = useCallback(() => {
-            editor.collapse();
+            editor.tf.collapse();
             setPickerOpen((open) => !open);
         }, []);
 

diff --git a/packages/slate-editor/src/extensions/callout/lib/insertCallout.ts b/packages/slate-editor/src/extensions/callout/lib/insertCallout.ts
@@ -1,6 +1,6 @@
 import { EditorCommands } from '@prezly/slate-commons';
 import type { CalloutNode } from '@prezly/slate-types';
-import type { SlateEditor } from '@udecode/plate-common';
+import type { SlateEditor } from '@udecode/plate';
 
 import { createCallout } from './createCallout';
 

diff --git a/packages/slate-editor/src/extensions/callout/lib/normalizeAttributes.ts b/packages/slate-editor/src/extensions/callout/lib/normalizeAttributes.ts
@@ -1,7 +1,6 @@
 import { EditorCommands } from '@prezly/slate-commons';
 import { CalloutNode } from '@prezly/slate-types';
-import type { SlateEditor } from '@udecode/plate-common';
-import type { NodeEntry } from 'slate';
+import type { NodeEntry, SlateEditor } from '@udecode/plate';
 
 const shape: Record<keyof CalloutNode, true> = {
     type: true,
@@ -30,7 +29,7 @@ function normalizeIconAttribute(
     // If there's no icon, the attribute should be absent.
     // We replace `null` and "" empty string values with `undefined`.
     if (!node.icon && typeof node.icon !== 'undefined') {
-        editor.unsetNodes('icon', {
+        editor.tf.unsetNodes('icon', {
             match: CalloutNode.isCalloutNode,
             at: path,
         });

diff --git a/packages/slate-editor/src/extensions/callout/lib/updateCallout.ts b/packages/slate-editor/src/extensions/callout/lib/updateCallout.ts
@@ -1,12 +1,12 @@
 import type { CalloutNode } from '@prezly/slate-types';
-import type { SlateEditor } from '@udecode/plate-common';
+import type { SlateEditor } from '@udecode/plate';
 
 export function updateCallout(
     editor: SlateEditor,
     callout: CalloutNode,
     patch: Partial<Pick<CalloutNode, 'icon' | 'align'>>,
 ) {
-    editor.setNodes<CalloutNode>(patch, {
+    editor.tf.setNodes<CalloutNode>(patch, {
         at: [],
         match: (node) => node === callout,
     });

diff --git a/packages/slate-editor/src/extensions/coverage/components/CoverageElement.tsx b/packages/slate-editor/src/extensions/coverage/components/CoverageElement.tsx
@@ -1,8 +1,8 @@
 import type { CoverageEntry } from '@prezly/sdk';
 import type { CoverageNode } from '@prezly/slate-types';
-import { useEditorRef } from '@udecode/plate-common/react';
+import { type RenderElementProps } from '@udecode/plate';
+import { useEditorRef } from '@udecode/plate/react';
 import React, { useEffect } from 'react';
-import { type RenderElementProps } from 'slate-react';
 
 import { EditorBlock, ElementPlaceholder, LoadingPlaceholder } from '#components';
 import { ChickenNoSignalIllustration, Coverage as CoverageIcon } from '#icons';

diff --git a/packages/slate-editor/src/extensions/coverage/components/CoverageMenu.tsx b/packages/slate-editor/src/extensions/coverage/components/CoverageMenu.tsx
@@ -1,10 +1,9 @@
 import type { CoverageEntry } from '@prezly/sdk';
 import type { CoverageNode } from '@prezly/slate-types';
 import { CoverageLayout } from '@prezly/slate-types';
-import { useEditorRef } from '@udecode/plate-common/react';
+import { useEditorRef, useSelected } from '@udecode/plate/react';
 import classNames from 'classnames';
 import React from 'react';
-import { useSelected } from 'slate-react';
 
 import type { OptionsGroupOption } from '#components';
 import { Button, OptionsGroup, Toggle, Toolbox } from '#components';

diff --git a/packages/slate-editor/src/extensions/coverage/lib/getCurrentCoverageNode.ts b/packages/slate-editor/src/extensions/coverage/lib/getCurrentCoverageNode.ts
@@ -1,7 +1,7 @@
 import { EditorCommands } from '@prezly/slate-commons';
 import type { CoverageNode } from '@prezly/slate-types';
 import { isCoverageNode } from '@prezly/slate-types';
-import type { SlateEditor } from '@udecode/plate-common';
+import type { SlateEditor } from '@udecode/plate';
 
 export function getCurrentCoverageNode(editor: SlateEditor): CoverageNode | null {
     const [currentNode] = EditorCommands.getCurrentNodeEntry(editor) || [];

diff --git a/packages/slate-editor/src/extensions/coverage/lib/insertCoverage.ts b/packages/slate-editor/src/extensions/coverage/lib/insertCoverage.ts
@@ -1,6 +1,6 @@
 import type { CoverageEntry } from '@prezly/sdk';
 import { EditorCommands } from '@prezly/slate-commons';
-import type { SlateEditor } from '@udecode/plate-common';
+import type { SlateEditor } from '@udecode/plate';
 
 import { createCoverage } from './createCoverage';