@cherry-markdown/cherry-markdown-dev 0.8.58-dev

package/src/utils/error.js

@@ -0,0 +1,61 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * 三个地方的错误异常校验
+ *  1. markdown 对象参数校验
+ *  2. editText 用户输入校验，执行engine过程以防异常
+ *  3. 自定义hook校验 对外开发者开发标准校验
+ */
+
+export const $expectTarget = (target, Constructor) => {
+  if (
+    (!Array.isArray(target) && typeof target !== Constructor.name.toLowerCase()) ||
+    (!Array.isArray(target) && Constructor.name.toLowerCase() === 'array')
+  ) {
+    throw new TypeError(`parameter given must be ${Constructor.name}`);
+  }
+
+  return true;
+};
+
+export const $expectInherit = (target, parent) => {
+  if (!(target instanceof parent)) {
+    throw new Error('the hook does not correctly inherit');
+  }
+  return true;
+};
+
+export const $expectInstance = (target) => {
+  if (typeof target !== 'object') {
+    throw new Error('the hook must be a instance, not a class');
+  }
+  return true;
+};
+
+// ref: https://github.com/mdlavin/nested-error-stacks
+export default class NestedError extends Error {
+  constructor(message, nested) {
+    super(message);
+    this.name = 'Error';
+    this.stack = this.buildStackTrace(nested);
+  }
+
+  buildStackTrace(nested) {
+    const stack = nested && nested.stack ? nested.stack : '';
+    const newStack = `${this.stack}\nCaused By: ${stack}`;
+    return newStack;
+  }
+}

package/src/utils/event.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export function addEvent(elm, evType, fn, useCapture) {
+  if (elm.addEventListener) {
+    elm.addEventListener(evType, fn, useCapture); // DOM2.0
+    return true;
+  }
+
+  if (elm.attachEvent) {
+    const r = elm.attachEvent(`on${evType}`, fn); // IE5+
+    return r;
+  }
+  elm[`on${evType}`] = fn; // DOM 0
+}
+
+export function removeEvent(elm, evType, fn, useCapture) {
+  if (elm.removeEventListener) {
+    elm.removeEventListener(evType, fn, useCapture); // DOM2.0
+  } else if (elm.detachEvent) {
+    const r = elm.detachEvent(`on${evType}`, fn); // IE5+
+    return r;
+  } else {
+    elm[`on${evType}`] = null; // DOM 0
+  }
+}

package/src/utils/export.js

