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

package/dist/chunk-IYCO25GF.mjs

@@ -0,0 +1,152 @@
+import {
+  LinkExtension
+} from "./chunk-P5KVIGAP.mjs";
+import {
+  SingleExtention
+} from "./chunk-V52XUOVW.mjs";
+import {
+  AlignExtention
+} from "./chunk-JAKI6TU2.mjs";
+import {
+  ColorExtension
+} from "./chunk-JHFPEZ7I.mjs";
+import {
+  HeadingExtention
+} from "./chunk-WBMECFO3.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/editor-toolbar.tsx
+import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { MpDivider } from "@mekari/pixel3-divider";
+var EditorToolbar = defineComponent({
+  name: "EditorToolbar",
+  props: {
+    editor: {
+      type: Object
+    },
+    options: {
+      type: Array
+    }
+  },
+  setup({
+    editor,
+    options
+  }) {
+    const items = ["heading", "bold", "italic", "underline", "strike", "blockquote", "bulletList", "orderedList", "textColor", "fillColor", "textLink", "align", "undo", "redo", "clear"];
+    const itemOptions = {
+      heading: {
+        tooltipLabel: "Text style",
+        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: "Strike",
+        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: "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 alignment",
+        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: "Reset format",
+        onClick: () => (editor == null ? void 0 : editor.chain()).focus().unsetAllMarks().run()
+      }
+    };
+    const renderExtension = /* @__PURE__ */ __name((item) => {
+      const options2 = itemOptions[item];
+      if (!options2)
+        return null;
+      switch (item) {
+        case "heading":
+          return _createVNode(HeadingExtention, {
+            "tooltipLabel": options2.tooltipLabel,
+            "editor": editor
+          }, null);
+        case "align":
+          return _createVNode(AlignExtention, {
+            "tooltipLabel": options2.tooltipLabel,
+            "editor": editor
+          }, null);
+        case "textColor":
+        case "fillColor":
+          return _createVNode(ColorExtension, {
+            "tooltipLabel": options2.tooltipLabel,
+            "editor": editor,
+            "type": options2.type
+          }, null);
+        case "textLink":
+          return _createVNode(LinkExtension, {
+            "tooltipLabel": options2.tooltipLabel,
+            "editor": editor
+          }, null);
+        default:
+          return _createVNode(SingleExtention, {
+            "name": item,
+            "tooltipLabel": options2.tooltipLabel,
+            "onClick": options2.onClick,
+            "editor": editor
+          }, null);
+      }
+    }, "renderExtension");
+    return () => _createVNode("div", null, [options == null ? void 0 : options.map((option, index) => _createVNode(_Fragment, null, [option.map((item) => {
+      if (items.includes(item)) {
+        return renderExtension(item);
+      }
+    }), index !== (options == null ? void 0 : options.length) - 1 && _createVNode(MpDivider, {
+      "id": "divider-toolbar",
+      "orientation": "vertical"
+    }, null)]))]);
+  }
+});
+
+export {
+  EditorToolbar
+};

package/dist/chunk-JAKI6TU2.mjs

