cherry-muse 1.0.1

package/src/utils/dom.js

@@ -0,0 +1,162 @@
+/**
+ * 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.
+ */
+function mergeMarginBottom(bottom, top) {
+  const currentBottom = parseFloat(bottom);
+  const nextTop = parseFloat(top);
+  if (nextTop >= 0) {
+    // 不受合并影响
+    return currentBottom;
+  }
+  if (currentBottom >= 0) {
+    return currentBottom + nextTop;
+  }
+  // 同时为负数，取最小的
+  return Math.min(currentBottom, nextTop);
+}
+
+function mergeMarginTop(bottom, top) {
+  const prevBottom = parseFloat(bottom);
+  const currentTop = parseFloat(top);
+  if (currentTop < 0) {
+    // 负数的margin都被上一个区块吸收了
+    return 0;
+  }
+  if (prevBottom >= 0) {
+    // 如果当前margin-top比上一个margin-bottom要大，则只合并部分；反之合并全部，归属于上一个区块
+    return Math.max(currentTop - prevBottom, 0);
+  }
+  // 上一个margin-bottom为负数不受影响
+  return currentTop;
+}
+/**
+ * 用于解决块级元素边距合并问题
+ * @param {HTMLElement} element
+ */
+export function getBlockTopAndHeightWithMargin(element) {
+  const prevSibling = element.previousElementSibling;
+  const nextSibling = element.nextElementSibling;
+  if (!prevSibling) {
+    const style = getComputedStyle(element);
+    const rect = element.getBoundingClientRect();
+    if (!nextSibling) {
+      return {
+        // marginBottom可能为负数
+        height: Math.max(parseFloat(style.marginTop) + rect.height + parseFloat(style.marginBottom), 0),
+        offsetTop: element.offsetTop - Math.abs(parseFloat(style.marginTop)),
+      };
+    }
+    const nextSibStyle = getComputedStyle(nextSibling);
+    const marginBottom = mergeMarginBottom(style.marginBottom, nextSibStyle.marginTop);
+    return {
+      height: Math.max(parseFloat(style.marginTop) + rect.height + marginBottom, 0), // marginBottom可能为负数
+      offsetTop: element.offsetTop - Math.abs(parseFloat(style.marginTop)),
+    };
+  }
+  const style = getComputedStyle(element);
+  const rect = element.getBoundingClientRect();
+  const prevSibStyle = getComputedStyle(prevSibling);
+  const marginTop = mergeMarginTop(prevSibStyle.marginBottom, style.marginTop);
+  if (!nextSibling) {
+    return {
+      height: Math.max(marginTop + rect.height + parseFloat(style.marginBottom), 0), // marginBottom可能为负数
+      offsetTop: element.offsetTop - Math.abs(parseFloat(style.marginTop)),
+    };
+  }
+  const nextSibStyle = getComputedStyle(nextSibling);
+  const marginBottom = mergeMarginBottom(style.marginBottom, nextSibStyle.marginTop);
+  return {
+    height: Math.max(marginTop + rect.height + marginBottom, 0), // marginBottom可能为负数
+    offsetTop: element.offsetTop - Math.abs(marginTop),
+  };
+}
+
+/**
+ * document.elementsFromPoint polyfill
+ * ref: https://github.com/JSmith01/elementsfrompoint-polyfill/blob/master/index.js
+ * @param {number} x
+ * @param {number} y
+ */
+export function elementsFromPoint(x, y) {
+  // see https://caniuse.com/#search=elementsFromPoint
+  if (typeof document.elementsFromPoint === 'function') {
+    return document.elementsFromPoint(x, y);
+  }
+
+  if (typeof (/** @type {any}*/ (document).msElementsFromPoint) === 'function') {
+    const nodeList = /** @type {any}*/ (document).msElementsFromPoint(x, y);
+    return nodeList !== null ? Array.from(nodeList) : nodeList;
+  }
+  const elements = [];
+  const pointerEvents = [];
+  /** @type {HTMLElement} */
+  let ele;
+  do {
+    const currentElement = /** @type {HTMLElement} */ (document.elementFromPoint(x, y));
+    if (ele !== currentElement) {
+      ele = currentElement;
+      elements.push(ele);
+      pointerEvents.push(ele.style.pointerEvents);
+      ele.style.pointerEvents = 'none';
+    } else {
+      ele = null;
+    }
+  } while (ele);
+  elements.forEach((e, index) => {
+    e.style.pointerEvents = pointerEvents[index];
+  });
+  return elements;
+}
+
+export function getHTML(who, deep) {
+  if (!who || !who.tagName) {
+    return '';
+  }
+  let txt;
+  let ax;
+  let el = document.createElement('div');
+  el.appendChild(who.cloneNode(false));
+  txt = el.innerHTML;
+  if (deep) {
+    ax = txt.indexOf('>') + 1;
+    txt = txt.substring(0, ax) + who.innerHTML + txt.substring(ax);
+  }
+  el = null;
+  return txt;
+}
+
+/**
+ * @template {keyof HTMLElementTagNameMap} K
+ * @param {K} tagName 标签名
+ * @param {string} className 元素类名
+ * @param {Record<string,string>} attributes 附加属性
+ * @returns {HTMLElementTagNameMap[K]}
+ */
+export function createElement(tagName, className = '', attributes = {}) {
+  const element = document.createElement(tagName);
+  element.className = className;
+  if (typeof attributes !== 'undefined') {
+    Object.keys(attributes).forEach((key) => {
+      const value = attributes[key];
+      if (key.startsWith('data-')) {
+        const dataName = key.replace(/^data-/, '');
+        element.dataset[dataName] = value;
+        return;
+      }
+      element.setAttribute(key, value);
+    });
+  }
+  return element;
+}

