@byline/richtext-lexical 0.9.3

package/src/field/editor-component.css

@@ -0,0 +1,46 @@
+.lexicalRichTextEditor {
+  display: flex;
+  isolation: isolate;
+  width: 100%;
+}
+
+.lexicalRichTextEditor--read-only {
+  .editor-shell::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--canvas-50);
+    opacity: 0.5;
+    z-index: 9;
+  }
+}
+
+.lexicalRichTextEditor__wrap {
+  width: 100%;
+  position: relative;
+}
+
+.lexicalRichTextEditor.error {
+  .editor-shell::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--red-700);
+    opacity: 1;
+    z-index: -1;
+  }
+}
+
+.dark {
+  .lexicalRichTextEditor.error {
+    .editor-shell::after {
+      background: var(--red-700-dark);
+    }
+  }
+}

package/src/field/editor-component.md

@@ -0,0 +1,87 @@
+# Editor Component Architecture
+
+This architecture is designed to solve the "two-way binding problem" common in rich text editors.
+
+Rich text editors maintain their own complex internal state (the DOM/Virtual DOM). When you try to sync this with React state (props), you often get **infinite loops** (Editor changes $\rightarrow$ React updates $\rightarrow$ Prop changes $\rightarrow$ Editor updates $\rightarrow$ Editor changes...) or **cursor jumping** (re-rendering the editor while typing).
+
+```
++-----------------------------------------------------------------------+
+|  EditorField (src/field/editor-field.tsx)                             |
+|  - Handles Lazy Loading & Suspense                                    |
++-----------------------------------+-----------------------------------+
+                                    |
+                                    v
++-----------------------------------+-----------------------------------+
+|  EditorComponent (src/field/editor-component.tsx)                     |
+|  - Manages Hash Refs (lastEmitted, normalizedIncoming)                |
+|  - Handles onChange (Debouncing & Hash Checks)                        |
++-----------------------------------+-----------------------------------+
+                                    |
+                                    | (renders)
+                                    v
++-----------------------------------+----------------------------------+
+|  EditorContext (src/field/editor-context.tsx)                         |
+|  - Wraps everything in <LexicalComposer>                              |
+|  - Provides SharedHistory & SharedOnChange Contexts                   |
++------------------+---------------------------------+-----------------+
+                   |                                 |
+                   | (passed as children)            | (renders)
+                   v                                 v
++------------------+------------------+  +-----------+------------------+
+| ApplyValuePlugin                    |  | Editor (src/field/editor.tsx)|
+| (src/field/apply-value-plugin.tsx)  |  | - ToolbarPlugin              |
+|                                     |  | - ContentEditable            |
+| - Watches: incoming value & hash    |  | - Floating Toolbars          |
+| - Action: editor.update()           |  | - Auto-resize logic          |
+|   (Syncs external props -> Editor)  |  +------------------------------+
++-------------------------------------+
+```
+
+### Key Relationships
+1. `EditorComponent` is the "Brain". It holds the connection to the Payload form state (`useField`) and decides when to update the form value based on hashes.
+2. `EditorContext` is the "Bridge". It initializes the Lexical instance (`LexicalComposer`) but doesn't contain the specific logic for syncing values or rendering the UI itself.
+3. `ApplyValuePlugin` is the "Synchronizer". It sits inside the Lexical context. When `EditorComponent` receives a new value from the database (or parent), it passes it down here. This plugin forces the Lexical instance to update its state to match.
+4. `Editor` is the "View". It handles the visual presentation, toolbars, and the actual `contentEditable` DOM element.
+
+
+## EditorComponent
+
+Here's how the `useRef` hooks inside editor-component.tsx solve editor-specific problems:
+
+### 1. The "Debounce" Ref
+**`dispatchFieldUpdateTask`**
+*   **Purpose:** Performance.
+*   **How it works:** When a user types, Lexical fires `onChange` on every keystroke. We don't want to update the main React state (and trigger re-renders up the tree) 60 times a second.
+*   **Mechanism:** This ref stores the ID of the current `requestIdleCallback`. If a user types again before the callback runs, we cancel the old one and start a new one. It ensures we only process the *latest* state when the browser is idle.
+
+### 2. The "Fresh Props" Refs
+**`valueRef`** and **`initialValueRef`**
+*   **Purpose:** Accessing state inside `useCallback` without dependencies.
+*   **How it works:** The `handleChange` function is memoized via `useCallback`. If we added `value` to its dependency array, `handleChange` would be re-created every time the user typed, breaking our debounce logic.
+*   **Mechanism:** We copy the props into these refs on every render. Inside `handleChange`, we read `valueRef.current`. This lets the function stay stable (same memory address) while still seeing the latest data.
+
+### 3. The "Outbound Loop Breaker"
+**`lastEmittedHashRef`**
+*   **Purpose:** Preventing the "Echo" loop.
+*   **The Problem:** You type "A". The editor emits "A". The parent saves "A" and passes "A" back down as a prop. The editor sees "A" and thinks, "Oh, a new value! I should process this."
+*   **The Fix:** Before calling `onChange`, we calculate a hash of the content and store it here.
+*   **Logic:** "If the hash I'm about to send is the same as the last one I sent, do nothing."
+
+### 4. The "Inbound Normalization" Refs
+**`normalizedIncomingHashRef`** and **`hasNormalizedBaselineRef`**
+*   **Purpose:** Handling Lexical's strictness.
+*   **The Problem:** Lexical is opinionated. If you load a value like `{"text": "hello"}`, Lexical might instantly transform it into a more complex structure (adding IDs, versions, etc.). This immediate transformation looks like a "change" event, which might trigger a save before the user has even touched the keyboard.
+*   **`normalizedIncomingHashRef`:**
+    *   The `ApplyValuePlugin` loads data, waits for Lexical to "settle" (normalize it), and then saves the hash of that *settled* state here.
+    *   The `handleChange` function checks this: "Is this 'new' change just the result of the data I just loaded?" If yes, it ignores it.
+*   **`hasNormalizedBaselineRef`:**
+    *   This acts as a gatekeeper. It starts as `false`.
+    *   It prevents the editor from emitting *any* changes until the initial value has been fully loaded and normalized. This stops the editor from accidentally overwriting the database with an empty state during the split-second it takes to mount.
+
+### Summary Flow
+1.  **User types:** `handleChange` triggers.
+2.  **Debounce:** `dispatchFieldUpdateTask` ensures we wait for a pause.
+3.  **Check Baseline:** `hasNormalizedBaselineRef` ensures we aren't just booting up.
+4.  **Check Inbound:** `normalizedIncomingHashRef` ensures we aren't just reporting Lexical's own auto-formatting of the data we just gave it.
+5.  **Check Outbound:** `lastEmittedHashRef` ensures we aren't reporting the same thing twice.
+6.  **Success:** Only then do we call `onChange`.

