@wix/patterns-fields 1.39.0 → 1.41.0

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

@@ -15,21 +15,13 @@ import React, {
 
 import { Box, Loader } from '@wix/design-system';
 import type {
-  WixRicosEditorProps,
-  GetToolbarSettings,
-  TextGroupButtons,
-  RichContent,
-  RicosEditorType,
-  ToolbarSettings,
-  EditorEventsProps,
-  ToolbarSettingsFunctions,
-} from '@wix/ricos';
-import {
-  WixRicosEditor,
-  ToolbarType as TOOLBARS,
-  FORMATTING_BUTTONS,
-  withEditorContext,
+  ExternalToolbarButton as RicosExternalToolbarButton,
+  RicosDocument,
+  RicosEditorAPI,
+  RicosEditorProps,
+  ToolbarsConfig,
 } from '@wix/ricos';
+import { RicosEditor, FORMATTING_BUTTONS } from '@wix/ricos';
 
 import { useRequestFrameCallback } from '../../../../hooks';
 import { getActiveElement, getAppRootElement } from '../../../../utils';
@@ -50,20 +42,20 @@ import { usePlugins } from './plugins';
 import { ExternalToolbar } from './rich-content-toolbar';
 import { st, classes } from './rich-content-editor.st.css.js';
 
-type RicosProps = Pick<
-  WixRicosEditorProps,
-  'wixExperiments' | 'biSettings' | 'modalSettings' | 'theme'
->;
+type RicosProps = Pick<RicosEditorProps, 'biSettings' | 'theme'> & {
+  wixExperiments?: unknown;
+};
 
 interface RCEHandle {
   isContentChanged: () => boolean;
+  prePublish: () => Promise<RicosDocument>;
+  setContent: (content: RicosDocument) => void;
 }
 
 interface RCEProps extends RicosProps {
-  content?: RichContent;
-  injectedContent?: RichContent;
-  onChange?: (content: RichContent) => void;
-  getToolbarSettings: GetToolbarSettings;
+  content?: RicosDocument;
+  injectedContent?: RicosDocument;
+  onChange?: (content: RicosDocument) => void;
   autoFocus?: boolean;
   onFocus?: () => void;
   onBlur?: () => void;
@@ -73,11 +65,38 @@ interface RCEProps extends RicosProps {
   dataHook?: string;
 }
 
-const linkPanelSettings = {
-  externalPopups: true,
-  showSponsoredCheckbox: true,
+type ToolbarSyncProps = {
+  editor: RicosEditorAPI;
+  onButtonsChange: (buttons: readonly RicosExternalToolbarButton[]) => void;
+  onReadyChange: (ready: boolean) => void;
+};
+
+const InsertToolbarSync: FC<ToolbarSyncProps> = ({
+  editor,
+  onButtonsChange,
+  onReadyChange,
+}) => {
+  const { buttons } = editor.useToolbarProps('insert');
+
+  // `useToolbarProps` rebuilds `buttons` (new array + closures) on every render,
+  // so guard against pushing an unchanged-by-content array into parent state.
+  const signature = buttons.map((b) => b.id).join('|');
+  const buttonsRef = useRef(buttons);
+  buttonsRef.current = buttons;
+
+  useEffect(() => {
+    onButtonsChange(buttonsRef.current);
+    onReadyChange(buttonsRef.current.length > 0);
+  }, [signature, onButtonsChange, onReadyChange]);
+
+  return null;
 };
 
+InsertToolbarSync.displayName = 'InsertToolbarSync';
+
+const filterStaticToolbarButtons = (button: string) =>
+  button !== FORMATTING_BUTTONS.CODE_BLOCK;
+
 const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
   (
     {
@@ -88,13 +107,11 @@ const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
       onFocus,
       onBlur,
       className,
-      getToolbarSettings,
       dataHook,
       colorScheme,
       isFullScreen,
       onToggleFullScreen,
       hidden,
-      children,
       ...ricosProps
     },
     ref,
@@ -102,6 +119,9 @@ const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
     const containerRef = useRef<HTMLDivElement>(null);
     const containerHeightRef = useRef<number | undefined>();
 
+    // Stable identity so RicosEditor doesn't see a new `container` prop each render.
+    const getContainer = useCallback(() => containerRef.current, []);
+
     const onFullScreenChange = useCallback(() => {
       onToggleFullScreen?.();
 
@@ -110,80 +130,90 @@ const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
       }
     }, [onToggleFullScreen]);
 
-    const editorRef = useRef<RicosEditorType>(null);
+    const editorRef = useRef<RicosEditorAPI | null>(null);
+    const [editor, setEditor] = useState<RicosEditorAPI | null>(null);
     const [isToolbarReady, setIsToolbarReady] = useState(false);
-    const [toolbarButtons, setToolbarButtons] = useState({});
-
-    const updateButtons = useCallback(
-      (editorLoaded?: boolean, effect = false) => {
-        if (!editorRef.current) {
-          return;
-        }
+    const [toolbarButtons, setToolbarButtons] = useState<
+      readonly RicosExternalToolbarButton[]
+    >([]);
+    const [toolbarContainer, setToolbarContainer] =
+      useState<HTMLDivElement | null>(null);
+
+    const setEditorInstance = useCallback((nextEditor: RicosEditorAPI | null) => {
+      editorRef.current = nextEditor;
+      setEditor(nextEditor);
+    }, []);
 
-        const toolbarButtons = editorRef.current.getToolbarProps(
-          TOOLBARS.INSERT_PLUGIN,
-        ).buttons;
+    const setContent = useCallback((nextContent: RicosDocument) => {
+      editorRef.current?.getEditorCommands().setContent(nextContent);
+    }, []);
 
-        if (Object.values(toolbarButtons).length > 0) {
-          !effect && setToolbarButtons(toolbarButtons);
-          editorLoaded && setIsToolbarReady(true);
-        }
-      },
-      [],
+    useImperativeHandle(
+      ref,
+      () => ({
+        isContentChanged: () =>
+          Boolean(editorRef.current?.getContentTraits().isContentChanged),
+        prePublish: async () =>
+          (await editorRef.current?.prePublish()) ??
+          INITIAL_INJECTED_RICH_CONTENT,
+        setContent,
+      }),
+      [setContent],
     );
-    useEffect(() => updateButtons(false, true));
-
-    // Poll via rAF until Ricos has populated its toolbar buttons before marking
-    // the toolbar as ready. A single call to updateButtons(true) at onLoad time
-    // fails silently when Ricos hasn't finished initialising — buttons is empty,
-    // setIsToolbarReady is never called, and the loader persists forever.
-    const onLoadEditor = useCallback(() => {
-      let frameId = 0;
-      (function loadToolbar() {
-        frameId = requestAnimationFrame(() => {
-          if (!editorRef.current) {
-            return;
-          }
-          const { buttons } = editorRef.current.getToolbarProps(
-            TOOLBARS.INSERT_PLUGIN,
-          );
-          if (Object.values(buttons).length > 0) {
-            setToolbarButtons(buttons);
-            setIsToolbarReady(true);
-          } else {
-            loadToolbar();
-          }
-        });
-      })();
-      return () => cancelAnimationFrame(frameId);
-    }, []);
 
+    const appliedInjectedContentRef = useRef<RicosDocument | undefined>();
     useEffect(() => {
-      if (!autoFocus) {
+      if (
+        !injectedContent ||
+        isEqual(INITIAL_INJECTED_RICH_CONTENT, injectedContent) ||
+        isEqual(appliedInjectedContentRef.current, injectedContent)
+      ) {
+        return;
+      }
+
+      appliedInjectedContentRef.current = injectedContent;
+      const timerId = window.setTimeout(() => {
+        setContent(injectedContent);
+      }, 0);
+
+      return () => window.clearTimeout(timerId);
+    }, [injectedContent, setContent]);
+
+    useEffect(() => {
+      if (!autoFocus || !editorRef.current) {
         return;
       }
 
       const frameId = requestAnimationFrame(() => {
         editorRef.current?.focus();
-        updateButtons();
       });
 
       return () => cancelAnimationFrame(frameId);
-    }, [autoFocus, updateButtons]);
+    }, [autoFocus, editor]);
 
-    useImperativeHandle(ref, () => ({
-      isContentChanged: () =>
-        Boolean(editorRef.current?.getContentTraits().isContentChanged),
-    }));
+    const toolbars = useMemo<ToolbarsConfig | undefined>(() => {
+      if (!toolbarContainer) {
+        return undefined;
+      }
 
-    const toolbarContainerRef = useRef<HTMLDivElement>(null);
-    const toolbarSettings = useToolbarSettings(
-      toolbarContainerRef.current!,
-      getToolbarSettings,
-    );
+      return {
+        text: {
+          mode: 'static',
+          container: toolbarContainer,
+          alignment: 'left',
+          buttons: ({ defaultButtons }) =>
+            defaultButtons.filter(filterStaticToolbarButtons),
+        },
+        insert: {
+          footer: {
+            disabled: true,
+          },
+        },
+      };
+    }, [toolbarContainer]);
 
     const isModalOpenRef = useRef(false);
-    const modalSettings = useMemo<WixRicosEditorProps['modalSettings']>(
+    const modalSettings = useMemo<RicosEditorProps['modalSettings']>(
       () => ({
         onModalOpen() {
           isModalOpenRef.current = true;
@@ -228,11 +258,10 @@ const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
     const handleFocus = useCallback<FocusEventHandler>(() => {
       if (containerRef.current === getActiveElement()) {
         editorRef.current?.focus();
-        updateButtons();
       }
 
       triggerFocus();
-    }, [triggerFocus, updateButtons]);
+    }, [triggerFocus]);
     const handleBlur = useCallback<FocusEventHandler>(
       ({ relatedTarget }) => {
         if (!relatedTarget) {
@@ -244,22 +273,9 @@ const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
           isModalOpenRef.current ||
           containerRef.current?.contains(relatedTarget)
         ) {
-          /**
-           * @NOTE
-           * Ignore events which come from modal or
-           * from any target inside editor container
-           */
           return;
         }
 
-        /**
-         * @NOTE
-         * If editor container is blurred due to focus of element
-         * that is out of app root (e.g. tooltip rendered in portal),
-         * then editor blur should be requested to ensure
-         * that editor should not be focused after user action,
-         * otherwise editor should be blurred immediately
-         */
         if (!getAppRootElement().contains(relatedTarget)) {
           requestEditorBlur();
         } else {
@@ -269,30 +285,10 @@ const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
       [triggerBlur, requestEditorBlur],
     );
 
-    /**
-     * NOTE:
-     * `handleOnChange` handles only change events when editor is not focused or focus was lost.
-     * In a normal flow `onChange` is not called on every input and all the changes submitted on blur.
-     */
-    const handleOnChange = useCallback(() => {
-      const hasLostFocusElement = document.activeElement === document.body;
-
-      if (!isFocusedRef.current || hasLostFocusElement) {
-        const isInitialInjectedContent = isEqual(
-          INITIAL_INJECTED_RICH_CONTENT,
-          injectedContent,
-        );
-
-        if (!isInitialInjectedContent) {
-          onBlur?.();
-        }
-      }
-    }, [onBlur, injectedContent]);
-
     const wixRicosProps = useWixRicosProps();
     const plugins = usePlugins(colorScheme);
 
-    const renderInContainer = (children: React.ReactNode) => (
+    return (
       <div
         ref={containerRef}
         data-hook="rich-content.editor"
@@ -305,7 +301,7 @@ const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
         }}
       >
         <div className={classes.toolbarAndFullScreenButtonWrapper}>
-          <div className={classes.toolbarContainer} ref={toolbarContainerRef} />
+          <div className={classes.toolbarContainer} ref={setToolbarContainer} />
           {!hidden && isToolbarReady && (
             <ToggleFullscreenButton
               isFullScreen={isFullScreen}
@@ -313,7 +309,32 @@ const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
             />
           )}
         </div>
-        {!hidden ? children : null}
+
+        {editor && (
+          <InsertToolbarSync
+            editor={editor}
+            onButtonsChange={setToolbarButtons}
+            onReadyChange={setIsToolbarReady}
+          />
+        )}
+
+        {!hidden ? (
+          <div data-hook={dataHook} className={classes.editor}>
+            <RicosEditor
+              ref={setEditorInstance}
+              plugins={plugins}
+              initialContent={content}
+              toolbars={toolbars}
+              modalSettings={modalSettings}
+              textWrap={false}
+              onChange={onChange}
+              container={getContainer}
+              {...ricosProps}
+              {...wixRicosProps}
+            />
+          </div>
+        ) : null}
+
         {!isToolbarReady && <RCELoader />}
         {!hidden && isToolbarReady && (
           <div
@@ -325,26 +346,6 @@ const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
         )}
       </div>
     );
-
-    return renderInContainer(
-      <div data-hook={dataHook} className={classes.editor}>
-        <WixRicosEditor
-          ref={editorRef}
-          plugins={plugins}
-          content={content}
-          injectedContent={injectedContent}
-          toolbarSettings={toolbarSettings}
-          linkPanelSettings={linkPanelSettings}
-          modalSettings={modalSettings}
-          textWrap={false}
-          onLoad={onLoadEditor}
-          onChange={handleOnChange}
-          container={containerRef.current!}
-          {...ricosProps}
-          {...wixRicosProps}
-        />
-      </div>,
-    );
   },
 );
 RCE.displayName = 'RCE';
@@ -365,237 +366,227 @@ RCELoader.displayName = 'RCELoader';
 
 const LOADER_DELAY = 100;
 
-export type RichContentEditorProps = Omit<
-  RCEProps,
-  'getToolbarSettings' | 'modalSettings' | 'onChange'
-> & {
+export type RichContentEditorProps = Omit<RCEProps, 'onChange'> & {
   onEnterFullScreen?: (
-    content?: RichContent,
+    content?: RicosDocument,
     isContentChanged?: boolean,
   ) => void;
   onExitFullScreen?: (
-    content?: RichContent,
+    content?: RicosDocument,
     isContentChanged?: boolean,
   ) => void;
-  onChange?: (content: RichContent, isContentChanged?: boolean) => void;
-  onPublish?: (promise: Promise<any>) => void;
+  onChange?: (content: RicosDocument, isContentChanged?: boolean) => void;
+  onPublish?: (promise: Promise<RicosDocument>) => void;
   fullScreenOnly?: boolean;
 };
 
-export const RichContentEditor: FC<RichContentEditorProps> = withEditorContext(
-  ({
-    onFocus,
-    onBlur,
-    onEnterFullScreen,
-    onExitFullScreen,
-    fullScreenOnly,
-    editorEvents,
-    onPublish,
-    onChange,
-    theme,
-    ...props
-  }: RichContentEditorProps & EditorEventsProps) => {
-    const editorRef = useRef<RCEHandle>(null);
-    const modalEditorRef = useRef<RCEHandle>(null);
-
-    const isRichContentChanged = useCallback(
-      () =>
-        Boolean(
-          editorRef.current?.isContentChanged() ||
-            modalEditorRef.current?.isContentChanged(),
-        ),
-      [],
-    );
-    const handleChange = useCallback(
-      (richContent: RichContent) => {
-        onChange?.(richContent, isRichContentChanged());
-      },
-      [onChange, isRichContentChanged],
-    );
-
-    const [loader, setLoader] = useState(false);
-    const timer = useRef<number>(0);
-    const resetLoader = useCallback(() => {
-      window.clearTimeout(timer.current);
-      setLoader(false);
-    }, []);
-    const queueLoader = useCallback(() => {
-      timer.current = window.setTimeout(() => {
-        setLoader(true);
-      }, LOADER_DELAY);
-    }, []);
+export const RichContentEditor: FC<RichContentEditorProps> = ({
+  onFocus,
+  onBlur,
+  onEnterFullScreen,
+  onExitFullScreen,
+  fullScreenOnly,
+  onPublish,
+  onChange,
+  theme,
+  content,
+  ...props
+}) => {
+  const editorRef = useRef<RCEHandle>(null);
+  const modalEditorRef = useRef<RCEHandle>(null);
+
+  const isRichContentChanged = useCallback(
+    () =>
+      Boolean(
+        editorRef.current?.isContentChanged() ||
+          modalEditorRef.current?.isContentChanged(),
+      ),
+    [],
+  );
+  const handleChange = useCallback(
+    (richContent: RicosDocument) => {
+      onChange?.(richContent, isRichContentChanged());
+    },
+    [onChange, isRichContentChanged],
+  );
 
-    const { content } = props;
-    const [isFullScreen, setIsFullScreen] = useState(!!fullScreenOnly);
-    const onOpen = useCallback(async () => {
-      let finalContent: RichContent | undefined;
-      const isChanged = isRichContentChanged();
-      try {
-        finalContent = (await editorEvents.publish()) as unknown as RichContent;
-        onEnterFullScreen?.(finalContent, isChanged);
-      } catch (error) {
-        finalContent = content;
-        onEnterFullScreen?.(content, isChanged);
-      } finally {
-        setIsFullScreen(true);
-
-        if (isChanged && finalContent) {
-          handleChange(finalContent);
-        }
+  const [loader, setLoader] = useState(false);
+  const timer = useRef<number>(0);
+  const resetLoader = useCallback(() => {
+    window.clearTimeout(timer.current);
+    setLoader(false);
+  }, []);
+  const queueLoader = useCallback(() => {
+    timer.current = window.setTimeout(() => {
+      setLoader(true);
+    }, LOADER_DELAY);
+  }, []);
+
+  const [isFullScreen, setIsFullScreen] = useState(!!fullScreenOnly);
+  const [fullScreenContent, setFullScreenContent] = useState(content);
+
+  useEffect(() => {
+    if (!isFullScreen) {
+      setFullScreenContent(content);
+    }
+  }, [content, isFullScreen]);
+
+  const publishEditorContent = useCallback(
+    async (
+      editorHandle: RCEHandle | null,
+      fallbackContent?: RicosDocument,
+    ): Promise<RicosDocument> => {
+      if (!editorHandle) {
+        return fallbackContent ?? INITIAL_INJECTED_RICH_CONTENT;
       }
-    }, [
-      content,
-      editorEvents,
-      isRichContentChanged,
-      onEnterFullScreen,
-      handleChange,
-    ]);
-    const onClose = useCallback(async () => {
-      queueLoader();
-      let finalContent: RichContent | undefined;
-      const isChanged = isRichContentChanged();
-      try {
-        finalContent = (await editorEvents.publish()) as unknown as RichContent;
-        onExitFullScreen?.(finalContent, isChanged);
-      } catch (error) {
-        finalContent = content;
-        onExitFullScreen?.(content, isChanged);
-      } finally {
-        resetLoader();
-        setIsFullScreen(false);
-
-        if (isChanged && finalContent) {
-          handleChange(finalContent);
-        }
+
+      return (
+        (await editorHandle.prePublish()) ??
+        fallbackContent ??
+        INITIAL_INJECTED_RICH_CONTENT
+      );
+    },
+    [],
+  );
+
+  const onOpen = useCallback(async () => {
+    let finalContent = content;
+    const isChanged = isRichContentChanged();
+
+    try {
+      finalContent = await publishEditorContent(editorRef.current, content);
+      onEnterFullScreen?.(finalContent, isChanged);
+    } catch (error) {
+      finalContent = content;
+      onEnterFullScreen?.(content, isChanged);
+    } finally {
+      setFullScreenContent(finalContent);
+      setIsFullScreen(true);
+
+      if (isChanged && finalContent) {
+        handleChange(finalContent);
       }
-    }, [
-      content,
-      editorEvents,
-      isRichContentChanged,
-      onExitFullScreen,
-      handleChange,
-      queueLoader,
-      resetLoader,
-    ]);
-
-    const handleBlur = useCallback(() => {
-      if (isRichContentChanged()) {
-        onPublish?.(editorEvents.publish().catch(() => content));
+    }
+  }, [
+    content,
+    handleChange,
+    isRichContentChanged,
+    onEnterFullScreen,
+    publishEditorContent,
+  ]);
+  const onClose = useCallback(async () => {
+    queueLoader();
+    let finalContent = content;
+    const isChanged = isRichContentChanged();
+
+    try {
+      finalContent = await publishEditorContent(modalEditorRef.current, content);
+      onExitFullScreen?.(finalContent, isChanged);
+    } catch (error) {
+      finalContent = content;
+      onExitFullScreen?.(content, isChanged);
+    } finally {
+      resetLoader();
+      setIsFullScreen(false);
+
+      if (isChanged && finalContent) {
+        handleChange(finalContent);
       }
-      onBlur?.();
-    }, [content, editorEvents, onBlur, onPublish, isRichContentChanged]);
-
-    // Escape while fullscreen — capture phase so it fires before Ricos' own handlers.
-    // Delegates to onClose which calls editorEvents.publish() for the real current content.
-    useEffect(() => {
-      if (!isFullScreen) {
-        return;
+    }
+  }, [
+    content,
+    handleChange,
+    isRichContentChanged,
+    onExitFullScreen,
+    publishEditorContent,
+    queueLoader,
+    resetLoader,
+  ]);
+
+  const handleBlur = useCallback(() => {
+    if (isRichContentChanged()) {
+      onPublish?.(
+        publishEditorContent(editorRef.current, content).catch(
+          () => content ?? INITIAL_INJECTED_RICH_CONTENT,
+        ),
+      );
+    }
+    onBlur?.();
+  }, [
+    content,
+    isRichContentChanged,
+    onBlur,
+    onPublish,
+    publishEditorContent,
+  ]);
+
+  useEffect(() => {
+    if (!isFullScreen) {
+      return;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        void onClose();
       }
-      const handleKeyDown = (e: KeyboardEvent) => {
-        if (e.key === 'Escape') {
-          e.stopPropagation();
-          onClose();
-        }
-      };
-      document.addEventListener('keydown', handleKeyDown, true);
-      return () => document.removeEventListener('keydown', handleKeyDown, true);
-    }, [isFullScreen, onClose]);
-
-    const getToolbarSettings = useGetToolbarSettings();
-
-    const rceProps = {
-      getToolbarSettings,
-      onChange: handleChange,
     };
 
-    // @NOTE: Ricos now need custom maxHeight to show scroll
-    // since it's requirements fully related to 'visual part' of
-    // editor we just default it here
-    const fullScreenTheme = defaultsDeep(cloneDeep(theme), {
-      customStyles: { editor: { maxHeight: '100%' } },
-      settingsStyles: {
-        modals: {
-          dialogZIndex: Z_INDEX_MODAL_POPOVER,
-        },
-      },
-    });
-
-    return (
-      <>
-        <UserSiteFonts />
-        {!fullScreenOnly && (
-          <RCE
-            {...props}
-            {...rceProps}
-            theme={theme}
-            onFocus={onFocus}
-            onBlur={handleBlur}
-            hidden={isFullScreen}
-            ref={editorRef}
-            isFullScreen={false}
-            onToggleFullScreen={onOpen}
-          />
-        )}
-        <FullscreenModal isOpen={isFullScreen} isLoading={loader}>
-          <RCE
-            {...props}
-            {...rceProps}
-            theme={fullScreenTheme}
-            autoFocus
-            className={classes.modalEditor}
-            ref={modalEditorRef}
-            isFullScreen
-            onToggleFullScreen={onClose}
-          />
-        </FullscreenModal>
-      </>
-    );
-  },
-);
-RichContentEditor.displayName = 'RichContentEditor';
-
-const filterStaticToolbarButtons = (button: string | TextGroupButtons) =>
-  button !== FORMATTING_BUTTONS.CODE_BLOCK;
-
-const useGetToolbarSettings = () =>
-  useCallback<GetToolbarSettings>(
-    ({ textButtons }) =>
-      [
-        {
-          name: TOOLBARS.INSERT_PLUGIN,
-          shouldCreate: () => ({ desktop: true }),
-        },
-        {
-          name: TOOLBARS.FOOTER,
-          shouldCreate: () => ({ desktop: false }),
+    document.addEventListener('keydown', handleKeyDown, true);
+    return () => document.removeEventListener('keydown', handleKeyDown, true);
+  }, [isFullScreen, onClose]);
+
+  const rceProps = {
+    onChange: handleChange,
+  };
+
+  // Must be memoized: Ricos re-processes `theme` whenever its identity changes,
+  // so passing a freshly cloned object every render drives an infinite
+  // re-render loop (freezes the tab) once the fullscreen editor mounts.
+  const fullScreenTheme = useMemo(
+    () =>
+      defaultsDeep(cloneDeep(theme), {
+        customStyles: { editor: { maxHeight: '100%' } },
+        settingsStyles: {
+          modals: {
+            dialogZIndex: Z_INDEX_MODAL_POPOVER,
+          },
         },
-        {
-          name: TOOLBARS.STATIC,
-          getButtons: () => ({
-            desktop: [
-              ...(textButtons?.desktop?.filter?.(filterStaticToolbarButtons) ??
-                []),
-            ],
-          }),
-        },
-        {
-          name: TOOLBARS.QUICK_ACTIONS,
-          activateOnFloatingPlusButton: true,
-          shouldCreate: () => ({ desktop: true }),
-        },
-      ].filter(Boolean) as ToolbarSettingsFunctions[],
-    [],
+      }),
+    [theme],
   );
 
-const useToolbarSettings = (
-  container: HTMLElement,
-  getToolbarSettings: GetToolbarSettings,
-) =>
-  useMemo<ToolbarSettings>(
-    () => ({
-      getToolbarSettings,
-      useStaticTextToolbar: true,
-      textToolbarContainer: container,
-    }),
-    [container, getToolbarSettings],
+  return (
+    <>
+      <UserSiteFonts />
+      {!fullScreenOnly && (
+        <RCE
+          {...props}
+          {...rceProps}
+          content={content}
+          theme={theme}
+          onFocus={onFocus}
+          onBlur={handleBlur}
+          hidden={isFullScreen}
+          ref={editorRef}
+          isFullScreen={false}
+          onToggleFullScreen={onOpen}
+        />
+      )}
+      <FullscreenModal isOpen={isFullScreen} isLoading={loader}>
+        <RCE
+          {...props}
+          {...rceProps}
+          content={fullScreenContent}
+          theme={fullScreenTheme}
+          autoFocus
+          className={classes.modalEditor}
+          ref={modalEditorRef}
+          isFullScreen
+          onToggleFullScreen={onClose}
+        />
+      </FullscreenModal>
+    </>
   );
+};
+RichContentEditor.displayName = 'RichContentEditor';