@dialpad/dialtone-vue 3.120.0 → 3.120.2

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

@@ -1,87 +1,90 @@
-import { NodeViewWrapper as A, nodeViewProps as L, VueRenderer as P, VueNodeViewRenderer as $, EditorContent as U, Editor as K } from "@tiptap/vue-3";
-import F from "@tiptap/extension-blockquote";
-import z from "@tiptap/extension-code-block";
-import W from "@tiptap/extension-document";
-import J from "@tiptap/extension-hard-break";
-import X from "@tiptap/extension-paragraph";
-import Y from "@tiptap/extension-placeholder";
-import G from "@tiptap/extension-bold";
-import Q from "@tiptap/extension-bullet-list";
-import Z from "@tiptap/extension-italic";
-import tt from "@tiptap/extension-link";
-import et from "@tiptap/extension-list-item";
-import ot from "@tiptap/extension-ordered-list";
-import nt from "@tiptap/extension-strike";
-import rt from "@tiptap/extension-underline";
-import it from "@tiptap/extension-text";
-import st from "@tiptap/extension-text-align";
-import { Node as at, mergeAttributes as x, nodeInputRule as R, nodePasteRule as S, getMarksBetween as ct, combineTransactionSteps as dt, getChangedRanges as ut, findChildrenInRange as lt, Mark as mt } from "@tiptap/core";
-import { resolveComponent as c, openBlock as d, createBlock as l, withCtx as m, createVNode as y, createElementBlock as C, withDirectives as pt, createElementVNode as ft, Fragment as ht, renderList as gt, normalizeClass as _t, withModifiers as yt, resolveDynamicComponent as wt, vShow as bt, createTextVNode as E, toDisplayString as T, markRaw as M } from "vue";
-import { _ as p } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { D as O, m as kt, o as B } from "../chunks/index-mRmwpCBG.js";
-import { PluginKey as D, Plugin as xt } from "@tiptap/pm/state";
-import Et from "@tiptap/suggestion";
-import { emojisIndexed as Tt } from "@dialpad/dialtone-emojis";
-import { DtListItem as Rt } from "./list-item.js";
-import { DtStack as H } from "./stack.js";
-import V from "tippy.js";
-import { linkRegex as St, getPhoneNumberRegex as Ct } from "./utils.js";
-import It from "@tiptap/extension-mention";
-import { DtLink as jt } from "./link.js";
-import { DtAvatar as vt } from "./avatar.js";
-import "emoji-regex";
+import { NodeViewWrapper, nodeViewProps, VueRenderer, VueNodeViewRenderer, EditorContent, Editor } from "@tiptap/vue-3";
+import Blockquote from "@tiptap/extension-blockquote";
+import CodeBlock from "@tiptap/extension-code-block";
+import Document from "@tiptap/extension-document";
+import HardBreak from "@tiptap/extension-hard-break";
+import Paragraph from "@tiptap/extension-paragraph";
+import Placeholder from "@tiptap/extension-placeholder";
+import Bold from "@tiptap/extension-bold";
+import BulletList from "@tiptap/extension-bullet-list";
+import Italic from "@tiptap/extension-italic";
+import TipTapLink from "@tiptap/extension-link";
+import ListItem from "@tiptap/extension-list-item";
+import OrderedList from "@tiptap/extension-ordered-list";
+import Strike from "@tiptap/extension-strike";
+import Underline from "@tiptap/extension-underline";
+import Text from "@tiptap/extension-text";
+import TextAlign from "@tiptap/extension-text-align";
+import { Node, mergeAttributes, nodeInputRule, nodePasteRule, getMarksBetween, combineTransactionSteps, getChangedRanges, findChildrenInRange, Mark } from "@tiptap/core";
+import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementBlock, withDirectives, createElementVNode, Fragment, renderList, normalizeClass, withModifiers, resolveDynamicComponent, vShow, createTextVNode, toDisplayString, markRaw } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import { DtEmoji } from "./emoji.js";
+import { shortcodeToEmojiData, codeToEmojiData } from "../common/emoji.js";
+import { PluginKey, Plugin } from "@tiptap/pm/state";
+import Suggestion from "@tiptap/suggestion";
+import { emojisIndexed } from "@dialpad/dialtone-emojis";
+import { DtListItem } from "./list-item.js";
+import { DtStack } from "./stack.js";
+import tippy from "tippy.js";
+import { linkRegex, getPhoneNumberRegex } from "../common/utils.js";
+import Mention from "@tiptap/extension-mention";
+import { DtLink } from "./link.js";
+import { DtAvatar } from "./avatar.js";
 import "./skeleton.js";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "../chunks/list_item_constants-LTUc74pD.js";
+import "emoji-regex";
+import "../chunks/list_item_constants-u1xcN9Dd.js";
 import "./item-layout.js";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/stack_constants-u7tNqGtc.js";
-import "./constants.js";
-import "../chunks/link_constants-vIUB92L4.js";
+import "../chunks/stack_constants-HraCekPm.js";
+import "../common/constants.js";
+import "../chunks/link_constants-nWVlXQBs.js";
 import "./presence.js";
