@plexui/vue 0.0.0-stage → 0.1.0

package/dist/es/components/Markdown/useMathPlugins.js

@@ -0,0 +1,55 @@
+import { computed, onMounted, ref, watch } from "vue";
+const DEFAULT_EMPTY_STATE = { remarkPlugins: [], rehypePlugins: [] };
+let resolvedPluginsCache = null;
+let pluginLoadPromise = null;
+async function loadMathDeps() {
+    if (resolvedPluginsCache)
+        return resolvedPluginsCache;
+    if (pluginLoadPromise)
+        return pluginLoadPromise;
+    pluginLoadPromise = (async () => {
+        const [{ default: remarkMath }, { default: rehypeKatex }] = await Promise.all([
+            import("remark-math"),
+            import("rehype-katex"),
+        ]);
+        resolvedPluginsCache = {
+            remarkPlugins: [[remarkMath, { singleDollarTextMath: false }]],
+            rehypePlugins: [rehypeKatex],
+        };
+        return resolvedPluginsCache;
+    })();
+    try {
+        const plugins = await pluginLoadPromise;
+        return plugins;
+    }
+    catch (err) {
+        // Reset so a later attempt can retry
+        pluginLoadPromise = null;
+        throw err;
+    }
+}
+export function useMathPlugins(enabled) {
+    const ready = ref(!!resolvedPluginsCache);
+    // Client only, like useEffect: SSR renders without math
+    onMounted(() => {
+        watch([enabled, ready], ([isEnabled, isReady], _previous, onCleanup) => {
+            if (!isEnabled || isReady) {
+                return;
+            }
+            let alive = true;
+            loadMathDeps()
+                .then(() => {
+                if (alive) {
+                    // Re-render once we have the updated plugins
+                    ready.value = true;
+                }
+            })
+                .catch(() => { });
+            onCleanup(() => {
+                alive = false;
+            });
+        }, { immediate: true });
+    });
+    return computed(() => (ready.value && enabled() && !!resolvedPluginsCache ? resolvedPluginsCache : DEFAULT_EMPTY_STATE));
+}
+//# sourceMappingURL=useMathPlugins.js.map

