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

package/src/core/hooks/Paragraph.js

@@ -0,0 +1,84 @@
+/**
+ * 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 { blockNames } from '@/utils/sanitize';
+/**
+ * 段落级语法
+ * 段落级语法可以具备以下特性：
+ *  1、排他性，可以排除将当前语法之后的所有段落语法
+ *  2、可排序，在../HooksConfig.js里设置排序，顺序在前面的段落语法先渲染
+ *  3、可嵌套行内语法
+ *
+ * 段落级语法有以下义务：
+ *  1、维护签名，签名用来实现预览区域的局部更新功能
+ *  2、维护行号，行号用来实现编辑区和预览区同步滚动
+ *     每个段落语法负责计算上文的行号，上文行号不是0就是1，大于1会由BR语法计算行号
+ */
+export default class Paragraph extends ParagraphBase {
+  static HOOK_NAME = 'normalParagraph';
+
+  constructor(options) {
+    super();
+    this.initBrReg(options.globalConfig.classicBr);
+  }
+
+  /**
+   * 段落语法的核心渲染函数
+   * @param {string} str markdown源码
+   * @param {Function} sentenceMakeFunc 行内语法渲染器
+   * @returns {string} html内容
+   */
+  makeHtml(str, sentenceMakeFunc) {
+    if (!this.test(str)) {
+      return str;
+    }
+    return str.replace(this.RULE.reg, (match, preLines, content) => {
+      if (this.isContainsCache(match, true)) {
+        return match;
+      }
+      // 判断当前内容里是否包含段落渲染引擎暂存缓存关键字
+      const cacheMixedInMatches = this.isContainsCache(content);
+      const processor = (p) => {
+        if (p.trim() === '') {
+          return '';
+        }
+        // 调用行内语法，获得段落的签名和对应html内容
+        const { sign, html } = sentenceMakeFunc(p);
+        let domName = 'p';
+        // 如果包含html块级标签（比如div、blockquote等），则当前段落外层用div包裹，反之用p包裹
+        const isContainBlockTest = new RegExp(`<(${blockNames})[^>]*>`, 'i');
+        if (isContainBlockTest.test(html)) {
+          domName = 'div';
+        }
+        // 计算行号
+        const lines = this.getLineCount(p, p);
+        return `<${domName} data-sign="${sign}${lines}" data-type="${domName}" data-lines="${lines}">${this.$cleanParagraph(
+          html,
+        )}</${domName}>`;
+      };
+      if (cacheMixedInMatches) {
+        return this.makeExcludingCached(`${preLines}${content}`, processor);
+      }
+      return processor(`${preLines}${content}`);
+    });
+  }
+
+  rule() {
+    const ret = { begin: '(?:^|\\n)(\\n*)', end: '(?=\\s*$|\\n\\n)', content: '([\\s\\S]+?)' };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'g');
+    return ret;
+  }
+}

package/src/core/hooks/Ruby.js

@@ -0,0 +1,34 @@
+/**
+ * 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 Ruby extends SyntaxBase {
+  static HOOK_NAME = 'ruby';
+
+  makeHtml(str) {
+    if (!this.test(str)) {
+      return str;
+    }
+    return str.replace(this.RULE.reg, `$1<ruby>$2<rt>$3</rt></ruby>$4`);
+  }
+
+  rule() {
+    const ret = { begin: '(^| )\\{', end: '\\}( |$)', content: '([^\n]+?)\\|([^\n]+?)' };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'g');
+    return ret;
+  }
+}

package/src/core/hooks/Size.js

@@ -0,0 +1,51 @@
+/**
+ * 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 Size extends SyntaxBase {
+  static HOOK_NAME = 'fontSize';
+
+  // constructor() {
+  //     super();
+  // }
+
+  toHtml(whole, m1, m2, m3) {
+    return `${m1}<span style="font-size:${m2}px;line-height:1em;">${m3}</span>`;
+  }
+
+  makeHtml(str) {
+    if (!this.test(str)) {
+      return 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-9]{1,2})[\\s]([\\w\\W]*?)',
+    };
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'g');
+    return ret;
+  }
+}

package/src/core/hooks/Strikethrough.js

@@ -0,0 +1,54 @@
+/**
+ * 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 Strikethrough extends SyntaxBase {
+  static HOOK_NAME = 'strikethrough';
+
+  constructor({ config } = { config: undefined }) {
+    super({ config });
+    if (!config) {
+      return;
+    }
+    this.needWhitespace = !!config.needWhitespace;
+  }
+
+  /**
+   * 主要逻辑
+   * @param {string} str markdown源码
+   * @returns {string} html内容
+   */
+  makeHtml(str) {
+    if (!this.test(str)) {
+      return str;
+    }
+    return str.replace(this.RULE.reg, '$1<del>$2</del>');
+  }
+
+  rule({ config } = { config: undefined }) {
+    /** @type {import('~types/syntax').BasicHookRegexpRule} */
+    let ret = /** @type {any} */ ({});
+    if (!!config.needWhitespace) {
+      ret = { ...ret, begin: '(^|[\\s])\\~T\\~T', end: '\\~T\\~T(?=\\s|$)', content: '([\\w\\W]+?)' };
+    } else {
+      ret = { ...ret, begin: '(^|[^\\\\])\\~T\\~T', end: '\\~T\\~T', content: '([\\w\\W]+?)' };
+    }
+    ret.reg = new RegExp(ret.begin + ret.content + ret.end, 'g');
+    return ret;
+  }
+}

