@cherry-markdown/cherry-markdown-dev 0.9.0-dev.202504110650.834443a → 0.9.0-dev.202504160300.d23d141

package/src/utils/error.js

@@ -1,61 +0,0 @@
-/**
- * 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

@@ -1,38 +0,0 @@
-/**
- * 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

@@ -1,166 +0,0 @@
-/**
- * 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

@@ -1,164 +0,0 @@
-/**
- * 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

@@ -1,232 +0,0 @@
-/**
- * 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();
-  }
-}