package/src/utils/downloadUtil.js

@@ -0,0 +1,23 @@
+/**
+ * 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 downloadByATag(url, fileName) {
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = fileName;
+  a.click();
+  a.remove();
+}

package/src/utils/env.js

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+/**
+ * 判断当前是否浏览器环境
+ * @returns
+ */
+export function isBrowser() {
+  return typeof window === 'object';
+}

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,115 @@
+/**
+ * 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.
+ */
+
+/**
+ * 先把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;
+  });
+};
+
+/**
+ * 利用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) => {
+    window.print();
+    thenFinish();
+    document.title = oldTitle;
+  });
+}
+
+/**
+ * 导出 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,121 @@
+/**
+ * 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 splitFileName(filename) {
+  // 使用正则表达式匹配文件名和扩展名
+  const result = /^(.+?)(\.[^.]*$|$)/.exec(filename);
+
+  // 如果没有扩展名，返回原始文件名
+  if (!result) return { title: filename, ext: null };
+
+  // 返回文件名和扩展名
+  return { title: result[1], ext: result[2] ? result[2].substring(1) : null };
+}
+/**
+ * 上传文件的逻辑，如果有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.options.fileUpload(file, (url, params = {}) => {
+      // 文件上传的默认回调行数，调用方可以完全不使用该函数
+      if (typeof url !== 'string' || !url) {
+        return;
+      }
+      if (callback) {
+        return callback(file.name, url, params);
+      }
+      let code = '';
+      if (type === 'image') {
+        // 如果是图片，则返回固定的图片markdown源码
+        code = `![${file.name}](${url})`;
+      } else if (type === 'video') {
+        // 如果是视频，则返回固定的视频markdown源码
+        code = `!video[${file.name}](${url})`;
+      } else if (type === 'audio') {
+        // 如果是音频，则返回固定的音频markdown源码
+        code = `!audio[${file.name}](${url})`;
+      } else {
+        const { title, ext } = splitFileName(file.name);
+        // 默认返回超链接
+        code = `!file[${title}|${ext}](${url})`;
+      }
+
+      // 替换选中区域
+      // @ts-ignore
+      editor.editor.doc.replaceSelection(code);
+    });
+  });
+  input.click();
+}
+
+/**
+ * 解析params参数
+ * @param params
+ */
+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 = '!';
+  }
+  if (/file/i.test(file.type)) {
+    type = '!file';
+  }
+  const style = type ? handleParams(params) : '';
+  return `${type}[${name}${style}](${url})${poster}`;
+}