@voicenter-team/voicenter-ui-plus 2.0.12 → 3.0.1

package/library/components/VcMdEditor/ParameterNode.vue2.mjs

@@ -0,0 +1,95 @@
+import { defineComponent, toRef, ref, computed, watch, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, withModifiers, createBlock, createCommentVNode, toDisplayString, createVNode } from "vue";
+import { useWidgetViewContext } from "@prosemirror-adapter/vue";
+import { NodeParameterIcons } from "./mdEditor.config.mjs";
+import _sfc_main$2 from "../VcInput/VcInput.vue.mjs";
+import '../../assets/components/VcIcon/VcIcon.css';import '../../assets/components/VcButton/VcButtonIcon.css';import '../../assets/components/VcInput/VcInput.css';/* empty css                       */
+import _sfc_main$3 from "../VcButton/VcButtonIcon.vue.mjs";
+/* empty css                             */
+import _sfc_main$1 from "../VcIcon/VcIcon.vue.mjs";
+/* empty css                     */
+import { Check, X } from "@lucide/vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "node-parameter__popover !absolute top-[115%] !bg-light-bg w-full min-w-96 left-0 border border-active-elements rounded !p-1"
+};
+const _hoisted_2 = { class: "w-full" };
+const _hoisted_3 = { class: "flex items-center !gap-1 !p-1" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ParameterNode",
+  emits: ["onConfirm"],
+  setup(__props, { emit: __emit }) {
+    const { spec = {} } = useWidgetViewContext();
+    const { parameterName = 0, onTest, fullString, class: className = "" } = spec;
+    const emit = __emit;
+    const localModel = toRef(fullString);
+    const editable = ref(false);
+    const localIcon = computed(() => {
+      var _a;
+      if (className === "parameter-block-single") {
+        return ((_a = String(fullString || "")) == null ? void 0 : _a.startsWith("{{#")) ? NodeParameterIcons["parameter-block-single-start"] : NodeParameterIcons["parameter-block-single-end"];
+      }
+      return NodeParameterIcons[className] || "";
+    });
+    function confirm() {
+      onTest(localModel.value);
+      emit("onConfirm", localModel.value);
+    }
+    function cancel() {
+      editable.value = false;
+    }
+    function clear() {
+      onTest("");
+      emit("onConfirm", "");
+    }
+    watch(
+      () => fullString,
+      (val) => {
+        localModel.value = val;
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(className), "node-parameter inline-flex items-center gap-1 !h-auto !border relative rounded !px-1 !py-0.5 no-underline"])
+      }, [
+        createElementVNode("div", {
+          class: "flex items-center gap-1 cursor-pointer",
+          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => editable.value = !editable.value, ["stop"]))
+        }, [
+          localIcon.value ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            icon: localIcon.value,
+            class: "text-primary-actions"
+          }, null, 8, ["icon"])) : createCommentVNode("", true),
+          createElementVNode("span", null, toDisplayString(unref(parameterName)), 1)
+        ]),
+        editable.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            createVNode(_sfc_main$2, {
+              modelValue: localModel.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => localModel.value = $event)
+            }, null, 8, ["modelValue"])
+          ]),
+          createElementVNode("div", _hoisted_3, [
+            createVNode(_sfc_main$3, {
+              icon: unref(Check),
+              onClick: withModifiers(confirm, ["stop"])
+            }, null, 8, ["icon"]),
+            createVNode(_sfc_main$3, {
+              color: "secondary",
+              icon: unref(X),
+              onClick: withModifiers(cancel, ["stop"])
+            }, null, 8, ["icon"])
+          ])
+        ])) : createCommentVNode("", true),
+        createVNode(_sfc_main$3, {
+          color: "secondary",
+          icon: unref(X),
+          onClick: withModifiers(clear, ["stop"])
+        }, null, 8, ["icon"])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcMdEditor/VcMdEditor.vue.mjs

