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

package/src/core/hooks/Hr.js

@@ -0,0 +1,52 @@
+/**
+ * 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 ParagraphBase from '@/core/ParagraphBase';
+import { prependLineFeedForParagraph } from '@/utils/lineFeed';
+/**
+ * 分割线语法
+ */
+export default class Hr extends ParagraphBase {
+  static HOOK_NAME = 'hr';
+
+  constructor() {
+    super({ needCache: true });
+  }
+
+  beforeMakeHtml(str) {
+    return str.replace(this.RULE.reg, (match, preLines) => {
+      const lineCount = (preLines.match(/\n/g) || []).length + 1;
+      // 计算签名，签名可能会重复，符合预期
+      const sign = `hr${lineCount}`;
+      const placeHolder = this.pushCache(`<hr data-sign="${sign}" data-lines="${lineCount}" />`, sign);
+      return prependLineFeedForParagraph(match, placeHolder);
+    });
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    return str;
+  }
+
+  rule() {
+    // 分割线必须有从新行开始，比如以换行结束
+    const ret = {
+      begin: '(?:^|\\n)(\\n*)[ ]*',
+      end: '(?=$|\\n)',
+      content: '((?:-[ \\t]*){3,}|(?:\\*[ \\t]*){3,}|(?:_[ \\t]*){3,})',
+    };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'g');
+    return ret;
+  }
+}

package/src/core/hooks/HtmlBlock.js

