@ibiz-template/vue3-components 0.7.41-alpha.4 → 0.7.41-alpha.41

package/es/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.mjs

@@ -1,8 +1,9 @@
-import { ref, watch, nextTick, onMounted, onBeforeUnmount, onUnmounted, createVNode, defineComponent } from 'vue';
-import { getMarkDownProps, getEditorEmits, useNamespace, useUIStore } from '@ibiz-template/vue3-util';
+import { defineComponent, createVNode, ref, watch, nextTick, onMounted, onBeforeUnmount, onUnmounted } from 'vue';
+import { useNamespace, useUIStore, getEditorEmits, getMarkDownProps } from '@ibiz-template/vue3-util';
 import { createUUID } from 'qx-util';
 import Cherry from 'cherry-markdown';
-import { CoreConst, getAppCookie } from '@ibiz-template/core';
+import { initCustomMenu } from './custom-menu.mjs';
+import { useImgPreviewRender } from './render-util.mjs';
 import './ibiz-markdown-editor.css';
 
 "use strict";
@@ -11,44 +12,98 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
   props: getMarkDownProps(),
   emits: getEditorEmits(),
   setup(props, {
-    emit
+    emit,
+    slots
   }) {
-    var _a;
+    var _a, _b, _c;
     const ns = useNamespace("markdown");
     const c = props.controller;
     const currentVal = ref("");
     let editor = null;
     const id = createUUID();
+    const {
+      onMDEditorCreated,
+      renderImgPreview
+    } = useImgPreviewRender(ns);
+    const uploadHeaders = ibiz.util.file.getUploadHeaders();
     const headers = ref({
-      ["".concat(ibiz.env.tokenHeader, "Authorization")]: "".concat(ibiz.env.tokenPrefix, "Bearer ").concat(getAppCookie(CoreConst.TOKEN))
+      ...uploadHeaders
     });
     const uploadUrl = ref("");
-    const downloadUrl = ref("");
-    const customTheme = (_a = c == null ? void 0 : c.editorParams) == null ? void 0 : _a.customTheme;
+    const customTheme = ((_a = c == null ? void 0 : c.editorParams) == null ? void 0 : _a.customTheme) || ((_b = c == null ? void 0 : c.editorParams) == null ? void 0 : _b.customtheme);
     const {
       UIStore
     } = useUIStore();
     const theme = ref(customTheme || UIStore.theme);
+    const isEditing = ref(false);
+    let showmode = "default";
+    if (c && ((_c = c.editorParams) == null ? void 0 : _c.showmode)) {
+      showmode = c.editorParams.showmode;
+    }
+    const isFullScreen = ref(false);
     const defaultModel = ref("editOnly");
     let resizeObserver = null;
+    let toolbarResizeObserver = null;
     let lastMarkDownWidth = 0;
     const cssVars = ref({});
+    const toolbarCssVars = ref({});
+    const lastDirectoryState = ref("full");
     let isIgnoreChange = false;
+    let chatInstance;
+    const [AIMenu, AIChart] = initCustomMenu(c, {
+      props,
+      chatInstance,
+      isEditing,
+      currentVal,
+      emit
+    });
     watch(() => props.data, (newVal) => {
       if (newVal && c) {
-        const urls = ibiz.util.file.calcFileUpDownUrl(c.context, c.params, newVal, c.editorParams);
+        const editorParams = {
+          ...c.editorParams
+        };
+        if (editorParams.uploadparams) {
+          editorParams.uploadParams = JSON.parse(editorParams.uploadparams);
+        }
+        const urls = ibiz.util.file.calcFileUpDownUrl(c.context, c.params, newVal, editorParams);
         uploadUrl.value = urls.uploadUrl;
-        downloadUrl.value = urls.downloadUrl;
       }
     }, {
       immediate: true,
       deep: true
     });
     const markDownBox = ref();
+    const getDownloadUrl = (data, file) => {
+      if (!c) {
+        return "";
+      }
+      const editorParams = {
+        ...c.editorParams
+      };
+      if (editorParams.exportparams) {
+        editorParams.exportParams = JSON.parse(editorParams.exportparams);
+      }
+      if (file && file.folder) {
+        editorParams.osscat = file.folder;
+      }
+      const urls = ibiz.util.file.calcFileUpDownUrl(c.context, c.params, data, editorParams);
+      return urls.downloadUrl;
+    };
     const fileUpload = async (file, callback) => {
       const data = await ibiz.util.file.fileUpload(uploadUrl.value, file, headers.value);
-      const url = downloadUrl.value.replace("%fileId%", data.fileid);
-      callback(url);
+      const downloadUrl = getDownloadUrl(props.data || {}, data.fileid);
+      let url = downloadUrl.replace("%fileId%", data.fileid);
+      if (ibiz.config.common.enableDownloadTicket && c) {
+        const downloadTicket = await ibiz.util.file.getDownloadTicket(c.context, c.params, props.data || {}, {
+          fileId: data.fileid
+        }, c.downloadTicketParams);
+        if (downloadTicket && downloadTicket.ticket) {
+          url = downloadUrl.replace("%fileId%", downloadTicket.ticket);
+          callback(url);
+        }
+      } else {
+        callback(url);
+      }
     };
     const getCherryHtml = () => {
       const result = editor == null ? void 0 : editor.getHtml();
@@ -60,7 +115,7 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
     };
     const setCherryContent = (val) => {
       isIgnoreChange = true;
-      editor == null ? void 0 : editor.setMarkdown(val, false);
+      editor == null ? void 0 : editor.setMarkdown(val, true);
     };
     watch(() => props.value, (newVal, oldVal) => {
       if (newVal !== oldVal) {
@@ -80,6 +135,9 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
       }
     });
     const afterChange = (_e) => {
+      if (showmode === "manual") {
+        return;
+      }
       emit("change", getCherryContent(), c == null ? void 0 : c.model.id, isIgnoreChange);
       isIgnoreChange = false;
     };
@@ -159,25 +217,65 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
       if (editor && markDownBox.value) {
         if (isFullscreen()) {
           closeFullscreen();
+          editor.toggleToc(lastDirectoryState.value);
+          isFullScreen.value = false;
         } else {
           openFullscreen();
+          lastDirectoryState.value = editor.toc.model;
+          editor.toggleToc("full");
+          isFullScreen.value = true;
         }
       }
     };
     const handleKeyDown = (_e) => {
       _e.stopPropagation();
       if (_e.key === "Escape") {
+        _e.preventDefault();
         if (isFullscreen()) {
           closeFullscreen();
+          editor.toggleToc(lastDirectoryState.value);
+          isFullScreen.value = false;
         }
       }
     };
