@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/runtime/editor/components/RichText/Editor/Toolbar/Button/index.d.vue.ts

@@ -0,0 +1,18 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    icon: BlokkliIcon;
+    label: string;
+    active?: boolean;
+    disabled?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    icon: BlokkliIcon;
+    label: string;
+    active?: boolean;
+    disabled?: boolean;
+}> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/RichText/Editor/Toolbar/Button/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <button
+    type="button"
+    :title="label"
+    :disabled="disabled"
+    class="_bk_size-30 _bk_flex _bk_items-center _bk_justify-center _bk_disabled:opacity-40 _bk_disabled:cursor-not-allowed _bk_disabled:hover:bg-transparent"
+    :class="
+  active ? '_bk_bg-accent-100 _bk_text-accent-900 _bk_hover:bg-accent-200' : '_bk_text-mono-700 _bk_hover:bg-mono-200 _bk_hover:text-mono-950'
+"
+    @click="$emit('click')"
+  >
+    <Icon :name="icon" class="_bk_size-15" />
+  </button>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/editor/components";
+defineProps({
+  icon: { type: null, required: true },
+  label: { type: String, required: true },
+  active: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+defineEmits(["click"]);
+</script>
+
+<script>
+export default {
+  name: "RichTextToolbarButton"
+};
+</script>

package/dist/runtime/editor/components/RichText/Editor/Toolbar/Button/index.vue.d.ts

@@ -0,0 +1,18 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    icon: BlokkliIcon;
+    label: string;
+    active?: boolean;
+    disabled?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    icon: BlokkliIcon;
+    label: string;
+    active?: boolean;
+    disabled?: boolean;
+}> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/RichText/Editor/Toolbar/Group/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/components/RichText/Editor/Toolbar/Group/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    class="bk-richtext-tb-group _bk_flex _bk_items-center _bk_border-r _bk_border-r-mono-200 _bk_last:border-r-0"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RichTextToolbarGroup"
+};
+</script>

package/dist/runtime/editor/components/RichText/Editor/Toolbar/Group/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/components/RichText/Editor/Toolbar/index.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/RichText/Editor/Toolbar/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="bk-richtext-toolbar _bk_flex _bk_items-center _bk_border-b _bk_border-mono-200 _bk_bg-mono-100 _bk_rounded-t _bk_overflow-hidden"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/editor/components/RichText/Editor/Toolbar/index.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/RichText/Editor/index.d.vue.ts