package/dist/es/components/Markdown/useMathPlugins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMathPlugins.js","sourceRoot":"","sources":["../../../../src/components/Markdown/useMathPlugins.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAYrD,MAAM,mBAAmB,GAAgB,EAAE,aAAa,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE,CAAA;AACjF,IAAI,oBAAoB,GAAuB,IAAI,CAAA;AAEnD,IAAI,iBAAiB,GAAgC,IAAI,CAAA;AAEzD,KAAK,UAAU,YAAY;IACzB,IAAI,oBAAoB;QAAE,OAAO,oBAAoB,CAAA;IACrD,IAAI,iBAAiB;QAAE,OAAO,iBAAiB,CAAA;IAE/C,iBAAiB,GAAG,CAAC,KAAK,IAAI,EAAE;QAC9B,MAAM,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YAC5E,MAAM,CAAC,aAAa,CAAC;YACrB,MAAM,CAAC,cAAc,CAAC;SACvB,CAAC,CAAA;QAEF,oBAAoB,GAAG;YACrB,aAAa,EAAE,CAAC,CAAC,UAAU,EAAE,EAAE,oBAAoB,EAAE,KAAK,EAAE,CAAC,CAAC;YAC9D,aAAa,EAAE,CAAC,WAAW,CAAC;SAC7B,CAAA;QACD,OAAO,oBAAoB,CAAA;IAC7B,CAAC,CAAC,EAAE,CAAA;IAEJ,IAAI,CAAC;QACH,MAAM,OAAO,GAAG,MAAM,iBAAiB,CAAA;QACvC,OAAO,OAAO,CAAA;IAChB,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,qCAAqC;QACrC,iBAAiB,GAAG,IAAI,CAAA;QACxB,MAAM,GAAG,CAAA;IACX,CAAC;AACH,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,OAAsB;IACnD,MAAM,KAAK,GAAG,GAAG,CAAU,CAAC,CAAC,oBAAoB,CAAC,CAAA;IAElD,wDAAwD;IACxD,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,CACH,CAAC,OAAO,EAAE,KAAK,CAAC,EAChB,CAAC,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE;YAC7C,IAAI,CAAC,SAAS,IAAI,OAAO,EAAE,CAAC;gBAC1B,OAAM;YACR,CAAC;YAED,IAAI,KAAK,GAAG,IAAI,CAAA;YAChB,YAAY,EAAE;iBACX,IAAI,CAAC,GAAG,EAAE;gBACT,IAAI,KAAK,EAAE,CAAC;oBACV,6CAA6C;oBAC7C,KAAK,CAAC,KAAK,GAAG,IAAI,CAAA;gBACpB,CAAC;YACH,CAAC,CAAC;iBACD,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAA;YAElB,SAAS,CAAC,GAAG,EAAE;gBACb,KAAK,GAAG,KAAK,CAAA;YACf,CAAC,CAAC,CAAA;QACJ,CAAC,EACD,EAAE,SAAS,EAAE,IAAI,EAAE,CACpB,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,OAAO,EAAE,IAAI,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAC1H,CAAC","sourcesContent":["import type { PluggableList } from \"unified\"\nimport { computed, onMounted, ref, watch } from \"vue\"\n\n// Vue port of packages/ui/src/components/Markdown/useMathPlugins.tsx.\n// remark-math and rehype-katex load lazily, once per page, on the client\n// (after mount, like React's effect): a Markdown first renders without math,\n// then again with it. Later mounts render math right away.\n\ntype MathPlugins = {\n  remarkPlugins: PluggableList\n  rehypePlugins: PluggableList\n}\n\nconst DEFAULT_EMPTY_STATE: MathPlugins = { remarkPlugins: [], rehypePlugins: [] }\nlet resolvedPluginsCache: MathPlugins | null = null\n\nlet pluginLoadPromise: Promise<MathPlugins> | null = null\n\nasync function loadMathDeps(): Promise<MathPlugins> {\n  if (resolvedPluginsCache) return resolvedPluginsCache\n  if (pluginLoadPromise) return pluginLoadPromise\n\n  pluginLoadPromise = (async () => {\n    const [{ default: remarkMath }, { default: rehypeKatex }] = await Promise.all([\n      import(\"remark-math\"),\n      import(\"rehype-katex\"),\n    ])\n\n    resolvedPluginsCache = {\n      remarkPlugins: [[remarkMath, { singleDollarTextMath: false }]],\n      rehypePlugins: [rehypeKatex],\n    }\n    return resolvedPluginsCache\n  })()\n\n  try {\n    const plugins = await pluginLoadPromise\n    return plugins\n  } catch (err) {\n    // Reset so a later attempt can retry\n    pluginLoadPromise = null\n    throw err\n  }\n}\n\nexport function useMathPlugins(enabled: () => boolean) {\n  const ready = ref<boolean>(!!resolvedPluginsCache)\n\n  // Client only, like useEffect: SSR renders without math\n  onMounted(() => {\n    watch(\n      [enabled, ready],\n      ([isEnabled, isReady], _previous, onCleanup) => {\n        if (!isEnabled || isReady) {\n          return\n        }\n\n        let alive = true\n        loadMathDeps()\n          .then(() => {\n            if (alive) {\n              // Re-render once we have the updated plugins\n              ready.value = true\n            }\n          })\n          .catch(() => {})\n\n        onCleanup(() => {\n          alive = false\n        })\n      },\n      { immediate: true },\n    )\n  })\n\n  return computed(() => (ready.value && enabled() && !!resolvedPluginsCache ? resolvedPluginsCache : DEFAULT_EMPTY_STATE))\n}\n"]}

package/dist/es/components/Markdown/useParseMarkdownPre.js

