@mekari/pixel3-rich-text-editor 0.0.18 → 0.1.0-dev.1

package/dist/index.js

@@ -37,8 +37,8 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/rich-text-editor.tsx
-var import_vue18 = require("vue");
-var import_vue19 = require("vue");
+var import_vue20 = require("vue");
+var import_vue21 = require("vue");
 var import_pixel3_utils4 = require("@mekari/pixel3-utils");
 
 // src/modules/rich-text-editor.props.ts
@@ -70,6 +70,10 @@ var richTextEditorProps = {
   hasBorder: {
     type: Boolean,
     default: true
+  },
+  suggestions: {
+    type: Array,
+    default: () => []
   }
 };
 var RTEStyleProviderProps = {
@@ -77,7 +81,7 @@ var RTEStyleProviderProps = {
     type: String
   }
 };
-var richTextEditorEmits = (0, import_pixel3_utils.declareEmit)(["change", "blur", "focus"]);
+var richTextEditorEmits = (0, import_pixel3_utils.declareEmit)(["change", "blur", "focus", "action", "paste"]);
 
 // src/modules/rich-text-editor.hooks.ts
 var import_vue = require("vue");
@@ -92,6 +96,7 @@ function richTextEditorConnect(state, classes) {
     placeholder,
     maxlength,
     options,
+    suggestions,
     hasBorder,
     isInvalid,
     isDisabled
@@ -103,6 +108,7 @@ function richTextEditorConnect(state, classes) {
     placeholder,
     maxlength,
     options,
+    suggestions,
     isInvalid,
     isDisabled,
     rootProps: {
@@ -154,13 +160,14 @@ var useRTEStyleProvider = /* @__PURE__ */ __name((props) => {
 }, "useRTEStyleProvider");
 
 // src/rich-text-editor.tsx
-var import_vue_3 = require("@tiptap/vue-3");
+var import_vue_32 = require("@tiptap/vue-3");
 var import_starter_kit = __toESM(require("@tiptap/starter-kit"));
 var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
 var import_extension_text_align = __toESM(require("@tiptap/extension-text-align"));
 var import_extension_text_style = __toESM(require("@tiptap/extension-text-style"));
 var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"));
 var import_extension_character_count = __toESM(require("@tiptap/extension-character-count"));
+var import_extension_mention = __toESM(require("@tiptap/extension-mention"));
 var import_extension_color = require("@tiptap/extension-color");
 var import_extension_link = __toESM(require("@tiptap/extension-link"));
 var import_extension_highlight = __toESM(require("@tiptap/extension-highlight"));
@@ -170,6 +177,9 @@ var import_pixel3_form_control = require("@mekari/pixel3-form-control");
 // src/editor-toolbar.tsx
 var import_vue14 = require("vue");
 var import_vue15 = require("vue");
+var import_css5 = require("@mekari/pixel3-styled-system/css");
+var import_pixel3_divider = require("@mekari/pixel3-divider");
+var import_pixel3_scrollbar = require("@mekari/pixel3-scrollbar");
 
 // src/extensions/heading-extension.tsx
 var import_vue4 = require("vue");
@@ -499,6 +509,74 @@ var CaretIcon = (0, import_vue3.defineComponent)({
     }, null)]);
   }
 });
