feat

packages/core/src/client/components/Plate.tsx

@@ -42,6 +42,7 @@ export interface PlateProps<
         insertData?: boolean;
         length?: boolean;
         nodeFactory?: boolean;
+        queryCachToState?: boolean;
         react?: boolean;
         selection?: boolean;
       }

packages/core/src/client/components/PlateEffects.tsx

@@ -19,5 +19,9 @@ export function PlateEffects<
 >({ children, ...props }: PlateEffectsProps<V, E>) {
   usePlateEffects<V, E>(props);
 
-  return <>{children}</>;
+  return (
+    <div data-id={props.id} id="plate-editor">
+      {children}
+    </div>
+  );
 }

packages/core/src/client/utils/createPlateEditor.ts

@@ -57,7 +57,6 @@ export const createPlateEditor = <
     components,
     overrideByKey,
   });
-
   const e = withPlate<V>(editor, {
     plugins,
     ...withPlateOptions,

packages/core/src/client/utils/setPlatePlugins.ts

@@ -16,6 +16,7 @@ import {
   KEY_LENGTH,
   KEY_NODE_FACTORY,
   KEY_PREV_SELECTION,
+  KEY_QUERY_CACHE_TO_STATE,
   createDeserializeAstPlugin,
   createDeserializeHtmlPlugin,
   createEditorProtocolPlugin,
@@ -26,6 +27,7 @@ import {
   createLengthPlugin,
   createNodeFactoryPlugin,
   createPrevSelectionPlugin,
+  createQueryCachToStatePlugin,
 } from '../../shared/plugins';
 import { flattenDeepPlugins } from '../../shared/utils/flattenDeepPlugins';
 import { overridePluginsByKey } from '../../shared/utils/overridePluginsByKey';
@@ -114,6 +116,12 @@ export const setPlatePlugins = <
           createEditorProtocolPlugin()
       );
     }
+    if (typeof dcp !== 'object' || !dcp?.queryCachToState) {
+      plugins.push(
+        (editor?.pluginsByKey?.[KEY_QUERY_CACHE_TO_STATE] as any) ??
+          createQueryCachToStatePlugin()
+      );
+    }
   }
 
   plugins = [...plugins, ..._plugins] as any;

packages/core/src/server/setPlatePlugins.ts

@@ -15,6 +15,7 @@ import {
   KEY_LENGTH,
   KEY_NODE_FACTORY,
   KEY_PREV_SELECTION,
+  KEY_QUERY_CACHE_TO_STATE,
   createDeserializeAstPlugin,
   createDeserializeHtmlPlugin,
   createEditorProtocolPlugin,
@@ -25,6 +26,7 @@ import {
   createLengthPlugin,
   createNodeFactoryPlugin,
   createPrevSelectionPlugin,
+  createQueryCachToStatePlugin,
 } from '../shared/plugins';
 import { flattenDeepPlugins } from '../shared/utils/flattenDeepPlugins';
 import { overridePluginsByKey } from '../shared/utils/overridePluginsByKey';
@@ -112,6 +114,12 @@ export const setPlatePlugins = <
           createEditorProtocolPlugin()
       );
     }
+    if (typeof dcp !== 'object' || !dcp?.queryCachToState) {
+      plugins.push(
+        (editor?.pluginsByKey?.[KEY_QUERY_CACHE_TO_STATE] as any) ??
+          createQueryCachToStatePlugin()
+      );
+    }
   }
 
   plugins = [...plugins, ..._plugins] as any;

packages/core/src/shared/plugins/createQueryCacheToState.ts