@@ -0,0 +1,166 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import html2canvas from 'html2canvas';
+
+/**
+ * 先把body上的内容隐藏起来
+ * @returns {Array} displayList 记录body子元素原始的显隐信息
+ */
+const hideBodyChildren = () => {
+  const displayList = [];
+  /** @type {HTMLElement[]}*/ (Array.from(document.body.children)).forEach((dom, index) => {
+    displayList[index] = dom.style.display;
+    dom.style.display = 'none';
+  });
+  return displayList;
+};
+
+/**
+ * 复原body上被隐藏的内容
+ * @param {Array} displayList 记录body子元素原始的显隐信息
+ */
+const undoHideBodyChildren = (displayList = []) => {
+  /** @type {HTMLElement[]}*/ (Array.from(document.body.children)).forEach((dom, index) => {
+    if (typeof displayList[index] !== 'undefined') {
+      dom.style.display = displayList[index];
+    }
+  });
+};
+
+/**
+ * 将预览区域的内容放在body上准备后续导出操作
+ * @param {HTMLElement} previewDom 预览区域的dom
+ * @param {function} cb 准备好导出后开始执行导出操作
+ */
+const getReadyToExport = (previewDom, cb) => {
+  const cherryPreviewer = /** @type {HTMLElement}*/ (previewDom.cloneNode(true));
+  // 强制去掉预览区的隐藏class
+  cherryPreviewer.className = cherryPreviewer.className.replace('cherry-previewer--hidden', '');
+  cherryPreviewer.style.width = '100%';
+  const mmls = cherryPreviewer.querySelectorAll('mjx-assistive-mml');
+  // a fix for html2canvas
+  mmls.forEach((e) => {
+    if (e instanceof HTMLElement) e.style.setProperty('visibility', 'hidden');
+  });
+  const cherryWrapper = document.createElement('div');
+  cherryWrapper.appendChild(cherryPreviewer);
+  const displayList = hideBodyChildren();
+  document.body.appendChild(cherryWrapper);
+  const bodyOverflow = document.body.style.overflow;
+  document.body.style.overflow = 'visible';
+  cb(cherryPreviewer, () => {
+    cherryWrapper.remove();
+    undoHideBodyChildren(displayList);
+    document.body.style.overflow = bodyOverflow;
+  });
+};
+
+/**
+ * 下载文件
+ * @param {String} downloadUrl 图片本地地址
+ * @param {String} fileName 导出图片文件名
+ */
+const fileDownload = (downloadUrl, fileName) => {
+  const aLink = document.createElement('a');
+  aLink.style.display = 'none';
+  aLink.href = downloadUrl;
+  aLink.download = `${fileName}.png`;
+  document.body.appendChild(aLink);
+  aLink.click();
+  document.body.removeChild(aLink);
+};
+
+/**
+ * 利用window.print导出成PDF
+ * @param {HTMLElement} previewDom 预览区域的dom
+ * @param {String} fileName 导出PDF文件名
+ */
+export function exportPDF(previewDom, fileName) {
+  const oldTitle = document.title;
+  document.title = fileName;
+  getReadyToExport(previewDom, (/** @type {HTMLElement}*/ cherryPreviewer, /** @type {function}*/ thenFinish) => {
+    // 强制展开所有代码块
+    cherryPreviewer.innerHTML = cherryPreviewer.innerHTML.replace(
+      /class="cherry-code-unExpand("| )/g,
+      'class="cherry-code-expand$1',
+    );
+    window.print();
+    thenFinish();
+    document.title = oldTitle;
+  });
+}
+
+/**
+ * 利用canvas将html内容导出成图片
+ * @param {HTMLElement} previewDom 预览区域的dom
+ * @param {String} fileName 导出图片文件名
+ */
+export function exportScreenShot(previewDom, fileName) {
+  getReadyToExport(previewDom, (/** @type {HTMLElement}*/ cherryPreviewer, /** @type {function}*/ thenFinish) => {
+    window.scrollTo(0, 0);
+    // 去掉audio和video标签
+    cherryPreviewer.innerHTML = cherryPreviewer.innerHTML.replace(/<audio [^>]+?>([^\n]*?)<\/audio>/g, '$1');
+    cherryPreviewer.innerHTML = cherryPreviewer.innerHTML.replace(/<video [^>]+?>([^\n]*?)<\/video>/g, '$1');
+    // 强制展开所有代码块
+    cherryPreviewer.innerHTML = cherryPreviewer.innerHTML.replace(
+      /class="cherry-code-unExpand("| )/g,
+      'class="cherry-code-expand$1',
+    );
+    html2canvas(cherryPreviewer, {
+      allowTaint: true,
+      height: cherryPreviewer.clientHeight,
+      width: cherryPreviewer.clientWidth,
+      scrollY: 0,
+      scrollX: 0,
+    }).then((canvas) => {
+      const imgData = canvas.toDataURL('image/jpeg');
+      fileDownload(imgData, fileName);
+      thenFinish();
+    });
+  });
+}
+
+/**
+ * 导出 markdown 文件
+ * @param {String} markdownText markdown文本
+ * @param {String} fileName 导出markdown文件名
+ */
+export function exportMarkdownFile(markdownText, fileName) {
+  const blob = new Blob([markdownText], { type: 'text/markdown;charset=utf-8' });
+  const aLink = document.createElement('a');
+  aLink.style.display = 'none';
+  aLink.href = URL.createObjectURL(blob);
+  aLink.download = `${fileName}.md`;
+  document.body.appendChild(aLink);
+  aLink.click();
+  document.body.removeChild(aLink);
+}
+
+/**
+ * 导出预览区 HTML 文件
+ * @param {String} HTMLText HTML文本
+ * @param {String} fileName 导出HTML文件名
+ */
+export function exportHTMLFile(HTMLText, fileName) {
+  const blob = new Blob([HTMLText], { type: 'text/markdown;charset=utf-8' });
+  const aLink = document.createElement('a');
+  aLink.style.display = 'none';
+  aLink.href = URL.createObjectURL(blob);
+  aLink.download = `${fileName}.html`;
+  document.body.appendChild(aLink);
+  aLink.click();
+  document.body.removeChild(aLink);
+}

