feat(suggester): add suggester function

Tencent · Dec 17, 2021 · a8c35ed · a8c35ed
1 parent ff105f6
commit a8c35ed
Show file tree

Hide file tree

Showing 6 changed files with 634 additions and 5 deletions.
diff --git a/README.CN.md b/README.CN.md
@@ -14,8 +14,6 @@ Cherry Markdown Editor 是一款 Javascript Markdown 编辑器，具有开箱即
 
 当 Cherry Markdown 编辑器支持的语法不满足开发者需求时，可以快速的进行二次开发或功能扩展。同时，CherryMarkdown编辑器应该由纯JavaScript实现，不应该依赖angular、vue、react等框架技术，框架只提供容器环境即可。
 
-DEMO **Coming soon**
-
 ## 特性
 
 ### 语法特性

diff --git a/README.md b/README.md
@@ -16,8 +16,6 @@ Developer can call and instantiate Cherry Markdown Editor in a very simple way.
 
 When the syntax that Cherry Markdown editor support can not meet your needs, secondary development or function extention can be carried out quickly. At the same time, Cherry Markdown editor should be implemented by pure JavaScript, and should not rely on framework technology such as angular, vue and react. Framework only provide a container environment.
 
-DEMO **Coming soon**
-
 ## Feature
 
 ### Syntax Feature

diff --git a/examples/scripts/suggester-demo.js b/examples/scripts/suggester-demo.js
@@ -0,0 +1,122 @@
+var CustomHookA = Cherry.createSyntaxHook('codeBlock', Cherry.constants.HOOKS_TYPE_LIST.PAR, {
+  makeHtml(str) {
+    console.warn('custom hook', 'hello');
+    return str;
+  },
+  rule(str) {
+    const regex = {
+      begin: '',
+      content: '',
+      end: '',
+    };
+    regex.reg = new RegExp(regex.begin + regex.content + regex.end, 'g');
+    return regex;
+  },
+});
+var suggest = [];
+var list = ['barryhu', 'ivorwei', 'sunsunliu', 'jiaweicui', 'other', 'new'];
+var basicConfig = {
+  id: 'markdown',
+  externals: {
+    echarts: window.echarts,
+    katex: window.katex,
+    MathJax: window.MathJax,
+  },
+  isPreviewOnly: false,
+  engine: {
+    global: {
+      urlProcessor(url, srcType) {
+        console.log(`url-processor`, url, srcType);
+        return url;
+      },
+    },
+    syntax: {
+      table: {
+        enableChart: false,
+        // chartEngine: Engine Class
+      },
+      fontEmphasis: {
+        allowWhitespace: true, // 是否允许首尾空格
+      },
+      mathBlock: {
+        engine: 'MathJax', // katex或MathJax
+        src: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js', // 如果使用MathJax plugins，则需要使用该url通过script标签引入
+      },
+      inlineMath: {
+        engine: 'MathJax', // katex或MathJax
+      },
+      emoji: {
+        useUnicode: false,
+        customResourceURL: 'https://github.githubassets.com/images/icons/emoji/unicode/${code}.png?v8',
+        upperCase: true,
+      },
+      suggester: {
+        suggester: [{
+          // 获取 列表
+          suggestList (word, callback){
+            suggest.push(list[Math.floor(Math.random() * 6)]);
+            if (suggest.length >= 6) {
+              suggest.shift();
+            }
+            callback(suggest);
+          },
+          // 唤醒关键字
+          // default '@'
+          keyword: '@',
+          // 建议模板
+          suggestListRender(valueArray) {
+            return '';
+          },
+          // 回填回调
+          echo(value) {
+            return '';
+          }
+        }]
+      },
+    },
+    customSyntax: {
+      // SyntaxHookClass
+      CustomHook: {
+        syntaxClass: CustomHookA,
+        force: false,
+        after: 'br',
+      },
+    },
+  },
+  toolbars: {
+    toolbar: [
+      'bold',
+      'italic',
+      'strikethrough',
+      '|',
+      'color',
+      'header',
+      '|',
+      'list',
+      {
+        insert: ['image', 'audio', 'video', 'link', 'hr', 'br', 'code', 'formula', 'toc', 'table', 'pdf', 'word'],
+      },
+      'graph',
+      'togglePreview',
+      'settings',
+      'switchModel',
+      'codeTheme',
+      'export',
+    ],
+    sidebar: ['mobilePreview', 'copy'],
+  },
+  editor: {
+    defaultModel: 'edit&preview',
+  },
+  previewer: {
+    // 自定义markdown预览区域class
+    // className: 'markdown'
+  },
+  keydown: [],
+  //extensions: [],
+};
+
+fetch('./markdown/basic.md').then((response) => response.text()).then((value) => {
+  var config = Object.assign({}, basicConfig, { value: value });
+  window.cherry = new Cherry(config);
+});
diff --git a/examples/suggester.html b/examples/suggester.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Cherry Editor - Markdown Editor</title>
+  <style>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    video {
+      max-width: 400px;
+    }
+
+    #demo-val {
+      display: none;
+    }
+
+    img {
+      max-width: 100%;
+    }
+  </style>
+  <link rel="stylesheet" type="text/css" href="../dist/cherry-markdown.css">
+  <link rel="Shortcut Icon" href="./logo/favicon.ico">
+  <link rel="Shortcut Icon" href="../logo/favicon.ico">
+  <link rel="Bookmark" href="../logo/favicon.ico">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
+    integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
+  <link href="./markdown/basic.md" rel="preload">
+</head>
+
+<body>
+  <div id="dom_mask" style="position: absolute; top: 40px; height: 20px; width: 100%;"></div>
+  <div id="markdown"></div>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.js"></script>
+  <!--<script src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>-->
+  <script src="../dist/cherry-markdown.js"></script>
+  <script src="./scripts/suggester-demo.js"></script>
+</body>
+
+</html>
diff --git a/src/core/HooksConfig.js b/src/core/HooksConfig.js
@@ -45,7 +45,7 @@ import HtmlBlock from './hooks/HtmlBlock';
 import Emoji from './hooks/Emoji';
 import Underline from './hooks/Underline';
 import HighLight from './hooks/HighLight';
-
+import Suggester from './hooks/Suggester';
 /**
  * 引擎各语法的配置
  * 主要决定支持哪些语法，以及各语法的执行顺序
@@ -86,6 +86,7 @@ const hooksConfig = [
   Strikethrough,
   Underline,
   HighLight,
+  Suggester,
 ];
 
 export default hooksConfig;