@@ -0,0 +1,64 @@
+import {
+  type AncestorOf,
+  type ENode,
+  type TEditor,
+  type TNodeEntry,
+  type Value,
+  getAboveNode,
+  getNodeEntries,
+  getNodeEntry,
+} from '@udecode/slate';
+import { getBlockAbove } from '@udecode/slate-utils';
+
+import type { PlateEditor } from '../types/PlateEditor';
+
+import { createPluginFactory } from '../utils/createPluginFactory';
+
+export type QueryCachToSateEditor<V extends Value> = {
+  state: {
+    aboveEntries?: Generator<TNodeEntry<ENode<V>>, void, undefined>;
+    aboveNode?: TNodeEntry<AncestorOf<TEditor<V>>>;
+    ancestorNode?: TNodeEntry<ENode<V>>;
+    blockAbove?: TNodeEntry<AncestorOf<TEditor<V>>>;
+  };
+};
+
+export const withQueryCachToState = <
+  V extends Value = Value,
+  E extends PlateEditor<V> = PlateEditor<V>,
+>(
+  editor: E
+) => {
+  if (typeof editor.state !== 'object') editor.state = {};
+
+  const { apply } = editor;
+
+  editor.apply = (operation) => {
+    apply(operation);
+
+    const aboveNode = getAboveNode(editor);
+    const aboveEntries = getNodeEntries(editor);
+    const blockAbove = getBlockAbove(editor);
+
+    editor.state.aboveNode = aboveNode;
+    editor.state.blockAbove = blockAbove;
+    editor.state.aboveEntries = aboveEntries;
+
+    const { selection } = editor;
+
+    if (selection?.focus?.path) {
+      editor.state.ancestorNode = getNodeEntry(editor, [
+        selection.focus.path[0],
+      ]);
+    }
+  };
+
+  return editor;
+};
+
+export const KEY_QUERY_CACHE_TO_STATE = 'queryCacheToSate';
+
+export const createQueryCachToStatePlugin = createPluginFactory({
+  key: KEY_QUERY_CACHE_TO_STATE,
+  withOverrides: withQueryCachToState,
+});

packages/core/src/shared/plugins/index.ts

@@ -10,5 +10,6 @@ export * from './createInsertDataPlugin';
 export * from './createLengthPlugin';
 export * from './createNodeFactoryPlugin';
 export * from './createPrevSelectionPlugin';
+export * from './createQueryCacheToState';
 export * from './event-editor/index';
 export * from './html-deserializer/index';

packages/core/src/shared/transforms/toggleNodeType.ts

@@ -36,7 +36,9 @@ export const toggleNodeType = <V extends Value>(
   const { activeType, inactiveType = getPluginType(editor, ELEMENT_DEFAULT) } =
     options;
 
-  if (!activeType || !editor.selection) return;
+  const at = editorNodesOptions?.at ?? editor.selection;
+
+  if (!activeType || !at) return;
 
   const isActive = someNode(editor, {
     ...editorNodesOptions,
@@ -47,7 +49,11 @@ export const toggleNodeType = <V extends Value>(
 
   if (isActive && activeType === inactiveType) return;
 
-  setElements(editor, {
-    type: isActive ? inactiveType : activeType,
-  });
+  setElements(
+    editor,
+    {
+      type: isActive ? inactiveType : activeType,
+    },
+    { at: at as any }
+  );
 };

packages/core/src/shared/types/PlateEditor.ts

@@ -11,6 +11,7 @@ import type {
 import type { TReactEditor } from '@udecode/slate-react';
 import type { Path } from 'slate';
 
+import type { QueryCachToSateEditor } from '../plugins';
 import type { PlateEditorMethods } from './PlateEditorMethods';
 import type { WithPlatePlugin } from './plugin/PlatePlugin';
 import type { PluginKey } from './plugin/PlatePluginKey';
@@ -45,6 +46,7 @@ export type PlateEditor<V extends Value = Value> = {
 
   prevSelection: TRange | null;
 } & PlateEditorMethods<V> &
+  QueryCachToSateEditor<V> &
   TEditor<V> &
   THistoryEditor<V> &
   TReactEditor<V>;

packages/core/src/shared/types/plugin/KeyboardHandler.ts

@@ -14,3 +14,5 @@ export type KeyboardHandler<
 
 export type KeyboardHandlerReturnType =
   DOMHandlerReturnType<React.KeyboardEvent>;
+
+export type MouseHandlerReturnType = DOMHandlerReturnType<React.MouseEvent>;