cherry-muse 1.0.1

package/src/core/hooks/AutoLink.js

@@ -0,0 +1,251 @@
+/**
+ * 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.urlProcessor = globalConfig.urlProcessor;
+    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.urlProcessor(url, 'autolink');
+    const safeUri = encodeURIOnce(processedURL);
+    const displayUri = $e(linkText);
+    let additionalAttrs = ' ';
+    const isExternalLink = safeUri.startsWith('http') && !safeUri.startsWith(window.location.origin);
+    // 处理target属性
+    if (this.target) {
+      // 如果已配置target，优先使用配置的target
+      additionalAttrs += ` ${this.target}`;
+    } else if (isExternalLink) {
+      // 外部链接且未配置target时，默认使用_blank
+      additionalAttrs += ' target="_blank"';
+    }
+
+    // 处理rel属性
+    if (this.rel) {
+      additionalAttrs += ` ${this.rel}`;
+    } else if (isExternalLink) {
+      // 外部链接时，添加noopener noreferrer安全属性
+      additionalAttrs += ' rel="noopener noreferrer"';
+    }
+
+    return `<a href="${AutoLink.escapePreservedSymbol(safeUri)}" title="${AutoLink.escapePreservedSymbol(
+      displayUri,
+    )}" ${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/Badge.js

@@ -0,0 +1,100 @@
+/**
+ * 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 '../SyntaxBase';
+export default class Badge extends SyntaxBase {
+  static HOOK_NAME = 'badge';
+
+  // 预定义颜色类
+  static predefinedColors = new Set(['important', 'info', 'note', 'tip', 'warning', 'danger']);
+
+  toHtml(whole, m1, m2, m3) {
+    // 处理颜色
+    let clazz = 'cherry-badge ';
+    let style = '';
+    let m4 = m3;
+    // 检查是否是预定义颜色
+    if (m2 && Badge.predefinedColors.has(m2)) {
+      clazz += `cherry-badge-${m2} `;
+    } else if (m2 && /^#\w{6}$/.test(m2)) {
+      // 检查是否是自定义颜色
+      style += `background-color: ${m2}`;
+    } else if (m2) {
+      // 处理位置作为第二个参数的情况
+      clazz += 'cherry-badge-info ';
+      m4 = m2;
+    } else {
+      clazz += 'cherry-badge-info ';
+    }
+
+    // 处理位置
+    const position = ['top', 'bottom', 'center'].includes(m4) ? m4 : 'center';
+    const positionClass = `cherry-badge-${position}`;
+    clazz += positionClass;
+
+    return `<span style="${style}" class="${clazz}">${m1}</span>`;
+  }
+
+  makeHtml(str) {
+    if (!this.test(str)) {
+      return str;
+    }
+
+    return str.replace(this.RULE.reg, this.toHtml.bind(this));
+  }
+
+  rule() {
+    // 正则表达式匹配 [[文本]], [[文本:颜色或位置]], [[文本:颜色,位置]]
+    return {
+      begin: '',
+      content: '',
+      end: '',
+      reg: new RegExp('\\[\\[([^:\\]]+):?([^,\\]]*)?,?([^\\]]*)\\]\\]', 'g'),
+    };
+  }
+  overlayMode() {
+    return {
+      name: 'badge',
+      inBadge: false,
+      token(stream, state) {
+        // 检查行的开头是否有 ':::'
+        if (stream.match(/\[\[(.*)]]/)) {
+          this.inBadge = true;
+          stream.backUp(stream.current().length); // 回退以单独处理
+        }
+        if (this.inBadge) {
+          if (stream.match('[[')) {
+            return 'badge-container';
+          }
+          if (stream.match(':') || stream.match(',')) {
+            return 'badge-color';
+          }
+
+          if (stream.match(/important|info|note|tip|warning|danger|top|bottom|center/) || stream.match(/#[\w+]{6}/)) {
+            return 'badge-text';
+          }
+          if (stream.match(']]')) {
+            this.inBadge = false;
+            return 'badge-container';
+          }
+        }
+
+        stream.next(); // 前进到下一个字符
+        return null; // 默认返回 null
+      },
+    };
+  }
+}

package/src/core/hooks/Blockquote.js

@@ -0,0 +1,113 @@
+/**
+ * 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';
+
+function computeLeadingSpaces(leadingChars) {
+  const indentRegex = /^(\t|[ ]{1,4})/;
+  let leadingCharsTemp = leadingChars;
+  let indent = 0;
+  while (indentRegex.test(leadingCharsTemp)) {
+    leadingCharsTemp = leadingCharsTemp.replace(/^(\t|[ ]{1,4})/g, '');
+    indent += 1;
+  }
+  return indent;
+}
+
+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 { sign: contentSign, html: parsedHtml } = sentenceMakeFunc(content);
+      const sign = this.signWithCache(parsedHtml) || contentSign;
+      const lineCount = this.getLineCount(match, lines); // 段落所占行数
+      const listRegex =
+        /^(([ \t]{0,3}([*+-]|\d+[.]|[a-z]\.|[I一二三四五六七八九十]+\.)[ \t]+)([^\r]+?)($|\n{2,}(?=\S)(?![ \t]*(?:[*+-]|\d+[.]|[a-z]\.|[I一二三四五六七八九十]+\.)[ \t]+)))/;
+      let lastIndent = computeLeadingSpaces(lines);
+      // 逐行处理
+      const contentLines = parsedHtml.split('\n');
+      const replaceReg = /^[>\s]+/;
+      const countReg = />/g;
+      let lastLevel = 1;
+      let level = 0;
+      let handledHtml = `<blockquote data-sign="${sign}_${lineCount}" data-lines="${lineCount}">`;
+      for (let i = 0; contentLines[i]; i++) {
+        if (i !== 0) {
+          const leadIndent = computeLeadingSpaces(contentLines[i]);
+          if (leadIndent <= lastIndent && listRegex.test(contentLines[i])) {
+            break;
+          }
+          lastIndent = leadIndent;
+        }
+        /* eslint-disable no-loop-func */
+        const $line = contentLines[i].replace(replaceReg, (leadSymbol) => {
+          const leadSymbols = leadSymbol.match(countReg);
+          // 本行引用嵌套层级比上层要多
+          if (leadSymbols && leadSymbols.length > lastLevel) {
+            level = leadSymbols.length;
+          } else {
+            // 否则保持当前缩进层级
+            level = lastLevel;
+          }
+          return '';
+        });
+        // 同层级，且不为首行时补充一个换行
+        if (lastLevel === level && i !== 0) {
+          handledHtml += '<br>';
+        }
+        // 补充缩进
+        if (lastLevel < level) {
+          handledHtml += '<blockquote>'.repeat(level - lastLevel);
+          lastLevel = level;
+        }
+        // 插入当前行内容
+        handledHtml += $line;
+      }
+      // 标签闭合
+      handledHtml += '</blockquote>'.repeat(lastLevel);
+      return this.getCacheWithSpace(this.pushCache(handledHtml, sign, lineCount), match);
+    });
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    if (!this.test(str)) {
+      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;
+  }
+}