package/src/field/editor-component.test.tsx

@@ -0,0 +1,170 @@
+import { act } from 'react'
+
+import type {
+  SerializedEditorState,
+  SerializedElementNode,
+  SerializedRootNode,
+  SerializedTextNode,
+} from 'lexical'
+import { createRoot } from 'react-dom/client'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('./editor-component.css', () => ({}))
+vi.mock('./themes/lexical-editor-theme.css', () => ({}))
+vi.mock('@infonomic/uikit/react', () => ({
+  HelpText: () => null,
+  Label: () => null,
+}))
+
+import { ApplyValuePlugin } from './apply-value-plugin'
+import { hashSerializedState } from './utils/hashSerializedState'
+
+// Enable React act warnings suppression for this environment
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
+
+// Mock the Lexical composer context to avoid spinning up a real editor
+const mockEditor = {
+  update: (fn: () => void) => fn(),
+  parseEditorState: vi.fn((val) => val),
+  setEditorState: vi.fn(),
+}
+
+vi.mock('@lexical/react/LexicalComposerContext', () => {
+  return {
+    useLexicalComposerContext: () => [mockEditor],
+  }
+})
+
+describe('ApplyValuePlugin', () => {
+  beforeEach(() => {
+    mockEditor.parseEditorState.mockClear()
+    mockEditor.setEditorState.mockClear()
+  })
+
+  const stateA: SerializedEditorState = {
+    root: {
+      children: [],
+      direction: 'ltr',
+      format: '',
+      indent: 0,
+      type: 'root',
+      version: 1,
+    } as SerializedRootNode,
+  }
+
+  const stateB: SerializedEditorState = {
+    root: {
+      children: [
+        {
+          children: [
+            {
+              detail: 0,
+              format: 0,
+              mode: 'normal',
+              style: '',
+              text: 'Hello world',
+              type: 'text',
+              version: 1,
+            } as SerializedTextNode,
+          ],
+          direction: 'ltr',
+          format: '',
+          indent: 0,
+          type: 'paragraph',
+          version: 1,
+        } as SerializedElementNode,
+      ],
+      direction: 'ltr',
+      format: '',
+      indent: 0,
+      type: 'root',
+      version: 1,
+    } as SerializedRootNode,
+  }
+
+  it('applies incoming value once and ignores identical hashes', async () => {
+    const container = document.createElement('div')
+    const root = createRoot(container)
+    const lastEmitted = { current: undefined as string | undefined }
+    const normalizedIncoming = { current: undefined as string | undefined }
+    const hasNormalizedBaseline = { current: false }
+
+    const hashA = hashSerializedState(stateA)
+
+    await act(async () => {
+      root.render(
+        <ApplyValuePlugin
+          value={stateA}
+          incomingHash={hashA}
+          lastEmittedHashRef={lastEmitted}
+          normalizedIncomingHashRef={normalizedIncoming}
+          hasNormalizedBaselineRef={hasNormalizedBaseline}
+        />
+      )
+    })
+
+    expect(mockEditor.setEditorState).toHaveBeenCalledTimes(1)
+    expect(mockEditor.setEditorState).toHaveBeenLastCalledWith(stateA)
+
+    // Re-render with same value -> no new apply
+    await act(async () => {
+      root.render(
+        <ApplyValuePlugin
+          value={stateA}
+          incomingHash={hashA}
+          lastEmittedHashRef={lastEmitted}
+          normalizedIncomingHashRef={normalizedIncoming}
+          hasNormalizedBaselineRef={hasNormalizedBaseline}
+        />
+      )
+    })
+    expect(mockEditor.setEditorState).toHaveBeenCalledTimes(1)
+
+    // New value -> apply again
+    const hashB = hashSerializedState(stateB)
+    await act(async () => {
+      root.render(
+        <ApplyValuePlugin
+          value={stateB}
+          incomingHash={hashB}
+          lastEmittedHashRef={lastEmitted}
+          normalizedIncomingHashRef={normalizedIncoming}
+          hasNormalizedBaselineRef={hasNormalizedBaseline}
+        />
+      )
+    })
+    expect(mockEditor.setEditorState).toHaveBeenCalledTimes(2)
+    expect(mockEditor.setEditorState).toHaveBeenLastCalledWith(stateB)
+
+    await act(async () => {
+      root.unmount()
+    })
+  })
+
+  it('skips apply when incoming hash matches last emitted (echo prevention)', async () => {
+    const container = document.createElement('div')
+    const root = createRoot(container)
+    const lastEmitted = { current: hashSerializedState(stateA) }
+    const normalizedIncoming = { current: undefined as string | undefined }
+    const hasNormalizedBaseline = { current: false }
+    const hashA = hashSerializedState(stateA)
+
+    await act(async () => {
+      root.render(
+        <ApplyValuePlugin
+          value={stateA}
+          incomingHash={hashA}
+          lastEmittedHashRef={lastEmitted}
+          normalizedIncomingHashRef={normalizedIncoming}
+          hasNormalizedBaselineRef={hasNormalizedBaseline}
+        />
+      )
+    })
+
+    expect(mockEditor.setEditorState).not.toHaveBeenCalled()
+    await act(async () => {
+      root.unmount()
+    })
+  })
+})

