@byline/richtext-lexical 3.12.0 → 3.12.2

package/dist/field/editor-field.js

@@ -1,17 +1,13 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { Suspense, lazy } from "react";
-import { Shimmer } from "@byline/ui/react";
+import { EditorPlaceholder } from "./editor-placeholder.js";
 const EditorComponent = /*#__PURE__*/ lazy(()=>import("./editor-component.js").then((module)=>({
             default: module.EditorComponent
         })));
 function EditorField(props) {
     return /*#__PURE__*/ jsx(Suspense, {
-        fallback: /*#__PURE__*/ jsx(Shimmer, {
-            variant: "text",
-            lines: 20,
-            lineHeight: "1.15rem"
-        }),
+        fallback: /*#__PURE__*/ jsx(EditorPlaceholder, {}),
         children: /*#__PURE__*/ jsx(EditorComponent, {
             ...props
         })

package/dist/field/editor-placeholder.d.ts

@@ -0,0 +1,20 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type React from 'react';
+/**
+ * Skeleton shown while the editor module graph is loading. Composes the
+ * `Shimmer` primitive into a document-shaped layout — a heading, a couple
+ * of paragraphs, an inset image, a sub-heading, then more text — so the
+ * placeholder reads as document-shaped content rather than a flat stack of
+ * identical rows.
+ *
+ * Shared by both the outer `lexicalEditor()` Suspense fallback (while the
+ * editor's lazy module graph loads) and the inner `EditorField` Suspense
+ * fallback, so the visible cold-load sequence stays consistent throughout.
+ */
+export declare function EditorPlaceholder(): React.JSX.Element;

package/dist/field/editor-placeholder.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Shimmer } from "@byline/ui/react";
+function EditorPlaceholder() {
+    return /*#__PURE__*/ jsxs("div", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1.25rem'
+        },
+        children: [
+            /*#__PURE__*/ jsx(Shimmer, {
+                variant: "rectangular",
+                width: "60%",
+                height: "1.75rem"
+            }),
+            /*#__PURE__*/ jsx(Shimmer, {
+                variant: "text",
+                lines: 4,
+                lineHeight: "1.15rem"
+            }),
+            /*#__PURE__*/ jsx(Shimmer, {
+                variant: "rectangular",
+                width: "100%",
+                height: "12rem"
+            }),
+            /*#__PURE__*/ jsx(Shimmer, {
+                variant: "rectangular",
+                width: "40%",
+                height: "1.35rem"
+            }),
+            /*#__PURE__*/ jsx(Shimmer, {
+                variant: "text",
+                lines: 6,
+                lineHeight: "1.15rem"
+            })
+        ]
+    });
+}
+export { EditorPlaceholder };

package/dist/lexical-editor.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Suspense, lazy } from "react";
-import { Shimmer } from "@byline/ui/react";
+import { EditorPlaceholder } from "./field/editor-placeholder.js";
 let editorBundlePromise = null;
 function loadEditorBundle() {
     if (!editorBundlePromise) editorBundlePromise = (async ()=>{
@@ -39,24 +39,17 @@ function lexicalEditor(configure) {
         };
     });
     const ConfiguredEditor = (props)=>/*#__PURE__*/ jsx(Suspense, {
-            fallback: /*#__PURE__*/ jsx(EditorPlaceholder, {}),
+            fallback: /*#__PURE__*/ jsx("div", {
+                className: "byline-field-richtext",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "byline-field-richtext-body",
+                    children: /*#__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, {
-                variant: "text",
-                lines: 20,
-                lineHeight: "1.15rem"
-            })
-        })
-    });
-}
 export { lexicalEditor };

package/package.json

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

package/src/field/editor-field.tsx

@@ -34,8 +34,7 @@
 import type * as React from 'react'
 import { lazy, Suspense } from 'react'
 
-import { Shimmer } from '@byline/ui/react'
-
+import { EditorPlaceholder } from './editor-placeholder'
 import type { EditorFieldProps } from '../types'
 
 const EditorComponent = lazy(() =>
@@ -44,7 +43,7 @@ const EditorComponent = lazy(() =>
 
 export function EditorField(props: EditorFieldProps): React.JSX.Element {
   return (
-    <Suspense fallback={<Shimmer variant="text" lines={20} lineHeight="1.15rem" />}>
+    <Suspense fallback={<EditorPlaceholder />}>
       <EditorComponent {...props} />
     </Suspense>
   )

package/src/field/editor-placeholder.tsx

@@ -0,0 +1,43 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type React from 'react'
+
+import { Shimmer } from '@byline/ui/react'
+
+/**
+ * Skeleton shown while the editor module graph is loading. Composes the
+ * `Shimmer` primitive into a document-shaped layout — a heading, a couple
+ * of paragraphs, an inset image, a sub-heading, then more text — so the
+ * placeholder reads as document-shaped content rather than a flat stack of
+ * identical rows.
+ *
+ * Shared by both the outer `lexicalEditor()` Suspense fallback (while the
+ * editor's lazy module graph loads) and the inner `EditorField` Suspense
+ * fallback, so the visible cold-load sequence stays consistent throughout.
+ */
+export function EditorPlaceholder(): React.JSX.Element {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+      {/* Heading (h1) */}
+      <Shimmer variant="rectangular" width="60%" height="1.75rem" />
+
+      {/* Opening paragraph */}
+      <Shimmer variant="text" lines={4} lineHeight="1.15rem" />
+
+      {/* Inset image / media block */}
+      <Shimmer variant="rectangular" width="100%" height="12rem" />
+
+      {/* Sub-heading (h2) */}
+      <Shimmer variant="rectangular" width="40%" height="1.35rem" />
+
+      {/* Closing paragraphs */}
+      <Shimmer variant="text" lines={6} lineHeight="1.15rem" />
+    </div>
+  )
+}

package/src/lexical-editor.tsx

@@ -9,8 +9,8 @@
 import { lazy, Suspense } from 'react'
 
 import type { RichTextEditorComponent } from '@byline/core'
-import { Shimmer } from '@byline/ui/react'
 
+import { EditorPlaceholder } from './field/editor-placeholder'
 import type { ExtensionsList } from './field/config/extensions-list'
 import type { EditorConfig } from './field/config/types'
 
@@ -129,26 +129,21 @@ export function lexicalEditor(configure?: ConfigureFn): RichTextEditorComponent
   })
 
   const ConfiguredEditor: RichTextEditorComponent = (props) => (
-    <Suspense fallback={<EditorPlaceholder />}>
+    <Suspense
+      fallback={
+        // Mirror the `byline-field-richtext` / `byline-field-richtext-body`
+        // shell that `RichTextField` renders so the visible cold-load
+        // sequence is just "shimmer → editor" instead of
+        // "blank → shimmer → editor".
+        <div className="byline-field-richtext">
+          <div className="byline-field-richtext-body">
+            <EditorPlaceholder />
+          </div>
+        </div>
+      }
+    >
       <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 variant="text" lines={20} lineHeight="1.15rem" />
-      </div>
-    </div>
-  )
-}