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

package/src/core/hooks/Sup.js

@@ -0,0 +1,47 @@
+/**
+ * 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 Sup extends SyntaxBase {
+  static HOOK_NAME = 'sup';
+
+  // constructor() {
+  //     super();
+  // }
+
+  toHtml(whole, leadingChar, m1) {
+    return `${leadingChar}<sup>${m1}</sup>`;
+  }
+
+  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: '([\\w\\W]+?)',
+    };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'g');
+    return ret;
+  }
+}

package/src/core/hooks/Table.js

@@ -0,0 +1,275 @@
+/**
+ * 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 { getTableRule } from '@/utils/regexp';
+
+const TABLE_LOOSE = 'loose';
+const TABLE_STRICT = 'strict';
+
+export default class Table extends ParagraphBase {
+  static HOOK_NAME = 'table';
+
+  constructor({ externals, config }) {
+    super({ needCache: true });
+    const {
+      enableChart,
+      selfClosing,
+      chartRenderEngine: ChartRenderEngine,
+      externals: requiredPackages,
+      chartEngineOptions = {},
+    } = config;
+    this.chartRenderEngine = null;
+    this.selfClosing = selfClosing;
+    if (enableChart === true) {
+      try {
+        this.chartRenderEngine = new ChartRenderEngine({
+          // 注入需要的第三方包
+          ...(externals &&
+            requiredPackages instanceof Array &&
+            requiredPackages.reduce((acc, pkg) => {
+              delete chartEngineOptions[pkg]; // 过滤第三方包选项
+              return { ...acc, [pkg]: externals[pkg] };
+            }, {})),
+          renderer: 'svg',
+          width: 500,
+          height: 300,
+          ...chartEngineOptions,
+        });
+      } catch (error) {
+        console.warn(error);
+      }
+    }
+  }
+
+  // 保持每列长度一致
+  $extendColumns(row, colCount) {
+    const delta = colCount - row.length;
+    if (delta < 1) {
+      return row;
+    }
+    return row.concat('&nbsp;|'.repeat(delta).split('|', delta));
+  }
+
+  $parseChartOptions(cell) {
+    // 初始化失败
+    if (!this.chartRenderEngine) {
+      return null;
+    }
+    const CHART_REGEX = /^[ ]*:(\w+):(?:[ ]*{(.*?)}[ ]*)?$/;
+    if (!CHART_REGEX.test(cell)) {
+      return null;
+    }
+    const match = cell.match(CHART_REGEX);
+    const [, chartType, axisOptions] = match;
+    const DEFAULT_AXIS_OPTIONS = ['x', 'y'];
+    return {
+      type: chartType,
+      options: axisOptions ? axisOptions.split(/\s*,\s*/) : DEFAULT_AXIS_OPTIONS,
+    };
+  }
+
+  $parseColumnAlignRules(row) {
+    const COLUMN_ALIGN_MAP = { L: 'left', R: 'right', C: 'center' };
+    const COLUMN_ALIGN_CACHE_SIGN = ['U', 'L', 'R', 'C']; // U for undefined
+    const textAlignRules = row.map((rule) => {
+      const $rule = rule.trim();
+      let index = 0;
+      if (/^:/.test($rule)) {
+        index += 1;
+      }
+      if (/:$/.test($rule)) {
+        index += 2;
+      }
+      return COLUMN_ALIGN_CACHE_SIGN[index];
+    });
+    return { textAlignRules, COLUMN_ALIGN_MAP };
+  }
+
+  $parseTable(lines, sentenceMakeFunc, dataLines) {
+    let maxCol = 0;
+    const rows = lines.map((line, index) => {
+      const cols = line.replace(/\\\|/g, '~CS').split('|');
+      if (cols[0] === '') {
+        cols.shift();
+      }
+      if (cols[cols.length - 1] === '') {
+        cols.pop();
+      }
+      // 文本对齐相关列，不作为最多列数的参考依据
+      index !== 1 && (maxCol = Math.max(maxCol, cols.length));
+      return cols;
+    });
+    const { textAlignRules, COLUMN_ALIGN_MAP } = this.$parseColumnAlignRules(rows[1]);
+    const tableObject = {
+      header: [],
+      rows: [],
+      colLength: maxCol,
+      rowLength: rows.length - 2, // 去除表头和控制行
+    };
+    const chartOptions = this.$parseChartOptions(rows[0][0]);
+    const chartOptionsSign = this.$engine.hash(rows[0][0]);
+    // 如果需要生成图表，
+    if (chartOptions) {
+      rows[0][0] = '';
+    }
+    /**
+     * ~CTHD: <thead>
+     * ~CTHD$: </thead>
+     * ~CTBD: <tbody>
+     * ~CTBD$: </tbody>
+     * ~CTR: <tr>
+     * ~CTR$: </tr>
+     * ~CTH(L|R|C|U): <th>
+     * ~CTH$: </th>
+     * ~CTD(L|R|C|U): <td>
+     * ~CTD$: </td>
+     */
+    const tableHeader = this.$extendColumns(rows[0], maxCol)
+      .map((cell, col) => {
+        tableObject.header.push(cell.replace(/~CS/g, '\\|'));
+        const { html: cellHtml } = sentenceMakeFunc(cell.replace(/~CS/g, '\\|').trim());
+        // 前后补一个空格，否则自动链接会将缓存的内容全部收入链接内部
+        return `~CTH${textAlignRules[col] || 'U'} ${cellHtml} ~CTH$`;
+      })
+      .join('');
+    const tableRows = rows
+      .reduce((table, row, line) => {
+        if (line <= 1) {
+          return table;
+        }
+        const currentRowCountWithoutHeader = line - 2;
+        tableObject.rows[currentRowCountWithoutHeader] = [];
+        const $extendedColumns = this.$extendColumns(row, maxCol).map((cell, col) => {
+          tableObject.rows[currentRowCountWithoutHeader].push(cell.replace(/~CS/g, '\\|'));
+          const { html: cellHtml } = sentenceMakeFunc(cell.replace(/~CS/g, '\\|').trim());
+          // 前后补一个空格，否则自动链接会将缓存的内容全部收入链接内部
+          return `~CTD${textAlignRules[col] || 'U'} ${cellHtml} ~CTD$`;
+        });
+        table.push(`~CTR${$extendedColumns.join('')}~CTR$`);
+        return table;
+      }, [])
+      .join('');
+    // console.log('obj', tableObject);
+    const tableResult = this.$renderTable(COLUMN_ALIGN_MAP, tableHeader, tableRows, dataLines);
+    if (!chartOptions) {
+      return tableResult;
+    }
+    const chart = this.chartRenderEngine.render(chartOptions.type, chartOptions.options, tableObject);
+    const chartHtml = `<figure class="cherry-table-figure">${chart}</figure>`;
+    const newSign = `${tableResult.sign}${chartOptionsSign}`;
+    return {
+      html: tableResult.html
+        .replace(/(^<div .*?>)/, `$1${chartHtml}`)
+        .replace(/(^<div .*? data-sign=")[^"]+?"/, `$1${newSign}"`),
+      sign: newSign,
+    };
+  }
+
+  /**
+   * 如果table.head是空的，就不渲染<thead>了
+   * @param {String} str
+   * @returns {Boolean}
+   */
+  $testHeadEmpty(str) {
+    const test = str
+      .replace(/&nbsp;/g, '')
+      .replace(/\s/g, '')
+      .replace(/(~CTH\$|~CTHU|~CTHL|~CTHR|~CTHC)/g, '');
+    return test?.length > 0;
+  }
+
+  $renderTable(COLUMN_ALIGN_MAP, tableHeader, tableRows, dataLines) {
+    const cacheSrc = this.$testHeadEmpty(tableHeader)
+      ? `~CTHD${tableHeader}~CTHD$~CTBD${tableRows}~CTBD$`
+      : `~CTBD${tableRows}~CTBD$`;
+    const html = cacheSrc;
+    const sign = this.$engine.hash(html);
+    const renderHtml = html
+      .replace(/~CTHD\$/g, '</thead>')
+      .replace(/~CTHD/g, '<thead>')
+      .replace(/~CTBD\$/g, '</tbody>')
+      .replace(/~CTBD/g, '</tbody>')
+      .replace(/~CTR\$/g, '</tr>')
+      .replace(/~CTR/g, '<tr>')
+      .replace(/[ ]?~CTH\$/g, '</th>')
+      .replace(/[ ]?~CTD\$/g, '</td>') // 在这里将加上的空格还原回来
+      .replace(/~CT(D|H)(L|R|C|U)[ ]?/g, (match, type, align) => {
+        let tag = `<t${type}`;
+        if (align === 'U') {
+          tag += '>';
+        } else {
+          tag += ` align="${COLUMN_ALIGN_MAP[align]}">`;
+        }
+        return tag;
+      })
+      .replace(/\\\|/g, '|'); // escape \|
+    return {
+      html: `<div class="cherry-table-container" data-sign="${sign}${dataLines}" data-lines="${dataLines}">
+        <table class="cherry-table">${renderHtml}</table></div>`,
+      sign,
+    };
+  }
+
+  makeHtml(str, sentenceMakeFunc) {
+    let $str = str;
+    if (this.$engine.$cherry.options.engine.global.flowSessionContext || this.selfClosing) {
+      if (/(^|^[^|][^\n]*\n|\n\n|\n[^|][^\n]*\n)\s*\|[^\n]+\n{0,1}[|:-\s]*\n*$/.test($str)) {
+        $str = `${$str.replace(/\n[|:-\s]*\n*$/, '')}\n|-|`;
+      }
+    }
+    // strict fenced mode
+    if (this.test($str, TABLE_STRICT)) {
+      $str = $str.replace(this.RULE[TABLE_STRICT].reg, (match, leading) => {
+        const dataLines = this.getLineCount(match, leading);
+        // 必须先trim，否则分割出来的结果不对
+        // 将fenced mode转换为loose mode
+        const lines = match
+          .trim()
+          .split(/\n/)
+          .map((line) => String(line).trim());
+        const { html: table, sign } = this.$parseTable(lines, sentenceMakeFunc, dataLines);
+        return this.getCacheWithSpace(this.pushCache(table, sign, dataLines), match);
+      });
+    }
+    // loose mode
+    if (this.test($str, TABLE_LOOSE)) {
+      // console.log(TABLE_LOOSE);
+      $str = $str.replace(this.RULE[TABLE_LOOSE].reg, (match, leading) => {
+        const dataLines = this.getLineCount(match, leading);
+        // 必须先trim，否则分割出来的结果不对
+        const lines = match
+          .trim()
+          .split(/\n/)
+          .map((line) => String(line).trim());
+        const { html: table, sign } = this.$parseTable(lines, sentenceMakeFunc, dataLines);
+        return this.getCacheWithSpace(this.pushCache(table, sign, dataLines), match);
+      });
+    }
+    return $str;
+  }
+
+  test(str, flavor) {
+    return this.RULE[flavor].reg && this.RULE[flavor].reg.test(str);
+  }
+
+  /**
+   * TODO: fix type errors
+   * @returns
+   */
+  rule() {
+    return /** @type {any} */ (getTableRule());
+  }
+}

package/src/core/hooks/Toc.js

@@ -0,0 +1,292 @@
+/**
+ * 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, calculateLinesOfParagraph } from '@/utils/lineFeed';
+
+function defaultLinkProcessor(link) {
+  return link;
+}
+
+const defaultOptions = {
+  tocStyle: 'plain', // plain or nested
+  tocNodeClass: 'toc-li',
+  tocContainerClass: 'toc',
+  tocTitleClass: 'toc-title',
+  linkProcessor: defaultLinkProcessor,
+  showAutoNumber: false,
+};
+
+const emptyLinePlaceholder = '<p data-sign="empty-toc" data-lines="1">&nbsp;</p>';
+
+export default class Toc extends ParagraphBase {
+  static HOOK_NAME = 'toc';
+
+  tocStyle = 'nested'; // plain or nested
+  tocNodeClass = 'toc-li';
+  tocContainerClass = 'toc';
+  tocTitleClass = 'toc-title';
+  linkProcessor = defaultLinkProcessor;
+  baseLevel = 1;
+  /** 标记当前是否处于第一个toc，且仅渲染一个toc */
+  isFirstTocToken = true;
+  /** 允许渲染多个TOC */
+  allowMultiToc = false;
+  /** 是否显示自增序号 */
+  showAutoNumber = false;
+
+  constructor({ externals, config }) {
+    super({ needCache: true });
+    Object.keys(defaultOptions).forEach((key) => {
+      this[key] = config[key] || defaultOptions[key];
+    });
+  }
+
+  beforeMakeHtml(str) {
+    let $str = str;
+    if (this.test($str, 'extend')) {
+      // TODO: fix this error
+      // @ts-expect-error
+      $str = $str.replace(this.RULE.extend.reg, (match, lines, toc) => {
+        if (!this.allowMultiToc && !this.isFirstTocToken) {
+          // 需要补齐非捕获的\n，以及第一个分组中的\n
+          return `\n${lines}${emptyLinePlaceholder}`;
+        }
+        const placeHolder = this.pushCache(match);
+        this.isFirstTocToken = false;
+        return prependLineFeedForParagraph(match, placeHolder);
+      });
+    }
+    if (this.test($str, 'standard')) {
+      // TODO: fix this error
+      // @ts-expect-error
+      $str = $str.replace(this.RULE.standard.reg, (match, lines, toc) => {
+        if (!this.allowMultiToc && !this.isFirstTocToken) {
+          // 需要补齐非捕获的\n，以及第一个分组中的\n
+          return `\n${lines}${emptyLinePlaceholder}`;
+        }
+        this.isFirstTocToken = false;
+        const placeHolder = this.pushCache(match);
+        return prependLineFeedForParagraph(match, placeHolder);
+      });
+    }
+    return $str;
+  }
+
+  makeHtml(str) {
+    return str;
+  }
+
+  $makeLevel(num) {
+    let ret = '';
+    for (let i = this.baseLevel; i < num; i++) {
+      ret += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
+    }
+    return ret;
+  }
+
+  /**
+   * 生成TOC节点HTML
+   * @param {{ level: number; id: string; text: string }} node Toc节点对象
+   * @param {boolean} prependWhitespaceIndent 是否在文本前插入缩进空格
+   * @param {boolean} [closeTag=true] 是否闭合标签
+   * @returns {string}
+   */
+  $makeTocItem(node, prependWhitespaceIndent, closeTag = true) {
+    let nodePrefix = '';
+    if (prependWhitespaceIndent) {
+      nodePrefix = this.$makeLevel(node.level);
+    }
+    const tocLink = this.linkProcessor(`#${node.id}`.replace(/safe_/g, '')); // transform header id to avoid being sanitized
+    return `<li class="${this.tocNodeClass}${this.showAutoNumber ? ` toc-li-${node.level}` : ''}">
+    ${nodePrefix}<a href="${tocLink}" class="level-${node.level}" target="_self">${node.text}</a>${
+      closeTag ? '</li>' : ''
+    }`;
+  }
+
+  $makePlainToc(tocNodeList) {
+    // this.baseLevel = Math.min(...tocNodeList.map((node) => node.level));
+    const items = tocNodeList.map((node) => this.$makeTocItem(node, true));
+    return items.join('');
+  }
+
+  /**
+   * 生成嵌套的TOC列表，算法思路参考flexmark
+   * @see https://github.com/vsch/flexmark-java/blob/master/flexmark-ext-toc/
+   * src/main/java/com/vladsch/flexmark/ext/toc/TocUtils.java#L140-L227
+   *
+   * @param {{ level:number; id:string; text:string }[]} nodeList 节点列表
+   * @returns {string}
+   */
+  $makeNestedToc(nodeList) {
+    let lastLevel = 0;
+    const unclosedItem = new Array(7).fill(false);
+    const unclosedList = new Array(7).fill(false);
+    // lists nodes for debug
+    // const lists = [];
+    // const nodes = [];
+    let html = '';
+    nodeList.forEach((node) => {
+      const { level: nodeLevel } = node;
+      if (lastLevel === 0) {
+        for (let i = nodeLevel; i >= this.baseLevel; i--) {
+          html += '<ul>';
+          // lists.push('ul');
+          // nodes.push(null);
+          unclosedList[i] = true;
+        }
+        html += this.$makeTocItem(node, false, false);
+        // lists.push('li');
+        // nodes.push(node);
+        unclosedItem[nodeLevel] = true;
+        lastLevel = nodeLevel;
+        return;
+      }
+      if (nodeLevel < lastLevel) {
+        // 减少层级
+        for (let i = lastLevel; i >= nodeLevel; i--) {
+          if (unclosedItem[i]) {
+            html += '</li>';
+            // lists.push('/li');
+            // nodes.push(null);
+            unclosedItem[i] = false;
+          }
+          // 减少层级时，不闭合当前层级的列表，只闭合同层级的列表项
+          if (unclosedList[i] && i > nodeLevel) {
+            html += '</ul>';
+            // lists.push('/ul');
+            // nodes.push(null);
+            unclosedList[i] = false;
+          }
+        }
+        unclosedItem[nodeLevel] = true;
+        html += this.$makeTocItem(node, false, false);
+        // lists.push('li');
+        // nodes.push(node);
+        lastLevel = nodeLevel;
+      } else if (nodeLevel === lastLevel) {
+        if (unclosedItem[lastLevel]) {
+          html += '</li>';
+          // lists.push('/li');
+          // nodes.push(null);
+        }
+        html += this.$makeTocItem(node, false, false);
+        // lists.push('li');
+        // nodes.push(node);
+        unclosedItem[nodeLevel] = true;
+        unclosedList[nodeLevel] = true;
+      } else {
+        // 增加层级
+        for (let i = lastLevel + 1; i <= nodeLevel; i++) {
+          html += '<ul>';
+          // lists.push('ul');
+          // nodes.push(null);
+          unclosedList[i] = true;
+        }
+        unclosedItem[nodeLevel] = true;
+        html += this.$makeTocItem(node, false, false);
+        // lists.push('li');
+        // nodes.push(node);
+        lastLevel = nodeLevel;
+      }
+    });
+    for (let i = lastLevel; i >= this.baseLevel; i--) {
+      if (unclosedItem[i]) {
+        html += '</li>';
+        // lists.push('/li');
+        // nodes.push(null);
+        unclosedItem[i] = false;
+      }
+      if (unclosedList[i]) {
+        html += '</ul>';
+        // lists.push('/ul');
+        // nodes.push(null);
+        unclosedList[i] = false;
+      }
+    }
+    // console.log(lists, nodes);
+    // console.log(html);
+    return html;
+  }
+
+  $makeToc(arr, dataSign, preLinesMatch) {
+    const lines = calculateLinesOfParagraph(preLinesMatch, 1);
+    let ret = `<div class="${this.tocContainerClass}${this.showAutoNumber ? ' auto-num-toc' : ''}"
+      data-sign="${dataSign}-${lines}" data-lines="${lines}">`;
+    ret += `<p class="${this.tocTitleClass}">${this.$locale?.toc ?? '目录'}</p>`;
+    if (arr.length <= 0) {
+      return '';
+    }
+    this.baseLevel = Math.min(...arr.map((node) => node.level));
+    if (this.tocStyle === 'nested') {
+      ret += this.$makeNestedToc(arr);
+    } else {
+      ret += this.$makePlainToc(arr);
+    }
+    ret += '</div>';
+    return ret;
+  }
+
+  afterMakeHtml(str) {
+    let $str = super.afterMakeHtml(str);
+    const headerList = [];
+    const headerRegex = /<h([1-6])[^>]*? id="([^"]+?)"[^>]*?>(?:<a[^/]+?\/a>|)(.+?)<\/h\1>/g;
+    let str2Hash = '';
+    $str.replace(headerRegex, (match, level, id, text) => {
+      const $text = text.replace(/~fn#[0-9]+#/g, '');
+      headerList.push({ level: +level, id, text: $text });
+      str2Hash += `${level}${id}`;
+    });
+    str2Hash = this.$engine.hash(str2Hash);
+    $str = $str.replace(/(?:^|\n)(\[\[|\[|【【)(toc|TOC)(\]\]|\]|】】)([<~])/, (match) =>
+      match.replace(/(\]\]|\]|】】)([<~])/, '$1\n$2'),
+    );
+    // 首先识别扩展语法
+    // TODO: fix this error
+    // @ts-expect-error
+    $str = $str.replace(this.RULE.extend.reg, (match, preLinesMatch) =>
+      this.$makeToc(headerList, str2Hash, preLinesMatch),
+    );
+    // 处理标准语法
+    // TODO: fix this error
+    // @ts-expect-error
+    $str = $str.replace(this.RULE.standard.reg, (match, preLinesMatch) =>
+      this.$makeToc(headerList, str2Hash, preLinesMatch),
+    );
+    // 重置toc状态
+    this.isFirstTocToken = true;
+    return $str;
+  }
+
+  test(str, flavor) {
+    return this.RULE[flavor].reg ? this.RULE[flavor].reg.test(str) : false;
+  }
+
+  /**
+   * TODO: fix type errors, prefer use `rules` for multiple spec instead
+   * @returns
+   */
+  rule() {
+    const extend = {
+      begin: '(?:^|\\n)(\\n*)',
+      end: '(?=$|\\n)',
+      content: '[ ]*((?:【【|\\[\\[)(?:toc|TOC)(?:\\]\\]|】】))[ ]*',
+    };
+    extend.reg = new RegExp(extend.begin + extend.content + extend.end, 'g');
+    const standard = { begin: '(?:^|\\n)(\\n*)', end: '(?=$|\\n)', content: '[ ]*(\\[(?:toc|TOC)\\])[ ]*' };
+    standard.reg = new RegExp(standard.begin + standard.content + standard.end, 'g');
+    return /** @type {any} */ ({ extend, standard });
+  }
+}

