@dialpad/dialtone-vue 2.124.0 → 2.125.1-alpha.1

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

@@ -0,0 +1,920 @@
+import { NodeViewWrapper as R, nodeViewProps as w, VueRenderer as k, VueNodeViewRenderer as T, EditorContent as O, Editor as $ } from "@tiptap/vue-2";
+import M from "@tiptap/extension-blockquote";
+import D from "@tiptap/extension-code-block";
+import H from "@tiptap/extension-document";
+import q from "@tiptap/extension-hard-break";
+import N from "@tiptap/extension-paragraph";
+import B from "@tiptap/extension-placeholder";
+import F from "@tiptap/extension-bold";
+import U from "@tiptap/extension-bullet-list";
+import K from "@tiptap/extension-italic";
+import V from "@tiptap/extension-link";
+import z from "@tiptap/extension-list-item";
+import W from "@tiptap/extension-ordered-list";
+import J from "@tiptap/extension-strike";
+import X from "@tiptap/extension-underline";
+import Y from "@tiptap/extension-text";
+import G from "@tiptap/extension-text-align";
+import { Node as Q, mergeAttributes as g, nodeInputRule as y, nodePasteRule as v, getMarksBetween as Z, combineTransactionSteps as tt, getChangedRanges as et, findChildrenInRange as rt, Mark as nt } from "@tiptap/core";
+import { n as u } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { D as C, m as ot, o as S } from "../chunks/index-o4OMWMuv.js";
+import { PluginKey as I, Plugin as it } from "@tiptap/pm/state";
+import st from "@tiptap/suggestion";
+import { emojisIndexed as at } from "@dialpad/dialtone-emojis";
+import { DtListItem as ut } from "./list-item.js";
+import { DtStack as A } from "./stack.js";
+import j from "tippy.js";
+import { linkRegex as ct, getPhoneNumberRegex as dt } from "./utils.js";
+import lt from "@tiptap/extension-mention";
+import { DtLink as mt } from "./link.js";
+import { DtAvatar as pt } from "./avatar.js";
+import "emoji-regex";
+import "emoji-toolkit/emoji_strategy.json";
+import "./skeleton.js";
+import "../chunks/icon_constants-OpYAAKwF.js";
+import "@dialpad/dialtone-icons/icons.json";
+import "../chunks/list_item_constants-LTUc74pD.js";
+import "./item-layout.js";
+import "./icon.js";
+import "@dialpad/dialtone-icons/vue2";
+import "../chunks/stack_constants-u7tNqGtc.js";
+import "./constants.js";
+import "vue";
+import "../chunks/link_constants-vIUB92L4.js";
+import "./presence.js";
+const ft = {
+  name: "EmojiComponent",
+  components: {
+    NodeViewWrapper: R,
+    DtEmoji: C
+  },
+  props: w
+};
+var ht = function() {
+  var e = this, r = e._self._c;
+  return r("node-view-wrapper", { staticClass: "d-d-inline-block d-va-bottom d-lh0" }, [r("dt-emoji", { attrs: { size: "500", code: e.node.attrs.code } })], 1);
+}, gt = [], _t = /* @__PURE__ */ u(
+  ft,
+  ht,
+  gt,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const yt = _t.exports, vt = {
+  name: "SuggestionList",
+  components: {
+    DtListItem: ut
+  },
+  props: {
+    items: {
+      type: Array,
+      required: !0
+    },
+    command: {
+      type: Function,
+      required: !0
+    },
+    itemComponent: {
+      type: Object,
+      required: !0
+    },
+    itemType: {
+      type: String,
+      required: !0
+    }
+  },
+  data() {
+    return {
+      selectedIndex: 0
+    };
+  },
+  watch: {
+    items() {
+      this.selectedIndex = 0;
+    }
+  },
+  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;
+    },
+    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 t = this.$refs.suggestionList.querySelector(".dt-list-item--highlighted");
+      t && t.scrollIntoView({
+        behaviour: "smooth",
+        block: "center"
+      });
+    },
+    selectHandler() {
+      this.selectItem(this.selectedIndex);
+    },
+    selectItem(t) {
+      const e = this.items[t];
+      switch (this.itemType) {
+        case "emoji":
+          this.command(e);
+          return;
+        case "mention":
+          this.command({ name: e.name, id: e.id, avatarSrc: e.avatarSrc });
+          break;
+      }
+    }
+  }
+};
+var bt = function() {
+  var e = this, r = e._self._c;
+  return r("div", { staticClass: "d-popover__dialog" }, [r("ul", { directives: [{ name: "show", rawName: "v-show", value: e.items.length, expression: "items.length" }], ref: "suggestionList", staticClass: "dt-suggestion-list" }, e._l(e.items, function(n, o) {
+    return r("dt-list-item", { key: n.id, class: [
+      "dt-suggestion-list--item",
+      { "dt-list-item--highlighted": o === e.selectedIndex }
+    ], attrs: { "navigation-type": "arrow-keys" }, on: { click: function(i) {
+      return e.selectItem(o);
+    }, keydown: function(i) {
+      return i.preventDefault(), i.stopPropagation(), e.onKeyDown.apply(null, arguments);
+    } } }, [r(e.itemComponent, { tag: "component", attrs: { item: n } })], 1);
+  }), 1)]);
+}, xt = [], Et = /* @__PURE__ */ u(
+  vt,
+  bt,
+  xt,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const L = Et.exports, Rt = {
+  name: "EmojiSuggestion",
+  components: {
+    DtEmoji: C,
+    DtStack: A
+  },
+  props: {
+    item: {
+      type: Object,
+      required: !0
+    }
+  }
+};
+var wt = function() {
+  var e = this, r = e._self._c;
+  return r("dt-stack", { attrs: { direction: "row", gap: "400" } }, [r("dt-emoji", { attrs: { size: "200", code: e.item.code } }), e._v(" " + e._s(e.item.code) + " ")], 1);
+}, kt = [], Tt = /* @__PURE__ */ u(
+  Rt,
+  wt,
+  kt,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const Ct = Tt.exports, St = {
+  items: ({ query: t }) => t.length < 2 ? [] : Object.values(at).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: r }) => {
+    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, [
+      {
+        type: "emoji",
+        attrs: r
+      },
+      {
+        type: "text",
+        text: " "
+      }
+    ]).run(), (s = window.getSelection()) == null || s.collapseToEnd();
+  },
+  render: () => {
+    let t, e;
+    return {
+      onStart: (r) => {
+        t = new k(L, {
+          parent: void 0,
+          propsData: {
+            itemComponent: Ct,
+            itemType: "emoji",
+            ...r
+          },
+          editor: r.editor
+        }), r.clientRect && (e = j("body", {
+          getReferenceClientRect: r.clientRect,
+          appendTo: () => document.body,
+          content: t.element,
+          showOnCreate: !0,
+          interactive: !0,
+          trigger: "manual",
+          placement: "top-start",
+          contentElement: null,
+          zIndex: 650
+        }));
+      },
+      onUpdate(r) {
+        t.updateProps(r), r.clientRect && e[0].setProps({
+          getReferenceClientRect: r.clientRect
+        });
+      },
+      onKeyDown(r) {
+        var n;
+        return r.event.key === "Escape" ? (e[0].hide(), !0) : (n = t.ref) == null ? void 0 : n.onKeyDown(r);
+      },
+      onExit() {
+        e[0].destroy(), t.destroy();
+      }
+    };
+  }
+}, It = new I("emoji"), At = /:\w+:$/, jt = /:\w+:/g, Lt = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])$/, Pt = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g, b = (t) => {
+  if (t && S(t[0]))
+    return {
+      index: t.index,
+      text: t[0],
+      match: t
+    };
+}, Ot = (t) => [...t.matchAll(jt)].filter((r) => S(r[0])).map((r) => ({
+  index: r.index,
+  text: r[0],
+  match: r
+})), $t = Q.create({
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      suggestion: {
+        char: ":",
+        pluginKey: It
+      }
+    };
+  },
+  name: "emoji",
+  group: "inline",
+  inline: !0,
+  selectable: !0,
+  addNodeView() {
+    return T(yt);
+  },
+  addAttributes() {
+    return {
+      code: {
+        default: null
+      },
+      id: {
+        default: null
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "emoji-component"
+      }
+    ];
+  },
+  renderText({ node: t }) {
+    return t.attrs.code;
+  },
+  renderHTML({ HTMLAttributes: t }) {
+    return ["emoji-component", g(this.options.HTMLAttributes, t)];
+  },
+  addInputRules() {
+    return [
+      // shortcode input
+      y({
+        find: (t) => {
+          const e = t.match(At);
+          return b(e);
+        },
+        type: this.type,
+        getAttributes(t) {
+          return {
+            code: t[0]
+          };
+        }
+      }),
+      y({
+        find: (t) => {
+          const e = t.match(Lt);
+          return b(e);
+        },
+        type: this.type,
+        getAttributes(t) {
+          const e = ot(t[0]).unicode_output;
+          return {
+            code: String.fromCodePoint(parseInt(e, 16)),
+            label: "emoji"
+          };
+        }
+      })
+    ];
+  },
+  addPasteRules() {
+    return [
+      v({
+        find: Ot,
+        type: this.type,
+        getAttributes(t) {
+          return {
+            code: t[0]
+          };
+        }
+      }),
+      v({
+        find: Pt,
+        type: this.type,
+        getAttributes(t) {
+          return {
+            code: t[0]
+          };
+        }
+      })
+    ];
+  },
+  addProseMirrorPlugins() {
+    return [
+      st({
+        editor: this.editor,
+        ...this.options.suggestion,
+        ...St
+      })
+    ];
+  }
+});
+function Mt(t, e, r = () => !0) {
+  const n = [];
+  e.lastIndex = 0;
+  let o;
+  for (; o = e.exec(t); )
+    r(t, o) && n.push(o);
+  return n;
+}
+function Dt(t, e) {
+  return !["#", "@"].includes(t.charAt(e.index)) && !["#", "@"].includes(t.charAt(e.index - 1));
+}
+function Ht(t) {
+  const e = new RegExp(
+    "(?:" + [
+      `[!?.,:;'"]`,
+      "(?:&|&amp;)(?:lt|gt|quot|apos|raquo|laquo|rsaquo|lsaquo);)+$"
+    ].join("|"),
+    "g"
+  );
+  return t.replace(e, "");
+}
+function qt(t, e) {
+  const r = t.slice(0, e + 1).search(/\S+\s*$/), n = t.slice(e).search(/\s/);
+  if (n < 0) {
+    const o = t.slice(r);
+    return {
+      text: o,
+      from: r,
+      to: r + o.length
+    };
+  }
+  return {
+    text: t.slice(r, n + e),
+    from: r,
+    to: n + e
+  };
+}
+function h(t, e, r, n) {
+  const o = qt(t, e);
+  if (n.lastIndex = 0, !n.test(o.text))
+    return o;
+  const i = r === "left" ? o.from - 1 : o.to + 1;
+  return i <= 0 || i >= t.length || i === e ? o : h(t, i, r, n);
+}
+function Nt(t, e, r, n) {
+  const o = Math.max(t.from - 1, 0), i = Math.min(t.to + 1, e.content.size), s = Z(o, i, e);
+  for (const a of s)
+    a.mark.type === n && r.removeMark(a.from, a.to, n);
+}
+const x = dt(1, 15);
+function E(t, e, r, n, o, i) {
+  if (!t)
+    return;
+  let s = r - e - 1;
+  s = s < 0 ? 0 : s;
+  const a = n - e, l = h(
+    t,
+    s,
+    "left",
+    x
+  ), _ = h(
+    t,
+    a,
+    "right",
+    x
+  ), c = t.slice(l.from, _.to);
+  Mt(c, ct, Dt).forEach((f) => {
+    const d = Ht(f[0]), p = e + l.from + f.index + 1, P = p + d.length;
+    o.addMark(p, P, i.create());
+  });
+}
+function Bt(t) {
+  let e = !1;
+  return new it({
+    key: new I("autolink"),
+    appendTransaction: (r, n, o) => {
+      const i = r.some((c) => c.docChanged) && !n.doc.eq(o.doc);
+      if (e && !i)
+        return;
+      const { tr: s } = o, { textContent: a } = o.doc;
+      e || E(a, 0, 0, a.length, s, t.type), e = !0;
+      const l = tt(
+        n.doc,
+        [...r]
+      );
+      return et(l).forEach(({ oldRange: c, newRange: m }) => {
+        Nt(m, o.doc, s, t.type), rt(
+          o.doc,
+          m,
+          (d) => d.isTextblock
+        ).forEach(({ node: d, pos: p }) => {
+          E(
+            d.textContent,
+            p,
+            c.from,
+            m.to,
+            s,
+            t.type
+          );
+        });
+      }), s;
+    }
+  });
+}
+const Ft = {
+  class: "d-link d-c-text d-d-inline-block",
+  rel: "noopener noreferrer nofollow"
+}, Ut = nt.create({
+  name: "Link",
+  renderHTML({ HTMLAttributes: t }) {
+    return [
+      "a",
+      g(
+        this.options.HTMLAttributes,
+        t,
+        Ft
+      ),
+      0
+    ];
+  },
+  renderText({ node: t }) {
+    return t.attrs.text;
+  },
+  addProseMirrorPlugins() {
+    return [
+      Bt({ type: this.type })
+    ];
+  }
+}), Kt = {
+  name: "MentionComponent",
+  components: {
+    NodeViewWrapper: R,
+    DtLink: mt
+  },
+  props: w,
+  computed: {
+    text() {
+      return "@" + this.$props.node.attrs.name;
+    }
+  }
+};
+var Vt = function() {
+  var e = this, r = e._self._c;
+  return r("node-view-wrapper", { staticClass: "d-d-inline-block" }, [r("dt-link", { attrs: { kind: "mention" } }, [e._v(" " + e._s(e.text) + " ")])], 1);
+}, zt = [], Wt = /* @__PURE__ */ u(
+  Kt,
+  Vt,
+  zt,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const Jt = Wt.exports, Xt = lt.extend({
+  addNodeView() {
+    return T(Jt);
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "mention-component"
+      }
+    ];
+  },
+  addAttributes() {
+    return {
+      name: {
+        default: ""
+      },
+      avatarSrc: {
+        default: ""
+      },
+      id: {
+        default: ""
+      }
+    };
+  },
+  renderText({ node: t }) {
+    return `@${t.attrs.id}`;
+  },
+  renderHTML({ HTMLAttributes: t }) {
+    return ["mention-component", g(this.options.HTMLAttributes, t), 0];
+  }
+}), Yt = [
+  "text",
+  "json",
+  "html"
+], Gt = [
+  "start",
+  "end",
+  "all"
+], Qt = [
+  "https",
+  "http",
+  "ftp",
+  "ftps",
+  "sftp",
+  "mailto"
+], Zt = {
+  name: "MentionSuggestion",
+  components: {
+    DtAvatar: pt,
+    DtStack: A
+  },
+  props: {
+    item: {
+      type: Object,
+      required: !0
+    }
+  },
+  computed: {
+    name() {
+      return this.item.name;
+    },
+    avatarSrc() {
+      return this.item.avatarSrc;
+    }
+  }
+};
+var te = function() {
+  var e = this, r = e._self._c;
+  return r("dt-stack", { attrs: { direction: "row", gap: "400" } }, [r("dt-avatar", { attrs: { "full-name": e.name, "image-src": e.avatarSrc, "image-alt": e.name, size: "xs" } }), e._v(" " + e._s(e.name) + " ")], 1);
+}, ee = [], re = /* @__PURE__ */ u(
+  Zt,
+  te,
+  ee,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const ne = re.exports, oe = {
+  // 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,
+  render: () => {
+    let t, e;
+    return {
+      onStart: (r) => {
+        t = new k(L, {
+          parent: void 0,
+          propsData: {
+            itemComponent: ne,
+            itemType: "mention",
+            ...r
+          },
+          editor: r.editor
+        }), r.clientRect && (e = j("body", {
+          getReferenceClientRect: r.clientRect,
+          appendTo: () => document.body,
+          content: t.element,
+          showOnCreate: !0,
+          interactive: !0,
+          trigger: "manual",
+          placement: "top-start"
+        }));
+      },
+      onUpdate(r) {
+        t.updateProps(r), r.clientRect && e[0].setProps({
+          getReferenceClientRect: r.clientRect
+        });
+      },
+      onKeyDown(r) {
+        return r.event.key === "Escape" ? (e[0].hide(), !0) : t == null ? void 0 : t.ref.onKeyDown(r);
+      },
+      onExit() {
+        e[0].destroy(), t.destroy();
+      }
+    };
+  }
+}, ie = {
+  name: "DtRichTextEditor",
+  components: {
+    EditorContent: O
+  },
+  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: !0
+    },
+    /**
+     * Whether the input allows for line breaks to be introduced in the text.
+     */
+    allowLineBreaks: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Descriptive label for the input element
+     */
+    inputAriaLabel: {
+      type: String,
+      required: !0
+    },
+    /**
+     * 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: !1,
+      validator(t) {
+        return typeof t == "string" ? Gt.includes(t) : !0;
+      }
+    },
+    /**
+     * 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(t) {
+        return Yt.includes(t);
+      }
+    },
+    /**
+     * Placeholder text
+     */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Enables the Link extension and optionally passes configurations to it
+     */
+    link: {
+      type: [Boolean, Object],
+      default: !1
+    },
+    /**
+     * 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
+    }
+  },
+  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: !1
+    };
+  },
+  computed: {
+    extensions() {
+      const t = [
+        M,
+        F,
+        U,
+        H,
+        K,
+        z,
+        N,
+        J,
+        Y,
+        X
+      ];
+      if (this.link && t.push(this.getExtension(Ut, this.link)), t.push(
+        B.configure({ placeholder: this.placeholder })
+      ), this.allowLineBreaks || t.push(
+        q.extend({
+          addKeyboardShortcuts() {
+            return {
+              Enter: () => !0,
+              "Shift-Enter": () => this.editor.commands.first(({ commands: e }) => [
+                () => e.newlineInCode(),
+                () => e.createParagraphNear(),
+                () => e.liftEmptyBlock(),
+                () => e.splitBlock()
+              ])
+            };
+          }
+        })
+      ), t.push(V.extend({ inclusive: !1 }).configure({
+        autolink: !0,
+        protocols: Qt
+      })), this.mentionSuggestion) {
+        const e = { ...this.mentionSuggestion, ...oe };
+        t.push(Xt.configure({ suggestion: e }));
+      }
+      return t.push($t), t.push(G.configure({
+        types: ["paragraph"],
+        defaultAlignment: "left"
+      })), t.push(D.configure({
+        HTMLAttributes: {
+          class: "dt-rich-text-editor--code-block"
+        }
+      })), t.push(W.configure({
+        itemTypeName: "listItem"
+      })), t;
+    },
+    inputAttrs() {
+      const t = {
+        "aria-label": this.inputAriaLabel,
+        "aria-multiline": !0,
+        role: "textbox"
+      };
+      return this.editable || (t["aria-readonly"] = !0), t;
+    }
+  },
+  /**
+    * 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(t) {
+      this.editor.setEditable(t), this.updateEditorAttributes({ "aria-readonly": !t });
+    },
+    inputClass(t) {
+      this.updateEditorAttributes({ class: t });
+    },
+    inputAriaLabel(t) {
+      this.updateEditorAttributes({ "aria-label": t });
+    },
+    extensions() {
+      this.destroyEditor(), this.createEditor();
+    },
+    value(t) {
+      let e = this.getOutput();
+      this.outputFormat === "json" && (t = JSON.stringify(t), e = JSON.stringify(e)), t !== e && this.editor.commands.setContent(t, !1);
+    }
+  },
+  created() {
+    this.createEditor();
+  },
+  beforeUnmount() {
+    this.destroyEditor();
+  },
+  methods: {
+    createEditor() {
+      this.editor = new $({
+        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 t = this.getOutput();
+        this.$emit("input", t), this.$emit("update:value", t);
+      }), this.editor.on("focus", ({ event: t }) => {
+        this.$emit("focus", t);
+      }), this.editor.on("blur", ({ event: t }) => {
+        this.$emit("blur", t);
+      });
+    },
+    getOutput() {
+      switch (this.outputFormat) {
+        case "json":
+          return this.editor.getJSON();
+        case "html":
+          return this.editor.getHTML();
+        case "text":
+        default:
+          return this.editor.getText();
+      }
+    },
+    getExtension(t, e) {
+      var r;
+      return typeof e == "boolean" ? t : (r = t.configure) == null ? void 0 : r.call(t, e);
+    },
+    updateEditorAttributes(t) {
+      this.editor.setOptions({ editorProps: { attributes: t } });
+    },
+    focusEditor() {
+      this.editor.commands.focus();
+    }
+  }
+};
+var se = function() {
+  var e = this, r = e._self._c;
+  return r("editor-content", { staticClass: "dt-rich-text-editor", attrs: { editor: e.editor, "data-qa": "dt-rich-text-editor" } });
+}, ae = [], ue = /* @__PURE__ */ u(
+  ie,
+  se,
+  ae,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const Ze = ue.exports;
+export {
+  Ze as DtRichTextEditor,
+  Gt as RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,
+  Yt as RICH_TEXT_EDITOR_OUTPUT_FORMATS
+};
+//# sourceMappingURL=rich-text-editor.js.map