(
if (plugin.plugins) {
plugin.plugins = plugin.plugins.map((p) => resolvePlugin(editor, p));
}
+ // TODO React
+ if ((plugin as any).node?.component) {
+ (plugin as any).render.node = (plugin as any).node.component;
+ }
+ if ((plugin as any).render?.node) {
+ (plugin as any).node.component = (plugin as any).render.node;
+ }
validatePlugin(editor, plugin);
diff --git a/packages/core/src/lib/utils/resolvePlugins.ts b/packages/core/src/lib/utils/resolvePlugins.ts
index 897218aa19..7e4c9a8e8d 100644
--- a/packages/core/src/lib/utils/resolvePlugins.ts
+++ b/packages/core/src/lib/utils/resolvePlugins.ts
@@ -319,11 +319,13 @@ export const resolvePluginOverrides = (editor: SlateEditor) => {
// TODO react
if (
componentOverrides[p.key] &&
- (!(p as any).render.node ||
+ ((!(p as any).render.node && !(p as any).node.component) ||
componentOverrides[p.key].priority > p.priority)
) {
(updatedPlugin as any).render.node =
componentOverrides[p.key].component;
+ (updatedPlugin as any).node.component =
+ componentOverrides[p.key].component;
}
// Apply enabled overrides
diff --git a/packages/core/src/react/plugin/createPlatePlugin.spec.ts b/packages/core/src/react/plugin/createPlatePlugin.spec.ts
index 57e50e345c..a5ac84cfe1 100644
--- a/packages/core/src/react/plugin/createPlatePlugin.spec.ts
+++ b/packages/core/src/react/plugin/createPlatePlugin.spec.ts
@@ -28,6 +28,26 @@ describe('withComponent method', () => {
expect(resolvedPlugin.render.node).not.toBe(OriginalComponent);
expect(resolvedPlugin.render.node).toBe(NewComponent);
+ expect(resolvedPlugin.node.component).not.toBe(OriginalComponent);
+ expect(resolvedPlugin.node.component).toBe(NewComponent);
+ });
+
+ it('should override an existing component with node.component', () => {
+ const OriginalComponent: NodeComponent = () => null;
+ const NewComponent: NodeComponent = () => null;
+
+ const basePlugin = createPlatePlugin({
+ key: 'testPlugin',
+ node: { component: OriginalComponent },
+ });
+
+ const pluginWithNewComponent = basePlugin.withComponent(NewComponent);
+ const resolvedPlugin = resolvePluginTest(pluginWithNewComponent);
+
+ expect(resolvedPlugin.render.node).not.toBe(OriginalComponent);
+ expect(resolvedPlugin.render.node).toBe(NewComponent);
+ expect(resolvedPlugin.node.component).not.toBe(OriginalComponent);
+ expect(resolvedPlugin.node.component).toBe(NewComponent);
});
it('extendEditorApi', () => {
diff --git a/packages/core/src/react/plugin/toPlatePlugin.ts b/packages/core/src/react/plugin/toPlatePlugin.ts
index d5bdbf0790..378e1afc00 100644
--- a/packages/core/src/react/plugin/toPlatePlugin.ts
+++ b/packages/core/src/react/plugin/toPlatePlugin.ts
@@ -86,7 +86,10 @@ export function toPlatePlugin<
});
plugin.withComponent = (component) => {
- return plugin.extend({ render: { node: component } }) as any;
+ return plugin.extend({
+ node: { component },
+ render: { node: component },
+ }) as any;
};
if (!extendConfig) return plugin as any;
diff --git a/packages/floating/src/hooks/useFloatingToolbar.ts b/packages/floating/src/hooks/useFloatingToolbar.ts
index e5e3aa6201..98d5cb6fdb 100644
--- a/packages/floating/src/hooks/useFloatingToolbar.ts
+++ b/packages/floating/src/hooks/useFloatingToolbar.ts
@@ -5,7 +5,10 @@ import {
isSelectionExpanded,
mergeProps,
} from '@udecode/plate-common';
-import { useEditorSelector } from '@udecode/plate-common/react';
+import {
+ useEditorReadOnly,
+ useEditorSelector,
+} from '@udecode/plate-common/react';
import { useFocused } from 'slate-react';
import {
@@ -17,7 +20,7 @@ import {
export type FloatingToolbarState = {
floatingOptions?: UseVirtualFloatingOptions;
hideToolbar?: boolean;
- ignoreReadOnly?: boolean;
+ showWhenReadOnly?: boolean;
};
export const useFloatingToolbarState = ({
@@ -25,13 +28,14 @@ export const useFloatingToolbarState = ({
floatingOptions,
focusedEditorId,
hideToolbar,
- ignoreReadOnly,
+ showWhenReadOnly,
}: {
editorId: string;
focusedEditorId: null | string;
} & FloatingToolbarState) => {
const selectionExpanded = useEditorSelector(isSelectionExpanded, []);
const selectionText = useEditorSelector(getSelectionText, []);
+ const readOnly = useEditorReadOnly();
const focused = useFocused();
@@ -57,14 +61,15 @@ export const useFloatingToolbarState = ({
focused,
focusedEditorId,
hideToolbar,
- ignoreReadOnly,
mousedown,
open,
+ readOnly,
selectionExpanded,
selectionText,
setMousedown,
setOpen,
setWaitForCollapsedSelection,
+ showWhenReadOnly,
waitForCollapsedSelection,
};
};
@@ -74,20 +79,21 @@ export const useFloatingToolbar = ({
floating,
focusedEditorId,
hideToolbar,
- ignoreReadOnly,
mousedown,
open,
+ readOnly,
selectionExpanded,
selectionText,
setMousedown,
setOpen,
setWaitForCollapsedSelection,
+ showWhenReadOnly,
waitForCollapsedSelection,
}: ReturnType