@byline/richtext-lexical 2.3.3 → 2.4.0

package/dist/lexical-editor.d.ts

@@ -16,6 +16,7 @@ import type { EditorConfig } from './field/config/types';
 export type LexicalEditorConfigureInput = Omit<EditorConfig, 'extensions'> & {
     extensions: ExtensionsList;
 };
+type ConfigureFn = (config: LexicalEditorConfigureInput) => LexicalEditorConfigureInput;
 /**
  * Returns a `RichTextEditorComponent` with editor settings baked in. Use
  * this at the registration site in your admin config when you want to
@@ -23,6 +24,13 @@ export type LexicalEditorConfigureInput = Omit<EditorConfig, 'extensions'> & {
  * overrides via `RichTextField.editorConfig` continue to take precedence
  * at render time.
  *
+ * The returned component is lazy: the editor module graph (RichTextField
+ * + every built-in extension + the Lexical core) is dynamically imported
+ * on first mount, so callers that merely *reference* `lexicalEditor` at
+ * registration time don't drag the editor onto every bundle that touches
+ * the registration. The `configure` callback runs once the chunk has
+ * loaded, with the same seed it received before.
+ *
  * The `configure` callback receives a deep clone of `defaultEditorConfig`
  * with `extensions` populated from `defaultExtensionsList()`. Mutate the
  * clone freely — it's local to this call. Use the chainable
@@ -49,4 +57,5 @@ export type LexicalEditorConfigureInput = Omit<EditorConfig, 'extensions'> & {
  * })
  * ```
  */
-export declare function lexicalEditor(configure?: (config: LexicalEditorConfigureInput) => LexicalEditorConfigureInput): RichTextEditorComponent;
+export declare function lexicalEditor(configure?: ConfigureFn): RichTextEditorComponent;
+export {};

package/dist/lexical-editor.js

@@ -1,21 +1,60 @@
 import { jsx } from "react/jsx-runtime";
