@mekari/pixel3-rich-text-editor 0.1.2 → 0.1.3-dev.0

package/dist/rich-text-editor.mjs

@@ -1,20 +1,23 @@
 import {
   MpRichTextEditor
-} from "./chunk-XNM3YX37.mjs";
-import "./chunk-YE6FEVD4.mjs";
-import "./chunk-VYCDVS5I.mjs";
-import "./chunk-ZO6THAT6.mjs";
-import "./chunk-25RKPG44.mjs";
-import "./chunk-MKTM47RO.mjs";
+} from "./chunk-ZYSEHV5N.mjs";
+import "./chunk-UD5PDCGC.mjs";
+import "./chunk-HIHIKPNN.mjs";
+import "./chunk-X2CB42A3.mjs";
+import "./chunk-COZ45QUD.mjs";
+import "./chunk-47IOAHWN.mjs";
+import "./chunk-ENKUUZPM.mjs";
+import "./chunk-AIWY3FHJ.mjs";
 import "./chunk-ZRAXSVO5.mjs";
 import "./chunk-ZAXJ3BEP.mjs";
-import "./chunk-7BEXEMOE.mjs";
+import "./chunk-6O4HSL2C.mjs";
 import "./chunk-4KJOYLJI.mjs";
 import "./chunk-4TUA5VF4.mjs";
-import "./chunk-UBJOZ2IA.mjs";
-import "./chunk-5S2LSGJV.mjs";
-import "./chunk-YIEQVTEO.mjs";
-import "./chunk-Q7QLZISF.mjs";
+import "./chunk-BWRU2WZN.mjs";
+import "./chunk-76GEEOAG.mjs";
+import "./chunk-YWVVMJGP.mjs";
+import "./chunk-Y6UPQ6EU.mjs";
+import "./chunk-IFRJVX2K.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   MpRichTextEditor

package/dist/rte-style-provider.mjs

@@ -1,9 +1,9 @@
 import {
   MpRTEStyleProvider
-} from "./chunk-MKTM47RO.mjs";
+} from "./chunk-AIWY3FHJ.mjs";
 import "./chunk-ZRAXSVO5.mjs";
 import "./chunk-ZAXJ3BEP.mjs";
-import "./chunk-7BEXEMOE.mjs";
+import "./chunk-6O4HSL2C.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   MpRTEStyleProvider

package/dist/rte-variable-suggestion.d.mts

@@ -0,0 +1,11 @@
+import { PluginKey } from '@tiptap/pm/state';
+import { VariableSuggestionItem } from './modules/rich-text-editor.types.mjs';
+import { VariableOptions } from './extensions/variable-extension.mjs';
+import '@mekari/pixel3-utils';
+import '@tiptap/core';
+import '@tiptap/suggestion';
+
+declare const VariablePluginKey: PluginKey<any>;
+declare const createVariableSuggestion: (getSuggestionItems?: () => VariableSuggestionItem[]) => VariableOptions['suggestion'];
+
+export { VariablePluginKey, createVariableSuggestion };

package/dist/rte-variable-suggestion.d.ts

@@ -0,0 +1,11 @@
+import { PluginKey } from '@tiptap/pm/state';
+import { VariableSuggestionItem } from './modules/rich-text-editor.types.js';
+import { VariableOptions } from './extensions/variable-extension.js';
+import '@mekari/pixel3-utils';
+import '@tiptap/core';
+import '@tiptap/suggestion';
+
+declare const VariablePluginKey: PluginKey<any>;
+declare const createVariableSuggestion: (getSuggestionItems?: () => VariableSuggestionItem[]) => VariableOptions['suggestion'];
+
+export { VariablePluginKey, createVariableSuggestion };

package/dist/rte-variable-suggestion.js

