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

package/src/core/hooks/AutoLink.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 SyntaxBase from '@/core/SyntaxBase';
+import { escapeHTMLSpecialCharOnce as $e, encodeURIOnce } from '@/utils/sanitize';
+import { compileRegExp, EMAIL, EMAIL_INLINE, URL_INLINE_NO_SLASH, URL, URL_NO_SLASH, URL_INLINE } from '@/utils/regexp';
+
+export default class AutoLink extends SyntaxBase {
+  static HOOK_NAME = 'autoLink';
+
+  static escapePreservedSymbol = (text) => {
+    // _ prevent conflict with emphasis
+    // _ => 0x5f
+    // * => 0x2a
+    return text.replace(/_/g, '_').replace(/\*/g, '*');
+  };
+
+  constructor({ config, globalConfig }) {
+    super({ config });
+    this.enableShortLink = !!config.enableShortLink;
+    this.shortLinkLength = config.shortLinkLength;
+    // eslint-disable-next-line no-nested-ternary
+    this.target = config.target ? `target="${config.target}"` : !!config.openNewPage ? 'target="_blank"' : '';
+    this.rel = config.rel ? `rel="${config.rel}"` : '';
+  }
+
+  isLinkInHtmlAttribute(str, index, linkLength) {
+    const xmlTagRegex = new RegExp(
+      [
+        '<', // tag start
+        '([a-zA-Z][a-zA-Z0-9-]*)', // tagName
+        '(', // attrs start
+        [
+          '\\s+[a-zA-Z_:][a-zA-Z0-9_.:-]*', // attr name
+          '(', // attr value start
+          [
+            '\\s*=\\s*',
+            '(',
+            [
+              '([^\\s"\'=<>`]+)', // unquoted value
+              "('[^']*')", // single-quoted value
+              '("[^"]*")', // double-quoted value
+            ].join('|'), // either is ok
+            ')',
+          ].join(''),
+          ')?', // attr value end
+        ].join(''),
+        ')*', // attrs end
+        '\\s*[/]?>', // tag end
+      ].join(''),
+      'g',
+    );
+    let match;
+    while ((match = xmlTagRegex.exec(str)) !== null) {
+      // 搜索范围超过了字符串匹配到的位置
+      if (match.index > index + linkLength) {
+        break;
+      }
+      // 正好在范围内，说明是HTML的属性，取等号是因为AutoLink的正则可能会匹配到标签的结束符号，如<img src="http://www.google.com">
+      if (match.index < index && match.index + match[0].length >= index + linkLength) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * 判断链接是否被包裹在a标签内部，如果被包裹，则不识别为自动链接
+   * @param {string} str
+   * @param {number} index
+   * @param {number} linkLength
+   */
+  isLinkInATag(str, index, linkLength) {
+    const aTagRegex = /<a.*>[^<]*<\/a>/g;
+    let match;
+    while ((match = aTagRegex.exec(str)) !== null) {
+      // 搜索范围超过了字符串匹配到的位置
+      if (match.index > index + linkLength) {
+        break;
+      }
+      // 正好在范围内，说明是HTML的属性，取等号是因为AutoLink的正则可能会匹配到标签的结束符号
+      // 如<a href="http://www.google.com">http://www.google.com</a>
+      if (match.index < index && match.index + match[0].length >= index + linkLength) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    if (!(this.test(str) && (EMAIL_INLINE.test(str) || URL_INLINE_NO_SLASH.test(str)))) {
+      return str;
+    }
+    return str.replace(this.RULE.reg, (match, left, protocol, address, right, index, str) => {
+      // 数字实体字符系临时处理方法，详情参见HTMLBlock注释
+      // maybe a html attr, skip it
+      if (
+        // ((left !== '<' || left !== '&#60;') && (right !== '>' || right !== '&#62;')) ||
+        this.isLinkInHtmlAttribute(str, index, protocol.length + address.length) ||
+        this.isLinkInATag(str, index, protocol.length + address.length)
+      ) {
+        return match;
+      }
+      const $protocol = protocol.toLowerCase();
+      let prefix = '';
+      let suffix = '';
+      let isWrappedByBracket = true;
+      // not a pair
+      if (!((left === '<' || left === '&#60;') && (right === '>' || right === '&#62;'))) {
+        prefix = left;
+        suffix = right;
+        isWrappedByBracket = false;
+      }
+      // not a valid address
+      // 不被尖括号包裹，不带协议头，且不以www.开头的不识别
+      if (address.trim() === '' || (!isWrappedByBracket && $protocol === '' && !/www\./.test(address))) {
+        return match;
+      }
+      switch ($protocol) {
+        case 'javascript:':
+          return match;
+        case 'mailto:': // email
+          if (EMAIL.test(address)) {
+            return `${prefix}<a href="${encodeURIOnce(`${$protocol}${address}`)}" ${this.target} ${this.rel}>${$e(
+              address,
+            )}</a>${suffix}`;
+          }
+          return match;
+        case '': // 协议为空
+          // 不被<>包裹或单边无效包裹，prefix === suffix 时都为空串
+          if (prefix === suffix || !isWrappedByBracket) {
+            // mailto
+            if (EMAIL.test(address)) {
+              return `${prefix}<a href="mailto:${encodeURIOnce(address)}" ${this.target} ${this.rel}>${$e(
+                address,
+              )}</a>${suffix}`;
+            }
+            // 不识别无协议头的URL，且开头不应该含有斜杠
+            if (URL_NO_SLASH.test(address)) {
+              return `${prefix}${this.renderLink(`//${address}`, address)}${suffix}`;
+            }
+            // 其他的属于非法情况
+            return match;
+          }
+          // 被<>包裹
+          if (isWrappedByBracket) {
+            // mailto
+            if (EMAIL.test(address)) {
+              return `<a href="mailto:${encodeURIOnce(address)}" ${this.target} ${this.rel}>${$e(address)}</a>`;
+            }
+            // 可识别任意协议的URL，或不以斜杠开头的URL
+            if (URL.test(address) || URL_NO_SLASH.test(address)) {
+              return this.renderLink(address);
+            }
+            // 其他非法
+            return match;
+          }
+        default:
+          // 协议头不为空时的非法URL
+          if (!URL.test(address)) {
+            return match;
+          }
+          // TODO: Url Validator
+          return `${prefix}${this.renderLink(`${$protocol}${address}`)}${suffix}`;
+      }
+      // this should never happen
+      return match;
+    });
+  }
+
+  rule() {
+    // (?<protocol>\\w+:)\\/\\/
+    const ret = {
+      // ?<left>
+      begin: '(<?)',
+      content: [
+        // ?<protocol>
+        '((?:[a-z][a-z0-9+.-]{1,31}:)?)', // protocol is any seq of 2-32 chars beginning with letter
+        // '(?<slash>(?:\\/{2})?)',
+        // ?<address>
+        // '([^\\s\\x00-\\x1f"<>]+)',
+        `((?:${URL_INLINE.source})|(?:${EMAIL_INLINE.source}))`,
+        // [
+        //     `(?<url>${ URL_INLINE.source })`,
+        //     `(?<email>${ EMAIL_INLINE.source })`, // email
+        // ].join('|'),
+        // ')'
+      ].join(''),
+      // ?<right>
+      end: '(>?)', // TODO: extend attrs e.g. {target=_blank}
+    };
+    ret.reg = compileRegExp(ret, 'ig');
+    return ret;
+  }
+
+  /**
+   * 渲染链接为a标签，返回html
+   * @param {string} url src链接
+   * @param {string} [text] 展示的链接文本，不传默认使用url
+   * @returns 渲染的a标签
+   */
+  renderLink(url, text) {
+    let linkText = text;
+    if (typeof linkText !== 'string') {
+      if (this.enableShortLink) {
+        const Url = url.replace(/^https?:\/\//i, '');
+        linkText = `${Url.substring(0, this.shortLinkLength)}${Url.length > this.shortLinkLength ? '...' : ''}`;
+      } else {
+        linkText = url;
+      }
+    }
+    const processedURL = this.$engine.urlProcessor(url, 'autolink');
+    const safeUri = encodeURIOnce(processedURL);
+    const displayUri = $e(linkText);
+    const additionalAttrs = [this.target, this.rel].filter(Boolean).join(' ');
+    return `<a href="${AutoLink.escapePreservedSymbol(safeUri)}" title="${AutoLink.escapePreservedSymbol(
+      $e(url),
+    )}" ${additionalAttrs}>${AutoLink.escapePreservedSymbol(displayUri)}</a>`;
+  }
+}

package/src/core/hooks/BackgroundColor.js

@@ -0,0 +1,46 @@
+/**
+ * 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 { isLookbehindSupported } from '@/utils/regexp';
+import { replaceLookbehind } from '@/utils/lookbehind-replace';
+
+export default class BackgroundColor extends SyntaxBase {
+  static HOOK_NAME = 'bgColor';
+  // constructor() {
+  //     super();
+  // }
+
+  toHtml(whole, leadingChar, m1, m2) {
+    return `${leadingChar}<span style="background-color:${m1}">${m2}</span>`;
+  }
+
+  makeHtml(str) {
+    if (isLookbehindSupported()) {
+      return str.replace(this.RULE.reg, this.toHtml);
+    }
+    return replaceLookbehind(str, this.RULE.reg, this.toHtml, true, 1);
+  }
+
+  rule() {
+    const ret = {
+      begin: isLookbehindSupported() ? '((?<!\\\\))!!!' : '(^|[^\\\\])!!!',
+      end: '!!!',
+      content: '(#[0-9a-zA-Z]{3,6}|[a-z]{3,10})[\\s]([\\w\\W]+?)',
+    };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'g');
+    return ret;
+  }
+}

package/src/core/hooks/Blockquote.js

@@ -0,0 +1,70 @@
+/**
+ * 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 { compileRegExp } from '@/utils/regexp';
+
+export default class Blockquote extends ParagraphBase {
+  static HOOK_NAME = 'blockquote';
+
+  constructor() {
+    super({ needCache: true });
+    // TODO: String.prototype.repeat polyfill
+  }
+
+  handleMatch(str, sentenceMakeFunc) {
+    return str.replace(this.RULE.reg, (match, lines, content) => {
+      const lineCount = this.getLineCount(match, lines); // 段落所占行数
+      const sign = this.$engine.hash(match);
+      const testHasCache = this.testHasCache(sign);
+      if (testHasCache !== false) {
+        return this.getCacheWithSpace(testHasCache, match);
+      }
+      let handledHtml = `<blockquote data-sign="${sign}_${lineCount}" data-lines="${lineCount}">`;
+      const htmlDomTest = content.split(/\n</);
+      // 如果引用内容后面有html dom结构，就认为这不是引用内容
+      let after = '';
+      if (htmlDomTest.length > 1) {
+        after = `\n<${htmlDomTest.slice(1).join('\n<')}`;
+      }
+      const $content = htmlDomTest[0].replace(/^([ \t]*>)/gm, '');
+      handledHtml += this.$engine.makeHtmlForBlockquote($content);
+      // 标签闭合
+      handledHtml += '</blockquote>';
+      return `${this.getCacheWithSpace(this.pushCache(handledHtml, sign, lineCount), match)}${after}`;
+    });
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    // return str;
+    return this.handleMatch(str, sentenceMakeFunc);
+  }
+
+  rule() {
+    const ret = {
+      begin: '(?:^|\\n)(\\s*)',
+      content: [
+        '(',
+        '>(?:.+?\\n(?![*+-]|\\d+[.]|[a-z]\\.))(?:>*.+?\\n(?![*+-]|\\d+[.]|[a-z]\\.))*(?:>*.+?)', // multiline
+        '|', // or
+        '>(?:.+?)', // single line
+        ')',
+      ].join(''),
+      end: '(?=(\\n)|$)',
+    };
+    ret.reg = compileRegExp(ret, 'g');
+    return ret;
+  }
+}

package/src/core/hooks/Br.js

@@ -0,0 +1,85 @@
+/**
+ * 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 { isBrowser } from '@/utils/env';
+import { compileRegExp } from '@/utils/regexp';
+import { getIsClassicBrFromLocal, testKeyInLocal } from '@/utils/config';
+
+export default class Br extends ParagraphBase {
+  static HOOK_NAME = 'br';
+
+  constructor(options) {
+    super({ needCache: true });
+    this.classicBr = testKeyInLocal('classicBr') ? getIsClassicBrFromLocal() : options.globalConfig.classicBr;
+  }
+
+  beforeMakeHtml(str) {
+    if (!this.test(str)) {
+      return str;
+    }
+    return str.replace(this.RULE.reg, (match, lines, index) => {
+      // 不处理全文开头的连续空行
+      if (index === 0) {
+        return match;
+      }
+      const lineCount = lines.match(/\n/g)?.length ?? 0;
+      const sign = `br${lineCount}`;
+      let html = '';
+      if (isBrowser()) {
+        // 为了同步滚动
+        if (this.classicBr) {
+          html = `<span data-sign="${sign}" data-type="br" data-lines="${lineCount}"></span>`;
+        } else {
+          html = `<p data-sign="${sign}" data-type="br" data-lines="${lineCount}">&nbsp;</p>`;
+        }
+      } else {
+        // node环境下直接输出br
+        html = this.classicBr ? '' : '<br/>';
+      }
+      const placeHolder = this.pushCache(html, sign, lineCount);
+      // 结尾只补充一个\n是因为Br将下一个段落中间的所有换行都替换掉了，而两个换行符会导致下一个区块行数计算错误
+      return `\n\n${placeHolder}\n`;
+    });
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    return str;
+  }
+
+  // afterMakeHtml(str) {
+  //     return str.replace(/~~B/g, (match) => {
+  //         let lines = that.brCache.shift() - 1;
+  //         return '<p data-sign="br' + lines + '" data-type="br" data-lines="' + lines + '">&nbsp;</p>';
+  //     });
+  // }
+  // default: this.restoreCache();
+
+  rule() {
+    /**
+     * 样例：
+     * block1\n
+     * \n
+     * \n
+     * block2
+     *
+     * 匹配逻辑：
+     * 开头必为一个换行符，所以后续只需要匹配至少两个空行即可生成一个换行，行数即content匹配到的换行符个数
+     */
+    const ret = { begin: '(?:\\n)', end: '', content: '((?:\\h*\\n){2,})' };
+    ret.reg = compileRegExp(ret, 'g', true);
+    return ret;
+  }
+}