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

package/src/Sanitizer.js

@@ -0,0 +1,4 @@
+import createDOMPurify from 'dompurify';
+
+// for browser
+export const sanitizer = createDOMPurify(window);

package/src/Sanitizer.node.js

@@ -0,0 +1,7 @@
+import createDOMPurify from 'dompurify';
+import { JSDOM } from 'jsdom';
+
+const { window } = new JSDOM('');
+
+// @ts-expect-error
+export const sanitizer = createDOMPurify(window);

package/src/UrlCache.js

@@ -0,0 +1,98 @@
+/**
+ * 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 CryptoJS from 'crypto-js';
+
+let urlCache = {};
+const cherryInnerLinkRegex = /^cherry-inner:\/\/([0-9a-f]+)$/i;
+
+export function urlProcessorProxy(urlProcessor) {
+  return function (url, srcType, callback) {
+    if (UrlCache.isInnerLink(url)) {
+      const newUrl = urlProcessor(UrlCache.get(url), srcType, callback);
+      return UrlCache.replace(url, newUrl);
+    }
+    return urlProcessor(url, srcType, callback);
+  };
+}
+
+export default class UrlCache {
+  /**
+   * 判断url是否Cherry的内部链接
+   * @param {string} url 要检测的URL
+   * @returns
+   */
+  static isInnerLink(url) {
+    return cherryInnerLinkRegex.test(url);
+  }
+
+  /**
+   * 缓存url为内部链接，主要用于缩短超长链接，避免正则超时
+   * @param {string} url 要转换为内部链接的URL
+   * @returns
+   */
+  static set(url) {
+    const urlSign = CryptoJS.SHA256(url).toString();
+    urlCache[urlSign] = url;
+    return `cherry-inner://${urlSign}`;
+  }
+
+  /**
+   * 获取原始链接
+   * @param {string} innerUrl 内部链接
+   * @returns
+   */
+  static get(innerUrl) {
+    const [, urlSign] = innerUrl.match(cherryInnerLinkRegex) ?? [];
+    if (!urlSign) {
+      return;
+    }
+    return urlCache[urlSign];
+  }
+
+  /**
+   * 替换指定内部链接的真实地址
+   * @param {string} innerUrl 原始内部链接
+   * @param {string} newUrl 需要替换的链接
+   */
+  static replace(innerUrl, newUrl) {
+    const [, urlSign] = innerUrl.match(cherryInnerLinkRegex) ?? [];
+    if (!urlSign) {
+      return;
+    }
+    urlCache[urlSign] = newUrl;
+    return innerUrl;
+  }
+
+  /**
+   * 替换所有内部链接为原始的真实地址
+   * @param {string} html 包含 cherry-inner 协议地址的 html 文本
+   */
+  static restoreAll(html) {
+    const cherryInnerLinkRegex = /cherry-inner:\/\/([0-9a-f]+)/gi;
+    const $html = html.replace(cherryInnerLinkRegex, (match) => {
+      const originalUrl = UrlCache.get(match);
+      return originalUrl || match;
+    });
+    return $html;
+  }
+
+  /**
+   * 清空缓存
+   */
+  static clear() {
+    urlCache = {};
+  }
+}

package/src/addons/advance/cherry-table-echarts-plugin.js

