torch-glare 2.4.0 → 2.4.2

package/apps/lib/components/TextEditor/RichTextField.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { lazy, Suspense, useEffect, useState } from "react";
+import type { OutputData } from "@editorjs/editorjs";
+
+/**
+ * Client-only, lazily-loaded wrapper around the EditorJS `TextEditor`.
+ *
+ * EditorJS references DOM globals (`Element`) at module-load time, which crashes
+ * server-side rendering. Statically importing `TextEditor` in the field registry
+ * would pull it into the SSR bundle; loading it lazily + only after mount keeps
+ * the builder SSR-safe — the editor is imported on the client, on demand.
+ */
+const TextEditorLazy = lazy(() => import("./TextEditor").then((m) => ({ default: m.TextEditor })));
+
+export interface RichTextFieldProps {
+  data?: OutputData;
+  onChange?: (data: OutputData) => void;
+  readOnly?: boolean;
+  placeholder?: string;
+  /** Editor size — controls min-height + padding (the toolbar gutter). Default "M". */
+  size?: "S" | "M" | "L" | "XL";
+}
+
+const placeholderBox = (
+  <div className="min-h-[200px] w-full rounded-[6px] border border-border-presentation-action-primary bg-background-presentation-form-field-primary" />
+);
+
+export function RichTextField({ size = "M", ...props }: RichTextFieldProps) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) return placeholderBox;
+
+  return (
+    <Suspense fallback={placeholderBox}>
+      <TextEditorLazy
+        size={size}
+        className="border border-border-presentation-action-primary"
+        {...props}
+      />
+    </Suspense>
+  );
+}
+
+RichTextField.displayName = "RichTextField";

package/apps/lib/components/{TableDnDWrapper.ts → TextEditor/TableDnDWrapper.ts}

@@ -27,9 +27,7 @@ interface DragState {
   startY: number;
 }
 