@@ -0,0 +1,184 @@
+/**
+ * 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 ParagraphBase from '@/core/ParagraphBase';
+import {
+  whiteList,
+  convertHTMLNumberToName,
+  // isValidScheme, encodeURIOnce,
+  escapeHTMLEntitiesWithoutSemicolon,
+} from '@/utils/sanitize';
+import { sanitizer } from '@/Sanitizer';
+import { isBrowser } from '@/utils/env';
+
+/**
+ * encode unsafe link-related attributes
+ */
+const unsafeAttributes = ['href', 'src'];
+
+sanitizer.addHook('afterSanitizeAttributes', (node) => {
+  unsafeAttributes.forEach((attr) => {
+    if (!node.hasAttribute(attr)) {
+      return;
+    }
+    const value = node.getAttribute(attr);
+    // encode unsafe backslash in link attributes
+    node.setAttribute(attr, value.replace(/\\/g, '%5c'));
+  });
+});
+
+export default class HtmlBlock extends ParagraphBase {
+  static HOOK_NAME = 'htmlBlock';
+  constructor({ config }) {
+    super({ needCache: true });
+    this.filterStyle = config.filterStyle || false;
+  }
+
+  // ref: http://www.vfmd.org/vfmd-spec/specification/#procedure-for-detecting-automatic-links
+  isAutoLinkTag(tagMatch) {
+    const REGEX_GROUP = [
+      /^<([a-z][a-z0-9+.-]{1,31}:\/\/[^<> `]+)>$/i,
+      /^<(mailto:[^<> `]+)>$/i,
+      /^<([^()<>[\]:'@\\,"\s`]+@[^()<>[\]:'@\\,"\s`.]+\.[^()<>[\]:'@\\,"\s`]+)>$/i,
+    ];
+    return REGEX_GROUP.some((regex) => regex.test(tagMatch));
+  }
+
+  isHtmlComment(match) {
+    const htmlComment = /^<!--.*?-->$/;
+    return htmlComment.test(match);
+  }
+
+  beforeMakeHtml(str, sentenceMakeFunc) {
+    if (this.$engine.htmlWhiteListAppend) {
+      /**
+       * @property
+       * @type {false | RegExp}
+       */
+      this.htmlWhiteListAppend = new RegExp(`^(${this.$engine.htmlWhiteListAppend})( |$|/)`, 'i');
+      /**
+       * @property
+       * @type {string[]}
+       */
+      this.htmlWhiteList = this.$engine.htmlWhiteListAppend.split('|');
+    } else {
+      this.htmlWhiteListAppend = false;
+      this.htmlWhiteList = [];
+    }
+
+    let $str = str;
+    $str = convertHTMLNumberToName($str);
+    $str = escapeHTMLEntitiesWithoutSemicolon($str);
+    $str = $str.replace(/<[/]?([^<]*?)>/g, (whole, m1) => {
+      // 匹配到非白名单且非AutoLink语法的尖括号会被转义
+      // 如果是HTML注释，放行
+      if (!whiteList.test(m1) && !this.isAutoLinkTag(whole) && !this.isHtmlComment(whole)) {
+        if (this.htmlWhiteListAppend === false || !this.htmlWhiteListAppend.test(m1)) {
+          return whole.replace(/</g, '&#60;').replace(/>/g, '&#62;');
+        }
+      }
+      let wholeStr = whole;
+      // 识别<a>和<img>标签的href和src属性，并触发urlProcessor回调
+      m1.replace(/^a .*? href="([^"]+)"/, (all, href) => {
+        const processedURL = this.$engine.urlProcessor(href, 'link');
+        wholeStr = wholeStr.replace(/ href="[^"]+"/, ` href="${processedURL}"`);
+      });
+      m1.replace(/^a href="([^"]+)"/, (all, href) => {
+        const processedURL = this.$engine.urlProcessor(href, 'link');
+        wholeStr = wholeStr.replace(/ href="[^"]+"/, ` href="${processedURL}"`);
+      });
+      m1.replace(/^img .*? src="([^"]+)"/, (all, src) => {
+        const processedURL = this.$engine.urlProcessor(src, 'image');
+        wholeStr = wholeStr.replace(/ src="[^"]+"/, ` src="${processedURL}"`);
+      });
+      m1.replace(/^img src="([^"]+)"/, (all, src) => {
+        const processedURL = this.$engine.urlProcessor(src, 'image');
+        wholeStr = wholeStr.replace(/ src="[^"]+"/, ` src="${processedURL}"`);
+      });
+
+      // 到达此分支的包含被尖括号包裹的AutoLink语法以及在白名单内的HTML标签
+      // 没有被AutoLink解析并渲染的标签会被DOMPurify过滤掉，正常情况下不会出现遗漏
+      // 临时替换完整的HTML标签首尾为$#60;和$#62;，供下一步剔除损坏的HTML标签
+      return wholeStr.replace(/</g, '$#60;').replace(/>/g, '$#62;');
+    });
+    // 替换所有形如「<abcd」和「</abcd」的左尖括号
+    $str = $str.replace(/<(?=\/?(\w|\n|$))/g, '&#60;');
+    // 还原被替换的尖括号
+    $str = $str.replace(/\$#60;/g, '<').replace(/\$#62;/g, '>');
+    // 过滤HTML标签的style属性
+    if (this.filterStyle) {
+      $str = $str.replace(/<([^/][^>]+?) style="[^>\n]+?"([^>\n]*)>/gi, '<$1$2>');
+      $str = $str.replace(/<([^/][^>]+?) style='[^>\n]+?'([^>\n]*)>/gi, '<$1$2>');
+    }
+    return $str;
+  }
+
+  // beforeMakeHtml(str) {
+  //     return str;
+  // }
+
+  makeHtml(str, sentenceMakeFunc) {
+    return str;
+  }
+
+  afterMakeHtml(str) {
+    let $str = str;
+    const config = {
+      ALLOW_UNKNOWN_PROTOCOLS: true,
+      ADD_ATTR: ['target'],
+    };
+    if (this.htmlWhiteListAppend !== false) {
+      config.ADD_TAGS = this.htmlWhiteList;
+      if (this.htmlWhiteListAppend.test('style') || this.htmlWhiteListAppend.test('ALL')) {
+        $str = $str.replace(/<style(>| [^>]*>).*?<\/style>/gi, (match) => {
+          return match.replace(/<br>/gi, '');
+        });
+      }
+      if (this.htmlWhiteListAppend.test('iframe') || this.htmlWhiteListAppend.test('ALL')) {
+        config.ADD_ATTR = config.ADD_ATTR.concat([
+          'align',
+          'frameborder',
+          'height',
+          'longdesc',
+          'marginheight',
+          'marginwidth',
+          'name',
+          'sandbox',
+          'scrolling',
+          'seamless',
+          'src',
+          'srcdoc',
+          'width',
+        ]);
+        config.SANITIZE_DOM = false;
+        $str = $str.replace(/<iframe(>| [^>]*>).*?<\/iframe>/gi, (match) => {
+          return match.replace(/<br>/gi, '').replace(/\n/g, '');
+        });
+      }
+      if (this.htmlWhiteListAppend.test('script') || this.htmlWhiteListAppend.test('ALL')) {
+        // 如果允许script或者输入了ALL，则不做任何过滤了
+        $str = $str.replace(/<script(>| [^>]*>).*?<\/script>/gi, (match) => {
+          return match.replace(/<br>/gi, '');
+        });
+        return $str;
+      }
+    }
+    // node 环境下不输出sign和lines
+    if (!isBrowser()) {
+      config.FORBID_ATTR = ['data-sign', 'data-lines'];
+    }
+    return sanitizer.sanitize($str, config);
+  }
+}

package/src/core/hooks/Image.js

@@ -0,0 +1,174 @@
+/**
+ * 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 SyntaxBase from '@/core/SyntaxBase';
+import { escapeHTMLSpecialCharOnce as $e, encodeURIOnce } from '@/utils/sanitize';
+import imgAltHelper from '@/utils/image';
+import { compileRegExp, isLookbehindSupported, NOT_ALL_WHITE_SPACES_INLINE } from '@/utils/regexp';
+import { replaceLookbehind } from '@/utils/lookbehind-replace';
+import UrlCache from '@/UrlCache';
+
+export default class Image extends SyntaxBase {
+  static HOOK_NAME = 'image';
+
+  constructor({ config, globalConfig }) {
+    super(null);
+    this.config = config;
+    // TODO: URL Validator
+    this.extendMedia = { tag: ['video', 'audio'] };
+    this.RULE = this.rule(this.extendMedia);
+  }
+
+  replaceToHtml(type, match, leadingChar, alt, link, title, poster) {
+    const refType = typeof link === 'undefined' ? 'ref' : 'url';
+    let attrs = '';
+    if (refType === 'ref') {
+      // TODO: 全局引用
+      return match;
+    }
+
+    if (refType === 'url') {
+      const extent = imgAltHelper.processExtendAttributesInAlt(alt);
+      let { extendStyles: style, extendClasses: classes } = imgAltHelper.processExtendStyleInAlt(alt);
+      if (style) {
+        style = ` style="${style}" `;
+      }
+      if (classes) {
+        classes = ` class="${classes}" `;
+      }
+      attrs = title && title.trim() !== '' ? ` title="${$e(title)}"` : '';
+      if (poster) {
+        attrs += ` poster="${encodeURIOnce(poster)}"`;
+      }
+
+      const processedURL = this.$engine.urlProcessor(link, type);
+      const defaultWrapper = `<${type} src="${UrlCache.set(
+        encodeURIOnce(processedURL),
+      )}"${attrs} ${extent} ${style} ${classes} controls="controls">${$e(alt || '')}</${type}>`;
+      return `${leadingChar}${
+        this.config.videoWrapper ? this.config.videoWrapper(link, type, defaultWrapper) : defaultWrapper
+      }`;
+    }
+    // should never happen
+    return match;
+  }
+
+  toHtml(match, leadingChar, alt, link, title, ref, extendAttrs) {
+    // console.log(match, alt, link, ref, title);
+    const refType = typeof link === 'undefined' ? 'ref' : 'url';
+    let attrs = '';
+    if (refType === 'ref') {
+      // 全局引用，理应在CommentReference中被替换，没有被替换说明没有定义引用项
+      return match;
+    }
+    if (refType === 'url') {
+      const extent = imgAltHelper.processExtendAttributesInAlt(alt);
+      let { extendStyles: style, extendClasses: classes } = imgAltHelper.processExtendStyleInAlt(alt);
+      if (style) {
+        style = ` style="${style}" `;
+      }
+      if (classes) {
+        classes = ` class="${classes}" `;
+      }
+      attrs = title && title.trim() !== '' ? ` title="${$e(title.replace(/["']/g, ''))}"` : '';
+      let srcProp = 'src';
+      let srcValue;
+      const cherryOptions = this.$engine.$cherry.options;
+      if (cherryOptions.callback && cherryOptions.callback.beforeImageMounted) {
+        const imgAttrs = cherryOptions.callback.beforeImageMounted(srcProp, link);
+        srcProp = imgAttrs.srcProp || srcProp;
+        srcValue = imgAttrs.src || link;
+      }
+      const extendAttrStr = extendAttrs
+        ? extendAttrs
+            .replace(/[{}]/g, '')
+            .replace(/([^=\s]+)=([^\s]+)/g, '$1="$2"')
+            .replace(/&/g, '&amp;') // 对&多做一次转义，cherry现有的机制会自动把&amp;转成&，只有多做一次转义才能抵消cherry的机制
+        : '';
+      return `${leadingChar}<img ${srcProp}="${UrlCache.set(
+        encodeURIOnce(this.$engine.urlProcessor(srcValue, 'image')),
+      )}" ${extent} ${style} ${classes} alt="${$e(alt || '')}"${attrs} ${extendAttrStr}/>`;
+    }
+    // should never happen
+    return match;
+  }
+
+  toMediaHtml(match, leadingChar, mediaType, alt, link, title, ref, posterWrap, poster, ...args) {
+    if (!/(video|audio)/.test(mediaType)) {
+      return match;
+    }
+    return this.replaceToHtml(mediaType, match, leadingChar, alt, link, title, poster);
+  }
+
+  makeHtml(str) {
+    let $str = str;
+    if (this.test($str)) {
+      if (isLookbehindSupported()) {
+        $str = $str.replace(this.RULE.reg, this.toHtml.bind(this));
+      } else {
+        $str = replaceLookbehind($str, this.RULE.reg, this.toHtml.bind(this), true, 1);
+      }
+    }
+    if (this.testMedia($str)) {
+      if (isLookbehindSupported()) {
+        $str = $str.replace(this.RULE.regExtend, this.toMediaHtml.bind(this));
+      } else {
+        $str = replaceLookbehind($str, this.RULE.regExtend, this.toMediaHtml.bind(this), true, 1);
+      }
+    }
+    return $str;
+  }
+
+  // afterMakeHtml(str) {
+  //   return UrlCache.restoreAll(str);
+  // }
+
+  testMedia(str) {
+    return this.RULE.regExtend && this.RULE.regExtend.test(str);
+  }
+
+  rule(extendMedia) {
+    const ret = {
+      // lookbehind启用分组是为了和不兼容lookbehind的场景共用一个回调
+      begin: isLookbehindSupported() ? '((?<!\\\\))!' : '(^|[^\\\\])!',
+      content: [
+        '\\[([^\\n]*?)\\]', // ?<alt>
+        '[ \\t]*', // any spaces
+        `${
+          '(?:' +
+          '\\(' +
+          '((?:[^\\s()]*\\([^\\s()]*\\)[^\\s()]*)+|(?:[^"][^\\s]+?))' + // ?<link> url
+          '(?:[ \\t]((?:".*?")|(?:\'.*?\')))?' + // ?<title> optional
+          '\\)' +
+          '|' + // or
+          '\\[('
+        }${NOT_ALL_WHITE_SPACES_INLINE})\\]` + // ?<ref> global ref
+          ')',
+      ].join(''),
+      end: '({[^{}]+?})?', // extend attrs e.g. {width=50 height=60}
+    };
+    if (extendMedia) {
+      const extend = { ...ret };
+      // TODO: 支持Lookbehind
+      extend.begin = isLookbehindSupported()
+        ? `((?<!\\\\))!(${extendMedia.tag.join('|')})`
+        : `(^|[^\\\\])!(${extendMedia.tag.join('|')})`;
+      extend.end = '({poster=(.*)})?';
+      ret.regExtend = compileRegExp(extend, 'g');
+    }
+    ret.reg = compileRegExp(ret, 'g');
+    return ret;
+  }
+}

