cherry-muse 1.0.1

package/src/core/hooks/Color.js

@@ -0,0 +1,78 @@
+/**
+ * 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 Color extends SyntaxBase {
+  static HOOK_NAME = 'fontColor';
+  // constructor() {
+  //     super();
+  // }
+
+  toHtml(whole, leadingChar, m1, m2) {
+    return `${leadingChar}<span style="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,20})[\\s]([\\w\\W]+?)',
+    };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'g');
+    return ret;
+  }
+  overlayMode() {
+    return {
+      name: 'color',
+      inSizeContainer: false,
+      countTotal: 0,
+      token(stream, state) {
+        // 前景色
+        if (stream.match(/!!#\w+\s.*?!!/) || stream.match(/!!!#\w+\s.*?!!!/)) {
+          stream.backUp(stream.current().length); // 回退以单独处理
+          this.inSizeContainer = true;
+          this.countTotal = 0;
+        }
+
+        if (this.inSizeContainer) {
+          if (stream.match(/!+/) && stream.peek() !== '!') {
+            this.countTotal += 1;
+            if (this.countTotal === 2) {
+              this.inSizeContainer = false;
+              this.countTotal = 0;
+            }
+            return 'size-container'; // 自定义样式类名
+          }
+          if (stream.match(/#\w+/)) {
+            return 'size-number'; // 自定义样式类名
+          }
+        }
+
+        stream.next(); // 前进到下一个字符
+        return null; // 默认返回 null
+      },
+    };
+  }
+}

package/src/core/hooks/CommentReference.js

@@ -0,0 +1,96 @@
+/**
+ * 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 UrlCache from '@/UrlCache';
+/**
+ * 脚注和引用语法
+ * 示例：
+ *    这里需要一个脚注[^脚注别名1]，另外这里也需要一个脚注[^another]。
+ *    [^脚注别名1]: 无论脚注内容写在哪里，脚注的内容总会显示在页面最底部
+ *    以两次回车结束
+ *
+ *    [^another]: 另外，脚注里也可以使用一些简单的markdown语法
+ *    >比如 !!#ff0000 这里!!有一段**引用**
+ */
+export default class CommentReference extends ParagraphBase {
+  static HOOK_NAME = 'commentReference';
+
+  constructor({ externals, config }) {
+    super();
+    this.commentCache = {};
+  }
+
+  $cleanCache() {
+    this.commentCache = {};
+  }
+
+  pushCommentReferenceCache(key, cache) {
+    const [url, ...args] = cache.split(/[ ]+/g);
+    const innerUrl = UrlCache.set(url);
+    this.commentCache[`${key}`.toLowerCase()] = [innerUrl, ...args].join(' ');
+  }
+
+  getCommentReferenceCache(key) {
+    return this.commentCache[`${key}`.toLowerCase()] || null;
+  }
+
+  beforeMakeHtml(str) {
+    let $str = str;
+    if (this.test($str)) {
+      $str = $str.replace(this.RULE.reg, (match, leading, key, content) => {
+        this.pushCommentReferenceCache(key, content);
+        const lineFeeds = match.match(/\n/g) ?? [];
+        return lineFeeds.join('');
+      });
+      // 替换实际引用
+      const refRegex = /(\[[^\]\n]+?\])?(?:\[([^\]\n]+?)\])/g; // 匹配[xxx][ref]形式的内容，不严格大小写
+      $str = $str.replace(refRegex, (match, leadingContent, key) => {
+        const cache = this.getCommentReferenceCache(key);
+        if (cache) {
+          if (leadingContent) {
+            return `${leadingContent}(${cache})`; // 替换为[xx](cache)形式，交给Link或多媒体标签处理
+          }
+          return `[${key}](${cache})`; // 替换为[ref](cache)形式，交给Link或多媒体标签处理
+        }
+        return match;
+      });
+      this.$cleanCache();
+    }
+    return $str;
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    return str;
+  }
+
+  afterMakeHtml(str) {
+    return UrlCache.restoreAll(str);
+  }
+
+  rule() {
+    const ret = {
+      begin: '(^|\\n)[ \t]*',
+      content: [
+        '\\[([^^][^\\]]*?)\\]:\\h*', // comment key
+        '([^\\n]+?)', // comment content
+      ].join(''),
+      end: '(?=$|\\n)',
+    };
+    ret.reg = compileRegExp(ret, 'g', true);
+    return ret;
+  }
+}

package/src/core/hooks/Detail.js