-import { cloneDeep } from "lodash-es";
-import { defaultEditorConfig } from "./field/config/default.js";
-import { defaultExtensionsList } from "./field/config/default-extensions.js";
-import { RichTextField } from "./richtext-field.js";
+import { Suspense, lazy } from "react";
+import { Shimmer } from "@byline/ui/react";
+let editorBundlePromise = null;
+function loadEditorBundle() {
+    if (!editorBundlePromise) editorBundlePromise = (async ()=>{
+        const [richtextMod, defaultMod, extensionsMod, lodashMod] = await Promise.all([
+            import("./richtext-field.js"),
+            import("./field/config/default.js"),
+            import("./field/config/default-extensions.js"),
+            import("lodash-es")
+        ]);
+        return {
+            RichTextField: richtextMod.RichTextField,
+            defaultEditorConfig: defaultMod.defaultEditorConfig,
+            defaultExtensionsList: extensionsMod.defaultExtensionsList,
+            cloneDeep: lodashMod.cloneDeep
+        };
+    })();
+    return editorBundlePromise;
+}
 function lexicalEditor(configure) {
-    let baked;
-    if (configure) {
-        const seed = {
-            ...cloneDeep(defaultEditorConfig),
-            extensions: defaultExtensionsList()
+    const Lazy = /*#__PURE__*/ lazy(async ()=>{
+        const { RichTextField, defaultEditorConfig, defaultExtensionsList, cloneDeep } = await loadEditorBundle();
+        let baked;
+        if (configure) {
+            const seed = {
+                ...cloneDeep(defaultEditorConfig),
+                extensions: defaultExtensionsList()
+            };
+            baked = configure(seed);
+        }
+        const Configured = (props)=>/*#__PURE__*/ jsx(RichTextField, {
+                ...props,
+                editorConfig: baked
+            });
+        return {
+            default: Configured
         };
-        baked = configure(seed);
-    }
-    const ConfiguredEditor = (props)=>/*#__PURE__*/ jsx(RichTextField, {
-            ...props,
-            editorConfig: baked
+    });
+    const ConfiguredEditor = (props)=>/*#__PURE__*/ jsx(Suspense, {
+            fallback: /*#__PURE__*/ jsx(EditorPlaceholder, {}),
+            children: /*#__PURE__*/ jsx(Lazy, {
+                ...props
+            })
         });
     return ConfiguredEditor;
 }
+function EditorPlaceholder() {
+    return /*#__PURE__*/ jsx("div", {
+        className: "byline-field-richtext",
+        children: /*#__PURE__*/ jsx("div", {
+            className: "byline-field-richtext-body",
+            children: /*#__PURE__*/ jsx(Shimmer, {
+                height: "35vh"
+            })
+        })
+    });
+}
 export { lexicalEditor };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -72,9 +72,9 @@
     "npm-run-all": "^4.1.5",
     "prism-react-renderer": "^2.4.1",
     "react-error-boundary": "^6.1.1",
-    "@byline/core": "2.3.3",
-    "@byline/client": "2.3.3",
-    "@byline/ui": "2.3.3"
+    "@byline/core": "2.4.0",
+    "@byline/client": "2.4.0",
+    "@byline/ui": "2.4.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/lexical-editor.tsx

@@ -6,12 +6,11 @@
  * Copyright (c) Infonomic Company Limited
  */
 
+import { lazy, Suspense } from 'react'
+
 import type { RichTextEditorComponent } from '@byline/core'
-import { cloneDeep } from 'lodash-es'
+import { Shimmer } from '@byline/ui/react'
 
-import { defaultEditorConfig } from './field/config/default'
-import { defaultExtensionsList } from './field/config/default-extensions'
-import { RichTextField } from './richtext-field'
 import type { ExtensionsList } from './field/config/extensions-list'
 import type { EditorConfig } from './field/config/types'
 
@@ -24,6 +23,46 @@ export type LexicalEditorConfigureInput = Omit<EditorConfig, 'extensions'> & {
   extensions: ExtensionsList
 }
 
+type ConfigureFn = (config: LexicalEditorConfigureInput) => LexicalEditorConfigureInput
+
+/**
+ * Bundle of editor internals that are dynamically imported on first
+ * mount. Kept narrow so the chunk only carries what the configure step
+ * + render need — extension classes the user references directly stay
+ * out of this bundle and remain tree-shakeable.
+ */
+interface EditorBundle {
+  RichTextField: typeof import('./richtext-field').RichTextField
+  defaultEditorConfig: typeof import('./field/config/default').defaultEditorConfig
+  defaultExtensionsList: typeof import('./field/config/default-extensions').defaultExtensionsList
+  cloneDeep: <T>(value: T) => T
+}
+
+let editorBundlePromise: Promise<EditorBundle> | null = null
+
+function loadEditorBundle(): Promise<EditorBundle> {
+  // Memoize the import so multiple `lexicalEditor()` calls share one chunk
+  // load — React.lazy already caches per-wrapper, but consumers that call
+  // the factory more than once would otherwise create parallel promises.
+  if (!editorBundlePromise) {
+    editorBundlePromise = (async () => {
+      const [richtextMod, defaultMod, extensionsMod, lodashMod] = await Promise.all([
+        import('./richtext-field'),
+        import('./field/config/default'),
+        import('./field/config/default-extensions'),
+        import('lodash-es'),
+      ])
+      return {
+        RichTextField: richtextMod.RichTextField,
+        defaultEditorConfig: defaultMod.defaultEditorConfig,
+        defaultExtensionsList: extensionsMod.defaultExtensionsList,
+        cloneDeep: lodashMod.cloneDeep,
+      }
+    })()
+  }
+  return editorBundlePromise
+}
+
 /**
  * Returns a `RichTextEditorComponent` with editor settings baked in. Use
  * this at the registration site in your admin config when you want to
@@ -31,6 +70,13 @@ export type LexicalEditorConfigureInput = Omit<EditorConfig, 'extensions'> & {
  * overrides via `RichTextField.editorConfig` continue to take precedence
  * at render time.
  *
+ * The returned component is lazy: the editor module graph (RichTextField
+ * + every built-in extension + the Lexical core) is dynamically imported
+ * on first mount, so callers that merely *reference* `lexicalEditor` at
+ * registration time don't drag the editor onto every bundle that touches
+ * the registration. The `configure` callback runs once the chunk has
+ * loaded, with the same seed it received before.
+ *
  * The `configure` callback receives a deep clone of `defaultEditorConfig`
  * with `extensions` populated from `defaultExtensionsList()`. Mutate the
  * clone freely — it's local to this call. Use the chainable
@@ -57,21 +103,47 @@ export type LexicalEditorConfigureInput = Omit<EditorConfig, 'extensions'> & {
  * })
  * ```
  */
-export function lexicalEditor(
-  configure?: (config: LexicalEditorConfigureInput) => LexicalEditorConfigureInput
-): RichTextEditorComponent {
-  let baked: EditorConfig | undefined
-  if (configure) {
-    const seed: LexicalEditorConfigureInput = {
-      ...cloneDeep(defaultEditorConfig),
-      extensions: defaultExtensionsList(),
+export function lexicalEditor(configure?: ConfigureFn): RichTextEditorComponent {
+  const Lazy = lazy(async () => {
+    const { RichTextField, defaultEditorConfig, defaultExtensionsList, cloneDeep } =
+      await loadEditorBundle()
+
+    let baked: EditorConfig | undefined
+    if (configure) {
+      const seed: LexicalEditorConfigureInput = {
+        ...cloneDeep(defaultEditorConfig),
+        extensions: defaultExtensionsList(),
+      }
+      baked = configure(seed)
     }
-    baked = configure(seed)
-  }
+
+    const Configured: RichTextEditorComponent = (props) => (
+      <RichTextField {...props} editorConfig={baked} />
+    )
+    return { default: Configured as React.ComponentType<any> }
+  })
 
   const ConfiguredEditor: RichTextEditorComponent = (props) => (
-    <RichTextField {...props} editorConfig={baked} />
+    <Suspense fallback={<EditorPlaceholder />}>
+      <Lazy {...(props as object)} />
+    </Suspense>
   )
-
   return ConfiguredEditor
 }
+
+/**
+ * Skeleton shown while the editor module graph is loading. Mirrors the
+ * `byline-field-richtext` / `byline-field-richtext-body` shell that
+ * `RichTextField` renders, and reuses the same `Shimmer` placeholder the
+ * inner `EditorField` Suspense uses — so the visible cold-load sequence
+ * is just "shimmer → editor" instead of "blank → shimmer → editor".
+ */
+function EditorPlaceholder() {
+  return (
+    <div className="byline-field-richtext">
+      <div className="byline-field-richtext-body">
+        <Shimmer height="35vh" />
+      </div>
+    </div>
+  )
+}