@dialpad/dialtone-vue 2.171.3 → 2.173.0-beta.1

package/dist/recipes/conversation_view/message_input/last_active_nodes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"last_active_nodes.cjs","sources":["../../../../recipes/conversation_view/message_input/last_active_nodes.js"],"sourcesContent":["/* eslint-disable complexity */\n/**\n * This function was taken from this thread and modified to work in pure JS:\n * https://github.com/ueberdosis/tiptap/issues/1058#issuecomment-778254557\n *\n * description: This helper, lastActiveNodes, finds the last (furthest from the root document)\n * matching types in your selection (ignoring nesting), you can give it either a list of args\n * similar to isActive or a group name, calling it like below. It will return a list of node\n * type names that are the last ones active in the selection, if the selection is 'empty'\n * (just the cursor) the returned list will only have at most one name.\n * This lets you build a UI for lists that works the same as most word processors.\n *\n * @param {Object} state the tiptap editor instance state\n * @param {*} typesOrGroup node types or node group name to consider\n * @returns {Array} node(s) that are the farthest from the root that matches the given type or group\n */\nexport default function lastActiveNodes (state, typesOrGroup) {\n  if (!state) return [];\n\n  const { from, to } = state.selection;\n  let types;\n\n  if (typeof typesOrGroup === 'string') {\n    // types is a name of a node group\n    types = Object.entries(state.schema.nodes)\n      .filter(([name, nodeType]) => nodeType.groups.includes(typesOrGroup))\n      .map(([name, nodeType]) => {\n        return {\n          type: nodeType,\n        };\n      });\n  } else {\n    // types is a list of LastActiveNodeItemOption\n    types = typesOrGroup;\n    for (const item of types) {\n      item.type = item.type ? getNodeType(item.type, state.schema) : null;\n    }\n  }\n\n  let lastNode = null;\n  let lastMatchedType = null;\n  const matchedTypes = new Set();\n  const notFoundTypes = new Set(types);\n\n  state.doc.nodesBetween(from, to, (node, pos, parent) => {\n    if (notFoundTypes.size === 0) return false;\n    if (!node.isText) {\n      const matchedType = types.filter((item) => {\n        if (!item.type) {\n          return true;\n        }\n        if (typeof item.type === 'string') return false; // Typeguard, shouldn't happen\n        return node.type.name === item.type.name;\n      })\n        .find(item => {\n          if (!item.attributes) return true;\n          return objectIncludes(node.attrs, item.attributes);\n        });\n      if (matchedType) {\n        if (lastMatchedType && lastNode && (lastNode !== parent)) {\n          notFoundTypes.delete(lastMatchedType);\n          matchedTypes.add(lastMatchedType);\n        }\n        lastMatchedType = matchedType;\n      }\n      lastNode = node;\n    }\n  });\n\n  if (lastMatchedType) {\n    matchedTypes.add(lastMatchedType);\n  }\n\n  return [...matchedTypes.values()].map((item) => {\n    if (item.key) {\n      return item.key;\n    } else if (typeof item.type === 'string') {\n      return item.type;\n    } else if (item.type?.name) {\n      return item.type.name;\n    } else {\n      return '';\n    }\n  });\n}\n\nfunction getNodeType (nameOrType, schema) {\n  if (typeof nameOrType === 'string') {\n    if (!schema.nodes[nameOrType]) {\n      throw Error(\n        `There is no node type named '${nameOrType}'. Maybe you forgot to add the extension?`,\n      );\n    }\n\n    return schema.nodes[nameOrType];\n  }\n\n  return nameOrType;\n}\n\nexport function objectIncludes (\n  object1,\n  object2,\n  options,\n) {\n  const keys = Object.keys(object2);\n\n  if (!keys.length) {\n    return true;\n  }\n\n  return keys.every(key => {\n    if (options.strict) {\n      return object2[key] === object1[key];\n    }\n\n    if (Object.prototype.toString.call(object2[key]) === '[object RegExp]') {\n      return object2[key].test(object1[key]);\n    }\n\n    return object2[key] === object1[key];\n  });\n}\n"],"names":[],"mappings":";;AAgBe,SAAS,gBAAiB,OAAO,cAAc;AAC5D,MAAI,CAAC,MAAO,QAAO;AAEnB,QAAM,EAAE,MAAM,OAAO,MAAM;AAC3B,MAAI;AAEJ,MAAI,OAAO,iBAAiB,UAAU;AAEpC,YAAQ,OAAO,QAAQ,MAAM,OAAO,KAAK,EACtC,OAAO,CAAC,CAAC,MAAM,QAAQ,MAAM,SAAS,OAAO,SAAS,YAAY,CAAC,EACnE,IAAI,CAAC,CAAC,MAAM,QAAQ,MAAM;AACzB,aAAO;AAAA,QACL,MAAM;AAAA,MAChB;AAAA,IACA,CAAO;AAAA,EACP,OAAS;AAEL,YAAQ;AACR,eAAW,QAAQ,OAAO;AACxB,WAAK,OAAO,KAAK,OAAO,YAAY,KAAK,MAAM,MAAM,MAAM,IAAI;AAAA,IAChE;AAAA,EACF;AAED,MAAI,WAAW;AACf,MAAI,kBAAkB;AACtB,QAAM,eAAe,oBAAI;AACzB,QAAM,gBAAgB,IAAI,IAAI,KAAK;AAEnC,QAAM,IAAI,aAAa,MAAM,IAAI,CAAC,MAAM,KAAK,WAAW;AACtD,QAAI,cAAc,SAAS,EAAG,QAAO;AACrC,QAAI,CAAC,KAAK,QAAQ;AAChB,YAAM,cAAc,MAAM,OAAO,CAAC,SAAS;AACzC,YAAI,CAAC,KAAK,MAAM;AACd,iBAAO;AAAA,QACR;AACD,YAAI,OAAO,KAAK,SAAS,SAAU,QAAO;AAC1C,eAAO,KAAK,KAAK,SAAS,KAAK,KAAK;AAAA,MAC5C,CAAO,EACE,KAAK,UAAQ;AACZ,YAAI,CAAC,KAAK,WAAY,QAAO;AAC7B,eAAO,eAAe,KAAK,OAAO,KAAK,UAAU;AAAA,MAC3D,CAAS;AACH,UAAI,aAAa;AACf,YAAI,mBAAmB,YAAa,aAAa,QAAS;AACxD,wBAAc,OAAO,eAAe;AACpC,uBAAa,IAAI,eAAe;AAAA,QACjC;AACD,0BAAkB;AAAA,MACnB;AACD,iBAAW;AAAA,IACZ;AAAA,EACL,CAAG;AAED,MAAI,iBAAiB;AACnB,iBAAa,IAAI,eAAe;AAAA,EACjC;AAED,SAAO,CAAC,GAAG,aAAa,OAAQ,CAAA,EAAE,IAAI,CAAC,SAAS;;AAC9C,QAAI,KAAK,KAAK;AACZ,aAAO,KAAK;AAAA,IACb,WAAU,OAAO,KAAK,SAAS,UAAU;AACxC,aAAO,KAAK;AAAA,IAClB,YAAe,UAAK,SAAL,mBAAW,MAAM;AAC1B,aAAO,KAAK,KAAK;AAAA,IACvB,OAAW;AACL,aAAO;AAAA,IACR;AAAA,EACL,CAAG;AACH;AAEA,SAAS,YAAa,YAAY,QAAQ;AACxC,MAAI,OAAO,eAAe,UAAU;AAClC,QAAI,CAAC,OAAO,MAAM,UAAU,GAAG;AAC7B,YAAM;AAAA,QACJ,gCAAgC,UAAU;AAAA,MAClD;AAAA,IACK;AAED,WAAO,OAAO,MAAM,UAAU;AAAA,EAC/B;AAED,SAAO;AACT;AAEO,SAAS,eACd,SACA,SACA,SACA;AACA,QAAM,OAAO,OAAO,KAAK,OAAO;AAEhC,MAAI,CAAC,KAAK,QAAQ;AAChB,WAAO;AAAA,EACR;AAED,SAAO,KAAK,MAAM,SAAO;AAKvB,QAAI,OAAO,UAAU,SAAS,KAAK,QAAQ,GAAG,CAAC,MAAM,mBAAmB;AACtE,aAAO,QAAQ,GAAG,EAAE,KAAK,QAAQ,GAAG,CAAC;AAAA,IACtC;AAED,WAAO,QAAQ,GAAG,MAAM,QAAQ,GAAG;AAAA,EACvC,CAAG;AACH;;;"}