@@ -0,0 +1,31 @@
+import { type MentionItem } from './SuggestionList/Mentions.vue.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    initialValue?: string;
+    getUsers?: () => Promise<MentionItem[]>;
+    autofocus?: boolean;
+    noBorder?: boolean;
+}, {
+    getHTML: () => string;
+    isEmpty: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: {
+        html: string;
+        isEmpty: boolean;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    initialValue?: string;
+    getUsers?: () => Promise<MentionItem[]>;
+    autofocus?: boolean;
+    noBorder?: boolean;
+}> & Readonly<{
+    onChange?: ((args_0: {
+        html: string;
+        isEmpty: boolean;
+    }) => any) | undefined;
+}>, {
+    initialValue: string;
+    autofocus: boolean;
+    getUsers: () => Promise<MentionItem[]>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/RichText/Editor/index.vue

@@ -0,0 +1,386 @@
+<template>
+  <div ref="rootEl" class="_bk_relative" @paste.stop>
+    <div
+      class="bk-richtext _bk_relative _bk_overflow-hidden _bk_flex _bk_flex-col"
+      :class="{
+  '_bk_border _bk_border-mono-300 _bk_focus-within:border-mono-400 _bk_rounded': !noBorder
+}"
+    >
+      <Toolbar v-if="editor">
+        <ToolbarGroup>
+          <ToolbarButton
+            icon="bk_mdi_undo"
+            :label="$t('undo', 'Undo')"
+            :disabled="!editor.can().undo()"
+            @click="editor.chain().focus().undo().run()"
+          />
+          <ToolbarButton
+            icon="bk_mdi_redo"
+            :label="$t('redo', 'Redo')"
+            :disabled="!editor.can().redo()"
+            @click="editor.chain().focus().redo().run()"
+          />
+        </ToolbarGroup>
+        <ToolbarGroup>
+          <ToolbarButton
+            icon="bk_mdi_format_bold"
+            :label="$t('bold', 'Bold')"
+            :active="editor.isActive('bold')"
+            :disabled="!editor.can().chain().focus().toggleBold().run()"
+            @click="editor.chain().focus().toggleBold().run()"
+          />
+          <ToolbarButton
+            icon="bk_mdi_format_italic"
+            :label="$t('italic', 'Italic')"
+            :active="editor.isActive('italic')"
+            :disabled="!editor.can().chain().focus().toggleItalic().run()"
+            @click="editor.chain().focus().toggleItalic().run()"
+          />
+          <ToolbarButton
+            icon="bk_mdi_format_strikethrough"
+            :label="$t('strikethrough', 'Strikethrough')"
+            :active="editor.isActive('strike')"
+            :disabled="!editor.can().chain().focus().toggleStrike().run()"
+            @click="editor.chain().focus().toggleStrike().run()"
+          />
+          <ToolbarButton
+            icon="bk_mdi_code"
+            :label="$t('inlineCode', 'Inline code')"
+            :active="editor.isActive('code')"
+            :disabled="!editor.can().chain().focus().toggleCode().run()"
+            @click="editor.chain().focus().toggleCode().run()"
+          />
+        </ToolbarGroup>
+        <ToolbarGroup>
+          <ToolbarButton
+            icon="bk_mdi_format_list_bulleted"
+            :label="$t('bulletedList', 'Bulleted list')"
+            :active="editor.isActive('bulletList')"
+            :disabled="!editor.can().chain().focus().toggleBulletList().run()"
+            @click="editor.chain().focus().toggleBulletList().run()"
+          />
+          <ToolbarButton
+            icon="bk_mdi_format_list_numbered"
+            :label="$t('numberedList', 'Numbered list')"
+            :active="editor.isActive('orderedList')"
+            :disabled="!editor.can().chain().focus().toggleOrderedList().run()"
+            @click="editor.chain().focus().toggleOrderedList().run()"
+          />
+          <ToolbarButton
+            icon="bk_mdi_checklist"
+            :label="$t('taskList', 'Task list')"
+            :active="editor.isActive('taskList')"
+            :disabled="!editor.can().chain().focus().toggleTaskList().run()"
+            @click="editor.chain().focus().toggleTaskList().run()"
+          />
+          <ToolbarButton
+            icon="bk_mdi_format_quote"
+            :label="$t('blockquote', 'Blockquote')"
+            :active="editor.isActive('blockquote')"
+            :disabled="!editor.can().chain().focus().toggleBlockquote().run()"
+            @click="editor.chain().focus().toggleBlockquote().run()"
+          />
+        </ToolbarGroup>
+        <ToolbarGroup>
+          <ToolbarButton
+            icon="bk_mdi_link"
+            :label="$t('link', 'Link')"
+            :active="editor.isActive('link')"
+            :disabled="!canToggleLink"
+            @click="onToggleLink"
+          />
+        </ToolbarGroup>
+      </Toolbar>
+      <div
+        class="_bk_flex-1 _bk_overflow-auto bk-scrollbar-light _bk_relative _bk_overscroll-contain"
+      >
+        <EditorContent
+          :editor="editor"
+          class="bk-richtext-content _bk_min-h-[160px] _bk_max-h-[400px]"
+        />
+      </div>
+
+      <Transition name="bk-richtext-panel">
+        <PanelLink
+          v-if="linkEditor"
+          :initial-href="linkEditor.initialHref"
+          @save="onSaveLink"
+          @cancel="onCancelLink"
+          @remove="onRemoveLink"
+        />
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  useBlokkli,
+  useTemplateRef
+} from "#imports";
+import { Editor, EditorContent, VueRenderer } from "@tiptap/vue-3";
+import { posToDOMRect } from "@tiptap/core";
+import { computePosition, flip, shift } from "@floating-ui/dom";
+import StarterKit from "@tiptap/starter-kit";
+import Mention from "@tiptap/extension-mention";
+import Emoji, { gitHubEmojis } from "@tiptap/extension-emoji";
+import TaskList from "@tiptap/extension-task-list";
+import MentionList, {} from "./SuggestionList/Mentions.vue";
+import EmojiList from "./SuggestionList/Emojis.vue";
+import Toolbar from "./Toolbar/index.vue";
+import ToolbarButton from "./Toolbar/Button/index.vue";
+import ToolbarGroup from "./Toolbar/Group/index.vue";
+import PanelLink from "./Panel/Link/index.vue";
+import { CleanTaskItem } from "./CleanTaskItem";
+const props = defineProps({
+  initialValue: { type: String, required: false, default: "" },
+  getUsers: { type: Function, required: false, default: void 0 },
+  autofocus: { type: Boolean, required: false, default: false },
+  noBorder: { type: Boolean, required: false }
+});
+const emit = defineEmits(["change"]);
+const { $t } = useBlokkli();
+const editor = shallowRef();
+const linkEditor = ref(null);
+const rootEl = useTemplateRef("rootEl");
+function buildSuggestionRender(ListComponent) {
+  return () => {
+    let renderer = null;
+    function updatePosition(editor2, element) {
+      const virtualElement = {
+        getBoundingClientRect: () => posToDOMRect(
+          editor2.view,
+          editor2.state.selection.from,
+          editor2.state.selection.to
+        )
+      };
+      computePosition(virtualElement, element, {
+        placement: "bottom-start",
+        strategy: "absolute",
+        middleware: [shift(), flip()]
+      }).then(({ x, y, strategy }) => {
+        element.style.position = strategy;
+        element.style.left = `${x}px`;
+        element.style.top = `${y}px`;
+      });
+    }
+    return {
+      onStart: (suggestProps) => {
+        renderer = new VueRenderer(ListComponent, {
+          props: {
+            items: suggestProps.items,
+            command: suggestProps.command
+          },
+          editor: suggestProps.editor
+        });
+        const element = renderer.element;
+        if (!element || !rootEl.value) {
+          return;
+        }
+        element.style.position = "absolute";
+        rootEl.value.appendChild(element);
+        updatePosition(suggestProps.editor, element);
+      },
+      onUpdate: (suggestProps) => {
+        renderer?.updateProps({
+          items: suggestProps.items,
+          command: suggestProps.command
+        });
+        const element = renderer?.element;
+        if (element) {
+          updatePosition(suggestProps.editor, element);
+        }
+      },
+      onKeyDown: (suggestProps) => {
+        if (suggestProps.event.key === "Escape") {
+          ;
+          renderer?.element?.remove();
+          renderer?.destroy();
+          renderer = null;
+          return true;
+        }
+        const ref2 = renderer?.ref;
+        return ref2?.onKeyDown(suggestProps) ?? false;
+      },
+      onExit: () => {
+        ;
+        renderer?.element?.remove();
+        renderer?.destroy();
+        renderer = null;
+      }
+    };
+  };
+}
+function buildMentionExtension(getUsers) {
+  return Mention.configure({
+    HTMLAttributes: { class: "bk-richtext-mention" },
+    renderText({ node }) {
+      return `@${node.attrs.label ?? node.attrs.id}`;
+    },
+    suggestion: {
+      items: async ({ query }) => {
+        const all = await getUsers();
+        return all.filter((u) => u.label.toLowerCase().includes(query.toLowerCase())).slice(0, 6);
+      },
+      render: buildSuggestionRender(MentionList)
+    }
+  });
+}
+const ConfiguredEmoji = Emoji.extend({
+  addStorage() {
+    const parent = this.parent();
+    return {
+      ...parent,
+      isSupported: () => true
+    };
+  }
+});
+function buildEmojiExtension() {
+  return ConfiguredEmoji.configure({
+    emojis: gitHubEmojis,
+    enableEmoticons: true,
+    suggestion: {
+      items: ({ editor: editor2, query }) => {
+        const q = query.toLowerCase();
+        return editor2.storage.emoji.emojis.filter(
+          (e) => e.shortcodes?.some((s) => s.startsWith(q)) || e.tags?.some((t) => t.startsWith(q))
+        ).slice(0, 6);
+      },
+      render: buildSuggestionRender(EmojiList)
+    }
+  });
+}
+onMounted(() => {
+  const extensions = [
+    StarterKit.configure({
+      heading: false,
+      codeBlock: false,
+      horizontalRule: false,
+      trailingNode: false,
+      link: {
+        openOnClick: false,
+        autolink: true,
+        HTMLAttributes: { target: "_blank", rel: "noopener noreferrer" }
+      }
+    }),
+    TaskList,
+    CleanTaskItem.configure({ nested: true }),
+    buildEmojiExtension()
+  ];
+  if (props.getUsers) {
+    extensions.push(buildMentionExtension(props.getUsers));
+  }
+  editor.value = new Editor({
+    content: props.initialValue,
+    autofocus: props.autofocus ? "end" : false,
+    editorProps: {
+      attributes: {
+        class: "bk-rich-content bk-prose-mirror",
+        "data-test": "richtext-editor"
+      }
+    },
+    extensions,
+    onUpdate: ({ editor: editor2 }) => {
+      emit("change", { html: editor2.getHTML(), isEmpty: editor2.isEmpty });
+    }
+  });
+});
+defineExpose({
+  getHTML: () => editor.value?.getHTML() ?? "",
+  isEmpty: () => editor.value?.isEmpty ?? true
+});
+const canToggleLink = computed(() => {
+  const e = editor.value;
+  if (!e) {
+    return false;
+  }
+  if (e.isActive("link")) {
+    return true;
+  }
+  return !e.state.selection.empty;
+});
+function onToggleLink() {
+  if (!editor.value) {
+    return;
+  }
+  if (editor.value.isActive("link")) {
+    onEditLink();
+    return;
+  }
+  if (editor.value.state.selection.empty) {
+    return;
+  }
+  linkEditor.value = { initialHref: "" };
+}
+function onEditLink() {
+  if (!editor.value) {
+    return;
+  }
+  const current = editor.value.getAttributes("link").href ?? "";
+  linkEditor.value = { initialHref: current };
+}
+function onSaveLink({ href }) {
+  if (!editor.value) {
+    return;
+  }
+  editor.value.chain().focus().extendMarkRange("link").setLink({ href }).run();
+  linkEditor.value = null;
+}
+function onCancelLink() {
+  linkEditor.value = null;
+  editor.value?.chain().focus().run();
+}
+function onRemoveLink() {
+  if (!editor.value) {
+    return;
+  }
+  editor.value.chain().focus().extendMarkRange("link").unsetLink().run();
+  linkEditor.value = null;
+}
+onBeforeUnmount(() => {
+  editor.value?.destroy();
+});
+</script>
+
+<script>
+export default {
+  name: "RichText"
+};
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-richtext-panel-enter-active,
+.bk-richtext-panel-leave-active {
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --bk-tw-gradient-from, --bk-tw-gradient-via, --bk-tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-duration: 300ms;
+  transition-duration: 300ms;
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+}
+:is(.bk-richtext-panel-enter-active,.bk-richtext-panel-leave-active) .bk-richtext-panel-inner {
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --bk-tw-gradient-from, --bk-tw-gradient-via, --bk-tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-duration: 300ms;
+  transition-duration: 300ms;
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+}
+.bk-richtext-panel-enter-from,
+.bk-richtext-panel-leave-to {
+  opacity: 0%;
+}
+:is(.bk-richtext-panel-enter-from,.bk-richtext-panel-leave-to) .bk-richtext-panel-inner {
+  --bk-tw-scale-x: 90%;
+  --bk-tw-scale-y: 90%;
+  --bk-tw-scale-z: 90%;
+  scale: var(--bk-tw-scale-x) var(--bk-tw-scale-y);
+}
+</style>