@@ -0,0 +1,405 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/rte-variable-suggestion.ts
+var rte_variable_suggestion_exports = {};
+__export(rte_variable_suggestion_exports, {
+  VariablePluginKey: () => VariablePluginKey,
+  createVariableSuggestion: () => createVariableSuggestion
+});
+module.exports = __toCommonJS(rte_variable_suggestion_exports);
+var import_vue_3 = require("@tiptap/vue-3");
+var import_core = require("@popperjs/core");
+var import_state = require("@tiptap/pm/state");
+
+// src/extensions/variable-list-extension.tsx
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var import_pixel3_popover = require("@mekari/pixel3-popover");
+var import_pixel3_text = require("@mekari/pixel3-text");
+var VariableList = (0, import_vue2.defineComponent)({
+  name: "VariableList",
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    command: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(props, {
+    expose
+  }) {
+    const selectedIndex = (0, import_vue2.ref)(0);
+    const listRef = (0, import_vue2.ref)(null);
+    const groupedItems = (0, import_vue2.computed)(() => {
+      const groups = {};
+      props.items.forEach((item) => {
+        const category = item.category || "OTHER";
+        if (!groups[category]) {
+          groups[category] = [];
+        }
+        groups[category].push(item);
+      });
+      return Object.entries(groups).map(([category, items]) => ({
+        category,
+        items
+      }));
+    });
+    const scrollToFocusedItem = /* @__PURE__ */ __name(() => {
+      (0, import_vue2.nextTick)(() => {
+        if (!listRef.value)
+          return;
+        const targetItem = listRef.value.querySelector('[data-active="true"], [data-highlight]');
+        if (targetItem) {
+          targetItem.scrollIntoView({
+            block: "nearest"
+          });
+        }
+      });
+    }, "scrollToFocusedItem");
+    (0, import_vue2.watch)(() => props.items, () => {
+      selectedIndex.value = 0;
+    });
+    const onSelect = /* @__PURE__ */ __name((index) => {
+      const item = props.items[index];
+      if (item) {
+        props.command({
+          ...item,
+          label: item.id
+        });
+      }
+    }, "onSelect");
+    const onKeyDown = /* @__PURE__ */ __name(({
+      event
+    }) => {
+      if (!props.items.length) {
+        return false;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const total = props.items.length;
+        selectedIndex.value = (selectedIndex.value + total - 1) % total;
+        scrollToFocusedItem();
+        return true;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        selectedIndex.value = (selectedIndex.value + 1) % props.items.length;
+        scrollToFocusedItem();
+        return true;
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        onSelect(selectedIndex.value);
+        return true;
+      }
+      return false;
+    }, "onKeyDown");
+    expose({
+      onKeyDown
+    });
+    return () => (0, import_vue.createVNode)(import_pixel3_popover.MpPopover, {
+      "id": "popover-rte-variable-list",
+      "is-manual": true,
+      "is-default-open": true,
+      "is-open": true
+    }, {
+      default: () => [(0, import_vue.createVNode)(import_pixel3_popover.MpPopoverContent, {
+        "class": (0, import_css.css)({
+          width: "280px",
+          maxHeight: "284px",
+          overflowY: "auto"
+        })
+      }, {
+        default: () => [(0, import_vue.createVNode)(import_pixel3_popover.MpPopoverList, {
+          "ref": (element) => {
+            var _a;
+            if (!element) {
+              listRef.value = null;
+              return;
+            }
+            listRef.value = (_a = element.$el) != null ? _a : element;
+          },
+          "data-pixel-rte": true
+        }, {
+          default: () => [!props.items.length && (0, import_vue.createVNode)(import_pixel3_text.MpText, {
+            "color": "text.secondary",
+            "class": (0, import_css.css)({
+              px: "3",
+              py: "2"
+            })
+          }, {
+            default: () => [(0, import_vue.createTextVNode)("No result")]
+          }), groupedItems.value.map((group) => {
+            return (0, import_vue.createVNode)(import_vue.Fragment, null, [(0, import_vue.createVNode)(import_pixel3_text.MpText, {
+              "size": "label-small",
+              "color": "text.secondary",
+              "class": (0, import_css.css)({
+                px: "3",
+                py: "2",
+                textTransform: "uppercase",
+                textAlign: "left",
+                letterSpacing: "0.05em",
+                display: "block",
+                width: "full"
+              })
+            }, {
+              default: () => [group.category]
+            }), group.items.map((item) => {
+              const itemIndex = props.items.indexOf(item);
+              return (0, import_vue.createVNode)(import_pixel3_popover.MpPopoverListItem, {
+                "key": `${item.id}-${itemIndex}`,
+                "onMousedown": (event) => event.preventDefault(),
+                "onMouseenter": () => {
+                  selectedIndex.value = itemIndex;
+                },
+                "onClick": () => {
+                  onSelect(itemIndex);
+                }
+              }, {
+                default: () => [(0, import_vue.createVNode)("div", {
+                  "class": (0, import_css.css)({
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "flex-start",
+                    minWidth: "0",
+                    width: "full",
+                    gap: "0.5"
+                  })
+                }, [(0, import_vue.createVNode)(import_pixel3_text.MpText, {
+                  "size": "label",
+                  "is-truncated": true
+                }, {
+                  default: () => [item.name || "Unknown"]
+                }), (0, import_vue.createVNode)(import_pixel3_text.MpText, {
+                  "size": "label-small",
+                  "color": "text.secondary",
+                  "is-truncated": true,
+                  "class": (0, import_css.css)({
+                    fontFamily: "mono"
+                  })
+                }, {
+                  default: () => [`{${item.id}}`]
+                })])]
+              });
+            })]);
+          })]
+        })]
+      })]
+    });
+  }
+});
+
+// src/rte-variable-suggestion.ts
+var VariablePluginKey = new import_state.PluginKey("variable");
+var MAX_SUGGESTION_ITEMS = 50;
+var getFilteredSuggestionItems = /* @__PURE__ */ __name((items, query) => {
+  const normalizedQuery = query.trim().toLowerCase();
+  return items.filter((item) => {
+    var _a, _b;
+    if (!normalizedQuery) {
+      return true;
+    }
+    const id = item.id.toLowerCase();
+    const name = ((_a = item.name) != null ? _a : "").toLowerCase();
+    const category = ((_b = item.category) != null ? _b : "").toLowerCase();
+    return id.includes(normalizedQuery) || name.includes(normalizedQuery) || category.includes(normalizedQuery);
+  }).slice(0, MAX_SUGGESTION_ITEMS);
+}, "getFilteredSuggestionItems");
+var createVariableSuggestion = /* @__PURE__ */ __name((getSuggestionItems = () => []) => {
+  return {
+    char: "{",
+    pluginKey: VariablePluginKey,
+    command: ({
+      editor,
+      range,
+      props
+    }) => {
+      var _a, _b;
+      const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+      const overrideSpace = (_a = nodeAfter == null ? void 0 : nodeAfter.text) == null ? void 0 : _a.startsWith(" ");
+      if (overrideSpace) {
+        range.to += 1;
+      }
+      editor.chain().focus().insertContentAt(range, [{
+        type: "variable",
+        attrs: props
+      }, {
+        type: "text",
+        text: " "
+      }]).run();
+      (_b = window.getSelection()) == null ? void 0 : _b.collapseToEnd();
+    },
+    allow: ({
+      state,
+      range
+    }) => {
+      const $from = state.doc.resolve(range.from);
+      const type = state.schema.nodes["variable"];
+      const allow = !!$from.parent.type.contentMatch.matchType(type);
+      return allow;
+    },
+    items: ({
+      query
+    }) => {
+      return getFilteredSuggestionItems(getSuggestionItems(), query);
+    },
+    render: () => {
+      let component = null;
+      let popperInstance = null;
+      let popoverWrapper = null;
+      let clientRectProvider;
+      let editorElement = null;
+      let removeOutsideListeners = null;
+      const destroyVariablePopover = /* @__PURE__ */ __name(() => {
+        removeOutsideListeners == null ? void 0 : removeOutsideListeners();
+        removeOutsideListeners = null;
+        popperInstance == null ? void 0 : popperInstance.destroy();
+        popperInstance = null;
+        popoverWrapper == null ? void 0 : popoverWrapper.remove();
+        popoverWrapper = null;
+        component == null ? void 0 : component.destroy();
+        component = null;
+      }, "destroyVariablePopover");
+      const isWithinVariableContext = /* @__PURE__ */ __name((target) => {
+        if (!(target instanceof Node)) {
+          return false;
+        }
+        return Boolean((editorElement == null ? void 0 : editorElement.contains(target)) || (popoverWrapper == null ? void 0 : popoverWrapper.contains(target)));
+      }, "isWithinVariableContext");
+      const setupOutsideListeners = /* @__PURE__ */ __name(() => {
+        if (!editorElement || removeOutsideListeners) {
+          return;
+        }
+        const handleDocumentFocusIn = /* @__PURE__ */ __name((event) => {
+          if (!isWithinVariableContext(event.target)) {
+            destroyVariablePopover();
+          }
+        }, "handleDocumentFocusIn");
+        const handleDocumentPointerDown = /* @__PURE__ */ __name((event) => {
+          if (!isWithinVariableContext(event.target)) {
+            destroyVariablePopover();
+          }
+        }, "handleDocumentPointerDown");
+        const handleEditorFocusOut = /* @__PURE__ */ __name((event) => {
+          if (!isWithinVariableContext(event.relatedTarget)) {
+            destroyVariablePopover();
+          }
+        }, "handleEditorFocusOut");
+        document.addEventListener("focusin", handleDocumentFocusIn);
+        document.addEventListener("mousedown", handleDocumentPointerDown, true);
+        document.addEventListener("touchstart", handleDocumentPointerDown, true);
+        editorElement.addEventListener("focusout", handleEditorFocusOut);
+        removeOutsideListeners = /* @__PURE__ */ __name(() => {
+          document.removeEventListener("focusin", handleDocumentFocusIn);
+          document.removeEventListener("mousedown", handleDocumentPointerDown, true);
+          document.removeEventListener("touchstart", handleDocumentPointerDown, true);
+          editorElement == null ? void 0 : editorElement.removeEventListener("focusout", handleEditorFocusOut);
+        }, "removeOutsideListeners");
+      }, "setupOutsideListeners");
+      const getVirtualElement = /* @__PURE__ */ __name(() => {
+        if (!clientRectProvider) {
+          return null;
+        }
+        return {
+          getBoundingClientRect: () => {
+            var _a;
+            return (_a = clientRectProvider == null ? void 0 : clientRectProvider()) != null ? _a : new DOMRect();
+          }
+        };
+      }, "getVirtualElement");
+      const updatePopoverPosition = /* @__PURE__ */ __name(() => {
+        const virtualElement = getVirtualElement();
+        if (!virtualElement || !popoverWrapper) {
+          return;
+        }
+        if (!popperInstance) {
+          popperInstance = (0, import_core.createPopper)(virtualElement, popoverWrapper, {
+            placement: "bottom-start",
+            modifiers: [{
+              name: "offset",
+              options: {
+                offset: [0, 8]
+              }
+            }, {
+              name: "flip",
+              options: {
+                fallbackPlacements: ["top-start"]
+              }
+            }]
+          });
+          return;
+        }
+        popperInstance.update();
+      }, "updatePopoverPosition");
+      return {
+        onStart: (props) => {
+          clientRectProvider = props.clientRect;
+          editorElement = props.editor.view.dom;
+          component = new import_vue_3.VueRenderer(VariableList, {
+            editor: props.editor,
+            props: {
+              items: props.items,
+              command: props.command
+            }
+          });
+          popoverWrapper = document.createElement("div");
+          popoverWrapper.style.position = "absolute";
+          popoverWrapper.style.zIndex = "var(--mp-z-index-popover)";
+          if (component.element) {
+            popoverWrapper.append(component.element);
+          }
+          document.body.append(popoverWrapper);
+          setupOutsideListeners();
+          updatePopoverPosition();
+        },
+        onUpdate: (props) => {
+          clientRectProvider = props.clientRect;
+          component == null ? void 0 : component.updateProps({
+            items: props.items,
+            command: props.command
+          });
+          updatePopoverPosition();
+        },
+        onKeyDown: (props) => {
+          var _a, _b;
+          if (props.event.key === "Escape") {
+            destroyVariablePopover();
+            return true;
+          }
+          return (_b = (_a = component == null ? void 0 : component.ref) == null ? void 0 : _a.onKeyDown(props)) != null ? _b : false;
+        },
+        onExit: () => {
+          destroyVariablePopover();
+          editorElement = null;
+        }
+      };
+    }
+  };
+}, "createVariableSuggestion");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VariablePluginKey,
+  createVariableSuggestion
+});