@@ -0,0 +1,104 @@
+import {
+  AlignCenterIcon,
+  AlignJustifyIcon,
+  AlignLeftIcon,
+  AlignRightIcon
+} from "./chunk-RNQQ7LGC.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/extensions/align-extension.tsx
+import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { MpPopover, MpPopoverTrigger, MpPopoverContent, MpPopoverList, MpPopoverListItem } from "@mekari/pixel3-popover";
+import { css } from "@mekari/pixel3-styled-system/css";
+var AlignExtention = defineComponent({
+  name: "AlignExtention",
+  props: {
+    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 () => _createVNode(MpPopover, {
+      "id": "popover-align-extention"
+    }, {
+      default: () => [_createVNode(MpPopoverTrigger, null, {
+        default: () => [_withDirectives(_createVNode("button", {
+          "class": {
+            "is-active": isActiveAlignment("left") || isActiveAlignment("right") || isActiveAlignment("center") || isActiveAlignment("justify"),
+            "text-sizing": true
+          },
+          "style": {
+            padding: "4px"
+          }
+        }, [isActiveAlignment("left") && _createVNode(AlignLeftIcon, null, null), isActiveAlignment("center") && _createVNode(AlignCenterIcon, null, null), isActiveAlignment("right") && _createVNode(AlignRightIcon, null, null), isActiveAlignment("justify") && _createVNode(AlignJustifyIcon, null, null), !isActiveAlignment("left") && !isActiveAlignment("right") && !isActiveAlignment("center") && !isActiveAlignment("justify") && _createVNode(AlignLeftIcon, null, null)]), [[_resolveDirective("tooltip"), {
+          label: tooltipLabel
+        }]])]
+      }), _createVNode(MpPopoverContent, {
+        "class": css({
+          width: "46px",
+          maxWidth: "46px",
+          maxHeight: "300px"
+        })
+      }, {
+        default: () => [_createVNode(MpPopoverList, {
+          "class": css({
+            gap: "2",
+            alignItems: "center"
+          })
+        }, {
+          default: () => [_createVNode(MpPopoverListItem, {
+            "class": {
+              "is-active": isActiveAlignment("left"),
+              "text-sizing": true
+            },
+            "onClick": () => (editor == null ? void 0 : editor.chain()).focus().setTextAlign("left").run()
+          }, {
+            default: () => [_createVNode(AlignLeftIcon, null, null)]
+          }), _createVNode(MpPopoverListItem, {
+            "class": {
+              "is-active": isActiveAlignment("center"),
+              "text-sizing": true
+            },
+            "onClick": () => (editor == null ? void 0 : editor.chain()).focus().setTextAlign("center").run()
+          }, {
+            default: () => [_createVNode(AlignCenterIcon, null, null)]
+          }), _createVNode(MpPopoverListItem, {
+            "class": {
+              "is-active": isActiveAlignment("right"),
+              "text-sizing": true
+            },
+            "onClick": () => (editor == null ? void 0 : editor.chain()).focus().setTextAlign("right").run()
+          }, {
+            default: () => [_createVNode(AlignRightIcon, null, null)]
+          }), _createVNode(MpPopoverListItem, {
+            "class": {
+              "is-active": isActiveAlignment("justify"),
+              "text-sizing": true
+            },
+            "onClick": () => (editor == null ? void 0 : editor.chain()).focus().setTextAlign("justify").run()
+          }, {
+            default: () => [_createVNode(AlignJustifyIcon, null, null)]
+          })]
+        })]
+      })]
+    });
+  }
+});
+
+export {
+  AlignExtention
+};

package/dist/chunk-JHFPEZ7I.mjs

@@ -0,0 +1,74 @@
+import {
+  ColorTextIcon,
+  FillTextIcon
+} from "./chunk-RNQQ7LGC.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/extensions/color-extension.tsx
+import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+import { defineComponent, ref } from "vue";
+import { MpColorPicker } from "@mekari/pixel3-color-picker";
+import { css } from "@mekari/pixel3-styled-system/css";
+var colorPreset = ["#3B82F6", "#14B8A6", "#8B5CF6", "#F59E0B", "#EF4444", "#71717A", "#84CC16", "#EC4899", "#232933", "#FFFFFF"];
+var ColorExtension = defineComponent({
+  name: "ColorExtension",
+  props: {
+    tooltipLabel: {
+      type: String
+    },
+    editor: {
+      type: Object
+    },
+    type: {
+      type: String
+    }
+  },
+  setup({
+    tooltipLabel,
+    type,
+    editor
+  }) {
+    const color = 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 () => _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
+        })
+      }, css({
+        textAlign: "left"
+      })]
+    }, [_createVNode(MpColorPicker, {
+      "preset": colorPreset,
+      "variant": "basic",
+      "placement": "bottom-start",
+      "isShowPreset": true,
+      "isShowInput": false,
+      "class": css({
+        width: "auto!"
+      }),
+      "onChange": onColorChange
+    }, {
+      default: () => [_withDirectives(_createVNode("div", null, [type === "fill" ? _createVNode(FillTextIcon, null, null) : _createVNode(ColorTextIcon, null, null)]), [[_resolveDirective("tooltip"), {
+        label: tooltipLabel
+      }]])]
+    })]);
+  }
+});
+
+export {
+  ColorExtension
+};

package/dist/chunk-P5KVIGAP.mjs

