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

package/src/core/ParagraphBase.js

@@ -0,0 +1,332 @@
+/**
+ * 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, { HOOKS_TYPE_LIST } from './SyntaxBase';
+import { prependLineFeedForParagraph } from '@/utils/lineFeed';
+import { getIsClassicBrFromLocal, testKeyInLocal } from '@/utils/config';
+import { blockNames } from '@/utils/sanitize';
+
+let cacheCounter = 0;
+// ~~C${cacheCounter}I${cacheIndex}$
+// let cacheMap = {};
+
+export default class ParagraphBase extends SyntaxBase {
+  static HOOK_TYPE = HOOKS_TYPE_LIST.PAR;
+  // 不需要排他的sign前缀，如~~C0I${IN_PARAGRAPH_CACHE_KEY_PREFIX}sign$
+  static IN_PARAGRAPH_CACHE_KEY_PREFIX = '!';
+  static IN_PARAGRAPH_CACHE_KEY_PREFIX_REGEX = '\\!';
+
+  constructor({ needCache, defaultCache = {} } = { needCache: false }) {
+    super({});
+    this.needCache = !!needCache;
+    this.sign = '';
+    if (needCache) {
+      this.cache = defaultCache || {};
+      this.cacheKey = `~~C${cacheCounter}`;
+      cacheCounter += 1;
+    }
+  }
+
+  initBrReg(classicBr = false) {
+    // 是否启用经典换行逻辑
+    // true：一个换行会被忽略，两个以上连续换行会分割成段落，
+    // false： 一个换行会转成<br>，两个连续换行会分割成段落，三个以上连续换行会转成<br>并分割段落
+    this.classicBr = testKeyInLocal('classicBr') ? getIsClassicBrFromLocal() : classicBr;
+    this.removeBrAfterBlock = null;
+    this.removeBrBeforeBlock = null;
+    this.removeNewlinesBetweenTags = null;
+  }
+
+  /**
+   * 处理经典换行问题
+   * @param {string} str markdown源码
+   * @returns markdown源码
+   */
+  $cleanParagraph(str) {
+    // remove leading and trailing newlines
+    const trimedPar = str.replace(/^\n+/, '').replace(/\n+$/, '');
+    if (this.classicBr) {
+      return trimedPar;
+    }
+    const minifiedPar = this.joinRawHtml(trimedPar);
+    return minifiedPar.replace(/\n/g, '<br>').replace(/\r/g, '\n'); // recover \n from \r
+  }
+
+  /**
+   * remove all newlines in html text
+   *
+   * @param {string} textContainsHtml
+   */
+  joinRawHtml(textContainsHtml) {
+    if (!this.removeBrAfterBlock) {
+      // preprocess custom white list
+      let customTagWhiteList = this.$engine.htmlWhiteListAppend?.split('|') ?? [];
+      customTagWhiteList = customTagWhiteList
+        .map((tag) => {
+          if (/[a-z-]+/gi.test(tag)) {
+            return tag;
+          }
+          return null;
+        })
+        .filter((tag) => tag !== null);
+      // concat all white list
+      const allBlockNames = customTagWhiteList.concat(blockNames).join('|');
+      // 段落标签自然换行，所以去掉段落标签两边的换行符
+      /**
+       * remove newlines after start tag, and remove whitespaces before newline
+       * e.g.
+       * <p> \n  text</p> => <p>  text</p>
+       *  ^^
+       * $1$2
+       */
+      this.removeBrAfterBlock = new RegExp(`<(${allBlockNames})(>| [^>]*?>)[^\\S\\n]*?\\n`, 'ig');
+      /**
+       * remove newlines before end tag, and whitespaces before end tag will be preserved
+       * e.g.
+       * <p>  text\n  </p> => <p>  text  </p>
+       *                ^
+       *               $1
+       */
+      this.removeBrBeforeBlock = new RegExp(`\\n[^\\S\\n]*?<\\/(${allBlockNames})>[^\\S\\n]*?\\n`, 'ig');
+      /**
+       * remove newlines between end tag & start tag
+       * e.g.
+       * </p> \n  <p   foo="bar"> => </p>\r  <p foo="bar">
+       *   ^    ^^ ^ ^^^^^^^^^^^^
+       *  $1    $2 $3  $4
+       */
+      this.removeNewlinesBetweenTags = new RegExp(
+        `<\\/(${allBlockNames})>[^\\S\\n]*?\\n([^\\S\\n]*?)<(${allBlockNames})(>| [^>]*?>)`,
+        'ig',
+      );
+    }
+    return textContainsHtml
+      .replace(this.removeBrAfterBlock, '<$1$2')
+      .replace(this.removeBrBeforeBlock, '</$1>')
+      .replace(this.removeNewlinesBetweenTags, '</$1>\r$2<$3$4'); // replace \n to \r
+  }
+
+  toHtml(str, sentenceMakeFunc) {
+    return str;
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    return sentenceMakeFunc(str).html;
+  }
+
+  afterMakeHtml(html) {
+    return this.restoreCache(html);
+  }
+
+  isContainsCache(str, fullMatch) {
+    if (fullMatch) {
+      // 如果是全匹配：不能包含CherryINPRAGRAPH
+      const containsParagraphCache = /^(\s*~~C\d+I\w+\$\s*)+$/g.test(str);
+      const containsInParagraphCache = new RegExp(
+        `~~C\\d+I${ParagraphBase.IN_PARAGRAPH_CACHE_KEY_PREFIX_REGEX}\\w+\\$`,
+        'g',
+      ).test(str);
+      return containsParagraphCache && !containsInParagraphCache;
+    }
+    // 如果是局部匹配： 不能只包含CherryINPRAGRAPH
+    // const containsParagraphCache = /~~C\d+I\w+\$/g.test(str);
+    // const containsInParagraphCache = new RegExp(
+    //    `~~C\\d+I${ParagraphBase.IN_PARAGRAPH_CACHE_KEY_PREFIX}\\w+\\$`, 'g').test(str);
+    const containsNonInParagraphCache = new RegExp(
+      `~~C\\d+I(?!${ParagraphBase.IN_PARAGRAPH_CACHE_KEY_PREFIX_REGEX})\\w+\\$`,
+      'g',
+    ).test(str);
+    return containsNonInParagraphCache;
+
+    // return fullMatch ?
+    //    /^(\s*~~C\d+I\w+\$\s*)+$/g.test(str) && !/^(\s*~~C\d+ICherryINPRAGRAPH\w+\$\s*)+$/g.test(str) :
+    //    /~~C\d+I\w+\$/g.test(str) && !(/~~C\d+ICherryINPRAGRAPH\w+\$/g.test(str)
+    //        && !/~~C\d+I(?!CherryINPRAGRAPH)\w+\$/g.test(str));
+  }
+
+  /**
+   *
+   * @param {string} html
+   * @return
+   */
+  $splitHtmlByCache(html) {
+    // ~~C0I(?!prefix)sign$
+    const regex = new RegExp(`\\n*~~C\\d+I(?!${ParagraphBase.IN_PARAGRAPH_CACHE_KEY_PREFIX_REGEX})\\w+\\$\\n?`, 'g');
+    return {
+      caches: html.match(regex),
+      contents: html.split(regex),
+    };
+  }
+
+  makeExcludingCached(content, processor) {
+    const { caches, contents } = this.$splitHtmlByCache(content);
+    const paragraphs = contents.map(processor);
+    let ret = '';
+    for (let i = 0; i < paragraphs.length; i++) {
+      ret += paragraphs[i];
+      if (caches && caches[i]) {
+        ret += caches[i].trim();
+      }
+    }
+    return ret;
+  }
+
+  /**
+   * 获取非捕获匹配丢掉的换行，适用于能被【嵌套】的段落语法
+   *
+   * @param {string} cache 需要返回的cache
+   * @param {string} md 原始的md字符串
+   * @param {boolean} alwaysAlone 是否能被【嵌套】，true：不能被嵌套，如标题、注释等；false：能被嵌套，如代码块、有序列表等
+   * @return {string} str
+   */
+  getCacheWithSpace(cache, md, alwaysAlone = false) {
+    const preSpace = md.match(/^\n+/)?.[0] ?? '';
+    const afterSpace = md.match(/\n+$/)?.[0] ?? '';
+    if (alwaysAlone) {
+      return prependLineFeedForParagraph(md, cache);
+    }
+    return `${preSpace}${cache}${afterSpace}`;
+  }
+
+  /**
+   * 获取行号，只负责向上计算\n
+   * 会计算cache的行号
+   *
+   * @param {string} md md内容
+   * @param {string} preSpace 前置换行
+   * @return {number} 行数
+   */
+  getLineCount(md, preSpace = '') {
+    let content = md;
+    /**
+     * 前置换行个数，【注意】：前置换行个数不包括上文的最后一个\n
+     *    例：
+     *      - aa\n
+     *      - bb\n
+     *      \n
+     *      cc\n
+     *
+     *    cc的前置换行个数为 1，bb后的\n不计算在内
+     *    cc的正则为：/(?:^|\n)(\n*)xxxxxx/
+     */
+    let preLineCount = preSpace.match(/^\n+/g)?.[0]?.length ?? 0;
+    preLineCount = preLineCount === 1 ? 1 : 0; // 前置换行超过2个就交给BR进行渲染
+    content = content.replace(/^\n+/g, '');
+
+    const regex = new RegExp(
+      `\n*~~C\\d+I(?:${ParagraphBase.IN_PARAGRAPH_CACHE_KEY_PREFIX_REGEX})?\\w+?_L(\\d+)\\$`,
+      'g',
+    );
+    let cacheLineCount = 0;
+    content = content.replace(regex, (match, lineCount) => {
+      cacheLineCount += parseInt(lineCount, 10);
+      return match.replace(/^\n+/g, '');
+    });
+    return preLineCount + cacheLineCount + (content.match(/\n/g) || []).length + 1; // 实际内容所占行数，至少为1行
+  }
+
+  /**
+   *
+   * @param {string} str 渲染后的内容
+   * @param {string} sign 签名
+   * @param {number} lineCount md原文的行数
+   * @return {string} cacheKey ~~C0I0_L1$
+   */
+  pushCache(str, sign = '', lineCount = 0) {
+    if (!this.needCache) {
+      return;
+    }
+    const $sign = sign || this.$engine.hash(str);
+    const key = `${this.cacheKey}I${$sign}_L${lineCount}$`;
+    this.cache[$sign] = {
+      content: str,
+      key,
+    };
+    return key;
+  }
+
+  popCache(sign) {
+    if (!this.needCache) {
+      return;
+    }
+    return this.cache[sign].content || '';
+  }
+
+  testHasCache(sign) {
+    if (!this.needCache || !this.cache[sign]) {
+      return false;
+    }
+    return this.cache[sign].key;
+  }
+
+  // 当缓存全部被消费后，调用此方法清理多大的缓存
+  resetCache() {
+    if (!this.needCache) {
+      return;
+    }
+    // 当缓存队列比较大时，随机抛弃500个缓存
+    if (Object.keys(this.cache).length > 3000) {
+      let limit = 0;
+      for (const key of Object.keys(this.cache)) {
+        limit += 1;
+        if (limit > 500) {
+          return;
+        }
+        delete this.cache[key];
+      }
+    }
+  }
+
+  restoreCache(html) {
+    // restore cached content
+    if (!this.needCache) {
+      return html;
+    }
+    const regex = new RegExp(
+      `${this.cacheKey}I((?:${ParagraphBase.IN_PARAGRAPH_CACHE_KEY_PREFIX_REGEX})?\\w+)\\$`,
+      'g',
+    );
+    const $html = html.replace(regex, (match, cacheSign) => this.popCache(cacheSign.replace(/_L\d+$/, '')));
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+    this.timer = setTimeout(() => {
+      this.resetCache();
+    }, 1000);
+    return $html;
+  }
+
+  /**
+   *
+   * @param {string} wholeMatch whole match
+   */
+  checkCache(wholeMatch, sentenceMakeFunc, lineCount = 0) {
+    this.sign = this.$engine.hash(wholeMatch);
+    // miss cache
+    if (!this.cache[this.sign]) {
+      return this.toHtml(wholeMatch, sentenceMakeFunc);
+    }
+    return `${this.cacheKey}I${this.sign}_L${lineCount}$`;
+  }
+
+  mounted() {
+    // console.log('base mounted');
+  }
+
+  signWithCache(html) {
+    return false;
+  }
+}

