diff --git a/.changeset/chilled-ligers-jam.md b/.changeset/chilled-ligers-jam.md new file mode 100644 index 0000000000..e0a35cf229 --- /dev/null +++ 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 index a1a7b058ee..cde740713b 100644 --- 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) => ( + {children} + ); + + 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 index 36506dd36e..6b67a1fe95 100644 --- 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(editor, { diff --git a/packages/core/src/stores/plate/createPlateStore.ts b/packages/core/src/stores/plate/createPlateStore.ts index 501acc4357..b9683c0d75 100644 --- 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 index 56055b9026..c7fc3e0759 100644 --- 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 index d29492f974..ea07c0bf85 100644 --- a/packages/core/src/types/PlateStore.ts +++ b/packages/core/src/types/PlateStore.ts @@ -38,9 +38,6 @@ export type PlateStoreState< */ rawPlugins: PlatePlugin[]; - // 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. */