@@ -0,0 +1,138 @@
+/**
+ * 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';
+import { getDetailRule } from '@/utils/regexp';
+import { blockNames } from '@/utils/sanitize';
+
+/**
+ * +++(-) 点击查看详情
+ * body
+ * body
+ * ++ 标题（默认收起内容）
+ * 内容
+ * ++- 标题（默认展开内容）
+ * 内容2
+ * +++
+ */
+export default class Detail extends ParagraphBase {
+  static HOOK_NAME = 'detail';
+
+  constructor() {
+    super({ needCache: true });
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    return str.replace(this.RULE.reg, (match, preLines, isOpen, title, content) => {
+      const lineCount = this.getLineCount(match, preLines);
+      const sign = this.$engine.md5(match);
+      const { type, html } = this.$getDetailInfo(isOpen, title, content, sentenceMakeFunc);
+      const ret = this.pushCache(
+        `<div class="cherry-detail cherry-detail__${type}" data-sign="${sign}" data-lines="${lineCount}" >${html}</div>`,
+        sign,
+        lineCount,
+      );
+      return prependLineFeedForParagraph(match, ret);
+    });
+  }
+
+  $getDetailInfo(isOpen, title, str, sentenceMakeFunc) {
+    const type = /\n\s*(\+\+|\+\+-)\s*[^\n]+\n/.test(str) ? 'multiple' : 'single';
+    const arr = str.split(/\n\s*(\+\+-?\s*[^\n]+)\n/);
+    let defaultOpen = isOpen === '-';
+    let currentTitle = title;
+    let html = '';
+    if (type === 'multiple') {
+      arr.forEach((item) => {
+        if (/^\s*\+\+/.test(item)) {
+          defaultOpen = /^\s*\+\+-/.test(item);
+          currentTitle = item.replace(/\+\+-?\s*([^\n]+)$/, '$1');
+          return true;
+        }
+        html += this.$getDetailHtml(defaultOpen, currentTitle, item, sentenceMakeFunc);
+      });
+    } else {
+      html = this.$getDetailHtml(defaultOpen, currentTitle, str, sentenceMakeFunc);
+    }
+    return { type, html };
+  }
+
+  $getDetailHtml(defaultOpen, title, str, sentenceMakeFunc) {
+    let ret = `<details ${defaultOpen ? 'open' : ''}>`;
+    const paragraphProcessor = (str) => {
+      if (str.trim() === '') {
+        return '';
+      }
+      // 调用行内语法，获得段落的签名和对应html内容
+      const { html } = sentenceMakeFunc(str);
+      let domName = 'p';
+      // 如果包含html块级标签（比如div、blockquote等），则当前段落外层用div包裹，反之用p包裹
+      const isContainBlockTest = new RegExp(`<(${blockNames})[^>]*>`, 'i');
+      if (isContainBlockTest.test(html)) {
+        domName = 'div';
+      }
+      return `<${domName}>${this.$cleanParagraph(html)}</${domName}>`;
+    };
+    ret += `<summary>${sentenceMakeFunc(title).html}</summary>`;
+    let $body = '';
+    if (this.isContainsCache(str)) {
+      $body = this.makeExcludingCached(str, paragraphProcessor);
+    } else {
+      $body = paragraphProcessor(str);
+    }
+    ret += `<div class="cherry-detail-body">${$body}</div>`;
+    ret += `</details>`;
+    return ret;
+  }
+
+  rule() {
+    return getDetailRule();
+  }
+
+  overlayMode() {
+    return {
+      inDetailContainer: false,
+      name: 'detail',
+      token(stream, state) {
+        // 检查行的开头是否有 ':::'
+        if (stream.sol() && stream.match('+++')) {
+          this.inDetailContainer = stream.peek() !== null;
+          return 'detail-container';
+        }
+
+        if (stream.sol() && stream.match('++-')) {
+          this.inDetailContainer = true;
+          return 'detail-container';
+        }
+
+        if (stream.sol() && stream.match('++')) {
+          this.inDetailContainer = true;
+          return 'detail-container';
+        }
+
+        const rule = /\s.*$/;
+        // 尝试匹配规则
+        if (this.inDetailContainer && stream.match(rule)) {
+          this.inDetailContainer = false;
+          return 'detail-title';
+        }
+        this.inDetailContainer = false;
+        stream.next(); // 前进到下一个字符
+        return null; // 默认返回 null
+      },
+    };
+  }
+}