@@ -0,0 +1,204 @@
+import {
+  LinkIcon
+} from "./chunk-RNQQ7LGC.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/extensions/link-extension.tsx
+import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { defineComponent, ref, onMounted, onBeforeUnmount, nextTick, Teleport } from "vue";
+import { createPopper } from "@popperjs/core";
+import { css } from "@mekari/pixel3-styled-system/css";
+import { MpInput } from "@mekari/pixel3-input";
+import { MpButton } from "@mekari/pixel3-button";
+var LinkExtension = defineComponent({
+  name: "LinkExtension",
+  props: {
+    tooltipLabel: {
+      type: String
+    },
+    editor: {
+      type: Object
+    }
+  },
+  setup({
+    tooltipLabel,
+    editor
+  }) {
+    const isShowPopover = ref(false);
+    const isEditLink = ref(false);
+    const popoverRef = ref(null);
+    const inputRef = ref(null);
+    const url = 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;
+      nextTick(() => {
+        var _a;
+        if (popoverRef.value) {
+          if (popperInstance) {
+            popperInstance.destroy();
+          }
+          popperInstance = 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");
+    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);
+        }
+      });
+    });
+    onBeforeUnmount(() => {
+      if (popperInstance) {
+        popperInstance.destroy();
+      }
+      document.removeEventListener("mousedown", onClickOutside);
+    });
+    return () => _createVNode(_Fragment, null, [_withDirectives(_createVNode("button", {
+      "class": {
+        "is-active": editor == null ? void 0 : editor.isActive("link")
+      },
+      "disabled": isShowPopover.value,
+      "onClick": onCreateLink
+    }, [_createVNode(LinkIcon, null, null)]), [[_resolveDirective("tooltip"), {
+      label: tooltipLabel
+    }]]), isShowPopover.value && _createVNode(Teleport, {
+      "to": "body"
+    }, {
+      default: () => [_createVNode("div", {
+        "ref": popoverRef,
+        "data-pixel-rte": true,
+        "style": {
+          position: "absolute",
+          zIndex: "var(--mp-z-index-popover)"
+        }
+      }, [_createVNode("div", {
+        "class": css({
+          display: "flex",
+          gap: "2",
+          backgroundColor: "white",
+          border: "1px solid",
+          borderColor: "gray.400",
+          borderRadius: "md",
+          boxShadow: "lg",
+          padding: "2"
+        })
+      }, [_createVNode(MpInput, {
+        "ref": inputRef,
+        "class": 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 ? _createVNode(MpButton, {
+        "leftIcon": "edit",
+        "variant": "ghost",
+        "onClick": onEditLink
+      }, null) : _createVNode(MpButton, {
+        "leftIcon": "check",
+        "onClick": onSetLink
+      }, null), isEditLink.value ? _createVNode(MpButton, {
+        "leftIcon": "delete",
+        "variant": "ghost",
+        "onClick": onUnlink
+      }, null) : _createVNode(MpButton, {
+        "leftIcon": "close",
+        "variant": "ghost",
+        "onClick": onClosePopover
+      }, null)])])]
+    })]);
+  }
+});
+
+export {
+  LinkExtension
+};

package/dist/{chunk-HB4A6A3W.mjs → chunk-PLASPZGG.mjs}

@@ -1,6 +1,6 @@
 import {
   EditorToolbar
-} from "./chunk-SUI7NBPF.mjs";
+} from "./chunk-IYCO25GF.mjs";
 import {
   MpRTEStyleProvider
 } from "./chunk-JAMH4XOS.mjs";
@@ -19,7 +19,11 @@ 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 TextStyle from "@tiptap/extension-text-style";
 import Placeholder from "@tiptap/extension-placeholder";
+import { Color } from "@tiptap/extension-color";
+import Link from "@tiptap/extension-link";
+import Highlight from "@tiptap/extension-highlight";
 import { token } from "@mekari/pixel3-styled-system/tokens";
 import { useFormControlContext } from "@mekari/pixel3-form-control";
 var MpRichTextEditor = defineComponent({
@@ -41,6 +45,12 @@ var MpRichTextEditor = defineComponent({
         }
       }), Underline, TextAlign.configure({
         types: ["heading", "paragraph"]
+      }), TextStyle, Color.configure({
+        types: ["textStyle"]
+      }), Highlight.configure({
+        multicolor: true
+      }), Link.configure({
+        openOnClick: false
       }), Placeholder.configure({
         placeholder: api.value.placeholder || ""
       })],
@@ -64,25 +74,23 @@ var MpRichTextEditor = defineComponent({
         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, {
-        "id": api.value.id
-      }, {
-        default: () => [_createVNode(EditorContent, _mergeProps({
-          "editor": editor
-        }, api.value.areaProps), null)]
-      })]);
-    };
+    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, {
+      "id": api.value.id
+    }, {
+      default: () => [_createVNode(EditorContent, _mergeProps({
+        "editor": editor
+      }, api.value.areaProps), null)]
+    })]);
   }
 });