package/dist/recipes/conversation_view/message_input/last_active_nodes.js

@@ -0,0 +1,87 @@
+function lastActiveNodes(state, typesOrGroup) {
+  if (!state) return [];
+  const { from, to } = state.selection;
+  let types;
+  if (typeof typesOrGroup === "string") {
+    types = Object.entries(state.schema.nodes).filter(([name, nodeType]) => nodeType.groups.includes(typesOrGroup)).map(([name, nodeType]) => {
+      return {
+        type: nodeType
+      };
+    });
+  } else {
+    types = typesOrGroup;
+    for (const item of types) {
+      item.type = item.type ? getNodeType(item.type, state.schema) : null;
+    }
+  }
+  let lastNode = null;
+  let lastMatchedType = null;
+  const matchedTypes = /* @__PURE__ */ new Set();
+  const notFoundTypes = new Set(types);
+  state.doc.nodesBetween(from, to, (node, pos, parent) => {
+    if (notFoundTypes.size === 0) return false;
+    if (!node.isText) {
+      const matchedType = types.filter((item) => {
+        if (!item.type) {
+          return true;
+        }
+        if (typeof item.type === "string") return false;
+        return node.type.name === item.type.name;
+      }).find((item) => {
+        if (!item.attributes) return true;
+        return objectIncludes(node.attrs, item.attributes);
+      });
+      if (matchedType) {
+        if (lastMatchedType && lastNode && lastNode !== parent) {
+          notFoundTypes.delete(lastMatchedType);
+          matchedTypes.add(lastMatchedType);
+        }
+        lastMatchedType = matchedType;
+      }
+      lastNode = node;
+    }
+  });
+  if (lastMatchedType) {
+    matchedTypes.add(lastMatchedType);
+  }
+  return [...matchedTypes.values()].map((item) => {
+    var _a;
+    if (item.key) {
+      return item.key;
+    } else if (typeof item.type === "string") {
+      return item.type;
+    } else if ((_a = item.type) == null ? void 0 : _a.name) {
+      return item.type.name;
+    } else {
+      return "";
+    }
+  });
+}
+function getNodeType(nameOrType, schema) {
+  if (typeof nameOrType === "string") {
+    if (!schema.nodes[nameOrType]) {
+      throw Error(
+        `There is no node type named '${nameOrType}'. Maybe you forgot to add the extension?`
+      );
+    }
+    return schema.nodes[nameOrType];
+  }
+  return nameOrType;
+}
+function objectIncludes(object1, object2, options) {
+  const keys = Object.keys(object2);
+  if (!keys.length) {
+    return true;
+  }
+  return keys.every((key) => {
+    if (Object.prototype.toString.call(object2[key]) === "[object RegExp]") {
+      return object2[key].test(object1[key]);
+    }
+    return object2[key] === object1[key];
+  });
+}
+export {
+  lastActiveNodes as default,
+  objectIncludes
+};
+//# sourceMappingURL=last_active_nodes.js.map

package/dist/recipes/conversation_view/message_input/last_active_nodes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"last_active_nodes.js","sources":["../../../../recipes/conversation_view/message_input/last_active_nodes.js"],"sourcesContent":["/* eslint-disable complexity */\n/**\n * This function was taken from this thread and modified to work in pure JS:\n * https://github.com/ueberdosis/tiptap/issues/1058#issuecomment-778254557\n *\n * description: This helper, lastActiveNodes, finds the last (furthest from the root document)\n * matching types in your selection (ignoring nesting), you can give it either a list of args\n * similar to isActive or a group name, calling it like below. It will return a list of node\n * type names that are the last ones active in the selection, if the selection is 'empty'\n * (just the cursor) the returned list will only have at most one name.\n * This lets you build a UI for lists that works the same as most word processors.\n *\n * @param {Object} state the tiptap editor instance state\n * @param {*} typesOrGroup node types or node group name to consider\n * @returns {Array} node(s) that are the farthest from the root that matches the given type or group\n */\nexport default function lastActiveNodes (state, typesOrGroup) {\n  if (!state) return [];\n\n  const { from, to } = state.selection;\n  let types;\n\n  if (typeof typesOrGroup === 'string') {\n    // types is a name of a node group\n    types = Object.entries(state.schema.nodes)\n      .filter(([name, nodeType]) => nodeType.groups.includes(typesOrGroup))\n      .map(([name, nodeType]) => {\n        return {\n          type: nodeType,\n        };\n      });\n  } else {\n    // types is a list of LastActiveNodeItemOption\n    types = typesOrGroup;\n    for (const item of types) {\n      item.type = item.type ? getNodeType(item.type, state.schema) : null;\n    }\n  }\n\n  let lastNode = null;\n  let lastMatchedType = null;\n  const matchedTypes = new Set();\n  const notFoundTypes = new Set(types);\n\n  state.doc.nodesBetween(from, to, (node, pos, parent) => {\n    if (notFoundTypes.size === 0) return false;\n    if (!node.isText) {\n      const matchedType = types.filter((item) => {\n        if (!item.type) {\n          return true;\n        }\n        if (typeof item.type === 'string') return false; // Typeguard, shouldn't happen\n        return node.type.name === item.type.name;\n      })\n        .find(item => {\n          if (!item.attributes) return true;\n          return objectIncludes(node.attrs, item.attributes);\n        });\n      if (matchedType) {\n        if (lastMatchedType && lastNode && (lastNode !== parent)) {\n          notFoundTypes.delete(lastMatchedType);\n          matchedTypes.add(lastMatchedType);\n        }\n        lastMatchedType = matchedType;\n      }\n      lastNode = node;\n    }\n  });\n\n  if (lastMatchedType) {\n    matchedTypes.add(lastMatchedType);\n  }\n\n  return [...matchedTypes.values()].map((item) => {\n    if (item.key) {\n      return item.key;\n    } else if (typeof item.type === 'string') {\n      return item.type;\n    } else if (item.type?.name) {\n      return item.type.name;\n    } else {\n      return '';\n    }\n  });\n}\n\nfunction getNodeType (nameOrType, schema) {\n  if (typeof nameOrType === 'string') {\n    if (!schema.nodes[nameOrType]) {\n      throw Error(\n        `There is no node type named '${nameOrType}'. Maybe you forgot to add the extension?`,\n      );\n    }\n\n    return schema.nodes[nameOrType];\n  }\n\n  return nameOrType;\n}\n\nexport function objectIncludes (\n  object1,\n  object2,\n  options,\n) {\n  const keys = Object.keys(object2);\n\n  if (!keys.length) {\n    return true;\n  }\n\n  return keys.every(key => {\n    if (options.strict) {\n      return object2[key] === object1[key];\n    }\n\n    if (Object.prototype.toString.call(object2[key]) === '[object RegExp]') {\n      return object2[key].test(object1[key]);\n    }\n\n    return object2[key] === object1[key];\n  });\n}\n"],"names":[],"mappings":"AAgBe,SAAS,gBAAiB,OAAO,cAAc;AAC5D,MAAI,CAAC,MAAO,QAAO;AAEnB,QAAM,EAAE,MAAM,OAAO,MAAM;AAC3B,MAAI;AAEJ,MAAI,OAAO,iBAAiB,UAAU;AAEpC,YAAQ,OAAO,QAAQ,MAAM,OAAO,KAAK,EACtC,OAAO,CAAC,CAAC,MAAM,QAAQ,MAAM,SAAS,OAAO,SAAS,YAAY,CAAC,EACnE,IAAI,CAAC,CAAC,MAAM,QAAQ,MAAM;AACzB,aAAO;AAAA,QACL,MAAM;AAAA,MAChB;AAAA,IACA,CAAO;AAAA,EACP,OAAS;AAEL,YAAQ;AACR,eAAW,QAAQ,OAAO;AACxB,WAAK,OAAO,KAAK,OAAO,YAAY,KAAK,MAAM,MAAM,MAAM,IAAI;AAAA,IAChE;AAAA,EACF;AAED,MAAI,WAAW;AACf,MAAI,kBAAkB;AACtB,QAAM,eAAe,oBAAI;AACzB,QAAM,gBAAgB,IAAI,IAAI,KAAK;AAEnC,QAAM,IAAI,aAAa,MAAM,IAAI,CAAC,MAAM,KAAK,WAAW;AACtD,QAAI,cAAc,SAAS,EAAG,QAAO;AACrC,QAAI,CAAC,KAAK,QAAQ;AAChB,YAAM,cAAc,MAAM,OAAO,CAAC,SAAS;AACzC,YAAI,CAAC,KAAK,MAAM;AACd,iBAAO;AAAA,QACR;AACD,YAAI,OAAO,KAAK,SAAS,SAAU,QAAO;AAC1C,eAAO,KAAK,KAAK,SAAS,KAAK,KAAK;AAAA,MAC5C,CAAO,EACE,KAAK,UAAQ;AACZ,YAAI,CAAC,KAAK,WAAY,QAAO;AAC7B,eAAO,eAAe,KAAK,OAAO,KAAK,UAAU;AAAA,MAC3D,CAAS;AACH,UAAI,aAAa;AACf,YAAI,mBAAmB,YAAa,aAAa,QAAS;AACxD,wBAAc,OAAO,eAAe;AACpC,uBAAa,IAAI,eAAe;AAAA,QACjC;AACD,0BAAkB;AAAA,MACnB;AACD,iBAAW;AAAA,IACZ;AAAA,EACL,CAAG;AAED,MAAI,iBAAiB;AACnB,iBAAa,IAAI,eAAe;AAAA,EACjC;AAED,SAAO,CAAC,GAAG,aAAa,OAAQ,CAAA,EAAE,IAAI,CAAC,SAAS;AAzElD;AA0EI,QAAI,KAAK,KAAK;AACZ,aAAO,KAAK;AAAA,IACb,WAAU,OAAO,KAAK,SAAS,UAAU;AACxC,aAAO,KAAK;AAAA,IAClB,YAAe,UAAK,SAAL,mBAAW,MAAM;AAC1B,aAAO,KAAK,KAAK;AAAA,IACvB,OAAW;AACL,aAAO;AAAA,IACR;AAAA,EACL,CAAG;AACH;AAEA,SAAS,YAAa,YAAY,QAAQ;AACxC,MAAI,OAAO,eAAe,UAAU;AAClC,QAAI,CAAC,OAAO,MAAM,UAAU,GAAG;AAC7B,YAAM;AAAA,QACJ,gCAAgC,UAAU;AAAA,MAClD;AAAA,IACK;AAED,WAAO,OAAO,MAAM,UAAU;AAAA,EAC/B;AAED,SAAO;AACT;AAEO,SAAS,eACd,SACA,SACA,SACA;AACA,QAAM,OAAO,OAAO,KAAK,OAAO;AAEhC,MAAI,CAAC,KAAK,QAAQ;AAChB,WAAO;AAAA,EACR;AAED,SAAO,KAAK,MAAM,SAAO;AAKvB,QAAI,OAAO,UAAU,SAAS,KAAK,QAAQ,GAAG,CAAC,MAAM,mBAAmB;AACtE,aAAO,QAAQ,GAAG,EAAE,KAAK,QAAQ,GAAG,CAAC;AAAA,IACtC;AAED,WAAO,QAAQ,GAAG,MAAM,QAAQ,GAAG;AAAA,EACvC,CAAG;AACH;"}

