@mekari/pixel3-rich-text-editor 0.0.7-dev.4 → 0.0.8-dev.0

package/dist/index.js

@@ -37,8 +37,8 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/rich-text-editor.tsx
-var import_vue14 = require("vue");
-var import_vue15 = require("vue");
+var import_vue18 = require("vue");
+var import_vue19 = require("vue");
 
 // src/modules/rich-text-editor.props.ts
 var import_pixel3_utils = require("@mekari/pixel3-utils");
@@ -149,14 +149,27 @@ var useRTEStyleProvider = /* @__PURE__ */ __name((props) => {
 
 // src/rich-text-editor.tsx
 var import_vue_3 = 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_color = require("@tiptap/extension-color");
+var import_extension_link = __toESM(require("@tiptap/extension-link"));
+var import_extension_highlight = __toESM(require("@tiptap/extension-highlight"));
+var import_tokens = require("@mekari/pixel3-styled-system/tokens");
+var import_pixel3_form_control = require("@mekari/pixel3-form-control");
 
 // src/editor-toolbar.tsx
-var import_vue10 = require("vue");
-var import_vue11 = require("vue");
+var import_vue14 = require("vue");
+var import_vue15 = require("vue");
 
 // src/extensions/heading-extension.tsx
 var import_vue4 = require("vue");
 var import_vue5 = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var import_pixel3_text = require("@mekari/pixel3-text");
+var import_pixel3_popover = require("@mekari/pixel3-popover");
 
 // src/extensions/icons.tsx
 var import_vue2 = require("vue");
@@ -165,17 +178,16 @@ var BoldIcon = (0, import_vue3.defineComponent)({
   name: "BoldIcon",
   setup() {
     return () => (0, import_vue2.createVNode)("svg", {
-      "width": "12",
-      "height": "16",
-      "viewBox": "0 0 12 16",
+      "width": "20",
+      "height": "20",
+      "viewBox": "0 0 20 20",
       "fill": "none",
       "xmlns": "http://www.w3.org/2000/svg"
     }, [(0, import_vue2.createVNode)("path", {
-      "d": "M1 8.00016H6C7.84095 8.00016 9.33333 6.50778 9.33333 4.66683C9.33333 2.82588 7.84095 1.3335 6 1.3335L1.92593 1.3335C1.41455 1.3335 1 1.74805 1 2.25942L1 8.00016ZM1 8.00016L7.66667 8.00016C9.50762 8.00016 11 9.49255 11 11.3335C11 13.1744 9.50761 14.6668 7.66666 14.6668H2.11111C1.49746 14.6668 1 14.1694 1 13.5557L1 8.00016Z",
-      "stroke": "currentColor",
-      "stroke-width": "1.5",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      "d": "M3.25 3.11111C3.25 2.08325 4.08325 1.25 5.11111 1.25H10C12.6233 1.25 14.75 3.37665 14.75 6C14.75 7.34675 14.1895 8.5626 13.2891 9.42701C15.2861 9.9888 16.75 11.8234 16.75 14C16.75 16.6234 14.6234 18.75 12 18.75H5.33333C4.18274 18.75 3.25 17.8173 3.25 16.6667L3.25 3.11111ZM10.0053 10.75C10.0035 10.75 10.0018 10.75 10 10.75H4.75V16.6667C4.75 16.9888 5.01117 17.25 5.33333 17.25H12C13.7949 17.25 15.25 15.7949 15.25 14C15.25 12.2051 13.7949 10.75 12 10.75L10.0053 10.75ZM4.75 9.25H10C10.0014 9.25 10.0027 9.25 10.0041 9.25C11.7971 9.2478 13.25 7.79357 13.25 6C13.25 4.20507 11.7949 2.75 10 2.75H5.11111C4.91167 2.75 4.75 2.91167 4.75 3.11111V9.25Z",
+      "fill": "currentColor"
     }, null)]);
   }
 });
@@ -183,17 +195,16 @@ var ItalicIcon = (0, import_vue3.defineComponent)({
   name: "ItalicIcon",
   setup() {
     return () => (0, import_vue2.createVNode)("svg", {
-      "width": "14",
-      "height": "16",
-      "viewBox": "0 0 14 16",
+      "width": "20",
+      "height": "20",
+      "viewBox": "0 0 20 20",
       "fill": "none",
       "xmlns": "http://www.w3.org/2000/svg"
     }, [(0, import_vue2.createVNode)("path", {
-      "d": "M4.50002 1.3335H12.8333M1.16675 14.6668H9.49998M8.66683 1.3335L5.33354 14.6668",
-      "stroke": "currentColor",
-      "stroke-width": "1.5",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      "d": "M11.9833 1.24999H6.99993C6.58571 1.24999 6.24993 1.58578 6.24993 1.99999C6.24993 2.41421 6.58571 2.74999 6.99993 2.74999H11.0395L7.41456 17.25H3C2.58579 17.25 2.25 17.5858 2.25 18C2.25 18.4142 2.58579 18.75 3 18.75H7.98445C7.99532 18.7502 8.00616 18.7502 8.01697 18.75H12.9999C13.4141 18.75 13.7499 18.4142 13.7499 18C13.7499 17.5858 13.4141 17.25 12.9999 17.25H8.96073L12.5857 2.74999H16.9998C17.414 2.74999 17.7498 2.41421 17.7498 1.99999C17.7498 1.58578 17.414 1.24999 16.9998 1.24999H12.0158C12.0049 1.24976 11.9941 1.24976 11.9833 1.24999Z",
+      "fill": "currentColor"
     }, null)]);
   }
 });
@@ -201,13 +212,15 @@ var UnderlineIcon = (0, import_vue3.defineComponent)({
   name: "UnderlineIcon",
   setup() {
     return () => (0, import_vue2.createVNode)("svg", {
-      "width": "16",
-      "height": "16",
-      "viewBox": "0 0 16 16",
+      "width": "20",
+      "height": "20",
+      "viewBox": "0 0 20 20",
       "fill": "none",
       "xmlns": "http://www.w3.org/2000/svg"
     }, [(0, import_vue2.createVNode)("path", {
-      "d": "M1 14.25C0.585786 14.25 0.25 14.5858 0.25 15C0.25 15.4142 0.585786 15.75 1 15.75L1 14.25ZM15 15.75C15.4142 15.75 15.75 15.4142 15.75 15C15.75 14.5858 15.4142 14.25 15 14.25V15.75ZM13.75 1C13.75 0.585786 13.4142 0.25 13 0.25C12.5858 0.25 12.25 0.585786 12.25 1H13.75ZM3.75 1C3.75 0.585786 3.41421 0.25 3 0.25C2.58579 0.25 2.25 0.585786 2.25 1H3.75ZM1 15.75L15 15.75V14.25L1 14.25L1 15.75ZM12.25 1V7H13.75V1H12.25ZM3.75 7V1H2.25V7H3.75ZM8 11.25C5.65279 11.25 3.75 9.34721 3.75 7H2.25C2.25 10.1756 4.82436 12.75 8 12.75V11.25ZM12.25 7C12.25 9.34721 10.3472 11.25 8 11.25V12.75C11.1756 12.75 13.75 10.1756 13.75 7H12.25Z",
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      "d": "M4.28571 1.25C4.69993 1.25 5.03571 1.58579 5.03571 2V8.85714C5.03571 11.5988 7.2583 13.8214 10 13.8214C12.7417 13.8214 14.9643 11.5988 14.9643 8.85714V2C14.9643 1.58579 15.3001 1.25 15.7143 1.25C16.1285 1.25 16.4643 1.58579 16.4643 2V8.85714C16.4643 12.4273 13.5701 15.3214 10 15.3214C6.42987 15.3214 3.53571 12.4273 3.53571 8.85714V2C3.53571 1.58579 3.8715 1.25 4.28571 1.25ZM1.25 18C1.25 17.5858 1.58579 17.25 2 17.25L18 17.25C18.4142 17.25 18.75 17.5858 18.75 18C18.75 18.4142 18.4142 18.75 18 18.75H2C1.58579 18.75 1.25 18.4142 1.25 18Z",
       "fill": "currentColor"
     }, null)]);
   }
@@ -216,13 +229,15 @@ var StrikeIcon = (0, import_vue3.defineComponent)({
   name: "StrikeIcon",
   setup() {
     return () => (0, import_vue2.createVNode)("svg", {
-      "width": "16",
-      "height": "16",
-      "viewBox": "0 0 16 16",
+      "width": "20",
+      "height": "20",
+      "viewBox": "0 0 20 20",
       "fill": "none",
       "xmlns": "http://www.w3.org/2000/svg"
     }, [(0, import_vue2.createVNode)("path", {
-      "d": "M1 7.25C0.585787 7.25 0.25 7.58579 0.25 8C0.25 8.41421 0.585786 8.75 1 8.75L1 7.25ZM15 8.75C15.4142 8.75 15.75 8.41422 15.75 8C15.75 7.58579 15.4142 7.25 15 7.25V8.75ZM11.75 3.59259C11.75 4.00681 12.0858 4.34259 12.5 4.34259C12.9142 4.34259 13.25 4.00681 13.25 3.59259H11.75ZM4.16799 12.0664C3.97965 11.6975 3.52791 11.5511 3.15899 11.7394C2.79007 11.9278 2.64367 12.3795 2.83201 12.7484L4.16799 12.0664ZM3.79533 5.9023C4.01752 6.25188 4.48103 6.35516 4.83061 6.13297C5.18019 5.91079 5.28346 5.44728 5.06127 5.0977L3.79533 5.9023ZM9.23449 7.2876C8.84104 7.15809 8.41711 7.37206 8.2876 7.76551C8.15809 8.15896 8.37206 8.58289 8.76551 8.7124L9.23449 7.2876ZM1 8.75L15 8.75V7.25L1 7.25L1 8.75ZM13.25 3.59259C13.25 3.27636 13.1143 2.91655 12.9402 2.60384C12.7507 2.26362 12.4657 1.88848 12.0695 1.53923C11.266 0.830943 10.0291 0.25 8.26471 0.25V1.75C9.67678 1.75 10.5576 2.20609 11.0776 2.66447C11.3431 2.89855 11.5214 3.13915 11.6297 3.33366C11.7533 3.55567 11.75 3.64957 11.75 3.59259H13.25ZM8.26471 0.25C4.6888 0.25 3.27941 2.64524 3.27941 4.11111H4.77941C4.77941 3.50291 5.48767 1.75 8.26471 1.75V0.25ZM11.75 11.3704C11.75 12.5369 10.7905 14.25 8.26471 14.25V15.75C11.6684 15.75 13.25 13.315 13.25 11.3704H11.75ZM8.26471 14.25C6.92152 14.25 6.0134 13.9003 5.39394 13.4745C4.76788 13.0442 4.39192 12.505 4.16799 12.0664L2.83201 12.7484C3.13749 13.3468 3.66154 14.1039 4.5443 14.7107C5.43366 15.3219 6.64319 15.75 8.26471 15.75V14.25ZM3.27941 4.11111C3.27941 4.62256 3.38349 5.25433 3.79533 5.9023L5.06127 5.0977C4.83648 4.74401 4.77941 4.4088 4.77941 4.11111H3.27941ZM8.76551 8.7124C10.0377 9.13116 10.7819 9.5689 11.2052 10.0002C11.5982 10.4006 11.75 10.8304 11.75 11.3704H13.25C13.25 10.48 12.9724 9.65929 12.2757 8.94946C11.6093 8.27047 10.6034 7.73819 9.23449 7.2876L8.76551 8.7124Z",
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      "d": "M4.71219 5.55556C4.71219 3.94153 6.27283 1.25 10.3025 1.25C12.2938 1.25 13.6819 1.90502 14.58 2.69664C15.0235 3.08756 15.3416 3.50668 15.5523 3.88509C15.7477 4.236 15.8929 4.62821 15.8929 4.96296C15.8929 5.37718 15.5571 5.71296 15.1429 5.71296C14.7286 5.71296 14.3929 5.37718 14.3929 4.96296C14.3929 4.97338 14.3924 4.97171 14.3889 4.95856C14.3794 4.92317 14.3475 4.80463 14.2418 4.61491C14.1122 4.38221 13.9009 4.09763 13.5881 3.82188C12.9735 3.28017 11.9415 2.75 10.3025 2.75C7.07171 2.75 6.21218 4.79921 6.21218 5.55556C6.21218 5.91104 6.28076 6.31532 6.55103 6.74055C6.77322 7.09013 6.66994 7.55364 6.32036 7.77583C5.97078 7.99801 5.50728 7.89474 5.28509 7.54516C4.82778 6.82564 4.71219 6.1248 4.71219 5.55556ZM14.3507 10.75H18C18.4142 10.75 18.75 10.4142 18.75 10C18.75 9.58579 18.4142 9.25 18 9.25H11.1602C11.1485 9.24973 11.1369 9.24973 11.1253 9.25L2 9.25C1.58579 9.25 1.25 9.58579 1.25 10C1.25 10.4142 1.58579 10.75 2 10.75L11.0212 10.75C12.4142 11.2197 13.2514 11.7136 13.7395 12.2109C14.2104 12.6906 14.3929 13.2098 14.3929 13.8519C14.3929 15.2406 13.2518 17.25 10.3025 17.25C8.74757 17.25 7.68819 16.8447 6.96095 16.3449C6.22712 15.8405 5.78688 15.2087 5.52513 14.696C5.3368 14.3271 4.88505 14.1807 4.51613 14.369C4.14721 14.5574 4.00082 15.0091 4.18915 15.378C4.53245 16.0505 5.12078 16.9002 6.11132 17.581C7.10845 18.2664 8.46924 18.75 10.3025 18.75C14.1297 18.75 15.8929 16.0187 15.8929 13.8519C15.8929 12.8593 15.5846 11.9493 14.81 11.1602C14.6706 11.0181 14.5176 10.8815 14.3507 10.75Z",
       "fill": "currentColor"
     }, null)]);
   }
@@ -249,17 +264,16 @@ var BulletListIcon = (0, import_vue3.defineComponent)({
   name: "BulletListIcon",
   setup() {
     return () => (0, import_vue2.createVNode)("svg", {
-      "width": "18",
-      "height": "18",
-      "viewBox": "0 0 16 16",
+      "width": "20",
+      "height": "20",
+      "viewBox": "0 0 20 20",
       "fill": "none",
       "xmlns": "http://www.w3.org/2000/svg"
     }, [(0, import_vue2.createVNode)("path", {
-      "d": "M7.16658 13.2085L14.6666 13.2085M7.16658 8.00016L14.6666 8.00016M7.16658 2.5835H14.6666M4.24992 2.79183C4.24992 3.59724 3.597 4.25016 2.79159 4.25016C1.98617 4.25016 1.33325 3.59724 1.33325 2.79183C1.33325 1.98641 1.98617 1.3335 2.79159 1.3335C3.597 1.3335 4.24992 1.98641 4.24992 2.79183ZM4.24992 8.00016C4.24992 8.80558 3.597 9.4585 2.79159 9.4585C1.98617 9.4585 1.33325 8.80558 1.33325 8.00016C1.33325 7.19475 1.98617 6.54183 2.79159 6.54183C3.597 6.54183 4.24992 7.19475 4.24992 8.00016ZM4.24992 13.2085C4.24992 14.0139 3.597 14.6668 2.79159 14.6668C1.98617 14.6668 1.33325 14.0139 1.33325 13.2085C1.33325 12.4031 1.98617 11.7502 2.79159 11.7502C3.597 11.7502 4.24992 12.4031 4.24992 13.2085Z",
-      "stroke": "currentColor",
-      "stroke-width": "1.5",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      "d": "M3.75 2.75C3.19772 2.75 2.75 3.19772 2.75 3.75C2.75 4.30228 3.19772 4.75 3.75 4.75C4.30228 4.75 4.75 4.30228 4.75 3.75C4.75 3.19772 4.30228 2.75 3.75 2.75ZM1.25 3.75C1.25 2.36929 2.36929 1.25 3.75 1.25C5.13071 1.25 6.25 2.36929 6.25 3.75C6.25 5.13071 5.13071 6.25 3.75 6.25C2.36929 6.25 1.25 5.13071 1.25 3.75ZM8.25 3.5C8.25 3.08579 8.58579 2.75 9 2.75H18C18.4142 2.75 18.75 3.08579 18.75 3.5C18.75 3.91421 18.4142 4.25 18 4.25H9C8.58579 4.25 8.25 3.91421 8.25 3.5ZM3.75 9C3.19772 9 2.75 9.44772 2.75 10C2.75 10.5523 3.19772 11 3.75 11C4.30228 11 4.75 10.5523 4.75 10C4.75 9.44772 4.30228 9 3.75 9ZM1.25 10C1.25 8.61929 2.36929 7.5 3.75 7.5C5.13071 7.5 6.25 8.61929 6.25 10C6.25 11.3807 5.13071 12.5 3.75 12.5C2.36929 12.5 1.25 11.3807 1.25 10ZM8.25 10C8.25 9.58579 8.58579 9.25 9 9.25L18 9.25C18.4142 9.25 18.75 9.58579 18.75 10C18.75 10.4142 18.4142 10.75 18 10.75L9 10.75C8.58579 10.75 8.25 10.4142 8.25 10ZM3.75 15.25C3.19772 15.25 2.75 15.6977 2.75 16.25C2.75 16.8023 3.19772 17.25 3.75 17.25C4.30228 17.25 4.75 16.8023 4.75 16.25C4.75 15.6977 4.30228 15.25 3.75 15.25ZM1.25 16.25C1.25 14.8693 2.36929 13.75 3.75 13.75C5.13071 13.75 6.25 14.8693 6.25 16.25C6.25 17.6307 5.13071 18.75 3.75 18.75C2.36929 18.75 1.25 17.6307 1.25 16.25ZM8.25 16.25C8.25 15.8358 8.58579 15.5 9 15.5L18 15.5C18.4142 15.5 18.75 15.8358 18.75 16.25C18.75 16.6642 18.4142 17 18 17L9 17C8.58579 17 8.25 16.6642 8.25 16.25Z",
+      "fill": "currentColor"
     }, null)]);
   }
 });
@@ -267,13 +281,15 @@ var OrderedListIcon = (0, import_vue3.defineComponent)({
   name: "OrderedListIcon",
   setup() {
     return () => (0, import_vue2.createVNode)("svg", {
-      "width": "18",
-      "height": "18",
-      "viewBox": "0 0 16 16",
+      "width": "20",
+      "height": "20",
+      "viewBox": "0 0 20 20",
       "fill": "none",
       "xmlns": "http://www.w3.org/2000/svg"
     }, [(0, import_vue2.createVNode)("path", {
-      "d": "M6.33337 12.4585C5.91916 12.4585 5.58337 12.7943 5.58337 13.2085C5.58337 13.6227 5.91916 13.9585 6.33337 13.9585V12.4585ZM14.6667 13.9585C15.0809 13.9585 15.4167 13.6227 15.4167 13.2085C15.4167 12.7943 15.0809 12.4585 14.6667 12.4585V13.9585ZM6.33337 7.25016C5.91916 7.25016 5.58337 7.58595 5.58337 8.00016C5.58337 8.41438 5.91916 8.75016 6.33337 8.75016V7.25016ZM14.6667 8.75016C15.0809 8.75016 15.4167 8.41438 15.4167 8.00016C15.4167 7.58595 15.0809 7.25016 14.6667 7.25016V8.75016ZM6.33337 1.8335C5.91916 1.8335 5.58337 2.16928 5.58337 2.5835C5.58337 2.99771 5.91916 3.3335 6.33337 3.3335V1.8335ZM14.6667 3.3335C15.0809 3.3335 15.4167 2.99771 15.4167 2.5835C15.4167 2.16928 15.0809 1.8335 14.6667 1.8335V3.3335ZM0.943538 1.1998C0.589676 1.4151 0.477349 1.87649 0.692649 2.23036C0.90795 2.58422 1.36935 2.69655 1.72321 2.48125L0.943538 1.1998ZM2.16671 1.3335H2.91671C2.91671 1.06246 2.77048 0.812517 2.53421 0.679708C2.29795 0.5469 2.00841 0.551894 1.77687 0.692771L2.16671 1.3335ZM1.41671 4.25016C1.41671 4.66438 1.75249 5.00016 2.16671 5.00016C2.58092 5.00016 2.91671 4.66438 2.91671 4.25016H1.41671ZM0.699845 6.6952C0.538586 7.07674 0.717155 7.51676 1.09869 7.67802C1.48022 7.83928 1.92024 7.66071 2.0815 7.27917L0.699845 6.6952ZM2.66717 7.67869L3.26734 8.12846C3.27485 8.11845 3.2821 8.10824 3.2891 8.09786L2.66717 7.67869ZM1.33337 9.4585L0.733203 9.00872C0.562863 9.23602 0.535546 9.54005 0.662638 9.79407C0.789729 10.0481 1.04942 10.2085 1.33346 10.2085L1.33337 9.4585ZM2.79179 10.2083C3.206 10.2083 3.54175 9.87245 3.5417 9.45823C3.54165 9.04402 3.20582 8.70827 2.79161 8.70832L2.79179 10.2083ZM1.33337 11.0002C0.91916 11.0002 0.583374 11.3359 0.583374 11.7502C0.583374 12.1644 0.91916 12.5002 1.33337 12.5002V11.0002ZM2.79159 11.7502L3.4061 12.1801C3.56641 11.951 3.58595 11.6518 3.45679 11.4037C3.32763 11.1557 3.07122 11.0002 2.79159 11.0002V11.7502ZM1.94116 12.9656L1.32665 12.5356C1.16633 12.7647 1.1468 13.064 1.27596 13.312C1.40512 13.56 1.66153 13.7156 1.94116 13.7156L1.94116 12.9656ZM1.87 13.8874C1.57711 13.5945 1.10224 13.5945 0.809343 13.8874C0.516449 14.1802 0.51645 14.6551 0.809343 14.948L1.87 13.8874ZM6.33337 13.9585L14.6667 13.9585V12.4585L6.33337 12.4585V13.9585ZM6.33337 8.75016L14.6667 8.75016V7.25016L6.33337 7.25016V8.75016ZM6.33337 3.3335H14.6667V1.8335H6.33337V3.3335ZM1.72321 2.48125L2.55654 1.97422L1.77687 0.692771L0.943538 1.1998L1.72321 2.48125ZM1.41671 1.3335V4.25016H2.91671V1.3335H1.41671ZM2.0815 7.27917C2.08038 7.28184 2.07871 7.28423 2.0766 7.28621L1.04969 6.19285C0.899323 6.33407 0.780157 6.50519 0.699845 6.6952L2.0815 7.27917ZM2.0766 7.28621C2.0745 7.28819 2.072 7.28971 2.06927 7.29066L1.57297 5.87515C1.3783 5.9434 1.20006 6.05162 1.04969 6.19285L2.0766 7.28621ZM2.06927 7.29066C2.06655 7.29162 2.06365 7.29199 2.06077 7.29176L2.18007 5.79652C1.97444 5.78011 1.76764 5.80689 1.57297 5.87515L2.06927 7.29066ZM2.06077 7.29176C2.05789 7.29153 2.05509 7.2907 2.05255 7.28933L2.76703 5.97042C2.58564 5.87216 2.38571 5.81292 2.18007 5.79652L2.06077 7.29176ZM2.05255 7.28933C2.05001 7.28795 2.04778 7.28606 2.04602 7.28377L3.23331 6.36708C3.10724 6.20379 2.94841 6.06868 2.76703 5.97042L2.05255 7.28933ZM2.04602 7.28377C2.04425 7.28148 2.04298 7.27885 2.04229 7.27605L3.49907 6.91855C3.44991 6.71821 3.35938 6.53036 3.23331 6.36708L2.04602 7.28377ZM2.04229 7.27605C2.0416 7.27324 2.04151 7.27032 2.04202 7.26748L3.51879 7.53041C3.55495 7.32731 3.54823 7.1189 3.49907 6.91855L2.04229 7.27605ZM2.04202 7.26748C2.04252 7.26463 2.04362 7.26192 2.04523 7.25953L3.2891 8.09786C3.40439 7.92679 3.48263 7.73351 3.51879 7.53041L2.04202 7.26748ZM2.06699 7.22892L0.733203 9.00872L1.93355 9.90827L3.26734 8.12846L2.06699 7.22892ZM1.33346 10.2085L2.79179 10.2083L2.79161 8.70832L1.33328 8.7085L1.33346 10.2085ZM1.33337 12.5002H2.79159V11.0002H1.33337V12.5002ZM2.17708 11.3202L1.32665 12.5356L2.55566 13.3956L3.4061 12.1801L2.17708 11.3202ZM1.94116 13.7156C1.9577 13.7156 1.97399 13.7197 1.98859 13.7275L2.69569 12.4046C2.46354 12.2805 2.20438 12.2156 1.94116 12.2156L1.94116 13.7156ZM1.98859 13.7275C2.00318 13.7353 2.01563 13.7465 2.02482 13.7603L3.27203 12.9269C3.12579 12.7081 2.92783 12.5287 2.69569 12.4046L1.98859 13.7275ZM2.02482 13.7603C2.03401 13.7741 2.03967 13.7899 2.0413 13.8063L3.53407 13.6593C3.50827 13.3974 3.41827 13.1458 3.27203 12.9269L2.02482 13.7603ZM2.0413 13.8063C2.04292 13.8228 2.04045 13.8394 2.03412 13.8547L3.41994 14.4287C3.52067 14.1855 3.55987 13.9213 3.53407 13.6593L2.0413 13.8063ZM2.03412 13.8547C2.02779 13.87 2.01778 13.8835 2.00499 13.894L2.95658 15.0535C3.16006 14.8865 3.31921 14.6719 3.41994 14.4287L2.03412 13.8547ZM2.00499 13.894C1.9922 13.9045 1.97701 13.9117 1.96079 13.9149L2.25342 15.3861C2.51159 15.3347 2.75311 15.2205 2.95658 15.0535L2.00499 13.894ZM1.96079 13.9149C1.94456 13.9181 1.92778 13.9173 1.91195 13.9125L1.47652 15.3479C1.72841 15.4243 1.99525 15.4374 2.25342 15.3861L1.96079 13.9149ZM1.91195 13.9125C1.89611 13.9077 1.8817 13.8991 1.87 13.8874L0.809343 14.948C0.995471 15.1341 1.22463 15.2715 1.47652 15.3479L1.91195 13.9125Z",
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      "d": "M3.36762 1.34621C3.60388 1.47902 3.75011 1.72897 3.75011 2V5.5C3.75011 5.91421 3.41432 6.25 3.00011 6.25C2.5859 6.25 2.25011 5.91421 2.25011 5.5V3.3157C1.92245 3.43189 1.54724 3.30702 1.35938 2.99827C1.14408 2.6444 1.25641 2.183 1.61027 1.9677L2.61027 1.35928C2.84182 1.2184 3.13135 1.2134 3.36762 1.34621ZM7.25011 3.5C7.25011 3.08579 7.5859 2.75 8.00011 2.75H18.0001C18.4143 2.75 18.7501 3.08579 18.7501 3.5C18.7501 3.91421 18.4143 4.25 18.0001 4.25H8.00011C7.5859 4.25 7.25011 3.91421 7.25011 3.5ZM2.88491 9.0004C2.86752 8.99901 2.85002 9.00127 2.83356 9.00705C2.81709 9.01282 2.80201 9.02198 2.78929 9.03392C2.77657 9.04587 2.76649 9.06034 2.7597 9.07642C2.59844 9.45795 2.15842 9.63652 1.77688 9.47526C1.39535 9.314 1.21678 8.87398 1.37804 8.49245C1.46627 8.2837 1.59719 8.09571 1.76238 7.94056C1.92757 7.7854 2.12339 7.66652 2.33726 7.59153C2.55112 7.51655 2.77831 7.48712 3.00422 7.50515C3.23013 7.52317 3.44978 7.58825 3.64904 7.6962C3.84831 7.80415 4.0228 7.95258 4.1613 8.13197C4.2998 8.31135 4.39925 8.51772 4.45327 8.73782C4.50728 8.95792 4.51466 9.18688 4.47493 9.41C4.43521 9.63313 4.34925 9.84547 4.22259 10.0334C4.21559 10.0438 4.20834 10.054 4.20083 10.064L3.49953 10.9998L3.75001 10.9998C4.16422 10.9997 4.50005 11.3355 4.5001 11.7497C4.50015 12.1639 4.1644 12.4997 3.75019 12.4998L2.0002 12.5C1.71615 12.5 1.45646 12.3396 1.32937 12.0856C1.20228 11.8316 1.2296 11.5275 1.39994 11.3002L2.98413 9.18629C2.99095 9.17411 2.9957 9.16086 2.99816 9.14707C3.00122 9.12989 3.00065 9.11226 2.99649 9.09531C2.99233 9.07836 2.98467 9.06247 2.97401 9.04866C2.96334 9.03485 2.94991 9.02342 2.93456 9.01511C2.91922 9.0068 2.90231 9.00178 2.88491 9.0004ZM7.25011 10C7.25011 9.58579 7.5859 9.25 8.00011 9.25L18.0001 9.25C18.4143 9.25 18.7501 9.58579 18.7501 10C18.7501 10.4142 18.4143 10.75 18.0001 10.75L8.00011 10.75C7.5859 10.75 7.25011 10.4142 7.25011 10ZM1.25011 14.5C1.25011 14.0858 1.5859 13.75 2.00011 13.75H3.74997C4.0296 13.75 4.286 13.9056 4.41517 14.1536C4.54433 14.4016 4.52479 14.7009 4.36447 14.93L3.87524 15.6292C4.0001 15.7351 4.11012 15.8583 4.20177 15.9955C4.36355 16.2376 4.46313 16.5159 4.49167 16.8057C4.52021 17.0955 4.47684 17.3879 4.36541 17.6569C4.25397 17.9259 4.0779 18.1633 3.8528 18.3481C3.6277 18.5328 3.36051 18.6592 3.0749 18.716C2.78929 18.7728 2.49408 18.7583 2.21543 18.6738C1.93676 18.5892 1.68325 18.4373 1.47734 18.2314C1.18444 17.9385 1.18444 17.4636 1.47734 17.1707C1.77023 16.8778 2.2451 16.8778 2.538 17.1707C2.56948 17.2022 2.60824 17.2254 2.65085 17.2383C2.69346 17.2513 2.7386 17.2535 2.78227 17.2448C2.82593 17.2361 2.86679 17.2168 2.90121 17.1885C2.93563 17.1603 2.96255 17.124 2.97959 17.0829C2.99663 17.0417 3.00326 16.997 2.99889 16.9527C2.99453 16.9084 2.9793 16.8659 2.95457 16.8288C2.92983 16.7918 2.89634 16.7615 2.85708 16.7405C2.81781 16.7195 2.77397 16.7085 2.72945 16.7085C2.44982 16.7085 2.19341 16.5529 2.06425 16.3049C1.93509 16.0569 1.95463 15.7576 2.11494 15.5285L2.30982 15.25H2.00011C1.5859 15.25 1.25011 14.9142 1.25011 14.5ZM7.25011 16.25C7.25011 15.8358 7.5859 15.5 8.00011 15.5L18.0001 15.5C18.4143 15.5 18.7501 15.8358 18.7501 16.25C18.7501 16.6642 18.4143 17 18.0001 17L8.00011 17C7.5859 17 7.25011 16.6642 7.25011 16.25Z",
       "fill": "currentColor"
     }, null)]);
   }
@@ -282,17 +298,16 @@ var AlignLeftIcon = (0, import_vue3.defineComponent)({
   name: "AlignLeftIcon",
   setup() {
     return () => (0, import_vue2.createVNode)("svg", {
-      "width": "22",
-      "height": "22",
+      "width": "20",
+      "height": "20",
       "viewBox": "0 0 20 20",
       "fill": "none",
       "xmlns": "http://www.w3.org/2000/svg"
     }, [(0, import_vue2.createVNode)("path", {
-      "d": "M3 4L17 4 M3 12L17 12 M3 8L11 8 M3 16L11 16",
-      "stroke": "currentColor",
-      "stroke-width": "1.5",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      "d": "M1.25 2.75C1.25 2.33579 1.58579 2 2 2H18C18.4142 2 18.75 2.33579 18.75 2.75C18.75 3.16421 18.4142 3.5 18 3.5H2C1.58579 3.5 1.25 3.16421 1.25 2.75ZM1.25 7.5C1.25 7.08579 1.58579 6.75 2 6.75H13C13.4142 6.75 13.75 7.08579 13.75 7.5C13.75 7.91421 13.4142 8.25 13 8.25H2C1.58579 8.25 1.25 7.91421 1.25 7.5ZM1.25 12.5C1.25 12.0858 1.58579 11.75 2 11.75H14C14.4142 11.75 14.75 12.0858 14.75 12.5C14.75 12.9142 14.4142 13.25 14 13.25H2C1.58579 13.25 1.25 12.9142 1.25 12.5ZM1.25 17.25C1.25 16.8358 1.58579 16.5 2 16.5H9C9.41421 16.5 9.75 16.8358 9.75 17.25C9.75 17.6642 9.41421 18 9 18H2C1.58579 18 1.25 17.6642 1.25 17.25Z",
+      "fill": "currentColor"
     }, null)]);
   }
 });
@@ -350,6 +365,62 @@ var AlignJustifyIcon = (0, import_vue3.defineComponent)({
     }, null)]);
   }
 });
+var ColorTextIcon = (0, import_vue3.defineComponent)({
+  name: "ColorTextIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "20",
+      "height": "20",
+      "viewBox": "0 0 20 20",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    }, [(0, import_vue2.createVNode)("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      "d": "M8.66375 2.75C8.65635 2.75 8.65104 2.75456 8.64925 2.75941L5.28435 11.9167H12.0432L8.67826 2.75942C8.67647 2.75456 8.67115 2.75 8.66375 2.75ZM13.6412 11.9167L10.0862 2.24205C9.86695 1.64536 9.29844 1.25 8.66375 1.25C8.02906 1.25 7.46055 1.64536 7.24129 2.24205L3.68629 11.9167H2.24996C1.83575 11.9167 1.49996 12.2525 1.49996 12.6667C1.49996 13.0809 1.83575 13.4167 2.24996 13.4167H3.13511L1.54598 17.7413C1.40312 18.1301 1.60248 18.5611 1.99128 18.704C2.38007 18.8468 2.81107 18.6475 2.95394 18.2587L4.73317 13.4167H12.5943L14.3736 18.2587C14.5164 18.6475 14.9474 18.8468 15.3362 18.704C15.725 18.5611 15.9244 18.1301 15.7815 17.7413L14.1924 13.4167H15.0775C15.4918 13.4167 15.8275 13.0809 15.8275 12.6667C15.8275 12.2525 15.4918 11.9167 15.0775 11.9167H13.6412Z",
+      "fill": "currentColor"
+    }, null), (0, import_vue2.createVNode)("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      "d": "M18.236 5.85908C18.6863 5.06151 18.5284 4.10075 18.0148 3.24065L17.3982 2.21746C17.0688 1.67034 16.5392 1.25 15.8758 1.25C15.2116 1.25 14.6841 1.67072 14.359 2.21977L13.7453 3.23806L13.7438 3.24065C13.2302 4.10075 13.0722 5.06151 13.5225 5.85908C13.9733 6.65767 14.8779 7.01667 15.8793 7.01667C16.8806 7.01667 17.7852 6.65767 18.236 5.85908ZM15.8297 2.77208C15.7896 2.79926 15.7224 2.8607 15.6489 2.98538L15.6454 2.9913L15.0316 4.00969C15.0314 4.01014 15.0311 4.01058 15.0308 4.01103C14.6783 4.60202 14.7383 4.96158 14.8287 5.12167C14.9186 5.28086 15.1933 5.51667 15.8793 5.51667C16.5652 5.51667 16.84 5.28086 16.9298 5.12167C17.0202 4.96157 17.0802 4.60198 16.7277 4.01092C16.7274 4.01051 16.7272 4.0101 16.7269 4.00969L16.1132 2.99128C16.0374 2.8654 15.9681 2.80201 15.9258 2.7736C15.9051 2.7597 15.891 2.75409 15.8842 2.7519C15.8807 2.75077 15.8785 2.75034 15.8774 2.75017L15.8758 2.75L15.8745 2.75013C15.8736 2.75027 15.8717 2.75064 15.8685 2.75165C15.8625 2.75359 15.8493 2.75879 15.8297 2.77208Z",
+      "fill": "currentColor"
+    }, null)]);
+  }
+});
+var FillTextIcon = (0, import_vue3.defineComponent)({
+  name: "FillTextIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "20",
+      "height": "20",
+      "viewBox": "0 0 20 20",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    }, [(0, import_vue2.createVNode)("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      "d": "M9.85054 2.01035C10.8883 1.91023 11.8433 2.53267 12.8842 3.58165L15.6188 6.3375C16.4029 7.12778 16.9285 7.87656 17.0862 8.66106C17.2546 9.49858 16.9767 10.2195 16.5202 10.8637C16.273 11.2125 15.9624 11.5558 15.6187 11.9022L11.2166 16.3386L11.2155 16.3397C10.7347 16.8222 10.2954 17.2249 9.87312 17.5083C9.44434 17.7961 8.98095 17.9967 8.46117 18C7.94043 18.0032 7.4735 17.8077 7.03901 17.5197C6.61159 17.2363 6.16667 16.8305 5.67861 16.3386L2.94407 13.5827C2.34101 12.975 1.86551 12.4395 1.5784 11.9277C1.27004 11.378 1.1551 10.8114 1.3357 10.2028C1.45205 9.81075 1.67641 9.45442 1.94159 9.11724C2.20805 8.77843 2.55027 8.41662 2.94297 8.0192L2.94407 8.01809L7.3462 3.58165C7.73335 3.19148 8.11559 2.82907 8.50434 2.55498C8.89821 2.27728 9.34093 2.05952 9.85054 2.01035ZM9.36868 3.78092C9.09479 3.97402 8.79043 4.25577 8.41097 4.63819L4.00994 9.07351C4.00972 9.07373 4.01017 9.07328 4.00994 9.07351C3.95938 9.12468 3.90979 9.17515 3.86249 9.22362C7.7286 8.47303 11.7202 8.57605 15.5538 9.54302C15.6416 9.32321 15.6521 9.13815 15.6156 8.95666C15.546 8.61027 15.2752 8.12087 14.554 7.39403L11.8194 4.63819C10.8134 3.62427 10.2984 3.47411 9.99459 3.50342C9.83341 3.51897 9.63745 3.59142 9.36868 3.78092ZM14.5533 10.8463C10.6783 9.97453 6.65031 10.0285 2.79358 10.9976C2.81491 11.0553 2.84515 11.1199 2.88659 11.1938C3.06542 11.5125 3.41126 11.924 4.00884 12.5262L6.74337 15.282C7.21556 15.7579 7.57282 16.0739 7.8678 16.2694C8.15572 16.4603 8.33143 16.5007 8.45185 16.5C8.57322 16.4992 8.7495 16.4559 9.0372 16.2628C9.3313 16.0654 9.68515 15.7504 10.1525 15.2814C10.1524 15.2815 10.1527 15.2812 10.1525 15.2814L14.5533 10.8463ZM17.8 13.6483C17.8 13.6482 17.8001 13.6485 17.8 13.6483L18.323 14.5187C18.7703 15.27 18.9201 16.1311 18.5119 16.8562C18.1027 17.5833 17.2879 17.8985 16.414 17.8985C15.5401 17.8985 14.7253 17.5833 14.3161 16.8562C13.9079 16.1311 14.0577 15.27 14.505 14.5187L14.5066 14.5161L15.0266 13.6506C15.3151 13.1622 15.7942 12.7705 16.411 12.7705C17.0271 12.7705 17.5081 13.1619 17.8 13.6483ZM16.4123 14.2895C16.3892 14.3113 16.3556 14.3498 16.3175 14.4146L16.314 14.4205L15.7939 15.286C15.7937 15.2865 15.7934 15.2869 15.7932 15.2873C15.5063 15.7697 15.5731 16.0313 15.6233 16.1205C15.6724 16.2079 15.8574 16.3985 16.414 16.3985C16.9706 16.3985 17.1556 16.2079 17.2047 16.1205C17.2549 16.0313 17.3217 15.7697 17.0349 15.2873C17.0346 15.2869 17.0343 15.2865 17.0341 15.286L16.514 14.4205C16.473 14.3521 16.4367 14.3117 16.4123 14.2895Z",
+      "fill": "currentColor"
+    }, null)]);
+  }
+});
+var LinkIcon = (0, import_vue3.defineComponent)({
+  name: "LinkIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "20",
+      "height": "20",
+      "viewBox": "0 0 20 20",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    }, [(0, import_vue2.createVNode)("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      "d": "M9.46974 2.84224C11.5927 0.719252 15.0348 0.719253 17.1578 2.84224C19.2807 4.96523 19.2807 8.40728 17.1578 10.5303L15.5774 12.1106C13.5952 14.0928 10.3814 14.0928 8.39916 12.1106L8.14427 11.8557C7.85137 11.5628 7.85137 11.088 8.14427 10.7951C8.43716 10.5022 8.91203 10.5022 9.20493 10.7951L9.45982 11.05C10.8562 12.4464 13.1203 12.4464 14.5167 11.05L16.0971 9.4696C17.6343 7.9324 17.6343 5.4401 16.0971 3.9029C14.5599 2.3657 12.0676 2.3657 10.5304 3.9029L9.86766 4.56564C9.57477 4.85853 9.09989 4.85853 8.807 4.56564C8.51411 4.27274 8.51411 3.79787 8.807 3.50498L9.46974 2.84224ZM10.5402 8.9499C9.14375 7.55348 6.8797 7.55348 5.48327 8.9499L3.9029 10.5303C2.3657 12.0675 2.3657 14.5598 3.9029 16.097C5.4401 17.6342 7.9324 17.6342 9.46961 16.097L10.1323 15.4342C10.4252 15.1413 10.9001 15.1413 11.193 15.4342C11.4859 15.7271 11.4859 16.202 11.193 16.4949L10.5303 17.1576C8.40728 19.2806 4.96523 19.2806 2.84224 17.1576C0.719253 15.0346 0.719252 11.5926 2.84224 9.46961L4.42261 7.88924C6.40482 5.90703 9.61862 5.90703 11.6008 7.88924L11.8557 8.14414C12.1486 8.43704 12.1486 8.91191 11.8557 9.2048C11.5628 9.49769 11.088 9.49769 10.7951 9.2048L10.5402 8.9499Z",
+      "fill": "currentColor"
+    }, null)]);
+  }
+});
 var UndoIcon = (0, import_vue3.defineComponent)({
   name: "UndoIcon",
   setup() {
@@ -390,17 +461,16 @@ var ClearIcon = (0, import_vue3.defineComponent)({
   name: "ClearIcon",
   setup() {
     return () => (0, import_vue2.createVNode)("svg", {
-      "width": "18",
-      "height": "16",
-      "viewBox": "0 0 18 16",
+      "width": "20",
+      "height": "20",
+      "viewBox": "0 0 20 20",
       "fill": "none",
       "xmlns": "http://www.w3.org/2000/svg"
     }, [(0, import_vue2.createVNode)("path", {
-      "d": "M3.5 1H16.5M8.42149 6L10.6001 1M4.5 15L7.13903 8.9433M1.5 4L14.5 15",
-      "stroke": "currentColor",
-      "stroke-width": "1.5",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      "d": "M10.5639 3.25001L8.69489 7.55868C8.53005 7.93868 8.70447 8.38037 9.08447 8.5452C9.46447 8.71004 9.90615 8.53562 10.071 8.15562L12.199 3.25001H18C18.4142 3.25001 18.75 2.91422 18.75 2.50001C18.75 2.08579 18.4142 1.75001 18 1.75001H11.724C11.7128 1.74975 11.7015 1.74975 11.6903 1.75001H4.13335C3.71913 1.75001 3.38335 2.08579 3.38335 2.50001C3.38335 2.91422 3.71913 3.25001 4.13335 3.25001H10.5639ZM1.42854 5.22858C1.69679 4.91296 2.17011 4.87457 2.48573 5.14282L16.3524 16.9285C16.668 17.1968 16.7064 17.6701 16.4382 17.9857C16.1699 18.3013 15.6966 18.3397 15.381 18.0715L8.35867 12.103L5.88807 17.7985C5.72323 18.1785 5.28155 18.3529 4.90155 18.1881C4.52155 18.0232 4.34712 17.5815 4.51196 17.2015L7.16406 11.0877L1.5143 6.28577C1.19869 6.01752 1.16029 5.5442 1.42854 5.22858Z",
+      "fill": "currentColor"
     }, null)]);
   }
 });
@@ -424,14 +494,15 @@ var CaretIcon = (0, import_vue3.defineComponent)({
 });
 
 // src/extensions/heading-extension.tsx
-var import_pixel3_popover = require("@mekari/pixel3-popover");
-var import_pixel3_text = require("@mekari/pixel3-text");
-var import_css = require("@mekari/pixel3-styled-system/css");
 var HeadingExtention = (0, import_vue5.defineComponent)({
   name: "HeadingExtention",
   props: {
-    tooltipLabel: String,
-    editor: Object
+    tooltipLabel: {
+      type: String
+    },
+    editor: {
+      type: Object
+    }
   },
   setup({
     tooltipLabel,
@@ -456,7 +527,8 @@ var HeadingExtention = (0, import_vue5.defineComponent)({
           level: 1
         })) && (0, import_vue4.createVNode)(import_pixel3_text.MpText, {
           "class": (0, import_css.css)({
-            color: "currentColor"
+            color: "currentColor",
+            whiteSpace: "nowrap"
           })
         }, {
           default: () => [(0, import_vue4.createTextVNode)("Heading 1")]
@@ -464,7 +536,8 @@ var HeadingExtention = (0, import_vue5.defineComponent)({
           level: 2
         })) && (0, import_vue4.createVNode)(import_pixel3_text.MpText, {
           "class": (0, import_css.css)({
-            color: "currentColor"
+            color: "currentColor",
+            whiteSpace: "nowrap"
           })
         }, {
           default: () => [(0, import_vue4.createTextVNode)("Heading 2")]
@@ -472,13 +545,15 @@ var HeadingExtention = (0, import_vue5.defineComponent)({
           level: 3
         })) && (0, import_vue4.createVNode)(import_pixel3_text.MpText, {
           "class": (0, import_css.css)({
-            color: "currentColor"
+            color: "currentColor",
+            whiteSpace: "nowrap"
           })
         }, {
           default: () => [(0, import_vue4.createTextVNode)("Heading 3")]
         }), (editor == null ? void 0 : editor.isActive("paragraph")) && (0, import_vue4.createVNode)(import_pixel3_text.MpText, {
           "class": (0, import_css.css)({
-            color: "currentColor"
+            color: "currentColor",
+            whiteSpace: "nowrap"
           })
         }, {
           default: () => [(0, import_vue4.createTextVNode)("Normal text")]
@@ -512,15 +587,15 @@ var HeadingExtention = (0, import_vue5.defineComponent)({
           })
         }, {
           default: () => [(0, import_vue4.createVNode)(import_pixel3_popover.MpPopoverListItem, {
-            "onClick": () => editor == null ? void 0 : editor.chain().focus().toggleHeading({
-              level: 1
-            }).run(),
             "class": {
               "is-active": editor == null ? void 0 : editor.isActive("heading", {
                 level: 1
               }),
               "text-sizing": true
-            }
+            },
+            "onClick": () => (editor == null ? void 0 : editor.chain()).focus().toggleHeading({
+              level: 1
+            }).run()
           }, {
             default: () => [(0, import_vue4.createVNode)(import_pixel3_text.MpText, {
               "as": "h1",
@@ -532,15 +607,15 @@ var HeadingExtention = (0, import_vue5.defineComponent)({
               default: () => [(0, import_vue4.createTextVNode)("Heading 1")]
             })]
           }), (0, import_vue4.createVNode)(import_pixel3_popover.MpPopoverListItem, {
-            "onClick": () => editor == null ? void 0 : editor.chain().focus().toggleHeading({
-              level: 2
-            }).run(),
             "class": {
               "is-active": editor == null ? void 0 : editor.isActive("heading", {
                 level: 2
               }),
               "text-sizing": true
-            }
+            },
+            "onClick": () => (editor == null ? void 0 : editor.chain()).focus().toggleHeading({
+              level: 2
+            }).run()
           }, {
             default: () => [(0, import_vue4.createVNode)(import_pixel3_text.MpText, {
               "as": "h2",
@@ -552,15 +627,15 @@ var HeadingExtention = (0, import_vue5.defineComponent)({
               default: () => [(0, import_vue4.createTextVNode)("Heading 2")]
             })]
           }), (0, import_vue4.createVNode)(import_pixel3_popover.MpPopoverListItem, {
-            "onClick": () => editor == null ? void 0 : editor.chain().focus().toggleHeading({
-              level: 3
-            }).run(),
             "class": {
               "is-active": editor == null ? void 0 : editor.isActive("heading", {
                 level: 3
               }),
               "text-sizing": true
-            }
+            },
+            "onClick": () => (editor == null ? void 0 : editor.chain()).focus().toggleHeading({
+              level: 3
+            }).run()
           }, {
             default: () => [(0, import_vue4.createVNode)(import_pixel3_text.MpText, {
               "as": "h3",
@@ -572,11 +647,11 @@ var HeadingExtention = (0, import_vue5.defineComponent)({
               default: () => [(0, import_vue4.createTextVNode)("Heading 3")]
             })]
           }), (0, import_vue4.createVNode)(import_pixel3_popover.MpPopoverListItem, {
-            "onClick": () => editor == null ? void 0 : editor.chain().focus().setParagraph().run(),
             "class": {
               "is-active": editor == null ? void 0 : editor.isActive("paragraph"),
               "text-sizing": true
-            }
+            },
+            "onClick": () => (editor == null ? void 0 : editor.chain()).focus().setParagraph().run()
           }, {
             default: () => [(0, import_vue4.createVNode)(import_pixel3_text.MpText, {
               "class": (0, import_css.css)({
@@ -600,50 +675,35 @@ var import_css2 = require("@mekari/pixel3-styled-system/css");
 var AlignExtention = (0, import_vue7.defineComponent)({
   name: "AlignExtention",
   props: {
-    tooltipLabel: String,
-    editor: Object
+    tooltipLabel: {
+      type: String
+    },
+    editor: {
+      type: Object
+    }
   },
   setup({
     tooltipLabel,
     editor
   }) {
+    const isActiveAlignment = /* @__PURE__ */ __name((alignment) => {
+      return editor == null ? void 0 : editor.isActive({
+        textAlign: alignment
+      });
+    }, "isActiveAlignment");
     return () => (0, import_vue6.createVNode)(import_pixel3_popover2.MpPopover, {
       "id": "popover-align-extention"
     }, {
       default: () => [(0, import_vue6.createVNode)(import_pixel3_popover2.MpPopoverTrigger, null, {
         default: () => [(0, import_vue6.withDirectives)((0, import_vue6.createVNode)("button", {
           "class": {
-            "is-active": (editor == null ? void 0 : editor.isActive({
-              textAlign: "left"
-            })) || (editor == null ? void 0 : editor.isActive({
-              textAlign: "right"
-            })) || (editor == null ? void 0 : editor.isActive({
-              textAlign: "center"
-            })) || (editor == null ? void 0 : editor.isActive({
-              textAlign: "justify"
-            })),
+            "is-active": isActiveAlignment("left") || isActiveAlignment("right") || isActiveAlignment("center") || isActiveAlignment("justify"),
             "text-sizing": true
           },
           "style": {
-            padding: "0 4px"
+            padding: "4px"
           }
-        }, [(editor == null ? void 0 : editor.isActive({
-          textAlign: "left"
-        })) && (0, import_vue6.createVNode)(AlignLeftIcon, null, null), (editor == null ? void 0 : editor.isActive({
-          textAlign: "center"
-        })) && (0, import_vue6.createVNode)(AlignCenterIcon, null, null), (editor == null ? void 0 : editor.isActive({
-          textAlign: "right"
-        })) && (0, import_vue6.createVNode)(AlignRightIcon, null, null), (editor == null ? void 0 : editor.isActive({
-          textAlign: "justify"
-        })) && (0, import_vue6.createVNode)(AlignJustifyIcon, null, null), !(editor == null ? void 0 : editor.isActive({
-          textAlign: "left"
-        })) && !(editor == null ? void 0 : editor.isActive({
-          textAlign: "right"
-        })) && !(editor == null ? void 0 : editor.isActive({
-          textAlign: "center"
-        })) && !(editor == null ? void 0 : editor.isActive({
-          textAlign: "justify"
-        })) && (0, import_vue6.createVNode)(AlignLeftIcon, null, null)]), [[(0, import_vue6.resolveDirective)("tooltip"), {
+        }, [isActiveAlignment("left") && (0, import_vue6.createVNode)(AlignLeftIcon, null, null), isActiveAlignment("center") && (0, import_vue6.createVNode)(AlignCenterIcon, null, null), isActiveAlignment("right") && (0, import_vue6.createVNode)(AlignRightIcon, null, null), isActiveAlignment("justify") && (0, import_vue6.createVNode)(AlignJustifyIcon, null, null), !isActiveAlignment("left") && !isActiveAlignment("right") && !isActiveAlignment("center") && !isActiveAlignment("justify") && (0, import_vue6.createVNode)(AlignLeftIcon, null, null)]), [[(0, import_vue6.resolveDirective)("tooltip"), {
           label: tooltipLabel
         }]])]
       }), (0, import_vue6.createVNode)(import_pixel3_popover2.MpPopoverContent, {
@@ -660,45 +720,37 @@ var AlignExtention = (0, import_vue7.defineComponent)({
           })
         }, {
           default: () => [(0, import_vue6.createVNode)(import_pixel3_popover2.MpPopoverListItem, {
-            "onClick": () => editor == null ? void 0 : editor.chain().focus().setTextAlign("left").run(),
             "class": {
-              "is-active": editor == null ? void 0 : editor.isActive({
-                textAlign: "left"
-              }),
+              "is-active": isActiveAlignment("left"),
               "text-sizing": true
-            }
+            },
+            "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, {
-            "onClick": () => editor == null ? void 0 : editor.chain().focus().setTextAlign("center").run(),
             "class": {
-              "is-active": editor == null ? void 0 : editor.isActive({
-                textAlign: "center"
-              }),
+              "is-active": isActiveAlignment("center"),
               "text-sizing": true
-            }
+            },
+            "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, {
-            "onClick": () => editor == null ? void 0 : editor.chain().focus().setTextAlign("right").run(),
             "class": {
-              "is-active": editor == null ? void 0 : editor.isActive({
-                textAlign: "right"
-              }),
+              "is-active": isActiveAlignment("right"),
               "text-sizing": true
-            }
+            },
+            "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, {
-            "onClick": () => editor == null ? void 0 : editor.chain().focus().setTextAlign("justify").run(),
             "class": {
-              "is-active": editor == null ? void 0 : editor.isActive({
-                textAlign: "justify"
-              }),
+              "is-active": isActiveAlignment("justify"),
               "text-sizing": true
-            }
+            },
+            "onClick": () => (editor == null ? void 0 : editor.chain()).focus().setTextAlign("justify").run()
           }, {
-            default: () => [(0, import_vue6.createVNode)(AlignLeftIcon, null, null)]
+            default: () => [(0, import_vue6.createVNode)(AlignJustifyIcon, null, null)]
           })]
         })]
       })]
@@ -712,10 +764,18 @@ var import_vue9 = require("vue");
 var SingleExtention = (0, import_vue9.defineComponent)({
   name: "SingleExtention",
   props: {
-    name: String,
-    tooltipLabel: String,
-    onClick: Function,
-    editor: Object
+    name: {
+      type: String
+    },
+    tooltipLabel: {
+      type: String
+    },
+    onClick: {
+      type: Function
+    },
+    editor: {
+      type: Object
+    }
   },
   setup({
     name,
@@ -723,121 +783,418 @@ var SingleExtention = (0, import_vue9.defineComponent)({
     onClick,
     editor
   }) {
+    const iconMap = {
+      bold: (0, import_vue8.createVNode)(BoldIcon, null, null),
+      italic: (0, import_vue8.createVNode)(ItalicIcon, null, null),
+      underline: (0, import_vue8.createVNode)(UnderlineIcon, null, null),
+      strike: (0, import_vue8.createVNode)(StrikeIcon, null, null),
+      blockquote: (0, import_vue8.createVNode)(BlockquoteIcon, null, null),
+      bulletList: (0, import_vue8.createVNode)(BulletListIcon, null, null),
+      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)
+    };
     return () => (0, import_vue8.withDirectives)((0, import_vue8.createVNode)("button", {
       "class": {
-        "is-active": editor == null ? void 0 : editor.isActive(name)
+        "is-active": name && (editor == null ? void 0 : editor.isActive(name))
       },
       "onClick": onClick
-    }, [name === "bold" && (0, import_vue8.createVNode)(BoldIcon, null, null), name === "italic" && (0, import_vue8.createVNode)(ItalicIcon, null, null), name === "underline" && (0, import_vue8.createVNode)(UnderlineIcon, null, null), name === "strike" && (0, import_vue8.createVNode)(StrikeIcon, null, null), name === "blockquote" && (0, import_vue8.createVNode)(BlockquoteIcon, null, null), name === "bulletList" && (0, import_vue8.createVNode)(BulletListIcon, null, null), name === "orderedList" && (0, import_vue8.createVNode)(OrderedListIcon, null, null), name === "undo" && (0, import_vue8.createVNode)(UndoIcon, null, null), name === "redo" && (0, import_vue8.createVNode)(RedoIcon, null, null), name === "clear" && (0, import_vue8.createVNode)(ClearIcon, null, null)]), [[(0, import_vue8.resolveDirective)("tooltip"), {
+    }, [name && iconMap[name]]), [[(0, import_vue8.resolveDirective)("tooltip"), {
       label: tooltipLabel
     }]]);
   }
 });
 
+// src/extensions/color-extension.tsx
+var import_vue10 = require("vue");
+var import_vue11 = require("vue");
+var import_pixel3_color_picker = require("@mekari/pixel3-color-picker");
+var import_css3 = require("@mekari/pixel3-styled-system/css");
+var colorPreset = ["#3B82F6", "#14B8A6", "#8B5CF6", "#F59E0B", "#EF4444", "#71717A", "#84CC16", "#EC4899", "#232933", "#FFFFFF"];
+var ColorExtension = (0, import_vue11.defineComponent)({
+  name: "ColorExtension",
+  props: {
+    tooltipLabel: {
+      type: String
+    },
+    editor: {
+      type: Object
+    },
+    type: {
+      type: String
+    }
+  },
+  setup({
+    tooltipLabel,
+    type,
+    editor
+  }) {
+    const color = (0, import_vue11.ref)("");
+    const onColorChange = /* @__PURE__ */ __name((value) => {
+      color.value = value.hex;
+      if (type === "fill") {
+        (editor == null ? void 0 : editor.chain()).focus().toggleHighlight({
+          color: value.hex
+        }).run();
+      } else {
+        (editor == null ? void 0 : editor.chain()).focus().setColor(value.hex).run();
+      }
+    }, "onColorChange");
+    return () => (0, import_vue10.createVNode)("button", {
+      "class": [{
+        "is-active": type === "fill" ? editor == null ? void 0 : editor.isActive("highlight", {
+          color: editor.getAttributes("highlight").color
+        }) : editor == null ? void 0 : editor.isActive("textStyle", {
+          color: editor.getAttributes("textStyle").color
+        })
+      }, (0, import_css3.css)({
+        textAlign: "left"
+      })]
+    }, [(0, import_vue10.createVNode)(import_pixel3_color_picker.MpColorPicker, {
+      "preset": colorPreset,
+      "variant": "basic",
+      "placement": "bottom-start",
+      "isShowPreset": true,
+      "isShowInput": false,
+      "class": (0, import_css3.css)({
+        width: "auto!"
+      }),
+      "onChange": onColorChange
+    }, {
+      default: () => [(0, import_vue10.withDirectives)((0, import_vue10.createVNode)("div", null, [type === "fill" ? (0, import_vue10.createVNode)(FillTextIcon, null, null) : (0, import_vue10.createVNode)(ColorTextIcon, null, null)]), [[(0, import_vue10.resolveDirective)("tooltip"), {
+        label: tooltipLabel
+      }]])]
+    })]);
+  }
+});
+
+// src/extensions/link-extension.tsx
+var import_vue12 = require("vue");
+var import_vue13 = require("vue");
+var import_core = require("@popperjs/core");
+var import_css4 = require("@mekari/pixel3-styled-system/css");
+var import_pixel3_input = require("@mekari/pixel3-input");
+var import_pixel3_button = require("@mekari/pixel3-button");
+var LinkExtension = (0, import_vue13.defineComponent)({
+  name: "LinkExtension",
+  props: {
+    tooltipLabel: {
+      type: String
+    },
+    editor: {
+      type: Object
+    }
+  },
+  setup({
+    tooltipLabel,
+    editor
+  }) {
+    const isShowPopover = (0, import_vue13.ref)(false);
+    const isEditLink = (0, import_vue13.ref)(false);
+    const popoverRef = (0, import_vue13.ref)(null);
+    const inputRef = (0, import_vue13.ref)(null);
+    const url = (0, import_vue13.ref)("");
+    let popperInstance = null;
+    let linkElement = null;
+    let lastClickedElement = null;
+    const onClickOutside = /* @__PURE__ */ __name((event) => {
+      if (popoverRef.value && !popoverRef.value.contains(event.target) && event.target !== lastClickedElement) {
+        onClosePopover();
+      }
+    }, "onClickOutside");
+    const onOpenPopover = /* @__PURE__ */ __name((target) => {
+      isShowPopover.value = true;
+      isEditLink.value = target.tagName === "A";
+      if (target)
+        lastClickedElement = target;
+      (0, import_vue13.nextTick)(() => {
+        var _a;
+        if (popoverRef.value) {
+          if (popperInstance) {
+            popperInstance.destroy();
+          }
+          popperInstance = (0, import_core.createPopper)(target, popoverRef.value, {
+            onFirstUpdate: () => {
+              if (popperInstance) {
+                popperInstance.setOptions({
+                  modifiers: [{
+                    name: "eventListeners",
+                    enabled: false
+                  }, {
+                    name: "offset",
+                    options: {
+                      offset: [0, 8]
+                    }
+                  }]
+                });
+              }
+            },
+            placement: "bottom"
+          });
+        }
+        const inputElement = (_a = popoverRef.value) == null ? void 0 : _a.querySelector("input");
+        if (inputElement)
+          inputElement.focus();
+        document.addEventListener("mousedown", onClickOutside);
+      });
+    }, "onOpenPopover");
+    const onCreateLink = /* @__PURE__ */ __name(() => {
+      const selection = editor == null ? void 0 : editor.view.state.selection;
+      if (selection && selection.from !== selection.to) {
+        const coords = editor.view.coordsAtPos(selection.from);
+        url.value = "";
+        onOpenPopover({
+          getBoundingClientRect: () => ({
+            top: coords.top,
+            left: coords.left,
+            bottom: coords.bottom,
+            right: coords.right,
+            width: coords.right - coords.left,
+            height: coords.bottom - coords.top
+          })
+        });
+      }
+    }, "onCreateLink");
+    const onEditLink = /* @__PURE__ */ __name(() => {
+      isEditLink.value = false;
+    }, "onEditLink");
+    const onUnlink = /* @__PURE__ */ __name(() => {
+      (editor == null ? void 0 : editor.chain()).focus().unsetLink().run();
+      onClosePopover();
+    }, "onUnlink");
+    const onSetLink = /* @__PURE__ */ __name(() => {
+      if (url.value && editor) {
+        editor.chain().focus().extendMarkRange("link").setLink({
+          href: url.value
+        }).run();
+      }
+      onClosePopover();
+    }, "onSetLink");
+    const onClosePopover = /* @__PURE__ */ __name(() => {
+      isShowPopover.value = false;
+      editor == null ? void 0 : editor.commands.setTextSelection({
+        from: 0,
+        to: 0
+      });
+      if (popperInstance) {
+        popperInstance.destroy();
+        popperInstance = null;
+      }
+      document.removeEventListener("mousedown", onClickOutside);
+    }, "onClosePopover");
+    (0, import_vue13.onMounted)(() => {
+      editor == null ? void 0 : editor.view.dom.addEventListener("click", (event) => {
+        const link = event.target.closest("a");
+        if (link) {
+          event.preventDefault();
+          linkElement = link;
+          url.value = linkElement.href;
+          onOpenPopover(linkElement);
+        }
+      });
+    });
+    (0, import_vue13.onBeforeUnmount)(() => {
+      if (popperInstance) {
+        popperInstance.destroy();
+      }
+      document.removeEventListener("mousedown", onClickOutside);
+    });
+    return () => (0, import_vue12.createVNode)(import_vue12.Fragment, null, [(0, import_vue12.withDirectives)((0, import_vue12.createVNode)("button", {
+      "class": {
+        "is-active": editor == null ? void 0 : editor.isActive("link")
+      },
+      "disabled": isShowPopover.value,
+      "onClick": onCreateLink
+    }, [(0, import_vue12.createVNode)(LinkIcon, null, null)]), [[(0, import_vue12.resolveDirective)("tooltip"), {
+      label: tooltipLabel
+    }]]), isShowPopover.value && (0, import_vue12.createVNode)(import_vue13.Teleport, {
+      "to": "body"
+    }, {
+      default: () => [(0, import_vue12.createVNode)("div", {
+        "ref": popoverRef,
+        "data-pixel-rte": true,
+        "style": {
+          position: "absolute",
+          zIndex: "var(--mp-z-index-popover)"
+        }
+      }, [(0, import_vue12.createVNode)("div", {
+        "class": (0, import_css4.css)({
+          display: "flex",
+          gap: "2",
+          backgroundColor: "white",
+          border: "1px solid",
+          borderColor: "gray.400",
+          borderRadius: "md",
+          boxShadow: "lg",
+          padding: "2"
+        })
+      }, [(0, import_vue12.createVNode)(import_pixel3_input.MpInput, {
+        "ref": inputRef,
+        "class": (0, import_css4.css)({
+          width: "212px",
+          marginRight: "1"
+        }),
+        "modelValue": url.value,
+        "onUpdate:modelValue": ($event) => url.value = $event,
+        "placeholder": "Insert URL here",
+        "isDisabled": isEditLink.value,
+        "onKeyup": (event) => {
+          if (event.key === "Enter")
+            onSetLink();
+        }
+      }, null), isEditLink.value ? (0, import_vue12.createVNode)(import_pixel3_button.MpButton, {
+        "leftIcon": "edit",
+        "variant": "ghost",
+        "onClick": onEditLink
+      }, 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": "delete",
+        "variant": "ghost",
+        "onClick": onUnlink
+      }, null) : (0, import_vue12.createVNode)(import_pixel3_button.MpButton, {
+        "leftIcon": "close",
+        "variant": "ghost",
+        "onClick": onClosePopover
+      }, null)])])]
+    })]);
+  }
+});
+
 // src/editor-toolbar.tsx
 var import_pixel3_divider = require("@mekari/pixel3-divider");
-var EditorToolbar = (0, import_vue11.defineComponent)({
+var EditorToolbar = (0, import_vue15.defineComponent)({
   name: "EditorToolbar",
   props: {
-    editor: Object,
-    options: Object
+    editor: {
+      type: Object
+    },
+    options: {
+      type: Array
+    }
   },
   setup({
     editor,
     options
   }) {
-    const items = ["heading", "bold", "italic", "underline", "strike", "blockquote", "bulletList", "orderedList", "align", "undo", "redo", "clear"];
+    const items = ["heading", "bold", "italic", "underline", "strike", "blockquote", "bulletList", "orderedList", "textColor", "fillColor", "textLink", "align", "undo", "redo", "clear"];
     const itemOptions = {
       heading: {
-        tooltipLabel: "Text sizing",
+        tooltipLabel: "Text style",
         editor
       },
       bold: {
         tooltipLabel: "Bold",
-        onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run()
+        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleBold().run()
       },
       italic: {
         tooltipLabel: "Italic",
-        onClick: () => editor == null ? void 0 : editor.chain().focus().toggleItalic().run()
+        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleItalic().run()
       },
       underline: {
         tooltipLabel: "Underline",
-        onClick: () => editor == null ? void 0 : editor.chain().focus().toggleUnderline().run()
+        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleUnderline().run()
       },
       strike: {
-        tooltipLabel: "Strikethrough",
-        onClick: () => editor == null ? void 0 : editor.chain().focus().toggleStrike().run()
+        tooltipLabel: "Strike",
+        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleStrike().run()
       },
       blockquote: {
         tooltipLabel: "Blockquote",
-        onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBlockquote().run()
+        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleBlockquote().run()
       },
       bulletList: {
         tooltipLabel: "Bullet list",
-        onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBulletList().run()
+        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleBulletList().run()
       },
       orderedList: {
-        tooltipLabel: "Ordered list",
-        onClick: () => editor == null ? void 0 : editor.chain().focus().toggleOrderedList().run()
+        tooltipLabel: "Number list",
+        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleOrderedList().run()
+      },
+      textColor: {
+        tooltipLabel: "Text color",
+        editor,
+        type: "text"
+      },
+      fillColor: {
+        tooltipLabel: "Fill color",
+        editor,
+        type: "fill"
+      },
+      textLink: {
+        tooltipLabel: "Insert link",
+        editor
       },
       align: {
-        tooltipLabel: "Text align",
+        tooltipLabel: "Text alignment",
         editor
       },
       undo: {
         tooltipLabel: "Undo",
-        onClick: () => editor == null ? void 0 : editor.chain().focus().undo().run()
+        onClick: () => (editor == null ? void 0 : editor.chain()).focus().undo().run()
       },
       redo: {
         tooltipLabel: "Redo",
-        onClick: () => editor == null ? void 0 : editor.chain().focus().redo().run()
+        onClick: () => (editor == null ? void 0 : editor.chain()).focus().redo().run()
       },
       clear: {
-        tooltipLabel: "Clear formatting",
-        onClick: () => editor == null ? void 0 : editor.chain().focus().unsetAllMarks().run()
+        tooltipLabel: "Reset format",
+        onClick: () => (editor == null ? void 0 : editor.chain()).focus().unsetAllMarks().run()
       }
     };
-    return () => (0, import_vue10.createVNode)("div", null, [options == null ? void 0 : options.map((option, idx) => (0, import_vue10.createVNode)(import_vue10.Fragment, null, [option == null ? void 0 : option.map((item) => {
-      var _a, _b, _c, _d;
-      if (items.includes(item)) {
-        if (item === "heading") {
-          return (0, import_vue10.createVNode)(HeadingExtention, {
-            "tooltipLabel": (_a = itemOptions[item]) == null ? void 0 : _a.tooltipLabel,
+    const renderExtension = /* @__PURE__ */ __name((item) => {
+      const options2 = itemOptions[item];
+      if (!options2)
+        return null;
+      switch (item) {
+        case "heading":
+          return (0, import_vue14.createVNode)(HeadingExtention, {
+            "tooltipLabel": options2.tooltipLabel,
+            "editor": editor
+          }, null);
+        case "align":
+          return (0, import_vue14.createVNode)(AlignExtention, {
+            "tooltipLabel": options2.tooltipLabel,
             "editor": editor
           }, null);
-        } else if (item === "align") {
-          return (0, import_vue10.createVNode)(AlignExtention, {
-            "tooltipLabel": (_b = itemOptions[item]) == null ? void 0 : _b.tooltipLabel,
+        case "textColor":
+        case "fillColor":
+          return (0, import_vue14.createVNode)(ColorExtension, {
+            "tooltipLabel": options2.tooltipLabel,
+            "editor": editor,
+            "type": options2.type
+          }, null);
+        case "textLink":
+          return (0, import_vue14.createVNode)(LinkExtension, {
+            "tooltipLabel": options2.tooltipLabel,
             "editor": editor
           }, null);
-        } else {
-          return (0, import_vue10.createVNode)(SingleExtention, {
+        default:
+          return (0, import_vue14.createVNode)(SingleExtention, {
             "name": item,
-            "tooltipLabel": (_c = itemOptions[item]) == null ? void 0 : _c.tooltipLabel,
-            "onClick": (_d = itemOptions[item]) == null ? void 0 : _d.onClick,
+            "tooltipLabel": options2.tooltipLabel,
+            "onClick": options2.onClick,
             "editor": editor
           }, null);
-        }
       }
-    }), idx !== options.length - 1 && (0, import_vue10.createVNode)(import_pixel3_divider.MpDivider, {
+    }, "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);
+      }
+    }), index !== (options == null ? void 0 : options.length) - 1 && (0, import_vue14.createVNode)(import_pixel3_divider.MpDivider, {
       "id": "divider-toolbar",
       "orientation": "vertical"
     }, null)]))]);
   }
 });
 
-// src/rich-text-editor.tsx
-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_placeholder = __toESM(require("@tiptap/extension-placeholder"));
-var import_tokens = require("@mekari/pixel3-styled-system/tokens");
-var import_pixel3_form_control = require("@mekari/pixel3-form-control");
-
 // src/rte-style-provider.tsx
-var import_vue12 = require("vue");
-var import_vue13 = require("vue");
-var MpRTEStyleProvider = (0, import_vue13.defineComponent)({
+var import_vue16 = require("vue");
+var import_vue17 = require("vue");
+var MpRTEStyleProvider = (0, import_vue17.defineComponent)({
   name: "MpRTEStyleProvider",
   props: RTEStyleProviderProps,
   setup(props, {
@@ -846,13 +1203,13 @@ var MpRTEStyleProvider = (0, import_vue13.defineComponent)({
     const api = useRTEStyleProvider(props);
     return () => {
       var _a;
-      return (0, import_vue12.createVNode)("div", api.value.rootProps, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+      return (0, import_vue16.createVNode)("div", api.value.rootProps, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
 
 // src/rich-text-editor.tsx
-var MpRichTextEditor = (0, import_vue15.defineComponent)({
+var MpRichTextEditor = (0, import_vue19.defineComponent)({
   name: "MpRichTextEditor",
   props: richTextEditorProps,
   emits: richTextEditorEmits,
@@ -861,7 +1218,7 @@ var MpRichTextEditor = (0, import_vue15.defineComponent)({
   }) {
     const formControlProp = (0, import_pixel3_form_control.useFormControlContext)();
     const api = useRichTextEditor(props);
-    const isFocused = (0, import_vue15.ref)(false);
+    const isFocused = (0, import_vue19.ref)(false);
     const editor = new import_vue_3.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),
@@ -871,6 +1228,12 @@ var MpRichTextEditor = (0, import_vue15.defineComponent)({
         }
       }), import_extension_underline.default, import_extension_text_align.default.configure({
         types: ["heading", "paragraph"]
+      }), import_extension_text_style.default, import_extension_color.Color.configure({
+        types: ["textStyle"]
+      }), import_extension_highlight.default.configure({
+        multicolor: true
+      }), import_extension_link.default.configure({
+        openOnClick: false
       }), import_extension_placeholder.default.configure({
         placeholder: api.value.placeholder || ""
       })],
@@ -894,25 +1257,23 @@ var MpRichTextEditor = (0, import_vue15.defineComponent)({
         emit("change", editor2.getHTML(), editor2);
       }
     });
-    return () => {
-      return (0, import_vue14.createVNode)("div", (0, import_vue14.mergeProps)(api.value.rootProps, {
-        "style": {
-          "--mp-rich-text-editor--border-color-hover": (formControlProp == null ? void 0 : formControlProp.value.isInvalid) || api.value.isInvalid ? import_tokens.token.var("colors.red.400") : isFocused.value ? import_tokens.token.var("colors.blue.400") : import_tokens.token.var("colors.gray.400"),
-          "--mp-rich-text-editor--border-color": (formControlProp == null ? void 0 : formControlProp.value.isInvalid) || api.value.isInvalid ? import_tokens.token.var("colors.red.400") : isFocused.value ? import_tokens.token.var("colors.blue.400") : import_tokens.token.var("colors.gray.100"),
-          "--mp-rich-text-editor--box-shadow": isFocused.value ? import_tokens.token.var("shadows.outer") : void 0,
-          "--mp-rich-text-editor--background-color": (formControlProp == null ? void 0 : formControlProp.value.isDisabled) || api.value.isDisabled ? import_tokens.token.var("colors.gray.50") : import_tokens.token.var("colors.white")
-        }
-      }), [(0, import_vue14.createVNode)(EditorToolbar, (0, import_vue14.mergeProps)({
-        "editor": editor,
-        "options": api.value.options
-      }, api.value.toolbarProps), null), (0, import_vue14.createVNode)(MpRTEStyleProvider, {
-        "id": api.value.id
-      }, {
-        default: () => [(0, import_vue14.createVNode)(import_vue_3.EditorContent, (0, import_vue14.mergeProps)({
-          "editor": editor
-        }, api.value.areaProps), null)]
-      })]);
-    };
+    return () => (0, import_vue18.createVNode)("div", (0, import_vue18.mergeProps)(api.value.rootProps, {
+      "style": {
+        "--mp-rich-text-editor--border-color-hover": (formControlProp == null ? void 0 : formControlProp.value.isInvalid) || api.value.isInvalid ? import_tokens.token.var("colors.red.400") : isFocused.value ? import_tokens.token.var("colors.blue.400") : import_tokens.token.var("colors.gray.400"),
+        "--mp-rich-text-editor--border-color": (formControlProp == null ? void 0 : formControlProp.value.isInvalid) || api.value.isInvalid ? import_tokens.token.var("colors.red.400") : isFocused.value ? import_tokens.token.var("colors.blue.400") : import_tokens.token.var("colors.gray.100"),
+        "--mp-rich-text-editor--box-shadow": isFocused.value ? import_tokens.token.var("shadows.outer") : void 0,
+        "--mp-rich-text-editor--background-color": (formControlProp == null ? void 0 : formControlProp.value.isDisabled) || api.value.isDisabled ? import_tokens.token.var("colors.gray.50") : import_tokens.token.var("colors.white")
+      }
+    }), [(0, import_vue18.createVNode)(EditorToolbar, (0, import_vue18.mergeProps)({
+      "editor": editor,
+      "options": api.value.options
+    }, api.value.toolbarProps), null), (0, import_vue18.createVNode)(MpRTEStyleProvider, {
+      "id": api.value.id
+    }, {
+      default: () => [(0, import_vue18.createVNode)(import_vue_3.EditorContent, (0, import_vue18.mergeProps)({
+        "editor": editor
+      }, api.value.areaProps), null)]
+    })]);
   }
 });
 // Annotate the CommonJS export names for ESM import in node: