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

package/dist/chunk-MMFX326I.mjs

@@ -0,0 +1,44 @@
+import {
+  BlockquoteIcon,
+  BoldIcon,
+  BulletListIcon,
+  ClearIcon,
+  ItalicIcon,
+  OrderedListIcon,
+  RedoIcon,
+  StrikeIcon,
+  UnderlineIcon,
+  UndoIcon
+} from "./chunk-J5QZDLNA.mjs";
+
+// src/extensions/single-extension.tsx
+import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+var SingleExtention = defineComponent({
+  name: "SingleExtention",
+  props: {
+    name: String,
+    tooltipLabel: String,
+    onClick: Function,
+    editor: Object
+  },
+  setup({
+    name,
+    tooltipLabel,
+    onClick,
+    editor
+  }) {
+    return () => _withDirectives(_createVNode("button", {
+      "class": {
+        "is-active": editor == null ? void 0 : editor.isActive(name)
+      },
+      "onClick": onClick
+    }, [name === "bold" && _createVNode(BoldIcon, null, null), name === "italic" && _createVNode(ItalicIcon, null, null), name === "underline" && _createVNode(UnderlineIcon, null, null), name === "strike" && _createVNode(StrikeIcon, null, null), name === "blockquote" && _createVNode(BlockquoteIcon, null, null), name === "bulletList" && _createVNode(BulletListIcon, null, null), name === "orderedList" && _createVNode(OrderedListIcon, null, null), name === "undo" && _createVNode(UndoIcon, null, null), name === "redo" && _createVNode(RedoIcon, null, null), name === "clear" && _createVNode(ClearIcon, null, null)]), [[_resolveDirective("tooltip"), {
+      label: tooltipLabel
+    }]]);
+  }
+});
+
+export {
+  SingleExtention
+};

package/dist/chunk-N5YFARYC.mjs

@@ -0,0 +1,89 @@
+import {
+  EditorToolbar
+} from "./chunk-IE2ITPBX.mjs";
+import {
+  MpRTEStyleProvider
+} from "./chunk-VQOMXS6M.mjs";
+import {
+  useRichTextEditor
+} from "./chunk-2SSVSEKG.mjs";
+import {
+  richTextEditorEmits,
+  richTextEditorProps
+} from "./chunk-CENCRLRC.mjs";
+
+// src/rich-text-editor.tsx
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { defineComponent, ref } from "vue";
+import { Editor, EditorContent } from "@tiptap/vue-3";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import TextAlign from "@tiptap/extension-text-align";
+import Placeholder from "@tiptap/extension-placeholder";
+import { token } from "@mekari/pixel3-styled-system/tokens";
+import { useFormControlContext } from "@mekari/pixel3-form-control";
+var MpRichTextEditor = defineComponent({
+  name: "MpRichTextEditor",
+  props: richTextEditorProps,
+  emits: richTextEditorEmits,
+  setup(props, {
+    emit
+  }) {
+    const formControlProp = useFormControlContext();
+    const api = useRichTextEditor(props);
+    const isFocused = ref(false);
+    const editor = new 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: [StarterKit.configure({
+        heading: {
+          levels: [1, 2, 3]
+        }
+      }), Underline, TextAlign.configure({
+        types: ["heading", "paragraph"]
+      }), Placeholder.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 _createVNode("div", _mergeProps(api.value.rootProps, {
+        "style": {
+          "--mp-rich-text-editor--border-color-hover": (formControlProp == null ? void 0 : formControlProp.value.isInvalid) || api.value.isInvalid ? token.var("colors.red.400") : isFocused.value ? token.var("colors.blue.400") : token.var("colors.gray.400"),
+          "--mp-rich-text-editor--border-color": (formControlProp == null ? void 0 : formControlProp.value.isInvalid) || api.value.isInvalid ? token.var("colors.red.400") : isFocused.value ? token.var("colors.blue.400") : token.var("colors.gray.100"),
+          "--mp-rich-text-editor--box-shadow": isFocused.value ? token.var("shadows.outer") : void 0,
+          "--mp-rich-text-editor--background-color": (formControlProp == null ? void 0 : formControlProp.value.isDisabled) || api.value.isDisabled ? token.var("colors.gray.50") : token.var("colors.white")
+        }
+      }), [_createVNode(EditorToolbar, _mergeProps({
+        "editor": editor,
+        "options": api.value.options
+      }, api.value.toolbarProps), null), _createVNode(MpRTEStyleProvider, null, {
+        default: () => [_createVNode(EditorContent, _mergeProps({
+          "editor": editor
+        }, api.value.areaProps), null)]
+      })]);
+    };
+  }
+});
+
+export {
+  MpRichTextEditor
+};

package/dist/chunk-OFJH5BEQ.mjs