-const At = {
+const _sfc_main$5 = {
   name: "EmojiComponent",
   components: {
-    NodeViewWrapper: A,
-    DtEmoji: O
+    NodeViewWrapper,
+    DtEmoji
   },
-  props: L
+  props: nodeViewProps
 };
-function Lt(t, e, o, n, r, i) {
-  const s = c("dt-emoji"), a = c("node-view-wrapper");
-  return d(), l(a, { class: "d-d-inline-block d-va-bottom d-lh0" }, {
-    default: m(() => [
-      y(s, {
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_emoji = resolveComponent("dt-emoji");
+  const _component_node_view_wrapper = resolveComponent("node-view-wrapper");
+  return openBlock(), createBlock(_component_node_view_wrapper, { class: "d-d-inline-block d-va-bottom d-lh0" }, {
+    default: withCtx(() => [
+      createVNode(_component_dt_emoji, {
         size: "500",
-        code: t.node.attrs.code
+        code: _ctx.node.attrs.code
       }, null, 8, ["code"])
     ]),
     _: 1
   });
 }
-const Pt = /* @__PURE__ */ p(At, [["render", Lt]]), $t = {
+const EmojiComponent = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
+const _sfc_main$4 = {
   name: "SuggestionList",
   components: {
-    DtListItem: Rt
+    DtListItem
   },
   props: {
     items: {
       type: Array,
-      required: !0
+      required: true
     },
     command: {
       type: Function,
-      required: !0
+      required: true
     },
     itemComponent: {
       type: Object,
-      required: !0
+      required: true
     },
     itemType: {
       type: String,
-      required: !0
+      required: true
     }
   },
   data() {
@@ -95,176 +98,244 @@ const Pt = /* @__PURE__ */ p(At, [["render", Lt]]), $t = {
     }
   },
   methods: {
-    onKeyDown({ event: t }) {
-      return t.key === "ArrowUp" ? (this.upHandler(), !0) : t.key === "ArrowDown" ? (this.downHandler(), !0) : t.key === "Enter" || t.key === "Tab" ? (t.preventDefault(), this.selectHandler(), t.stopPropagation(), !0) : !1;
+    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();
+      this.selectedIndex = (this.selectedIndex + this.items.length - 1) % this.items.length;
+      this.scrollActiveElementIntoView();
     },
     downHandler() {
-      this.selectedIndex = (this.selectedIndex + 1) % this.items.length, this.scrollActiveElementIntoView();
+      this.selectedIndex = (this.selectedIndex + 1) % this.items.length;
+      this.scrollActiveElementIntoView();
     },
     scrollActiveElementIntoView() {
-      const t = this.$refs.suggestionList.querySelector(".dt-list-item--highlighted");
-      t && t.scrollIntoView({
-        behaviour: "smooth",
-        block: "center"
-      });
+      const activeElement = this.$refs.suggestionList.querySelector(".dt-list-item--highlighted");
+      if (activeElement) {
+        activeElement.scrollIntoView({
+          behaviour: "smooth",
+          block: "center"
+        });
+      }
     },
     selectHandler() {
       this.selectItem(this.selectedIndex);
     },
-    selectItem(t) {
-      const e = this.items[t];
+    selectItem(index) {
+      const item = this.items[index];
       switch (this.itemType) {
         case "emoji":
-          this.command(e);
+          this.command(item);
           return;
         case "mention":
-          this.command({ name: e.name, id: e.id, avatarSrc: e.avatarSrc });
+          this.command({ name: item.name, id: item.id, avatarSrc: item.avatarSrc });
           break;
       }
     }
   }
-}, Mt = { class: "d-popover__dialog" }, Ot = {
+};
+const _hoisted_1 = { class: "d-popover__dialog" };
+const _hoisted_2 = {
   ref: "suggestionList",
   class: "dt-suggestion-list"
 };
-function Bt(t, e, o, n, r, i) {
-  const s = c("dt-list-item");
-  return d(), C("div", Mt, [
-    pt(ft("ul", Ot, [
-      (d(!0), C(ht, null, gt(o.items, (a, u) => (d(), l(s, {
-        key: a.id,
-        class: _t([
-          "dt-suggestion-list--item",
-          { "dt-list-item--highlighted": u === r.selectedIndex }
-        ]),
-        "navigation-type": "arrow-keys",
-        onClick: (w) => i.selectItem(u),
-        onKeydown: yt(i.onKeyDown, ["prevent", "stop"])
-      }, {
-        default: m(() => [
-          (d(), l(wt(o.itemComponent), { item: a }, null, 8, ["item"]))
-        ]),
-        _: 2
-      }, 1032, ["class", "onClick", "onKeydown"]))), 128))
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_list_item = resolveComponent("dt-list-item");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    withDirectives(createElementVNode("ul", _hoisted_2, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList($props.items, (item, index) => {
+        return openBlock(), createBlock(_component_dt_list_item, {
+          key: item.id,
+          class: normalizeClass([
+            "dt-suggestion-list--item",
+            { "dt-list-item--highlighted": index === $data.selectedIndex }
+          ]),
+          "navigation-type": "arrow-keys",
+          onClick: ($event) => $options.selectItem(index),
+          onKeydown: withModifiers($options.onKeyDown, ["prevent", "stop"])
+        }, {
+          default: withCtx(() => [
+            (openBlock(), createBlock(resolveDynamicComponent($props.itemComponent), { item }, null, 8, ["item"]))
+          ]),
+          _: 2
+        }, 1032, ["class", "onClick", "onKeydown"]);
+      }), 128))
     ], 512), [
-      [bt, o.items.length]
+      [vShow, $props.items.length]
     ])
   ]);
 }
-const q = /* @__PURE__ */ p($t, [["render", Bt]]), Dt = {
+const SuggestionList = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+const _sfc_main$3 = {
   name: "EmojiSuggestion",
   components: {
-    DtEmoji: O,
-    DtStack: H
+    DtEmoji,
+    DtStack
   },
   props: {
     item: {
       type: Object,
-      required: !0
+      required: true
     }
   }
 };
-function Ht(t, e, o, n, r, i) {
-  const s = c("dt-emoji"), a = c("dt-stack");
-  return d(), l(a, {
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_emoji = resolveComponent("dt-emoji");
+  const _component_dt_stack = resolveComponent("dt-stack");
+  return openBlock(), createBlock(_component_dt_stack, {
     direction: "row",
     gap: "400"
   }, {
-    default: m(() => [
-      y(s, {
+    default: withCtx(() => [
+      createVNode(_component_dt_emoji, {
         size: "200",
-        code: o.item.code
+        code: $props.item.code
       }, null, 8, ["code"]),
-      E(" " + T(o.item.code), 1)
+      createTextVNode(" " + toDisplayString($props.item.code), 1)
     ]),
     _: 1
   });
 }
-const Vt = /* @__PURE__ */ p(Dt, [["render", Ht]]), qt = {
-  items: ({ query: t }) => t.length < 2 ? [] : Object.values(Tt).filter(function(n) {
-    return !!n.shortname.substring(1, n.shortname.length - 1).startsWith(t.toLowerCase());
-  }).map((n) => ({ id: n.unicode_character, code: n.shortname })),
-  command: ({ editor: t, range: e, props: o }) => {
-    var i, s;
-    const n = t.view.state.selection.$to.nodeAfter;
-    ((i = n == null ? void 0 : n.text) == null ? void 0 : i.startsWith(" ")) && (e.to += 1), t.chain().focus().insertContentAt(e, [
+const EmojiSuggestion = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const suggestionOptions = {
+  items: ({ query }) => {
+    if (query.length < 2) {
+      return [];
+    }
+    const emojiList = Object.values(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: o
+        attrs: props
       },
       {
         type: "text",
         text: " "
       }
-    ]).run(), (s = window.getSelection()) == null || s.collapseToEnd();
+    ]).run();
+    (_b = window.getSelection()) == null ? void 0 : _b.collapseToEnd();
   },
   render: () => {
-    let t, e;
+    let component;
+    let popup;
     return {
-      onStart: (o) => {
-        t = new P(q, {
+      onStart: (props) => {
+        component = new VueRenderer(SuggestionList, {
           props: {
-            itemComponent: M(Vt),
+            itemComponent: markRaw(EmojiSuggestion),
             itemType: "emoji",
-            ...o
+            ...props
           },
-          editor: o.editor
-        }), o.clientRect && (e = V("body", {
-          getReferenceClientRect: o.clientRect,
+          editor: props.editor
+        });
+        if (!props.clientRect) {
+          return;
+        }
+        popup = tippy("body", {
+          getReferenceClientRect: props.clientRect,
           appendTo: () => document.body,
-          content: t.element,
-          showOnCreate: !0,
-          interactive: !0,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
           trigger: "manual",
           placement: "top-start",
           contentElement: null,
           zIndex: 650
-        }));
+        });
       },
-      onUpdate(o) {
-        t.updateProps(o), o.clientRect && e[0].setProps({
-          getReferenceClientRect: o.clientRect
+      onUpdate(props) {
+        component.updateProps(props);
+        if (!props.clientRect) {
+          return;
+        }
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect
         });
       },
-      onKeyDown(o) {
-        var n;
-        return o.event.key === "Escape" ? (e[0].hide(), !0) : (n = t.ref) == null ? void 0 : n.onKeyDown(o);
+      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() {
-        e[0].destroy(), t.destroy();
+        popup[0].destroy();
+        component.destroy();
       }
     };
   }
-}, Nt = new D("emoji"), Ut = /:\w+:$/, Kt = /:\w+:/g, Ft = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])$/, zt = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g, I = (t) => {
-  if (t && B(t[0]))
+};
+const EmojiPluginKey = new 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 && codeToEmojiData(match[0])) {
     return {
-      index: t.index,
-      text: t[0],
-      match: t
+      index: match.index,
+      text: match[0],
+      match
     };
-}, Wt = (t) => [...t.matchAll(Kt)].filter((o) => B(o[0])).map((o) => ({
-  index: o.index,
-  text: o[0],
-  match: o
-})), Jt = at.create({
+  }
+};
+const shortCodePasteMatch = (text) => {
+  const matches = [...text.matchAll(pasteShortCodeRegex)];
+  return matches.filter((match) => codeToEmojiData(match[0])).map((match) => ({
+    index: match.index,
+    text: match[0],
+    match
+  }));
+};
+const Emoji = Node.create({
   addOptions() {
     return {
       HTMLAttributes: {},
       suggestion: {
         char: ":",
-        pluginKey: Nt
+        pluginKey: EmojiPluginKey
       }
     };
   },
   name: "emoji",
   group: "inline",
-  inline: !0,
-  selectable: !0,
+  inline: true,
+  selectable: true,
   addNodeView() {
-    return $(Pt);
+    return VueNodeViewRenderer(EmojiComponent);
   },
   addAttributes() {
     return {
@@ -283,37 +354,38 @@ const Vt = /* @__PURE__ */ p(Dt, [["render", Ht]]), qt = {
       }
     ];
   },
-  renderText({ node: t }) {
-    return t.attrs.code;
+  renderText({ node }) {
+    return node.attrs.code;
   },
-  renderHTML({ HTMLAttributes: t }) {
-    return ["emoji-component", x(this.options.HTMLAttributes, t)];
+  renderHTML({ HTMLAttributes }) {
+    return ["emoji-component", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
   },
   addInputRules() {
     return [
       // shortcode input
-      R({
-        find: (t) => {
-          const e = t.match(Ut);
-          return I(e);
+      nodeInputRule({
+        find: (text) => {
+          const match = text.match(inputShortCodeRegex);
+          return inputRuleMatch(match);
         },
         type: this.type,
-        getAttributes(t) {
+        getAttributes(attrs) {
           return {
-            code: t[0]
+            code: attrs[0]
           };
         }
       }),
-      R({
-        find: (t) => {
-          const e = t.match(Ft);
-          return I(e);
+      nodeInputRule({
+        find: (text) => {
+          const match = text.match(inputUnicodeRegex);
+          return inputRuleMatch(match);
         },
         type: this.type,
-        getAttributes(t) {
-          const e = kt(t[0]).unicode_output;
+        getAttributes(attrs) {
+          const unicode = shortcodeToEmojiData(attrs[0]).unicode_output;
+          const emoji = String.fromCodePoint(parseInt(unicode, 16));
           return {
-            code: String.fromCodePoint(parseInt(e, 16)),
+            code: emoji,
             label: "emoji"
           };
         }
@@ -322,21 +394,21 @@ const Vt = /* @__PURE__ */ p(Dt, [["render", Ht]]), qt = {
   },
   addPasteRules() {
     return [
-      S({
-        find: Wt,
+      nodePasteRule({
+        find: shortCodePasteMatch,
         type: this.type,
-        getAttributes(t) {
+        getAttributes(attrs) {
           return {
-            code: t[0]
+            code: attrs[0]
           };
         }
       }),
-      S({
-        find: zt,
+      nodePasteRule({
+        find: pasteUnicodeRegex,
         type: this.type,
-        getAttributes(t) {
+        getAttributes(attrs) {
           return {
-            code: t[0]
+            code: attrs[0]
           };
         }
       })
@@ -344,162 +416,196 @@ const Vt = /* @__PURE__ */ p(Dt, [["render", Ht]]), qt = {
   },
   addProseMirrorPlugins() {
     return [
-      Et({
+      Suggestion({
         editor: this.editor,
         ...this.options.suggestion,
-        ...qt
+        ...suggestionOptions
       })
     ];
   }
 });
-function Xt(t, e, o = () => !0) {
-  const n = [];
-  e.lastIndex = 0;
-  let r;
-  for (; r = e.exec(t); )
-    o(t, r) && n.push(r);
-  return n;
+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 Yt(t, e) {
-  return !["#", "@"].includes(t.charAt(e.index)) && !["#", "@"].includes(t.charAt(e.index - 1));
+function hasValidPrefix(text, match) {
+  return !["#", "@"].includes(text.charAt(match.index)) && !["#", "@"].includes(text.charAt(match.index - 1));
 }
-function Gt(t) {
-  const e = new RegExp(
+function trimEndPunctiation(string) {
+  const endPunctuationRegex = new RegExp(
     "(?:" + [
       `[!?.,:;'"]`,
       "(?:&|&amp;)(?:lt|gt|quot|apos|raquo|laquo|rsaquo|lsaquo);)+$"
     ].join("|"),
     "g"
   );
-  return t.replace(e, "");
+  return string.replace(endPunctuationRegex, "");
 }
-function Qt(t, e) {
-  const o = t.slice(0, e + 1).search(/\S+\s*$/), n = t.slice(e).search(/\s/);
-  if (n < 0) {
-    const r = t.slice(o);
+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: r,
-      from: o,
-      to: o + r.length
+      text: word,
+      from: left,
+      to: left + word.length
     };
   }
   return {
-    text: t.slice(o, n + e),
-    from: o,
-    to: n + e
+    text: text.slice(left, right + index),
+    from: left,
+    to: right + index
   };
 }
-function k(t, e, o, n) {
-  const r = Qt(t, e);
-  if (n.lastIndex = 0, !n.test(r.text))
-    return r;
-  const i = o === "left" ? r.from - 1 : r.to + 1;
-  return i <= 0 || i >= t.length || i === e ? r : k(t, i, o, n);
+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 Zt(t, e, o, n) {
-  const r = Math.max(t.from - 1, 0), i = Math.min(t.to + 1, e.content.size), s = ct(r, i, e);
-  for (const a of s)
-    a.mark.type === n && o.removeMark(a.from, a.to, n);
+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 = getMarksBetween(from, to, doc);
+  for (const mark of marksInRange) {
+    if (mark.mark.type !== type) {
+      continue;
+    }
+    tr.removeMark(mark.from, mark.to, type);
+  }
 }
-const j = Ct(1, 15);
-function v(t, e, o, n, r, i) {
-  if (!t)
+const partialPhoneNumberRegex = getPhoneNumberRegex(1, 15);
+function addMarks(text, pos, from, to, tr, type) {
+  if (!text) {
     return;
-  let s = o - e - 1;
-  s = s < 0 ? 0 : s;
-  const a = n - e, u = k(
-    t,
-    s,
+  }
+  let rangeFrom = from - pos - 1;
+  rangeFrom = rangeFrom < 0 ? 0 : rangeFrom;
+  const rangeTo = to - pos;
+  const firstWordInRange = getWordAtUntil(
+    text,
+    rangeFrom,
     "left",
-    j
-  ), w = k(
-    t,
-    a,
+    partialPhoneNumberRegex
+  );
+  const lastWordInRange = getWordAtUntil(
+    text,
+    rangeTo,
     "right",
-    j
-  ), f = t.slice(u.from, w.to);
-  Xt(f, St, Yt).forEach((b) => {
-    const h = Gt(b[0]), _ = e + u.from + b.index + 1, N = _ + h.length;
-    r.addMark(_, N, i.create());
+    partialPhoneNumberRegex
+  );
+  const wordsInRange = text.slice(firstWordInRange.from, lastWordInRange.to);
+  const matches = getRegexMatches(wordsInRange, 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 te(t) {
-  let e = !1;
-  return new xt({
-    key: new D("autolink"),
-    appendTransaction: (o, n, r) => {
-      const i = o.some((f) => f.docChanged) && !n.doc.eq(r.doc);
-      if (e && !i)
+function autolink(options) {
+  let hasInitialized = false;
+  return new Plugin({
+    key: new PluginKey("autolink"),
+    appendTransaction: (transactions, oldState, newState) => {
+      const contentChanged = transactions.some((tr2) => tr2.docChanged) && !oldState.doc.eq(newState.doc);
+      if (hasInitialized && !contentChanged) {
         return;
-      const { tr: s } = r, { textContent: a } = r.doc;
-      e || v(a, 0, 0, a.length, s, t.type), e = !0;
-      const u = dt(
-        n.doc,
-        [...o]
+      }
+      const { tr } = newState;
+      const { textContent } = newState.doc;
+      if (!hasInitialized) {
+        addMarks(textContent, 0, 0, textContent.length, tr, options.type);
+      }
+      hasInitialized = true;
+      const transform = combineTransactionSteps(
+        oldState.doc,
+        [...transactions]
       );
-      return ut(u).forEach(({ oldRange: f, newRange: g }) => {
-        Zt(g, r.doc, s, t.type), lt(
-          r.doc,
-          g,
-          (h) => h.isTextblock
-        ).forEach(({ node: h, pos: _ }) => {
-          v(
-            h.textContent,
-            _,
-            f.from,
-            g.to,
-            s,
-            t.type
+      const changes = getChangedRanges(transform);
+      changes.forEach(({ oldRange, newRange }) => {
+        removeMarks(newRange, newState.doc, tr, options.type);
+        const paragraphs = findChildrenInRange(
+          newState.doc,
+          newRange,
+          (node) => node.isTextblock
+        );
+        paragraphs.forEach(({ node, pos }) => {
+          addMarks(
+            node.textContent,
+            pos,
+            oldRange.from,
+            newRange.to,
+            tr,
+            options.type
           );
         });
-      }), s;
+      });
+      return tr;
     }
   });
 }
-const ee = {
+const defaultAttributes = {
   class: "d-link d-c-text d-d-inline-block",
   rel: "noopener noreferrer nofollow"
-}, oe = mt.create({
+};
+const Link = Mark.create({
   name: "Link",
-  renderHTML({ HTMLAttributes: t }) {
+  renderHTML({ HTMLAttributes }) {
     return [
       "a",
-      x(
+      mergeAttributes(
         this.options.HTMLAttributes,
-        t,
-        ee
+        HTMLAttributes,
+        defaultAttributes
       ),
       0
     ];
   },
-  renderText({ node: t }) {
-    return t.attrs.text;
+  renderText({ node }) {
+    return node.attrs.text;
   },
   addProseMirrorPlugins() {
     return [
-      te({ type: this.type })
+      autolink({ type: this.type })
     ];
   }
-}), ne = {
+});
+const _sfc_main$2 = {
   name: "MentionComponent",
   components: {
-    NodeViewWrapper: A,
-    DtLink: jt
+    NodeViewWrapper,
+    DtLink
   },
-  props: L,
+  props: nodeViewProps,
   computed: {
     text() {
       return "@" + this.$props.node.attrs.name;
     }
   }
 };
-function re(t, e, o, n, r, i) {
-  const s = c("dt-link"), a = c("node-view-wrapper");
-  return d(), l(a, { class: "d-d-inline-block" }, {
-    default: m(() => [
-      y(s, { kind: "mention" }, {
-        default: m(() => [
-          E(T(i.text), 1)
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_link = resolveComponent("dt-link");
+  const _component_node_view_wrapper = resolveComponent("node-view-wrapper");
+  return openBlock(), createBlock(_component_node_view_wrapper, { class: "d-d-inline-block" }, {
+    default: withCtx(() => [
+      createVNode(_component_dt_link, { kind: "mention" }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString($options.text), 1)
         ]),
         _: 1
       })
@@ -507,9 +613,10 @@ function re(t, e, o, n, r, i) {
     _: 1
   });
 }
-const ie = /* @__PURE__ */ p(ne, [["render", re]]), se = It.extend({
+const MentionComponent = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const MentionPlugin = Mention.extend({
   addNodeView() {
-    return $(ie);
+    return VueNodeViewRenderer(MentionComponent);
   },
   parseHTML() {
     return [
@@ -531,37 +638,41 @@ const ie = /* @__PURE__ */ p(ne, [["render", re]]), se = It.extend({
       }
     };
   },
-  renderText({ node: t }) {
-    return `@${t.attrs.id}`;
+  renderText({ node }) {
+    return `@${node.attrs.id}`;
   },
-  renderHTML({ HTMLAttributes: t }) {
-    return ["mention-component", x(this.options.HTMLAttributes, t), 0];
+  renderHTML({ HTMLAttributes }) {
+    return ["mention-component", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
   }
-}), ae = [
+});
+const RICH_TEXT_EDITOR_OUTPUT_FORMATS = [
   "text",
   "json",
   "html"
-], ce = [
+];
+const RICH_TEXT_EDITOR_AUTOFOCUS_TYPES = [
   "start",
   "end",
   "all"
-], de = [
+];
+const RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS = [
   "https",
   "http",
   "ftp",
   "ftps",
   "sftp",
   "mailto"
-], ue = {
+];
+const _sfc_main$1 = {
   name: "MentionSuggestion",
   components: {
-    DtAvatar: vt,
-    DtStack: H
+    DtAvatar,
+    DtStack
   },
   props: {
     item: {
       type: Object,
-      required: !0
+      required: true
     }
   },
   computed: {
@@ -573,67 +684,84 @@ const ie = /* @__PURE__ */ p(ne, [["render", re]]), se = It.extend({
     }
   }
 };
-function le(t, e, o, n, r, i) {
-  const s = c("dt-avatar"), a = c("dt-stack");
-  return d(), l(a, {
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_avatar = resolveComponent("dt-avatar");
+  const _component_dt_stack = resolveComponent("dt-stack");
+  return openBlock(), createBlock(_component_dt_stack, {
     direction: "row",
     gap: "400"
   }, {
-    default: m(() => [
-      y(s, {
-        "full-name": i.name,
-        "image-src": i.avatarSrc,
-        "image-alt": i.name,
+    default: withCtx(() => [
+      createVNode(_component_dt_avatar, {
+        "full-name": $options.name,
+        "image-src": $options.avatarSrc,
+        "image-alt": $options.name,
         size: "xs"
       }, null, 8, ["full-name", "image-src", "image-alt"]),
-      E(" " + T(i.name), 1)
+      createTextVNode(" " + toDisplayString($options.name), 1)
     ]),
     _: 1
   });
 }
-const me = /* @__PURE__ */ p(ue, [["render", le]]), pe = {
+const MentionSuggestion = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+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: !0,
+  allowSpaces: true,
   render: () => {
-    let t, e;
+    let component;
+    let popup;
     return {
-      onStart: (o) => {
-        t = new P(q, {
+      onStart: (props) => {
+        component = new VueRenderer(SuggestionList, {
           props: {
-            itemComponent: M(me),
+            itemComponent: markRaw(MentionSuggestion),
             itemType: "mention",
-            ...o
+            ...props
           },
-          editor: o.editor
-        }), o.clientRect && (e = V("body", {
-          getReferenceClientRect: o.clientRect,
+          editor: props.editor
+        });
+        if (!props.clientRect) {
+          return;
+        }
+        popup = tippy("body", {
+          getReferenceClientRect: props.clientRect,
           appendTo: () => document.body,
-          content: t.element,
-          showOnCreate: !0,
-          interactive: !0,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
           trigger: "manual",
           placement: "top-start"
-        }));
+        });
       },
-      onUpdate(o) {
-        t.updateProps(o), o.clientRect && e[0].setProps({
-          getReferenceClientRect: o.clientRect
+      onUpdate(props) {
+        component.updateProps(props);
+        if (!props.clientRect) {
+          return;
+        }
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect
         });
       },
-      onKeyDown(o) {
-        return o.event.key === "Escape" ? (e[0].hide(), !0) : t == null ? void 0 : t.ref.onKeyDown(o);
+      onKeyDown(props) {
+        if (props.event.key === "Escape") {
+          popup[0].hide();
+          return true;
+        }
+        return component == null ? void 0 : component.ref.onKeyDown(props);
       },
       onExit() {
-        e[0].destroy(), t.destroy();
+        popup[0].destroy();
+        component.destroy();
       }
     };
   }
-}, fe = {
+};
+const _sfc_main = {
   name: "DtRichTextEditor",
   components: {
-    EditorContent: U
+    EditorContent
   },
   props: {
     /**
@@ -649,21 +777,21 @@ const me = /* @__PURE__ */ p(ue, [["render", le]]), pe = {
      */
     editable: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Whether the input allows for line breaks to be introduced in the text.
      */
     allowLineBreaks: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Descriptive label for the input element
      */
     inputAriaLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Additional class name for the input element. Only accepts a String value
@@ -687,9 +815,12 @@ const me = /* @__PURE__ */ p(ue, [["render", le]]), pe = {
      */
     autoFocus: {
       type: [Boolean, String, Number],
-      default: !1,
-      validator(t) {
-        return typeof t == "string" ? ce.includes(t) : !0;
+      default: false,
+      validator(autoFocus) {
+        if (typeof autoFocus === "string") {
+          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);
+        }
+        return true;
       }
     },
     /**
@@ -701,8 +832,8 @@ const me = /* @__PURE__ */ p(ue, [["render", le]]), pe = {
     outputFormat: {
       type: String,
       default: "text",
-      validator(t) {
-        return ae.includes(t);
+      validator(outputFormat) {
+        return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);
       }
     },
     /**
@@ -717,7 +848,7 @@ const me = /* @__PURE__ */ p(ue, [["render", le]]), pe = {
      */
     link: {
       type: [Boolean, Object],
-      default: !1
+      default: false
     },
     /**
      * suggestion object containing the items query function.
@@ -739,42 +870,42 @@ const me = /* @__PURE__ */ p(ue, [["render", le]]), pe = {
      */
     allowBlockquote: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Whether the input allows for bold to be introduced in the text.
      */
     allowBold: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Whether the input allows for bullet list to be introduced in the text.
     */
     allowBulletList: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Whether the input allows for italic to be introduced in the text.
      */
     allowItalic: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Whether the input allows for strike to be introduced in the text.
      */
     allowStrike: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Whether the input allows for underline to be introduced in the text.
      */
     allowUnderline: {
       type: Boolean,
-      default: !0
+      default: true
     }
   },
   emits: [
@@ -806,54 +937,88 @@ const me = /* @__PURE__ */ p(ue, [["render", le]]), pe = {
   data() {
     return {
       editor: null,
-      popoverOpened: !1
+      popoverOpened: false
     };
   },
   computed: {
     // eslint-disable-next-line complexity
     extensions() {
-      const t = [W, X, it];
-      if (this.link && t.push(this.getExtension(oe, this.link)), this.allowBlockquote && t.push(F), this.allowBold && t.push(G), this.allowBulletList && (t.push(Q), t.push(et), t.push(ot.configure({
-        itemTypeName: "listItem"
-      }))), this.allowItalic && t.push(Z), this.allowStrike && t.push(nt), this.allowUnderline && t.push(rt), t.push(
-        Y.configure({ placeholder: this.placeholder })
-      ), this.allowLineBreaks || t.push(
-        J.extend({
-          addKeyboardShortcuts() {
-            return {
-              Enter: () => !0,
-              "Shift-Enter": () => this.editor.commands.first(({ commands: e }) => [
-                () => e.newlineInCode(),
-                () => e.createParagraphNear(),
-                () => e.liftEmptyBlock(),
-                () => e.splitBlock()
-              ])
-            };
-          }
-        })
-      ), t.push(tt.extend({ inclusive: !1 }).configure({
-        autolink: !0,
-        protocols: de
-      })), this.mentionSuggestion) {
-        const e = { ...this.mentionSuggestion, ...pe };
-        t.push(se.configure({ suggestion: e }));
-      }
-      return t.push(Jt), t.push(st.configure({
+      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"
-      })), t.push(z.configure({
+      }));
+      extensions.push(CodeBlock.configure({
         HTMLAttributes: {
           class: "dt-rich-text-editor--code-block"
         }
-      })), t;
+      }));
+      return extensions;
     },
     inputAttrs() {
-      const t = {
+      const attrs = {
         "aria-label": this.inputAriaLabel,
-        "aria-multiline": !0,
+        "aria-multiline": true,
         role: "textbox"
       };
-      return this.editable || (t["aria-readonly"] = !0), t;
+      if (!this.editable) {
+        attrs["aria-readonly"] = true;
+      }
+      return attrs;
     }
   },
   /**
@@ -862,21 +1027,30 @@ const me = /* @__PURE__ */ p(ue, [["render", le]]), pe = {
     * to be hooked up to the Editor's own API.
     */
   watch: {
-    editable(t) {
-      this.editor.setEditable(t), this.updateEditorAttributes({ "aria-readonly": !t });
+    editable(isEditable) {
+      this.editor.setEditable(isEditable);
+      this.updateEditorAttributes({ "aria-readonly": !isEditable });
     },
-    inputClass(t) {
-      this.updateEditorAttributes({ class: t });
+    inputClass(newClass) {
+      this.updateEditorAttributes({ class: newClass });
     },
-    inputAriaLabel(t) {
-      this.updateEditorAttributes({ "aria-label": t });
+    inputAriaLabel(newLabel) {
+      this.updateEditorAttributes({ "aria-label": newLabel });
     },
     extensions() {
-      this.destroyEditor(), this.createEditor();
+      this.destroyEditor();
+      this.createEditor();
     },
-    modelValue(t) {
-      let e = this.getOutput();
-      this.outputFormat === "json" && (t = JSON.stringify(t), e = JSON.stringify(e)), t !== e && this.editor.commands.setContent(t, !1);
+    modelValue(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() {
@@ -887,7 +1061,7 @@ const me = /* @__PURE__ */ p(ue, [["render", le]]), pe = {
   },
   methods: {
     createEditor() {
-      this.editor = new K({
+      this.editor = new Editor({
         autofocus: this.autoFocus,
         content: this.modelValue,
         editable: this.editable,
@@ -898,7 +1072,8 @@ const me = /* @__PURE__ */ p(ue, [["render", le]]), pe = {
             class: this.inputClass
           }
         }
-      }), this.addEditorListeners();
+      });
+      this.addEditorListeners();
     },
     destroyEditor() {
       this.editor.destroy();
@@ -909,12 +1084,15 @@ const me = /* @__PURE__ */ p(ue, [["render", le]]), pe = {
      */
     addEditorListeners() {
       this.editor.on("update", () => {
-        const t = this.getOutput();
-        this.$emit("input", t), this.$emit("update:modelValue", t);
-      }), this.editor.on("focus", ({ event: t }) => {
-        this.$emit("focus", t);
-      }), this.editor.on("blur", ({ event: t }) => {
-        this.$emit("blur", t);
+        const value = this.getOutput();
+        this.$emit("input", value);
+        this.$emit("update:modelValue", value);
+      });
+      this.editor.on("focus", ({ event }) => {
+        this.$emit("focus", event);
+      });
+      this.editor.on("blur", ({ event }) => {
+        this.$emit("blur", event);
       });
     },
     getOutput() {
@@ -928,30 +1106,33 @@ const me = /* @__PURE__ */ p(ue, [["render", le]]), pe = {
           return this.editor.getText();
       }
     },
-    getExtension(t, e) {
-      var o;
-      return typeof e == "boolean" ? t : (o = t.configure) == null ? void 0 : o.call(t, e);
+    getExtension(extension, options) {
+      var _a;
+      if (typeof options === "boolean") {
+        return extension;
+      }
+      return (_a = extension.configure) == null ? void 0 : _a.call(extension, options);
     },
-    updateEditorAttributes(t) {
-      this.editor.setOptions({ editorProps: { attributes: t } });
+    updateEditorAttributes(attributes) {
+      this.editor.setOptions({ editorProps: { attributes } });
     },
     focusEditor() {
       this.editor.commands.focus();
     }
   }
 };
-function he(t, e, o, n, r, i) {
-  const s = c("editor-content");
-  return d(), l(s, {
-    editor: r.editor,
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_editor_content = resolveComponent("editor-content");
+  return openBlock(), createBlock(_component_editor_content, {
+    editor: $data.editor,
     "data-qa": "dt-rich-text-editor",
     class: "dt-rich-text-editor"
   }, null, 8, ["editor"]);
 }
-const io = /* @__PURE__ */ p(fe, [["render", he]]);
+const DtRichTextEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  io as DtRichTextEditor,
-  ce as RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,
-  ae as RICH_TEXT_EDITOR_OUTPUT_FORMATS
+  DtRichTextEditor,
+  RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,
+  RICH_TEXT_EDITOR_OUTPUT_FORMATS
 };
 //# sourceMappingURL=rich-text-editor.js.map