@dialpad/dialtone-vue 2.126.0 → 2.127.1

package/dist/lib/rich-text-editor.cjs

@@ -0,0 +1,1139 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue2 = require("@tiptap/vue-2");
+const Blockquote = require("@tiptap/extension-blockquote");
+const CodeBlock = require("@tiptap/extension-code-block");
+const Document = require("@tiptap/extension-document");
+const HardBreak = require("@tiptap/extension-hard-break");
+const Paragraph = require("@tiptap/extension-paragraph");
+const Placeholder = require("@tiptap/extension-placeholder");
+const Bold = require("@tiptap/extension-bold");
+const BulletList = require("@tiptap/extension-bullet-list");
+const Italic = require("@tiptap/extension-italic");
+const TipTapLink = require("@tiptap/extension-link");
+const ListItem = require("@tiptap/extension-list-item");
+const OrderedList = require("@tiptap/extension-ordered-list");
+const Strike = require("@tiptap/extension-strike");
+const Underline = require("@tiptap/extension-underline");
+const Text = require("@tiptap/extension-text");
+const TextAlign = require("@tiptap/extension-text-align");
+const core = require("@tiptap/core");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const lib_emoji = require("./emoji.cjs");
+const common_emoji = require("../common/emoji.cjs");
+const state = require("@tiptap/pm/state");
+const Suggestion = require("@tiptap/suggestion");
+const dialtoneEmojis = require("@dialpad/dialtone-emojis");
+const lib_listItem = require("./list-item.cjs");
+const lib_stack = require("./stack.cjs");
+const tippy = require("tippy.js");
+const common_utils = require("../common/utils.cjs");
+const Mention = require("@tiptap/extension-mention");
+const lib_link = require("./link.cjs");
+const lib_avatar = require("./avatar.cjs");
+require("./skeleton.cjs");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+require("emoji-regex");
+require("emoji-toolkit/emoji_strategy.json");
+require("../chunks/list_item_constants-EiqkqZvP.js");
+require("./item-layout.cjs");
+require("./icon.cjs");
+require("@dialpad/dialtone-icons/vue2");
+require("../chunks/stack_constants-SMzMWnAQ.js");
+require("../common/constants.cjs");
+require("vue");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("./presence.cjs");
+const _sfc_main$5 = {
+  name: "EmojiComponent",
+  components: {
+    NodeViewWrapper: vue2.NodeViewWrapper,
+    DtEmoji: lib_emoji.DtEmoji
+  },
+  props: vue2.nodeViewProps
+};
+var _sfc_render$5 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("node-view-wrapper", { staticClass: "d-d-inline-block d-va-bottom d-lh0" }, [_c("dt-emoji", { attrs: { "size": "500", "code": _vm.node.attrs.code } })], 1);
+};
+var _sfc_staticRenderFns$5 = [];
+var __component__$5 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$5,
+  _sfc_render$5,
+  _sfc_staticRenderFns$5,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const EmojiComponent = __component__$5.exports;
+const _sfc_main$4 = {
+  name: "SuggestionList",
+  components: {
+    DtListItem: lib_listItem.DtListItem
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    command: {
+      type: Function,
+      required: true
+    },
+    itemComponent: {
+      type: Object,
+      required: true
+    },
+    itemType: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      selectedIndex: 0
+    };
+  },
+  watch: {
+    items() {
+      this.selectedIndex = 0;
+    }
+  },
+  methods: {
+    onKeyDown({ event }) {
+      if (event.key === "ArrowUp") {
+        this.upHandler();
+        return true;
+      }
+      if (event.key === "ArrowDown") {
+        this.downHandler();
+        return true;
+      }
+      if (event.key === "Enter" || event.key === "Tab") {
+        event.preventDefault();
+        this.selectHandler();
+        event.stopPropagation();
+        return true;
+      }
+      return false;
+    },
+    upHandler() {
+      this.selectedIndex = (this.selectedIndex + this.items.length - 1) % this.items.length;
+      this.scrollActiveElementIntoView();
+    },
+    downHandler() {
+      this.selectedIndex = (this.selectedIndex + 1) % this.items.length;
+      this.scrollActiveElementIntoView();
+    },
+    scrollActiveElementIntoView() {
+      const activeElement = this.$refs.suggestionList.querySelector(".dt-list-item--highlighted");
+      if (activeElement) {
+        activeElement.scrollIntoView({
+          behaviour: "smooth",
+          block: "center"
+        });
+      }
+    },
+    selectHandler() {
+      this.selectItem(this.selectedIndex);
+    },
+    selectItem(index) {
+      const item = this.items[index];
+      switch (this.itemType) {
+        case "emoji":
+          this.command(item);
+          return;
+        case "mention":
+          this.command({ name: item.name, id: item.id, avatarSrc: item.avatarSrc });
+          break;
+      }
+    }
+  }
+};
+var _sfc_render$4 = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "d-popover__dialog" }, [_c("ul", { directives: [{ name: "show", rawName: "v-show", value: _vm.items.length, expression: "items.length" }], ref: "suggestionList", staticClass: "dt-suggestion-list" }, _vm._l(_vm.items, function(item, index) {
+    return _c("dt-list-item", { key: item.id, class: [
+      "dt-suggestion-list--item",
+      { "dt-list-item--highlighted": index === _vm.selectedIndex }
+    ], attrs: { "navigation-type": "arrow-keys" }, on: { "click": function($event) {
+      return _vm.selectItem(index);
+    }, "keydown": function($event) {
+      $event.preventDefault();
+      $event.stopPropagation();
+      return _vm.onKeyDown.apply(null, arguments);
+    } } }, [_c(_vm.itemComponent, { tag: "component", attrs: { "item": item } })], 1);
+  }), 1)]);
+};
+var _sfc_staticRenderFns$4 = [];
+var __component__$4 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$4,
+  _sfc_render$4,
+  _sfc_staticRenderFns$4,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const SuggestionList = __component__$4.exports;
+const _sfc_main$3 = {
+  name: "EmojiSuggestion",
+  components: {
+    DtEmoji: lib_emoji.DtEmoji,
+    DtStack: lib_stack.DtStack
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  }
+};
+var _sfc_render$3 = function render3() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("dt-stack", { attrs: { "direction": "row", "gap": "400" } }, [_c("dt-emoji", { attrs: { "size": "200", "code": _vm.item.code } }), _vm._v(" " + _vm._s(_vm.item.code) + " ")], 1);
+};
+var _sfc_staticRenderFns$3 = [];
+var __component__$3 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$3,
+  _sfc_render$3,
+  _sfc_staticRenderFns$3,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const EmojiSuggestion = __component__$3.exports;
+const suggestionOptions = {
+  items: ({ query }) => {
+    if (query.length < 2) {
+      return [];
+    }
+    const emojiList = Object.values(dialtoneEmojis.emojisIndexed);
+    const filteredEmoji = emojiList.filter(function(item) {
+      if (item.shortname.substring(1, item.shortname.length - 1).startsWith(query.toLowerCase())) {
+        return true;
+      }
+      return false;
+    });
+    return filteredEmoji.map((item) => {
+      return { id: item.unicode_character, code: item.shortname };
+    });
+  },
+  command: ({ editor, range, props }) => {
+    var _a, _b;
+    const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+    const overrideSpace = (_a = nodeAfter == null ? void 0 : nodeAfter.text) == null ? void 0 : _a.startsWith(" ");
+    if (overrideSpace) {
+      range.to += 1;
+    }
+    editor.chain().focus().insertContentAt(range, [
+      {
+        type: "emoji",
+        attrs: props
+      },
+      {
+        type: "text",
+        text: " "
+      }
+    ]).run();
+    (_b = window.getSelection()) == null ? void 0 : _b.collapseToEnd();
+  },
+  render: () => {
+    let component;
+    let popup;
+    return {
+      onStart: (props) => {
+        component = new vue2.VueRenderer(SuggestionList, {
+          parent: void 0,
+          propsData: {
+            itemComponent: EmojiSuggestion,
+            itemType: "emoji",
+            ...props
+          },
+          editor: props.editor
+        });
+        if (!props.clientRect) {
+          return;
+        }
+        popup = tippy("body", {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.body,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: "manual",
+          placement: "top-start",
+          contentElement: null,
+          zIndex: 650
+        });
+      },
+      onUpdate(props) {
+        component.updateProps(props);
+        if (!props.clientRect) {
+          return;
+        }
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect
+        });
+      },
+      onKeyDown(props) {
+        var _a;
+        if (props.event.key === "Escape") {
+          popup[0].hide();
+          return true;
+        }
+        return (_a = component.ref) == null ? void 0 : _a.onKeyDown(props);
+      },
+      onExit() {
+        popup[0].destroy();
+        component.destroy();
+      }
+    };
+  }
+};
+const EmojiPluginKey = new state.PluginKey("emoji");
+const inputShortCodeRegex = /:\w+:$/;
+const pasteShortCodeRegex = /:\w+:/g;
+const inputUnicodeRegex = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])$/;
+const pasteUnicodeRegex = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g;
+const inputRuleMatch = (match) => {
+  if (match && common_emoji.codeToEmojiData(match[0])) {
+    return {
+      index: match.index,
+      text: match[0],
+      match
+    };
+  }
+};
+const shortCodePasteMatch = (text) => {
+  const matches = [...text.matchAll(pasteShortCodeRegex)];
+  return matches.filter((match) => common_emoji.codeToEmojiData(match[0])).map((match) => ({
+    index: match.index,
+    text: match[0],
+    match
+  }));
+};
+const Emoji = core.Node.create({
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      suggestion: {
+        char: ":",
+        pluginKey: EmojiPluginKey
+      }
+    };
+  },
+  name: "emoji",
+  group: "inline",
+  inline: true,
+  selectable: true,
+  addNodeView() {
+    return vue2.VueNodeViewRenderer(EmojiComponent);
+  },
+  addAttributes() {
+    return {
+      code: {
+        default: null
+      },
+      id: {
+        default: null
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "emoji-component"
+      }
+    ];
+  },
+  renderText({ node }) {
+    return node.attrs.code;
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["emoji-component", core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+  },
+  addInputRules() {
+    return [
+      // shortcode input
+      core.nodeInputRule({
+        find: (text) => {
+          const match = text.match(inputShortCodeRegex);
+          return inputRuleMatch(match);
+        },
+        type: this.type,
+        getAttributes(attrs) {
+          return {
+            code: attrs[0]
+          };
+        }
+      }),
+      core.nodeInputRule({
+        find: (text) => {
+          const match = text.match(inputUnicodeRegex);
+          return inputRuleMatch(match);
+        },
+        type: this.type,
+        getAttributes(attrs) {
+          const unicode = common_emoji.shortcodeToEmojiData(attrs[0]).unicode_output;
+          const emoji = String.fromCodePoint(parseInt(unicode, 16));
+          return {
+            code: emoji,
+            label: "emoji"
+          };
+        }
+      })
+    ];
+  },
+  addPasteRules() {
+    return [
+      core.nodePasteRule({
+        find: shortCodePasteMatch,
+        type: this.type,
+        getAttributes(attrs) {
+          return {
+            code: attrs[0]
+          };
+        }
+      }),
+      core.nodePasteRule({
+        find: pasteUnicodeRegex,
+        type: this.type,
+        getAttributes(attrs) {
+          return {
+            code: attrs[0]
+          };
+        }
+      })
+    ];
+  },
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion,
+        ...suggestionOptions
+      })
+    ];
+  }
+});
+function getRegexMatches(text, regex, validator = () => true) {
+  const matches = [];
+  regex.lastIndex = 0;
+  let match;
+  while (match = regex.exec(text)) {
+    if (validator(text, match)) {
+      matches.push(match);
+    }
+  }
+  return matches;
+}
+function hasValidPrefix(text, match) {
+  return !["#", "@"].includes(text.charAt(match.index)) && !["#", "@"].includes(text.charAt(match.index - 1));
+}
+function trimEndPunctiation(string) {
+  const endPunctuationRegex = new RegExp(
+    "(?:" + [
+      `[!?.,:;'"]`,
+      "(?:&|&amp;)(?:lt|gt|quot|apos|raquo|laquo|rsaquo|lsaquo);)+$"
+    ].join("|"),
+    "g"
+  );
+  return string.replace(endPunctuationRegex, "");
+}
+function getWordAt(text, index) {
+  const left = text.slice(0, index + 1).search(/\S+\s*$/);
+  const right = text.slice(index).search(/\s/);
+  if (right < 0) {
+    const word = text.slice(left);
+    return {
+      text: word,
+      from: left,
+      to: left + word.length
+    };
+  }
+  return {
+    text: text.slice(left, right + index),
+    from: left,
+    to: right + index
+  };
+}
+function getWordAtUntil(text, index, direction, regex) {
+  const word = getWordAt(text, index);
+  regex.lastIndex = 0;
+  if (!regex.test(word.text)) {
+    return word;
+  }
+  const newIndex = direction === "left" ? word.from - 1 : word.to + 1;
+  if (newIndex <= 0 || newIndex >= text.length || newIndex === index) {
+    return word;
+  }
+  return getWordAtUntil(text, newIndex, direction, regex);
+}
+function removeMarks(range, doc, tr, type) {
+  const from = Math.max(range.from - 1, 0);
+  const to = Math.min(range.to + 1, doc.content.size);
+  const marksInRange = core.getMarksBetween(from, to, doc);
+  for (const mark of marksInRange) {
+    if (mark.mark.type !== type) {
+      continue;
+    }
+    tr.removeMark(mark.from, mark.to, type);
+  }
+}
+const partialPhoneNumberRegex = common_utils.getPhoneNumberRegex(1, 15);
+function addMarks(text, pos, from, to, tr, type) {
+  if (!text) {
+    return;
+  }
+  let rangeFrom = from - pos - 1;
+  rangeFrom = rangeFrom < 0 ? 0 : rangeFrom;
+  const rangeTo = to - pos;
+  const firstWordInRange = getWordAtUntil(
+    text,
+    rangeFrom,
+    "left",
+    partialPhoneNumberRegex
+  );
+  const lastWordInRange = getWordAtUntil(
+    text,
+    rangeTo,
+    "right",
+    partialPhoneNumberRegex
+  );
+  const wordsInRange = text.slice(firstWordInRange.from, lastWordInRange.to);
+  const matches = getRegexMatches(wordsInRange, common_utils.linkRegex, hasValidPrefix);
+  matches.forEach((match) => {
+    const word = trimEndPunctiation(match[0]);
+    const from2 = pos + firstWordInRange.from + match.index + 1;
+    const to2 = from2 + word.length;
+    tr.addMark(from2, to2, type.create());
+  });
+}
+function autolink(options) {
+  let hasInitialized = false;
+  return new state.Plugin({
+    key: new state.PluginKey("autolink"),
+    appendTransaction: (transactions, oldState, newState) => {
+      const contentChanged = transactions.some((tr2) => tr2.docChanged) && !oldState.doc.eq(newState.doc);
+      if (hasInitialized && !contentChanged) {
+        return;
+      }
+      const { tr } = newState;
+      const { textContent } = newState.doc;
+      if (!hasInitialized) {
+        addMarks(textContent, 0, 0, textContent.length, tr, options.type);
+      }
+      hasInitialized = true;
+      const transform = core.combineTransactionSteps(
+        oldState.doc,
+        [...transactions]
+      );
+      const changes = core.getChangedRanges(transform);
+      changes.forEach(({ oldRange, newRange }) => {
+        removeMarks(newRange, newState.doc, tr, options.type);
+        const paragraphs = core.findChildrenInRange(
+          newState.doc,
+          newRange,
+          (node) => node.isTextblock
+        );
+        paragraphs.forEach(({ node, pos }) => {
+          addMarks(
+            node.textContent,
+            pos,
+            oldRange.from,
+            newRange.to,
+            tr,
+            options.type
+          );
+        });
+      });
+      return tr;
+    }
+  });
+}
+const defaultAttributes = {
+  class: "d-link d-c-text d-d-inline-block",
+  rel: "noopener noreferrer nofollow"
+};
+const Link = core.Mark.create({
+  name: "Link",
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "a",
+      core.mergeAttributes(
+        this.options.HTMLAttributes,
+        HTMLAttributes,
+        defaultAttributes
+      ),
+      0
+    ];
+  },
+  renderText({ node }) {
+    return node.attrs.text;
+  },
+  addProseMirrorPlugins() {
+    return [
+      autolink({ type: this.type })
+    ];
+  }
+});
+const _sfc_main$2 = {
+  name: "MentionComponent",
+  components: {
+    NodeViewWrapper: vue2.NodeViewWrapper,
+    DtLink: lib_link.DtLink
+  },
+  props: vue2.nodeViewProps,
+  computed: {
+    text() {
+      return "@" + this.$props.node.attrs.name;
+    }
+  }
+};
+var _sfc_render$2 = function render4() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("node-view-wrapper", { staticClass: "d-d-inline-block" }, [_c("dt-link", { attrs: { "kind": "mention" } }, [_vm._v(" " + _vm._s(_vm.text) + " ")])], 1);
+};
+var _sfc_staticRenderFns$2 = [];
+var __component__$2 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const MentionComponent = __component__$2.exports;
+const MentionPlugin = Mention.extend({
+  addNodeView() {
+    return vue2.VueNodeViewRenderer(MentionComponent);
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "mention-component"
+      }
+    ];
+  },
+  addAttributes() {
+    return {
+      name: {
+        default: ""
+      },
+      avatarSrc: {
+        default: ""
+      },
+      id: {
+        default: ""
+      }
+    };
+  },
+  renderText({ node }) {
+    return `@${node.attrs.id}`;
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["mention-component", core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  }
+});
+const RICH_TEXT_EDITOR_OUTPUT_FORMATS = [
+  "text",
+  "json",
+  "html"
+];
+const RICH_TEXT_EDITOR_AUTOFOCUS_TYPES = [
+  "start",
+  "end",
+  "all"
+];
+const RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS = [
+  "https",
+  "http",
+  "ftp",
+  "ftps",
+  "sftp",
+  "mailto"
+];
+const _sfc_main$1 = {
+  name: "MentionSuggestion",
+  components: {
+    DtAvatar: lib_avatar.DtAvatar,
+    DtStack: lib_stack.DtStack
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    name() {
+      return this.item.name;
+    },
+    avatarSrc() {
+      return this.item.avatarSrc;
+    }
+  }
+};
+var _sfc_render$1 = function render5() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("dt-stack", { attrs: { "direction": "row", "gap": "400" } }, [_c("dt-avatar", { attrs: { "full-name": _vm.name, "image-src": _vm.avatarSrc, "image-alt": _vm.name, "size": "xs" } }), _vm._v(" " + _vm._s(_vm.name) + " ")], 1);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const MentionSuggestion = __component__$1.exports;
+const suggestion = {
+  // This function comes from the user and passed to the editor directly.
+  // This will also activate the mention plugin on the editor
+  // items: ({ query }) => { return [] },
+  allowSpaces: true,
+  render: () => {
+    let component;
+    let popup;
+    return {
+      onStart: (props) => {
+        component = new vue2.VueRenderer(SuggestionList, {
+          parent: void 0,
+          propsData: {
+            itemComponent: MentionSuggestion,
+            itemType: "mention",
+            ...props
+          },
+          editor: props.editor
+        });
+        if (!props.clientRect) {
+          return;
+        }
+        popup = tippy("body", {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.body,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: "manual",
+          placement: "top-start"
+        });
+      },
+      onUpdate(props) {
+        component.updateProps(props);
+        if (!props.clientRect) {
+          return;
+        }
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect
+        });
+      },
+      onKeyDown(props) {
+        if (props.event.key === "Escape") {
+          popup[0].hide();
+          return true;
+        }
+        return component == null ? void 0 : component.ref.onKeyDown(props);
+      },
+      onExit() {
+        popup[0].destroy();
+        component.destroy();
+      }
+    };
+  }
+};
+const _sfc_main = {
+  name: "DtRichTextEditor",
+  components: {
+    EditorContent: vue2.EditorContent
+  },
+  props: {
+    /**
+     * Value of the input. The object format should match TipTap's JSON
+     * document structure: https://tiptap.dev/guide/output#option-1-json
+     */
+    value: {
+      type: [Object, String],
+      default: ""
+    },
+    /**
+     * Whether the input is editable
+     */
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for line breaks to be introduced in the text.
+     */
+    allowLineBreaks: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Descriptive label for the input element
+     */
+    inputAriaLabel: {
+      type: String,
+      required: true
+    },
+    /**
+     * Additional class name for the input element. Only accepts a String value
+     * because this is passed to the editor via options. For multiple classes,
+     * join them into one string, e.g. "d-p8 d-hmx96"
+     */
+    inputClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Whether the input should receive focus after the component has been
+     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.
+     * - `start`  Sets the focus to the beginning of the input
+     * - `end`    Sets the focus to the end of the input
+     * - `all`    Selects the whole contents of the input
+     * - `Number` Sets the focus to a specific position in the input
+     * - `true`   Defaults to `start`
+     * - `false`  Disables autofocus
+     * @values true, false, start, end, all, number
+     */
+    autoFocus: {
+      type: [Boolean, String, Number],
+      default: false,
+      validator(autoFocus) {
+        if (typeof autoFocus === "string") {
+          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);
+        }
+        return true;
+      }
+    },
+    /**
+     * The output format that the editor uses when emitting the "@input" event.
+     * One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for
+     * examples.
+     * @values text, json, html
+     */
+    outputFormat: {
+      type: String,
+      default: "text",
+      validator(outputFormat) {
+        return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);
+      }
+    },
+    /**
+     * Placeholder text
+     */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Enables the Link extension and optionally passes configurations to it
+     */
+    link: {
+      type: [Boolean, Object],
+      default: false
+    },
+    /**
+     * suggestion object containing the items query function.
+     * The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
+     *
+     * The only required key is the items function which is used to query the contacts for suggestion.
+     * items({ query }) => { return [ContactObject]; }
+     * ContactObject format:
+     * { name: string, avatarSrc: string, id: string }
+     *
+     * When null, it does not add the plugin.
+     */
+    mentionSuggestion: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Whether the input allows for block quote.
+     */
+    allowBlockquote: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for bold to be introduced in the text.
+     */
+    allowBold: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for bullet list to be introduced in the text.
+    */
+    allowBulletList: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for italic to be introduced in the text.
+     */
+    allowItalic: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for strike to be introduced in the text.
+     */
+    allowStrike: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Whether the input allows for underline to be introduced in the text.
+     */
+    allowUnderline: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: [
+    /**
+     * Editor input event
+     * @event input
+     * @type {String|JSON}
+     */
+    "input",
+    /**
+     * Event to sync the value with the parent
+     * @event input
+     * @type {String|JSON}
+     */
+    "update:value",
+    /**
+     * Editor blur event
+     * @event blur
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Editor focus event
+     * @event focus
+     * @type {FocusEvent}
+     */
+    "focus"
+  ],
+  data() {
+    return {
+      editor: null,
+      popoverOpened: false
+    };
+  },
+  computed: {
+    // eslint-disable-next-line complexity
+    extensions() {
+      const extensions = [Document, Paragraph, Text];
+      if (this.link) {
+        extensions.push(this.getExtension(Link, this.link));
+      }
+      if (this.allowBlockquote) {
+        extensions.push(Blockquote);
+      }
+      if (this.allowBold) {
+        extensions.push(Bold);
+      }
+      if (this.allowBulletList) {
+        extensions.push(BulletList);
+        extensions.push(ListItem);
+        extensions.push(OrderedList.configure({
+          itemTypeName: "listItem"
+        }));
+      }
+      if (this.allowItalic) {
+        extensions.push(Italic);
+      }
+      if (this.allowStrike) {
+        extensions.push(Strike);
+      }
+      if (this.allowUnderline) {
+        extensions.push(Underline);
+      }
+      extensions.push(
+        Placeholder.configure({ placeholder: this.placeholder })
+      );
+      if (!this.allowLineBreaks) {
+        extensions.push(
+          HardBreak.extend({
+            addKeyboardShortcuts() {
+              return {
+                Enter: () => true,
+                "Shift-Enter": () => this.editor.commands.first(({ commands }) => [
+                  () => commands.newlineInCode(),
+                  () => commands.createParagraphNear(),
+                  () => commands.liftEmptyBlock(),
+                  () => commands.splitBlock()
+                ])
+              };
+            }
+          })
+        );
+      }
+      extensions.push(TipTapLink.extend({ inclusive: false }).configure({
+        autolink: true,
+        protocols: RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS
+      }));
+      if (this.mentionSuggestion) {
+        const suggestionObject = { ...this.mentionSuggestion, ...suggestion };
+        extensions.push(MentionPlugin.configure({ suggestion: suggestionObject }));
+      }
+      extensions.push(Emoji);
+      extensions.push(TextAlign.configure({
+        types: ["paragraph"],
+        defaultAlignment: "left"
+      }));
+      extensions.push(CodeBlock.configure({
+        HTMLAttributes: {
+          class: "dt-rich-text-editor--code-block"
+        }
+      }));
+      return extensions;
+    },
+    inputAttrs() {
+      const attrs = {
+        "aria-label": this.inputAriaLabel,
+        "aria-multiline": true,
+        role: "textbox"
+      };
+      if (!this.editable) {
+        attrs["aria-readonly"] = true;
+      }
+      return attrs;
+    }
+  },
+  /**
+    * Because the Editor instance is initialized when mounted it does not get
+    * updated props automatically, so the ones that can change after mount have
+    * to be hooked up to the Editor's own API.
+    */
+  watch: {
+    editable(isEditable) {
+      this.editor.setEditable(isEditable);
+      this.updateEditorAttributes({ "aria-readonly": !isEditable });
+    },
+    inputClass(newClass) {
+      this.updateEditorAttributes({ class: newClass });
+    },
+    inputAriaLabel(newLabel) {
+      this.updateEditorAttributes({ "aria-label": newLabel });
+    },
+    extensions() {
+      this.destroyEditor();
+      this.createEditor();
+    },
+    value(newValue) {
+      let currentValue = this.getOutput();
+      if (this.outputFormat === "json") {
+        newValue = JSON.stringify(newValue);
+        currentValue = JSON.stringify(currentValue);
+      }
+      if (newValue === currentValue) {
+        return;
+      }
+      this.editor.commands.setContent(newValue, false);
+    }
+  },
+  created() {
+    this.createEditor();
+  },
+  beforeUnmount() {
+    this.destroyEditor();
+  },
+  methods: {
+    createEditor() {
+      this.editor = new vue2.Editor({
+        autofocus: this.autoFocus,
+        content: this.value,
+        editable: this.editable,
+        extensions: this.extensions,
+        editorProps: {
+          attributes: {
+            ...this.inputAttrs,
+            class: this.inputClass
+          }
+        }
+      });
+      this.addEditorListeners();
+    },
+    destroyEditor() {
+      this.editor.destroy();
+    },
+    /**
+     * The Editor exposes event hooks that we have to map our emits into. See
+     * https://tiptap.dev/api/events for all events.
+     */
+    addEditorListeners() {
+      this.editor.on("update", () => {
+        const value = this.getOutput();
+        this.$emit("input", value);
+        this.$emit("update:value", value);
+      });
+      this.editor.on("focus", ({ event }) => {
+        this.$emit("focus", event);
+      });
+      this.editor.on("blur", ({ event }) => {
+        this.$emit("blur", event);
+      });
+    },
+    getOutput() {
+      switch (this.outputFormat) {
+        case "json":
+          return this.editor.getJSON();
+        case "html":
+          return this.editor.getHTML();
+        case "text":
+        default:
+          return this.editor.getText();
+      }
+    },
+    getExtension(extension, options) {
+      var _a;
+      if (typeof options === "boolean") {
+        return extension;
+      }
+      return (_a = extension.configure) == null ? void 0 : _a.call(extension, options);
+    },
+    updateEditorAttributes(attributes) {
+      this.editor.setOptions({ editorProps: { attributes } });
+    },
+    focusEditor() {
+      this.editor.commands.focus();
+    }
+  }
+};
+var _sfc_render = function render6() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("editor-content", { staticClass: "dt-rich-text-editor", attrs: { "editor": _vm.editor, "data-qa": "dt-rich-text-editor" } });
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const DtRichTextEditor = __component__.exports;
+exports.DtRichTextEditor = DtRichTextEditor;
+exports.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES = RICH_TEXT_EDITOR_AUTOFOCUS_TYPES;
+exports.RICH_TEXT_EDITOR_OUTPUT_FORMATS = RICH_TEXT_EDITOR_OUTPUT_FORMATS;
+//# sourceMappingURL=rich-text-editor.cjs.map