package/src/core/hooks/InlineCode.js

@@ -0,0 +1,48 @@
+/**
+ * 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 ParagraphBase from '@/core/ParagraphBase';
+import CodeBlock from './CodeBlock';
+import { compileRegExp } from '@/utils/regexp';
+
+export default class InlineCode extends ParagraphBase {
+  static HOOK_NAME = 'inlineCode';
+
+  // constructor() {
+  //     super();
+  // }
+
+  makeHtml(str) {
+    return str;
+  }
+
+  afterMakeHtml(str) {
+    let $str = str;
+    if (Object.keys(CodeBlock.inlineCodeCache).length > 0) {
+      $str = $str.replace(/~~CODE([0-9a-zA-Z]+)\$/g, (match, sign) => CodeBlock.inlineCodeCache[sign]);
+    }
+    return $str;
+  }
+
+  $cleanCache() {
+    CodeBlock.inlineCodeCache = {};
+  }
+
+  rule() {
+    const ret = { begin: '(`+)[ ]*', end: '[ ]*\\1', content: '(.+?(?:\\n.+?)*?)' };
+    ret.reg = compileRegExp(ret, 'g');
+    return ret;
+  }
+}

package/src/core/hooks/InlineMath.js

@@ -0,0 +1,107 @@
+/**
+ * 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 ParagraphBase from '@/core/ParagraphBase';
+import { escapeFormulaPunctuations, LoadMathModule } from '@/utils/mathjax';
+import { getHTML } from '@/utils/dom';
+import { isBrowser } from '@/utils/env';
+import { getTableRule, isLookbehindSupported } from '@/utils/regexp';
+import { replaceLookbehind } from '@/utils/lookbehind-replace';
+
+/**
+ * 行内公式的语法
+ * 虽然叫做行内公式，Cherry依然将其视为“段落级语法”，因为其具备排他性并且需要优先渲染
+ */
+export default class InlineMath extends ParagraphBase {
+  static HOOK_NAME = 'inlineMath';
+  /** @type {'katex' | 'MathJax' | 'node'} */
+  engine = 'MathJax'; // 渲染引擎，默认为MathJax，MathJax支持2.x与3.x版本
+  katex;
+  MathJax;
+
+  constructor({ config }) {
+    super({ needCache: true });
+    // 非浏览器环境下配置为 node
+    this.engine = isBrowser() ? config.engine ?? 'MathJax' : 'node';
+  }
+
+  toHtml(wholeMatch, leadingChar, m1) {
+    if (!m1) {
+      return wholeMatch;
+    }
+    LoadMathModule.bind(this)('engine');
+    const linesArr = m1.match(/\n/g);
+    const lines = linesArr ? linesArr.length + 2 : 2;
+    const sign = this.$engine.hash(wholeMatch);
+    // 既无MathJax又无katex时，原样输出
+    let result = '';
+    if (this.engine === 'katex' && this.katex?.renderToString) {
+      // katex渲染
+      const html = this.katex.renderToString(m1, {
+        throwOnError: false,
+      });
+      result = `${leadingChar}<span class="Cherry-InlineMath" data-type="mathBlock" data-lines="${lines}">${html}</span>`;
+    } else if (this.MathJax?.tex2svg) {
+      // MathJax渲染
+      const svg = getHTML(this.MathJax.tex2svg(m1, { em: 12, ex: 6, display: false }), true);
+      result = `${leadingChar}<span class="Cherry-InlineMath" data-type="mathBlock" data-lines="${lines}">${svg}</span>`;
+    } else {
+      result = `${leadingChar}<span class="Cherry-InlineMath" data-type="mathBlock"
+        data-lines="${lines}">$${escapeFormulaPunctuations(m1)}$</span>`;
+    }
+
+    return this.pushCache(result, ParagraphBase.IN_PARAGRAPH_CACHE_KEY_PREFIX + sign);
+  }
+
+  beforeMakeHtml(str) {
+    let $str = str;
+    // 格里处理行内公式，让一个td里的行内公式语法生效，让跨td的行内公式语法失效
+    $str = $str.replace(getTableRule(true), (whole, ...args) => {
+      return whole
+        .split('|')
+        .map((oneTd) => {
+          return this.makeInlineMath(oneTd);
+        })
+        .join('|')
+        .replace(/\\~D/g, '~D') // 出现反斜杠的情况（如/$e=m^2$）会导致多一个反斜杠，这里替换掉
+        .replace(/~D/g, '\\~D');
+    });
+    return this.makeInlineMath($str);
+  }
+
+  makeInlineMath(str) {
+    if (!this.test(str)) {
+      return str;
+    }
+    if (isLookbehindSupported()) {
+      return str.replace(this.RULE.reg, this.toHtml.bind(this));
+    }
+    return replaceLookbehind(str, this.RULE.reg, this.toHtml.bind(this), true, 1);
+  }
+
+  makeHtml(str) {
+    return str;
+  }
+
+  rule() {
+    const ret = {
+      begin: isLookbehindSupported() ? '((?<!\\\\))~D\\n?' : '(^|[^\\\\])~D\\n?',
+      content: '(.*?)\\n?',
+      end: '~D',
+    };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'g');
+    return ret;
+  }
+}