package/dist/rte-variable-suggestion.mjs

@@ -0,0 +1,10 @@
+import {
+  VariablePluginKey,
+  createVariableSuggestion
+} from "./chunk-BWRU2WZN.mjs";
+import "./chunk-76GEEOAG.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  VariablePluginKey,
+  createVariableSuggestion
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-rich-text-editor",
   "description": "Mekari Pixel 3 | Rich text editor component is used to content editor based Tiptap.js",
-  "version": "0.1.2",
+  "version": "0.1.3-dev.0",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [
@@ -41,14 +41,14 @@
     "@tiptap/starter-kit": "2.7.4",
     "@tiptap/suggestion": "2.7.4",
     "@tiptap/vue-3": "2.7.4",
-    "@mekari/pixel3-avatar": "0.0.27",
-    "@mekari/pixel3-button": "0.2.2",
-    "@mekari/pixel3-color-picker": "0.2.1",
-    "@mekari/pixel3-form-control": "0.0.22",
+    "@mekari/pixel3-avatar": "0.0.28-dev.0",
     "@mekari/pixel3-divider": "0.0.22",
-    "@mekari/pixel3-input": "0.0.27",
-    "@mekari/pixel3-popover": "0.0.27",
+    "@mekari/pixel3-button": "0.2.3-dev.0",
+    "@mekari/pixel3-form-control": "0.0.22",
+    "@mekari/pixel3-color-picker": "0.2.2-dev.0",
+    "@mekari/pixel3-popover": "0.0.28-dev.0",
     "@mekari/pixel3-scrollbar": "0.1.6",
+    "@mekari/pixel3-input": "0.0.28-dev.0",
     "@mekari/pixel3-styled-system": "0.2.0",
     "@mekari/pixel3-text": "0.0.22",
     "@mekari/pixel3-utils": "0.1.0"