@@ -0,0 +1,170 @@
+/**
+ * Tencent is pleased to support the open source community by making CherryMarkdown available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
+ * The below software in this distribution may have been modified by THL A29 Limited ("Tencent Modifications").
+ *
+ * All Tencent Modifications are Copyright (C) THL A29 Limited.
+ *
+ * CherryMarkdown is 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 mergeWith from 'lodash/mergeWith';
+
+const DEFAULT_OPTIONS = {
+  renderer: 'svg',
+  width: 500,
+  height: 300,
+};
+
+export default class EChartsTableEngine {
+  static install(cherryOptions, ...args) {
+    if (typeof window === 'undefined') {
+      console.warn('echarts-table-engine only works in browser.');
+      mergeWith(cherryOptions, {
+        engine: {
+          syntax: {
+            table: {
+              enableChart: false,
+            },
+          },
+        },
+      });
+      return;
+    }
+    mergeWith(cherryOptions, {
+      engine: {
+        syntax: {
+          table: {
+            enableChart: true,
+            chartRenderEngine: EChartsTableEngine,
+            externals: ['echarts'],
+          },
+        },
+      },
+    });
+  }
+
+  constructor(echartsOptions = {}) {
+    const { echarts, ...options } = echartsOptions;
+    if (!echarts && !window.echarts) {
+      throw new Error('table-echarts-plugin[init]: Package echarts not found.');
+    }
+    this.options = { ...DEFAULT_OPTIONS, ...(options || {}) };
+    this.echartsRef = echarts || window.echarts; // echarts引用
+    this.dom = null;
+  }
+
+  getInstance() {
+    if (!this.dom) {
+      this.dom = document.createElement('div');
+      this.echartsRef.init(this.dom, null, this.options);
+    }
+    return this.echartsRef.getInstanceByDom(this.dom);
+  }
+
+  render(type, options, tableObject) {
+    // console.log(type, options, tableObject);
+    let chartOption = {};
+    switch (type) {
+      case 'bar':
+        chartOption = this.renderBarChart(tableObject, options);
+        break;
+      case 'line':
+        chartOption = this.renderLineChart(tableObject, options);
+        break;
+      default:
+        return '';
+    }
+    const eChartInstance = this.getInstance();
+    eChartInstance.clear();
+    eChartInstance.setOption(chartOption);
+    return eChartInstance.getDom().innerHTML;
+  }
+
+  renderBarChart(tableObject, options) {
+    return this.$renderChartCommon(tableObject, options, 'bar');
+  }
+
+  renderLineChart(tableObject, options) {
+    return this.$renderChartCommon(tableObject, options, 'line');
+  }
+
+  $renderChartCommon(tableObject, options, type) {
+    // TODO: 通过options反转xy轴
+    const baseSeries = {
+      bar: {
+        type: 'bar',
+        barWidth: 20,
+        animation: false,
+        name: '',
+        data: [],
+      },
+      line: {
+        type: 'line',
+        animation: false,
+        name: '',
+        data: [],
+      },
+    };
+    if (!baseSeries[type]) {
+      return;
+    }
+    const dataSet = tableObject.rows.reduce(
+      (result, row) => {
+        // legend
+        result.legend.data.push(row[0]);
+        // series
+        result.series.push({
+          ...baseSeries[type],
+          name: row[0],
+          data: row.slice(1).map((data) => {
+            const num = Number.parseFloat(data.replace(/,/g, ''));
+            return num;
+          }),
+        });
+        return result;
+      },
+      {
+        legend: { data: [] },
+        series: [],
+      },
+    );
+    const chartOptions = {
+      ...dataSet,
+      xAxis: {
+        data: tableObject.header.slice(1),
+        type: 'category',
+      },
+      yAxis: {
+        type: 'value',
+        axisLabel: {
+          width: '100%',
+        },
+      },
+      grid: {
+        containLabel: true,
+        left: '1%',
+        right: '1%',
+        bottom: '10%',
+      },
+    };
+    return chartOptions;
+  }
+
+  onDestroy() {
+    if (!this.dom) {
+      return;
+    }
+    this.echartsRef.dispose(this.dom);
+  }
+}

package/src/addons/cherry-code-block-mermaid-plugin.js

@@ -0,0 +1,158 @@
+/**
+ * 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 mergeWith from 'lodash/mergeWith';
+
+const DEFAULT_OPTIONS = {
+  // TODO: themes
+  theme: 'default',
+  altFontFamily: 'sans-serif',
+  fontFamily: 'sans-serif',
+  themeCSS: '.label foreignObject { font-size: 90%; overflow: visible; } .label { font-family: sans-serif; }',
+  flowchart: {
+    useMaxWidth: false,
+  },
+  sequence: {
+    useMaxWidth: false,
+  },
+  startOnLoad: false,
+  logLevel: 5,
+  // fontFamily: 'Arial, monospace'
+};
+
+export default class MermaidCodeEngine {
+  static TYPE = 'figure';
+
+  static install(cherryOptions, ...args) {
+    mergeWith(cherryOptions, {
+      engine: {
+        syntax: {
+          codeBlock: {
+            customRenderer: {
+              mermaid: new MermaidCodeEngine(...args),
+            },
+          },
+        },
+      },
+    });
+  }
+
+  mermaidAPIRefs = null;
+  options = DEFAULT_OPTIONS;
+  dom = null;
+  mermaidCanvas = null;
+
+  constructor(mermaidOptions = {}) {
+    const { mermaid, mermaidAPI } = mermaidOptions;
+    if (
+      !mermaidAPI &&
+      !window.mermaidAPI &&
+      (!mermaid || !mermaid.mermaidAPI) &&
+      (!window.mermaid || !window.mermaid.mermaidAPI)
+    ) {
+      throw new Error('code-block-mermaid-plugin[init]: Package mermaid or mermaidAPI not found.');
+    }
+    this.options = { ...DEFAULT_OPTIONS, ...(mermaidOptions || {}) };
+    this.mermaidAPIRefs = mermaidAPI || window.mermaidAPI || mermaid.mermaidAPI || window.mermaid.mermaidAPI;
+    delete this.options.mermaid;
+    delete this.options.mermaidAPI;
+    this.mermaidAPIRefs.initialize(this.options);
+  }
+
+  mountMermaidCanvas($engine) {
+    if (this.mermaidCanvas && document.body.contains(this.mermaidCanvas)) {
+      return;
+    }
+    this.mermaidCanvas = document.createElement('div');
+    this.mermaidCanvas.style = 'width:1024px;opacity:0;position:fixed;top:100%;';
+    const container = $engine.$cherry.wrapperDom || document.body;
+    container.appendChild(this.mermaidCanvas);
+  }
+
+  /**
+   * 转换svg为img，如果出错则直出svg
+   * @param {string} svgCode
+   * @param {string} graphId
+   * @returns {string}
+   */
+  convertMermaidSvgToImg(svgCode, graphId) {
+    const domParser = new DOMParser();
+    let svgHtml;
+    const injectSvgFallback = (svg) =>
+      svg.replace('<svg ', '<svg style="max-width:100%;height:auto;font-family:sans-serif;" ');
+    try {
+      const svgDoc = /** @type {XMLDocument} */ (domParser.parseFromString(svgCode, 'image/svg+xml'));
+      const svgDom = /** @type {SVGSVGElement} */ (/** @type {any} */ (svgDoc.documentElement));
+      // tagName不是svg时，说明存在parse error
+      if (svgDom.tagName.toLowerCase() === 'svg') {
+        svgDom.style.maxWidth = '100%';
+        svgDom.style.height = 'auto';
+        svgDom.style.fontFamily = 'sans-serif';
+        const shadowSvg = /** @type {SVGSVGElement} */ (/** @type {any} */ (document.getElementById(graphId)));
+        let svgBox = shadowSvg.getBBox();
+        if (!svgDom.hasAttribute('viewBox')) {
+          svgDom.setAttribute('viewBox', `0 0 ${svgBox.width} ${svgBox.height}`);
+        } else {
+          svgBox = svgDom.viewBox.baseVal;
+        }
+        svgDom.getAttribute('width') === '100%' && svgDom.setAttribute('width', `${svgBox.width}`);
+        svgDom.getAttribute('height') === '100%' && svgDom.setAttribute('height', `${svgBox.height}`);
+        // fix end
+        svgHtml = svgDoc.documentElement.outerHTML;
+        // 屏蔽转img标签功能，如需要转换为img解除屏蔽即可
+        if (this.svg2img) {
+          const dataUrl = `data:image/svg+xml,${encodeURIComponent(svgDoc.documentElement.outerHTML)}`;
+          svgHtml = `<img class="svg-img" src="${dataUrl}" alt="${graphId}" />`;
+        }
+      } else {
+        svgHtml = injectSvgFallback(svgCode);
+      }
+    } catch (e) {
+      svgHtml = injectSvgFallback(svgCode);
+    }
+    return svgHtml;
+  }
+
+  render(src, sign, $engine, config = {}) {
+    let $sign = sign;
+    if (!$sign) {
+      $sign = Math.round(Math.random() * 100000000);
+    }
+    this.mountMermaidCanvas($engine);
+    let html;
+    // 多实例的情况下相同的内容ID相同会导致mermaid渲染异常
+    // 需要通过添加时间戳使得多次渲染相同内容的图像ID唯一
+    // 图像渲染节流在CodeBlock Hook内部控制
+    const graphId = `mermaid-${$sign}-${new Date().getTime()}`;
+    this.svg2img = config?.svg2img ?? false;
+    try {
+      this.mermaidAPIRefs.render(
+        graphId,
+        src,
+        (svgCode) => {
+          const fixedSvg = svgCode
+            .replace(/\s*markerUnits="0"/g, '')
+            .replace(/\s*x="NaN"/g, '')
+            .replace(/<br>/g, '<br/>');
+          html = this.convertMermaidSvgToImg(fixedSvg, graphId);
+        },
+        this.mermaidCanvas,
+      );
+    } catch (e) {
+      return e?.str;
+    }
+    return html;
+  }
+}

