cherry-muse 1.0.1

package/src/core/hooks/Emoji.js

@@ -0,0 +1,223 @@
+/**
+ * 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 } from '@/utils/sanitize';
+import { compileRegExp } from '@/utils/regexp';
+import { gfmUnicode } from './Emoji.config';
+
+// ref: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint
+export function convertToUnicode(code) {
+  if (!code) return '';
+  // 分割字符串为两部分
+  const parts = code.split('-').map((part) => parseInt(part, 16));
+
+  // 转换为 Unicode 字符
+  return fromCodePoint(...parts);
+}
+
+export function fuzzySearchKeysWithValues(query, options) {
+  const limit = 50;
+  const combinedValues = [];
+  let reachedLimit = false;
+
+  function addResult(emoji) {
+    combinedValues.push({
+      key: getEmoji(emoji.e, options, true),
+      value: `:${emoji.a[0]}:`,
+    });
+  }
+
+  for (const emojiCategoryKey in gfmUnicode.emojis) {
+    if (reachedLimit) break;
+
+    for (const emoji of gfmUnicode.emojis[emojiCategoryKey]) {
+      if (query === '') {
+        addResult(emoji);
+      } else {
+        if (emoji.a.some((alias) => alias.includes(query)) || emoji.t.some((tag) => tag.includes(query))) {
+          addResult(emoji);
+        }
+      }
+
+      if (combinedValues.length >= limit) {
+        reachedLimit = true;
+        break;
+      }
+    }
+  }
+
+  return combinedValues;
+}
+
+function getEmojiByName(name) {
+  for (const emojiCategoryKey in gfmUnicode.emojis) {
+    const emojiCategory = gfmUnicode.emojis[emojiCategoryKey];
+    const emoji = emojiCategory.find((emoji) => emoji.a.includes(name));
+    if (emoji) {
+      return emoji.e;
+    }
+  }
+  return null;
+}
+
+/**
+ *
+ * @param nameOrUnicode
+ * @param options
+ * @param isUnicode
+ * @returns {string|*|null}
+ */
+export function getEmoji(nameOrUnicode, options, isUnicode = false) {
+  let unicode = nameOrUnicode;
+  if (!isUnicode) {
+    unicode = getEmojiByName(nameOrUnicode);
+    if (unicode === null) {
+      return null;
+    }
+  }
+
+  if (options.useUnicode) {
+    try {
+      return convertToUnicode(unicode);
+    } catch (e) {
+      console.error(e);
+      return null;
+    }
+  } else {
+    const src = options.resourceURL.replace(/\$\{code\}/g, unicode.toLowerCase());
+    return `<img class="emoji" src="${src}" alt="${_e(unicode)}" />`;
+  }
+}
+
+function fromCodePoint(...args) {
+  const codeUnits = [];
+  let codeLen = 0;
+  let result = '';
+  for (let index = 0, len = args.length; index !== len; ++index) {
+    let codePoint = +args[index];
+    // correctly handles all cases including `NaN`, `-Infinity`, `+Infinity`
+    // The surrounding `!(...)` is required to correctly handle `NaN` cases
+    // The (codePoint>>>0) === codePoint clause handles decimals and negatives
+    if (!(codePoint < 0x10ffff && codePoint >>> 0 === codePoint)) {
+      throw new RangeError(`Invalid code point: ${codePoint}`);
+    }
+    if (codePoint <= 0xffff) {
+      // BMP code point
+      codeLen = codeUnits.push(codePoint);
+    } else {
+      // Astral code point; split in surrogate halves
+      // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+      codePoint -= 0x10000;
+      codeLen = codeUnits.push(
+        (codePoint >> 10) + 0xd800, // highSurrogate
+        (codePoint % 0x400) + 0xdc00, // lowSurrogate
+      );
+    }
+    if (codeLen >= 0x3fff) {
+      result += String.fromCharCode.apply(null, codeUnits);
+      codeUnits.length = 0;
+    }
+  }
+  return result + String.fromCharCode.apply(null, codeUnits);
+}
+
+export default class Emoji extends SyntaxBase {
+  static HOOK_NAME = 'emoji';
+
+  constructor({ config } = { config: undefined }) {
+    super({ config });
+    this.options = {
+      useUnicode: true,
+      upperCase: false,
+      customHandled: false,
+      resourceURL: 'https://github.githubassets.com/images/icons/emoji/unicode/${code}.png?v8',
+      emojis: { ...gfmUnicode.emojis },
+    };
+    if (typeof config !== 'object') {
+      return;
+    }
+    const { useUnicode, customResourceURL, customRenderer, upperCase } = config;
+    this.options.useUnicode = typeof useUnicode === 'boolean' ? useUnicode : this.options.useUnicode;
+    this.options.upperCase = typeof useUnicode === 'boolean' ? upperCase : this.options.upperCase;
+    if (useUnicode === false && typeof customResourceURL === 'string') {
+      this.options.resourceURL = customResourceURL;
+    }
+    if (typeof customRenderer === 'function') {
+      this.options.customHandled = true;
+      this.options.customRenderer = customRenderer;
+    }
+    // TODO: URL Validator
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    if (!this.test(str)) {
+      return str;
+    }
+    return str.replace(this.RULE.reg, (match, emojiName) => {
+      // 先走自定义渲染逻辑
+      if (this.options.customHandled && typeof this.options.customRenderer === 'function') {
+        return this.options.customRenderer(emojiName);
+      }
+      const emoji = getEmoji(emojiName, this.options);
+      if (emoji === null) return str;
+      return `<span class="cherry-emoji">${emoji}</span>`;
+    });
+  }
+
+  rule() {
+    // (?<protocol>\\w+:)\\/\\/
+    const ret = {
+      // ?<left>
+      begin: ':',
+      content: '([\\w+_-]+)',
+      // ?<right>
+      end: ':',
+    };
+    ret.reg = compileRegExp(ret, 'g');
+    return ret;
+  }
+  overlayMode() {
+    return {
+      name: 'emoji',
+      inEmoji: false,
+      passLeftKey: false,
+      token(stream, state) {
+        // 检查是否是 emoji，但排除连续的三个冒号
+        if (!this.inEmoji && stream.match(/:[\w+_-]+:/)) {
+          this.inEmoji = true;
+          stream.backUp(stream.current().length);
+        }
+        if (this.inEmoji) {
+          if (stream.match(':')) {
+            if (!this.passLeftKey) {
+              this.passLeftKey = true;
+            } else {
+              this.inEmoji = false;
+              this.passLeftKey = false;
+            }
+            return 'emoji-container';
+          }
+          if (stream.match(/[\w+_-]+:/)) {
+            stream.backUp(1);
+            return 'emoji-text';
+          }
+        }
+        stream.next();
+        return null;
+      },
+    };
+  }
+}

