Plate 38: Performance optimization

apps/www/src/registry/default/example/hundreds-editors-demo.tsx

@@ -1,11 +1,8 @@
 import React from 'react';
 
-import { BasicElementsPlugin } from '@udecode/plate-basic-elements/react';
-import { BasicMarksPlugin } from '@udecode/plate-basic-marks/react';
 import { Plate, usePlateEditor } from '@udecode/plate-common/react';
 
 import { editableProps } from '@/plate/demo/editableProps';
-import { PlateUI } from '@/plate/demo/plate-ui';
 import { createMultiEditorsValue } from '@/plate/demo/values/createMultiEditorsValue';
 import { Editor } from '@/registry/default/plate-ui/editor';
 
@@ -14,8 +11,8 @@ const values = createMultiEditorsValue();
 function WithPlate({ id, value }: any) {
   const editor = usePlateEditor({
     id,
-    override: { components: PlateUI },
-    plugins: [BasicElementsPlugin, BasicMarksPlugin],
+    // override: { components: PlateUI },
+    // plugins: [BasicElementsPlugin, BasicMarksPlugin],
     value,
   });
 

apps/www/src/registry/default/example/playground-demo.tsx

@@ -62,7 +62,6 @@ import { SlashPlugin } from '@udecode/plate-slash-command';
 import { TablePlugin } from '@udecode/plate-table/react';
 import { TogglePlugin } from '@udecode/plate-toggle/react';
 import { TrailingBlockPlugin } from '@udecode/plate-trailing-block';
-import Prism from 'prismjs';
 
 import { CheckPlugin } from '@/components/context/check-plugin';
 import { settingsStore } from '@/components/context/settings-store';
@@ -106,8 +105,9 @@ export const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {
   const key = settingsStore.use.version();
 
   const editorId = id || 'playground-' + key;
+  console.time('usePlaygroundEditor');
 
-  return usePlateEditor(
+  const a = usePlateEditor(
     {
       id: editorId,
       override: {
@@ -121,11 +121,11 @@ export const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {
         // Nodes
         HeadingPlugin,
         BlockquotePlugin,
-        CodeBlockPlugin.configure({
-          options: {
-            prism: Prism,
-          },
-        }),
+        // CodeBlockPlugin.configure({
+        //   options: {
+        //     prism: Prism,
+        //   },
+        // }),
         HorizontalRulePlugin,
         LinkPlugin.extend({
           render: { afterEditable: () => <LinkFloatingToolbar /> },
@@ -315,6 +315,9 @@ export const usePlaygroundEditor = (id: any = '', scrollSelector?: string) => {
     },
     []
   );
+  console.timeEnd('usePlaygroundEditor');
+
+  return a;
 };
 
 export default function PlaygroundDemo({

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

@@ -102,6 +102,8 @@ export const withSlate = <
     ...pluginConfig
   }: WithSlateOptions<V, P> = {}
 ): TSlateEditor<V, InferPlugins<P[]>> => {
+  console.time('withSlate');
+
   const editor = e as SlateEditor;
 
   // Override incremental id generated by slate
@@ -188,7 +190,9 @@ export const withSlate = <
     rootPluginInstance = rootPlugin(rootPluginInstance) as any;
   }
 
+  console.time('resolvePlugins');
   resolvePlugins(editor, [rootPluginInstance]);
+  console.timeEnd('resolvePlugins');
 
   if (typeof value === 'string') {
     editor.children = editor.api.html.deserialize({ element: value }) as Value;
@@ -210,9 +214,13 @@ export const withSlate = <
     pipeNormalizeInitialValue(editor);
   }
   if (shouldNormalizeEditor) {
+    console.time('normalizeEditor');
     normalizeEditor(editor, { force: true });
+    console.timeEnd('normalizeEditor');
   }
 
+  console.timeEnd('withSlate');
+
   return editor as any;
 };
 

packages/core/src/lib/plugin/createSlatePlugin.ts

@@ -1,8 +1,5 @@
 import type { Modify } from '@udecode/utils';
 
-import cloneDeep from 'lodash/cloneDeep.js';
-import merge from 'lodash/merge.js';
-
 import type { SlateEditor } from '../editor/SlateEditor';
 import type { AnyPluginConfig, PluginConfig } from './BasePlugin';
 import type {
@@ -111,8 +108,7 @@ export function createSlatePlugin<
 
   const key = baseConfig.key ?? '';
 
-  const plugin = merge(
-    {},
+  const plugin = mergeWithoutArray(
     {
       __apiExtensions: [],
       __configuration: null,
@@ -135,7 +131,7 @@ export function createSlatePlugin<
       shortcuts: {},
       transforms: {},
     },
-    cloneDeep(config)
+    config
   ) as unknown as SlatePlugin<PluginConfig<K, O, A, T>>;
 
   plugin.configure = (config) => {

packages/core/src/lib/plugin/getSlatePlugin.ts

@@ -6,8 +6,6 @@ import type {
 } from './BasePlugin';
 import type { AnySlatePlugin, SlatePlugin } from './SlatePlugin';
 
-import { resolvePlugin } from '../utils';
-
 /** Get editor plugin by key or plugin object. */
 export function getSlatePlugin<C extends AnyPluginConfig = PluginConfig>(
   editor: SlateEditor,
@@ -22,7 +20,27 @@ export function getSlatePlugin<C extends AnyPluginConfig = PluginConfig>(
   const editorPlugin = editor.plugins[p.key] as any;
 
   if (!editorPlugin) {
-    return plugin.__resolved ? p : resolvePlugin(editor, plugin);
+    return {
+      __apiExtensions: [],
+      __configuration: null,
+      __extensions: [],
+      __optionExtensions: [],
+      dependencies: [],
+      editor: {},
+      handlers: {},
+      inject: {},
+      node: {},
+      override: {},
+      parser: {},
+      parsers: {},
+      plugins: [],
+      priority: 100,
+      render: {},
+      shortcuts: {},
+      transforms: {},
+      ...plugin,
+    };
+    // return plugin.__resolved ? p : resolvePlugin(editor, plugin);
   }
 
   return editorPlugin;

packages/core/src/lib/utils/resolvePlugin.ts

@@ -1,9 +1,11 @@
+import { cloneDeep } from 'lodash';
+
 import type { SlateEditor } from '../editor';
 import type { PluginConfig } from '../plugin/BasePlugin';
 import type { AnySlatePlugin, SlatePlugin } from '../plugin/SlatePlugin';
 
-import { mergeWithoutArray } from '../../internal/mergeWithoutArray';
-import { createSlatePlugin, getEditorPlugin } from '../plugin';
+import { getEditorPlugin } from '../plugin';
+import { mergeLevel } from './resolvePlugins';
 
 /**
  * Resolves and finalizes a plugin configuration for use in a Plate editor.
@@ -24,8 +26,38 @@ export const resolvePlugin = <P extends AnySlatePlugin>(
   editor: SlateEditor,
   _plugin: P
 ): P => {
+  // if (_plugin.key === 'p') {
+  //   // Minimize the number of calls
+  //   console.log(editor.key, _plugin.key);
+  // }
+
   // Create a deep clone of the plugin
-  let plugin = createSlatePlugin(_plugin) as P;
+  let plugin = {
+    __apiExtensions: [],
+    __configuration: null,
+    __extensions: [],
+    __optionExtensions: [],
+    dependencies: [],
+    editor: {},
+    handlers: {},
+    inject: {},
+    node: {},
+    override: {},
+    parser: {},
+    parsers: {},
+    plugins: [],
+    priority: 100,
+    render: {},
+    shortcuts: {},
+    transforms: {},
+    ...(_plugin as any),
+  } as P;
+
+  plugin.node = { type: plugin.key, ...(_plugin.node as any) };
+  // plugin.api = mergeOneLevel(plugin.api, _plugin.api);
+  // plugin.options = mergeOneLevel(plugin.options, _plugin.options);
+  plugin.api = cloneDeep(_plugin.api);
+  plugin.options = cloneDeep(_plugin.options);
 
   plugin.__resolved = true;
 
@@ -35,33 +67,34 @@ export const resolvePlugin = <P extends AnySlatePlugin>(
       getEditorPlugin(editor, plugin as any)
     );
 
-    plugin = mergeWithoutArray({}, plugin, configResult);
+    plugin = mergeLevel(plugin, configResult, 3);
 
     delete (plugin as any).__configuration;
   }
   // Apply all stored extensions
   if (plugin.__extensions && plugin.__extensions.length > 0) {
     plugin.__extensions.forEach((extension) => {
-      plugin = mergeWithoutArray(
-        {},
+      plugin = mergeLevel(
         plugin,
-        extension(getEditorPlugin(editor, plugin as any))
+        extension(getEditorPlugin(editor, plugin as any)),
+        3
       );
     });
     plugin.__extensions = [];
   }
   if (plugin.plugins) {
-    plugin.plugins = plugin.plugins.map((p) => resolvePlugin(editor, p));
+    // plugin.plugins = plugin.plugins.map((p) => {
+    //   return resolvePlugin(editor, p);
+    // });
   }
 
   const targetPluginToInject = plugin.inject?.targetPluginToInject;
   const targetPlugins = plugin.inject?.targetPlugins;
 
   if (targetPluginToInject && targetPlugins && targetPlugins.length > 0) {
     plugin.inject = plugin.inject || {};
-    plugin.inject.plugins = mergeWithoutArray(
-      {},
-      plugin.inject.plugins,
+    plugin.inject.plugins = mergeLevel(
+      plugin.inject.plugins ?? {},
       Object.fromEntries(
         targetPlugins.map((targetPlugin) => {
           const injectedPlugin = targetPluginToInject({
@@ -71,11 +104,13 @@ export const resolvePlugin = <P extends AnySlatePlugin>(
 
           return [targetPlugin, injectedPlugin];
         })
-      )
+      ),
+      4
     );
   }
+  // PERF
   if (plugin.plugins) {
-    plugin.plugins = plugin.plugins.map((p) => resolvePlugin(editor, p));
+    // plugin.plugins = plugin.plugins.map((p) => resolvePlugin(editor, p));
   }
   // TODO React
   if ((plugin as any).node?.component) {