package/src/utils/file.js

@@ -0,0 +1,164 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * 多选上传文件的逻辑，如果有callback，则不再走默认的替换文本的逻辑，而是调用callback
+ * @param {string} type 上传文件的类型
+ */
+export function handleUploadMulti(editor, type = 'image', accept = '*', callback = null) {
+  // type为上传文件类型 image|video|audio|pdf|word
+  const input = document.createElement('input');
+  const inputMultiple = editor.$cherry.options.multipleFileSelection || false;
+  input.type = 'file';
+  input.id = 'fileUpload';
+  input.value = '';
+  input.style.display = 'none';
+  input.accept = accept;
+  input.multiple = inputMultiple;
+  // document.body.appendChild(input);
+  input.addEventListener('change', (event) => {
+    // @ts-ignore
+    const { files } = event.target;
+    // 文件上传后的回调函数可以由调用方自己实现
+    editor.$cherry.options.callback.fileUploadMulti(files, (arr) => {
+      // 文件上传的默认回调行数，调用方可以完全不使用该函数
+      if (arr.length === 0) {
+        return;
+      }
+      if (callback) {
+        return callback(arr);
+      }
+      let code = '';
+      for (const file of files) {
+        const { url } = file;
+        code += `${handleType(type, file, url)}/n`;
+      }
+      // 替换选中区域
+      // @ts-ignore
+      editor.editor.doc.replaceSelection(code);
+    });
+  });
+  input.click();
+}
+
+/**
+ * 上传文件的逻辑，如果有callback，则不再走默认的替换文本的逻辑，而是调用callback
+ * @param {string} type 上传文件的类型
+ */
+export function handleUpload(editor, type = 'image', accept = '*', callback = null) {
+  // type为上传文件类型 image|video|audio|pdf|word
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.id = 'fileUpload';
+  input.value = '';
+  input.style.display = 'none';
+  input.accept = accept;
+  // document.body.appendChild(input);
+  input.addEventListener('change', (event) => {
+    // @ts-ignore
+    const [file] = event.target.files;
+    // 文件上传后的回调函数可以由调用方自己实现
+    editor.$cherry.options.callback.fileUpload(file, (url, params = {}) => {
+      // 文件上传的默认回调行数，调用方可以完全不使用该函数
+      if (typeof url !== 'string' || !url) {
+        return;
+      }
+      if (callback) {
+        return callback(file.name, url, params);
+      }
+      let code = '';
+      code = handleType(type, file, url);
+      // 替换选中区域
+      // @ts-ignore
+      editor.editor.doc.replaceSelection(code);
+    });
+  });
+  input.click();
+}
+
+/**
+ * 处理要插入的代码
+ * @param type 文件类型
+ * @param file 文件
+ * @param url 路径
+ * @returns string
+ */
+const handleType = (type, file, url) => {
+  if (type === 'image') {
+    // 如果是图片，则返回固定的图片markdown源码
+    return `![${file.name}](${url})`;
+  }
+  if (type === 'video') {
+    // 如果是视频，则返回固定的视频markdown源码
+    return `!video[${file.name}](${url})`;
+  }
+  if (type === 'audio') {
+    // 如果是音频，则返回固定的音频markdown源码
+    return `!audio[${file.name}](${url})`;
+  }
+  // 默认返回超链接
+  return `[${file.name}](${url})`;
+};
+
+/**
+ * 解析params参数
+ * @param params?.isBorder 是否有边框样式（图片场景下生效）
+ * @param params?.isShadow 是否有阴影样式（图片场景下生效）
+ * @param params?.isRadius 是否有圆角样式（图片场景下生效）
+ * @param params?.width 设置宽度，可以是像素、也可以是百分比（图片、视频场景下生效）
+ * @param params?.height 设置高度，可以是像素、也可以是百分比（图片、视频场景下生效）
+ */
+export function handleParams(params) {
+  const ret = [];
+  if (params?.isBorder) {
+    ret.push('#B');
+  }
+  if (params?.isShadow) {
+    ret.push('#S');
+  }
+  if (params?.isRadius) {
+    ret.push('#R');
+  }
+  if (params?.width) {
+    ret.push(`#${params.width}`);
+  }
+  if (params?.height) {
+    if (!params.width) {
+      ret.push('#auto');
+    }
+    ret.push(`#${params.height}`);
+  }
+  return ret.join(' ');
+}
+
+export function handleFileUploadCallback(url, params, file) {
+  const name = params?.name ?? file.name;
+  let type = '';
+  let poster = '';
+  if (/video/i.test(file.type)) {
+    type = '!video';
+    poster = params?.poster ? `{poster=${params.poster}}` : '';
+  }
+  if (/audio/i.test(file.type)) {
+    type = '!audio';
+  }
+  if (/image/i.test(file.type)) {
+    type = '!';
+  }
+  const style = type ? handleParams(params) : '';
+  const { before = '', after = '' } = params;
+  return `${before}${type}[${name}${style}](${url})${poster}${after}`;
+}

