@olddevs/ui 0.0.0-stage → 4.0.0

package/dist/editor/RichTextEditor.js

@@ -0,0 +1,671 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createDocument } from "@tiptap/core";
+import { closeHistory } from "@tiptap/pm/history";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { forwardRef, lazy, Suspense, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
+import { useDescribedBy, useFieldInvalid, useFieldLabelId } from "../hooks/useFieldDescription.js";
+import { useMessages } from "../i18n/useMessages.js";
+import { cn } from "../lib/cn.js";
+import { FIELD_SHELL_CLASS } from "../lib/field.js";
+import { BlockHandle } from "./ui/BlockHandle.js";
+import { expandTools } from "./features/builtins.js";
+import { createHandleMethods, notifyHandleEditor, } from "./core/handle.js";
+import { EditorToolbar, ToolbarSkeleton } from "./ui/EditorToolbar.js";
+import { searchState } from "./features/search/searchPlugin.js";
+import { isDocumentEmpty } from "./core/emptiness.js";
+import { FieldNoticeView, StatusLine } from "./ui/FieldStatus.js";
+import { FLOATING_TOOLBAR_KEY, FloatingToolbar } from "./ui/FloatingToolbar.js";
+import { createEditorExtensions } from "./core/extensions.js";
+import { customToolsError, FALLBACK_EXTENSIONS } from "./core/customToolEngine.js";
+import { startLoad } from "./core/toolLoader.js";
+import { skeletonHtml } from "./core/skeleton.js";
+import { Button } from "../components/actions/Button.js";
+import { devError } from "../lib/dev-warn.js";
+import { describeImageNotice } from "./features/image/imageNotice.js";
+import { insertItemsFor } from "./core/insertItems.js";
+import { isImageSelection } from "./features/image/image.js";
+import { ImagePopover } from "./features/image/ImagePopover.js";
+import { ImageToolbar } from "./features/image/ImageToolbar.js";
+import { textCardsOf, triggersOf } from "./core/toolDescriptor.js";
+import { SelectionPopover } from "./ui/ToolButtonView.js";
+import { tableChunk } from "./features/table/tableTool.js";
+import { replaceWithMarkdown } from "./core/markdown.js";
+import { documentFromJSON, documentToJSON, replaceWithJSON, } from "./core/jsonDocument.js";
+import { markdownOf } from "./core/atomText.js";
+import { countCharacters, EXTERNAL_CHANGE } from "./core/maxLength.js";
+import { proseClass } from "./styles/prose.js";
+import { SELECTION_BUBBLE_KEY, SelectionBubble } from "./ui/SelectionBubble.js";
+import { useSlashMenu } from "./ui/SlashMenu.js";
+import { useTriggerMenu } from "./ui/TriggerMenu.js";
+import { FIELD_MIN_HEIGHT, FieldResizer } from "./ui/FieldResizer.js";
+import { formatSourceHtml } from "./core/sourceFormat.js";
+import { surfaceAttributes } from "./styles/surface.js";
+import { EDITOR_PAPER_TOKENS_CLASS, EDITOR_TOKENS_CLASS } from "./styles/tokens.js";
+import { useChangeThrottle } from "./hooks/useChangeThrottle.js";
+import { useCoarsePointer } from "./hooks/useCoarsePointer.js";
+import { useFieldsetDisabled } from "./hooks/useFieldsetDisabled.js";
+const CustomColorPopover = lazy(() => import("./features/color/CustomColorPopover.js").then((module) => ({
+    default: module.CustomColorPopover,
+})));
+const TextCard = lazy(() => import("./ui/TextCard.js").then((module) => ({ default: module.TextCard })));
+const SearchPanel = lazy(() => import("./features/search/SearchPanel.js").then((module) => ({ default: module.SearchPanel })));
+const SEARCH_PANEL_PLACE_CLASS = "absolute top-full right-2 left-2 z-[2] mt-2 sm:left-auto sm:w-80";
+const SEARCH_PANEL_CORNER_CLASS = "absolute top-2 right-2 left-2 sm:left-auto sm:w-80";
+const subscribeNever = () => () => { };
+const isBrowser = () => true;
+const isServer = () => false;
+const cssLength = (value) => (typeof value === "number" ? `${value}px` : value);
+function serialize(editor) {
+    return isDocumentEmpty(editor.state.doc) ? "" : editor.getHTML();
+}
+const PLACEHOLDER_CLASS = "[&_p.is-editor-empty:first-child]:before:pointer-events-none " +
+    "[&_p.is-editor-empty:first-child]:before:float-left " +
+    "[&_p.is-editor-empty:first-child]:before:h-0 " +
+    "[&_p.is-editor-empty:first-child]:before:text-(--rte-muted-foreground) " +
+    "[&_p.is-editor-empty:first-child]:before:content-[attr(data-placeholder)]";
+const IMAGE_EDITING_CLASS = "[&_figure.ProseMirror-selectednode_img]:outline-2 " +
+    "[&_figure.ProseMirror-selectednode_img]:outline-offset-2 " +
+    "[&_figure.ProseMirror-selectednode_img]:outline-(--rte-primary) " +
+    "[&[contenteditable=true]_figure.ProseMirror-selectednode_.rte-resize-handle]:block " +
+    "[&_figcaption.rte-caption-empty]:before:pointer-events-none " +
+    "[&_figcaption.rte-caption-empty]:before:float-left " +
+    "[&_figcaption.rte-caption-empty]:before:h-0 " +
+    "[&_figcaption.rte-caption-empty]:before:w-full " +
+    "[&_figcaption.rte-caption-empty]:before:text-(--rte-muted-foreground) " +
+    "[&_figcaption.rte-caption-empty]:before:content-[attr(data-placeholder)] " +
+    "[&[contenteditable=false]_figcaption.rte-caption-empty]:hidden";
+const SEARCH_HIGHLIGHT_CLASS = "[&_.rte-search-match]:rounded-[2px] " +
+    "[&_.rte-search-match]:bg-[color-mix(in_srgb,var(--warning)_30%,transparent)] " +
+    "[&_.rte-search-current]:bg-[color-mix(in_srgb,var(--warning)_60%,transparent)] " +
+    "[&_.rte-search-current]:shadow-[0_0_0_1px_var(--warning)]";
+const TOOLBAR_SHELL_CLASS = "bg-bg-2 border-line-soft rounded-t-control sticky top-[var(--topbar-h,0px)] z-[1] " +
+    "-mx-3 border-b px-1.5 py-1";
+const SOURCE_BOX_CLASS = "col-start-1 row-start-1 w-full rounded-(--rte-radius) border px-3 py-2 " +
+    "font-mono text-[13px] leading-5 break-words whitespace-pre-wrap";
+const SOURCE_FIELD_CLASS = "border-(--rte-source-border) bg-(--rte-source-background) text-(--rte-source-foreground) " +
+    "caret-(--rte-source-foreground) " +
+    "selection:bg-(--rte-source-selection) selection:text-(--rte-source-foreground) " +
+    "resize-y outline-none disabled:cursor-not-allowed";
+export const RichTextEditor = forwardRef(function RichTextEditor({ value, defaultValue, onChange, onReady, onFocus, onBlur, changeDelay = 300, name, id, placeholder, maxLength, readOnly = false, disabled: disabledProp = false, required = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, toolbar = "fixed", selectionMenu = true, preset = "full", tools, onUploadImage, status, surface = "theme", maxHeight, resizable = false, className, }, ref) {
+    const messages = useMessages();
+    const [enabledTools] = useState(() => expandTools(preset, tools));
+    const loaders = enabledTools.descriptors.flatMap((descriptor) => descriptor.load ?? []);
+    const loads = loaders.map((loader) => typeof window === "undefined" ? {} : startLoad(loader));
+    const loading = loads.some((load) => !load.done && !load.failed);
+    const ready = loads.every((load) => load.done);
+    const [, setLoadRound] = useState(0);
+    useEffect(() => {
+        if (!loading)
+            return;
+        let live = true;
+        void Promise.all(loads.map((load) => load.promise)).then(() => live && setLoadRound((round) => round + 1));
+        return () => void (live = false);
+    }, [loading]);
+    const retryLoads = () => {
+        for (const loader of loaders)
+            startLoad(loader, true);
+        setLoadRound((round) => round + 1);
+    };
+    const editorRef = useRef(null);
+    const rootRef = useRef(null);
+    const inDisabledFieldset = useFieldsetDisabled(rootRef);
+    const disabled = disabledProp || inDisabledFieldset;
+    const hiddenRef = useRef(null);
+    const proxyRef = useRef(null);
+    const initialDocument = value === undefined && typeof defaultValue === "object" ? defaultValue : undefined;
+    const initialDocumentRef = useRef(initialDocument);
+    initialDocumentRef.current = initialDocument;
+    const initial = value ?? (typeof defaultValue === "string" ? defaultValue : "");
+    const knownRef = useRef(initial);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const onReadyRef = useRef(onReady);
+    onReadyRef.current = onReady;
+    const onFocusRef = useRef(onFocus);
+    onFocusRef.current = onFocus;
+    const onBlurRef = useRef(onBlur);
+    onBlurRef.current = onBlur;
+    const limitRef = useRef(maxLength);
+    limitRef.current = maxLength;
+    const placeholderText = placeholder ?? messages.editor.placeholder;
+    const placeholderRef = useRef(placeholderText);
+    placeholderRef.current = placeholderText;
+    const taskCheckboxRef = useRef(messages.editor.taskCheckbox);
+    taskCheckboxRef.current = messages.editor.taskCheckbox;
+    const uploadRef = useRef(onUploadImage);
+    uploadRef.current = onUploadImage;
+    const imageMessagesRef = useRef(messages.editor);
+    imageMessagesRef.current = messages.editor;
+    const [count, setCount] = useState(0);
+    const [toolPopover, setToolPopover] = useState(null);
+    const [customColor, setCustomColor] = useState(null);
+    const openCustomColor = (kind) => setCustomColor({ kind, open: true });
+    const [imageOpen, setImageOpen] = useState(false);
+    const TableInsertDialog = tableChunk()?.TableInsertDialog;
+    const [tableDialogOpen, setTableDialogOpen] = useState(false);
+    const [notice, setNotice] = useState(null);
+    const [source, setSource] = useState(null);
+    const sourceOpen = source !== null;
+    const [searchPanel, setSearchPanel] = useState(null);
+    const sourceFieldRef = useRef(null);
+    const sourceTextRef = useRef(null);
+    const sourceBaseRef = useRef("");
+    const switchFocusRef = useRef(null);
+    const focusToolbarRef = useRef(() => false);
+    const openBlockMenuRef = useRef(() => false);
+    const textCardRef = useRef(null);
+    const recount = (current) => {
+        if (limitRef.current !== undefined)
+            setCount(countCharacters(current.state.doc));
+    };
+    const emit = (html) => {
+        knownRef.current = html;
+        if (hiddenRef.current)
+            hiddenRef.current.value = html;
+        onChangeRef.current?.(html);
+    };
+    const validatableRef = useRef(false);
+    const requiredMessageRef = useRef(messages.editor.required);
+    requiredMessageRef.current = messages.editor.required;
+    const fieldEmpty = (current) => {
+        const text = sourceTextRef.current;
+        return text !== null && text !== sourceBaseRef.current
+            ? isDocumentEmpty(createDocument(text, current.schema))
+            : isDocumentEmpty(current.state.doc);
+    };
+    const syncValidity = (current) => {
+        proxyRef.current?.setCustomValidity(validatableRef.current && fieldEmpty(current) ? requiredMessageRef.current : "");
+    };
+    const throttle = useChangeThrottle(() => {
+        const current = editorRef.current;
+        if (current && !current.isDestroyed)
+            emit(serialize(current));
+    }, changeDelay);
+    const applySource = () => {
+        const current = editorRef.current;
+        const text = sourceTextRef.current;
+        if (!current || current.isDestroyed || text === null || text === sourceBaseRef.current) {
+            return;
+        }
+        sourceBaseRef.current = text;
+        const next = createDocument(text, current.schema);
+        if (next.eq(current.state.doc))
+            return;
+        current
+            .chain()
+            .setMeta(EXTERNAL_CHANGE, true)
+            .command(({ tr }) => {
+            closeHistory(tr);
+            return true;
+        })
+            .setContent(next, { emitUpdate: false })
+            .run();
+        current.view.dispatch(closeHistory(current.state.tr));
+        throttle.cancel();
+        recount(current);
+        syncValidity(current);
+        emit(serialize(current));
+    };
+    const applySourceRef = useRef(applySource);
+    applySourceRef.current = applySource;
+    useEffect(() => () => applySourceRef.current(), []);
+    const writeSource = (current) => {
+        const text = formatSourceHtml(serialize(current));
+        sourceTextRef.current = text;
+        sourceBaseRef.current = text;
+        return text;
+    };
+    const rewriteSource = (current) => {
+        if (sourceTextRef.current === null)
+            return;
+        const text = writeSource(current);
+        setSource((previous) => previous && { ...previous, text });
+    };
+    const openSource = () => {
+        const current = editorRef.current;
+        if (!current)
+            return;
+        if (searchPanel)
+            closeSearch(false);
+        const text = writeSource(current);
+        switchFocusRef.current = "source";
+        setSource({ text, minHeight: current.view.dom.getBoundingClientRect().height });
+    };
+    const closeSource = (focusDocument) => {
+        applySource();
+        sourceTextRef.current = null;
+        switchFocusRef.current = focusDocument ? "document" : null;
+        setSource(null);
+    };
+    const focusField = () => {
+        if (sourceTextRef.current !== null)
+            sourceFieldRef.current?.focus();
+        else
+            editorRef.current?.commands.focus();
+    };
+    const focusFieldRef = useRef(focusField);
+    focusFieldRef.current = focusField;
+    const openSearch = (replace) => {
+        const current = editorRef.current;
+        if (!current || !enabledTools.has("search") || sourceTextRef.current !== null)
+            return false;
+        const { $from, $to, empty } = current.state.selection;
+        const query = !empty && $from.sameParent($to) ? current.state.doc.textBetween($from.pos, $to.pos) : "";
+        setSearchPanel((previous) => ({ token: (previous?.token ?? 0) + 1, replace, query }));
+        return true;
+    };
+    const openSearchRef = useRef(openSearch);
+    openSearchRef.current = openSearch;
+    const closeSearch = (focusDocument) => {
+        const current = editorRef.current;
+        if (current && !current.isDestroyed) {
+            const state = searchState(current.state);
+            const match = state?.matches[state.current];
+            const chain = current.chain();
+            if (focusDocument)
+                chain.focus();
+            if (focusDocument && match)
+                chain.setTextSelection({ from: match.from, to: match.to });
+            chain.clearSearch().run();
+        }
+        setSearchPanel(null);
+    };
+    const insertItems = useMemo(() => insertItemsFor(enabledTools), [enabledTools]);
+    const textCardEntries = useMemo(() => textCardsOf(enabledTools), [enabledTools]);
+    const slash = useSlashMenu(insertItems, editorRef);
+    const slashBridge = slash.bridge;
+    const triggerRecords = useMemo(() => triggersOf(enabledTools), [enabledTools]);
+    const triggerMenu = useTriggerMenu(triggerRecords, editorRef);
+    const triggerBindings = triggerMenu.bindings;
+    const extensions = useMemo(() => ready &&
+        createEditorExtensions({
+            tools: enabledTools,
+            placeholder: () => placeholderRef.current,
+            limit: () => limitRef.current,
+            taskCheckbox: (text) => taskCheckboxRef.current({ text }),
+            slash: slashBridge,
+            triggers: triggerBindings,
+            openPopover: (request) => setToolPopover({ request, open: true }),
+            focusToolbar: () => focusToolbarRef.current(),
+            openBlockMenu: () => openBlockMenuRef.current(),
+            onNotice: setNotice,
+            openSearch: (replace) => openSearchRef.current(replace),
+            image: {
+                onOpenEditor: () => requestAnimationFrame(() => setImageOpen(true)),
+                captionPlaceholder: () => imageMessagesRef.current.imageCaption,
+                uploadingLabel: (name) => imageMessagesRef.current.imageUploading({ name }),
+                upload: () => uploadRef.current,
+                describeNotice: (event) => describeImageNotice(event, imageMessagesRef.current),
+            },
+        }), [enabledTools, slashBridge, triggerBindings, ready]);
+    const toolsError = useMemo(() => extensions && customToolsError(enabledTools, extensions), [enabledTools, extensions]);
+    useEffect(() => {
+        if (toolsError)
+            devError(`RichTextEditor: ${toolsError.message}`, toolsError.cause);
+    }, [toolsError]);
+    const fieldLabelId = useFieldLabelId();
+    useEffect(() => {
+        const label = fieldLabelId
+            ? rootRef.current?.ownerDocument.getElementById(fieldLabelId)
+            : null;
+        if (!(label instanceof HTMLLabelElement) || label.control)
+            return;
+        const focus = () => focusFieldRef.current();
+        label.addEventListener("click", focus);
+        return () => label.removeEventListener("click", focus);
+    }, [fieldLabelId]);
+    const counterId = useId();
+    const counter = maxLength !== undefined && count >= maxLength * 0.8
+        ? count > maxLength
+            ? messages.editor.overLimit({ count: count - maxLength })
+            : messages.editor.remaining({ count: maxLength - count })
+        : null;
+    const describedBy = useDescribedBy([ariaDescribedBy, counter != null ? counterId : undefined].filter(Boolean).join(" ") ||
+        undefined);
+    const fieldInvalid = useFieldInvalid();
+    const invalid = ariaInvalid ?? fieldInvalid;
+    const labelledBy = ariaLabelledBy ?? (ariaLabel ? undefined : fieldLabelId);
+    const editable = !readOnly && !disabled;
+    const coarsePointer = useCoarsePointer();
+    const toolbarMode = (toolbar === "floating" || toolbar === "bubble") && coarsePointer ? "fixed" : toolbar;
+    const bubbleShown = toolbarMode === "bubble" || (toolbar === "fixed" && selectionMenu && !coarsePointer);
+    const sourceAvailable = enabledTools.has("source") && toolbarMode === "fixed" && !readOnly;
+    const scrolls = maxHeight != null || resizable;
+    const [scrollArea, setScrollArea] = useState(null);
+    const scrollTarget = scrolls ? (scrollArea ?? undefined) : undefined;
+    const areaLength = maxHeight == null ? undefined : cssLength(maxHeight);
+    const [areaHeight, setAreaHeight] = useState(null);
+    const areaStyle = !scrolls
+        ? undefined
+        : resizable
+            ? {
+                height: areaHeight != null ? `${areaHeight}px` : areaLength,
+                minHeight: FIELD_MIN_HEIGHT,
+            }
+            : { maxHeight: areaLength };
+    focusToolbarRef.current = () => {
+        const current = editorRef.current;
+        const root = rootRef.current;
+        if (!current || !root)
+            return false;
+        if (textCardRef.current?.focus())
+            return true;
+        if (readOnly)
+            return false;
+        if (sourceTextRef.current !== null) {
+            const action = root
+                .querySelector('[role="toolbar"]')
+                ?.querySelector('button:not([disabled]):not([aria-disabled="true"])');
+            if (!action)
+                return false;
+            action.focus();
+            return true;
+        }
+        if (isImageSelection(current.state.selection)) {
+            const action = root.querySelector('[data-image-toolbar] [role="toolbar"] button:not([disabled])');
+            if (action) {
+                action.focus();
+                return true;
+            }
+        }
+        if (toolbarMode === "floating" || toolbarMode === "bubble") {
+            if (current.state.selection.empty)
+                return false;
+            const key = toolbarMode === "floating" ? FLOATING_TOOLBAR_KEY : SELECTION_BUBBLE_KEY;
+            current.view.dispatch(current.state.tr.setMeta(key, "show"));
+            current.view.dispatch(current.state.tr.setMeta(key, "updatePosition"));
+        }
+        const action = root
+            .querySelector('[role="toolbar"]')
+            ?.querySelector("button:not([disabled])");
+        if (!action)
+            return false;
+        action.focus();
+        return true;
+    };
+    const validatable = required && editable;
+    validatableRef.current = validatable;
+    const requiredMessage = messages.editor.required;
+    const slashAttributes = slash.attributes;
+    const triggerAttributes = triggerMenu.attributes;
+    const documentClass = cn(proseClass(surface), PLACEHOLDER_CLASS, IMAGE_EDITING_CLASS, SEARCH_HIGHLIGHT_CLASS, surface === "paper" ? "my-3 min-h-24 outline-none" : "min-h-24 py-2.5 outline-none", !readOnly && (surface === "paper" ? "pl-10" : "pl-6"));
+    const editorProps = useMemo(() => {
+        const attributes = {
+            role: "textbox",
+            "aria-multiline": "true",
+            "aria-placeholder": placeholderText,
+            "data-disable-focus-ring": "true",
+            class: documentClass,
+            ...surfaceAttributes(surface),
+        };
+        if (id)
+            attributes.id = id;
+        if (labelledBy)
+            attributes["aria-labelledby"] = labelledBy;
+        else
+            attributes["aria-label"] = ariaLabel ?? messages.editor.label;
+        if (describedBy)
+            attributes["aria-describedby"] = describedBy;
+        if (invalid)
+            attributes["aria-invalid"] = "true";
+        if (required)
+            attributes["aria-required"] = "true";
+        if (readOnly)
+            attributes["aria-readonly"] = "true";
+        if (disabled)
+            attributes["aria-disabled"] = "true";
+        if (editable)
+            Object.assign(attributes, slashAttributes, triggerAttributes);
+        return { attributes };
+    }, [
+        editable,
+        slashAttributes,
+        triggerAttributes,
+        id,
+        labelledBy,
+        ariaLabel,
+        messages.editor.label,
+        describedBy,
+        invalid,
+        required,
+        readOnly,
+        disabled,
+        placeholderText,
+        surface,
+        documentClass,
+    ]);
+    const engineSet = extensions && !toolsError ? extensions : FALLBACK_EXTENSIONS;
+    const engineRef = useRef(null);
+    useEffect(() => {
+        if (engineRef.current?.options.extensions !== engineSet)
+            engineRef.current?.destroy();
+    }, [engineSet]);
+    const engine = useEditor({
+        immediatelyRender: false,
+        extensions: engineSet,
+        content: engineSet === extensions ? initial : "",
+        editable,
+        editorProps,
+        onUpdate: ({ editor: updated }) => {
+            setNotice((current) => (current?.tone === "error" ? null : current));
+            recount(updated);
+            syncValidity(updated);
+            throttle.schedule();
+        },
+        onBlur: () => throttle.flush(),
+    });
+    engineRef.current = engine;
+    const loadFailed = !!engine && !loading && !ready;
+    const editor = engine?.options.extensions === extensions ? engine : null;
+    editorRef.current = editor;
+    const mounted = useSyncExternalStore(subscribeNever, isBrowser, isServer);
+    const settledLoads = loads.filter((load) => load.done).length;
+    const skeleton = useMemo(() => mounted && !editor
+        ? skeletonHtml(initial, enabledTools, loaders.filter((_, index) => !loads[index]?.done))
+        : "", [mounted, !editor, initial, enabledTools, settledLoads]);
+    useLayoutEffect(() => {
+        const envelope = initialDocumentRef.current;
+        if (!editor || !envelope)
+            return;
+        const next = documentFromJSON(editor, envelope);
+        if (!next) {
+            devError("RichTextEditor: defaultValue is not a rich text document; it is ignored");
+            return;
+        }
+        editor
+            .chain()
+            .setMeta(EXTERNAL_CHANGE, true)
+            .setMeta("addToHistory", false)
+            .setContent(next, { emitUpdate: false })
+            .run();
+        knownRef.current = serialize(editor);
+    }, [editor]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        if (hiddenRef.current)
+            hiddenRef.current.value = serialize(editor);
+        if (maxLength !== undefined)
+            setCount(countCharacters(editor.state.doc));
+    }, [editor, maxLength]);
+    useEffect(() => {
+        if (editor)
+            syncValidity(editor);
+    }, [editor, validatable, requiredMessage]);
+    useEffect(() => {
+        if (editor && !editor.isDestroyed)
+            editor.view.dispatch(editor.state.tr);
+    }, [editor, placeholderText]);
+    useEffect(() => {
+        if (!editor || value === undefined || value === knownRef.current)
+            return;
+        throttle.cancel();
+        knownRef.current = value;
+        editor.chain().setMeta(EXTERNAL_CHANGE, true).setContent(value, { emitUpdate: false }).run();
+        recount(editor);
+        syncValidity(editor);
+        if (hiddenRef.current)
+            hiddenRef.current.value = serialize(editor);
+        rewriteSource(editor);
+    }, [editor, value, throttle]);
+    useEffect(() => {
+        if (editor && editor.isEditable !== editable)
+            editor.setEditable(editable, false);
+    }, [editor, editable]);
+    useEffect(() => {
+        if (!sourceAvailable && sourceTextRef.current !== null)
+            closeSource(false);
+    }, [sourceAvailable]);
+    useEffect(() => {
+        const target = switchFocusRef.current;
+        switchFocusRef.current = null;
+        if (target === "source") {
+            const field = sourceFieldRef.current;
+            field?.focus();
+            field?.setSelectionRange(0, 0);
+        }
+        else if (target === "document") {
+            editorRef.current?.commands.focus("end");
+        }
+    }, [sourceOpen]);
+    useEffect(() => {
+        const form = rootRef.current?.closest("form");
+        if (!form)
+            return;
+        const flush = () => {
+            applySourceRef.current();
+            throttle.flush();
+        };
+        const fill = (event) => {
+            flush();
+            if (name != null && hiddenRef.current && !hiddenRef.current.disabled) {
+                event.formData.set(name, hiddenRef.current.value);
+            }
+        };
+        form.addEventListener("submit", flush, { capture: true });
+        form.addEventListener("formdata", fill);
+        return () => {
+            form.removeEventListener("submit", flush, { capture: true });
+            form.removeEventListener("formdata", fill);
+        };
+    }, [throttle, name]);
+    useImperativeHandle(ref, () => ({
+        editor,
+        ...createHandleMethods({
+            editor,
+            editable,
+            known: () => knownRef.current,
+            initialDocument: () => initialDocumentRef.current,
+            tables: enabledTools.has("table"),
+            sourceOpen: () => sourceTextRef.current !== null,
+            sourceField: () => sourceFieldRef.current,
+            applySource: () => applySourceRef.current(),
+            rewriteSource,
+            fieldEmpty,
+        }),
+        getHTML: () => {
+            applySourceRef.current();
+            return editor ? serialize(editor) : knownRef.current;
+        },
+        getMarkdown: () => {
+            applySourceRef.current();
+            return editor && !isDocumentEmpty(editor.state.doc) ? markdownOf(editor) : "";
+        },
+        setMarkdown: (markdown) => {
+            if (!editor)
+                return;
+            replaceWithMarkdown(editor, markdown);
+            throttle.cancel();
+            recount(editor);
+            emit(serialize(editor));
+            rewriteSource(editor);
+        },
+        getJSON: () => {
+            if (!editor)
+                return null;
+            applySourceRef.current();
+            return documentToJSON(editor);
+        },
+        setJSON: (document) => {
+            if (!editor || !replaceWithJSON(editor, document))
+                return false;
+            throttle.cancel();
+            recount(editor);
+            emit(serialize(editor));
+            rewriteSource(editor);
+            return true;
+        },
+        openSearch: (options) => void openSearchRef.current(options?.replace ?? false),
+        clear: () => {
+            if (!editor)
+                return;
+            throttle.cancel();
+            editor.chain().setMeta(EXTERNAL_CHANGE, true).clearContent(false).run();
+            recount(editor);
+            syncValidity(editor);
+            emit("");
+            rewriteSource(editor);
+        },
+    }), [editor, editable, throttle]);
+    useEffect(() => notifyHandleEditor(ref), [ref, editor]);
+    const readySentRef = useRef(false);
+    useEffect(() => {
+        if (!editor || readySentRef.current)
+            return;
+        readySentRef.current = true;
+        onReadyRef.current?.();
+    }, [editor]);
+    const fieldFocusedRef = useRef(false);
+    const leaveTimerRef = useRef(undefined);
+    useEffect(() => () => clearTimeout(leaveTimerRef.current), []);
+    const searchPanelElement = (className) => editor &&
+        searchPanel && (_jsx(Suspense, { fallback: null, children: _jsx(SearchPanel, { editor: editor, focus: searchPanel, onClose: () => closeSearch(true), className: className }) }));
+    return (_jsxs("div", { ref: rootRef, className: cn("relative", className), onFocus: () => {
+            clearTimeout(leaveTimerRef.current);
+            if (fieldFocusedRef.current)
+                return;
+            fieldFocusedRef.current = true;
+            onFocusRef.current?.();
+        }, onBlur: (event) => {
+            const next = event.relatedTarget;
+            if (next instanceof Node && event.currentTarget.contains(next))
+                return;
+            clearTimeout(leaveTimerRef.current);
+            leaveTimerRef.current = setTimeout(() => {
+                if (!fieldFocusedRef.current)
+                    return;
+                fieldFocusedRef.current = false;
+                throttle.flush();
+                onBlurRef.current?.();
+            }, 0);
+        }, children: [_jsxs("div", { "data-disabled": disabled || undefined, className: cn(FIELD_SHELL_CLASS, "has-[[contenteditable][aria-invalid=true]]:border-danger-strong", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"), children: [editor && toolbarMode === "fixed" && !readOnly && (_jsxs("div", { className: TOOLBAR_SHELL_CLASS, children: [_jsx(EditorToolbar, { editor: editor, tools: enabledTools, disabled: disabled, onInsertTable: () => setTableDialogOpen(true), shortcutsReference: true, search: enabledTools.has("search")
+                                    ? {
+                                        open: searchPanel !== null,
+                                        onToggle: () => (searchPanel ? closeSearch(true) : openSearch(false)),
+                                    }
+                                    : undefined, source: sourceAvailable
+                                    ? {
+                                        active: sourceOpen,
+                                        onToggle: () => (sourceOpen ? closeSource(true) : openSource()),
+                                    }
+                                    : undefined }), searchPanelElement(SEARCH_PANEL_PLACE_CLASS)] })), editor && !(toolbarMode === "fixed" && !readOnly) && searchPanel && (_jsx("div", { className: "sticky top-[var(--topbar-h,0px)] z-[2] h-0", children: searchPanelElement(SEARCH_PANEL_CORNER_CLASS) })), !editor && toolbarMode === "fixed" && !readOnly && (_jsx("div", { className: TOOLBAR_SHELL_CLASS, children: _jsx(ToolbarSkeleton, { tools: enabledTools, source: sourceAvailable, search: enabledTools.has("search"), shortcutsReference: true }) })), _jsxs("div", { ref: scrolls ? setScrollArea : undefined, className: cn(scrolls && "relative -mx-3 overflow-y-auto px-3"), style: areaStyle, children: [_jsx(EditorContent, { editor: editor, hidden: sourceOpen }), !editor && (_jsx("div", { ...surfaceAttributes(surface), className: documentClass, dangerouslySetInnerHTML: { __html: skeleton } })), source && (_jsxs("div", { ...surfaceAttributes(surface), className: cn("grid", surface === "paper" ? EDITOR_PAPER_TOKENS_CLASS : EDITOR_TOKENS_CLASS, surface === "paper" ? "my-3" : "py-2.5"), style: { minHeight: source.minHeight }, children: [_jsx("textarea", { ref: sourceFieldRef, value: source.text, "aria-label": messages.editor.sourceField, "aria-describedby": describedBy, "aria-invalid": invalid || undefined, "aria-required": required || undefined, spellCheck: false, autoCapitalize: "off", autoCorrect: "off", autoComplete: "off", dir: "ltr", disabled: disabled, "data-disable-focus-ring": "true", onChange: (event) => {
+                                            const text = event.target.value;
+                                            sourceTextRef.current = text;
+                                            setSource((previous) => previous && { ...previous, text });
+                                            if (editor)
+                                                syncValidity(editor);
+                                        }, onBlur: applySource, onKeyDown: (event) => {
+                                            if (event.key === "F10" &&
+                                                event.altKey &&
+                                                !event.ctrlKey &&
+                                                !event.metaKey &&
+                                                !event.shiftKey &&
+                                                focusToolbarRef.current()) {
+                                                event.preventDefault();
+                                            }
+                                        }, className: cn(SOURCE_BOX_CLASS, SOURCE_FIELD_CLASS) }), _jsx("div", { "aria-hidden": true, className: cn(SOURCE_BOX_CLASS, "invisible border-transparent"), children: source.text + "\n" })] })), editor && !readOnly && !sourceOpen && (_jsx(BlockHandle, { editor: editor, tools: enabledTools, openRef: openBlockMenuRef }))] }), editor && !sourceOpen && slash.element, editor && !sourceOpen && triggerMenu.element, editor && bubbleShown && !readOnly && !sourceOpen && (_jsx(SelectionBubble, { editor: editor, tools: enabledTools, disabled: disabled, onCustomColor: openCustomColor, keyboardTarget: toolbarMode === "bubble", scrollTarget: scrollTarget })), editor && toolbarMode === "floating" && !readOnly && (_jsx(FloatingToolbar, { editor: editor, tools: enabledTools, disabled: disabled, onInsertTable: () => setTableDialogOpen(true), scrollTarget: scrollTarget })), editor && TableInsertDialog && enabledTools.has("table") && !readOnly && (_jsx(TableInsertDialog, { editor: editor, open: tableDialogOpen, onClose: () => setTableDialogOpen(false) })), editor && toolPopover && (_jsx(SelectionPopover, { editor: editor, request: toolPopover.request, open: toolPopover.open, onOpenChange: (open) => setToolPopover((prev) => prev && { ...prev, open }) })), editor && textCardEntries.length > 0 && (_jsx(Suspense, { fallback: null, children: _jsx(TextCard, { editor: editor, entries: textCardEntries, enabled: !disabled && !sourceOpen, readOnly: readOnly, rootRef: rootRef, controlRef: textCardRef }) })), editor && customColor && (_jsx(Suspense, { fallback: null, children: _jsx(CustomColorPopover, { editor: editor, kind: customColor.kind, open: customColor.open, onOpenChange: (open) => setCustomColor((prev) => prev && { ...prev, open }) }) })), editor && enabledTools.has("image") && !readOnly && !sourceOpen && (_jsx(ImageToolbar, { editor: editor, disabled: disabled, onEdit: () => setImageOpen(true), scrollTarget: scrollTarget })), editor && enabledTools.has("image") && (_jsx(ImagePopover, { editor: editor, open: imageOpen, onOpenChange: setImageOpen, canUpload: onUploadImage != null })), resizable && (_jsx(FieldResizer, { area: scrollArea, height: areaHeight, onHeight: setAreaHeight, disabled: disabled })), _jsx(FieldNoticeView, { notice: toolsError || loadFailed
+                            ? { tone: "error", text: messages.editor.toolsFailed }
+                            : notice, action: loadFailed && (_jsx(Button, { size: "sm", variant: "outline", onClick: retryLoads, children: messages.editor.retry })) }), _jsx(StatusLine, { status: status, counter: counter, counterId: counterId })] }), validatable && (_jsx("input", { ref: proxyRef, type: "text", tabIndex: -1, "aria-hidden": "true", autoComplete: "off", className: "pointer-events-none absolute right-0 bottom-0 left-0 h-px opacity-0", onInvalid: focusField, onFocus: focusField })), name != null && (_jsx("input", { ref: hiddenRef, type: "hidden", name: name, defaultValue: initial, disabled: disabled }))] }));
+});
+//# sourceMappingURL=RichTextEditor.js.map