@@ -0,0 +1,34 @@
+import { Comment, Text, isVNode } from "vue";
+// The content a `code` vnode carries: an element's text children, or what a
+// component's default slot returns (Markdown passes the raw React-style
+// `children`, a string when the code is one text node).
+const contentOf = (vnode) => {
+    const { children } = vnode;
+    if (typeof children === "string")
+        return children;
+    if (children && typeof children === "object" && !Array.isArray(children)) {
+        const slot = children.default;
+        return typeof slot === "function" ? slot() : undefined;
+    }
+    return undefined;
+};
+/**
+ * Vue port of packages/ui/src/components/Markdown/useParseMarkdownPre.ts.
+ * Takes what a `pre` override renders as children (its default slot) and
+ * reads the code and language off the single `code` child.
+ */
+export function useParseMarkdownPre(children) {
+    // React's `children`: a single child is the child itself, several are a list
+    const child = Array.isArray(children) && children.length === 1 ? children[0] : children;
+    if (!child || typeof child !== "object" || !isVNode(child) || child.type === Text || child.type === Comment) {
+        return { code: "", language: "text" };
+    }
+    const props = (child.props ?? {});
+    const content = contentOf(child);
+    const code = typeof content === "string"
+        ? content.replaceAll(/\n$/g, "") // remove trailing newlines
+        : "";
+    const language = typeof props.class === "string" ? (props.class.match(/language-(.*)$/)?.[1] ?? "text") : "text";
+    return { code, language };
+}
+//# sourceMappingURL=useParseMarkdownPre.js.map

package/dist/es/components/Markdown/useParseMarkdownPre.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParseMarkdownPre.js","sourceRoot":"","sources":["../../../../src/components/Markdown/useParseMarkdownPre.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAwD,MAAM,KAAK,CAAA;AAElG,4EAA4E;AAC5E,wEAAwE;AACxE,wDAAwD;AACxD,MAAM,SAAS,GAAG,CAAC,KAAY,EAAW,EAAE;IAC1C,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC1B,IAAI,OAAO,QAAQ,KAAK,QAAQ;QAAE,OAAO,QAAQ,CAAA;IACjD,IAAI,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;QACzE,MAAM,IAAI,GAAI,QAAkC,CAAC,OAAO,CAAA;QACxD,OAAO,OAAO,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;IACxD,CAAC;IACD,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,QAAqD;IACvF,6EAA6E;IAC7E,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;IAEvF,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QAC5G,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAA;IACvC,CAAC;IAED,MAAM,KAAK,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAA4B,CAAA;IAC5D,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAEhC,MAAM,IAAI,GACR,OAAO,OAAO,KAAK,QAAQ;QACzB,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,2BAA2B;QAC5D,CAAC,CAAC,EAAE,CAAA;IACR,MAAM,QAAQ,GACZ,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAA;IAEjG,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAA;AAC3B,CAAC","sourcesContent":["import { Comment, Text, isVNode, type VNode, type VNodeArrayChildren, type VNodeChild } from \"vue\"\n\n// The content a `code` vnode carries: an element's text children, or what a\n// component's default slot returns (Markdown passes the raw React-style\n// `children`, a string when the code is one text node).\nconst contentOf = (vnode: VNode): unknown => {\n  const { children } = vnode\n  if (typeof children === \"string\") return children\n  if (children && typeof children === \"object\" && !Array.isArray(children)) {\n    const slot = (children as { default?: unknown }).default\n    return typeof slot === \"function\" ? slot() : undefined\n  }\n  return undefined\n}\n\n/**\n * Vue port of packages/ui/src/components/Markdown/useParseMarkdownPre.ts.\n * Takes what a `pre` override renders as children (its default slot) and\n * reads the code and language off the single `code` child.\n */\nexport function useParseMarkdownPre(children: VNodeChild | VNodeArrayChildren | undefined) {\n  // React's `children`: a single child is the child itself, several are a list\n  const child = Array.isArray(children) && children.length === 1 ? children[0] : children\n\n  if (!child || typeof child !== \"object\" || !isVNode(child) || child.type === Text || child.type === Comment) {\n    return { code: \"\", language: \"text\" }\n  }\n\n  const props = (child.props ?? {}) as Record<string, unknown>\n  const content = contentOf(child)\n\n  const code =\n    typeof content === \"string\"\n      ? content.replaceAll(/\\n$/g, \"\") // remove trailing newlines\n      : \"\"\n  const language =\n    typeof props.class === \"string\" ? (props.class.match(/language-(.*)$/)?.[1] ?? \"text\") : \"text\"\n\n  return { code, language }\n}\n"]}

