@cosmicdrift/kumiko-renderer 0.393.0 → 0.395.0

package/dist/web/app/tiptap-editor.js

@@ -1,120 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @runtime client
-//
-// tiptap-backed implementation behind RichContentEditor's lazy() boundary —
-// never import this file directly, tiptap must only load when a "rich"
-// collection is actually rendered. StarterKit covers bold/italic/lists/
-// headings, and its bundled Link extension autolinks on type/paste — no
-// link button, so no URL-prompt UI to build or test.
-import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import { Bold as BoldIcon, Heading1, Heading2, Italic as ItalicIcon, List, ListOrdered, } from "lucide-react";
-import { useEffect } from "react";
-import { TextareaContentEditor, usePrimitives, useTranslation, VariableChips, } from "../../index.js";
-import { cn } from "../lib/cn.js";
-function Toolbar({ actions, disabled, }) {
-    const { Button } = usePrimitives();
-    return (_jsx("div", { className: "flex flex-wrap gap-1 border-b border-input p-1", children: actions.map((action) => (_jsx(Button, { type: "button", variant: action.isActive ? "primary" : "secondary", size: "icon", disabled: disabled, onClick: action.onClick, ariaLabel: action.label, children: _jsx(action.icon, { size: 16 }) }, action.label))) }));
-}
-export default function TiptapEditor({ id, value, onChange, variables, readOnly, }) {
-    const t = useTranslation();
-    // ponytail: rich = StarterKit's schema (bold/italic/lists/headings/links).
-    // Anything the schema doesn't model — <table>, <div>/<span>, style attrs,
-    // <img>, classes — is dropped on first parse (setContent below, and the
-    // initial `content: value` here). Upgrade if that ceiling is hit: add the
-    // matching tiptap extensions, or a raw-HTML mode for markup StarterKit
-    // can't represent.
-    const editor = useEditor({
-        extensions: [StarterKit],
-        content: value,
-        editable: !readOnly,
-        // Suspense (RichContentEditor's lazy boundary) speculatively mounts
-        // this component before committing it; immediate render would create
-        // an editor instance during that throwaway pass.
-        immediatelyRender: false,
-        // Caller-supplied id — the Field wrapping the editor (TextBlockEditor)
-        // associates its label via this id, see ContentEditorProps.id in
-        // content-editors.tsx.
-        editorProps: { attributes: { id } },
-        onUpdate: ({ editor: e }) => onChange(e.getHTML()),
-    });
-    // `useEditor` alone leaves `editor.isActive(...)` reads in the render body
-    // frozen on the last prop-driven render — @tiptap/react v3 defaults
-    // `shouldRerenderOnTransaction` to false, so a selection-only change (e.g.
-    // moving the cursor into bold text without typing) never triggers a
-    // re-render on its own. `useEditorState` subscribes to transactions itself
-    // and only re-renders when the selected slice of state actually changes.
-    const activeState = useEditorState({
-        editor,
-        selector: ({ editor: e }) => e === null
-            ? null
-            : {
-                bold: e.isActive("bold"),
-                italic: e.isActive("italic"),
-                heading1: e.isActive("heading", { level: 1 }),
-                heading2: e.isActive("heading", { level: 2 }),
-                bulletList: e.isActive("bulletList"),
-                orderedList: e.isActive("orderedList"),
-            },
-    });
-    // TextBlockEditor loads the entry's content asynchronously (by-slug query
-    // resolves after mount), so `value` arrives after useEditor already read
-    // its initial (empty) content once. Sync it in — guarded against
-    // clobbering in-flight typing by comparing against the editor's own HTML.
-    useEffect(() => {
-        if (editor && value !== editor.getHTML()) {
-            editor.commands.setContent(value, { emitUpdate: false });
-        }
-    }, [value, editor]);
-    useEffect(() => {
-        editor?.setEditable(!readOnly);
-    }, [readOnly, editor]);
-    if (!editor)
-        return (_jsx(TextareaContentEditor, { id: id, value: value, onChange: onChange, variables: variables, readOnly: readOnly }));
-    const actions = [
-        {
-            label: t("kumiko.contentEditor.bold"),
-            icon: BoldIcon,
-            isActive: activeState?.bold ?? false,
-            onClick: () => editor.chain().focus().toggleBold().run(),
-        },
-        {
-            label: t("kumiko.contentEditor.italic"),
-            icon: ItalicIcon,
-            isActive: activeState?.italic ?? false,
-            onClick: () => editor.chain().focus().toggleItalic().run(),
-        },
-        {
-            label: t("kumiko.contentEditor.heading1"),
-            icon: Heading1,
-            isActive: activeState?.heading1 ?? false,
-            onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-        },
-        {
-            label: t("kumiko.contentEditor.heading2"),
-            icon: Heading2,
-            isActive: activeState?.heading2 ?? false,
-            onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-        },
-        {
-            label: t("kumiko.contentEditor.bulletList"),
-            icon: List,
-            isActive: activeState?.bulletList ?? false,
-            onClick: () => editor.chain().focus().toggleBulletList().run(),
-        },
-        {
-            label: t("kumiko.contentEditor.orderedList"),
-            icon: ListOrdered,
-            isActive: activeState?.orderedList ?? false,
-            onClick: () => editor.chain().focus().toggleOrderedList().run(),
-        },
-    ];
-    const insertVariable = (name) => {
-        editor
-            .chain()
-            .focus()
-            .insertContent({ type: "text", text: `{{${name}}}` })
-            .run();
-    };
-    return (_jsxs("div", { className: "rounded-md border border-input bg-transparent", children: [_jsx(Toolbar, { actions: actions, disabled: readOnly }), _jsx(EditorContent, { editor: editor, className: cn("min-h-40 px-3 py-2 text-base outline-none md:text-sm", "[&_.ProseMirror]:min-h-40 [&_.ProseMirror]:outline-none", "[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-6 [&_ol]:pl-6", "[&_h1]:text-xl [&_h1]:font-bold [&_h2]:text-lg [&_h2]:font-bold", "[&_a]:underline [&_a]:text-primary", "[&_strong]:font-bold [&_em]:italic") }), variables.length > 0 && (_jsx("div", { className: "border-t border-input p-1", children: _jsx(VariableChips, { variables: variables, onInsert: insertVariable, disabled: readOnly }) }))] }));
-}