package/dist/runtime/editor/components/RichText/Editor/index.vue.d.ts

@@ -0,0 +1,31 @@
+import { type MentionItem } from './SuggestionList/Mentions.vue.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    initialValue?: string;
+    getUsers?: () => Promise<MentionItem[]>;
+    autofocus?: boolean;
+    noBorder?: boolean;
+}, {
+    getHTML: () => string;
+    isEmpty: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: {
+        html: string;
+        isEmpty: boolean;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    initialValue?: string;
+    getUsers?: () => Promise<MentionItem[]>;
+    autofocus?: boolean;
+    noBorder?: boolean;
+}> & Readonly<{
+    onChange?: ((args_0: {
+        html: string;
+        isEmpty: boolean;
+    }) => any) | undefined;
+}>, {
+    initialValue: string;
+    autofocus: boolean;
+    getUsers: () => Promise<MentionItem[]>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/RichText/Renderer/enrichRichContent.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Rendered comments are stored in the simple author form
+ * `<li data-type="taskItem" data-checked="…"><p>…</p></li>`. For display we
+ * expand this to the full rich form (label + checkbox + content wrapper)
+ * that the editor uses, so the same CSS styles both contexts and the
+ * markup is ready for future non-owner toggling via an adapter method.
+ *
+ * Also normalises every `<a>` to open in a new window with safe `rel`.
+ *
+ * Pure DOM transform; safe to call on already-enriched HTML (idempotent).
+ */
+export declare function enrichRichContent(html: string): string;

package/dist/runtime/editor/components/RichText/Renderer/enrichRichContent.js

@@ -0,0 +1,42 @@
+export function enrichRichContent(html) {
+  if (!html) {
+    return html;
+  }
+  const hasTaskItem = html.includes('data-type="taskItem"');
+  const hasLink = html.includes("<a ");
+  if (!hasTaskItem && !hasLink) {
+    return html;
+  }
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  if (hasTaskItem) {
+    for (const li of doc.body.querySelectorAll('li[data-type="taskItem"]')) {
+      if (li.querySelector(":scope > label")) {
+        continue;
+      }
+      const checked = li.getAttribute("data-checked") === "true";
+      const existingChildren = Array.from(li.childNodes);
+      li.replaceChildren();
+      const label = doc.createElement("label");
+      label.setAttribute("contenteditable", "false");
+      const input = doc.createElement("input");
+      input.type = "checkbox";
+      if (checked) {
+        input.setAttribute("checked", "checked");
+      }
+      const span = doc.createElement("span");
+      label.append(input, span);
+      const wrap = doc.createElement("div");
+      for (const node of existingChildren) {
+        wrap.appendChild(node);
+      }
+      li.append(label, wrap);
+    }
+  }
+  if (hasLink) {
+    for (const a of doc.body.querySelectorAll("a")) {
+      a.setAttribute("target", "_blank");
+      a.setAttribute("rel", "noopener noreferrer");
+    }
+  }
+  return doc.body.innerHTML;
+}

package/dist/runtime/editor/components/RichText/Renderer/index.d.vue.ts

@@ -0,0 +1,23 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    body: string;
+    /**
+     * When true, checkboxes inside task lists are interactive and emit
+     * `toggleTask` with the index of the clicked task item.
+     */
+    taskTogglable?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    toggleTask: (taskIndex: number) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    body: string;
+    /**
+     * When true, checkboxes inside task lists are interactive and emit
+     * `toggleTask` with the index of the clicked task item.
+     */
+    taskTogglable?: boolean;
+}> & Readonly<{
+    onToggleTask?: ((taskIndex: number) => any) | undefined;
+}>, {
+    taskTogglable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;