package/src/core/hooks/Emphasis.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 SyntaxBase from '@/core/SyntaxBase';
+import { compileRegExp, ALLOW_WHITESPACE_MULTILINE, UNDERSCORE_EMPHASIS_BOUNDARY } from '@/utils/regexp';
+
+export default class Emphasis extends SyntaxBase {
+  static HOOK_NAME = 'fontEmphasis';
+
+  constructor({ config } = { config: undefined }) {
+    super({ config });
+    if (!config) {
+      return;
+    }
+    this.allowWhitespace = !!config.allowWhitespace;
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    const converAsterisk = function (match, leading, symbol, text) {
+      const tagType = symbol.length % 2 === 1 ? 'em' : 'strong';
+      const repeat = Math.floor(symbol.length / 2);
+      let prefix = '<strong>'.repeat(repeat);
+      let suffix = '</strong>'.repeat(repeat);
+      if (tagType === 'em') {
+        prefix += '<em>';
+        suffix = `</em>${suffix}`;
+      }
+      // 这里转义_是为了避免跨标签识别
+      const result = `${leading}${prefix}${sentenceMakeFunc(text).html.replace(/_/g, '~U')}${suffix}`;
+      return result;
+    };
+    let $str = str;
+    if (this.allowWhitespace) {
+      $str = $str.replace(/(^|\n[\s]*)(\*)([^\s*](?:.*?)(?:(?:\n.*?)*?))\*/g, converAsterisk);
+      $str = $str.replace(/(^|\n[\s]*)(\*{2,})((?:.*?)(?:(?:\n.*?)*?))\2/g, converAsterisk);
+      $str = $str.replace(/([^\n*\\\s][ ]*)(\*+)((?:.*?)(?:(?:\n.*?)*?))\2/g, converAsterisk);
+    } else {
+      // TODO: fix this error
+      // @ts-expect-error
+      $str = $str.replace(this.RULE.asterisk.reg, converAsterisk);
+    }
+
+    // TODO: fix this error
+    // @ts-expect-error
+    $str = $str.replace(this.RULE.underscore.reg, (match, leading, symbol, text, index, string) => {
+      if (text.trim() === '') {
+        return match;
+      }
+      const tagType = symbol.length % 2 === 1 ? 'em' : 'strong';
+      const repeat = Math.floor(symbol.length / 2);
+      let prefix = '<strong>'.repeat(repeat);
+      let suffix = '</strong>'.repeat(repeat);
+      const innerText = sentenceMakeFunc(text).html;
+      if (tagType === 'em') {
+        // if(/<em>.*?<\/em>/.test(innerText)) {
+        //     prefix += symbol;
+        //     suffix = symbol + suffix;
+        // } else {
+        prefix += '<em>';
+        suffix = `</em>${suffix}`;
+        // }
+      }
+      const result = `${leading}${prefix}${innerText}${suffix}`;
+      return result;
+    });
+
+    return $str.replace(/~U/g, '_');
+  }
+
+  test(str, flavor) {
+    return this.RULE[flavor].reg && this.RULE[flavor].reg.test(str);
+  }
+
+  /**
+   * TODO: fix type errors, prefer use `rules` for multiple spec instead
+   * @returns
+   */
+  rule({ config } = { config: undefined }) {
+    const allowWhitespace = config ? !!config.allowWhitespace : false;
+    const emRegexp = (allowWhitespace, symbol) => {
+      const char = `[^${symbol}\\s]`;
+      return allowWhitespace ? ALLOW_WHITESPACE_MULTILINE : `(${char}|${char}(.*?(\n${char}.*)*)${char})`;
+    };
+    const asterisk = {
+      begin: '(^|[^\\\\])([*]+)', // ?<leading>, ?<symbol>
+      content: `(${emRegexp(allowWhitespace, '*')})`, // ?<text>
+      end: '\\2',
+    };
+
+    // UNDERSCORE_EMPHASIS_BORDER：允许除下划线以外的「标点符号」和空格出现，使用[^\w\S \t]或[\W\s]会有性能问题
+    const underscore = {
+      begin: `(^|${UNDERSCORE_EMPHASIS_BOUNDARY})(_+)`, // ?<leading>, ?<symbol>
+      content: `(${emRegexp(allowWhitespace, '_')})`, // ?<text>
+      end: `\\2(?=${UNDERSCORE_EMPHASIS_BOUNDARY}|$)`,
+    };
+
+    asterisk.reg = compileRegExp(asterisk, 'g');
+    underscore.reg = compileRegExp(underscore, 'g');
+    return /** @type {any} */ ({ asterisk, underscore });
+  }
+}