package/src/field/editor-component.tsx

@@ -0,0 +1,207 @@
+'use client'
+
+/**
+ * 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 { memo, useCallback, useMemo, useRef } from 'react'
+
+import { HelpText, Label } from '@infonomic/uikit/react'
+import type { EditorState, SerializedEditorState } from 'lexical'
+import { ErrorBoundary } from 'react-error-boundary'
+
+import { richTextValidate } from '../validate/validate'
+import { ApplyValuePlugin } from './apply-value-plugin'
+import { EditorContext } from './editor-context'
+import { hashSerializedState } from './utils/hashSerializedState'
+import type { EditorFieldProps } from '../types'
+
+import './editor-component.css'
+import './themes/lexical-editor-theme.css'
+
+const baseClass = 'lexicalRichTextEditor'
+
+// NOTE: @See ./editor-component.md mini doc for an explanation of our editor architecture.
+
+// We memoize the EditorComponent to prevent re-renders from parent components or
+// other editor instances. Only internal state changes for a given (this)
+// editor instance should trigger re-renders. Our form-context and value handlers
+// are subscription-based and so in theory this shouldn't be necessary, but
+// here just in case.
+export const EditorComponent = memo(function EditorComponent({
+  name,
+  id,
+  label,
+  description,
+  required,
+  readonly,
+  editorConfig,
+  defaultValue,
+  value,
+  onChange,
+  minHeight,
+  maxHeight,
+  validate = richTextValidate,
+  onError: _onError,
+  lexicalEditorProps: _lexicalEditorProps,
+  featureBeforeEditor,
+  featureAfterEditor,
+  featureChildren,
+}: EditorFieldProps): React.JSX.Element {
+  const disabled = readonly ?? false
+  const dispatchFieldUpdateTask = useRef<number>(undefined)
+  const valueRef = useRef(value)
+  valueRef.current = value
+  const initialValueRef = useRef(defaultValue)
+  initialValueRef.current = defaultValue
+  const lastEmittedHashRef = useRef<string | undefined>(undefined)
+  const normalizedIncomingHashRef = useRef<string | undefined>(undefined)
+  const hasNormalizedBaselineRef = useRef<boolean>(false)
+  // const _debugLogCountRef = useRef<number>(0)
+
+  // TODO: implement validation handling (currently unused)
+  const _memoizedValidate = useCallback(
+    (val: SerializedEditorState | undefined) => {
+      if (typeof validate === 'function') {
+        return validate(val, { required })
+      }
+      return true
+    },
+    [validate, required]
+  )
+
+  // Debounced onChange -> emit to store
+  const handleChange = useCallback(
+    (editorState: EditorState, _editor: unknown, _tags?: Set<string>) => {
+      // const _capturedTags = tags != null ? Array.from(tags) : []
+      const updateFieldValue = (editorState: EditorState) => {
+        const newState = editorState.toJSON()
+        const nextHash = hashSerializedState(newState)
+
+        // If we have an incoming form value but haven't established a normalized baseline yet,
+        // ignore mount-time normalization updates (often appear as tags: []).
+        if (
+          (valueRef.current ?? initialValueRef.current) != null &&
+          hasNormalizedBaselineRef.current !== true
+        ) {
+          // if (process.env.NODE_ENV === 'production' && _debugLogCountRef.current < 10) {
+          //   _debugLogCountRef.current++
+          //   // eslint-disable-next-line no-console
+          //   console.log('[lexical][payload][skip] waiting baseline', {
+          //     tags: _capturedTags,
+          //     nextHash,
+          //     normalizedIncomingHash: normalizedIncomingHashRef.current,
+          //     lastEmittedHash: lastEmittedHashRef.current,
+          //   })
+          // }
+          return
+        }
+        // Prefer comparing against Lexical-normalized incoming JSON (critical for nested editors).
+        if (
+          normalizedIncomingHashRef.current != null &&
+          nextHash === normalizedIncomingHashRef.current
+        ) {
+          return
+        }
+
+        // Also avoid re-emitting the exact same state multiple times.
+        if (lastEmittedHashRef.current != null && nextHash === lastEmittedHashRef.current) return
+
+        lastEmittedHashRef.current = nextHash
+
+        // if (process.env.NODE_ENV === 'production' && _debugLogCountRef.current < 10) {
+        //   _debugLogCountRef.current++
+        //   // eslint-disable-next-line no-console
+        //   console.log('[lexical][payload][setValue]', {
+        //     tags: _capturedTags,
+        //     nextHash,
+        //     normalizedIncomingHash: normalizedIncomingHashRef.current,
+        //     rawIncomingHash: rawIncomingHashRef.current,
+        //     lastEmittedHash: lastEmittedHashRef.current,
+        //   })
+        // }
+
+        if (typeof onChange === 'function') {
+          onChange(newState)
+        }
+      }
+
+      if (typeof window.requestIdleCallback === 'function') {
+        // Cancel earlier scheduled value updates,
+        // so that a CPU-limited event loop isn't flooded with n callbacks for n keystrokes
+        // into the rich text field, but that there's only ever the latest one state update
+        // dispatch task, to be executed with the next idle time,
+        // or the deadline of 500ms.
+        if (typeof window.cancelIdleCallback === 'function' && dispatchFieldUpdateTask.current) {
+          cancelIdleCallback(dispatchFieldUpdateTask.current)
+        }
+        // Schedule the state update to happen the next time the browser has sufficient resources,
+        // or the latest after 500ms.
+        dispatchFieldUpdateTask.current = requestIdleCallback(() => updateFieldValue(editorState), {
+          timeout: 500,
+        })
+      } else {
+        updateFieldValue(editorState)
+      }
+    },
+    [onChange]
+  )
+
+  const incomingValue = value ?? defaultValue ?? undefined
+
+  const incomingHash = useMemo(
+    () => (incomingValue != null ? hashSerializedState(incomingValue) : undefined),
+    [incomingValue]
+  )
+
+  return (
+    <div className={baseClass}>
+      <div className={`${baseClass}__wrap`}>
+        {label != null &&
+          (typeof label === 'string' ? (
+            <Label id={`${id}-label`} label={label} htmlFor={id} required={required} />
+          ) : (
+            label
+          ))}
+        <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>
+          <EditorContext
+            composerKey={id}
+            editorConfig={editorConfig}
+            key={id}
+            onChange={handleChange}
+            readOnly={disabled}
+            value={incomingValue}
+            minHeight={minHeight}
+            maxHeight={maxHeight}
+            beforeEditor={featureBeforeEditor}
+            afterEditor={featureAfterEditor}
+          >
+            <ApplyValuePlugin
+              value={incomingValue}
+              incomingHash={incomingHash}
+              lastEmittedHashRef={lastEmittedHashRef}
+              normalizedIncomingHashRef={normalizedIncomingHashRef}
+              hasNormalizedBaselineRef={hasNormalizedBaselineRef}
+            />
+            {featureChildren}
+          </EditorContext>
+        </ErrorBoundary>
+        {description && <HelpText text={description} />}
+      </div>
+    </div>
+  )
+})
+
+function fallbackRender({ error }: any): React.JSX.Element {
+  return (
+    <div className="errorBoundary" role="alert">
+      <p>Something went wrong:</p>
+      <pre style={{ color: 'red' }}>{error.message}</pre>
+    </div>
+  )
+}

package/src/field/editor-context.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+/**
+ * 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 * as React from 'react'
+import { useMemo } from 'react'
+
+import type { InitialConfigType } from '@lexical/react/LexicalComposer'
+import { LexicalComposer } from '@lexical/react/LexicalComposer'
+import type { EditorState, LexicalEditor, SerializedEditorState } from 'lexical'
+
+import { EditorConfigContext } from './config/editor-config-context'
+import { SharedHistoryContext } from './context/shared-history-context'
+import { SharedOnChangeContext } from './context/shared-on-change-context'
+import { Editor } from './editor'
+import { Nodes } from './nodes'
+import { ToolbarExtensionsProvider } from './toolbar-extensions'
+import type { EditorConfig } from './config/types'
+
+// Catch any errors that occur during Lexical updates and log them
+// or throw them as needed. If you don't throw them, Lexical will
+// try to recover gracefully without losing user data.
+function _onError(error: Error, _editor: LexicalEditor): void {
+  // eslint-disable-next-line no-console
+  console.error(error)
+}
+
+export function EditorContext(props: {
+  composerKey: string
+  editorConfig: EditorConfig
+  onChange: (editorState: EditorState, editor: LexicalEditor, tags: Set<string>) => void
+  readOnly: boolean
+  value?: SerializedEditorState
+  minHeight?: number | string
+  maxHeight?: number | string
+  children?: React.ReactNode
+  beforeEditor?: React.ReactNode[]
+  afterEditor?: React.ReactNode[]
+}): React.JSX.Element {
+  const {
+    composerKey,
+    editorConfig,
+    onChange,
+    readOnly,
+    value,
+    beforeEditor,
+    afterEditor,
+    children,
+  } = props
+
+  // useMemo for the initialConfig that depends on readOnly and value
+  // biome-ignore lint/correctness/useExhaustiveDependencies: TODO: revisit
+  const initialConfig = useMemo<InitialConfigType>(() => {
+    return {
+      editable: readOnly !== true,
+      editorState: value != null ? JSON.stringify(value) : undefined,
+      namespace: editorConfig.lexical.namespace,
+      nodes: [...Nodes],
+      onError: (error: Error) => {
+        throw error
+      },
+      theme: editorConfig.lexical.theme,
+    }
+    // Important: do not add readOnly and value to the dependencies array.
+    // This will cause the entire lexical editor to re-render if the document
+    // is saved, which will cause the editor to lose focus.
+
+    // NOTE: 2025-04-26: This is NOT the case for our version of the editor.
+    // Without readOnly as a dependency, the editor will never transition
+    // from readOnly to editable during form loading, when disabledFromField
+    // in field-component will be briefly false.
+  }, [editorConfig, readOnly])
+
+  if (initialConfig == null) {
+    return <p>Loading...</p>
+  }
+
+  return (
+    <LexicalComposer initialConfig={initialConfig} key={composerKey + initialConfig.editable}>
+      <EditorConfigContext config={editorConfig.settings}>
+        <SharedOnChangeContext onChange={onChange}>
+          <SharedHistoryContext>
+            <ToolbarExtensionsProvider>
+              <div className="editor-shell">
+                {beforeEditor}
+                <Editor minHeight={props.minHeight} maxHeight={props.maxHeight} />
+                {afterEditor}
+                {children}
+              </div>
+            </ToolbarExtensionsProvider>
+          </SharedHistoryContext>
+        </SharedOnChangeContext>
+      </EditorConfigContext>
+    </LexicalComposer>
+  )
+}

package/src/field/editor-field.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+/**
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Copyright notices appear at the top of source files where applicable
+ * and are licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * https://github.com/facebook/lexical
+ *
+ * Portions Copyright (c) Payload CMS, LLC info@payloadcms.com
+ * Copyright notices appear at the top of source files where applicable
+ * and are licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree
+ *
+ * https://github.com/payloadcms/payload/
+ *
+ *
+ * Note: For historical context see...
+ *
+ * https://github.com/facebook/lexical/commits?author=58bits
+ * https://github.com/infonomic/payload-alternative-lexical-richtext-editor
+ * https://github.com/AlessioGr/payload-plugin-lexical/commits?author=58bits
+ * https://github.com/payloadcms/payload/commits?author=58bits
+ *
+ *
+ * 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 * as React from 'react'
+import { lazy, Suspense } from 'react'
+
+import { Shimmer } from '@infonomic/uikit/react'
+
+import type { EditorFieldProps } from '../types'
+
+const EditorComponent = lazy(() =>
+  import('./editor-component').then((module) => ({ default: module.EditorComponent }))
+)
+
+export function EditorField(props: EditorFieldProps): React.JSX.Element {
+  return (
+    <Suspense fallback={<Shimmer height="35vh" />}>
+      <EditorComponent {...props} />
+    </Suspense>
+  )
+}