-export default function createTableDnDClass(
-  OriginalTable: TableClass,
-): TableClass {
+export default function createTableDnDClass(OriginalTable: TableClass): TableClass {
   return class TableDnD extends OriginalTable {
     private _drag: DragState = {
       active: false,
@@ -101,9 +99,7 @@ export default function createTableDnDClass(
 
       // Proximity-based toolbox visibility:
       // Only show row handle near left edge, column handle near top edge
-      wrapper.addEventListener("mousemove", (e) =>
-        this._onWrapperMouseMove(e),
-      );
+      wrapper.addEventListener("mousemove", (e) => this._onWrapperMouseMove(e));
       wrapper.addEventListener("mouseleave", () => {
         wrapper.classList.remove("tc-dnd--show-row", "tc-dnd--show-col");
       });
@@ -140,8 +136,7 @@ export default function createTableDnDClass(
     // ─── Proximity-based toolbox visibility ──────────────────────────────
 
     private _onWrapperMouseMove(e: MouseEvent): void {
-      const tableEl =
-        this._wrapperRef?.querySelector<HTMLElement>(".tc-table");
+      const tableEl = this._wrapperRef?.querySelector<HTMLElement>(".tc-table");
       if (!tableEl || !this._wrapperRef) return;
 
       const tableRect = tableEl.getBoundingClientRect();
@@ -172,20 +167,13 @@ export default function createTableDnDClass(
         this._wrapperRef.classList.add("tc-dnd--show-col");
         this._wrapperRef.classList.remove("tc-dnd--show-row");
       } else {
-        this._wrapperRef.classList.remove(
-          "tc-dnd--show-row",
-          "tc-dnd--show-col",
-        );
+        this._wrapperRef.classList.remove("tc-dnd--show-row", "tc-dnd--show-col");
       }
     }
 
     // ─── Toggler pointerdown (start pending drag) ───────────────────────
 
-    private _onTogglerDown(
-      type: "row" | "col",
-      wrapper: HTMLElement,
-      e: PointerEvent,
-    ): void {
+    private _onTogglerDown(type: "row" | "col", wrapper: HTMLElement, e: PointerEvent): void {
       // Detect which row/col is currently hovered by the table plugin
       const index = this._detectHoveredIndex(type, wrapper);
       if (index < 0) return;
@@ -208,10 +196,7 @@ export default function createTableDnDClass(
 
     // ─── Detect hovered row/col index ───────────────────────────────────
 
-    private _detectHoveredIndex(
-      type: "row" | "col",
-      wrapper: HTMLElement,
-    ): number {
+    private _detectHoveredIndex(type: "row" | "col", wrapper: HTMLElement): number {
       const tableEl = wrapper.querySelector<HTMLElement>(".tc-table");
       if (!tableEl) return -1;
 
@@ -230,9 +215,7 @@ export default function createTableDnDClass(
         }
         return -1;
       } else {
-        const toolbox = wrapper.querySelector<HTMLElement>(
-          ".tc-toolbox--column",
-        );
+        const toolbox = wrapper.querySelector<HTMLElement>(".tc-toolbox--column");
         if (!toolbox) return -1;
         const toolboxRect = toolbox.getBoundingClientRect();
         const toolboxMid = toolboxRect.left + toolboxRect.width / 2;
@@ -265,8 +248,7 @@ export default function createTableDnDClass(
         d.active = true;
 
         // Close any open popover from the table plugin
-        const openPopover =
-          this._wrapperRef?.querySelector<HTMLElement>(".tc-popover--opened");
+        const openPopover = this._wrapperRef?.querySelector<HTMLElement>(".tc-popover--opened");
         openPopover?.classList.remove("tc-popover--opened");
 
         this._highlight(d.type!, d.index, true);
@@ -338,13 +320,10 @@ export default function createTableDnDClass(
     // ─── Move Row / Column ──────────────────────────────────────────────
 
     private _moveRow(from: number, to: number): void {
-      const tableEl =
-        this._wrapperRef?.querySelector<HTMLElement>(".tc-table");
+      const tableEl = this._wrapperRef?.querySelector<HTMLElement>(".tc-table");
       if (!tableEl) return;
 
-      const rows = Array.from(
-        tableEl.querySelectorAll<HTMLElement>(".tc-row"),
-      );
+      const rows = Array.from(tableEl.querySelectorAll<HTMLElement>(".tc-row"));
       if (from < 0 || from >= rows.length) return;
 
       const target = to > from ? to - 1 : to;
@@ -360,17 +339,14 @@ export default function createTableDnDClass(
     }
 
     private _moveCol(from: number, to: number): void {
-      const tableEl =
-        this._wrapperRef?.querySelector<HTMLElement>(".tc-table");
+      const tableEl = this._wrapperRef?.querySelector<HTMLElement>(".tc-table");
       if (!tableEl) return;
 
       const target = to > from ? to - 1 : to;
       if (target === from) return;
 
       tableEl.querySelectorAll<HTMLElement>(".tc-row").forEach((row) => {
-        const cells = Array.from(
-          row.querySelectorAll<HTMLElement>(".tc-cell"),
-        );
+        const cells = Array.from(row.querySelectorAll<HTMLElement>(".tc-cell"));
         if (from >= cells.length) return;
 
         const cell = cells[from];
@@ -385,11 +361,7 @@ export default function createTableDnDClass(
 
     // ─── Drop Index Calc ────────────────────────────────────────────────
 
-    private _calcDrop(
-      wrapper: HTMLElement,
-      cx: number,
-      cy: number,
-    ): number {
+    private _calcDrop(wrapper: HTMLElement, cx: number, cy: number): number {
       const tableEl = wrapper.querySelector<HTMLElement>(".tc-table");
       if (!tableEl) return this._drag.index;
 
@@ -414,13 +386,8 @@ export default function createTableDnDClass(
 
     // ─── Visual Feedback ────────────────────────────────────────────────
 
-    private _highlight(
-      type: "row" | "col",
-      idx: number,
-      on: boolean,
-    ): void {
-      const tableEl =
-        this._wrapperRef?.querySelector<HTMLElement>(".tc-table");
+    private _highlight(type: "row" | "col", idx: number, on: boolean): void {
+      const tableEl = this._wrapperRef?.querySelector<HTMLElement>(".tc-table");
       if (!tableEl) return;
 
       if (type === "row") {

package/apps/lib/components/{TextEditor.tsx → TextEditor/TextEditor.tsx}

@@ -10,10 +10,10 @@ import React, {
   useState,
 } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../utils/cn";
-import { Themes } from "../utils/types";
+import { cn } from "../../utils/cn";
+import { Themes } from "../../utils/types";
 import EditorJS, { type OutputData } from "@editorjs/editorjs";
-import { isMarkdown, parseMarkdownToBlocks } from "../utils/markdownParser";
+import { isMarkdown, parseMarkdownToBlocks } from "./markdownParser";
 
 // ─── Tool Imports ────────────────────────────────────────────────────────────
 import Header from "@editorjs/header";
@@ -34,7 +34,14 @@ import Marker from "@editorjs/marker";
 import InlineCode from "@editorjs/inline-code";
 import Underline from "@editorjs/underline";
 import TextVariantTune from "@editorjs/text-variant-tune";
+// `editorjs-undo` touches DOM globals at module-eval, so it is imported dynamically
+// (browser-only) in `onReady`; keep only the type here.
+import type Undo from "editorjs-undo";
 import ChartBlockTool from "./ChartBlockTool";
+import StrikethroughInlineTool from "./editor-tools/StrikethroughInlineTool";
+import ColorInlineTool from "./editor-tools/ColorInlineTool";
+import AlignmentTune from "./editor-tools/AlignmentTune";
+import { TextEditorToolbar } from "./TextEditorToolbar";
 
 // ─── RTL Detection ───────────────────────────────────────────────────────────
 const RTL_REGEX = /[\u0591-\u07FF\u200F\u202B\u202E\uFB1D-\uFDFD\uFE70-\uFEFC]/;
@@ -66,7 +73,10 @@ function setDirIfChanged(el: HTMLElement, dir: "rtl" | "ltr") {
   }
 }
 
-function applyDirectionToBlock(block: HTMLElement, fallbackDir: "rtl" | "ltr" = "ltr"): "rtl" | "ltr" {
+function applyDirectionToBlock(
+  block: HTMLElement,
+  fallbackDir: "rtl" | "ltr" = "ltr",
+): "rtl" | "ltr" {
   // Skip non-text blocks (delimiters, embeds, code)
   if (block.querySelector(".ce-delimiter, .cdx-embed, .embed-tool")) return fallbackDir;
 
@@ -78,9 +88,7 @@ function applyDirectionToBlock(block: HTMLElement, fallbackDir: "rtl" | "ltr" =
   if (listItems.length > 0) {
     let prevDir: "rtl" | "ltr" = fallbackDir;
     listItems.forEach((item) => {
-      const editable = item.querySelector<HTMLElement>(
-        '[contenteditable="true"]',
-      );
+      const editable = item.querySelector<HTMLElement>('[contenteditable="true"]');
       if (!editable) return;
       const text = (editable.textContent || "").trim();
       const dir = text ? getTextDirection(text) : prevDir;
@@ -93,9 +101,7 @@ function applyDirectionToBlock(block: HTMLElement, fallbackDir: "rtl" | "ltr" =
 
   // Handle regular blocks (paragraph, header, quote, warning, etc.)
   let lastDir = fallbackDir;
-  const editables = block.querySelectorAll<HTMLElement>(
-    '[contenteditable="true"]',
-  );
+  const editables = block.querySelectorAll<HTMLElement>('[contenteditable="true"]');
   editables.forEach((el) => {
     const text = (el.textContent || "").trim();
     const dir = text ? getTextDirection(text) : fallbackDir;
@@ -169,15 +175,25 @@ const getDefaultTools = (): Record<string, any> => ({
   linkTool: { class: LinkTool },
   image: { class: SimpleImage },
   raw: { class: RawTool },
-  chart: { class: ChartBlockTool as any },
+  chart: { class: ChartBlockTool },
   marker: { class: Marker, shortcut: "CMD+SHIFT+M" },
   inlineCode: { class: InlineCode, shortcut: "CMD+SHIFT+I" },
   underline: { class: Underline },
+  // Registered so their `sanitize` unions into every block's save config (strike/color
+  // markup persists) and they appear in the inline toolbar; the fixed toolbar drives them too.
+  strikethrough: { class: StrikethroughInlineTool, shortcut: "CMD+SHIFT+X" },
+  color: { class: ColorInlineTool },
   textVariant: { class: TextVariantTune },
+  // Per-block text alignment; wired into `tunes` below so every block gets it.
+  align: { class: AlignmentTune },
 });
 
 // ─── Auto-direction CSS ──────────────────────────────────────────────────────
 const AUTO_DIR_STYLES = `
+  /* Block alignment (AlignmentTune sets data-align on the block content wrapper). */
+  .torch-text-editor .cdx-align-wrap[data-align="center"] { text-align: center; }
+  .torch-text-editor .cdx-align-wrap[data-align="right"] { text-align: right; }
+  .torch-text-editor .cdx-align-wrap[data-align="left"] { text-align: left; }
   .torch-text-editor [contenteditable="true"][dir="rtl"] {
     unicode-bidi: plaintext;
   }
@@ -692,7 +708,8 @@ const textEditorStyles = cva(
     "relative w-full rounded-[6px]",
     "border-0 transition-all duration-200 ease-in-out",
     "[&_.codex-editor]:min-h-[inherit]",
-    "[&_.codex-editor__redactor]:min-h-[inherit] [&_.codex-editor__redactor]:pb-[100px]",
+    // Content padding lives on the redactor (not the container) so the toolbar stays full-bleed.
+    "[&_.codex-editor__redactor]:min-h-[inherit] [&_.codex-editor__redactor]:px-[16px] [&_.codex-editor__redactor]:pt-[12px] [&_.codex-editor__redactor]:pb-[100px]",
     "[&_.ce-paragraph]:typography-body-medium-regular",
   ],
   {
@@ -728,11 +745,13 @@ const textEditorStyles = cva(
           "[&_.ce-delimiter]:border-border-presentation-action-primary",
         ],
       },
+      // No padding on the container — the fixed toolbar must go edge-to-edge. Content
+      // padding is applied to the EditorJS redactor below instead.
       size: {
-        S: "min-h-[200px] p-2",
-        M: "min-h-[300px] p-3",
-        L: "min-h-[400px] p-4",
-        XL: "min-h-[500px] p-5",
+        S: "min-h-[200px]",
+        M: "min-h-[300px]",
+        L: "min-h-[400px]",
+        XL: "min-h-[500px]",
       },
       disabled: {
         true: "cursor-not-allowed opacity-60 pointer-events-none",
@@ -754,9 +773,7 @@ export interface TextEditorRef {
 }
 
 interface TextEditorProps
-  extends
-    Omit<HTMLAttributes<HTMLDivElement>, "onChange">,
-    VariantProps<typeof textEditorStyles> {
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange">, VariantProps<typeof textEditorStyles> {
   theme?: Themes;
   data?: OutputData;
   onChange?: (data: OutputData) => void;
@@ -767,6 +784,8 @@ interface TextEditorProps
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   tools?: Record<string, any>;
   minHeight?: number;
+  /** Show the fixed formatting toolbar (default `true`; hidden when `readOnly`/`disabled`). */
+  toolbar?: boolean;
 }
 
 // ─── Component ───────────────────────────────────────────────────────────────
@@ -786,16 +805,17 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
       autofocus = false,
       tools,
       minHeight,
+      toolbar = true,
       ...props
     },
     ref,
   ) => {
     const editorRef = useRef<EditorJS | null>(null);
+    const undoRef = useRef<Undo | null>(null);
+    const [toolbarReady, setToolbarReady] = useState(false);
     const holderRef = useRef<HTMLDivElement>(null);
     const observerRef = useRef<MutationObserver | null>(null);
-    const [holderId] = useState(
-      () => `torch-editor-${Math.random().toString(36).substring(2, 9)}`,
-    );
+    const [holderId] = useState(() => `torch-editor-${Math.random().toString(36).substring(2, 9)}`);
     const isInitializing = useRef(false);
     const pasteHandlerRef = useRef<((e: ClipboardEvent) => void) | null>(null);
     const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -839,107 +859,104 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     }, []);
 
     // ── Markdown paste handler ──
-    const setupMarkdownPaste = useCallback(
-      (holderEl: HTMLElement) => {
-        const handler = async (e: ClipboardEvent) => {
-          if (readOnlyRef.current || !editorRef.current) return;
+    const setupMarkdownPaste = useCallback((holderEl: HTMLElement) => {
+      const handler = async (e: ClipboardEvent) => {
+        if (readOnlyRef.current || !editorRef.current) return;
 
-          const plain = e.clipboardData?.getData("text/plain") || "";
+        const plain = e.clipboardData?.getData("text/plain") || "";
 
-          // Only intercept if the plain text is markdown
-          if (!isMarkdown(plain)) return;
+        // Only intercept if the plain text is markdown
+        if (!isMarkdown(plain)) return;
 
-          e.preventDefault();
-          e.stopPropagation();
+        e.preventDefault();
+        e.stopPropagation();
 
-          const parsedBlocks = parseMarkdownToBlocks(plain);
-          if (parsedBlocks.length === 0) return;
+        const parsedBlocks = parseMarkdownToBlocks(plain);
+        if (parsedBlocks.length === 0) return;
 
-          const editor = editorRef.current;
+        const editor = editorRef.current;
+
+        // Save existing content, merge new blocks at cursor, render once
+        // This avoids per-block insert which freezes the editor on large pastes
+        try {
+          const existingData = await editor.save();
+          const existingBlocks = existingData.blocks || [];
 
-          // Save existing content, merge new blocks at cursor, render once
-          // This avoids per-block insert which freezes the editor on large pastes
+          // Determine insertion point
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const blocks = (editor as any).blocks;
+          let insertIdx = existingBlocks.length;
           try {
-            const existingData = await editor.save();
-            const existingBlocks = existingData.blocks || [];
-
-            // Determine insertion point
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const blocks = (editor as any).blocks;
-            let insertIdx = existingBlocks.length;
-            try {
-              if (blocks?.getCurrentBlockIndex) {
-                insertIdx = blocks.getCurrentBlockIndex() + 1;
-              }
-            } catch {
-              // Use end of document
+            if (blocks?.getCurrentBlockIndex) {
+              insertIdx = blocks.getCurrentBlockIndex() + 1;
             }
+          } catch {
+            // Use end of document
+          }
 
-            // Convert parsed blocks to OutputData block format
-            const newBlocks = parsedBlocks.map((block) => ({
-              type: block.type,
-              data: block.data,
-            }));
-
-            // Remove empty paragraph at cursor if it's the only content there
-            const filteredExisting = [...existingBlocks];
-            if (insertIdx > 0) {
-              const cursorBlock = filteredExisting[insertIdx - 1];
-              if (
-                cursorBlock &&
-                cursorBlock.type === "paragraph" &&
-                (!cursorBlock.data.text ||
-                  cursorBlock.data.text.trim() === "" ||
-                  cursorBlock.data.text === "<br>")
-              ) {
-                filteredExisting.splice(insertIdx - 1, 1);
-                insertIdx = Math.max(0, insertIdx - 1);
-              }
+          // Convert parsed blocks to OutputData block format
+          const newBlocks = parsedBlocks.map((block) => ({
+            type: block.type,
+            data: block.data,
+          }));
+
+          // Remove empty paragraph at cursor if it's the only content there
+          const filteredExisting = [...existingBlocks];
+          if (insertIdx > 0) {
+            const cursorBlock = filteredExisting[insertIdx - 1];
+            if (
+              cursorBlock &&
+              cursorBlock.type === "paragraph" &&
+              (!cursorBlock.data.text ||
+                cursorBlock.data.text.trim() === "" ||
+                cursorBlock.data.text === "<br>")
+            ) {
+              filteredExisting.splice(insertIdx - 1, 1);
+              insertIdx = Math.max(0, insertIdx - 1);
             }
+          }
 
-            // Merge: existing blocks before cursor + new blocks + existing blocks after cursor
-            const mergedBlocks = [
-              ...filteredExisting.slice(0, insertIdx),
-              ...newBlocks,
-              ...filteredExisting.slice(insertIdx),
-            ];
-
-            // Pause MutationObserver during bulk render to prevent O(n^2) direction checks
-            observerRef.current?.disconnect();
-
-            // Single render pass — no per-block DOM thrashing
-            await editor.render({
-              time: Date.now(),
-              version: existingData.version,
-              blocks: mergedBlocks,
-            });
+          // Merge: existing blocks before cursor + new blocks + existing blocks after cursor
+          const mergedBlocks = [
+            ...filteredExisting.slice(0, insertIdx),
+            ...newBlocks,
+            ...filteredExisting.slice(insertIdx),
+          ];
+
+          // Pause MutationObserver during bulk render to prevent O(n^2) direction checks
+          observerRef.current?.disconnect();
+
+          // Single render pass — no per-block DOM thrashing
+          await editor.render({
+            time: Date.now(),
+            version: existingData.version,
+            blocks: mergedBlocks,
+          });
 
-            // Reconnect observer on the redactor element
-            if (observerRef.current) {
-              const redactor = holderEl.querySelector(".codex-editor__redactor") || holderEl;
-              observerRef.current.observe(redactor, {
-                childList: true,
-                subtree: false,
-              });
-            }
-            // Defer direction scan to next frame — let the browser paint first
-            requestAnimationFrame(() => applyAutoDirection(holderEl));
+          // Reconnect observer on the redactor element
+          if (observerRef.current) {
+            const redactor = holderEl.querySelector(".codex-editor__redactor") || holderEl;
+            observerRef.current.observe(redactor, {
+              childList: true,
+              subtree: false,
+            });
+          }
+          // Defer direction scan to next frame — let the browser paint first
+          requestAnimationFrame(() => applyAutoDirection(holderEl));
 
-            // Trigger onChange with merged data
-            if (onChangeRef.current) {
-              const savedData = await editor.save();
-              onChangeRef.current(savedData);
-            }
-          } catch {
-            // Fallback: if render approach fails, do nothing rather than freeze
+          // Trigger onChange with merged data
+          if (onChangeRef.current) {
+            const savedData = await editor.save();
+            onChangeRef.current(savedData);
           }
-        };
+        } catch {
+          // Fallback: if render approach fails, do nothing rather than freeze
+        }
+      };
 
-        holderEl.addEventListener("paste", handler as unknown as EventListener, true);
-        pasteHandlerRef.current = handler;
-      },
-      [],
-    );
+      holderEl.addEventListener("paste", handler as unknown as EventListener, true);
+      pasteHandlerRef.current = handler;
+    }, []);
 
     // ── Auto-direction: watch for DOM changes & input ──
     const inputHandlerRef = useRef<((e: Event) => void) | null>(null);
@@ -989,10 +1006,13 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
       if (isInitializing.current || editorRef.current) return;
       isInitializing.current = true;
 
+      // Only enable the `align` tune when using the default tools (a caller-supplied `tools`
+      // map may not register it).
+      const usingDefaultTools = !toolsRef.current;
       const editor = new EditorJS({
         holder: holderId,
         tools: toolsRef.current ?? getDefaultTools(),
-        tunes: ["textVariant"],
+        tunes: usingDefaultTools ? ["textVariant", "align"] : ["textVariant"],
         data: initialDataRef.current || undefined,
         readOnly: readOnlyRef.current,
         placeholder: placeholderRef.current,
@@ -1007,6 +1027,21 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
             setupMarkdownPaste(holderEl);
           }
 
+          // History (undo/redo) for the fixed toolbar + Ctrl+Z/Y. Not for readOnly.
+          // Dynamically imported because the package evaluates DOM globals at module load.
+          if (!readOnlyRef.current) {
+            import("editorjs-undo")
+              .then(({ default: UndoCls }) => {
+                if (!editorRef.current) return;
+                undoRef.current = new UndoCls({ editor: editorRef.current });
+                if (initialDataRef.current) undoRef.current.initialize(initialDataRef.current);
+              })
+              .catch(() => {
+                undoRef.current = null;
+              });
+          }
+          setToolbarReady(true);
+
           onReadyRef.current?.();
         },
         onChange: () => {
@@ -1052,13 +1087,12 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
           (window.cancelIdleCallback || clearTimeout)(idleCallbackRef.current);
         }
 
-        if (
-          editorRef.current &&
-          typeof editorRef.current.destroy === "function"
-        ) {
+        if (editorRef.current && typeof editorRef.current.destroy === "function") {
           editorRef.current.destroy();
           editorRef.current = null;
         }
+        undoRef.current = null;
+        setToolbarReady(false);
         isInitializing.current = false;
       };
     }, [initEditor]);
@@ -1109,6 +1143,15 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
           style={minHeight ? { minHeight: `${minHeight}px` } : undefined}
           {...props}
         >
+          {toolbar && !readOnly && !disabled && (
+            <TextEditorToolbar
+              editorRef={editorRef}
+              undoRef={undoRef}
+              holderRef={holderRef}
+              ready={toolbarReady}
+              theme={theme}
+            />
+          )}
           <div id={holderId} />
         </div>
       </>