package/src/core/hooks/Transfer.js

@@ -0,0 +1,47 @@
+/**
+ * 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.js';
+
+export default class Transfer extends SyntaxBase {
+  static HOOK_NAME = 'transfer';
+
+  // constructor() {
+  //     super();
+  // }
+
+  rule() {
+    return {
+      begin: '',
+      content: '',
+      end: '',
+      reg: new RegExp(''),
+    };
+  }
+
+  beforeMakeHtml(str) {
+    return str.replace(/\\\n/g, '\\ \n');
+  }
+
+  afterMakeHtml(str) {
+    let $str = str.replace(/~Q/g, '~');
+    $str = $str.replace(/~X/g, '`');
+    $str = $str.replace(/~Y/g, '!');
+    $str = $str.replace(/~Z/g, '#');
+    $str = $str.replace(/~&/g, '&');
+    $str = $str.replace(/~K/g, '/');
+    return $str;
+  }
+}

package/src/core/hooks/Underline.js

@@ -0,0 +1,37 @@
+/**
+ * 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';
+
+export default class Underline extends SyntaxBase {
+  static HOOK_NAME = 'underline';
+
+  // constructor() {
+  //     super();
+  // }
+
+  makeHtml(str) {
+    if (!this.test(str)) {
+      return str;
+    }
+    return str.replace(this.RULE.reg, '$1<span style="text-decoration: underline;">$2</span>$3');
+  }
+
+  rule() {
+    const ret = { begin: '(^| )\\/', end: '\\/( |$)', content: '([^\\n]+?)' };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'g');
+    return ret;
+  }
+}