package/src/core/hooks/Footnote.js

@@ -0,0 +1,125 @@
+/**
+ * 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 Footnote extends ParagraphBase {
+  static HOOK_NAME = 'footnote';
+
+  constructor({ externals, config }) {
+    super();
+    this.footnoteCache = {};
+    this.footnoteMap = {}; // 角标缓存索引
+    this.footnote = [];
+  }
+
+  $cleanCache() {
+    this.footnoteCache = {};
+    this.footnoteMap = {}; // 角标缓存索引
+    this.footnote = [];
+  }
+
+  pushFootnoteCache(key, cache) {
+    this.footnoteCache[key] = cache;
+  }
+
+  getFootnoteCache(key) {
+    return this.footnoteCache[key] || null;
+  }
+
+  pushFootNote(key, note) {
+    if (this.footnoteMap[key]) {
+      // 重复引用时返回已缓存下标
+      return this.footnoteMap[key];
+    }
+    const num = this.footnote.length + 1;
+    const fn = {};
+    fn.fn = `<sup><a href="#fn:${num}" id="fnref:${num}" title="${key}" class="footnote">[${num}]</a></sup>`;
+    fn.fnref = `<a href="#fnref:${num}" id="fn:${num}" title="${key}" class="footnote-ref">[${num}]</a>`;
+    fn.num = num;
+    fn.note = note.trim();
+    this.footnote.push(fn);
+    const replaceKey = `\0~fn#${num - 1}#\0`;
+    this.footnoteMap[key] = replaceKey;
+    return replaceKey;
+  }
+
+  getFootNote() {
+    return this.footnote;
+  }
+
+  formatFootNote() {
+    const footnote = this.getFootNote();
+    if (footnote.length <= 0) {
+      return '';
+    }
+    let html = footnote.map((note) => `<div class="one-footnote">\n${note.fnref}${note.note}\n</div>`).join('');
+    const sign = this.$engine.md5(html);
+    html = `<div class="footnote" data-sign="${sign}" data-lines="0"><div class="footnote-title">脚注</div>${html}</div>`;
+    return html;
+  }
+
+  // getParagraphHook() {
+  //     return this.commentPAR;
+  // }
+
+  beforeMakeHtml(str) {
+    // 单行注释，TODO: 替换为引用
+    // str = str.replace(/(^|\n)\[([^^][^\]]*?)\]:([^\n]+?)(?=$|\n)/g, '$1');
+    let $str = str;
+    if (this.test($str)) {
+      $str = $str.replace(this.RULE.reg, (match, leading, key, content) => {
+        this.pushFootnoteCache(key, content);
+        const LF = match.match(/\n/g) || [];
+        return LF.join('');
+      });
+      // 替换实际引用
+      $str = $str.replace(/\[\^([^\]]+?)\](?!:)/g, (match, key) => {
+        const cache = this.getFootnoteCache(key);
+        if (cache) {
+          return this.pushFootNote(key, cache);
+        }
+        return match;
+      });
+      $str += this.formatFootNote();
+    }
+    return $str;
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    return str;
+  }
+
+  afterMakeHtml(str) {
+    const footNotes = this.getFootNote();
+    const $str = str.replace(/\0~fn#([0-9]+)#\0/g, (match, num) => footNotes[num].fn);
+    this.$cleanCache();
+    return $str;
+  }
+
+  rule() {
+    const ret = {
+      begin: '(^|\\n)[ \t]*',
+      content: [
+        '\\[\\^([^\\]]+?)\\]:\\h*', // footnote key
+        '([\\s\\S]+?)', // footnote content
+      ].join(''),
+      end: '(?=\\s*$|\\n\\n)',
+    };
+    ret.reg = compileRegExp(ret, 'g', true);
+    return ret;
+  }
+}

package/src/core/hooks/FrontMatter.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 { compileRegExp } from '@/utils/regexp';
+import jsYaml from 'js-yaml';
+
+export default class FrontMatter extends ParagraphBase {
+  static HOOK_NAME = 'frontMatter';
+
+  constructor(options) {
+    super({ needCache: true });
+  }
+
+  beforeMakeHtml(str) {
+    return str.replace(this.RULE.reg, (match, content) => {
+      try {
+        this.$engine.$cherry.frontMatter = jsYaml.load(content);
+      } catch (e) {
+        try {
+          this.$engine.$cherry.frontMatter = JSON.parse(e.toString());
+        } catch (e) {
+          this.$engine.$cherry.frontMatter = {};
+        }
+      }
+      return '';
+    });
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    // fontMatter不渲染，作为全局属性出现。
+    return str;
+  }
+
+  rule() {
+    const ret = { begin: '^\\s*-{3,}[^\\n]*\\n', end: '\\n-{3,}[^\\n]*\\n', content: '([\\s\\S]+?)' };
+    ret.reg = compileRegExp(ret, 'g', true);
+    return ret;
+  }
+}

package/src/core/hooks/FrontMatterVars.js

@@ -0,0 +1,82 @@
+import { compileRegExp } from '@/utils/regexp';
+import ParagraphBase from '@/core/ParagraphBase';
+import md5 from 'md5';
+
+export default class FrontMatterVars extends ParagraphBase {
+  static HOOK_NAME = 'frontMatterVars';
+
+  constructor() {
+    super({ needCache: false });
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    return str.replace(this.RULE.reg, (match, a, varName) => {
+      // Custom rendering logic
+      const value = this.resolveNestedVar(varName.trim());
+      if (typeof value === 'undefined') {
+        console.warn(`Variable ${varName} is not defined.`);
+        return match; // Return the original match if the variable is not defined
+      }
+      const lineCount = 1;
+      const sign = md5(`fontMatterVal:${varName}=${value}`);
+      return `<span data-sign="${sign}" data-type="frontMatter" data-lines="${lineCount}">${value}</span>`;
+    });
+  }
+
+  resolveNestedVar(varName) {
+    const vars = this.$engine.$cherry.frontMatter || {};
+    const levels = varName.split('.');
+    let current = vars;
+
+    for (const key of levels) {
+      if (current && typeof current === 'object' && key in current) {
+        current = current[key];
+      } else {
+        return undefined; // Return undefined if any level is not found
+      }
+    }
+    return current; // Return the final resolved value
+  }
+
+  rule() {
+    // (?<protocol>\\w+:)\\/\\/
+    const ret = {
+      // ?<left>
+      begin: '{{',
+      content: '(\\s+)?([\\w.]+)(\\s+)?',
+      // ?<right>
+      end: '}}',
+    };
+    ret.reg = compileRegExp(ret, 'g');
+    return ret;
+  }
+  overlayMode() {
+    return {
+      name: 'frontMatterVars',
+      inVars: false,
+      token(stream, state) {
+        // Check if the stream matches the variable pattern
+        if (!this.inVars && stream.match(/\{\{(\s+)?[\w.]+(\s+)?}}/)) {
+          this.inVars = true;
+          stream.backUp(stream.current().length);
+        }
+        if (this.inVars) {
+          if (stream.match('{{')) {
+            return 'vars-container';
+          }
+
+          if (stream.match('}}')) {
+            this.inVars = false;
+            return 'vars-container';
+          }
+          // Consume the next character if no specific match is found
+          stream.next();
+          return 'vars-text';
+        }
+        // Always advance the stream by one character if no match is found
+        stream.next();
+        return null;
+      },
+    };
+  }
+}