Merge pull request #4107 from udecode/fix/plate-controller-fallback-hook-order

Fix `PlateController` hook order error and behaviour when editors have no `id`

Author: zbeyens

.changeset/popular-spiders-unite.md

@@ -0,0 +1,5 @@
+---
+'@udecode/slate': patch
+---
+
+Change type of `editor.id` from `any` to `string`. The previous value of `any` was causing `NodeIn<Value>['id']` to have type `any`.

.changeset/shaggy-eggs-occur.md

@@ -0,0 +1,6 @@
+---
+'@udecode/plate-selection': patch
+'@udecode/plate-toggle': patch
+---
+
+Expect `NodeIn<Value>['id']` to have type `unknown` since the Node ID plugin may or may not be enabled.

.changeset/thick-socks-do.md

@@ -0,0 +1,6 @@
+---
+'@udecode/plate-core': patch
+---
+
+- `editor.id` now defaults to `nanoid()` if no `id` was specified when creating the editor.
+- Fix: Using Plate hooks such as `useEditorRef` inside PlateController causes React to throw an error about hook order.

packages/core/src/lib/editor/withSlate.spec.ts

@@ -458,4 +458,32 @@ describe('withPlate', () => {
       ]);
     });
   });
+
+  describe('when the previous editor has an id', () => {
+    it('should use that id', () => {
+      const oldEditor = withSlate(createEditor());
+      oldEditor.id = 'old';
+      const editor = withSlate(oldEditor);
+      expect(editor.id).toBe('old');
+    });
+  });
+
+  describe('when the id option is provided', () => {
+    it('should use that id', () => {
+      const oldEditor = withSlate(createEditor());
+      oldEditor.id = 'old';
+      const editor = withSlate(oldEditor, { id: 'new' });
+      expect(editor.id).toBe('new');
+    });
+  });
+
+  describe('when no id is provided', () => {
+    it('should use a unique id for each editor', () => {
+      const id1 = withSlate(createEditor()).id;
+      const id2 = withSlate(createEditor()).id;
+      expect(id1).toBeTruthy();
+      expect(id2).toBeTruthy();
+      expect(id1).not.toEqual(id2);
+    });
+  });
 });

packages/core/src/lib/editor/withSlate.ts

@@ -17,7 +17,7 @@ import { getPluginType, getSlatePlugin } from '../plugin/getSlatePlugin';
 import { type CorePlugin, getCorePlugins } from '../plugins/getCorePlugins';
 
 export type BaseWithSlateOptions<P extends AnyPluginConfig = CorePlugin> = {
-  id?: any;
+  id?: string;
   /**
    * Select the editor after initialization.
    *
@@ -92,8 +92,7 @@ export const withSlate = <
 ): TSlateEditor<V, InferPlugins<P[]>> => {
   const editor = e as SlateEditor;
 
-  // Override incremental id generated by slate
-  editor.id = id ?? editor.id;
+  editor.id = id ?? editor.id ?? nanoid();
   editor.key = editor.key ?? nanoid();
   editor.isFallback = false;
   editor.prevSelection = null;

packages/core/src/react/stores/plate/createPlateStore.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { atom } from 'jotai';
 import { useAtomStoreSet, useAtomStoreState, useAtomStoreValue } from 'jotai-x';
@@ -116,15 +116,16 @@ export const usePlateStore = (id?: string) => {
    */
   const plateControllerExists = usePlateControllerExists();
 
-  const fallbackStore = React.useRef<typeof localStore>(undefined);
+  const fallbackStore = useMemo(createPlateStore, []);
+  const fallbackPlateStore = fallbackStore.usePlateStore();
+  const memorizedFallbackPlateStore = useMemo(
+    () => fallbackPlateStore,
+    [fallbackPlateStore]
+  );
 
   if (!store) {
     if (plateControllerExists) {
-      if (!fallbackStore.current) {
-        fallbackStore.current =
-          createPlateStore().usePlateStore() as unknown as typeof localStore;
-      }
-      return fallbackStore.current!;
+      return memorizedFallbackPlateStore;
     }
 
     throw new Error(

packages/selection/src/react/BlockSelectionPlugin.tsx

@@ -205,7 +205,7 @@ export const BlockSelectionPlugin = createTPlatePlugin<BlockSelectionConfig>({
 
         return editor.api.blocks<TElement>({
           at: [],
-          match: (n) => !!n.id && selectedIds?.has(n.id),
+          match: (n) => !!n.id && selectedIds?.has(n.id as string),
         });
       },
       has: (id) => {

packages/selection/src/react/components/BlockSelectionAfterEditable.tsx

@@ -106,7 +106,7 @@ export const BlockSelectionAfterEditable: EditableSiblingComponent = () => {
         const entry = editor.api.node({
           at: [],
           block: true,
-          match: (n) => !!n.id && selectedIds?.has(n.id),
+          match: (n) => !!n.id && selectedIds?.has(n.id as string),
         });
 
         if (entry) {
@@ -124,7 +124,7 @@ export const BlockSelectionAfterEditable: EditableSiblingComponent = () => {
           editor.tf.removeNodes({
             at: [],
             block: true,
-            match: (n) => !!n.id && selectedIds?.has(n.id),
+            match: (n) => !!n.id && selectedIds?.has(n.id as string),
           });
 
           if (editor.children.length === 0) {
@@ -175,7 +175,7 @@ export const BlockSelectionAfterEditable: EditableSiblingComponent = () => {
         if (!editor.api.isReadOnly()) {
           editor.tf.removeNodes({
             at: [],
-            match: (n) => selectedIds?.has(n.id),
+            match: (n) => selectedIds?.has(n.id as string),
           });
           editor.tf.focus();
         }

packages/selection/src/react/hooks/useBlockSelectionNodes.ts

@@ -13,7 +13,7 @@ export function useBlockSelectionNodes() {
   return useMemo(() => {
     return editor.api.blocks<TElement>({
       at: [],
-      match: (n) => !!n.id && selectedIds?.has(n.id),
+      match: (n) => !!n.id && selectedIds?.has(n.id as string),
     });
   }, [editor, selectedIds]);
 }

packages/selection/src/react/hooks/useSelectionArea.ts

@@ -79,7 +79,7 @@ export const useSelectionArea = () => {
           const hasAncestor = editor.api.block({
             above: true,
             at: block[1],
-            match: (n) => !!n.id && areaRef.current.ids.has(n.id),
+            match: (n) => !!n.id && areaRef.current.ids.has(n.id as string),
           });
 
           if (!hasAncestor) {