@mekari/pixel3-rich-text-editor 0.0.1-dev.0

package/dist/rich-text-editor.js

@@ -0,0 +1,910 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/rich-text-editor.tsx
+var rich_text_editor_exports = {};
+__export(rich_text_editor_exports, {
+  MpRichTextEditor: () => MpRichTextEditor
+});
+module.exports = __toCommonJS(rich_text_editor_exports);
+var import_vue14 = require("vue");
+var import_vue15 = require("vue");
+
+// src/modules/rich-text-editor.props.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var richTextEditorProps = {
+  id: {
+    type: String
+  },
+  value: {
+    type: String
+  },
+  placeholder: {
+    type: String
+  },
+  options: {
+    type: Array
+  },
+  isInvalid: {
+    type: Boolean,
+    default: false
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  hasBorder: {
+    type: Boolean,
+    default: true
+  }
+};
+var RTEStyleProviderProps = {
+  id: {
+    type: String
+  }
+};
+var richTextEditorEmits = (0, import_pixel3_utils.declareEmit)(["change", "blur", "focus"]);
+
+// src/modules/rich-text-editor.hooks.ts
+var import_vue = require("vue");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+
+// src/modules/rich-text-editor.connects.ts
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+function richTextEditorConnect(state, classes) {
+  const {
+    id,
+    value,
+    placeholder,
+    options,
+    hasBorder,
+    isInvalid,
+    isDisabled
+  } = state;
+  const idx = id != null ? id : `mp-rich-text-editor-${(0, import_pixel3_utils2.useId)()}`;
+  return {
+    value,
+    placeholder,
+    options,
+    isInvalid,
+    isDisabled,
+    rootProps: {
+      id: idx,
+      class: classes.root,
+      "data-has-border": hasBorder,
+      "data-pixel-component": "MpRichTextEditor"
+    },
+    toolbarProps: {
+      id: `${idx}-toolbar`,
+      class: classes.toolbar,
+      "data-pixel-component": "MpRichTextEditorToolbar"
+    },
+    areaProps: {
+      id: `${idx}-area`,
+      class: classes.area,
+      "data-pixel-component": "MpRichTextEditorArea"
+    }
+  };
+}
+__name(richTextEditorConnect, "richTextEditorConnect");
+function RTEStyleProviderConnect(state, classes) {
+  const {
+    id
+  } = state;
+  const idx = id != null ? id : `mp-rte-style-provider-${(0, import_pixel3_utils2.useId)()}`;
+  return {
+    rootProps: {
+      id: idx,
+      class: classes,
+      "data-pixel-component": "MpRTEStyleProvider"
+    }
+  };
+}
+__name(RTEStyleProviderConnect, "RTEStyleProviderConnect");
+
+// src/modules/rich-text-editor.hooks.ts
+var useRichTextEditor = /* @__PURE__ */ __name((props) => {
+  const context = (0, import_vue.ref)(props);
+  const [value] = import_recipes.richTextEditorSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.richTextEditorSlotRecipe)(value);
+  return (0, import_vue.computed)(() => richTextEditorConnect(context.value, classes));
+}, "useRichTextEditor");
+var useRTEStyleProvider = /* @__PURE__ */ __name((props) => {
+  const context = (0, import_vue.ref)(props);
+  const [value] = import_recipes.RTEStyleProviderRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.RTEStyleProviderRecipe)(value);
+  return (0, import_vue.computed)(() => RTEStyleProviderConnect(context.value, classes));
+}, "useRTEStyleProvider");
+
+// src/rich-text-editor.tsx
+var import_vue_3 = require("@tiptap/vue-3");
+
+// src/editor-toolbar.tsx
+var import_vue10 = require("vue");
+var import_vue11 = require("vue");
+
+// src/extensions/heading-extension.tsx
+var import_vue4 = require("vue");
+var import_vue5 = require("vue");
+
+// src/extensions/icons.tsx
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+var BoldIcon = (0, import_vue3.defineComponent)({
+  name: "BoldIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "12",
+      "height": "16",
+      "viewBox": "0 0 12 16",
+      "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"
+    }, null)]);
+  }
+});
+var ItalicIcon = (0, import_vue3.defineComponent)({
+  name: "ItalicIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "14",
+      "height": "16",
+      "viewBox": "0 0 14 16",
+      "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"
+    }, null)]);
+  }
+});
+var UnderlineIcon = (0, import_vue3.defineComponent)({
+  name: "UnderlineIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "16",
+      "height": "16",
+      "viewBox": "0 0 16 16",
+      "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": "currentColor"
+    }, null)]);
+  }
+});
+var StrikeIcon = (0, import_vue3.defineComponent)({
+  name: "StrikeIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "16",
+      "height": "16",
+      "viewBox": "0 0 16 16",
+      "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": "currentColor"
+    }, null)]);
+  }
+});
+var BlockquoteIcon = (0, import_vue3.defineComponent)({
+  name: "BlockquoteIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "20",
+      "height": "18",
+      "viewBox": "0 0 20 18",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    }, [(0, import_vue2.createVNode)("path", {
+      "d": "M1.66675 9.29169H6.50007C7.77507 9.29169 8.65009 10.2584 8.65009 11.4417V14.1251C8.65009 15.3084 7.77507 16.275 6.50007 16.275H3.81676C2.63343 16.275 1.66675 15.3084 1.66675 14.1251V9.29169ZM1.66675 9.29169C1.66675 4.25002 2.60844 3.41673 5.44177 1.7334M11.3584 9.29169H16.1917C17.4667 9.29169 18.3418 10.2584 18.3418 11.4417V14.1251C18.3418 15.3084 17.4667 16.275 16.1917 16.275H13.5084C12.3251 16.275 11.3584 15.3084 11.3584 14.1251V9.29169ZM11.3584 9.29169C11.3584 4.25002 12.3001 3.41673 15.1334 1.7334",
+      "stroke": "currentColor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null)]);
+  }
+});
+var BulletListIcon = (0, import_vue3.defineComponent)({
+  name: "BulletListIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "18",
+      "height": "18",
+      "viewBox": "0 0 16 16",
+      "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"
+    }, null)]);
+  }
+});
+var OrderedListIcon = (0, import_vue3.defineComponent)({
+  name: "OrderedListIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "18",
+      "height": "18",
+      "viewBox": "0 0 16 16",
+      "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": "currentColor"
+    }, null)]);
+  }
+});
+var AlignLeftIcon = (0, import_vue3.defineComponent)({
+  name: "AlignLeftIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "22",
+      "height": "22",
+      "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"
+    }, null)]);
+  }
+});
+var AlignCenterIcon = (0, import_vue3.defineComponent)({
+  name: "AlignCenterIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "22",
+      "height": "22",
+      "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 M6 8L14 8 M6 16L14 16",
+      "stroke": "currentColor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null)]);
+  }
+});
+var AlignRightIcon = (0, import_vue3.defineComponent)({
+  name: "AlignRightIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "22",
+      "height": "22",
+      "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 M9 8L17 8 M9 16L17 16",
+      "stroke": "currentColor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null)]);
+  }
+});
+var AlignJustifyIcon = (0, import_vue3.defineComponent)({
+  name: "AlignJustifyIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "22",
+      "height": "22",
+      "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 8L17 8 M3 16L17 16",
+      "stroke": "currentColor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null)]);
+  }
+});
+var UndoIcon = (0, import_vue3.defineComponent)({
+  name: "UndoIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "24",
+      "height": "24",
+      "viewBox": "0 0 24 24",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    }, [(0, import_vue2.createVNode)("path", {
+      "d": "M4.06317 8.15033C4.49451 7.3513 5.05312 6.55227 5.80265 5.80273C9.18969 2.41569 14.6768 2.41569 18.0639 5.80273C21.4509 9.18977 21.4509 14.6769 18.0639 18.064C14.6768 21.451 9.18969 21.451 5.80265 18.064C4.544 16.8053 3.75204 15.2497 3.42677 13.6233M3.052 4.8057L3.35606 9.19684L7.47855 8.55343",
+      "stroke": "currentColor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null)]);
+  }
+});
+var RedoIcon = (0, import_vue3.defineComponent)({
+  name: "RedoIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "24",
+      "height": "24",
+      "viewBox": "0 0 24 24",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    }, [(0, import_vue2.createVNode)("path", {
+      "d": "M19.593 8.15033C19.1617 7.3513 18.603 6.55227 17.8535 5.80273C14.4665 2.41569 8.97932 2.41569 5.59228 5.80273C2.20524 9.18977 2.20524 14.6769 5.59228 18.064C8.97932 21.451 14.4665 21.451 17.8535 18.064C19.1122 16.8053 19.9041 15.2497 20.2294 13.6233M20.6042 4.8057L20.3001 9.19684L16.1776 8.55343",
+      "stroke": "currentColor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null)]);
+  }
+});
+var ClearIcon = (0, import_vue3.defineComponent)({
+  name: "ClearIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "18",
+      "height": "16",
+      "viewBox": "0 0 18 16",
+      "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"
+    }, null)]);
+  }
+});
+var CaretIcon = (0, import_vue3.defineComponent)({
+  name: "CaretIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "width": "10",
+      "height": "6",
+      "viewBox": "0 0 10 6",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "style": {
+        marginLeft: "8px"
+      }
+    }, [(0, import_vue2.createVNode)("path", {
+      "d": "M0 0.5L5 5.5L10 0.5L0 0.5Z",
+      "fill": "currentColor"
+    }, null)]);
+  }
+});
+
+// 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
+  },
+  setup({
+    tooltipLabel,
+    editor
+  }) {
+    return () => (0, import_vue4.createVNode)(import_pixel3_popover.MpPopover, null, {
+      default: () => [(0, import_vue4.createVNode)(import_pixel3_popover.MpPopoverTrigger, null, {
+        default: () => [(0, import_vue4.withDirectives)((0, import_vue4.createVNode)("button", {
+          "class": {
+            "is-active": (editor == null ? void 0 : editor.isActive("heading", {
+              level: 1
+            })) || (editor == null ? void 0 : editor.isActive("heading", {
+              level: 2
+            })) || (editor == null ? void 0 : editor.isActive("heading", {
+              level: 3
+            })) || (editor == null ? void 0 : editor.isActive("paragraph")),
+            "text-sizing": true
+          }
+        }, [(editor == null ? void 0 : editor.isActive("heading", {
+          level: 1
+        })) && (0, import_vue4.createVNode)(import_pixel3_text.MpText, {
+          "class": (0, import_css.css)({
+            color: "currentColor"
+          })
+        }, {
+          default: () => [(0, import_vue4.createTextVNode)("Heading 1")]
+        }), (editor == null ? void 0 : editor.isActive("heading", {
+          level: 2
+        })) && (0, import_vue4.createVNode)(import_pixel3_text.MpText, {
+          "class": (0, import_css.css)({
+            color: "currentColor"
+          })
+        }, {
+          default: () => [(0, import_vue4.createTextVNode)("Heading 2")]
+        }), (editor == null ? void 0 : editor.isActive("heading", {
+          level: 3
+        })) && (0, import_vue4.createVNode)(import_pixel3_text.MpText, {
+          "class": (0, import_css.css)({
+            color: "currentColor"
+          })
+        }, {
+          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"
+          })
+        }, {
+          default: () => [(0, import_vue4.createTextVNode)("Normal text")]
+        }), !(editor == null ? void 0 : editor.isActive("heading", {
+          level: 1
+        })) && !(editor == null ? void 0 : editor.isActive("heading", {
+          level: 2
+        })) && !(editor == null ? void 0 : editor.isActive("heading", {
+          level: 3
+        })) && !(editor == null ? void 0 : editor.isActive("paragraph")) && (0, import_vue4.createVNode)(import_pixel3_text.MpText, {
+          "class": (0, import_css.css)({
+            color: "currentColor"
+          })
+        }, {
+          default: () => [(0, import_vue4.createTextVNode)("Normal text")]
+        }), (0, import_vue4.createVNode)(CaretIcon, null, null)]), [[(0, import_vue4.resolveDirective)("tooltip"), {
+          label: tooltipLabel
+        }]])]
+      }), (0, import_vue4.createVNode)(import_pixel3_popover.MpPopoverContent, {
+        "class": (0, import_css.css)({
+          width: "200px",
+          maxWidth: "200px",
+          maxHeight: "300px"
+        })
+      }, {
+        default: () => [(0, import_vue4.createVNode)(import_pixel3_popover.MpPopoverList, {
+          "class": (0, import_css.css)({
+            gap: "2",
+            alignItems: "flex-start",
+            paddingLeft: "3"
+          })
+        }, {
+          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
+            }
+          }, {
+            default: () => [(0, import_vue4.createVNode)(import_pixel3_text.MpText, {
+              "as": "h1",
+              "size": "h1",
+              "class": (0, import_css.css)({
+                color: "currentColor"
+              })
+            }, {
+              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
+            }
+          }, {
+            default: () => [(0, import_vue4.createVNode)(import_pixel3_text.MpText, {
+              "as": "h2",
+              "size": "h2",
+              "class": (0, import_css.css)({
+                color: "currentColor"
+              })
+            }, {
+              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
+            }
+          }, {
+            default: () => [(0, import_vue4.createVNode)(import_pixel3_text.MpText, {
+              "as": "h3",
+              "size": "h3",
+              "class": (0, import_css.css)({
+                color: "currentColor"
+              })
+            }, {
+              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
+            }
+          }, {
+            default: () => [(0, import_vue4.createVNode)(import_pixel3_text.MpText, {
+              "class": (0, import_css.css)({
+                color: "currentColor"
+              })
+            }, {
+              default: () => [(0, import_vue4.createTextVNode)("Normal text")]
+            })]
+          })]
+        })]
+      })]
+    });
+  }
+});
+
+// src/extensions/align-extension.tsx
+var import_vue6 = require("vue");
+var import_vue7 = require("vue");
+var import_pixel3_popover2 = require("@mekari/pixel3-popover");
+var import_css2 = require("@mekari/pixel3-styled-system/css");
+var AlignExtention = (0, import_vue7.defineComponent)({
+  name: "AlignExtention",
+  props: {
+    tooltipLabel: String,
+    editor: Object
+  },
+  setup({
+    tooltipLabel,
+    editor
+  }) {
+    return () => (0, import_vue6.createVNode)(import_pixel3_popover2.MpPopover, null, {
+      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"
+            })),
+            "text-sizing": true
+          },
+          "style": {
+            padding: "0 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"), {
+          label: tooltipLabel
+        }]])]
+      }), (0, import_vue6.createVNode)(import_pixel3_popover2.MpPopoverContent, {
+        "class": (0, import_css2.css)({
+          width: "46px",
+          maxWidth: "46px",
+          maxHeight: "300px"
+        })
+      }, {
+        default: () => [(0, import_vue6.createVNode)(import_pixel3_popover2.MpPopoverList, {
+          "class": (0, import_css2.css)({
+            gap: "2",
+            alignItems: "center"
+          })
+        }, {
+          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"
+              }),
+              "text-sizing": true
+            }
+          }, {
+            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"
+              }),
+              "text-sizing": true
+            }
+          }, {
+            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"
+              }),
+              "text-sizing": true
+            }
+          }, {
+            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"
+              }),
+              "text-sizing": true
+            }
+          }, {
+            default: () => [(0, import_vue6.createVNode)(AlignLeftIcon, null, null)]
+          })]
+        })]
+      })]
+    });
+  }
+});
+
+// src/extensions/single-extension.tsx
+var import_vue8 = require("vue");
+var import_vue9 = require("vue");
+var SingleExtention = (0, import_vue9.defineComponent)({
+  name: "SingleExtention",
+  props: {
+    name: String,
+    tooltipLabel: String,
+    onClick: Function,
+    editor: Object
+  },
+  setup({
+    name,
+    tooltipLabel,
+    onClick,
+    editor
+  }) {
+    return () => (0, import_vue8.withDirectives)((0, import_vue8.createVNode)("button", {
+      "class": {
+        "is-active": 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"), {
+      label: tooltipLabel
+    }]]);
+  }
+});
+
+// src/editor-toolbar.tsx
+var import_pixel3_divider = require("@mekari/pixel3-divider");
+var EditorToolbar = (0, import_vue11.defineComponent)({
+  name: "EditorToolbar",
+  props: {
+    editor: Object,
+    options: Object
+  },
+  setup({
+    editor,
+    options
+  }) {
+    const items = ["heading", "bold", "italic", "underline", "strike", "blockquote", "bulletList", "orderedList", "align", "undo", "redo", "clear"];
+    const itemOptions = {
+      heading: {
+        tooltipLabel: "Text sizing",
+        editor
+      },
+      bold: {
+        tooltipLabel: "Bold",
+        onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run()
+      },
+      italic: {
+        tooltipLabel: "Italic",
+        onClick: () => editor == null ? void 0 : editor.chain().focus().toggleItalic().run()
+      },
+      underline: {
+        tooltipLabel: "Underline",
+        onClick: () => editor == null ? void 0 : editor.chain().focus().toggleUnderline().run()
+      },
+      strike: {
+        tooltipLabel: "Strikethrough",
+        onClick: () => editor == null ? void 0 : editor.chain().focus().toggleStrike().run()
+      },
+      blockquote: {
+        tooltipLabel: "Blockquote",
+        onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBlockquote().run()
+      },
+      bulletList: {
+        tooltipLabel: "Bullet list",
+        onClick: () => editor == null ? void 0 : editor.chain().focus().toggleBulletList().run()
+      },
+      orderedList: {
+        tooltipLabel: "Ordered list",
+        onClick: () => editor == null ? void 0 : editor.chain().focus().toggleOrderedList().run()
+      },
+      align: {
+        tooltipLabel: "Text align",
+        editor
+      },
+      undo: {
+        tooltipLabel: "Undo",
+        onClick: () => editor == null ? void 0 : editor.chain().focus().undo().run()
+      },
+      redo: {
+        tooltipLabel: "Redo",
+        onClick: () => editor == null ? void 0 : editor.chain().focus().redo().run()
+      },
+      clear: {
+        tooltipLabel: "Clear formatting",
+        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,
+            "editor": editor
+          }, null);
+        } else if (item === "align") {
+          return (0, import_vue10.createVNode)(AlignExtention, {
+            "tooltipLabel": (_b = itemOptions[item]) == null ? void 0 : _b.tooltipLabel,
+            "editor": editor
+          }, null);
+        } else {
+          return (0, import_vue10.createVNode)(SingleExtention, {
+            "name": item,
+            "tooltipLabel": (_c = itemOptions[item]) == null ? void 0 : _c.tooltipLabel,
+            "onClick": (_d = itemOptions[item]) == null ? void 0 : _d.onClick,
+            "editor": editor
+          }, null);
+        }
+      }
+    }), idx !== options.length - 1 && (0, import_vue10.createVNode)(import_pixel3_divider.MpDivider, {
+      "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)({
+  name: "MpRTEStyleProvider",
+  props: RTEStyleProviderProps,
+  setup(props, {
+    slots
+  }) {
+    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)]);
+    };
+  }
+});
+
+// src/rich-text-editor.tsx
+var MpRichTextEditor = (0, import_vue15.defineComponent)({
+  name: "MpRichTextEditor",
+  props: richTextEditorProps,
+  emits: richTextEditorEmits,
+  setup(props, {
+    emit
+  }) {
+    const formControlProp = (0, import_pixel3_form_control.useFormControlContext)();
+    const api = useRichTextEditor(props);
+    const isFocused = (0, import_vue15.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),
+      extensions: [import_starter_kit.default.configure({
+        heading: {
+          levels: [1, 2, 3]
+        }
+      }), import_extension_underline.default, import_extension_text_align.default.configure({
+        types: ["heading", "paragraph"]
+      }), import_extension_placeholder.default.configure({
+        placeholder: api.value.placeholder || ""
+      })],
+      onFocus({
+        editor: editor2,
+        event
+      }) {
+        isFocused.value = true;
+        emit("focus", editor2, event);
+      },
+      onBlur({
+        editor: editor2,
+        event
+      }) {
+        isFocused.value = false;
+        emit("blur", editor2, event);
+      },
+      onUpdate({
+        editor: editor2
+      }) {
+        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, null, {
+        default: () => [(0, import_vue14.createVNode)(import_vue_3.EditorContent, (0, import_vue14.mergeProps)({
+          "editor": editor
+        }, api.value.areaProps), null)]
+      })]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpRichTextEditor
+});