package/dist/recipes/conversation_view/message_input/message_input.vue.cjs

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const last_active_nodes = require("./last_active_nodes.cjs");
 const meeting_pill = require("./extensions/meeting_pill/meeting_pill.cjs");
 const vue2 = require("@dialpad/dialtone-icons/vue2");
+const message_input_topbar = require("./message_input_topbar.vue.cjs");
+const message_input_link = require("./message_input_link.vue.cjs");
+const editor_constants = require("../editor/editor_constants.cjs");
 const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
 const button = require("../../../components/button/button.vue.cjs");
 const emoji_picker = require("../../../components/emoji_picker/emoji_picker.vue.cjs");
@@ -18,6 +22,8 @@ const _sfc_main = {
     DtEmojiPicker: emoji_picker.default,
     DtInput: input.default,
     DtPopover: popover.default,
+    DtRecipeMessageInputTopbar: message_input_topbar.default,
+    DtRecipeMessageInputLink: message_input_link.default,
     DtRichTextEditor: rich_text_editor.default,
     DtTooltip: tooltip.default,
     DtStack: stack.default,
@@ -29,6 +35,18 @@ const _sfc_main = {
   mixins: [],
   inheritAttrs: false,
   props: {
+    /**
+     * Displays all the buttons for rich text formatting above the message input, and enables it within the editor.
+     * Rich text formatting for the purposes of this component is defined as:
+     *
+     * bold, italic, strikethrough, lists, blockquotes, inline code tags, and code blocks.
+     *
+     * If you are sending a message to a phone rather than a Dialpad to Dialpad message, you should have this as false.
+     */
+    richText: {
+      type: Boolean,
+      default: true
+    },
     /**
      * Value of the input. The object format should match TipTap's JSON
      * document structure: https://tiptap.dev/guide/output#option-1-json
@@ -97,18 +115,11 @@ const _sfc_main = {
      */
     outputFormat: {
       type: String,
-      default: "text",
+      default: "json",
       validator(outputFormat) {
         return rich_text_editor_constants.RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);
       }
     },
-    /**
-     * Enables the Link extension and optionally passes configurations to it
-     */
-    link: {
-      type: [Boolean, Object],
-      default: true
-    },
     /**
      * Placeholder text
      */
@@ -240,53 +251,139 @@ const _sfc_main = {
       default: null
     },
     /**
-     * Whether the input allows for block quote.
+     * descriptive text fields for the bold button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
      */
-    allowBlockquote: {
-      type: Boolean,
-      default: true
+    boldButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle bold on selected text",
+        tooltipText: "Bold",
+        keyboardShortcutText: "Mod + B"
+      })
     },
     /**
-     * Whether the input allows for bold to be introduced in the text.
+     * descriptive text fields for the italic button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
      */
