refactor: suggester初始化机制；refactor: 最简版demo；fix: 超链接规则过严导致带感叹号的url被转义

Tencent · Sep 5, 2023 · c40d25d · c40d25d
1 parent 3c3a103
commit c40d25d
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 57 deletions.
diff --git a/README.CN.md b/README.CN.md
@@ -62,7 +62,8 @@ Cherry Markdown 有多种样式主题选择
 
 ### 在线体验
 
-- [basic](https://tencent.github.io/cherry-markdown/examples/index.html)
+- [全功能](https://tencent.github.io/cherry-markdown/examples/index.html)
+- [基础版](https://tencent.github.io/cherry-markdown/examples/basic.html)
 - [H5](https://tencent.github.io/cherry-markdown/examples/h5.html)
 - [多实例](https://tencent.github.io/cherry-markdown/examples/multiple.html)
 - [无 toolbar](https://tencent.github.io/cherry-markdown/examples/notoolbar.html)
@@ -119,6 +120,7 @@ yarn add [email protected]
 #### ESM
 
 ```javascript
+import 'cherry-markdown/dist/cherry-markdown.css';
 import Cherry from 'cherry-markdown';
 const cherryInstance = new Cherry({
   id: 'markdown-container',
@@ -141,6 +143,7 @@ const htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!')
 ### 完整模式 (图形界面)
 
 ```javascript
+import 'cherry-markdown/dist/cherry-markdown.css';
 import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
 const cherryInstance = new Cherry({
   id: 'markdown-container',
@@ -165,6 +168,7 @@ const htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!')
 核心构建包不包含 mermaid 依赖，需要手动引入相关插件。
 
 ```javascript
+import 'cherry-markdown/dist/cherry-markdown.css';
 import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
 import CherryMermaidPlugin from 'cherry-markdown/dist/addons/cherry-code-block-mermaid-plugin';
 import mermaid from 'mermaid';
@@ -189,6 +193,7 @@ const cherryInstance = new Cherry({
 **recommend** 使用异步引入，以下为 webpack 异步引入样例。
 
 ```javascript
+import 'cherry-markdown/dist/cherry-markdown.css';
 import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
 
 const registerPlugin = async () => {

diff --git a/README.md b/README.md
@@ -66,7 +66,8 @@ click [here](https://github.com/Tencent/cherry-markdown/wiki/%E7%89%B9%E6%80%A7%
 
 ### Demos
 
-- [basic](https://tencent.github.io/cherry-markdown/examples/index.html)
+- [full model](https://tencent.github.io/cherry-markdown/examples/index.html)
+- [basic](https://tencent.github.io/cherry-markdown/examples/basic.html)
 - [mobile](https://tencent.github.io/cherry-markdown/examples/h5.html)
 - [multiple instances](https://tencent.github.io/cherry-markdown/examples/multiple.html)
 - [editor without toolbar](https://tencent.github.io/cherry-markdown/examples/notoolbar.html)
@@ -146,6 +147,7 @@ Because the size of the mermaid library is very large, the cherry build product
 ### Full mode (With UI Interface)
 
 ```javascript
+import 'cherry-markdown/dist/cherry-markdown.css';
 import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
 const cherryInstance = new Cherry({
   id: 'markdown-container',
@@ -170,6 +172,7 @@ const htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!')
 The core build package does not contain mermaid dependency, should import related plug-ins manually.
 
 ```javascript
+import 'cherry-markdown/dist/cherry-markdown.css';
 import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
 import CherryMermaidPlugin from 'cherry-markdown/dist/addons/cherry-code-block-mermaid-plugin';
 import mermaid from 'mermaid';
@@ -194,6 +197,7 @@ const cherryInstance = new Cherry({
 **recommend** Using Dynamic import, the following is an example of webpack Dynamic import.
 
 ```javascript
+import 'cherry-markdown/dist/cherry-markdown.css';
 import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
 
 const registerPlugin = async () => {

diff --git a/examples/basic.html b/examples/basic.html
@@ -1,45 +1,44 @@
 <!DOCTYPE html>
-<html lang="en">
-
+<html>
 <head>
   <meta charset="UTF-8">
   <title>Cherry Editor - Markdown Editor</title>
+  <link rel="stylesheet" type="text/css" href="../dist/cherry-markdown.css">
+  <link rel="Shortcut Icon" href="../logo/favicon.ico">
   <style>
-    html,
+    html {
+      height: 100%;
+    }
     body {
-      margin: 0;
-      padding: 0;
       height: 100%;
       overflow: hidden;
+      margin: 0;
     }
-
-    video {
-      max-width: 400px;
-    }
-
-    #demo-val {
-      display: none;
-    }
-
-    img {
-      max-width: 100%;
-    }
-    iframe.cherry-dialog-iframe {
-      width: 100%;
-      height: 100%;
+    #markdown {
+      min-width: 1800px;
+      max-width: 2600px;
+      width: 70%;
+      margin: 0 auto;
     }
   </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">
 </head>
 
 <body>
-  <div id="dom_mask" style="position: absolute; top: 40px; height: 20px; width: 100%;"></div>
   <div id="markdown"></div>
   <script src="../dist/cherry-markdown.js"></script>
-  <script src="./scripts/basic.js"></script>
 </body>
-
+<script>
+var config = {
+  id: 'markdown',
+  value: '',
+  callback: {
+    afterChange: function(md, html) {
+      console.log('change');
+    }
+  },
+};
+var sourceCode = document.documentElement.outerHTML;
+var cherry = new Cherry(config);
+cherry.setValue(`##源码如下：\n\`\`\` html\n${sourceCode}\n\`\`\``);
+</script>
 </html>
diff --git a/examples/markdown/basic.md b/examples/markdown/basic.md
@@ -1,7 +1,8 @@
 # 例子
 > [Github 地址](https://github.com/Tencent/cherry-markdown){target=_blank}
 
-- [basic](index.html){target=_blank}
+- [full model](index.html){target=_blank}
+- [basic](basic.html){target=_blank}
 - [H5](h5.html){target=_blank}
 - [多实例](multiple.html){target=_blank}
 - [无 toolbar](notoolbar.html){target=_blank}

diff --git a/examples/scripts/basic.js b/examples/scripts/basic.js
diff --git a/src/core/hooks/Suggester.js b/src/core/hooks/Suggester.js
@@ -76,6 +76,7 @@ export default class Suggester extends SyntaxBase {
 
     this.config = config;
     this.RULE = this.rule();
+    this.suggesterPanel = new SuggesterPanel();
   }
 
   afterInit(callback) {
@@ -222,18 +223,18 @@ export default class Suggester extends SyntaxBase {
     });
 
     // 反复初始化时， 缓存还在， dom 已更新情况
-    if (suggesterPanel.hasEditor()) {
-      suggesterPanel.editor = null;
+    if (this.suggesterPanel.hasEditor()) {
+      this.suggesterPanel.editor = null;
     }
   }
 
   makeHtml(str) {
     if (!this.RULE.reg) return str;
-    if (!suggesterPanel.hasEditor() && isBrowser()) {
+    if (!this.suggesterPanel.hasEditor() && isBrowser()) {
       const { editor } = this.$engine.$cherry;
-      suggesterPanel.setEditor(editor);
-      suggesterPanel.setSuggester(this.suggester);
-      suggesterPanel.bindEvent();
+      this.suggesterPanel.setEditor(editor);
+      this.suggesterPanel.setSuggester(this.suggester);
+      this.suggesterPanel.bindEvent();
     }
     if (isLookbehindSupported()) {
       return str.replace(this.RULE.reg, this.toHtml.bind(this));
@@ -274,11 +275,11 @@ export default class Suggester extends SyntaxBase {
   }
 
   mounted() {
-    if (!suggesterPanel.hasEditor() && isBrowser()) {
+    if (!this.suggesterPanel.hasEditor() && isBrowser()) {
       const { editor } = this.$engine.$cherry;
-      suggesterPanel.setEditor(editor);
-      suggesterPanel.setSuggester(this.suggester);
-      suggesterPanel.bindEvent();
+      this.suggesterPanel.setEditor(editor);
+      this.suggesterPanel.setSuggester(this.suggester);
+      this.suggesterPanel.bindEvent();
     }
   }
 }
@@ -290,14 +291,19 @@ class SuggesterPanel {
     this.optionList = [];
     this.cursorMove = true;
     this.suggesterConfig = {};
+  }
 
+  /**
+   * 如果没有panel，则尝试初始化一个，在node模式不初始化
+   */
+  tryCreatePanel() {
     if (!this.$suggesterPanel && isBrowser() && document) {
-      document?.body?.appendChild(this.createDom(SuggesterPanel.panelWrap));
+      document?.body?.appendChild(this.createDom(this.panelWrap));
       this.$suggesterPanel = document?.querySelector('.cherry-suggester-panel');
     }
   }
 
-  static panelWrap = `<div class="cherry-suggester-panel"></div>`;
+  panelWrap = `<div class="cherry-suggester-panel"></div>`;
 
   hasEditor() {
     return !!this.editor && !!this.editor.editor.display && !!this.editor.editor.display.wrapper;
@@ -343,7 +349,7 @@ class SuggesterPanel {
       if (typeof extraKeys[key] === 'function') {
         const proxyTarget = extraKeys[key];
         extraKeys[key] = (codemirror) => {
-          if (suggesterPanel.cursorMove) {
+          if (this.cursorMove) {
             const res = proxyTarget.call(codemirror, codemirror);
 
             if (res) {
@@ -355,15 +361,15 @@ class SuggesterPanel {
         };
       } else if (!extraKeys[key]) {
         extraKeys[key] = () => {
-          if (suggesterPanel.cursorMove) {
+          if (this.cursorMove) {
             // logic to decide whether to move up or not
             return Pass.toString();
           }
         };
       } else if (typeof extraKeys[key] === 'string') {
         const command = extraKeys[key];
         extraKeys[key] = (codemirror) => {
-          if (suggesterPanel.cursorMove) {
+          if (this.cursorMove) {
             this.editor.editor.execCommand(command);
 
             // logic to decide whether to move up or not
@@ -387,6 +393,7 @@ class SuggesterPanel {
   }
 
   onClickPancelItem() {
+    this.tryCreatePanel();
     this.$suggesterPanel.addEventListener(
       'click',
       (evt) => {
@@ -407,8 +414,9 @@ class SuggesterPanel {
   }
 
   showsuggesterPanel({ left, top, items }) {
+    this.tryCreatePanel();
     if (!this.$suggesterPanel && isBrowser()) {
-      document.body.appendChild(this.createDom(SuggesterPanel.panelWrap));
+      document.body.appendChild(this.createDom(this.panelWrap));
       this.$suggesterPanel = document.querySelector('.cherry-suggester-panel');
     }
     this.updatePanel(items);
@@ -420,6 +428,7 @@ class SuggesterPanel {
   }
 
   hidesuggesterPanel() {
+    this.tryCreatePanel();
     // const $suggesterPanel = document.querySelector('.cherry-suggester-panel');
     if (this.$suggesterPanel) {
       this.$suggesterPanel.style.display = 'none';
@@ -431,6 +440,7 @@ class SuggesterPanel {
    * @param {SuggestList} suggestList
    */
   updatePanel(suggestList) {
+    this.tryCreatePanel();
     let defaultValue = suggestList
       .map((suggest, idx) => {
         if (typeof suggest === 'object' && suggest !== null) {
@@ -644,6 +654,7 @@ class SuggesterPanel {
    * @param {KeyboardEvent} evt
    */
   onKeyDown(codemirror, evt) {
+    this.tryCreatePanel();
     if (!this.$suggesterPanel) {
       return false;
     }
@@ -701,5 +712,3 @@ class SuggesterPanel {
     }
   }
 }
-
-const suggesterPanel = new SuggesterPanel();
diff --git a/src/utils/sanitize.js b/src/utils/sanitize.js
@@ -473,7 +473,5 @@ export function encodeURIComponentRFC3986(str) {
  * @param {string} str
  */
 export function encodeURIOnce(str) {
-  return encodeURI(str)
-    .replace(/[!'()*]/g, (char) => `%${char.charCodeAt(0).toString(16)}`)
-    .replace(/%25/g, '%');
+  return encodeURI(str).replace(/%25/g, '%');
 }