package/src/utils/formulaUtilsHandler.js

@@ -0,0 +1,232 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { svg2img, getSvgString } from '@/utils/svgUtils';
+import { copyTextByClipboard } from '@/utils/copy';
+import MathBlock from '@/core/hooks/MathBlock';
+
+export default class FormulaHandler {
+  /** @type{HTMLElement} */
+  bubbleContainer = null;
+  /**
+   * @param {string} trigger 触发方式
+   * @param {Element} target 目标dom
+   * @param {HTMLDivElement} container bubble容器
+   * @param {HTMLDivElement} previewerDom 预览器dom
+   * @param {import('../Editor').default} editor 编辑器实例
+   */
+  constructor(trigger, target, container, previewerDom, editor) {
+    this.trigger = trigger;
+    this.target = target;
+    this.container = container;
+    this.previewerDom = previewerDom;
+    this.editor = editor;
+  }
+
+  /**
+   * 触发事件
+   * @param {string} type 事件类型
+   * @param {Event} event 事件对象
+   */
+  // @ts-ignore
+  emit(type, event) {
+    switch (type) {
+      case 'remove':
+      case 'scroll':
+        return this.remove();
+    }
+  }
+
+  /**
+   * 绘制公式操作bubble容器
+   */
+  drawBubble() {
+    const bubbleContainer = document.createElement('div');
+    bubbleContainer.innerHTML = `<div class="formula-utils-btn formula-utils-img">
+    <button>输出图片</button>
+    <div class="formula-utils-submenu formula-utils-img-submenu">
+      <div class="formula-utils-submenu-btn formula-utils-img-svg">
+        <button data-name="svg">svg</button>
+      </div>
+      <div class="formula-utils-submenu-btn formula-utils-img-png">
+        <button data-name="png">png</button>
+      </div>
+      <div class="formula-utils-submenu-btn formula-utils-img-jpg">
+        <button data-name="jpg">jpg</button>
+      </div>
+    </div>
+  </div>
+  <div class="formula-utils-btn formula-utils-code">
+    <button>输出代码</button>
+    <div class="formula-utils-submenu formula-utils-code-submenu">
+      <div class="formula-utils-submenu-btn formula-utils-code-latex">
+        <button data-name="latex">latex</button>
+      </div>
+      <div class="formula-utils-submenu-btn formula-utils-code-html">
+        <button data-name="html">html</button>
+      </div>
+      <div class="formula-utils-submenu-btn formula-utils-code-svgcode">
+        <button data-name="svgcode">svgcode</button>
+      </div>
+    </div>
+  </div>
+  <div class="formula-utils-btn formula-utils-word">
+    <button>输出mathml</button>
+    <div class="formula-utils-submenu formula-utils-word-submenu">
+      <div class="formula-utils-submenu-btn formula-utils-word-mathml">
+        <button data-name="mathml">mathml</button>
+      </div>
+    </div>
+  </div>
+  <div class="formula-utils-btn formula-utils-transfer">
+    <button>转义</button>
+    <div class="formula-utils-submenu formula-utils-transfer-submenu">
+      <div class="formula-utils-submenu-btn formula-utils-transfer-backslash">
+        <button data-name="\\">反斜杠</button>
+      </div>
+      <div class="formula-utils-submenu-btn formula-utils-transfer-dollar">
+        <button data-name="$">$包裹</button>
+      </div>
+      <div class="formula-utils-submenu-btn formula-utils-transfer-double-dollar">
+        <button data-name="$$">$$包裹</button>
+      </div>
+    </div>
+  </div>`;
+    bubbleContainer.id = 'formula-utils-bubble-container'; // 方便 namedItem 获取
+    bubbleContainer.className = ['formula-utils-bubble-container'].join(' ');
+    this.bubbleContainer = bubbleContainer;
+    this?.editor?.$cherry?.wrapperDom?.appendChild(bubbleContainer);
+  }
+
+  /**
+   * 显示bubble
+   * @param {number} x
+   * @param {number} y
+   */
+  showBubble(x, y) {
+    const bubbleContainer = this?.editor?.$cherry?.wrapperDom?.children?.namedItem('formula-utils-bubble-container');
+    const targetRect = this.target.getBoundingClientRect();
+    if (bubbleContainer instanceof HTMLElement) {
+      this.bubbleContainer = bubbleContainer;
+    } else {
+      this.drawBubble();
+    }
+    this.bubbleContainer.style.display = 'flex';
+    this.bubbleContainer.style.top = `${y || targetRect.top}px`;
+    this.bubbleContainer.style.left = `${x || targetRect.left}px`;
+    this.bubbleContainer.addEventListener('click', this.bubbleClickHandler.bind(this), { once: true });
+    this.collectFormulaCode();
+  }
+
+  collectFormulaCode() {
+    const formulaCode = [];
+    // @ts-ignore
+    this.editor.editor.getValue().replace(/(\$+)\s*([\w\W]*?)\s*(\1)/g, (whole, start, content, end, offset) => {
+      formulaCode.push({
+        code: content,
+        offset,
+      });
+    });
+    this.formulaCode = formulaCode;
+  }
+
+  remove() {
+    if (this.bubbleContainer) {
+      this.bubbleContainer.style.display = 'none';
+    }
+  }
+
+  /**
+   * bubble 上的点击事件
+   * @param {Event} e
+   */
+  bubbleClickHandler(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const { target } = e;
+    if (target instanceof HTMLButtonElement) {
+      const { name = '' } = target.dataset;
+      switch (name) {
+        case 'svg':
+        case 'png':
+        case 'jpg':
+          // 涉及到图片的操作
+          if (this.target instanceof SVGSVGElement) {
+            svg2img(this.target, { format: name });
+          }
+          break;
+        case 'html':
+        case 'svgcode':
+          // 涉及到代码的操作
+          if (this.target instanceof SVGSVGElement) {
+            if (name === 'svgcode') {
+              copyTextByClipboard(getSvgString(this.target));
+            } else {
+              const mathElement = this.target.parentElement.querySelector('math');
+              mathElement.setAttribute('xmlns', 'http://www.w3.org/1998/Math/MathML');
+              copyTextByClipboard(mathElement.outerHTML);
+            }
+          }
+          break;
+        case '\\':
+        case '$':
+        case '$$':
+        case 'latex':
+        case 'mathml':
+        case 'docx':
+          // 涉及到公式API的操作
+          {
+            const allMjx = this.previewerDom.querySelectorAll('mjx-container');
+            let mjxIndex = -1;
+            allMjx.forEach((mjx, index) => {
+              if (mjx === this.target.parentElement) {
+                mjxIndex = index;
+              }
+            });
+            if (mjxIndex >= 0 && this.formulaCode[mjxIndex]) {
+              const { code } = this.formulaCode[mjxIndex];
+              if (name === 'mathml' || name === 'docx') {
+                /** @type {MathBlock} */
+                // @ts-ignore
+                const hook = this.editor.$cherry.engine.hooks.paragraph.find((hook) => hook instanceof MathBlock);
+                if (hook && hook.engine === 'MathJax') {
+                  window.MathJax?.texReset();
+                  window.MathJax?.tex2mmlPromise?.(code, { display: true }).then((mml) => {
+                    if (name === 'mathml') {
+                      copyTextByClipboard(mml);
+                    } else {
+                      // TODO: docx
+                    }
+                  });
+                }
+                // TODO: other engine
+              } else if (name === 'latex') {
+                copyTextByClipboard(code);
+              } else if (name === '$') {
+                copyTextByClipboard(`${name}${code}${name}`);
+              } else if (name === '$$') {
+                copyTextByClipboard(`${name}\n${code}\n${name}`);
+              } else if (name === '\\') {
+                copyTextByClipboard(`\\${code}`);
+              }
+            }
+          }
+          break;
+      }
+    }
+    this.remove();
+  }
+}