package/src/core/hooks/Sub.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 Sub extends SyntaxBase {
+  static HOOK_NAME = 'sub';
+
+  // constructor() {
+  //     super();
+  // }
+
+  toHtml(whole, leadingChar, m1) {
+    return `${leadingChar}<sub>${m1}</sub>`;
+  }
+
+  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/SuggestList.js

@@ -0,0 +1,333 @@
+/**
+ * Tencent is pleased to support the open source community by making CherryMarkdown available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
+ * The below software in this distribution may have been modified by THL A29 Limited ("Tencent Modifications").
+ *
+ * All Tencent Modifications are Copyright (C) THL A29 Limited.
+ *
+ * CherryMarkdown is 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 { codePreviewLangSelectList } from '@/utils/code-preview-language-setting';
+
+/*
+ * 外加配置系统联想词
+ */
+export const addonsKeywords = '#';
+/*
+ * 预留联想词
+ */
+export const suggesterKeywords = '/·￥、：“”【】（）《》`'.concat(addonsKeywords);
+/*
+ * 系统联想候选表，主要为'、'以及'、'的联想。
+ */
+const SystemSuggestList = [
+  {
+    icon: 'h1',
+    label: 'H1 Heading',
+    keyword: 'head1',
+    value: '# ',
+  },
+  {
+    icon: 'h2',
+    label: 'H2  Heading',
+    keyword: 'head2',
+    value: '## ',
+  },
+  {
+    icon: 'h3',
+    label: 'H3  Heading',
+    keyword: 'head3',
+    value: '### ',
+  },
+  {
+    icon: 'table',
+    label: 'Table',
+    keyword: 'table',
+    value: '| Header | Header | Header |\n| --- | --- | --- |\n| Content | Content | Content |\n',
+  },
+  {
+    icon: 'code',
+    label: 'Code',
+    keyword: 'code',
+    value: '```\n\n```\n',
+  },
+  {
+    icon: 'link',
+    label: 'Link',
+    keyword: 'link',
+    value: `[title](https://url)`,
+    selection: { from: 'title](https://url)'.length, to: '](https://url)'.length },
+  },
+  {
+    icon: 'checklist',
+    label: 'Checklist',
+    keyword: 'checklist',
+    value: `- [ ] item\n- [x] item`,
+  },
+  {
+    icon: 'tips',
+    label: 'Panel',
+    keyword: 'panel tips info warning danger success',
+    value: `::: primary title\ncontent\n:::\n`,
+  },
+  {
+    icon: 'insertFlow',
+    label: 'Detail',
+    keyword: 'detail',
+    value: `+++ 点击展开更多\n内容\n++- 默认展开\n内容\n++ 默认收起\n内容\n+++\n`,
+  },
+  // {
+  //   icon: 'pen',
+  //   label: '续写',
+  //   keyword: 'xu xie chatgpt',
+  //   value: () => {
+  //     if (!this.$engine.$cherry.options.openai.apiKey) {
+  //       return '请先配置openai apiKey';
+  //     }
+  //     this.$engine.$cherry.toolbar.toolbarHandlers.chatgpt('complement');
+  //     return `\n`;
+  //   },
+  // },
+  // {
+  //   icon: 'pen',
+  //   label: '总结',
+  //   keyword: 'zong jie chatgpt',
+  //   value: () => {
+  //     if (!this.$engine.$cherry.options.openai.apiKey) {
+  //       return '请先配置openai apiKey';
+  //     }
+  //     this.$engine.$cherry.toolbar.toolbarHandlers.chatgpt('summary');
+  //     return `\n`;
+  //   },
+  // },
+];
+/*
+ * 全角联想候选表，用于将全角转为半角。
+ */
+const HalfWidthSuggestList = [
+  {
+    icon: 'FullWidth',
+    label: '`',
+    keyword: '···',
+    value: '`',
+  },
+  {
+    icon: 'FullWidth',
+    label: '$',
+    keyword: '￥',
+    value: '$',
+  },
+  {
+    icon: 'FullWidth',
+    label: '/',
+    keyword: '、',
+    value: '/',
+  },
+  {
+    icon: 'FullWidth',
+    label: '\\',
+    keyword: '、',
+    value: '\\',
+  },
+  {
+    icon: 'FullWidth',
+    label: '"',
+    keyword: '“',
+    value: '"',
+  },
+  {
+    icon: 'FullWidth',
+    label: '"',
+    keyword: '”',
+    value: '"',
+  },
+  {
+    icon: 'FullWidth',
+    label: '[',
+    keyword: '【',
+    value: '[',
+  },
+  {
+    icon: 'FullWidth',
+    label: ']',
+    keyword: '】',
+    value: ']',
+  },
+  {
+    icon: 'FullWidth',
+    label: '(',
+    keyword: '（',
+    value: '(',
+  },
+  {
+    icon: 'FullWidth',
+    label: ')',
+    keyword: '）',
+    value: ')',
+  },
+  {
+    icon: 'FullWidth',
+    label: '<',
+    keyword: '《',
+    value: '<',
+  },
+  {
+    icon: 'FullWidth',
+    label: '>',
+    keyword: '》',
+    value: '>',
+  },
+];
+/*
+ * 更多候选适配，
+ * goLeft用于在选中联想之后向左移动一定距离光标，
+ * selection用于选中光标，from-to即选中范围。
+ */
+const MoreSuggestList = [
+  {
+    icon: 'FullWidth',
+    label: '[]',
+    keyword: '【】',
+    value: `[]`,
+    goLeft: 1,
+  },
+  {
+    icon: 'FullWidth',
+    label: '【】',
+    keyword: '【',
+    value: `【】`,
+    goLeft: 1,
+  },
+  {
+    icon: 'link',
+    label: 'Link',
+    keyword: '【】',
+    value: `[title](https://url)`,
+    selection: { from: 'title](https://url)'.length, to: '](https://url)'.length },
+  },
+  {
+    icon: 'FullWidth',
+    label: '()',
+    keyword: '（',
+    value: `()`,
+    goLeft: 1,
+  },
+  {
+    icon: 'FullWidth',
+    label: '（）',
+    keyword: '（',
+    value: `（）`,
+    goLeft: 1,
+  },
+  {
+    icon: 'FullWidth',
+    label: '<>',
+    keyword: '《》',
+    value: `<>`,
+    goLeft: 1,
+  },
+  {
+    icon: 'FullWidth',
+    label: '《》',
+    keyword: '《》',
+    value: `《》`,
+    goLeft: 1,
+  },
+  {
+    icon: 'FullWidth',
+    label: '""',
+    keyword: '“”',
+    value: `""`,
+    goLeft: 1,
+  },
+  {
+    icon: 'FullWidth',
+    label: '“”',
+    keyword: '“”',
+    value: `”“`,
+    goLeft: 1,
+  },
+  {
+    icon: 'FullWidth',
+    label: 'inlineCode',
+    keyword: '`',
+    value: '``',
+    goLeft: 1,
+  },
+  {
+    icon: 'FullWidth',
+    label: 'codeBlock',
+    keyword: '`',
+    value: '```\n\n```\n',
+    goTop: 2,
+  },
+];
+
+// TODO 提示列表超过一定长度的时候，需要跟随箭头上下滚动列表，以保证待选择项始终可见
+
+// 代码语言的候选表
+const CodeLangSuggestList = (() => {
+  const CodePreviewLangSuggestList = codePreviewLangSelectList.map((lang) => ({
+    icon: 'FullWidth',
+    label: lang,
+    keyword: '```',
+    value: `\`\`\`${lang}\n\n\`\`\`\n`,
+    goTop: 2,
+    exactMatch: true,
+  }));
+
+  const CodePreviewLangSuggestListExact = [];
+  codePreviewLangSelectList.forEach((lang) => {
+    let str = '';
+    for (const i of lang) {
+      str += i;
+      CodePreviewLangSuggestListExact.push({
+        icon: 'FullWidth',
+        label: lang,
+        keyword: `\`\`\`${str}`,
+        value: `\`\`\`${lang}\n\n\`\`\`\n`,
+        goTop: 2,
+        exactMatch: true,
+      });
+    }
+  });
+
+  return CodePreviewLangSuggestList.concat(CodePreviewLangSuggestListExact);
+})();
+
+/*
+ * 除开系统联想候选表的其他所有表之和
+ */
+const OtherSuggestList = HalfWidthSuggestList.concat(MoreSuggestList).concat(CodeLangSuggestList);
+
+export function allSuggestList(keyword, locales) {
+  const systemSuggestList = [].concat(SystemSuggestList);
+  const otherSuggestList = [].concat(OtherSuggestList);
+  systemSuggestList.forEach((item) => {
+    item.label = locales[item.label] || item.label;
+  });
+  otherSuggestList.forEach((item) => {
+    item.label = locales[item.label] || item.label;
+  });
+  if (keyword[0] === '/' || keyword[0] === '、' || addonsKeywords.includes(keyword[0])) {
+    systemSuggestList.forEach((item) => {
+      item.keyword = ''.concat(keyword[0], item.keyword);
+    });
+  }
+  // '、'除了返回系统候选表，还需要返回两个半角字符
+  return otherSuggestList.concat(systemSuggestList).filter((item) => {
+    return item.keyword.startsWith(keyword[0]);
+  });
+}