-    allowBold: {
-      type: Boolean,
-      default: true
+    italicButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle italic on selected text",
+        tooltipText: "Italic",
+        keyboardShortcutText: "Mod + I"
+      })
     },
     /**
-     * Whether the input allows for bullet list to be introduced in the text.
-    */
-    allowBulletList: {
-      type: Boolean,
-      default: true
+     * descriptive text fields for the strikethrough button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     */
+    strikeButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle strikethrough on selected text",
+        tooltipText: "Strikethrough",
+        keyboardShortcutText: "Mod + Shift + S"
+      })
     },
     /**
-     * Whether the input allows for italic to be introduced in the text.
+     * descriptive text fields for the link button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
      */
-    allowItalic: {
-      type: Boolean,
-      default: true
+    linkButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Create or edit link on selected text",
+        tooltipText: "Link",
+        // TODO: implement mod k
+        keyboardShortcutText: "Mod + K",
+        dialogTitle: "Add a link",
+        textLabel: "Text to display (optional)",
+        linkLabel: "Link",
+        linkPlaceholder: "e.g. https://www.dialpad.com",
+        removeLabel: "Remove",
+        cancelLabel: "Cancel",
+        confirmLabel: "Done",
+        visuallyHiddenCloseText: "Close link dialog"
+      })
+    },
+    /**
+     * descriptive text fields for the bullet list button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     */
+    bulletListButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle bullet list on selected text",
+        tooltipText: "Bullet list",
+        keyboardShortcutText: "Mod + Shift + 8"
+      })
     },
     /**
-     * Whether the input allows for strike to be introduced in the text.
+     * descriptive text fields for the ordered list button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
      */
-    allowStrike: {
-      type: Boolean,
-      default: true
+    orderedListButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle ordered list on selected text",
+        tooltipText: "Ordered list",
+        keyboardShortcutText: "Mod + Shift + 7"
+      })
     },
     /**
-     * Whether the input allows for underline to be introduced in the text.
+     * descriptive text fields for the italic button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
      */
-    allowUnderline: {
-      type: Boolean,
-      default: true
+    blockQuoteButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle Blockquote on selected text",
+        tooltipText: "Blockquote",
+        keyboardShortcutText: "Mod + Shift + B"
+      })
     },
     /**
-     * Whether the input allows codeblock to be introduced in the text.
+     * descriptive text fields for the code button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
      */
