@knime/kds-rich-text-editor 0.30.4

package/dist/index.js

@@ -0,0 +1,917 @@
+import { defineComponent, ref, watch, nextTick, computed, openBlock, createBlock, unref, withCtx, createElementVNode, normalizeClass, createVNode, createCommentVNode, onMounted, onUnmounted, createElementBlock, Fragment, renderSlot, renderList, withModifiers, withKeys, useCssVars, useSlots, useModel, useId, Transition, mergeProps, toHandlers, mergeModels } from 'vue';
+import CharacterCount from '@tiptap/extension-character-count';
+import StarterKit from '@tiptap/starter-kit';
+import { Extension, useEditor, EditorContent } from '@tiptap/vue-3';
+import { KdsModal, KdsButton, KdsTextInput, KdsToggleButton, KdsMenuButton, KdsSubText } from '@knime/kds-components';
+import HardBreak from '@tiptap/extension-hard-break';
+import { getAttributes } from '@tiptap/core';
+import Link from '@tiptap/extension-link';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import TextAlign from '@tiptap/extension-text-align';
+import Paragraph from '@tiptap/extension-paragraph';
+
+import './index.css';const isMac = () => navigator?.userAgent?.toLowerCase()?.includes("mac");
+
+const getMetaOrCtrlKey = () => {
+  return isMac() ? "metaKey" : "ctrlKey";
+};
+
+const ExternalLinkIconUrl = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='currentColor'%20stroke-linecap='round'%20stroke-linejoin='round'%20viewBox='0%200%2012%2012'%3e%3cpath%20d='M5.5%201.5h-3a1%201%200%200%200-1%201v7a1%201%200%200%200%201%201h7a1%201%200%200%200%201-1v-3m0-5L6%205.892M10.5%201.5v2.75m0-2.75H7.75'%20vector-effect='non-scaling-stroke'/%3e%3c/svg%3e";
+
+const _hoisted_1$2 = { class: "controls-apply-group" };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "KdsCreateLinkModal",
+  props: {
+    text: {},
+    url: {},
+    isActive: {},
+    isEdit: {},
+    urlValidator: { type: Function }
+  },
+  emits: ["addLink", "removeLink", "cancelAddLink"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const inputRef = ref(null);
+    const editedText = ref(props.text.value);
+    const editedUrl = ref(props.url.value);
+    watch(
+      () => props.isActive.value,
+      async (isOpen) => {
+        if (!isOpen) {
+          return;
+        }
+        editedText.value = props.text.value;
+        editedUrl.value = props.url.value;
+        await nextTick();
+        requestAnimationFrame(() => {
+          inputRef.value?.focus();
+        });
+      }
+    );
+    const emit = __emit;
+    const closeModal = () => {
+      emit("cancelAddLink");
+    };
+    const onSubmit = () => {
+      emit("addLink", editedText.value, editedUrl.value);
+    };
+    const validateUrl = () => {
+      const validScheme = props.urlValidator(editedUrl.value);
+      return !editedUrl.value || validScheme;
+    };
+    const isValid = computed(() => {
+      const textChanged = editedText.value !== props.text.value;
+      const urlChanged = editedUrl.value !== props.url.value;
+      const urlNotEmpty = editedUrl.value !== "";
+      return (textChanged || urlChanged) && validateUrl() && urlNotEmpty;
+    });
+    const onkeyup = (keyupEvent) => {
+      if (keyupEvent.key === "Enter" && isValid.value) {
+        onSubmit();
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(KdsModal), {
+        active: __props.isActive.value,
+        headline: __props.isEdit.value ? "Edit link" : "Insert link",
+        class: "modal",
+        onClose: closeModal
+      }, {
+        body: withCtx(() => [
+          createVNode(unref(KdsTextInput), {
+            ref_key: "inputRef",
+            ref: inputRef,
+            modelValue: editedText.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => editedText.value = $event),
+            label: "Link text",
+            type: "text",
+            onKeyup: onkeyup
+          }, null, 8, ["modelValue"]),
+          createVNode(unref(KdsTextInput), {
+            modelValue: editedUrl.value,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => editedUrl.value = $event),
+            label: "URL",
+            "sub-text": !validateUrl() ? "Enter a valid URL (e.g. https://example.com)" : "",
+            error: !validateUrl(),
+            "preserve-sub-text-space": true,
+            onKeyup: onkeyup
+          }, null, 8, ["modelValue", "sub-text", "error"])
+        ]),
+        footer: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass(["modal-footer", { "spread-buttons": __props.isEdit.value }])
+          }, [
+            createVNode(unref(KdsButton), {
+              variant: __props.isEdit.value ? "transparent" : "outlined",
+              size: "small",
+              label: "Cancel",
+              onClick: closeModal
+            }, null, 8, ["variant"]),
+            createElementVNode("div", _hoisted_1$2, [
+              __props.isEdit.value ? (openBlock(), createBlock(unref(KdsButton), {
+                key: 0,
+                variant: "outlined",
+                size: "small",
+                label: "Remove URL",
+                onClick: _cache[2] || (_cache[2] = ($event) => emit("removeLink"))
+              })) : createCommentVNode("", true),
+              createVNode(unref(KdsButton), {
+                variant: "filled",
+                size: "small",
+                label: __props.isEdit.value ? "Apply" : "Insert link",
+                disabled: !isValid.value,
+                onClick: onSubmit
+              }, null, 8, ["label", "disabled"])
+            ])
+          ], 2)
+        ]),
+        _: 1
+      }, 8, ["active", "headline"]);
+    };
+  }
+});
+
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const KdsCreateLinkModal = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-5b224eb0"]]);
+
+const clearHeading = (editor) => {
+  const maxLevel = 6;
+  for (let i = 1; i <= maxLevel; i++) {
+    if (editor.isActive("heading", { level: i })) {
+      editor.chain().focus().toggleHeading({ level: i }).run();
+      break;
+    }
+  }
+};
+const getHeadingOptionChild = (level, getEditor) => ({
+  id: `${level}`,
+  text: `Heading ${level}`,
+  hotkey: ["Ctrl", "Alt", `${level}`],
+  active: () => getEditor().isActive("heading", { level }),
+  handler: () => {
+    const editor = getEditor();
+    editor.chain().focus().toggleHeading({ level }).run();
+  }
+});
+const getParagraphTextStyleTool = (getEditor) => {
+  return {
+    id: "paragraphTextStyle",
+    type: "secondary",
+    icon: "textstyles",
+    text: "Text style",
+    children: [
+      {
+        id: "standard",
+        text: "Standard",
+        hotkey: ["Ctrl", "Alt", "0"],
+        handler: () => {
+          const editor = getEditor();
+          clearHeading(editor);
+          editor.chain().focus().unsetSmallText().run();
+        }
+      },
+      {
+        id: "small",
+        text: "Small text",
+        hotkey: ["Ctrl", "Alt", "−"],
+        // this is a wider minus character for aesthetic reasons
+        active: () => getEditor().isActive({ smallText: true }),
+        handler: () => {
+          const editor = getEditor();
+          clearHeading(editor);
+          editor.chain().focus().setSmallText().run();
+        }
+      },
+      ...Array.from(
+        { length: 6 },
+        (_, i) => getHeadingOptionChild(i + 1, getEditor)
+      )
+    ]
+  };
+};
+
+const useLinkTool = ({
+  editor,
+  isRegistered,
+  linkToolOptions
+}) => {
+  if (!isRegistered) {
+    return null;
+  }
+  const isActive = ref(false);
+  const text = ref("");
+  const url = ref("");
+  const isEdit = computed(() => url.value !== "");
+  const isReplacingText = ref(false);
+  const onLinkToolClick = () => {
+    const { view, state } = editor;
+    const { from, to } = view.state.selection;
+    const currentLink = editor.getAttributes("link").href;
+    url.value = currentLink || "";
+    if (currentLink) {
+      const hasSelection = from !== to;
+      if (hasSelection) {
+        const newCursorPosition = from + Math.floor((to - from) / 2);
+        editor.chain().focus().setTextSelection(newCursorPosition).run();
+      }
+      const textBefore = view.state.selection.$from.nodeBefore?.textContent ?? "";
+      const textAfter = view.state.selection.$to.nodeAfter?.textContent ?? "";
+      text.value = textBefore + textAfter;
+    } else {
+      text.value = state.doc.textBetween(from, to, "");
+    }
+    isReplacingText.value = Boolean(currentLink || text.value);
+    isActive.value = true;
+  };
+  const onRemoveLink = () => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    isActive.value = false;
+    isReplacingText.value = false;
+  };
+  const addCustomLink = ({
+    isEditing,
+    url: url2,
+    urlText,
+    text: text2
+  }) => {
+    if (isEditing) {
+      editor.chain().focus().setLink({ href: url2 }).command(({ tr }) => {
+        tr.insertText(text2 || urlText);
+        return true;
+      }).run();
+    } else {
+      const { view } = editor;
+      const { from: startIndex } = view.state.selection;
+      editor.chain().focus().insertContent([{ type: "text", text: " " }]).run();
+      editor.chain().focus().insertContentAt(startIndex, [{ type: "text", text: text2 || urlText }]).run();
+      const { from: endIndex } = view.state.selection;
+      editor.commands.setTextSelection({
+        from: startIndex,
+        to: endIndex
+      });
+      editor.chain().focus().setLink({ href: url2 }).run();
+    }
+  };
+  const onAddLink = (text2, urlText) => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    if (urlText) {
+      const url2 = linkToolOptions.sanitizeUrlText?.(urlText) ?? urlText;
+      addCustomLink({
+        isEditing: isReplacingText.value,
+        urlText,
+        url: url2,
+        text: text2
+      });
+    }
+    isActive.value = false;
+    isReplacingText.value = false;
+  };
+  const onCancelAddLink = () => {
+    isActive.value = false;
+    isReplacingText.value = false;
+  };
+  const onKeyDown = (event) => {
+    if (!editor?.isFocused) {
+      return;
+    }
+    const ctrlPressed = event[getMetaOrCtrlKey()];
+    if (ctrlPressed && event.key === "k") {
+      event.preventDefault();
+      onLinkToolClick();
+    }
+  };
+  onMounted(() => {
+    window.addEventListener("keydown", onKeyDown);
+  });
+  onUnmounted(() => {
+    window.removeEventListener("keydown", onKeyDown);
+  });
+  return {
+    onLinkToolClick,
+    props: {
+      url,
+      text,
+      isActive,
+      isEdit,
+      urlValidator: linkToolOptions.urlValidator
+    },
+    events: {
+      addLink: onAddLink,
+      removeLink: onRemoveLink,
+      cancelAddLink: onCancelAddLink
+    }
+  };
+};
+
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "RichTextEditorBaseToolbar",
+  props: {
+    editor: {},
+    baseExtensions: {},
+    linkToolOptions: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const registerTool = (toolName, tool) => {
+      if ("all" in props.baseExtensions) {
+        return [tool];
+      }
+      return props.baseExtensions[toolName] ? [tool] : [];
+    };
+    const isToolRegistered = (toolName) => {
+      if ("all" in props.baseExtensions) {
+        return true;
+      }
+      return Boolean(props.baseExtensions[toolName]);
+    };
+    const isListActive = () => props.editor.isActive("orderedList") || props.editor.isActive("bulletList");
+    const linkTool = useLinkTool({
+      editor: props.editor,
+      isRegistered: isToolRegistered("link"),
+      linkToolOptions: props.linkToolOptions
+    });
+    const editorTools = [
+      ...registerTool("bold", {
+        id: "bold",
+        type: "primary",
+        text: "Bold",
+        hotkey: ["Ctrl", "B"],
+        icon: "bold",
+        active: () => props.editor.isActive("bold"),
+        handler: () => props.editor.chain().focus().toggleBold().run()
+      }),
+      ...registerTool("italic", {
+        id: "italic",
+        type: "primary",
+        text: "Italic",
+        icon: "italic",
+        hotkey: ["Ctrl", "I"],
+        active: () => props.editor.isActive("italic"),
+        handler: () => props.editor.chain().focus().toggleItalic().run()
+      }),
+      ...registerTool("underline", {
+        id: "underline",
+        type: "primary",
+        text: "Underline",
+        icon: "underline",
+        hotkey: ["Ctrl", "U"],
+        active: () => props.editor.isActive("underline"),
+        handler: () => props.editor.chain().focus().toggleUnderline().run()
+      }),
+      ...registerTool("bulletList", {
+        id: "bulletList",
+        type: "primary",
+        text: "Bullet list",
+        icon: "list-bulletpoint",
+        hotkey: ["Ctrl", "Shift", "8"],
+        active: () => props.editor.isActive("bulletList"),
+        handler: () => {
+          const commandChain = props.editor.chain().focus();
+          if (isToolRegistered("textAlign")) {
+            commandChain.setTextAlign("left");
+          }
+          commandChain.toggleBulletList().run();
+        }
+      }),
+      ...registerTool("orderedList", {
+        id: "orderedList",
+        type: "primary",
+        text: "Ordered list",
+        icon: "list-number",
+        hotkey: ["Ctrl", "Shift", "7"],
+        active: () => props.editor.isActive("orderedList"),
+        handler: () => {
+          const commandChain = props.editor.chain().focus();
+          if (isToolRegistered("textAlign")) {
+            commandChain.setTextAlign("left");
+          }
+          commandChain.toggleOrderedList().run();
+        }
+      }),
+      ...registerTool("textAlign", {
+        id: "align-left",
+        type: "primary",
+        icon: "left-aligned",
+        text: "Align left",
+        hotkey: ["Ctrl", "Shift", "L"],
+        active: () => !isListActive() && props.editor.isActive({ textAlign: "left" }),
+        handler: () => props.editor.chain().focus().setTextAlign("left").run(),
+        disabled: () => isListActive()
+      }),
+      ...registerTool("textAlign", {
+        id: "align-center",
+        type: "primary",
+        icon: "center-aligned",
+        text: "Align center",
+        hotkey: ["Ctrl", "Shift", "E"],
+        active: () => !isListActive() && props.editor.isActive({ textAlign: "center" }),
+        handler: () => props.editor.chain().focus().setTextAlign("center").run(),
+        disabled: () => isListActive()
+      }),
+      ...registerTool("textAlign", {
+        id: "align-right",
+        type: "primary",
+        icon: "right-aligned",
+        text: "Align right",
+        hotkey: ["Ctrl", "Shift", "R"],
+        active: () => !isListActive() && props.editor.isActive({ textAlign: "right" }),
+        handler: () => props.editor.chain().focus().setTextAlign("right").run(),
+        disabled: () => isListActive()
+      }),
+      ...registerTool("link", {
+        id: "link",
+        type: "primary",
+        icon: "link",
+        text: "Link",
+        hotkey: ["Ctrl", "K"],
+        active: () => props.editor.isActive("link"),
+        handler: () => linkTool?.onLinkToolClick()
+      }),
+      ...registerTool(
+        "paragraphTextStyle",
+        getParagraphTextStyleTool(() => props.editor)
+      ),
+      ...registerTool("blockquote", {
+        id: "blockquote",
+        type: "secondary",
+        icon: "quote",
+        text: "Blockquote",
+        active: () => props.editor.isActive("blockquote"),
+        handler: () => props.editor.chain().focus().toggleBlockquote().run()
+      }),
+      ...registerTool("codeBlock", {
+        id: "codeBlock",
+        type: "secondary",
+        icon: "code-block",
+        text: "Code block",
+        hotkey: ["Ctrl", "Alt", "C"],
+        active: () => props.editor.isActive("codeBlock"),
+        handler: () => props.editor.chain().focus().toggleCodeBlock().run()
+      }),
+      ...registerTool("strike", {
+        id: "strikethrough",
+        type: "secondary",
+        icon: "strikethrough",
+        text: "Strikethrough",
+        hotkey: ["Ctrl", "Shift", "X"],
+        active: () => props.editor.isActive("strike"),
+        handler: () => props.editor.chain().focus().toggleStrike().run()
+      }),
+      ...registerTool("horizontalRule", {
+        id: "horizontalRule",
+        type: "secondary",
+        icon: "divider",
+        text: "Divider",
+        active: () => false,
+        handler: () => props.editor.chain().focus().setHorizontalRule().run()
+      })
+    ];
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        renderSlot(_ctx.$slots, "default", { tools: editorTools }),
+        renderSlot(_ctx.$slots, "linkModal", { linkTool: unref(linkTool) })
+      ], 64);
+    };
+  }
+});
+
+const _hoisted_1$1 = { class: "tools" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "RichTextEditorToolbar",
+  props: {
+    editor: {},
+    tools: {},
+    hotkeyFormatter: { type: Function }
+  },
+  setup(__props) {
+    const props = __props;
+    const baseTools = computed(
+      () => props.tools.filter(
+        ({ type }) => type === "primary"
+      )
+    );
+    const secondaryTools = computed(
+      () => props.tools.filter(
+        ({ type }) => type === "secondary"
+      )
+    );
+    const secondaryToolsMenuItems = computed(() => {
+      const tools = secondaryTools.value.map((tool) => {
+        const base = {
+          id: tool.id,
+          text: tool.text,
+          disabled: tool.disabled?.(),
+          shortcut: props.hotkeyFormatter(tool.hotkey ?? []),
+          accessory: {
+            type: "icon",
+            name: tool.icon
+          }
+        };
+        if (tool.children) {
+          return {
+            ...base,
+            children: tool.children.map((toolChild) => {
+              return {
+                id: toolChild.id,
+                text: toolChild.text,
+                shortcut: props.hotkeyFormatter(toolChild.hotkey ?? []),
+                handler: () => toolChild.handler(toolChild.id)
+              };
+            })
+          };
+        }
+        return {
+          ...base,
+          handler: () => tool.handler(tool.id)
+        };
+      });
+      return tools;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(baseTools.value, (tool) => {
+          return openBlock(), createBlock(unref(KdsToggleButton), {
+            key: tool.id,
+            class: "tool",
+            ariaLabel: tool.text,
+            "data-testid": tool.id,
+            disabled: tool.disabled?.(),
+            toggled: tool.active?.(),
+            "leading-icon": tool.icon,
+            title: __props.hotkeyFormatter(tool.hotkey ?? []),
+            variant: "transparent",
+            size: "small",
+            onKeydown: withKeys(withModifiers(($event) => tool.handler?.(tool.id), ["prevent"]), ["enter"]),
+            onClick: withModifiers(($event) => tool.handler?.(tool.id), ["stop"])
+          }, null, 8, ["ariaLabel", "data-testid", "disabled", "toggled", "leading-icon", "title", "onKeydown", "onClick"]);
+        }), 128)),
+        secondaryTools.value.length > 0 ? (openBlock(), createBlock(unref(KdsMenuButton), {
+          key: 0,
+          items: secondaryToolsMenuItems.value,
+          "leading-icon": "more-actions",
+          ariaLabel: "More actions",
+          variant: "transparent",
+          size: "small"
+        }, null, 8, ["items"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+
+const RichTextEditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-f4d33607"]]);
+
+const CustomEscape = Extension.create({
+  name: "OverrideEscape",
+  addOptions() {
+    return {
+      handler: () => false
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      Escape: this.options.handler
+    };
+  }
+});
+
+const CustomHardBreak = HardBreak.extend({
+  addKeyboardShortcuts() {
+    return {
+      "Shift-Enter": () => this.editor.commands.setHardBreak()
+    };
+  }
+});
+
+const buildUrlRegex = () => {
+  const httpPrefixCheck = "(http://www\\.|https://www\\.|http://|https://)";
+  const urlCheck = "[a-z0-9]+([-.]{1}[a-z0-9]+)*\\.[a-z]{2,5}(:[0-9]{1,5})?(/.*)?";
+  return new RegExp(`^${httpPrefixCheck}?${urlCheck}$`);
+};
+const URL_REGEX = buildUrlRegex();
+const validateURL = (href) => URL_REGEX.test(href);
+const kdsDefaultLinkToolOptions = {
+  urlValidator: validateURL,
+  sanitizeUrlText: (urlText) => {
+    const containsHttp = ["http://", "https://"].some(
+      (protocol) => urlText.includes(protocol)
+    );
+    return containsHttp ? urlText : `https://${urlText}`;
+  }
+};
+const CustomLink = Link.extend({
+  addAttributes() {
+    const modifier = isMac() ? "⌘" : "Ctrl +";
+    return {
+      ...this.parent?.(),
+      draggable: {
+        default: "false"
+      },
+      title: {
+        default: `Use "${modifier} click" to follow link`
+      },
+      rel: {
+        default: "ugc noopener noreferrer nofollow"
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    const plugins = this.parent?.() || [];
+    const ctrlClickHandler = new Plugin({
+      key: new PluginKey("handleControlClick"),
+      props: {
+        handleClick(view, _pos, event) {
+          const attrs = getAttributes(view.state, "link");
+          const link = event.target?.closest("a");
+          const metaOrCtrlKeyPressed = event[getMetaOrCtrlKey()];
+          if (metaOrCtrlKeyPressed && link && attrs.href) {
+            window.open(attrs.href, attrs.target);
+          }
+          return true;
+        }
+      }
+    });
+    plugins.push(ctrlClickHandler);
+    return plugins;
+  }
+});
+
+const CustomTextAlign = TextAlign.extend({
+  addKeyboardShortcuts() {
+    const canActivate = () => {
+      return !(this.editor.isActive("bulletList") || this.editor.isActive("orderedList"));
+    };
+    return {
+      "Mod-Shift-l": () => canActivate() && this.editor.commands.setTextAlign("left"),
+      "Mod-Shift-e": () => canActivate() && this.editor.commands.setTextAlign("center"),
+      "Mod-Shift-r": () => canActivate() && this.editor.commands.setTextAlign("right")
+    };
+  }
+});
+
+const SmallText = Paragraph.extend({
+  addAttributes() {
+    const smallTextClass = "small-text";
+    return {
+      ...this.parent?.(),
+      smallText: {
+        default: false,
+        parseHTML: (element) => element.className === smallTextClass,
+        renderHTML: (attributes) => {
+          return attributes.smallText ? {
+            class: smallTextClass
+          } : {};
+        }
+      }
+    };
+  },
+  addCommands() {
+    return {
+      ...this.parent?.(),
+      setSmallText: () => ({ commands }) => {
+        return commands.toggleNode(this.name, "paragraph", {
+          smallText: true
+        });
+      },
+      unsetSmallText: () => ({ chain }) => {
+        return chain().updateAttributes(this.name, { smallText: false }).run();
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      ...this.parent?.(),
+      "Mod-Alt--": () => this.editor.commands.setSmallText()
+    };
+  }
+});
+
+const _hoisted_1 = { key: 0 };
+const MIN_CHARACTER_LIMIT = 200;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "KdsRichTextEditor",
+  props: /* @__PURE__ */ mergeModels({
+    editable: { type: Boolean, default: true },
+    minHeight: { default: null },
+    maxHeight: { default: null },
+    baseExtensions: { default: () => ({}) },
+    hotkeyFormatter: { type: Function, default: (hotkey) => {
+      const MacOSkeyMap = {
+        Shift: "⇧",
+        Ctrl: "⌘",
+        Alt: "⌥"
+      };
+      const mapSymbols = (key) => MacOSkeyMap[key] || key;
+      const identityFn = (value) => value;
+      return hotkey.map(isMac() ? mapSymbols : identityFn).join(" ");
+    } },
+    customExtensions: { default: () => [] },
+    autofocus: { type: Boolean, default: false },
+    withBorder: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    linkToolOptions: { default: () => kdsDefaultLinkToolOptions },
+    characterLimit: { default: 1e3 },
+    showCharacterCount: { type: Boolean, default: false },
+    customEscapeHandler: { type: Function, default: void 0 },
+    ariaLabel: { default: () => void 0 },
+    ariaLabelledby: { default: () => void 0 }
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["blur"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "f4686d76": maxHeightStyle.value,
+      "a618f0d2": minHeightStyle.value,
+      "c15f49ba": externalIcon
+    }));
+    const hardCharacterLimit = Math.max(__props.characterLimit, MIN_CHARACTER_LIMIT);
+    const slots = useSlots();
+    const externalIcon = `url("${ExternalLinkIconUrl}")`;
+    const modelValue = useModel(__props, "modelValue");
+    const emit = __emit;
+    const isToolEnabled = (extensionName) => {
+      if ("all" in __props.baseExtensions) {
+        return true;
+      }
+      return Boolean(__props.baseExtensions[extensionName]);
+    };
+    const getStarterKitExtensionConfig = (extensionName) => {
+      return isToolEnabled(extensionName) ? void 0 : false;
+    };
+    const extensions = [
+      StarterKit.configure({
+        bold: getStarterKitExtensionConfig("bold"),
+        italic: getStarterKitExtensionConfig("italic"),
+        bulletList: getStarterKitExtensionConfig("bulletList"),
+        orderedList: getStarterKitExtensionConfig("orderedList"),
+        heading: getStarterKitExtensionConfig("heading"),
+        blockquote: getStarterKitExtensionConfig("blockquote"),
+        code: getStarterKitExtensionConfig("code"),
+        codeBlock: getStarterKitExtensionConfig("codeBlock"),
+        horizontalRule: getStarterKitExtensionConfig("horizontalRule"),
+        strike: getStarterKitExtensionConfig("strike"),
+        underline: getStarterKitExtensionConfig("underline"),
+        ...isToolEnabled("paragraphTextStyle") && { paragraph: false },
+        hardBreak: false,
+        // StarterKit v3 bundles a link extension, but we register our own
+        // CustomLink (opt-in via baseExtensions) for the custom validation,
+        // attributes and ctrl/cmd-click handling, so the bundled one is disabled
+        // to avoid a duplicate-extension conflict.
+        link: false
+      }),
+      ...isToolEnabled("paragraphTextStyle") ? [SmallText] : [],
+      ...isToolEnabled("textAlign") ? [
+        CustomTextAlign.configure({
+          types: [
+            isToolEnabled("heading") ? "heading" : "",
+            "paragraph"
+          ].filter(Boolean),
+          alignments: ["left", "right", "center"]
+        })
+      ] : [],
+      ...isToolEnabled("link") ? [CustomLink.configure({ validate: validateURL, openOnClick: false })] : [],
+      CustomHardBreak,
+      CharacterCount.configure({
+        limit: hardCharacterLimit
+      }),
+      ...__props.customEscapeHandler ? [CustomEscape.configure({ handler: __props.customEscapeHandler })] : [],
+      ...__props.customExtensions
+    ];
+    const editor = useEditor({
+      content: modelValue.value,
+      editable: __props.editable && !__props.disabled,
+      autofocus: __props.autofocus,
+      extensions,
+      editorProps: {
+        attributes: {
+          ...__props.ariaLabel ? { "aria-label": __props.ariaLabel } : {},
+          ...__props.ariaLabelledby ? { "aria-labelledby": __props.ariaLabelledby } : {}
+        }
+      },
+      onUpdate: () => {
+        modelValue.value = editor.value?.getHTML() ?? "";
+      },
+      onBlur: () => emit("blur")
+    });
+    const minHeightStyle = computed(
+      () => __props.minHeight ? `${__props.minHeight}px` : "initial"
+    );
+    const focus = () => {
+      editor.value?.commands?.focus?.();
+    };
+    __expose({ focus });
+    const maxHeightStyle = computed(
+      () => __props.maxHeight ? `${__props.maxHeight}px` : "initial"
+    );
+    watch(modelValue, (newValue) => {
+      if (!editor.value) {
+        return;
+      }
+      if (editor.value.getHTML() === newValue) {
+        return;
+      }
+      editor.value.commands.setContent(newValue ?? "");
+    });
+    watch(
+      [() => __props.editable, () => __props.disabled],
+      ([newEditable, newDisabled], [oldEditable, oldDisabled]) => {
+        if (!editor.value) {
+          return;
+        }
+        const oldValue = oldEditable && !oldDisabled;
+        const newValue = newEditable && !newDisabled;
+        if (oldValue === newValue) {
+          return;
+        }
+        editor.value.setEditable(newValue);
+        if (__props.autofocus) {
+          focus();
+        }
+      }
+    );
+    onMounted(async () => {
+      if (__props.editable && __props.autofocus) {
+        await nextTick();
+        focus();
+      }
+    });
+    const hasCustomToolbar = slots.customToolbar;
+    const hasTools = computed(() => Object.keys(__props.baseExtensions).length);
+    const characterCountId = useId();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createElementVNode("div", {
+          class: normalizeClass(["editor-wrapper", { "with-border": __props.withBorder, disabled: __props.disabled }])
+        }, [
+          hasTools.value ? (openBlock(), createBlock(Transition, {
+            key: 0,
+            name: "expand",
+            css: !unref(hasCustomToolbar)
+          }, {
+            default: withCtx(() => [
+              unref(editor) && __props.editable && !__props.disabled ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass([
+                  "toolbar-wrapper",
+                  { "embedded-toolbar": !unref(hasCustomToolbar) }
+                ])
+              }, [
+                createVNode(_sfc_main$2, {
+                  editor: unref(editor),
+                  "base-extensions": __props.baseExtensions,
+                  "link-tool-options": __props.linkToolOptions
+                }, {
+                  default: withCtx(({ tools }) => [
+                    renderSlot(_ctx.$slots, "customToolbar", {
+                      editor: unref(editor),
+                      tools,
+                      hotkeyFormatter: __props.hotkeyFormatter
+                    }, () => [
+                      createVNode(RichTextEditorToolbar, {
+                        editor: unref(editor),
+                        tools,
+                        "hotkey-formatter": __props.hotkeyFormatter
+                      }, null, 8, ["editor", "tools", "hotkey-formatter"])
+                    ], true)
+                  ]),
+                  linkModal: withCtx(({ linkTool }) => [
+                    isToolEnabled("link") && linkTool ? (openBlock(), createBlock(KdsCreateLinkModal, mergeProps({ key: 0 }, linkTool.props, toHandlers(linkTool.events)), null, 16)) : createCommentVNode("", true)
+                  ]),
+                  _: 3
+                }, 8, ["editor", "base-extensions", "link-tool-options"])
+              ], 2)) : createCommentVNode("", true)
+            ]),
+            _: 3
+          }, 8, ["css"])) : createCommentVNode("", true),
+          createVNode(unref(EditorContent), {
+            class: normalizeClass(["rich-text-editor", { editable: __props.editable && !__props.disabled }]),
+            editor: unref(editor),
+            "aria-disabled": __props.disabled || void 0
+          }, null, 8, ["editor", "class", "aria-disabled"])
+        ], 2),
+        unref(editor) && __props.editable && __props.showCharacterCount ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createVNode(unref(KdsSubText), {
+            id: unref(characterCountId),
+            "sub-text": `${unref(editor).storage.characterCount.characters()} / ${unref(hardCharacterLimit)} characters`,
+            error: false,
+            validating: false,
+            "preserve-sub-text-space": true
+          }, null, 8, ["id", "sub-text"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+
+const KdsRichTextEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-06a9c7b9"]]);
+
+export { KdsCreateLinkModal, KdsRichTextEditor, kdsDefaultLinkToolOptions };
+//# sourceMappingURL=index.js.map