package/src/addons/cherry-code-block-plantuml-plugin.js

@@ -0,0 +1,106 @@
+// @ts-nocheck
+/**
+ * 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 mergeWith from 'lodash/mergeWith';
+import deflate from '@/libs/rawdeflate';
+
+function encode64(data) {
+  let r = '';
+  for (let i = 0; i < data.length; i += 3) {
+    if (i + 2 === data.length) {
+      r += append3bytes(data.charCodeAt(i), data.charCodeAt(i + 1), 0);
+    } else if (i + 1 === data.length) {
+      r += append3bytes(data.charCodeAt(i), 0, 0);
+    } else {
+      r += append3bytes(data.charCodeAt(i), data.charCodeAt(i + 1), data.charCodeAt(i + 2));
+    }
+  }
+  return r;
+}
+
+function append3bytes(b1, b2, b3) {
+  const c1 = b1 >> 2;
+  const c2 = ((b1 & 0x3) << 4) | (b2 >> 4);
+  const c3 = ((b2 & 0xf) << 2) | (b3 >> 6);
+  const c4 = b3 & 0x3f;
+  let r = '';
+  r += encode6bit(c1 & 0x3f);
+  r += encode6bit(c2 & 0x3f);
+  r += encode6bit(c3 & 0x3f);
+  r += encode6bit(c4 & 0x3f);
+  return r;
+}
+
+function encode6bit(b1) {
+  let b = b1;
+  if (b < 10) {
+    return String.fromCharCode(48 + b);
+  }
+  b -= 10;
+  if (b < 26) {
+    return String.fromCharCode(65 + b);
+  }
+  b -= 26;
+  if (b < 26) {
+    return String.fromCharCode(97 + b);
+  }
+  b -= 26;
+  if (b === 0) {
+    return '-';
+  }
+  if (b === 1) {
+    return '_';
+  }
+  return '?';
+}
+
+function compress(s1, url) {
+  const s = unescape(encodeURIComponent(s1));
+  return `${url}/svg/${encode64(deflate(s, 9))}`;
+}
+
+export default class PlantUMLCodeEngine {
+  static install(cherryOptions, args) {
+    mergeWith(cherryOptions, {
+      engine: {
+        syntax: {
+          codeBlock: {
+            customRenderer: {
+              plantuml: new PlantUMLCodeEngine({
+                ...args,
+                ...(cherryOptions.engine.syntax.plantuml ?? {}),
+              }),
+            },
+          },
+        },
+      },
+    });
+  }
+
+  constructor(plantUMLOptions = {}) {
+    const defaultUrl = 'http://www.plantuml.com/plantuml';
+    this.baseUrl = plantUMLOptions.baseUrl ?? defaultUrl;
+  }
+
+  render(src, sign) {
+    let $sign = sign;
+    if (!$sign) {
+      $sign = Math.round(Math.random() * 100000000);
+    }
+    const graphId = `plantuml-${$sign}-${new Date().getTime()}`;
+    return `<img id="${graphId}" src="${compress(src, this.baseUrl)}" />`;
+  }
+}