+var ImageIcon = (0, import_vue3.defineComponent)({
+  name: "ImageIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "xmlns": "http://www.w3.org/2000/svg",
+      "width": "20",
+      "height": "20",
+      "viewBox": "0 0 20 20",
+      "fill": "none"
+    }, [(0, import_vue2.createVNode)("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      "d": "M9.13948 1.25H10.8605C12.3328 1.24998 13.5133 1.24997 14.4405 1.37376C15.4002 1.50189 16.2001 1.77481 16.8347 2.4051C17.4701 3.03609 17.7459 3.83259 17.8753 4.78811C18 5.70986 18 6.88312 18 8.34439V11.6556C18 13.1169 18 14.2901 17.8753 15.2119C17.7459 16.1674 17.4701 16.9639 16.8347 17.5949C16.2001 18.2252 15.4002 18.4981 14.4405 18.6262C13.5133 18.75 12.3328 18.75 10.8605 18.75H9.13947C7.66718 18.75 6.48666 18.75 5.55953 18.6262C4.59985 18.4981 3.79994 18.2252 3.16528 17.5949C2.58896 17.0226 2.30764 16.313 2.16398 15.4695C1.99993 14.5064 1.99996 13.2565 2 11.6731L2 8.34442C1.99998 6.88313 1.99997 5.70987 2.12475 4.78811C2.25411 3.83259 2.5299 3.03609 3.16528 2.4051C3.79994 1.77481 4.59985 1.50189 5.55953 1.37376C6.48666 1.24997 7.66719 1.24998 9.13948 1.25ZM5.75805 2.86056C4.96282 2.96674 4.53137 3.16245 4.22226 3.46942C3.91387 3.77568 3.71778 4.20206 3.61119 4.98935C3.50162 5.79875 3.5 6.87016 3.5 8.4V11.6C3.5 12.5721 3.50087 13.3576 3.52902 14.0064L6.03954 12.2878C6.94782 11.6827 8.2354 11.7423 9.0689 12.4535L9.07527 12.4589L9.33734 12.6877C9.68567 12.9822 10.2858 12.9815 10.6328 12.6855L13.984 9.82945C14.6747 9.24036 15.6655 9.09888 16.5 9.40545V8.4C16.5 6.87016 16.4984 5.79875 16.3888 4.98935C16.2822 4.20206 16.0861 3.77568 15.7777 3.46942C15.4686 3.16245 15.0372 2.96674 14.242 2.86056C13.4257 2.75157 12.3456 2.75 10.8056 2.75H9.19445C7.65442 2.75 6.57433 2.75157 5.75805 2.86056ZM16.2474 10.9638L16.5 11.1945V11.6C16.5 13.1298 16.4984 14.2013 16.3888 15.0107C16.2822 15.7979 16.0861 16.2243 15.7777 16.5306C15.4686 16.8376 15.0372 17.0333 14.242 17.1394C13.4257 17.2484 12.3456 17.25 10.8056 17.25H9.19445C7.65442 17.25 6.57433 17.2484 5.75805 17.1394C4.96282 17.0333 4.53137 16.8376 4.22226 16.5306C4.01416 16.3239 3.85786 16.0633 3.74539 15.6761L6.87456 13.534C7.23802 13.2943 7.78269 13.3303 8.09262 13.5923L8.35477 13.8211L8.36118 13.8266C9.26993 14.6019 10.6976 14.6019 11.6063 13.8266L14.9572 10.9709C15.3024 10.6764 15.8983 10.6739 16.2474 10.9638ZM5.22222 6.8C5.22222 5.49725 6.28423 4.45 7.58334 4.45C8.88244 4.45 9.94445 5.49725 9.94445 6.8C9.94445 8.10276 8.88244 9.15 7.58334 9.15C6.28423 9.15 5.22222 8.10276 5.22222 6.8Z",
+      "fill": "currentColor"
+    }, null)]);
+  }
+});
+var FileIcon = (0, import_vue3.defineComponent)({
+  name: "FileIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "xmlns": "http://www.w3.org/2000/svg",
+      "width": "18",
+      "height": "17",
+      "viewBox": "0 0 18 17",
+      "fill": "none"
+    }, [(0, import_vue2.createVNode)("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      "d": "M11.6901 2.47169C10.3906 1.1761 8.28282 1.1761 6.98332 2.47169L3.07076 6.37248C0.976415 8.46053 0.976415 11.845 3.07076 13.933C5.16636 16.0223 8.56492 16.0223 10.6605 13.933L16.2205 8.3898C16.5138 8.09734 16.9887 8.09806 17.2811 8.39139C17.5736 8.68473 17.5729 9.1596 17.2795 9.45205L11.7196 14.9953C9.03856 17.6682 4.69271 17.6682 2.0117 14.9953C-0.670564 12.3211 -0.670564 7.98442 2.0117 5.31022L5.92426 1.40943C7.80917 -0.469814 10.8643 -0.469812 12.7492 1.40943C14.6354 3.28992 14.6354 6.33973 12.7492 8.22022L8.83664 12.121C7.74783 13.2066 5.98345 13.2066 4.89464 12.121C3.80458 11.0342 3.80458 9.27127 4.89464 8.18449L8.8072 4.2837C9.10053 3.99125 9.5754 3.99196 9.86786 4.2853C10.1603 4.57863 10.1596 5.0535 9.86626 5.34596L5.9537 9.24675C5.45156 9.74738 5.45156 10.5581 5.9537 11.0588C6.45709 11.5606 7.27419 11.5606 7.77758 11.0588L11.6901 7.15797C12.9884 5.86363 12.9884 3.76603 11.6901 2.47169Z",
+      "fill": "currentColor"
+    }, null)]);
+  }
+});
+var AudioIcon = (0, import_vue3.defineComponent)({
+  name: "AudioIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "xmlns": "http://www.w3.org/2000/svg",
+      "width": "20",
+      "height": "20",
+      "viewBox": "0 0 20 20",
+      "fill": "none"
+    }, [(0, import_vue2.createVNode)("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      "d": "M6.32334 4.94737C6.32334 2.91036 7.96446 1.25 10 1.25C12.0355 1.25 13.6767 2.91036 13.6767 4.94737V10C13.6767 12.037 12.0355 13.6974 10 13.6974C7.96446 13.6974 6.32334 12.037 6.32334 10V4.94737ZM10 2.75C8.80284 2.75 7.82334 3.7288 7.82334 4.94737V10C7.82334 11.2186 8.80284 12.1974 10 12.1974C11.1972 12.1974 12.1767 11.2186 12.1767 10V4.94737C12.1767 3.7288 11.1972 2.75 10 2.75ZM14.9948 9.67107C15.409 9.66825 15.7471 10.0017 15.7499 10.4159C15.7686 13.1719 13.4277 15.3958 10.75 15.7526L10.75 17.25H11.6724C12.0866 17.25 12.4224 17.5858 12.4224 18C12.4224 18.4142 12.0866 18.75 11.6724 18.75H8.3276C7.91339 18.75 7.5776 18.4142 7.5776 18C7.5776 17.5858 7.91339 17.25 8.3276 17.25H9.24997L9.24996 15.7526C6.57163 15.3957 4.25 13.1696 4.25 10.4211C4.25 10.0068 4.58579 9.67105 5 9.67105C5.41421 9.67105 5.75 10.0068 5.75 10.4211C5.75 12.4712 7.71926 14.3026 9.99995 14.3026C12.2856 14.3026 14.2638 12.4679 14.2499 10.4262C14.2471 10.012 14.5806 9.67389 14.9948 9.67107Z",
+      "fill": "currentColor"
+    }, null)]);
+  }
+});
+var MentionIcon = (0, import_vue3.defineComponent)({
+  name: "MentionIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "xmlns": "http://www.w3.org/2000/svg",
+      "width": "18",
+      "height": "18",
+      "viewBox": "0 0 18 18",
+      "fill": "none"
+    }, [(0, import_vue2.createVNode)("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      "d": "M5.04155 0.82474C6.82687 -0.0106618 8.84196 -0.218789 10.7603 0.234079C12.6787 0.686946 14.388 1.77428 15.6112 3.3199C16.8345 4.86553 17.5 6.7789 17.5 8.75V9.55C17.5 10.3854 17.1681 11.1866 16.5774 11.7774C15.9866 12.3681 15.1854 12.7 14.35 12.7C13.5146 12.7 12.7134 12.3681 12.1226 11.7774C11.9824 11.6371 11.8567 11.485 11.7466 11.3234C11.0222 12.1662 9.94841 12.7 8.74991 12.7C6.56839 12.7 4.79991 10.9315 4.79991 8.74999C4.79991 6.56847 6.56839 4.79999 8.74991 4.79999C9.67546 4.79999 10.5267 5.11833 11.2 5.65148V5.55C11.2 5.13579 11.5358 4.8 11.95 4.8C12.3642 4.8 12.7 5.13579 12.7 5.55V9.55C12.7 9.98761 12.8738 10.4073 13.1833 10.7167C13.4927 11.0262 13.9124 11.2 14.35 11.2C14.7876 11.2 15.2073 11.0262 15.5167 10.7167C15.8262 10.4073 16 9.98761 16 9.55V8.75C16 7.1168 15.4486 5.53144 14.435 4.25078C13.4215 2.97012 12.0052 2.06919 10.4157 1.69395C8.8262 1.31872 7.15655 1.49117 5.67729 2.18336C4.19802 2.87555 2.9958 4.04692 2.26541 5.50771C1.53502 6.96849 1.31925 8.63309 1.65306 10.2318C1.98687 11.8305 2.85069 13.2697 4.10459 14.3162C5.35848 15.3627 6.92898 15.9551 8.56164 15.9976C10.1943 16.04 11.7934 15.5299 13.1 14.55C13.4314 14.3015 13.9015 14.3686 14.15 14.7C14.3985 15.0314 14.3314 15.5015 14 15.75C12.4231 16.9327 10.4931 17.5483 8.52266 17.497C6.55222 17.4458 4.65679 16.7308 3.14347 15.4678C1.63015 14.2048 0.587595 12.4679 0.184723 10.5384C-0.218148 8.6089 0.0422661 6.5999 0.923772 4.83689C1.80528 3.07387 3.25623 1.66014 5.04155 0.82474ZM8.74991 6.29999C7.39682 6.29999 6.29991 7.3969 6.29991 8.74999C6.29991 10.1031 7.39682 11.2 8.74991 11.2C10.103 11.2 11.1999 10.1031 11.1999 8.74999C11.1999 7.3969 10.103 6.29999 8.74991 6.29999Z",
+      "fill": "currentColor"
+    }, null)]);
+  }
+});
 
 // src/extensions/heading-extension.tsx
 var HeadingExtention = (0, import_vue5.defineComponent)({
@@ -516,7 +594,8 @@ var HeadingExtention = (0, import_vue5.defineComponent)({
     editor
   }) {
     return () => (0, import_vue4.createVNode)(import_pixel3_popover.MpPopover, {
-      "id": "popover-heading-extention"
+      "id": "popover-heading-extention",
+      "usePortal": true
     }, {
       default: () => [(0, import_vue4.createVNode)(import_pixel3_popover.MpPopoverTrigger, null, {
         default: () => [(0, import_vue4.withDirectives)((0, import_vue4.createVNode)("button", {
@@ -587,84 +666,55 @@ var HeadingExtention = (0, import_vue5.defineComponent)({
         })
       }, {
         default: () => [(0, import_vue4.createVNode)(import_pixel3_popover.MpPopoverList, {
-          "class": (0, import_css.css)({
-            gap: "2",
-            alignItems: "flex-start",
-            paddingLeft: "3"
-          })
+          "data-pixel-rte": true
         }, {
           default: () => [(0, import_vue4.createVNode)(import_pixel3_popover.MpPopoverListItem, {
-            "class": {
-              "is-active": editor == null ? void 0 : editor.isActive("heading", {
-                level: 1
-              }),
-              "text-sizing": true
-            },
+            "is-active": editor == null ? void 0 : editor.isActive("heading", {
+              level: 1
+            }),
             "onClick": () => (editor == null ? void 0 : editor.chain()).focus().toggleHeading({
               level: 1
             }).run()
           }, {
             default: () => [(0, import_vue4.createVNode)(import_pixel3_text.MpText, {
               "as": "h1",
-              "size": "h1",
-              "class": (0, import_css.css)({
-                color: "currentColor"
-              })
+              "size": "h1"
             }, {
               default: () => [(0, import_vue4.createTextVNode)("Heading 1")]
             })]
           }), (0, import_vue4.createVNode)(import_pixel3_popover.MpPopoverListItem, {
-            "class": {
-              "is-active": editor == null ? void 0 : editor.isActive("heading", {
-                level: 2
-              }),
-              "text-sizing": true
-            },
+            "is-active": editor == null ? void 0 : editor.isActive("heading", {
+              level: 2
+            }),
             "onClick": () => (editor == null ? void 0 : editor.chain()).focus().toggleHeading({
               level: 2
             }).run()
           }, {
             default: () => [(0, import_vue4.createVNode)(import_pixel3_text.MpText, {
               "as": "h2",
-              "size": "h2",
-              "class": (0, import_css.css)({
-                color: "currentColor"
-              })
+              "size": "h2"
             }, {
               default: () => [(0, import_vue4.createTextVNode)("Heading 2")]
             })]
           }), (0, import_vue4.createVNode)(import_pixel3_popover.MpPopoverListItem, {
-            "class": {
-              "is-active": editor == null ? void 0 : editor.isActive("heading", {
-                level: 3
-              }),
-              "text-sizing": true
-            },
+            "is-active": editor == null ? void 0 : editor.isActive("heading", {
+              level: 3
+            }),
             "onClick": () => (editor == null ? void 0 : editor.chain()).focus().toggleHeading({
               level: 3
             }).run()
           }, {
             default: () => [(0, import_vue4.createVNode)(import_pixel3_text.MpText, {
               "as": "h3",
-              "size": "h3",
-              "class": (0, import_css.css)({
-                color: "currentColor"
-              })
+              "size": "h3"
             }, {
               default: () => [(0, import_vue4.createTextVNode)("Heading 3")]
             })]
           }), (0, import_vue4.createVNode)(import_pixel3_popover.MpPopoverListItem, {
-            "class": {
-              "is-active": editor == null ? void 0 : editor.isActive("paragraph"),
-              "text-sizing": true
-            },
+            "is-active": editor == null ? void 0 : editor.isActive("paragraph"),
             "onClick": () => (editor == null ? void 0 : editor.chain()).focus().setParagraph().run()
           }, {
-            default: () => [(0, import_vue4.createVNode)(import_pixel3_text.MpText, {
-              "class": (0, import_css.css)({
-                color: "currentColor"
-              })
-            }, {
+            default: () => [(0, import_vue4.createVNode)(import_pixel3_text.MpText, null, {
               default: () => [(0, import_vue4.createTextVNode)("Normal text")]
             })]
           })]
@@ -699,7 +749,8 @@ var AlignExtention = (0, import_vue7.defineComponent)({
       });
     }, "isActiveAlignment");
     return () => (0, import_vue6.createVNode)(import_pixel3_popover2.MpPopover, {
-      "id": "popover-align-extention"
+      "id": "popover-align-extention",
+      "usePortal": true
     }, {
       default: () => [(0, import_vue6.createVNode)(import_pixel3_popover2.MpPopoverTrigger, null, {
         default: () => [(0, import_vue6.withDirectives)((0, import_vue6.createVNode)("button", {
@@ -721,40 +772,25 @@ var AlignExtention = (0, import_vue7.defineComponent)({
         })
       }, {
         default: () => [(0, import_vue6.createVNode)(import_pixel3_popover2.MpPopoverList, {
-          "class": (0, import_css2.css)({
-            gap: "2",
-            alignItems: "center"
-          })
+          "data-pixel-rte": true
         }, {
           default: () => [(0, import_vue6.createVNode)(import_pixel3_popover2.MpPopoverListItem, {
-            "class": {
-              "is-active": isActiveAlignment("left"),
-              "text-sizing": true
-            },
+            "is-active": isActiveAlignment("left"),
             "onClick": () => (editor == null ? void 0 : editor.chain()).focus().setTextAlign("left").run()
           }, {
             default: () => [(0, import_vue6.createVNode)(AlignLeftIcon, null, null)]
           }), (0, import_vue6.createVNode)(import_pixel3_popover2.MpPopoverListItem, {
-            "class": {
-              "is-active": isActiveAlignment("center"),
-              "text-sizing": true
-            },
+            "is-active": isActiveAlignment("center"),
             "onClick": () => (editor == null ? void 0 : editor.chain()).focus().setTextAlign("center").run()
           }, {
             default: () => [(0, import_vue6.createVNode)(AlignCenterIcon, null, null)]
           }), (0, import_vue6.createVNode)(import_pixel3_popover2.MpPopoverListItem, {
-            "class": {
-              "is-active": isActiveAlignment("right"),
-              "text-sizing": true
-            },
+            "is-active": isActiveAlignment("right"),
             "onClick": () => (editor == null ? void 0 : editor.chain()).focus().setTextAlign("right").run()
           }, {
             default: () => [(0, import_vue6.createVNode)(AlignRightIcon, null, null)]
           }), (0, import_vue6.createVNode)(import_pixel3_popover2.MpPopoverListItem, {
-            "class": {
-              "is-active": isActiveAlignment("justify"),
-              "text-sizing": true
-            },
+            "is-active": isActiveAlignment("justify"),
             "onClick": () => (editor == null ? void 0 : editor.chain()).focus().setTextAlign("justify").run()
           }, {
             default: () => [(0, import_vue6.createVNode)(AlignJustifyIcon, null, null)]
@@ -800,7 +836,11 @@ var SingleExtention = (0, import_vue9.defineComponent)({
       orderedList: (0, import_vue8.createVNode)(OrderedListIcon, null, null),
       undo: (0, import_vue8.createVNode)(UndoIcon, null, null),
       redo: (0, import_vue8.createVNode)(RedoIcon, null, null),
-      clear: (0, import_vue8.createVNode)(ClearIcon, null, null)
+      clear: (0, import_vue8.createVNode)(ClearIcon, null, null),
+      image: (0, import_vue8.createVNode)(ImageIcon, null, null),
+      file: (0, import_vue8.createVNode)(FileIcon, null, null),
+      audio: (0, import_vue8.createVNode)(AudioIcon, null, null),
+      mention: (0, import_vue8.createVNode)(MentionIcon, null, null)
     };
     return () => (0, import_vue8.withDirectives)((0, import_vue8.createVNode)("button", {
       "class": {
@@ -864,6 +904,7 @@ var ColorExtension = (0, import_vue11.defineComponent)({
       "preset": colorPreset,
       "variant": "basic",
       "placement": "bottom-start",
+      "usePortal": true,
       "isShowPreset": true,
       "isShowInput": false,
       "class": (0, import_css3.css)({
@@ -928,6 +969,7 @@ var LinkExtension = (0, import_vue13.defineComponent)({
             popperInstance.destroy();
           }
           popperInstance = (0, import_core.createPopper)(target, popoverRef.value, {
+            strategy: "fixed",
             onFirstUpdate: () => {
               if (popperInstance) {
                 popperInstance.setOptions({
@@ -986,6 +1028,14 @@ var LinkExtension = (0, import_vue13.defineComponent)({
       }
       onClosePopover();
     }, "onSetLink");
+    const onOpenInNewTab = /* @__PURE__ */ __name(() => {
+      const trimmedUrl = url.value.trim();
+      if (!trimmedUrl) {
+        return;
+      }
+      const normalizedUrl = /^(https?:)?\/\//i.test(trimmedUrl) ? trimmedUrl : `https://${trimmedUrl}`;
+      window.open(normalizedUrl, "_blank", "noopener,noreferrer");
+    }, "onOpenInNewTab");
     const onClosePopover = /* @__PURE__ */ __name(() => {
       isShowPopover.value = false;
       editor == null ? void 0 : editor.commands.setTextSelection({
@@ -1029,10 +1079,9 @@ var LinkExtension = (0, import_vue13.defineComponent)({
       default: () => [(0, import_vue12.createVNode)("div", {
         "ref": popoverRef,
         "data-pixel-rte": true,
-        "style": {
-          position: "absolute",
-          zIndex: "var(--mp-z-index-popover)"
-        }
+        "class": (0, import_css4.css)({
+          zIndex: "popover"
+        })
       }, [(0, import_vue12.createVNode)("div", {
         "class": (0, import_css4.css)({
           display: "flex",
@@ -1065,6 +1114,11 @@ var LinkExtension = (0, import_vue13.defineComponent)({
       }, null) : (0, import_vue12.createVNode)(import_pixel3_button.MpButton, {
         "leftIcon": "check",
         "onClick": onSetLink
+      }, null), isEditLink.value && (0, import_vue12.createVNode)(import_pixel3_button.MpButton, {
+        "leftIcon": "newtab",
+        "variant": "ghost",
+        "isDisabled": !url.value.trim(),
+        "onClick": onOpenInNewTab
       }, null), isEditLink.value ? (0, import_vue12.createVNode)(import_pixel3_button.MpButton, {
         "leftIcon": "delete",
         "variant": "ghost",
@@ -1079,9 +1133,9 @@ var LinkExtension = (0, import_vue13.defineComponent)({
 });
 
 // src/editor-toolbar.tsx
-var import_pixel3_divider = require("@mekari/pixel3-divider");
 var EditorToolbar = (0, import_vue15.defineComponent)({
   name: "EditorToolbar",
+  emits: ["clickImage", "clickFile", "clickAudio"],
   props: {
     editor: {
       type: Object
@@ -1093,8 +1147,10 @@ var EditorToolbar = (0, import_vue15.defineComponent)({
   setup({
     editor,
     options
+  }, {
+    emit
   }) {
-    const items = ["heading", "bold", "italic", "underline", "strike", "blockquote", "bulletList", "orderedList", "textColor", "fillColor", "textLink", "align", "undo", "redo", "clear"];
+    const items = ["heading", "bold", "italic", "underline", "strike", "blockquote", "bulletList", "orderedList", "textColor", "fillColor", "textLink", "align", "undo", "redo", "clear", "image", "file", "audio", "mention"];
     const itemOptions = {
       heading: {
         tooltipLabel: "Text style",
@@ -1157,52 +1213,104 @@ var EditorToolbar = (0, import_vue15.defineComponent)({
       clear: {
         tooltipLabel: "Reset format",
         onClick: () => (editor == null ? void 0 : editor.chain()).focus().unsetAllMarks().run()
+      },
+      image: {
+        tooltipLabel: "Add image",
+        onClick: () => emit("clickImage")
+      },
+      file: {
+        tooltipLabel: "Add file",
+        onClick: () => emit("clickFile")
+      },
+      audio: {
+        tooltipLabel: "Add audio",
+        onClick: () => emit("clickAudio")
+      },
+      mention: {
+        tooltipLabel: "Mention",
+        editor,
+        onClick: () => (editor == null ? void 0 : editor.chain()).focus().insertContent("@").run()
       }
     };
-    const renderExtension = /* @__PURE__ */ __name((item) => {
-      const options2 = itemOptions[item];
-      if (!options2)
+    const getResolvedItem = /* @__PURE__ */ __name((option) => {
+      if (typeof option === "string") {
+        return {
+          item: option
+        };
+      }
+      return {
+        item: option.value,
+        tooltip: option.tooltip
+      };
+    }, "getResolvedItem");
+    const renderExtension = /* @__PURE__ */ __name((option) => {
+      const {
+        item,
+        tooltip
+      } = getResolvedItem(option);
+      if (!items.includes(item))
+        return null;
+      const resolvedItem = item;
+      const resolvedOptions = itemOptions[resolvedItem];
+      if (!resolvedOptions)
         return null;
-      switch (item) {
+      const tooltipLabel = tooltip || resolvedOptions.tooltipLabel;
+      switch (resolvedItem) {
         case "heading":
           return (0, import_vue14.createVNode)(HeadingExtention, {
-            "tooltipLabel": options2.tooltipLabel,
+            "tooltipLabel": tooltipLabel,
             "editor": editor
           }, null);
         case "align":
           return (0, import_vue14.createVNode)(AlignExtention, {
-            "tooltipLabel": options2.tooltipLabel,
+            "tooltipLabel": tooltipLabel,
             "editor": editor
           }, null);
         case "textColor":
         case "fillColor":
           return (0, import_vue14.createVNode)(ColorExtension, {
-            "tooltipLabel": options2.tooltipLabel,
+            "tooltipLabel": tooltipLabel,
             "editor": editor,
-            "type": options2.type
+            "type": resolvedOptions.type
           }, null);
         case "textLink":
           return (0, import_vue14.createVNode)(LinkExtension, {
-            "tooltipLabel": options2.tooltipLabel,
+            "tooltipLabel": tooltipLabel,
             "editor": editor
           }, null);
         default:
           return (0, import_vue14.createVNode)(SingleExtention, {
-            "name": item,
-            "tooltipLabel": options2.tooltipLabel,
-            "onClick": options2.onClick,
+            "name": resolvedItem,
+            "tooltipLabel": tooltipLabel,
+            "onClick": resolvedOptions.onClick,
             "editor": editor
           }, null);
       }
     }, "renderExtension");
-    return () => (0, import_vue14.createVNode)("div", null, [options == null ? void 0 : options.map((option, index) => (0, import_vue14.createVNode)(import_vue14.Fragment, null, [option.map((item) => {
-      if (items.includes(item)) {
-        return renderExtension(item);
+    return () => (0, import_vue14.createVNode)(import_pixel3_scrollbar.MpScrollbar, {
+      "options": {
+        overflow: {
+          y: "hide",
+          x: "scroll"
+        }
       }
-    }), index !== (options == null ? void 0 : options.length) - 1 && (0, import_vue14.createVNode)(import_pixel3_divider.MpDivider, {
-      "id": "divider-toolbar",
-      "orientation": "vertical"
-    }, null)]))]);
+    }, {
+      default: () => [(0, import_vue14.createVNode)("div", {
+        "class": (0, import_css5.css)({
+          display: "flex",
+          alignItems: "stretch",
+          gap: "1"
+        })
+      }, [options == null ? void 0 : options.map((option, index) => (0, import_vue14.createVNode)(import_vue14.Fragment, null, [option.map((item) => {
+        const resolvedItem = typeof item === "string" ? item : item.value;
+        if (items.includes(resolvedItem)) {
+          return renderExtension(item);
+        }
+      }), index !== (options == null ? void 0 : options.length) - 1 && (0, import_vue14.createVNode)(import_pixel3_divider.MpDivider, {
+        "id": "divider-toolbar",
+        "orientation": "vertical"
+      }, null)]))])]
+    });
   }
 });
 
@@ -1223,8 +1331,334 @@ var MpRTEStyleProvider = (0, import_vue17.defineComponent)({
   }
 });
 
+// src/rte-suggestion.ts
+var import_vue_3 = require("@tiptap/vue-3");
+var import_core2 = require("@popperjs/core");
+
+// src/extensions/mention-list-extension.tsx
+var import_vue18 = require("vue");
+var import_vue19 = require("vue");
+var import_css6 = require("@mekari/pixel3-styled-system/css");
+var import_pixel3_avatar = require("@mekari/pixel3-avatar");
+var import_pixel3_popover3 = require("@mekari/pixel3-popover");
+var import_pixel3_text2 = require("@mekari/pixel3-text");
+var avatarVariantColors = ["violet", "lime", "amber", "sky", "pink", "teal", "rose", "stone"];
+var getAvatarVariantColor = /* @__PURE__ */ __name((index) => {
+  return avatarVariantColors[index % avatarVariantColors.length];
+}, "getAvatarVariantColor");
+var MentionList = (0, import_vue19.defineComponent)({
+  name: "MentionList",
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    command: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(props, {
+    expose
+  }) {
+    const selectedIndex = (0, import_vue19.ref)(0);
+    const listRef = (0, import_vue19.ref)(null);
+    const scrollToFocusedItem = /* @__PURE__ */ __name(() => {
+      (0, import_vue19.nextTick)(() => {
+        if (!listRef.value)
+          return;
+        const targetItem = listRef.value.querySelector('[data-active="true"], [data-highlight]');
+        if (targetItem) {
+          targetItem.scrollIntoView({
+            block: "nearest"
+          });
+        }
+      });
+    }, "scrollToFocusedItem");
+    (0, import_vue19.watch)(() => props.items, () => {
+      selectedIndex.value = 0;
+    });
+    const onSelect = /* @__PURE__ */ __name((index) => {
+      const item = props.items[index];
+      if (item) {
+        props.command({
+          ...item,
+          label: item.name
+        });
+      }
+    }, "onSelect");
+    const onKeyDown = /* @__PURE__ */ __name(({
+      event
+    }) => {
+      if (!props.items.length) {
+        return false;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const total = props.items.length;
+        selectedIndex.value = (selectedIndex.value + total - 1) % total;
+        scrollToFocusedItem();
+        return true;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        selectedIndex.value = (selectedIndex.value + 1) % props.items.length;
+        scrollToFocusedItem();
+        return true;
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        onSelect(selectedIndex.value);
+        return true;
+      }
+      return false;
+    }, "onKeyDown");
+    expose({
+      onKeyDown
+    });
+    return () => (0, import_vue18.createVNode)(import_pixel3_popover3.MpPopover, {
+      "id": "popover-rte-mention-list",
+      "is-manual": true,
+      "is-default-open": true,
+      "is-open": true
+    }, {
+      default: () => [(0, import_vue18.createVNode)(import_pixel3_popover3.MpPopoverContent, {
+        "class": (0, import_css6.css)({
+          width: "280px",
+          maxHeight: "284px",
+          overflowY: "auto"
+        })
+      }, {
+        default: () => [(0, import_vue18.createVNode)(import_pixel3_popover3.MpPopoverList, {
+          "ref": (element) => {
+            var _a;
+            if (!element) {
+              listRef.value = null;
+              return;
+            }
+            listRef.value = (_a = element.$el) != null ? _a : element;
+          },
+          "data-pixel-rte": true
+        }, {
+          default: () => [!props.items.length && (0, import_vue18.createVNode)(import_pixel3_text2.MpText, {
+            "color": "text.secondary",
+            "class": (0, import_css6.css)({
+              px: "3",
+              py: "2"
+            })
+          }, {
+            default: () => [(0, import_vue18.createTextVNode)("No result")]
+          }), props.items.map((item, index) => {
+            return (0, import_vue18.createVNode)(import_pixel3_popover3.MpPopoverListItem, {
+              "key": `${item.id}-${index}`,
+              "is-active": selectedIndex.value === index,
+              "onMousedown": (event) => event.preventDefault(),
+              "onMouseenter": () => {
+                selectedIndex.value = index;
+              },
+              "onClick": () => {
+                onSelect(index);
+              }
+            }, {
+              default: () => [(0, import_vue18.createVNode)("div", {
+                "class": (0, import_css6.css)({
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "2",
+                  width: "full",
+                  minWidth: "0"
+                })
+              }, [item.avatar && (0, import_vue18.createVNode)(import_pixel3_avatar.MpAvatar, {
+                "id": `avatar-rte-mention-${index}`,
+                "name": item.avatar,
+                "size": "lg",
+                "variant-color": getAvatarVariantColor(index)
+              }, null), (0, import_vue18.createVNode)("div", {
+                "class": (0, import_css6.css)({
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "flex-start",
+                  minWidth: "0",
+                  flex: "1 1 0%"
+                })
+              }, [(0, import_vue18.createVNode)(import_pixel3_text2.MpText, {
+                "size": "label",
+                "is-truncated": true
+              }, {
+                default: () => [item.name || "Unknown"]
+              }), item.description && (0, import_vue18.createVNode)(import_pixel3_text2.MpText, {
+                "size": "label-small",
+                "color": "text.secondary",
+                "is-truncated": true
+              }, {
+                default: () => [item.description]
+              })])])]
+            });
+          })]
+        })]
+      })]
+    });
+  }
+});
+
+// src/rte-suggestion.ts
+var MAX_SUGGESTION_ITEMS = 10;
+var getFilteredSuggestionItems = /* @__PURE__ */ __name((items, query) => {
+  const normalizedQuery = query.trim().toLowerCase();
+  return items.filter((item) => {
+    var _a, _b;
+    if (!normalizedQuery) {
+      return true;
+    }
+    const id = item.id.toLowerCase();
+    const label = ((_a = item.name) != null ? _a : "").toLowerCase();
+    const description = ((_b = item.description) != null ? _b : "").toLowerCase();
+    return id.includes(normalizedQuery) || label.includes(normalizedQuery) || description.includes(normalizedQuery);
+  }).slice(0, MAX_SUGGESTION_ITEMS);
+}, "getFilteredSuggestionItems");
+var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionItems = () => []) => {
+  return {
+    items: ({
+      query
+    }) => {
+      return getFilteredSuggestionItems(getSuggestionItems(), query);
+    },
+    render: () => {
+      let component = null;
+      let popperInstance = null;
+      let popoverWrapper = null;
+      let clientRectProvider;
+      let editorElement = null;
+      let removeOutsideListeners = null;
+      const destroyMentionPopover = /* @__PURE__ */ __name(() => {
+        removeOutsideListeners == null ? void 0 : removeOutsideListeners();
+        removeOutsideListeners = null;
+        popperInstance == null ? void 0 : popperInstance.destroy();
+        popperInstance = null;
+        popoverWrapper == null ? void 0 : popoverWrapper.remove();
+        popoverWrapper = null;
+        component == null ? void 0 : component.destroy();
+        component = null;
+      }, "destroyMentionPopover");
+      const isWithinMentionContext = /* @__PURE__ */ __name((target) => {
+        if (!(target instanceof Node)) {
+          return false;
+        }
+        return Boolean((editorElement == null ? void 0 : editorElement.contains(target)) || (popoverWrapper == null ? void 0 : popoverWrapper.contains(target)));
+      }, "isWithinMentionContext");
+      const setupOutsideListeners = /* @__PURE__ */ __name(() => {
+        if (!editorElement || removeOutsideListeners) {
+          return;
+        }
+        const handleDocumentFocusIn = /* @__PURE__ */ __name((event) => {
+          if (!isWithinMentionContext(event.target)) {
+            destroyMentionPopover();
+          }
+        }, "handleDocumentFocusIn");
+        const handleDocumentPointerDown = /* @__PURE__ */ __name((event) => {
+          if (!isWithinMentionContext(event.target)) {
+            destroyMentionPopover();
+          }
+        }, "handleDocumentPointerDown");
+        const handleEditorFocusOut = /* @__PURE__ */ __name((event) => {
+          if (!isWithinMentionContext(event.relatedTarget)) {
+            destroyMentionPopover();
+          }
+        }, "handleEditorFocusOut");
+        document.addEventListener("focusin", handleDocumentFocusIn);
+        document.addEventListener("mousedown", handleDocumentPointerDown, true);
+        document.addEventListener("touchstart", handleDocumentPointerDown, true);
+        editorElement.addEventListener("focusout", handleEditorFocusOut);
+        removeOutsideListeners = /* @__PURE__ */ __name(() => {
+          document.removeEventListener("focusin", handleDocumentFocusIn);
+          document.removeEventListener("mousedown", handleDocumentPointerDown, true);
+          document.removeEventListener("touchstart", handleDocumentPointerDown, true);
+          editorElement == null ? void 0 : editorElement.removeEventListener("focusout", handleEditorFocusOut);
+        }, "removeOutsideListeners");
+      }, "setupOutsideListeners");
+      const getVirtualElement = /* @__PURE__ */ __name(() => {
+        if (!clientRectProvider) {
+          return null;
+        }
+        return {
+          getBoundingClientRect: () => {
+            var _a;
+            return (_a = clientRectProvider == null ? void 0 : clientRectProvider()) != null ? _a : new DOMRect();
+          }
+        };
+      }, "getVirtualElement");
+      const updatePopoverPosition = /* @__PURE__ */ __name(() => {
+        const virtualElement = getVirtualElement();
+        if (!virtualElement || !popoverWrapper) {
+          return;
+        }
+        if (!popperInstance) {
+          popperInstance = (0, import_core2.createPopper)(virtualElement, popoverWrapper, {
+            placement: "bottom-start",
+            modifiers: [{
+              name: "offset",
+              options: {
+                offset: [0, 8]
+              }
+            }, {
+              name: "flip",
+              options: {
+                fallbackPlacements: ["top-start"]
+              }
+            }]
+          });
+          return;
+        }
+        popperInstance.update();
+      }, "updatePopoverPosition");
+      return {
+        onStart: (props) => {
+          clientRectProvider = props.clientRect;
+          editorElement = props.editor.view.dom;
+          component = new import_vue_3.VueRenderer(MentionList, {
+            editor: props.editor,
+            props: {
+              items: props.items,
+              command: props.command
+            }
+          });
+          popoverWrapper = document.createElement("div");
+          popoverWrapper.style.position = "absolute";
+          popoverWrapper.style.zIndex = "var(--mp-z-index-popover)";
+          if (component.element) {
+            popoverWrapper.append(component.element);
+          }
+          document.body.append(popoverWrapper);
+          setupOutsideListeners();
+          updatePopoverPosition();
+        },
+        onUpdate: (props) => {
+          clientRectProvider = props.clientRect;
+          component == null ? void 0 : component.updateProps({
+            items: props.items,
+            command: props.command
+          });
+          updatePopoverPosition();
+        },
+        onKeyDown: (props) => {
+          var _a, _b;
+          if (props.event.key === "Escape") {
+            destroyMentionPopover();
+            return true;
+          }
+          return (_b = (_a = component == null ? void 0 : component.ref) == null ? void 0 : _a.onKeyDown(props)) != null ? _b : false;
+        },
+        onExit: () => {
+          destroyMentionPopover();
+          editorElement = null;
+        }
+      };
+    }
+  };
+}, "createMentionSuggestion");
+
 // src/rich-text-editor.tsx
-var MpRichTextEditor = (0, import_vue19.defineComponent)({
+var MpRichTextEditor = (0, import_vue21.defineComponent)({
   name: "MpRichTextEditor",
   props: richTextEditorProps,
   emits: richTextEditorEmits,
@@ -1233,14 +1667,19 @@ var MpRichTextEditor = (0, import_vue19.defineComponent)({
   }) {
     const formControlProp = (0, import_pixel3_form_control.useFormControlContext)();
     const api = useRichTextEditor(props);
-    console.log(api.value);
-    const isFocused = (0, import_vue19.ref)(false);
+    const isFocused = (0, import_vue21.ref)(false);
     const {
       isNextTheme
     } = (0, import_pixel3_utils4.usePixelTheme)();
-    const editor = new import_vue_3.Editor({
+    const editor = new import_vue_32.Editor({
       content: api.value.value,
       editable: (formControlProp == null ? void 0 : formControlProp.value.isDisabled) === void 0 ? !api.value.isDisabled : !(formControlProp == null ? void 0 : formControlProp.value.isDisabled),
+      editorProps: {
+        handlePaste(_view, event) {
+          emit("paste", event);
+          return false;
+        }
+      },
       extensions: [import_starter_kit.default.configure({
         heading: {
           levels: [1, 2, 3]
@@ -1257,6 +1696,8 @@ var MpRichTextEditor = (0, import_vue19.defineComponent)({
         placeholder: api.value.placeholder || ""
       }), import_extension_character_count.default.configure({
         limit: api.value.maxlength
+      }), import_extension_mention.default.configure({
+        suggestion: createMentionSuggestion(() => props.suggestions || [])
       })],
       onFocus({
         editor: editor2,
@@ -1278,21 +1719,28 @@ var MpRichTextEditor = (0, import_vue19.defineComponent)({
         emit("change", editor2.getHTML(), editor2);
       }
     });
+    const onClickToolbar = /* @__PURE__ */ __name((name) => {
+      emit("action", name);
+    }, "onClickToolbar");
     return () => {
-      return (0, import_vue18.createVNode)("div", (0, import_vue18.mergeProps)(api.value.rootProps, {
+      return (0, import_vue20.createVNode)("div", (0, import_vue20.mergeProps)(api.value.rootProps, {
         "style": {
           "--mp-rich-text-editor--border-color-hover": (formControlProp == null ? void 0 : formControlProp.value.isInvalid) || api.value.isInvalid ? isNextTheme.value ? import_tokens.token.var("colors.border.danger") : import_tokens.token.var("colors.red.400") : isFocused.value ? isNextTheme.value ? import_tokens.token.var("colors.border.focused") : import_tokens.token.var("colors.blue.400") : isNextTheme.value ? import_tokens.token.var("colors.border.form") : import_tokens.token.var("colors.gray.400"),
           "--mp-rich-text-editor--border-color": (formControlProp == null ? void 0 : formControlProp.value.isInvalid) || api.value.isInvalid ? isNextTheme.value ? import_tokens.token.var("colors.border.danger") : import_tokens.token.var("colors.red.400") : isFocused.value ? isNextTheme.value ? import_tokens.token.var("colors.border.focused") : import_tokens.token.var("colors.blue.400") : isNextTheme.value ? import_tokens.token.var("colors.border.form") : import_tokens.token.var("colors.gray.100"),
           "--mp-rich-text-editor--box-shadow": isFocused.value ? isNextTheme.value ? import_tokens.token.var("shadows.focus") : import_tokens.token.var("shadows.outer") : void 0,
           "--mp-rich-text-editor--background-color": (formControlProp == null ? void 0 : formControlProp.value.isDisabled) || api.value.isDisabled ? isNextTheme.value ? import_tokens.token.var("colors.background.disabled") : import_tokens.token.var("colors.gray.50") : isNextTheme.value ? import_tokens.token.var("colors.background.neutral") : import_tokens.token.var("colors.white")
         }
-      }), [(0, import_vue18.createVNode)(EditorToolbar, (0, import_vue18.mergeProps)({
+      }), [(0, import_vue20.createVNode)(EditorToolbar, (0, import_vue20.mergeProps)({
         "editor": editor,
         "options": api.value.options
-      }, api.value.toolbarProps), null), (0, import_vue18.createVNode)(MpRTEStyleProvider, {
+      }, api.value.toolbarProps, {
+        "onClickImage": () => onClickToolbar("image"),
+        "onClickFile": () => onClickToolbar("file"),
+        "onClickAudio": () => onClickToolbar("audio")
+      }), null), (0, import_vue20.createVNode)(MpRTEStyleProvider, {
         "id": `${api.value.id}-style-provider`
       }, {
-        default: () => [(0, import_vue18.createVNode)(import_vue_3.EditorContent, (0, import_vue18.mergeProps)({
+        default: () => [(0, import_vue20.createVNode)(import_vue_32.EditorContent, (0, import_vue20.mergeProps)({
           "editor": editor
         }, api.value.areaProps), null)]
       })]);