package/dist/es/components/MarkdownEditor/MarkdownEditor.js

@@ -0,0 +1,473 @@
+import { Teleport, defineComponent, h, reactive, ref, watch, } from "vue";
+import { EditorContent, useEditor } from "@tiptap/vue-3";
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+import BoldExtension from "@tiptap/extension-bold";
+import ItalicExtension from "@tiptap/extension-italic";
+import LinkExtension from "@tiptap/extension-link";
+import BulletList from "@tiptap/extension-bullet-list";
+import OrderedList from "@tiptap/extension-ordered-list";
+import ListItem from "@tiptap/extension-list-item";
+import History from "@tiptap/extension-history";
+import Placeholder from "@tiptap/extension-placeholder";
+import HardBreak from "@tiptap/extension-hard-break";
+import { Markdown as MarkdownExtension } from "tiptap-markdown";
+import { Bold as BoldIcon, Italic as ItalicIcon, Link as LinkIcon, List as ListIcon, ListNumbers as ListNumbersIcon, } from "../Icon/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { flattenSlot } from "../Tooltip/slot.js";
+import s from "@plexui/styles/components/MarkdownEditor/MarkdownEditor.module.css";
+const getMarkdown = (editor) => editor.storage.markdown?.getMarkdown?.() ?? "";
+// A link inserted as a text node, not as `<a>` HTML: the markdown parser runs
+// with `html: false`, so HTML would land in the text as written
+const linkText = (text, href) => ({
+    type: "text",
+    text,
+    marks: [{ type: "link", attrs: { href } }],
+});
+export const markdownEditorStyles = {
+    toolbarButton: s.ToolbarButton,
+};
+const LinkDialog = defineComponent({
+    name: "MarkdownEditorLinkDialog",
+    props: {
+        open: { type: Boolean, required: true },
+        initialUrl: { type: String, required: true },
+        initialTitle: { type: String, required: true },
+        isEditing: { type: Boolean, required: true },
+        onSave: { type: Function, required: true },
+        onRemove: { type: Function, required: true },
+        onCancel: { type: Function, required: true },
+        /** Receives mousedown events from inside the dialog, as React's tree bubbling does */
+        onTreeMousedown: { type: Function, required: true },
+    },
+    setup(props) {
+        const url = ref(props.initialUrl);
+        const title = ref(props.initialTitle);
+        const urlRef = ref(null);
+        watch(() => [props.open, props.initialUrl, props.initialTitle], ([open, initialUrl, initialTitle]) => {
+            if (open) {
+                url.value = initialUrl;
+                title.value = initialTitle;
+                requestAnimationFrame(() => urlRef.value?.focus());
+            }
+        });
+        const handleKeyDown = (evt) => {
+            // Enter in a field saves; on a button it is that button's own click
+            if (evt.key === "Enter" && evt.target instanceof HTMLInputElement) {
+                evt.preventDefault();
+                props.onSave(url.value, title.value);
+            }
+            if (evt.key === "Escape") {
+                evt.preventDefault();
+                props.onCancel();
+            }
+            // The dialog is modal: Tab from the last control wraps to the first, and
+            // Shift+Tab from the first to the last
+            if (evt.key === "Tab") {
+                const controls = Array.from(evt.currentTarget.querySelectorAll("input, button"));
+                const first = controls[0];
+                const last = controls[controls.length - 1];
+                if (evt.target === (evt.shiftKey ? first : last)) {
+                    evt.preventDefault();
+                    (evt.shiftKey ? last : first)?.focus();
+                }
+            }
+        };
+        return () => {
+            if (!props.open || typeof document === "undefined")
+                return null;
+            return h(Teleport, { to: "body" }, [
+                h("div", {
+                    class: s.LinkDialogOverlay,
+                    onClick: () => props.onCancel(),
+                    onMousedown: props.onTreeMousedown,
+                }),
+                h("div", {
+                    "class": s.LinkDialogContent,
+                    "role": "dialog",
+                    "aria-modal": "true",
+                    "aria-label": "Link",
+                    "onKeydown": handleKeyDown,
+                    "onMousedown": props.onTreeMousedown,
+                }, [
+                    h("div", { class: s.LinkDialogBody }, [
+                        h("h3", { class: s.LinkDialogTitle }, "Link"),
+                        h("div", { class: s.LinkDialogFields }, [
+                            h("div", { class: s.LinkDialogField }, [
+                                h("label", { class: s.LinkDialogLabel, for: "md-editor-link-url" }, "URL"),
+                                h("input", {
+                                    ref: urlRef,
+                                    id: "md-editor-link-url",
+                                    class: s.LinkDialogInput,
+                                    type: "url",
+                                    placeholder: "Enter URL",
+                                    value: url.value,
+                                    onInput: (e) => {
+                                        url.value = e.target.value;
+                                    },
+                                }),
+                            ]),
+                            h("div", { class: s.LinkDialogField }, [
+                                h("label", { class: s.LinkDialogLabel, for: "md-editor-link-title" }, "Link title"),
+                                h("input", {
+                                    id: "md-editor-link-title",
+                                    class: s.LinkDialogInput,
+                                    type: "text",
+                                    placeholder: "Enter link title",
+                                    value: title.value,
+                                    onInput: (e) => {
+                                        title.value = e.target.value;
+                                    },
+                                }),
+                            ]),
+                        ]),
+                    ]),
+                    h("div", { class: s.LinkDialogFooter }, [
+                        props.isEditing
+                            ? h("button", { type: "button", class: s.LinkDialogButtonRemove, onClick: () => props.onRemove() }, "Remove")
+                            : null,
+                        h("div", { class: s.LinkDialogFooterTrailing }, [
+                            h("button", { type: "button", class: s.LinkDialogButtonCancel, onClick: () => props.onCancel() }, "Cancel"),
+                            h("button", { type: "button", class: s.LinkDialogButtonSave, onClick: () => props.onSave(url.value, title.value) }, "Save"),
+                        ]),
+                    ]),
+                ]),
+            ]);
+        };
+    },
+});
+const ToolbarButton = defineComponent({
+    name: "MarkdownEditorToolbarButton",
+    props: {
+        tooltip: { type: String, required: true },
+        active: { type: Boolean, default: false },
+        disabled: { type: Boolean, default: false },
+        icon: { type: [Object, Function], required: true },
+        onClick: { type: Function, required: true },
+    },
+    setup(props) {
+        return () => h(Tooltip, { content: props.tooltip, compact: true }, {
+            default: () => h("button", {
+                "type": "button",
+                "class": s.ToolbarButton,
+                "data-active": props.active || undefined,
+                // Formatting buttons are toggles: announce their on/off state
+                "aria-pressed": String(props.active),
+                // React DOM never calls onClick on a disabled button, even
+                // for a dispatched event; Vue's listener would run
+                "onClick": () => {
+                    if (!props.disabled)
+                        props.onClick();
+                },
+                "disabled": props.disabled,
+                "aria-label": props.tooltip,
+            }, [h(props.icon)]),
+        });
+    },
+});
+const MarkdownEditorComponent = defineComponent({
+    name: "MarkdownEditor",
+    inheritAttrs: false,
+    props: {
+        /** Visual style of the editor. @default "outline" */
+        variant: { type: String, default: "outline" },
+        /** Disables editing and the toolbar. @default false */
+        disabled: { type: Boolean, default: false },
+        /** Marks the editor as invalid. @default false */
+        invalid: { type: Boolean, default: false },
+        /** Placeholder text when empty (read when the editor is created) */
+        placeholder: String,
+        /** Controlled value as a markdown string (`v-model:value`) */
+        value: { type: String, default: undefined },
+        /** Default value as a markdown string for uncontrolled mode */
+        defaultValue: { type: String, default: undefined },
+        /** Minimum visible rows. @default 1 */
+        rows: { type: Number, default: 1 },
+        /** `id` of the editable element */
+        id: String,
+        /** Accessible name of the editable element; a `<label for>` cannot name a contenteditable region */
+        ariaLabel: String,
+        /** Id of the element that names the editor, such as a Field label */
+        ariaLabelledby: String,
+        /** `aria-describedby` of the editable element */
+        ariaDescribedby: String,
+        /** Sets `aria-invalid="true"` on the editable element and the invalid style */
+        ariaInvalid: { type: Boolean, default: undefined },
+    },
+    emits: {
+        /** The editor's markdown after a change (`v-model:value`) */
+        "update:value": (_markdown) => true,
+        /** Same as `update:value` (React's `onChange`) */
+        "change": (_markdown) => true,
+    },
+    setup(props, { slots, attrs, emit }) {
+        const focused = ref(false);
+        const linkDialogOpen = ref(false);
+        const linkDialogInitial = ref({ url: "", title: "" });
+        const activeMarks = reactive({
+            bold: false,
+            italic: false,
+            link: false,
+            orderedList: false,
+            bulletList: false,
+        });
+        const linkCanEnable = ref(false);
+        const isControlled = () => props.value !== undefined;
+        let suppressChange = false;
+        const syncToolbar = (e) => {
+            Object.assign(activeMarks, {
+                bold: e.isActive("bold"),
+                italic: e.isActive("italic"),
+                link: e.isActive("link"),
+                orderedList: e.isActive("orderedList"),
+                bulletList: e.isActive("bulletList"),
+            });
+            linkCanEnable.value = !e.state.selection.empty || e.isActive("link");
+        };
+        const editorAttributes = () => ({
+            "class": s.EditorContent,
+            "role": "textbox",
+            "aria-multiline": "true",
+            ...(props.id && { id: props.id }),
+            ...(props.ariaLabel && { "aria-label": props.ariaLabel }),
+            ...(props.ariaLabelledby && { "aria-labelledby": props.ariaLabelledby }),
+            ...(props.ariaDescribedby && { "aria-describedby": props.ariaDescribedby }),
+            ...(props.ariaInvalid && { "aria-invalid": "true" }),
+        });
+        const editor = useEditor({
+            extensions: [
+                Document,
+                Paragraph,
+                Text,
+                HardBreak,
+                BoldExtension,
+                ItalicExtension,
+                LinkExtension.configure({
+                    openOnClick: false,
+                    HTMLAttributes: { rel: "noopener noreferrer nofollow" },
+                }),
+                BulletList,
+                OrderedList,
+                ListItem,
+                History,
+                MarkdownExtension.configure({
+                    html: false,
+                    transformPastedText: true,
+                    transformCopiedText: true,
+                }),
+                ...(props.placeholder ? [Placeholder.configure({ placeholder: props.placeholder })] : []),
+            ],
+            content: props.value ?? props.defaultValue ?? "",
+            editable: !props.disabled,
+            editorProps: {
+                attributes: editorAttributes(),
+            },
+            onFocus: () => {
+                focused.value = true;
+            },
+            onBlur: () => {
+                focused.value = false;
+            },
+            onUpdate: ({ editor: e }) => {
+                if (suppressChange)
+                    return;
+                const md = getMarkdown(e);
+                emit("update:value", md);
+                emit("change", md);
+            },
+            onSelectionUpdate: ({ editor: e }) => syncToolbar(e),
+            onTransaction: ({ editor: e }) => syncToolbar(e),
+        });
+        // React re-applies the editor props on every render
+        watch(editorAttributes, (attributes) => {
+            editor.value?.setOptions({ editorProps: { attributes } });
+        });
+        watch(() => [editor.value, props.value, isControlled()], ([instance, value, controlled]) => {
+            if (!instance || !controlled)
+                return;
+            const currentMd = getMarkdown(instance);
+            if (value !== currentMd) {
+                suppressChange = true;
+                instance.commands.setContent(value || "", { emitUpdate: false });
+                suppressChange = false;
+            }
+        });
+        watch(() => [editor.value, props.disabled], ([instance, disabled]) => {
+            if (instance)
+                instance.setEditable(!disabled);
+        });
+        const handleContainerMouseDown = (evt) => {
+            const instance = editor.value;
+            if (props.disabled || !instance)
+                return;
+            const target = evt.target;
+            if (target.closest("button, [type='button'], [role='button'], a, input, label"))
+                return;
+            // A press in the text places the caret there itself
+            if (instance.view.dom.contains(target))
+                return;
+            if (instance.isFocused)
+                return;
+            evt.preventDefault();
+            instance.commands.focus("end");
+        };
+        const openLinkDialog = () => {
+            const instance = editor.value;
+            if (!instance)
+                return;
+            const url = instance.getAttributes("link").href ?? "";
+            let title = "";
+            if (!instance.state.selection.empty) {
+                title = instance.state.doc.textBetween(instance.state.selection.from, instance.state.selection.to, "");
+            }
+            else if (instance.isActive("link")) {
+                const { $from } = instance.state.selection;
+                const linkMark = $from.marks().find((m) => m.type === instance.schema.marks.link);
+                if (linkMark) {
+                    let start = $from.pos;
+                    let end = $from.pos;
+                    instance.state.doc.nodesBetween($from.start(), $from.end(), (node, pos) => {
+                        if (node.isText && node.marks.some((m) => m.eq(linkMark))) {
+                            start = Math.min(start, pos);
+                            end = Math.max(end, pos + node.nodeSize);
+                        }
+                    });
+                    title = instance.state.doc.textBetween(start, end, "");
+                }
+            }
+            linkDialogInitial.value = { url, title };
+            linkDialogOpen.value = true;
+        };
+        const handleLinkSave = (url, title) => {
+            const instance = editor.value;
+            if (!instance)
+                return;
+            linkDialogOpen.value = false;
+            if (!url) {
+                instance.chain().focus().extendMarkRange("link").unsetLink().run();
+                return;
+            }
+            const { from, to, empty } = instance.state.selection;
+            const selectedText = empty ? "" : instance.state.doc.textBetween(from, to, "");
+            const isOnExistingLink = instance.isActive("link");
+            if (empty && !isOnExistingLink) {
+                instance.chain().focus().insertContent(linkText(title || url, url)).run();
+            }
+            else if (isOnExistingLink) {
+                instance.chain().focus().extendMarkRange("link").run();
+                const linkRange = instance.state.selection;
+                if (title && title !== instance.state.doc.textBetween(linkRange.from, linkRange.to, "")) {
+                    instance
+                        .chain()
+                        .focus()
+                        .insertContentAt({ from: linkRange.from, to: linkRange.to }, linkText(title, url))
+                        .run();
+                }
+                else {
+                    instance.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+                }
+            }
+            else if (title && title !== selectedText) {
+                instance.chain().focus().deleteSelection().insertContent(linkText(title, url)).run();
+            }
+            else {
+                instance.chain().focus().setLink({ href: url }).run();
+            }
+        };
+        const handleLinkRemove = () => {
+            const instance = editor.value;
+            if (!instance)
+                return;
+            linkDialogOpen.value = false;
+            instance.chain().focus().extendMarkRange("link").unsetLink().run();
+        };
+        const handleLinkCancel = () => {
+            linkDialogOpen.value = false;
+            editor.value?.commands.focus();
+        };
+        return () => {
+            const { variant, disabled, invalid, ariaInvalid, rows } = props;
+            const isInvalid = invalid || ariaInvalid;
+            const minHeight = 20 * rows + 16;
+            // React renders the slot only for a truthy `toolbarEnd`
+            const toolbarEnd = slots.toolbarEnd?.();
+            const hasToolbarEnd = flattenSlot(toolbarEnd).length > 0;
+            return h("div", {
+                "class": [s.Container, attrs.class],
+                "data-variant": variant,
+                "data-focused": String(focused.value),
+                "data-disabled": disabled ? "" : undefined,
+                "data-invalid": isInvalid ? "" : undefined,
+                "onMousedown": handleContainerMouseDown,
+            }, [
+                h("div", { class: s.Toolbar, onMousedown: (e) => e.preventDefault() }, [
+                    h("div", { class: s.ToolbarGroup }, [
+                        h(ToolbarButton, {
+                            tooltip: "Bold",
+                            active: activeMarks.bold,
+                            disabled,
+                            icon: BoldIcon,
+                            onClick: () => editor.value?.chain().focus().toggleBold().run(),
+                        }),
+                        h(ToolbarButton, {
+                            tooltip: "Italic",
+                            active: activeMarks.italic,
+                            disabled,
+                            icon: ItalicIcon,
+                            onClick: () => editor.value?.chain().focus().toggleItalic().run(),
+                        }),
+                        h("div", { "class": s.ToolbarSeparator, "aria-hidden": "true" }),
+                        h(ToolbarButton, {
+                            tooltip: "Numbered list",
+                            active: activeMarks.orderedList,
+                            disabled,
+                            icon: ListNumbersIcon,
+                            onClick: () => editor.value?.chain().focus().toggleOrderedList().run(),
+                        }),
+                        h(ToolbarButton, {
+                            tooltip: "Bullet list",
+                            active: activeMarks.bulletList,
+                            disabled,
+                            icon: ListIcon,
+                            onClick: () => editor.value?.chain().focus().toggleBulletList().run(),
+                        }),
+                        h("div", { "class": s.ToolbarSeparator, "aria-hidden": "true" }),
+                        h(ToolbarButton, {
+                            tooltip: "Link",
+                            active: activeMarks.link,
+                            disabled: disabled || !linkCanEnable.value,
+                            icon: LinkIcon,
+                            onClick: openLinkDialog,
+                        }),
+                        ...(hasToolbarEnd
+                            ? [
+                                h("div", { "class": s.ToolbarSeparator, "aria-hidden": "true" }),
+                                h("div", { class: s.ToolbarEnd }, toolbarEnd),
+                            ]
+                            : []),
+                    ]),
+                ]),
+                h("div", { class: s.Editor, style: { minHeight: `${minHeight}px` } }, [
+                    h(EditorContent, { editor: editor.value }),
+                ]),
+                h(LinkDialog, {
+                    open: linkDialogOpen.value,
+                    initialUrl: linkDialogInitial.value.url,
+                    initialTitle: linkDialogInitial.value.title,
+                    isEditing: !!linkDialogInitial.value.url,
+                    onSave: handleLinkSave,
+                    onRemove: handleLinkRemove,
+                    onCancel: handleLinkCancel,
+                    onTreeMousedown: handleContainerMouseDown,
+                }),
+            ]);
+        };
+    },
+});
+/**
+ * Compact rich text editor for markdown, with a formatting toolbar (bold,
+ * italic, lists, links). Bind the markdown with `v-model:value`.
+ */
+export const MarkdownEditor = MarkdownEditorComponent;
+//# sourceMappingURL=MarkdownEditor.js.map