@wix/patterns-fields 1.17.0 → 1.18.0

package/src/components/media-image/media-image.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage216154035";
+var _namespace_ = "mediaimage701414124";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediaimage216154035__root"};
+export var classes = {"root":"mediaimage701414124__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage216154035-from","to":"--mediaimage216154035-to"}; 
+export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage701414124-from","to":"--mediaimage701414124-to"}; 
 
 
 

package/src/components/media-image/overlays/overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay1994304343";
+var _namespace_ = "overlay564791231";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"overlay1994304343__root","iconOverlay":"overlay1994304343__iconOverlay"};
+export var classes = {"root":"overlay564791231__root","iconOverlay":"overlay564791231__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {"iconShadow":"drop-shadow(0 1px 1px rgba(22, 45, 61, 0.6))"}; 
-export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--overlay1994304343-wsr-color-D80"}; 
+export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--overlay564791231-wsr-color-D80"}; 
 
 
 

package/src/components/media-loader/media-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader1774972642";
+var _namespace_ = "medialoader4170719626";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"medialoader1774972642__root","loader":"medialoader1774972642__loader"};
+export var classes = {"root":"medialoader4170719626__root","loader":"medialoader4170719626__loader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-tag/web-media-tag/media-tag.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "mediatag1916996652";
+var _namespace_ = "mediatag3281460592";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediatag1916996652__root"};
+export var classes = {"root":"mediatag3281460592__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document-field.tsx

@@ -83,7 +83,7 @@ export const FormMultiDocumentField: React.FC<
           loading={loading}
           error={invalid}
           loaderBorderStyle="dashed"
-          onAddButtonClick={callMedia as () => Promise<void>}
+          onAddButtonClick={callMedia as () => Promise<boolean>}
           onPasteURLButtonClick={onOpen({
             title: t('CMS.document.pasteUrl.title'),
           })}

package/src/components/multi-document/multi-document-input/form-multi-document-view.tsx

@@ -14,7 +14,7 @@ interface FormMultiDocumentViewProps {
   data: string[];
   readOnly?: boolean;
   onChange: (value: string[]) => void;
-  callMedia: (index?: number) => Promise<void>;
+  callMedia: (index?: number) => Promise<boolean>;
   onDownload: (mediaURI?: string) => void;
   loading: boolean;
   dataHook?: string;
@@ -83,7 +83,7 @@ export const FormMultiDocumentView = React.forwardRef<
             dataHook="multi-document-field-add-document-button"
             theme="plain"
             disabled={readOnly}
-            onClick={callMedia as () => Promise<void>}
+            onClick={callMedia as () => Promise<boolean>}
             className={classes.addDocumentButton}
             loading={replacedDocumentIndex === null ? loading : false}
           />

package/src/components/multi-document/multi-document-input/form-multi-document.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formmultidocument189454545";
+var _namespace_ = "formmultidocument970791185";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formmultidocument189454545__root","viewRoot":"formmultidocument189454545__viewRoot","singleViewWrapper":"formmultidocument189454545__singleViewWrapper","addDocumentButton":"formmultidocument189454545__addDocumentButton"};
+export var classes = {"root":"formmultidocument970791185__root","viewRoot":"formmultidocument970791185__viewRoot","singleViewWrapper":"formmultidocument970791185__singleViewWrapper","addDocumentButton":"formmultidocument970791185__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/cell-rich-content-input.tsx

@@ -41,9 +41,8 @@ export const CellRichContentInput: React.FC<CellRichContentInputProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Deliberately run only on mount — typed key is a one-shot initializer
 
-  const [localValue, setLocalValue, injectedValue] = useRichContentState(
-    initialContent,
-  );
+  const [localValue, setLocalValue, injectedValue] =
+    useRichContentState(initialContent);
 
   const handleChange = useCallback(
     (content: RichContent) => setLocalValue(content),

package/src/components/rich-content/cell-rich-content-view.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  ensureRicosContent,
-  toPlainTextSync,
-} from '@wix/ricos/content';
+import { ensureRicosContent, toPlainTextSync } from '@wix/ricos/content';
 
 import { TextView } from '../text';
 

package/src/components/rich-content/editor.ts

@@ -1,6 +1,5 @@
 // Heavy exports - these pull in @wix/ricos editor/viewer (~300kb+ gzipped)
 // Only import this file when you actually need the rich content editor
-export { default as FormRichContentInput } from './rich-content-input/form-input';
-export * from './cell-rich-content-input';
+export { FormRichContentInput } from './rich-content-input/form-input';
 export * from './hooks';
 export * from './rich-content-input/rich-content-editor';

package/src/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentdefaultvalueinput29875928";
+var _namespace_ = "richcontentdefaultvalueinput2964969043";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontentdefaultvalueinput29875928__root","richContentEditorContainer":"richcontentdefaultvalueinput29875928__richContentEditorContainer","editor":"richcontentdefaultvalueinput29875928__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput2964969043__root","richContentEditorContainer":"richcontentdefaultvalueinput2964969043__richContentEditorContainer","editor":"richcontentdefaultvalueinput2964969043__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"topToolbarHeight":"--richcontentdefaultvalueinput29875928-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput29875928-bottomToolbarHeight"}; 
+export var vars = {"topToolbarHeight":"--richcontentdefaultvalueinput2964969043-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput2964969043-bottomToolbarHeight"}; 
 
 
 

package/src/components/rich-content/rich-content-input/form-input/form-input.tsx

@@ -11,7 +11,7 @@ export type FormRichContentInputProps = RichContentFormInputProps & {
   isSiteMetadataLoading: boolean;
 };
 
-const FormRichContentInput: FC<FormRichContentInputProps> = ({
+export const FormRichContentInput: FC<FormRichContentInputProps> = ({
   isSiteMetadataLoading,
   ...props
 }) => {

package/src/components/rich-content/rich-content-input/form-input/index.ts

@@ -1 +1 @@
-export {default} from './form-input';
+export { FormRichContentInput } from './form-input';

package/src/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentforminput753330684";
+var _namespace_ = "richcontentforminput1732387906";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontentforminput753330684__root","editor":"richcontentforminput753330684__editor"};
+export var classes = {"root":"richcontentforminput1732387906__root","editor":"richcontentforminput1732387906__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-blue-300":"--wds-color-blue-300","wds-border-radius-300":"--wds-border-radius-300","wds-color-blue-100":"--wds-color-blue-100","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","topToolbarHeight":"--richcontentforminput753330684-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput753330684-bottomToolbarHeight"}; 
+export var vars = {"wds-color-blue-300":"--wds-color-blue-300","wds-border-radius-300":"--wds-border-radius-300","wds-color-blue-100":"--wds-color-blue-100","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","topToolbarHeight":"--richcontentforminput1732387906-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput1732387906-bottomToolbarHeight"}; 
 
 
 

package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentformreadonlyinput351246339";
+var _namespace_ = "richcontentformreadonlyinput2090554515";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontentformreadonlyinput351246339__root"};
+export var classes = {"root":"richcontentformreadonlyinput2090554515__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "fullscreenmodal2578374957";
+var _namespace_ = "fullscreenmodal4100765582";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"fullscreenmodal2578374957__root","modalContent":"fullscreenmodal2578374957__modalContent"};
+export var classes = {"root":"fullscreenmodal4100765582__root","modalContent":"fullscreenmodal4100765582__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "publishloader3036007075";
+var _namespace_ = "publishloader2391227011";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"publishloader3036007075__root","publishLoader":"publishloader3036007075__publishLoader"};
+export var classes = {"root":"publishloader2391227011__root","publishLoader":"publishloader2391227011__publishLoader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "togglefullscreenbutton4262494651";
+var _namespace_ = "togglefullscreenbutton2566773121";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"togglefullscreenbutton4262494651__root"};
+export var classes = {"root":"togglefullscreenbutton2566773121__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenteditor1849865231";
+var _namespace_ = "richcontenteditor837972361";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontenteditor1849865231__root","toolbarContainer":"richcontenteditor1849865231__toolbarContainer","footerToolbarContainer":"richcontenteditor1849865231__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1849865231__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1849865231__editor","modalEditor":"richcontenteditor1849865231__modalEditor"};
+export var classes = {"root":"richcontenteditor837972361__root","toolbarContainer":"richcontenteditor837972361__toolbarContainer","footerToolbarContainer":"richcontenteditor837972361__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor837972361__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor837972361__editor","modalEditor":"richcontenteditor837972361__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-font-family-default":"--richcontenteditor1849865231-wds-font-family-default"}; 
+export var vars = {"wds-font-family-default":"--richcontenteditor837972361-wds-font-family-default"}; 
 
 
 

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenttoolbar2248996894";
+var _namespace_ = "richcontenttoolbar664632995";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontenttoolbar2248996894__root","toolbar":"richcontenttoolbar2248996894__toolbar","toolbarButton":"richcontenttoolbar2248996894__toolbarButton"};
+export var classes = {"root":"richcontenttoolbar664632995__root","toolbar":"richcontenttoolbar664632995__toolbar","toolbarButton":"richcontenttoolbar664632995__toolbarButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-viewer/rich-content-viewer.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentviewer1851593110";
+var _namespace_ = "richcontentviewer1273185044";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontentviewer1851593110__root","viewer":"richcontentviewer1851593110__viewer","modalViewer":"richcontentviewer1851593110__modalViewer"};
+export var classes = {"root":"richcontentviewer1273185044__root","viewer":"richcontentviewer1273185044__viewer","modalViewer":"richcontentviewer1273185044__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/cell-rich-text-editor.tsx

@@ -0,0 +1,173 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { EditorState } from 'draft-js';
+import { Modal } from '@wix/design-system';
+
+import { HTMLToText } from '../../auto-field-types';
+import { compositeDecorator } from './rich-text-input/rich-text-editor/composite-decorator';
+import {
+  htmlToEditorState,
+  editorStateToHTML,
+} from './rich-text-input/rich-text-editor/utils';
+import type {
+  CustomStyleMap,
+  InlineStyles,
+} from './rich-text-input/rich-text-editor/utils';
+import { RichEditor } from './rich-text-input/rich-text-editor/rich-editor';
+import { combineClasses } from './rich-text-input/rich-text-editor/utils/stylable-helper';
+import {
+  style,
+  classes,
+} from './rich-text-input/rich-text-editor/rich-text-editor.st.css.js';
+import type { RichTextStyleVariables } from './rich-text-input/rich-text-editor/text-style';
+
+const EDITING_OPTIONS = { headingsEnabled: true };
+
+/** Default text style — matches the CSS fallback values in rich-editor.st.css.
+ *  Consumers (e.g. cms-web) can override with site-specific font values. */
+export const DEFAULT_CELL_TEXT_STYLE: RichTextStyleVariables = {
+  '--rt-h1-fontSize': '72px',
+  '--rt-h1-fontStyle': 'normal',
+  '--rt-h1-fontWeight': '700',
+  '--rt-h1-lineHeight': '1.33',
+  '--rt-h2-fontSize': '42px',
+  '--rt-h2-fontStyle': 'normal',
+  '--rt-h2-fontWeight': '700',
+  '--rt-h2-lineHeight': '1.2',
+  '--rt-h3-fontSize': '38px',
+  '--rt-h3-fontStyle': 'normal',
+  '--rt-h3-fontWeight': '500',
+  '--rt-h3-lineHeight': '1.2',
+  '--rt-h4-fontSize': '34px',
+  '--rt-h4-fontStyle': 'normal',
+  '--rt-h4-fontWeight': '700',
+  '--rt-h4-lineHeight': '1.2',
+  '--rt-h5-fontSize': '28px',
+  '--rt-h5-fontStyle': 'normal',
+  '--rt-h5-fontWeight': '700',
+  '--rt-h5-lineHeight': '1.2',
+  '--rt-h6-fontSize': '22px',
+  '--rt-h6-fontStyle': 'normal',
+  '--rt-h6-fontWeight': '500',
+  '--rt-h6-lineHeight': '1.2',
+  '--rt-p1-fontSize': '18px',
+  '--rt-p1-fontStyle': 'normal',
+  '--rt-p1-fontWeight': '500',
+  '--rt-p1-lineHeight': '24px',
+  '--rt-unstyled-fontSize': '16px',
+  '--rt-unstyled-fontStyle': 'normal',
+  '--rt-unstyled-fontWeight': '500',
+  '--rt-unstyled-lineHeight': '24px',
+  '--rt-p3-fontSize': '14px',
+  '--rt-p3-fontStyle': 'normal',
+  '--rt-p3-fontWeight': '500',
+  '--rt-p3-lineHeight': '18px',
+};
+
+function buildInitialHtml(
+  value?: string,
+  typedKey?: string,
+): string | undefined {
+  if (!typedKey) return value;
+  const existing = value ? HTMLToText(value) : '';
+  return `<p>${existing}${typedKey}</p>`;
+}
+
+export interface CellRichTextEditorProps {
+  value?: string;
+  onChange: (value: string) => void;
+  autoFocus?: boolean;
+  initialTypedKey?: string;
+  /** Controlled fullscreen state — managed by the parent (CellRichTextInput). */
+  isFullScreen?: boolean;
+  onToggleFullScreen?: () => void;
+  /** CSS custom properties for the --rt-* theming API. Defaults to standard sizes. */
+  textStyle?: RichTextStyleVariables;
+}
+
+/** Cell-layer Draft.js editor — fires onChange on every keystroke (not on blur).
+ *  Fullscreen state is controlled by the parent so ESC handling can be
+ *  centralised in a capture-phase listener without React portal limitations. */
+export const CellRichTextEditor: React.FC<CellRichTextEditorProps> = ({
+  value,
+  onChange,
+  autoFocus,
+  initialTypedKey,
+  isFullScreen = false,
+  onToggleFullScreen,
+  textStyle = DEFAULT_CELL_TEXT_STYLE,
+}) => {
+  const initialHtml = useMemo(
+    () => buildInitialHtml(value, initialTypedKey),
+    // Deliberately computed only on mount — typed key is a one-shot initializer.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const {
+    editorState: initialEditorState,
+    customStyleMap,
+    inlineStyles,
+  } = useMemo(
+    () => htmlToEditorState(initialHtml, compositeDecorator, EDITING_OPTIONS),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const [editorState, setEditorState] =
+    useState<EditorState>(initialEditorState);
+  const inlineStylesRef = useRef<InlineStyles>(inlineStyles);
+  const customStyleMapRef = useRef<CustomStyleMap>(customStyleMap);
+
+  const handleChange = useCallback(
+    (newState: EditorState) => {
+      setEditorState(newState);
+      const html = editorStateToHTML(
+        newState,
+        inlineStylesRef.current,
+        EDITING_OPTIONS,
+      );
+      onChange(html);
+    },
+    [onChange],
+  );
+
+  return (
+    <>
+      {!isFullScreen && (
+        <div style={textStyle as React.CSSProperties}>
+          <RichEditor
+            editorState={editorState}
+            customStyleMap={customStyleMapRef.current}
+            onChange={handleChange}
+            onToggleFullScreen={onToggleFullScreen}
+            isFullScreen={false}
+            autoFocus={autoFocus}
+            headingsEnabled
+          />
+        </div>
+      )}
+      {isFullScreen && (
+        <Modal screen="desktop" isOpen>
+          <div
+            className={combineClasses(style, classes.editor, {
+              isFullScreen: true,
+            })}
+            style={textStyle as React.CSSProperties}
+          >
+            <RichEditor
+              editorState={editorState}
+              customStyleMap={customStyleMapRef.current}
+              onChange={handleChange}
+              onToggleFullScreen={onToggleFullScreen}
+              isFullScreen
+              autoFocus
+              headingsEnabled
+            />
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+CellRichTextEditor.displayName = 'CellRichTextEditor';