@@ -0,0 +1,268 @@
+import { defineComponent, useAttrs, ref, computed, onMounted, nextTick, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, normalizeStyle, normalizeClass, createElementBlock, createCommentVNode, mergeProps, isRef } from "vue";
+import { MilkdownProvider } from "@milkdown/vue";
+import _sfc_main$3 from "./VcMdEditorContent.vue.mjs";
+import '../../assets/components/VcButton/VcButtonIcon.css';import '../../assets/node_modules/element-plus/theme-chalk/src/tooltip.css';import '../../assets/node_modules/element-plus/theme-chalk/src/popper.css';import '../../assets/node_modules/element-plus/theme-chalk/src/base.css';import '../../assets/components/VcMdEditor/VcMdEditorContent.css';/* empty css                        */
+import { useVModel } from "@vueuse/core";
+import { convertToUnit } from "../../utils/helpers.mjs";
+import { markdown } from "@codemirror/lang-markdown";
+import CodeMirror from "vue-codemirror6";
+import _sfc_main$1 from "./VcMdEditorToolbar.vue.mjs";
+import { ProsemirrorAdapterProvider } from "@prosemirror-adapter/vue";
+import { isGroupParameter } from "../../types/VcMdEditor.types.mjs";
+import { ElTooltip } from "element-plus";
+/* empty css                                                         */
+/* empty css                                                           */
+/* empty css                                                            */
+import { tVU } from "../../localization/index.mjs";
+import _sfc_main$2 from "../VcButton/VcButtonIcon.vue.mjs";
+/* empty css                             */
+import { Check, Copy, CodeXml, TextQuote, AlignStartVertical, AlignEndVertical } from "@lucide/vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "vc-markdown-editor__header"
+};
+const _hoisted_2 = { class: "flex items-center flex-grow" };
+const _hoisted_3 = { class: "flex items-center gap-1" };
+const _hoisted_4 = { class: "vc-markdown-editor__content" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ inheritAttrs: false },
+  __name: "VcMdEditor",
+  props: {
+    modelValue: { default: "" },
+    html: { default: "" },
+    disabled: { type: Boolean, default: false },
+    useParameters: { type: Boolean, default: false },
+    minHeight: { default: 400 },
+    maxHeight: { default: void 0 },
+    parameters: { default: void 0 },
+    isTeleported: { type: Boolean, default: void 0 },
+    readonly: { type: Boolean },
+    hideToolbar: { type: Boolean }
+  },
+  emits: ["update:modelValue", "update:html"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const attributes = useAttrs();
+    const props = __props;
+    const isCopied = ref(false);
+    const emit = __emit;
+    const localModel = useVModel(props, "modelValue", emit);
+    const localHtml = useVModel(props, "html", emit);
+    const editorMode = ref(true);
+    const mounted = ref(false);
+    const milkdownEditorContentRef = ref();
+    const alignMode = ref("ltr");
+    const flatParameters = computed(() => {
+      if (!props.parameters) return void 0;
+      const result = [];
+      for (const item of props.parameters) {
+        if (isGroupParameter(item)) {
+          result.push(...item.options);
+        } else {
+          result.push(item);
+        }
+      }
+      return result;
+    });
+    const minHeightProperty = computed(() => {
+      return convertToUnit(props.minHeight || 400);
+    });
+    const maxHeightProperty = computed(() => {
+      return props.maxHeight ? convertToUnit(props.maxHeight) : void 0;
+    });
+    function onCopyContent() {
+      if (isCopied.value) {
+        return;
+      }
+      isCopied.value = true;
+      navigator.clipboard.writeText(localModel.value || "").finally(() => {
+        setTimeout(() => {
+          isCopied.value = false;
+        }, 1500);
+      });
+    }
+    function onSetBlockType(action) {
+      var _a;
+      (_a = milkdownEditorContentRef.value) == null ? void 0 : _a.setBlockType(action);
+    }
+    function onInsertParameter(parameter, insertState) {
+      var _a;
+      (_a = milkdownEditorContentRef.value) == null ? void 0 : _a.insertParameter(parameter, insertState);
+    }
+    function changeDirection() {
+      alignMode.value = alignMode.value === "ltr" ? "rtl" : "ltr";
+    }
+    function validateMustacheBlocks(content) {
+      const tagPattern = /{{[#/](\w+)}}/g;
+      const stack = [];
+      const issues = [];
+      const lines = content.split(/\r?\n/);
+      lines.forEach((line, lineIndex) => {
+        tagPattern.lastIndex = 0;
+        let match;
+        while ((match = tagPattern.exec(line)) !== null) {
+          const fullTag = match[0];
+          const tagName = match[1];
+          const isOpening = fullTag.startsWith("{{#");
+          if (isOpening) {
+            stack.push({
+              name: tagName,
+              line: lineIndex + 1
+            });
+          } else {
+            const openIndex = stack.findLastIndex((entry) => entry.name === tagName);
+            if (openIndex !== -1) {
+              stack.splice(openIndex, 1);
+            } else {
+              issues.push({
+                tag: tagName,
+                line: lineIndex + 1,
+                type: "unopened"
+              });
+            }
+          }
+        }
+      });
+      for (const unclosed of stack) {
+        issues.push({
+          tag: unclosed.name,
+          line: unclosed.line,
+          type: "unclosed"
+        });
+      }
+      return issues;
+    }
+    onMounted(() => {
+      alignMode.value = document.documentElement.getAttribute("dir") || "ltr";
+      nextTick(() => {
+        mounted.value = true;
+      });
+    });
+    __expose({
+      validate: () => {
+        return validateMustacheBlocks(localModel.value || "");
+      },
+      /**
+       * Get the HTML output from ProseMirror editor
+       * This serializes the current document state to HTML
+       */
+      getHTML: () => {
+        var _a;
+        return ((_a = milkdownEditorContentRef.value) == null ? void 0 : _a.getHTML()) || "";
+      },
+      /*
+       * Additional state / handlers exposed for tests and advanced
+       * integrators to drive and observe the editor without casting `vm`.
+       * Additive — widens the public surface. `editorMode` and
+       * `milkdownEditorContentRef` are writable through the proxy.
+       */
+      editorMode,
+      minHeightProperty,
+      maxHeightProperty,
+      milkdownEditorContentRef,
+      onSetBlockType,
+      onInsertParameter
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(MilkdownProvider), null, {
+        default: withCtx(() => [
+          createVNode(unref(ProsemirrorAdapterProvider), null, {
+            default: withCtx(() => [
+              createElementVNode("div", {
+                class: normalizeClass([{
+                  "is--scrollable": maxHeightProperty.value,
+                  "is-direction--rtl": alignMode.value === "rtl",
+                  "is-direction--ltr": alignMode.value === "ltr"
+                }, "vc-markdown-editor__wrapper"]),
+                style: normalizeStyle({
+                  "--min-md-height": minHeightProperty.value,
+                  "--max-md-height": maxHeightProperty.value
+                })
+              }, [
+                !__props.disabled && !__props.hideToolbar ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                  createElementVNode("div", _hoisted_2, [
+                    editorMode.value && !__props.readonly ? (openBlock(), createBlock(_sfc_main$1, {
+                      key: 0,
+                      parameters: __props.parameters,
+                      "is-teleported": __props.isTeleported,
+                      onInsertParameter,
+                      onSetBlockType
+                    }, null, 8, ["parameters", "is-teleported"])) : createCommentVNode("", true)
+                  ]),
+                  createElementVNode("div", _hoisted_3, [
+                    createVNode(unref(ElTooltip), {
+                      content: isCopied.value ? unref(tVU).t("voicenterUi.general.copied") : unref(tVU).t("voicenterUi.general.copyCode"),
+                      teleported: __props.isTeleported
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_sfc_main$2, {
+                          icon: isCopied.value ? unref(Check) : unref(Copy),
+                          onClick: onCopyContent
+                        }, null, 8, ["icon"])
+                      ]),
+                      _: 1
+                    }, 8, ["content", "teleported"]),
+                    createVNode(unref(ElTooltip), {
+                      content: editorMode.value ? unref(tVU).t("voicenterUi.mdEditor.source") : unref(tVU).t("voicenterUi.mdEditor.editorMode"),
+                      teleported: __props.isTeleported
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_sfc_main$2, {
+                          icon: editorMode.value ? unref(CodeXml) : unref(TextQuote),
+                          onClick: _cache[0] || (_cache[0] = ($event) => editorMode.value = !editorMode.value)
+                        }, null, 8, ["icon"])
+                      ]),
+                      _: 1
+                    }, 8, ["content", "teleported"]),
+                    createVNode(unref(ElTooltip), {
+                      content: alignMode.value === "rtl" ? unref(tVU).t("voicenterUi.general.alignLeft") : unref(tVU).t("voicenterUi.general.alignRight"),
+                      teleported: __props.isTeleported
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_sfc_main$2, {
+                          icon: alignMode.value === "rtl" ? unref(AlignStartVertical) : unref(AlignEndVertical),
+                          onClick: changeDirection
+                        }, null, 8, ["icon"])
+                      ]),
+                      _: 1
+                    }, 8, ["content", "teleported"])
+                  ])
+                ])) : createCommentVNode("", true),
+                createElementVNode("div", _hoisted_4, [
+                  editorMode.value ? (openBlock(), createBlock(_sfc_main$3, mergeProps({
+                    key: 0,
+                    ref_key: "milkdownEditorContentRef",
+                    ref: milkdownEditorContentRef,
+                    modelValue: unref(localModel),
+                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(localModel) ? localModel.value = $event : null),
+                    html: unref(localHtml),
+                    "onUpdate:html": _cache[2] || (_cache[2] = ($event) => isRef(localHtml) ? localHtml.value = $event : null),
+                    disabled: __props.disabled,
+                    "min-height": __props.minHeight,
+                    parameters: flatParameters.value,
+                    "use-parameters": __props.useParameters,
+                    readonly: __props.readonly
+                  }, unref(attributes)), null, 16, ["modelValue", "html", "disabled", "min-height", "parameters", "use-parameters", "readonly"])) : (openBlock(), createBlock(unref(CodeMirror), {
+                    key: 1,
+                    ref: "codeMirrorRef",
+                    modelValue: unref(localModel),
+                    "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(localModel) ? localModel.value = $event : null),
+                    lang: unref(markdown)(),
+                    disabled: __props.disabled,
+                    class: normalizeClass([{ "pointer-events-none opacity-50": __props.disabled }, "h-full w-full text-sm vc-markdown-editor__text-editor"]),
+                    readonly: __props.readonly,
+                    basic: ""
+                  }, null, 8, ["modelValue", "lang", "disabled", "class", "readonly"]))
+                ])
+              ], 6)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcMdEditor/VcMdEditor.vue2.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./VcMdEditor.vue.mjs";
+export {
+  _sfc_main as default
+};

