vue-editify 0.1.39 → 0.1.40

package/lib/editify.es.js

@@ -40720,6 +40720,11 @@ const InsertMathformulaProps = {
   color: {
     type: String,
     default: ""
+  },
+  //预置的LaTex文本内容
+  defaultLaTexContent: {
+    type: String,
+    default: ""
   }
 };
 const _hoisted_1 = { class: "editify-mathformula" };
@@ -40749,6 +40754,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const insertMathformula = () => {
       emits("insert", latexContent.value);
     };
+    watch(
+      () => props.defaultLaTexContent,
+      (newVal) => {
+        latexContent.value = newVal;
+      },
+      {
+        immediate: true
+      }
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", _hoisted_2, toDisplayString(unref($editTrans)("insertMathformula")), 1),
@@ -40776,7 +40790,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const InsertMathformula = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ba178fa5"]]);
+const InsertMathformula = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ed1761a7"]]);
 const isMathformula = (el) => {
   return el.parsedom == "span" && el.hasMarks() && el.marks["data-editify-mathformula"];
 };
@@ -40809,6 +40823,37 @@ const hasMathformulaInRange = (editor, dataRangeCaches) => {
     return isUnderMathformula(item.element);
   });
 };
+const getMathformulaElementByRange = (editor, dataRangeCaches) => {
+  if (!editor.range) {
+    return null;
+  }
+  if (editor.range.anchor.element.isEqual(editor.range.focus.element)) {
+    return getMathformulaElement(editor.range.anchor.element);
+  }
+  const arr = dataRangeCaches.list.map((item) => {
+    return getMathformulaElement(item.element);
+  });
+  let hasNull = arr.some((el) => {
+    return el == null;
+  });
+  if (hasNull) {
+    return null;
+  }
+  if (arr.length == 1) {
+    return arr[0];
+  }
+  let flag = true;
+  for (let i = 1; i < arr.length; i++) {
+    if (!arr[i].isEqual(arr[0])) {
+      flag = false;
+      break;
+    }
+  }
+  if (flag) {
+    return arr[0];
+  }
+  return null;
+};
 const mathformula = (options) => {
   if (!common.isObject(options)) {
     options = {};
@@ -40816,9 +40861,11 @@ const mathformula = (options) => {
   const plugin = (editifyInstance, editTrans) => {
     let isDisabled = false;
     if (editifyInstance.exposed.editor.value) {
-      isDisabled = hasMathformulaInRange(editifyInstance.exposed.editor.value, editifyInstance.exposed.dataRangeCaches.value) || hasPreInRange(editifyInstance.exposed.editor.value, editifyInstance.exposed.dataRangeCaches.value) || hasLinkInRange(editifyInstance.exposed.editor.value, editifyInstance.exposed.dataRangeCaches.value);
+      isDisabled = hasPreInRange(editifyInstance.exposed.editor.value, editifyInstance.exposed.dataRangeCaches.value) || hasLinkInRange(editifyInstance.exposed.editor.value, editifyInstance.exposed.dataRangeCaches.value);
     }
+    let defaultLaTexContent = "";
     return {
+      //插件名称
       name: "mathformula",
       //菜单项配置
       menu: {
@@ -40835,29 +40882,51 @@ const mathformula = (options) => {
           leftBorder: options.leftBorder,
           rightBorder: options.rightBorder,
           hideScroll: true,
-          active: false,
+          active: editifyInstance.exposed.editor.value ? hasMathformulaInRange(editifyInstance.exposed.editor.value, editifyInstance.exposed.dataRangeCaches.value) : false,
           disabled: isDisabled || options.disabled,
+          //浮层展开时触发的事件
+          onLayerShow() {
+            const mathformulaElement = getMathformulaElementByRange(editifyInstance.exposed.editor.value, editifyInstance.exposed.dataRangeCaches.value);
+            if (mathformulaElement) {
+              defaultLaTexContent = mathformulaElement.marks["data-editify-mathformula"] || "";
+            }
+          },
           default: () => h(Icon, { value: "mathformula" }),
           layer: (_name, btnInstance) => {
             return h(InsertMathformula, {
               color: editifyInstance.props.color,
+              defaultLaTexContent,
               onInsert: (content) => {
                 if (content) {
                   const editor = editifyInstance.exposed.editor.value;
-                  const dom = element.string2dom(
-                    katex.renderToString(content, {
+                  const mathformulaElement = getMathformulaElementByRange(editifyInstance.exposed.editor.value, editifyInstance.exposed.dataRangeCaches.value);
+                  if (mathformulaElement) {
+                    mathformulaElement.toEmpty();
+                    editor.range.anchor.moveToStart(editor.getNextElement(mathformulaElement));
+                    editor.range.focus.moveToStart(editor.getNextElement(mathformulaElement));
+                  }
+                  let mathml = "";
+                  try {
+                    mathml = katex.renderToString(content, {
                       output: "mathml",
-                      throwOnError: false
-                    })
-                  );
-                  const html = `<span data-editify-mathformula="true" class="katex" >${dom.innerHTML}</span>`;
-                  const elements = editor.parseHtml(html);
-                  editor.insertElement(elements[0]);
-                  editor.range.anchor.moveToEnd(elements[0]);
-                  editor.range.focus.moveToEnd(elements[0]);
-                  editor.formatElementStack();
-                  editor.domRender();
-                  editor.rangeRender();
+                      throwOnError: true
+                    });
+                  } catch (error2) {
+                    mathml = "";
+                    if (typeof options.handleError == "function") {
+                      options.handleError(error2);
+                    }
+                  }
+                  if (mathml) {
+                    const html = `<span data-editify-mathformula="${content}" contenteditable="false">${mathml}</span>`;
+                    const elements = editor.parseHtml(html);
+                    editor.insertElement(elements[0]);
+                    editor.range.anchor.moveToEnd(elements[0]);
+                    editor.range.focus.moveToEnd(elements[0]);
+                    editor.formatElementStack();
+                    editor.domRender();
+                    editor.rangeRender();
+                  }
                 }
                 btnInstance.show = false;
               }
@@ -41076,7 +41145,7 @@ const attachment = (options) => {
 const install = (app) => {
   app.component(Editify.name, Editify);
 };
-const version = "0.1.39";
+const version = "0.1.40";
 console.log(`%c vue-editify %c v${version} `, "padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;", "padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;");
 export {
   AlexElement,
@@ -41087,12 +41156,14 @@ export {
   elementIsInTask,
   getCurrentParsedomElement,
   getMathformulaElement,
+  getMathformulaElementByRange,
   getParsedomElementByElement,
   getRangeText,
   hasAttachmentInRange,
   hasImageInRange,
   hasLinkInRange,
   hasListInRange,
+  hasMathformulaInRange,
   hasPreInRange,
   hasQuoteInRange,
   hasTableInRange,