@@ -0,0 +1,176 @@
+import {
+  CaretIcon
+} from "./chunk-J5QZDLNA.mjs";
+
+// src/extensions/heading-extension.tsx
+import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
+import { defineComponent } from "vue";
+import { MpPopover, MpPopoverTrigger, MpPopoverContent, MpPopoverList, MpPopoverListItem } from "@mekari/pixel3-popover";
+import { MpText } from "@mekari/pixel3-text";
+import { css } from "@mekari/pixel3-styled-system/css";
+var HeadingExtention = defineComponent({
+  name: "HeadingExtention",
+  props: {
+    tooltipLabel: String,
+    editor: Object
+  },
+  setup({
+    tooltipLabel,
+    editor
+  }) {
+    return () => _createVNode(MpPopover, null, {
+      default: () => [_createVNode(MpPopoverTrigger, null, {
+        default: () => [_withDirectives(_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
+        })) && _createVNode(MpText, {
+          "class": css({
+            color: "currentColor"
+          })
+        }, {
+          default: () => [_createTextVNode("Heading 1")]
+        }), (editor == null ? void 0 : editor.isActive("heading", {
+          level: 2
+        })) && _createVNode(MpText, {
+          "class": css({
+            color: "currentColor"
+          })
+        }, {
+          default: () => [_createTextVNode("Heading 2")]
+        }), (editor == null ? void 0 : editor.isActive("heading", {
+          level: 3
+        })) && _createVNode(MpText, {
+          "class": css({
+            color: "currentColor"
+          })
+        }, {
+          default: () => [_createTextVNode("Heading 3")]
+        }), (editor == null ? void 0 : editor.isActive("paragraph")) && _createVNode(MpText, {
+          "class": css({
+            color: "currentColor"
+          })
+        }, {
+          default: () => [_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")) && _createVNode(MpText, {
+          "class": css({
+            color: "currentColor"
+          })
+        }, {
+          default: () => [_createTextVNode("Normal text")]
+        }), _createVNode(CaretIcon, null, null)]), [[_resolveDirective("tooltip"), {
+          label: tooltipLabel
+        }]])]
+      }), _createVNode(MpPopoverContent, {
+        "class": css({
+          width: "200px",
+          maxWidth: "200px",
+          maxHeight: "300px"
+        })
+      }, {
+        default: () => [_createVNode(MpPopoverList, {
+          "class": css({
+            gap: "2",
+            alignItems: "flex-start",
+            paddingLeft: "3"
+          })
+        }, {
+          default: () => [_createVNode(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: () => [_createVNode(MpText, {
+              "as": "h1",
+              "size": "h1",
+              "class": css({
+                color: "currentColor"
+              })
+            }, {
+              default: () => [_createTextVNode("Heading 1")]
+            })]
+          }), _createVNode(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: () => [_createVNode(MpText, {
+              "as": "h2",
+              "size": "h2",
+              "class": css({
+                color: "currentColor"
+              })
+            }, {
+              default: () => [_createTextVNode("Heading 2")]
+            })]
+          }), _createVNode(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: () => [_createVNode(MpText, {
+              "as": "h3",
+              "size": "h3",
+              "class": css({
+                color: "currentColor"
+              })
+            }, {
+              default: () => [_createTextVNode("Heading 3")]
+            })]
+          }), _createVNode(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: () => [_createVNode(MpText, {
+              "class": css({
+                color: "currentColor"
+              })
+            }, {
+              default: () => [_createTextVNode("Normal text")]
+            })]
+          })]
+        })]
+      })]
+    });
+  }
+});
+
+export {
+  HeadingExtention
+};

package/dist/chunk-QZ7VFGWC.mjs

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};

package/dist/chunk-VQOMXS6M.mjs

@@ -0,0 +1,27 @@
+import {
+  useRTEStyleProvider
+} from "./chunk-2SSVSEKG.mjs";
+import {
+  RTEStyleProviderProps
+} from "./chunk-CENCRLRC.mjs";
+
+// src/rte-style-provider.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+var MpRTEStyleProvider = defineComponent({
+  name: "MpRTEStyleProvider",
+  props: RTEStyleProviderProps,
+  setup(props, {
+    slots
+  }) {
+    const api = useRTEStyleProvider(props);
+    return () => {
+      var _a;
+      return _createVNode("div", api.value.rootProps, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+
+export {
+  MpRTEStyleProvider
+};

package/dist/editor-toolbar.d.mts

@@ -0,0 +1,12 @@
+import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+
+declare const EditorToolbar: vue.DefineComponent<{
+    editor: ObjectConstructor;
+    options: ObjectConstructor;
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    editor: ObjectConstructor;
+    options: ObjectConstructor;
+}>>, {}, {}>;
+
+export { EditorToolbar };

package/dist/editor-toolbar.d.ts

@@ -0,0 +1,12 @@
+import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+
+declare const EditorToolbar: vue.DefineComponent<{
+    editor: ObjectConstructor;
+    options: ObjectConstructor;
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    editor: ObjectConstructor;
+    options: ObjectConstructor;
+}>>, {}, {}>;
+
+export { EditorToolbar };