package/library/components/VcMdEditor/VcMdEditorContent.vue.mjs

@@ -0,0 +1,224 @@
+import '../../assets/components/VcMdEditor/VcMdEditorContent.css';
+import { defineComponent, ref, watch, onUnmounted, withDirectives, openBlock, createBlock, unref, normalizeStyle, normalizeClass, vShow, nextTick } from "vue";
+import { Crepe, CrepeFeature } from "@milkdown/crepe";
+import { useEditor, Milkdown } from "@milkdown/vue";
+import { replaceAll } from "@milkdown/utils";
+import { useZIndex } from "element-plus";
+import { useMustachePlugin, dispatchAdvancedEditorAction, dispatchEditorAction } from "./mdEditor.config.mjs";
+import { buildMustacheSnippet } from "./buildMustacheSnippet.mjs";
+import { editorViewCtx } from "@milkdown/kit/core";
+import { DOMSerializer } from "@milkdown/kit/prose/model";
+import { useWidgetViewFactory } from "@prosemirror-adapter/vue";
+import "@milkdown/crepe/theme/common/style.css";
+import "@milkdown/crepe/theme/frame.css";
+import { rtlCursorPlugin } from "./rtlCursorPlugin.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcMdEditorContent",
+  props: {
+    modelValue: { default: "" },
+    html: { default: "" },
+    disabled: { type: Boolean, default: false },
+    useParameters: { type: Boolean, default: false },
+    minHeight: { default: 400 },
+    maxHeight: { default: void 0 },
+    parameters: { default: void 0 },
+    isTeleported: { type: Boolean, default: void 0 },
+    readonly: { type: Boolean }
+  },
+  emits: ["update:modelValue", "update:html", "initialized", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const widgetViewFactory = useWidgetViewFactory();
+    const props = __props;
+    const emit = __emit;
+    let crepeInstance = null;
+    const crepeMounted = ref(false);
+    let isUpdatingFromParent = false;
+    const { currentZIndex } = useZIndex();
+    useEditor((root) => {
+      var _a;
+      const crepe = new Crepe({
+        root,
+        defaultValue: props.modelValue,
+        featureConfigs: {
+          [Crepe.Feature.CodeMirror]: {
+            theme: void 0
+          }
+        },
+        features: {
+          [CrepeFeature.BlockEdit]: false
+        }
+      });
+      if (props.useParameters || ((_a = props.parameters) == null ? void 0 : _a.length)) {
+        try {
+          crepe.editor.use(useMustachePlugin(replaceTest, widgetViewFactory));
+        } catch (error) {
+          console.error("Error initializing mustache plugin:", error);
+        }
+      }
+      crepe.editor.use(rtlCursorPlugin);
+      const originalGetMarkdown = crepe.getMarkdown.bind(crepe);
+      crepe.getMarkdown = function() {
+        const markdown = originalGetMarkdown();
+        return markdown.replace(/{{([^}]*)}}/g, (_, content) => {
+          return `{{${content.replace(/\\_/g, "_")}}}`;
+        });
+      };
+      crepe.on((listener) => {
+        listener.markdownUpdated(
+          () => {
+            if (props.readonly || props.disabled || isUpdatingFromParent) {
+              return;
+            }
+            try {
+              const currentMarkdown = crepe.getMarkdown();
+              emit("change", currentMarkdown);
+              emit("update:modelValue", currentMarkdown);
+            } catch (e) {
+              console.error("Error updating Crepe editor:", e);
+            }
+            const htmlOutput = getHTMLFromEditor(crepe);
+            emit("update:html", htmlOutput);
+          }
+        );
+        listener.mounted(
+          () => {
+            crepeMounted.value = true;
+            emit("initialized");
+          }
+        );
+        listener.destroy(
+          () => {
+            crepeMounted.value = false;
+          }
+        );
+      });
+      crepe.setReadonly(props.disabled || props.readonly);
+      crepeInstance = crepe;
+      return crepe;
+    });
+    function updateCrepeValue(value) {
+      if (!crepeInstance || !crepeMounted.value || value === void 0) {
+        return;
+      }
+      const currentMarkdown = crepeInstance.getMarkdown();
+      if (currentMarkdown !== value) {
+        isUpdatingFromParent = true;
+        try {
+          crepeInstance.editor.action(replaceAll(value));
+        } catch (error) {
+          console.error("Error updating Crepe editor:", error);
+        } finally {
+          if (crepeInstance && crepeMounted.value) {
+            const htmlOutput = getHTMLFromEditor(crepeInstance);
+            emit("update:html", htmlOutput);
+          }
+          nextTick(() => {
+            isUpdatingFromParent = false;
+          });
+        }
+      }
+    }
+    function addBlockType(actionType) {
+      if (!crepeInstance) {
+        return;
+      }
+      if (actionType.isAdvanced) {
+        dispatchAdvancedEditorAction(crepeInstance, actionType);
+      } else {
+        dispatchEditorAction(crepeInstance, actionType);
+      }
+    }
+    function replaceTest(testContent, from, to) {
+      crepeInstance == null ? void 0 : crepeInstance.editor.action((ctx) => {
+        const view = ctx.get(editorViewCtx);
+        const { dispatch, state } = view;
+        dispatch(
+          state.tr.deleteRange(from, to).insertText(testContent, from)
+        );
+        view.focus();
+      });
+    }
+    function onInsertParameter(parameter, insertState) {
+      if (!crepeInstance) {
+        return;
+      }
+      crepeInstance.editor.action((ctx) => {
+        const view = ctx.get(editorViewCtx);
+        const { dispatch, state } = view;
+        const { from, to } = state.selection;
+        const snippet = buildMustacheSnippet(parameter, insertState);
+        dispatch(
+          state.tr.insertText(snippet, from, to)
+        );
+        view.focus();
+      });
+    }
+    function getHTMLFromEditor(crepe) {
+      let html = "";
+      crepe.editor.action((ctx) => {
+        const view = ctx.get(editorViewCtx);
+        const { state } = view;
+        const serializer = DOMSerializer.fromSchema(state.schema);
+        const fragment = serializer.serializeFragment(state.doc.content);
+        const div = document.createElement("div");
+        div.appendChild(fragment);
+        html = div.innerHTML;
+      });
+      return html;
+    }
+    function getHTML() {
+      if (!crepeInstance || !crepeMounted.value) {
+        return "";
+      }
+      return getHTMLFromEditor(crepeInstance);
+    }
+    watch(
+      () => props.modelValue,
+      updateCrepeValue,
+      { flush: "post" }
+    );
+    watch(
+      crepeMounted,
+      (val) => {
+        if (val) {
+          updateCrepeValue(props.modelValue);
+        }
+      }
+    );
+    watch(
+      () => props.disabled,
+      (newValue) => {
+        if (crepeInstance) {
+          crepeInstance.setReadonly(newValue);
+        }
+      }
+    );
+    __expose({
+      updateCrepeValue,
+      setBlockType: addBlockType,
+      insertParameter: onInsertParameter,
+      getHTML
+    });
+    onUnmounted(() => {
+      crepeInstance == null ? void 0 : crepeInstance.destroy();
+      crepeMounted.value = false;
+      crepeInstance = null;
+    });
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createBlock(unref(Milkdown), {
+        class: normalizeClass(["vc-markdown-editor", {
+          "disabled": __props.disabled,
+          "is--readonly": __props.readonly
+        }]),
+        style: normalizeStyle({
+          "--current-z-index": unref(currentZIndex)
+        })
+      }, null, 8, ["class", "style"])), [
+        [vShow, crepeMounted.value]
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcMdEditor/VcMdEditorContent.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./VcMdEditorContent.vue.mjs";
+import '../../assets/components/VcMdEditor/VcMdEditorContent.css';/* empty css                        */
+export {
+  _sfc_main as default
+};