package/src/core/SentenceBase.js

@@ -0,0 +1,65 @@
+/**
+ * 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.
+ */
+export default class HookBase {
+  getType() {
+    const typeList = {
+      1: 'sentence',
+      2: 'paragraph',
+      3: 'page',
+    };
+    return typeList[this.HOOKTYPE] || 'sentence';
+  }
+
+  getName() {
+    return this.HOOKNAME;
+  }
+
+  constructor() {
+    this.HOOKNAME = '';
+    this.HOOKTYPE = 1;
+  }
+
+  // makeHtml(str) {
+  //     return str;
+  // }
+  getMakeHtml() {
+    return this.makeHtml || false;
+  }
+
+  // onKeyDown(e, str) {
+  //     return false;
+  // }
+  getOnKeyDown() {
+    return this.onKeyDown || false;
+  }
+
+  // test(str) {
+  //     let rule = this.getRule();
+  //     let reg = new RegExp(rule.begin+rule.content+rule.end, 'g');
+  //     return reg.test(str)
+  // }
+
+  // rule() {
+  //     return {begin:'#+', end:'\n', content:'[^\#\n]+'};
+  // }
+  getRule() {
+    return this.rule || false;
+  }
+
+  // toolbar() {
+  //     return new ToolBar();
+  // }
+}