+    const changeMainTheme = (_theme) => {
+      c == null ? void 0 : c.setCurrentEditorTheme(_theme);
+    };
+    const selectionChange = (event) => {
+      var _a2, _b2;
+      const {
+        info
+      } = event;
+      let isForwardSelection = true;
+      const firstRange = info.ranges && info.ranges[0];
+      if (!firstRange) {
+        isForwardSelection = true;
+      } else {
+        const {
+          anchor,
+          head
+        } = firstRange;
+        isForwardSelection = c.isPositionBefore(anchor, head);
+      }
+      const startPos = (_a2 = c.mdeditor) == null ? void 0 : _a2.editor.editor.getCursor("start");
+      const endPos = (_b2 = c.mdeditor) == null ? void 0 : _b2.editor.editor.getCursor("end");
+      c.setCursorPos(startPos, endPos);
+      c.setSelectionDirection(isForwardSelection);
+    };
     const editorInit = () => {
-      if (props.disabled) {
+      if (props.disabled || props.readonly || showmode === "manual") {
         defaultModel.value = "previewOnly";
       }
       nextTick(() => {
         var _a2;
+        const bubble = ["bold", "italic", "underline", "strikethrough", "sub", "sup", "|", "size", "color"];
+        const toolbar = ["bold", "italic", "underline", "strikethrough", "|", "color", "header", "|", "list", "image", {
+          insert: ["link", "hr", "br", "code", "formula", "toc", "table", "line-table", "bar-table"]
+        }, "settings", "togglePreview"];
+        if (c && c.chatCompletion) {
+          toolbar.unshift("AIChart");
+          bubble.unshift("AI");
+        }
         editor = new Cherry({
           id,
           value: currentVal.value,
@@ -211,18 +309,39 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
             }
           },
           toolbars: {
-            toolbar: ["bold", "italic", "underline", "strikethrough", "|", "color", "header", "|", "list", "image", {
-              insert: ["link", "hr", "br", "code", "formula", "toc", "table", "line-table", "bar-table"]
-            }, "settings", "togglePreview"],
-            bubble: ["bold", "italic", "underline", "strikethrough", "sub", "sup", "|", "size", "color"],
+            toolbar,
+            bubble,
             float: ["h1", "h2", "h3", "|", "checklist", "quote", "quickTable", "code"],
-            customMenu: [],
-            sidebar: []
+            customMenu: {
+              AI: AIMenu,
+              AIChart
+            },
+            // 定义侧边栏，默认为空
+            sidebar: ["theme", "copy"],
+            // 定义顶部右侧工具栏，默认为空
+            toolbarRight: [],
+            // 目录
+            toc: {
+              updateLocationHash: false,
+              // 要不要更新URL的hash
+              defaultModel: "pure",
+              // pure: 精简模式/缩略模式，只有一排小点； full: 完整模式，会展示所有标题
+              showAutoNumber: true,
+              // 是否显示自增序号
+              position: "absolute",
+              // 悬浮目录的悬浮方式。当滚动条在cherry内部时，用absolute；当滚动条在cherry外部时，用fixed
+              cssText: ""
+              // 自定义样式
+            }
           },
           callback: {
             afterChange,
             beforeImageMounted
           },
+          event: {
+            changeMainTheme,
+            selectionChange
+          },
           engine: {
             syntax: {
               table: {
@@ -243,6 +362,21 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
         span.appendChild(createCherryIcon("fullscreen"));
         const parentElement = props.disabled ? editor.editor.options.editorDom.parentElement : (_a2 = editor.editor.options.editorDom.parentElement) == null ? void 0 : _a2.querySelector(".cherry-toolbar>.toolbar-right");
         parentElement == null ? void 0 : parentElement.appendChild(span);
+        c == null ? void 0 : c.setMDEditor(editor);
+        onMDEditorCreated(editor);
+        if (slots.editorSwitchMenu && window.ResizeObserver && markDownBox.value) {
+          const cherryToolbar = markDownBox.value.querySelector(".cherry-toolbar");
+          if (cherryToolbar) {
+            toolbarResizeObserver = new ResizeObserver((entries) => {
+              var _a3;
+              const height = (_a3 = entries[0]) == null ? void 0 : _a3.contentRect.height;
+              toolbarCssVars.value = ns.cssVarBlock({
+                "toolbar-height": "".concat(height, "px")
+              });
+            });
+            toolbarResizeObserver.observe(cherryToolbar);
+          }
+        }
       });
     };
     watch(() => UIStore.theme, (newVal) => {
@@ -279,6 +413,76 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
         resizeObserver.observe(markDownBox.value);
       }
     };
+    const onEnableEdit = () => {
+      isEditing.value = true;
+      defaultModel.value = "editOnly";
+      editor == null ? void 0 : editor.switchModel(defaultModel.value);
+    };
+    const onResetEditState = () => {
+      isEditing.value = false;
+      defaultModel.value = "previewOnly";
+      editor == null ? void 0 : editor.switchModel(defaultModel.value);
+    };
+    const onEditCancel = () => {
+      setCherryContent(currentVal.value);
+      onResetEditState();
+    };
+    const onEditConfirm = () => {
+      emit("change", getCherryContent(), c == null ? void 0 : c.model.id, isIgnoreChange);
+      isIgnoreChange = false;
+      onResetEditState();
+    };
+    const onFocusEditor = () => {
+      const target = document.getElementById(id);
+      target == null ? void 0 : target.focus();
+    };
+    const renderHeader = () => {
+      if (showmode === "manual" && !isEditing.value) {
+        return createVNode("div", {
+          "onClick": onFocusEditor,
+          "class": [ns.e("header"), ns.is("fullscreen", isFullScreen.value)]
+        }, [!props.disabled && !props.readonly && createVNode("div", {
+          "class": ns.em("header", "edit"),
+          "onClick": onEnableEdit,
+          "title": ibiz.i18n.t("editor.markdown.edit")
+        }, [createVNode("i", {
+          "class": "fa fa-edit",
+          "aria-hidden": "true"
+        }, null)]), createVNode("div", {
+          "class": ns.em("header", "full"),
+          "onClick": onSwitchFullscreen
+        }, [isFullScreen.value ? createVNode("i", {
+          "class": "fa fa-compress",
+          "aria-hidden": "true",
+          "title": ibiz.i18n.t("editor.html.reduce")
+        }, null) : createVNode("i", {
+          "class": "fa fa-expand",
+          "aria-hidden": "true",
+          "title": ibiz.i18n.t("editor.common.fullscreen")
+        }, null)])]);
+      }
+    };
+    const renderFooter = () => {
+      if (showmode === "manual" && isEditing.value && !props.disabled && !props.readonly) {
+        return createVNode("div", {
+          "onClick": onFocusEditor,
+          "class": [ns.e("footer"), ns.is("fullscreen", isFullScreen.value)]
+        }, [createVNode("div", {
+          "class": ns.em("footer", "cancel"),
+          "onClick": onEditCancel
+        }, [ibiz.i18n.t("editor.common.cancel")]), createVNode("div", {
+          "class": ns.em("footer", "save"),
+          "onClick": onEditConfirm
+        }, [ibiz.i18n.t("editor.common.confirm")])]);
+      }
+    };
+    const renderEditorSwitchMenu = () => {
+      var _a2;
+      return createVNode("div", {
+        "class": [ns.b("menu"), ns.is("fullscreen", isFullScreen.value)],
+        "style": toolbarCssVars.value
+      }, [(_a2 = slots.editorSwitchMenu) == null ? void 0 : _a2.call(slots)]);
+    };
     onMounted(() => {
       var _a2;
       editorInit();
@@ -294,6 +498,12 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
       if (resizeObserver) {
         resizeObserver.disconnect();
       }
+      if (toolbarResizeObserver) {
+        toolbarResizeObserver.disconnect();
+      }
+      if (chatInstance && chatInstance.close) {
+        chatInstance.close();
+      }
     });
     return {
       ns,
@@ -305,19 +515,27 @@ const IBizMarkDown = /* @__PURE__ */ defineComponent({
       theme,
       defaultModel,
       cssVars,
+      isEditing,
+      showmode,
       getCherryHtml,
       getCherryContent,
-      setCherryContent
+      setCherryContent,
+      renderHeader,
+      renderFooter,
+      renderImgPreview,
+      renderEditorSwitchMenu
     };
   },
   render() {
+    const isShowEditorSwitchMenu = !!this.$slots.editorSwitchMenu;
     return createVNode("div", {
       "ref": "markDownBox",
-      "class": [this.ns.b(), this.ns.is("disabled", this.disabled)]
-    }, [createVNode("div", {
+      "class": [this.ns.b(), this.ns.is("disabled", this.disabled), this.ns.is("manual", this.showmode === "manual"), this.ns.is("editing", this.isEditing), this.ns.is("show-editor-switch-menu", isShowEditorSwitchMenu)]
+    }, [isShowEditorSwitchMenu ? this.renderEditorSwitchMenu() : null, this.renderHeader(), this.renderFooter(), this.renderImgPreview(), createVNode("div", {
+      "tabindex": "-1",
       "id": this.id,
       "style": this.cssVars,
-      "class": this.ns.b("cherry")
+      "class": [this.ns.b("cherry"), this.ns.m(this.theme === "dark" ? "dark" : "light")]
     }, null)]);
   }
 });

package/es/editor/markdown/ibiz-markdown-editor/render-util.mjs

@@ -0,0 +1,117 @@
+import { ref, nextTick, createVNode, resolveComponent, onBeforeUnmount } from 'vue';
+
+"use strict";
+function isElement(element, nodeName) {
+  return !!(element && element.nodeType === 1 && element.nodeName === nodeName);
+}
+function getMermaidSvg(element) {
+  let current = element;
+  while (current) {
+    if (current.classList.contains("cherry-previewer")) {
+      return null;
+    }
+    const parent = current.parentElement;
+    if (isElement(current, "svg") && parent && parent.dataset.type === "mermaid") {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+function svgToBase64(svgElement) {
+  const clonedSvg = svgElement.cloneNode(true);
+  const width = svgElement.width.baseVal.value || svgElement.clientWidth;
+  const height = svgElement.height.baseVal.value || svgElement.clientHeight;
+  clonedSvg.setAttribute("width", width);
+  clonedSvg.setAttribute("height", height);
+  clonedSvg.style.backgroundColor = "white";
+  const svgString = new XMLSerializer().serializeToString(clonedSvg);
+  const base64 = btoa(unescape(encodeURIComponent(svgString)));
+  return "data:image/svg+xml;base64,".concat(base64);
+}
+function useImgPreviewRender(ns) {
+  const imgPreviewUrl = ref("");
+  const imgPreviewUrlList = ref([]);
+  const imgPreviewRef = ref();
+  let mdPreviewerDom = null;
+  const openImgPreview = async (url) => {
+    var _a;
+    imgPreviewUrl.value = url;
+    imgPreviewUrlList.value = [url];
+    await nextTick();
+    if (imgPreviewRef.value) {
+      const {
+        container
+      } = imgPreviewRef.value.$refs;
+      if (container) {
+        (_a = container.children[0]) == null ? void 0 : _a.click();
+      }
+    }
+  };
+  const handleKeyPress = (event) => {
+    if (event.key === "Escape" || event.keyCode === 27) {
+      event.stopPropagation();
+      event.preventDefault();
+      imgPreviewUrlList.value = [];
+      removeKeydownListener();
+    }
+  };
+  const addKeydownListener = async () => {
+    var _a;
+    await nextTick();
+    const container = (_a = imgPreviewRef.value) == null ? void 0 : _a.$refs.container;
+    if (!container)
+      return;
+    const imgViewerWrapper = container.querySelector(".el-image-viewer__wrapper");
+    imgViewerWrapper == null ? void 0 : imgViewerWrapper.addEventListener("keydown", handleKeyPress);
+  };
+  const removeKeydownListener = () => {
+    var _a;
+    const container = (_a = imgPreviewRef.value) == null ? void 0 : _a.$refs.container;
+    if (!container)
+      return;
+    const imgViewerWrapper = container.querySelector(".el-image-viewer__wrapper");
+    imgViewerWrapper == null ? void 0 : imgViewerWrapper.removeEventListener("keydown", handleKeyPress);
+  };
+  const handlePreviewerImgClick = (event) => {
+    const target = event == null ? void 0 : event.target;
+    if (isElement(target, "IMG") && target) {
+      openImgPreview(target.src);
+      return;
+    }
+    const mermaidSvg = getMermaidSvg(target);
+    if (mermaidSvg) {
+      openImgPreview(svgToBase64(mermaidSvg));
+    }
+  };
+  const renderImgPreview = () => {
+    return createVNode(resolveComponent("el-image"), {
+      "class": ns.e("img-preview"),
+      "ref": imgPreviewRef,
+      "zoom-rate": 1.1,
+      "src": imgPreviewUrl.value,
+      "preview-src-list": imgPreviewUrlList.value,
+      "hide-on-click-modal": true,
+      "onShow": addKeydownListener,
+      "fit": "cover"
+    }, null);
+  };
+  const onMDEditorCreated = (mdeditor) => {
+    var _a, _b;
+    mdPreviewerDom = ((_b = (_a = mdeditor == null ? void 0 : mdeditor.previewer) == null ? void 0 : _a.previewerBubble) == null ? void 0 : _b.previewerDom) || null;
+    mdPreviewerDom == null ? void 0 : mdPreviewerDom.addEventListener("click", handlePreviewerImgClick);
+  };
+  onBeforeUnmount(() => {
+    if (mdPreviewerDom) {
+      mdPreviewerDom.removeEventListener("click", handlePreviewerImgClick);
+      mdPreviewerDom = null;
+    }
+    removeKeydownListener();
+  });
+  return {
+    renderImgPreview,
+    onMDEditorCreated
+  };
+}
+
+export { useImgPreviewRender };