-    allowCodeblock: {
-      type: Boolean,
-      default: true
+    codeButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle code tag on selected text",
+        tooltipText: "Code",
+        keyboardShortcutText: "Mod + E"
+      })
+    },
+    /**
+     * descriptive text fields for the code block button
+     *
+     * object format:
+     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     */
+    codeBlockButtonOptions: {
+      type: Object,
+      default: () => ({
+        ariaLabel: "Toggle code block on selected text",
+        tooltipText: "Code block",
+        keyboardShortcutText: "Mod + Alt + C"
+      })
     }
   },
   emits: [
@@ -358,16 +455,33 @@ const _sfc_main = {
      * @event update:value
      * @type {String|JSON}
      */
-    "update:value"
+    "update:value",
+    /**
+     * Emitted when input changes, returns text content only
+     * @event text-input
+     * @type {String}
+     */
+    "text-input"
   ],
   data() {
     return {
+      // If an ordered list is nested within an unordered list, we only want to show the currently selected list as
+      // active. This function performs the logic to determine the farthest active node from the root.
+      lastActiveNodes: last_active_nodes.default,
       additionalExtensions: [meeting_pill.default],
       internalInputValue: this.value,
       // internal input content
       imagePickerFocus: false,
       emojiPickerFocus: false,
-      emojiPickerOpened: false
+      emojiPickerOpened: false,
+      isFocused: false,
+      linkOptions: {
+        class: "d-link d-c-text d-d-inline-block"
+      },
+      linkDialogOpen: false,
+      selectedText: "",
+      text: "",
+      hideLinkBubbleMenu: false
     };
   },
   computed: {
@@ -375,7 +489,7 @@ const _sfc_main = {
       return !this.showSend.text;
     },
     inputLength() {
-      return this.internalInputValue.length;
+      return this.text.length;
     },
     displayCharacterLimitWarning() {
       return Boolean(this.showCharacterLimit) && this.showCharacterLimit.count - this.inputLength <= this.showCharacterLimit.warning;
@@ -412,9 +526,68 @@ const _sfc_main = {
   created() {
     if (this.value && this.outputFormat === "text") {
       this.internalInputValue = this.value.replace(/\n/g, "<br>");
+    } else {
+      this.internalInputValue = this.value;
     }
   },
   methods: {
+    linkDialogOpened(value) {
+      var _a;
+      this.linkDialogOpen = value;
+      if (value === true) {
+        this.initLinkDialog();
+      } else {
+        this.hideLinkBubbleMenu = false;
+        (_a = this.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
+      }
+    },
+    // eslint-disable-next-line complexity
+    handleTopbarClick(type) {
+      var _a;
+      const editor = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor;
+      const typeToCommandMap = {
+        bold: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run(),
+        italic: () => editor == null ? void 0 : editor.chain().focus().toggleItalic().run(),
+        strike: () => editor == null ? void 0 : editor.chain().focus().toggleStrike().run(),
+        bulletList: () => editor == null ? void 0 : editor.chain().focus().toggleBulletList().run(),
+        orderedList: () => editor == null ? void 0 : editor.chain().focus().toggleOrderedList().run(),
+        blockquote: () => editor == null ? void 0 : editor.chain().focus().toggleBlockquote().run(),
+        code: () => editor == null ? void 0 : editor.chain().focus().toggleCode().run(),
+        codeBlock: () => editor == null ? void 0 : editor.chain().focus().toggleCodeBlock().run()
+      };
+      if (editor && typeToCommandMap[type]) {
+        typeToCommandMap[type]();
+      }
+    },
+    // Checks if the node currently selected is active ex/ the bold button is active if the selected text is bold
+    isSelectionActive(type) {
+      var _a, _b, _c, _d;
+      if (["bulletList", "orderedList"].includes(type)) {
+        return this.lastActiveNodes((_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.state, [{ type: "bulletList" }, { type: "orderedList" }]).includes(type) && this.isFocused;
+      }
+      return ((_d = (_c = this.$refs.richTextEditor) == null ? void 0 : _c.editor) == null ? void 0 : _d.isActive(type)) && this.isFocused;
+    },
+    initLinkDialog() {
+      var _a, _b, _c;
+      this.$refs.link.setInitialValues(this.selectedText, (_c = (_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.getAttributes("link")) == null ? void 0 : _c.href);
+      this.hideLinkBubbleMenu = true;
+      this.linkDialogOpen = true;
+    },
+    removeLink() {
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.removeLink();
+      this.linkDialogOpen = false;
+    },
+    setLink(linkText, linkInput) {
+      this.$refs.richTextEditor.setLink(
+        linkInput,
+        linkText,
+        this.linkOptions,
+        editor_constants.EDITOR_SUPPORTED_LINK_PROTOCOLS,
+        editor_constants.EDITOR_DEFAULT_LINK_PREFIX
+      );
+      this.linkDialogOpen = false;
+    },
     // Mousedown instead of click because it fires before the blur event.
     onMousedown(e) {
       const isWithinInput = this.$refs.richTextEditor.$el.querySelector(".tiptap").contains(e.target);
@@ -474,18 +647,30 @@ const _sfc_main = {
     },
     onInput(event) {
       this.$emit("update:value", event);
+    },
+    onTextInput(event) {
+      this.text = event;
+      this.$emit("text-input", event);
     }
   }
 };
 var _sfc_render = function render() {
   var _a;
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { class: ["d-recipe-message-input"], attrs: { "data-qa": "dt-recipe-message-input", "role": "presentation" }, on: { "dragover": function($event) {
+  return _c("div", { staticClass: "d-recipe-message-input", attrs: { "data-qa": "dt-recipe-message-input", "role": "presentation" }, on: { "dragover": function($event) {
     $event.preventDefault();
   }, "drop": function($event) {
     $event.preventDefault();
     return _vm.onDrop.apply(null, arguments);
-  }, "paste": _vm.onPaste, "mousedown": _vm.onMousedown } }, [_vm._t("top"), _c("div", { directives: [{ name: "dt-scrollbar", rawName: "v-dt-scrollbar" }], staticClass: "d-recipe-message-input__editor-wrapper", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._g(_vm._b({ ref: "richTextEditor", attrs: { "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": _vm.inputClass, "output-format": _vm.outputFormat, "auto-focus": _vm.autoFocus, "link": _vm.link, "placeholder": _vm.placeholder, "prevent-typing": _vm.preventTyping, "mention-suggestion": _vm.mentionSuggestion, "channel-suggestion": _vm.channelSuggestion, "slash-command-suggestion": _vm.slashCommandSuggestion, "allow-blockquote": _vm.allowBlockquote, "allow-bold": _vm.allowBold, "allow-bullet-list": _vm.allowBulletList, "allow-codeblock": _vm.allowCodeblock, "allow-italic": _vm.allowItalic, "allow-strike": _vm.allowStrike, "allow-underline": _vm.allowUnderline, "additional-extensions": _vm.additionalExtensions }, on: { "input": _vm.onInput, "enter": _vm.onSend }, model: { value: _vm.internalInputValue, callback: function($$v) {
+  }, "paste": _vm.onPaste, "mousedown": _vm.onMousedown } }, [_vm._t("top"), _vm.richText ? _c("dt-recipe-message-input-topbar", { key: _vm.selectedText, attrs: { "bold-button-options": _vm.boldButtonOptions, "italic-button-options": _vm.italicButtonOptions, "strike-button-options": _vm.strikeButtonOptions, "bullet-list-button-options": _vm.bulletListButtonOptions, "ordered-list-button-options": _vm.orderedListButtonOptions, "block-quote-button-options": _vm.blockQuoteButtonOptions, "code-button-options": _vm.codeButtonOptions, "code-block-button-options": _vm.codeBlockButtonOptions, "is-selection-active": _vm.isSelectionActive }, on: { "click": _vm.handleTopbarClick }, scopedSlots: _vm._u([{ key: "link", fn: function() {
+    return [_c("dt-recipe-message-input-link", { ref: "link", attrs: { "open": _vm.linkDialogOpen, "link-button-options": _vm.linkButtonOptions, "is-selection-active": _vm.isSelectionActive }, on: { "opened": _vm.linkDialogOpened, "set-link": _vm.setLink, "remove-link": _vm.removeLink } })];
+  }, proxy: true }], null, false, 1527282285) }) : _vm._e(), _c("div", { directives: [{ name: "dt-scrollbar", rawName: "v-dt-scrollbar" }], staticClass: "d-recipe-message-input__editor-wrapper", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._g(_vm._b({ ref: "richTextEditor", attrs: { "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": _vm.inputClass, "output-format": _vm.outputFormat, "auto-focus": _vm.autoFocus, "link": _vm.richText, "placeholder": _vm.placeholder, "prevent-typing": _vm.preventTyping, "mention-suggestion": _vm.mentionSuggestion, "channel-suggestion": _vm.channelSuggestion, "slash-command-suggestion": _vm.slashCommandSuggestion, "allow-blockquote": _vm.richText, "allow-bold": _vm.richText, "allow-bullet-list": _vm.richText, "allow-code": _vm.richText, "allow-codeblock": _vm.richText, "allow-italic": _vm.richText, "allow-strike": _vm.richText, "allow-underline": _vm.richText, "additional-extensions": _vm.additionalExtensions, "hide-link-bubble-menu": _vm.hideLinkBubbleMenu }, on: { "input": _vm.onInput, "text-input": _vm.onTextInput, "enter": _vm.onSend, "selected": function($event) {
+    _vm.selectedText = $event;
+  }, "edit-link": _vm.initLinkDialog, "focus": function($event) {
+    _vm.isFocused = true;
+  }, "blur": function($event) {
+    _vm.isFocused = false;
+  } }, model: { value: _vm.internalInputValue, callback: function($$v) {
     _vm.internalInputValue = $$v;
   }, expression: "internalInputValue" } }, "dt-rich-text-editor", _vm.$attrs, false), _vm.$listeners))], 1), _vm._t("middle"), _c("section", { staticClass: "d-recipe-message-input__bottom-section" }, [_c("div", { staticClass: "d-recipe-message-input__bottom-section-left" }, [_c("dt-stack", { attrs: { "direction": "row", "gap": "200" } }, [_vm.showImagePicker ? _c("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip:top-start", value: (_a = _vm.showImagePicker) == null ? void 0 : _a.tooltipLabel, expression: "showImagePicker?.tooltipLabel", arg: "top-start" }], staticClass: "d-recipe-message-input__button", attrs: { "data-qa": "dt-recipe-message-input-image-btn", "size": "sm", "kind": "muted", "importance": "clear", "aria-label": _vm.showImagePicker.ariaLabel }, on: { "click": _vm.onSelectImage, "mouseenter": function($event) {
     _vm.imagePickerFocus = true;
@@ -497,7 +682,7 @@ var _sfc_render = function render() {
     _vm.imagePickerFocus = false;
   } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
     return [_c("dt-icon-image", { attrs: { "size": "300" } })];
-  }, proxy: true }], null, false, 4195307205) }) : _vm._e(), _c("dt-input", { ref: "messageInputImageUpload", staticClass: "d-recipe-message-input__image-input", attrs: { "data-qa": "dt-recipe-message-input-image-input", "accept": "image/*, video/*", "type": "file", "multiple": "", "hidden": "" }, on: { "input": _vm.onImageUpload } }), _vm.showEmojiPicker ? _c("dt-popover", { attrs: { "data-qa": "dt-recipe-message-input-emoji-picker-popover", "initial-focus-element": "#searchInput", "padding": "none" }, scopedSlots: _vm._u([{ key: "anchor", fn: function({ attrs }) {
+  }, proxy: true }], null, false, 4195307205) }) : _vm._e(), _c("dt-input", { ref: "messageInputImageUpload", staticClass: "d-recipe-message-input__image-input", attrs: { "data-qa": "dt-recipe-message-input-image-input", "accept": "image/*, video/*", "type": "file", "multiple": "", "hidden": "" }, on: { "input": _vm.onImageUpload } }), _vm.showEmojiPicker ? _c("dt-popover", { attrs: { "open.sync": "emojiPickerOpened", "data-qa": "dt-recipe-message-input-emoji-picker-popover", "initial-focus-element": "#searchInput", "padding": "none" }, scopedSlots: _vm._u([{ key: "anchor", fn: function({ attrs }) {
     return [_c("dt-button", _vm._b({ directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: _vm.emojiTooltipMessage, expression: "emojiTooltipMessage" }], staticClass: "d-recipe-message-input__button", attrs: { "data-qa": "dt-recipe-message-input-emoji-picker-btn", "size": "sm", "kind": "muted", "importance": "clear", "aria-label": _vm.emojiButtonAriaLabel }, on: { "click": _vm.toggleEmojiPicker, "mouseenter": function($event) {
       _vm.emojiPickerFocus = true;
     }, "mouseleave": function($event) {
@@ -511,9 +696,7 @@ var _sfc_render = function render() {
     }, proxy: true }], null, true) }, "dt-button", attrs, false))];
   } }, { key: "content", fn: function({ close }) {
     return [_c("dt-emoji-picker", _vm._b({ on: { "skin-tone": _vm.onSkinTone, "selected-emoji": (emoji) => _vm.onSelectEmoji(emoji, close) } }, "dt-emoji-picker", _vm.emojiPickerProps, false))];
-  } }], null, false, 3974835042), model: { value: _vm.emojiPickerOpened, callback: function($$v) {
-    _vm.emojiPickerOpened = $$v;
-  }, expression: "emojiPickerOpened" } }) : _vm._e(), _vm._t("emojiGiphyPicker")], 2)], 1), _c("div", { staticClass: "d-recipe-message-input__bottom-section-right" }, [_c("dt-stack", { attrs: { "direction": "row", "gap": "300" } }, [_c("div", { staticClass: "d-recipe-message-input__sms-count" }, [_vm._t("smsCount")], 2), Boolean(_vm.showCharacterLimit) ? _c("dt-tooltip", { staticClass: "d-recipe-message-input__remaining-char-tooltip", attrs: { "placement": "top-end", "enabled": _vm.characterLimitTooltipEnabled, "message": _vm.showCharacterLimit.message, "offset": [10, 8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+  } }], null, false, 3974835042) }) : _vm._e(), _vm._t("emojiGiphyPicker")], 2)], 1), _c("div", { staticClass: "d-recipe-message-input__bottom-section-right" }, [_c("dt-stack", { attrs: { "direction": "row", "gap": "300" } }, [_c("div", { staticClass: "d-recipe-message-input__sms-count" }, [_vm._t("smsCount")], 2), Boolean(_vm.showCharacterLimit) ? _c("dt-tooltip", { staticClass: "d-recipe-message-input__remaining-char-tooltip", attrs: { "placement": "top-end", "enabled": _vm.characterLimitTooltipEnabled, "message": _vm.showCharacterLimit.message, "offset": [10, 8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("p", { directives: [{ name: "show", rawName: "v-show", value: _vm.displayCharacterLimitWarning, expression: "displayCharacterLimitWarning" }], staticClass: "d-recipe-message-input__remaining-char", attrs: { "data-qa": "dt-recipe-message-input-character-limit" } }, [_vm._v(" " + _vm._s(_vm.showCharacterLimit.count - _vm.inputLength) + " ")])];
   }, proxy: true }], null, false, 1021505058) }) : _vm._e(), _vm.showCancel ? _c("dt-button", { staticClass: "d-recipe-message-input__button d-recipe-message-input__cancel-button", attrs: { "data-qa": "dt-recipe-message-input-cancel-button", "size": "sm", "kind": "muted", "importance": "clear", "aria-label": _vm.showCancel.ariaLabel }, on: { "click": _vm.onCancel } }, [_c("p", [_vm._v(_vm._s(_vm.showCancel.text))])]) : _vm._e(), _vm._t("sendButton", function() {
     var _a2;