Merge pull request #2822 from udecode/fix/read-only-editor-plugins

Fix Plate 27 regressions
udecode · Dec 22, 2023 · eef0c33 · eef0c33
2 parents 30a7572 + c0f7c59
commit eef0c33
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 7 deletions.
diff --git a/.changeset/chilled-ligers-jam.md b/.changeset/chilled-ligers-jam.md
@@ -0,0 +1,6 @@
+---
+'@udecode/plate-core': patch
+---
+
+- Fix: `readOnly` on Plate store defaults to false and overrides `readOnly` on PlateContent
+- Fix: Plate ignores plugins passed via `editor`
diff --git a/packages/core/src/components/Plate.spec.tsx b/packages/core/src/components/Plate.spec.tsx
@@ -132,6 +132,28 @@ describe('Plate', () => {
         expect(result.current.at(-1)!.key).toBe('test2');
       });
     });
+
+    it('should use plugins from editor', () => {
+      const _plugins = [{ key: 'test' }];
+      const editor = createPlateEditor({ plugins: _plugins });
+
+      const wrapper = ({ children }: any) => (
+        <Plate editor={editor}>{children}</Plate>
+      );
+
+      const { result, rerender } = renderHook(
+        () => usePlateSelectors().plugins(),
+        {
+          wrapper,
+        }
+      );
+
+      expect(result.current.some((p: any) => p.key === 'test')).toBe(true);
+
+      rerender();
+
+      expect(result.current.some((p: any) => p.key === 'test')).toBe(true);
+    });
   });
 
   describe('when id updates', () => {

diff --git a/packages/core/src/hooks/usePlateEffects.ts b/packages/core/src/hooks/usePlateEffects.ts
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { Value } from '@udecode/slate';
+import { isDefined } from '@udecode/utils';
 
 import { PlateProps } from '../components';
 import { useEditorRef, usePlateStates } from '../stores';
@@ -26,7 +27,7 @@ export const usePlateEffects = <
   const [, setPlugins] = states.plugins();
 
   useEffect(() => {
-    if (pluginsProp !== rawPlugins) {
+    if (isDefined(pluginsProp) && pluginsProp !== rawPlugins) {
       setRawPlugins(rawPlugins);
 
       setPlatePlugins<V, E>(editor, {

diff --git a/packages/core/src/stores/plate/createPlateStore.ts b/packages/core/src/stores/plate/createPlateStore.ts
@@ -30,7 +30,7 @@ export const createPlateStore = <
   editorRef = null,
   plugins = [],
   rawPlugins = [],
-  readOnly = false,
+  readOnly = null,
   renderElement = null,
   renderLeaf = null,
   value = null as any,

diff --git a/packages/core/src/stores/plate/selectors/useEditorReadOnly.ts b/packages/core/src/stores/plate/selectors/useEditorReadOnly.ts
@@ -4,6 +4,6 @@ import { PlateId, usePlateSelectors } from '../createPlateStore';
  * Whether the editor is read-only.
  * You can also use `useReadOnly` from `slate-react` in node components.
  */
-export const useEditorReadOnly = (id?: PlateId) => {
-  return usePlateSelectors(id).readOnly();
+export const useEditorReadOnly = (id?: PlateId): boolean => {
+  return !!usePlateSelectors(id).readOnly();
 };
diff --git a/packages/core/src/types/PlateStore.ts b/packages/core/src/types/PlateStore.ts
@@ -38,9 +38,6 @@ export type PlateStoreState<
    */
   rawPlugins: PlatePlugin<PluginOptions, V, E>[];
 
-  // Whether the editor is read-only.
-  readOnly: boolean;
-
   /**
    * Flattened plugins.
    */
@@ -57,6 +54,9 @@ export type PlateStoreState<
    */
   isMounted: boolean;
 
+  // Whether the editor is read-only.
+  readOnly: boolean;
+
   /**
    * Version incremented on each editor change.
    */