package/src/core/SyntaxBase.js

@@ -0,0 +1,194 @@
+/**
+ * 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.
+ */
+
+/**
+ * @typedef {import('~types/syntax').HookType} HookType
+ * @typedef {import('~types/syntax').HookTypesList} HookTypesList
+ * @typedef {import('~types/syntax').EditorConfig} EditorConfig
+ * @typedef {import('~types/syntax').HookRegexpRule} HookRegexpRule
+ */
+
+/** @type {boolean} */
+let isMathjaxConfig = false;
+
+/**
+ * @type {HookTypesList}
+ */
+export const HOOKS_TYPE_LIST = {
+  SEN: 'sentence',
+  PAR: 'paragraph',
+  DEFAULT: 'sentence',
+};
+
+export default class SyntaxBase {
+  /**
+   * @static
+   * @type {string}
+   */
+  static HOOK_NAME = 'default';
+  /**
+   * @static
+   * @type {HookType}
+   */
+  static HOOK_TYPE = HOOKS_TYPE_LIST.DEFAULT;
+  /**
+   * @protected
+   * @type {import('../Engine').default}
+   */
+  $engine;
+  $locale;
+
+  /**
+   * @constructor
+   * @param {Partial<EditorConfig>} editorConfig
+   */
+  constructor(editorConfig) {
+    // editorConfig.pageHooks: 已实例化的页面级hook
+    // editorConfig.syntaxOptions: 当前Hook的用户配置
+    // editorConfig.externals: 第三方库
+    this.RULE = this.rule(editorConfig);
+  }
+
+  getType() {
+    return /** @type {typeof SyntaxBase} */ (this.constructor).HOOK_TYPE || HOOKS_TYPE_LIST.DEFAULT;
+  }
+
+  getName() {
+    return /** @type {typeof SyntaxBase} */ (this.constructor).HOOK_NAME;
+  }
+
+  afterInit(callback) {
+    if (typeof callback === 'function') {
+      callback();
+    }
+  }
+
+  setLocale(locale) {
+    this.$locale = locale;
+  }
+
+  /**
+   * 生命周期函数
+   * @param {string} str 待处理的markdown文本
+   * @returns {string} 处理后的文本，一般为html
+   */
+  beforeMakeHtml(str) {
+    return str;
+  }
+
+  /**
+   * 生命周期函数
+   * @param {string} str 待处理的markdown文本
+   * @returns {string} 处理后的文本，一般为html
+   */
+  makeHtml(str) {
+    return str;
+  }
+
+  /**
+   * 生命周期函数
+   * @param {string} str 待处理的markdown文本
+   * @returns {string} 处理后的文本，一般为html
+   */
+  afterMakeHtml(str) {
+    return str;
+  }
+
+  // getMakeHtml() {
+  //     return this.makeHtml || false;
+  // }
+
+  /**
+   *
+   * @param {KeyboardEvent} e 触发事件
+   * @param {*} str
+   */
+  onKeyDown(e, str) {}
+
+  getOnKeyDown() {
+    return this.onKeyDown || false;
+  }
+
+  getAttributesTest() {
+    return /^(color|fontSize|font-size|id|title|class|target|underline|line-through|overline|sub|super)$/;
+  }
+
+  /**
+   *
+   * @param {string} attr
+   * @param {() => {}} func 回调函数
+   */
+  $testAttributes(attr, func) {
+    if (this.getAttributesTest().test(attr)) {
+      func();
+    }
+  }
+
+  /**
+   * 提取属性
+   * @param {string} str 待提取字符串
+   * @returns {{attrs: Record<string,any>; str: string}}
+   */
+  getAttributes(str) {
+    const ret = { attrs: {}, str };
+    // if(/(?<=[^\\]){([a-zA-Z-]+=[0-9a-z-]+(?=;|\||}))+}$/.test(str)) {
+    //     str.match(/(?<=[^\\]){[^\n]+?}$/)[0]
+    //         .match(/([a-zA-Z-]+=[0-9a-z-]+(?=;|\||}))+/g)
+    //         .foreach((one) => {
+    //             one = one.split('=');
+    //             this._testAttributes(one[0], ()=>{
+    //                 ret.attrs[one[0]] = one[1];
+    //             });
+    //         });
+    //     ret.str = str.replace(/(?<=[^\\]){[^\n]+?}$/, '');
+    // }
+    return ret;
+  }
+
+  static getMathJaxConfig() {
+    return isMathjaxConfig;
+  }
+
+  /**
+   *
+   * @param {boolean} version 指定mathJax是否使用MathJax
+   */
+  static setMathJaxConfig(version) {
+    isMathjaxConfig = version;
+  }
+
+  /**
+   * 测试输入的字符串是否匹配当前Hook规则
+   * @param {string} str 待匹配文本
+   * @returns {boolean}
+   */
+  test(str) {
+    return this.RULE.reg ? this.RULE.reg.test(str) : false;
+  }
+
+  /**
+   *
+   * @param {Partial<EditorConfig>} editorConfig
+   * @returns {HookRegexpRule}
+   */
+  rule(editorConfig) {
+    return { begin: '', end: '', content: '', reg: new RegExp('') };
+  }
+
+  mounted() {
+    // console.log('base mounted');
+  }
+}