feat: #767 代码块、行内代码相关提示交互优化

CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.8.42](https://github.com/Tencent/cherry-markdown/compare/v0.8.41...v0.8.42) (2024-05-27)
+
+
+### Features
+
+* 默认不展示右侧侧边栏 ([b68b1b4](https://github.com/Tencent/cherry-markdown/commit/b68b1b45946120a3ac6321748bc22a4fc52b995a))
+* 优化事件机制，增加cherry.on动态绑定事件机制 ([a24bcd9](https://github.com/Tencent/cherry-markdown/commit/a24bcd9fe95a84b79b83b013e371cc325962f491))
+* 增加表格和加粗斜体语法对流式输出场景的适配 ([ebc8338](https://github.com/Tencent/cherry-markdown/commit/ebc8338488cbfe1299aedb503fc94e11e45e7d42))
+* 增加流式会话的例子 ([88873c2](https://github.com/Tencent/cherry-markdown/commit/88873c2c564ee41137e5151bd836ad31ebd78c79))
+* add configuration and right-click menu processing preview ([#760](https://github.com/Tencent/cherry-markdown/issues/760)) ([6372859](https://github.com/Tencent/cherry-markdown/commit/6372859407d22a1c625bc6a1ffbaf88ec0d32226))
+* **vscodePlugin:** add webview icon ([#754](https://github.com/Tencent/cherry-markdown/issues/754)) ([b38ceea](https://github.com/Tencent/cherry-markdown/commit/b38ceea4b1df707e5facffdab7e33dcd13fc016f))
+
+
+### Bug Fixes
+
+* 当预览区只有一行内容时，导出文档api报错 ([f4b6201](https://github.com/Tencent/cherry-markdown/commit/f4b620155aae85b19bcd96c5ae8753e82d455c98))
+* 联想配置模板失效 ([#757](https://github.com/Tencent/cherry-markdown/issues/757)) ([f93e2af](https://github.com/Tencent/cherry-markdown/commit/f93e2afbbba88ae4045e0e7558cc875e66001aca))
+* 修复列表有多行时选区只选择第一行的问题 ([082a032](https://github.com/Tencent/cherry-markdown/commit/082a032c4717f7b22c4b331632f7f3dd836cebf9))
+* 右侧编辑列表过程中, 输入回车后, 再次编辑此列表, 数据会异常 [#751](https://github.com/Tencent/cherry-markdown/issues/751) ([#772](https://github.com/Tencent/cherry-markdown/issues/772)) ([3e1e9fd](https://github.com/Tencent/cherry-markdown/commit/3e1e9fd057c0008f5f3d001a818fda1a8291b0a9))
+
 ### [0.8.41](https://github.com/Tencent/cherry-markdown/compare/v0.8.40...v0.8.41) (2024-05-06)
 
 

README.CN.md

@@ -27,6 +27,7 @@
 - [图片所见即所得编辑尺寸](https://tencent.github.io/cherry-markdown/examples/img.html)
 - [表格编辑](https://tencent.github.io/cherry-markdown/examples/table.html)
 - [标题自动序号](https://tencent.github.io/cherry-markdown/examples/head_num.html)
+- [流式输入模式（AI chart场景）](https://tencent.github.io/cherry-markdown/examples/ai_chat.html)
 
 
 -----

README.md

@@ -31,6 +31,7 @@ English | [简体中文](./README.CN.md)
 - [img wysiwyg](https://tencent.github.io/cherry-markdown/examples/img.html)
 - [table wysiwyg](https://tencent.github.io/cherry-markdown/examples/table.html)
 - [headers with auto num](https://tencent.github.io/cherry-markdown/examples/head_num.html)
+- [流式输入模式（AI chart场景）](https://tencent.github.io/cherry-markdown/examples/ai_chat.html)
 
 -----
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cherry-markdown",
   "license": "Apache-2.0",
-  "version": "0.8.41",
+  "version": "0.8.42",
   "description": "a new markdown editor",
   "repository": {
     "type": "git",

src/core/hooks/SuggestList.js

@@ -18,14 +18,17 @@
  * 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);
+export const suggesterKeywords = '/·￥、：“”【】（）《》`'.concat(addonsKeywords);
 /*
  * 系统联想候选表，主要为'、'以及'、'的联想。
  */
@@ -256,11 +259,59 @@ const MoreSuggestList = [
     value: `”“`,
     goLeft: 1,
   },
+  {
+    icon: 'FullWidth',
+    label: '行内代码',
+    keyword: '`',
+    value: '``',
+    goLeft: 1,
+  },
+  {
+    icon: 'FullWidth',
+    label: '代码块',
+    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);
+const OtherSuggestList = HalfWidthSuggestList.concat(MoreSuggestList).concat(CodeLangSuggestList);
+
 export function allSuggestList(keyword, locales) {
   const systemSuggestList = [].concat(SystemSuggestList);
   const otherSuggestList = [].concat(OtherSuggestList);

src/core/hooks/Suggester.js

@@ -123,8 +123,13 @@ export default class Suggester extends SyntaxBase {
             .replace(new RegExp(`^${suggesterKeyword}`, 'g'), '') // 删掉word当中suggesterKeywords出现的字符
             .split('')
             .join('.*?');
+          // 匹配任何包含 "keyword" 的字符串，无论 "keyword" 是在字符串的开头、中间还是结尾，并且不区分大小写
           const test = new RegExp(`^.*?${keyword}.*?$`, 'i');
           const suggestList = systemSuggestList.filter((item) => {
+            // 处理精确匹配
+            if (item.exactMatch) {
+              return !word || item.keyword === word;
+            }
             // TODO: 首次联想的时候会把所有的候选项列出来，后续可以增加一些机制改成默认拉取一部分候选项
             return !word || test.test(item.keyword);
           });
@@ -535,11 +540,17 @@ class SuggesterPanel {
       if (result) {
         this.editor.editor.replaceRange(result, cursorFrom, cursorTo);
       }
-      // 控制光标左移一位或者选中某个范围
+      // 控制光标左移若干位
       if (this.optionList[idx].goLeft) {
         const cursor = this.editor.editor.getCursor();
         this.editor.editor.setCursor(cursor.line, cursor.ch - this.optionList[idx].goLeft);
       }
+      // 控制光标上移若干位
+      if (this.optionList[idx].goTop) {
+        const cursor = this.editor.editor.getCursor();
+        this.editor.editor.setCursor(cursor.line - this.optionList[idx].goTop, cursor.ch);
+      }
+      // 选中某个范围
       if (this.optionList[idx].selection) {
         const { line } = this.editor.editor.getCursor();
         const { ch } = this.editor.editor.getCursor();
@@ -651,6 +662,21 @@ class SuggesterPanel {
       selectedItem.classList.remove('cherry-suggester-panel__item--selected');
 
       nextElement.classList.add('cherry-suggester-panel__item--selected');
+
+      // 提示面板高度
+      const suggestPanelHeight = this.$suggesterPanel.offsetHeight;
+      // 可视区域范围上端
+      const viewTop = this.$suggesterPanel.scrollTop;
+      // 可视区域范围下端
+      const viewBottom = viewTop + suggestPanelHeight;
+      // item的上端
+      const nextEleTop = nextElement.offsetTop;
+      // item高度
+      const nextEleHeight = nextElement.offsetHeight;
+      // 当前元素全部或部分在可视区域之外，就滚动
+      if (nextEleTop < viewTop || nextEleTop + nextEleHeight > viewBottom) {
+        this.$suggesterPanel.scrollTop = nextEleTop - suggestPanelHeight / 2;
+      }
     } else if (keyCode === 13) {
       const index = this.findSelectedItemIndex();
       if (index >= 0) {

src/sass/cherry.scss

@@ -741,6 +741,8 @@
   border-radius: 2px;
   max-height: 500px;
   box-shadow: 0 2px 8px 1px #00000033;
+  overflow-x: hidden;
+  overflow-y: auto;
 
   .cherry-suggester-panel__item {
     border: none;
@@ -783,33 +785,34 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  background: #FFFFFF33;
+  background: #ffffff33;
   margin-right: 8px;
   box-sizing: border-box;
   user-select: none;
   box-shadow: 0px 5px 11px #33333333;
   border-radius: 10px;
   transition: all 0.3s;
   &:hover {
-    background-color: #FFF;
+    background-color: #fff;
     width: 260px;
   }
   .cherry-toc-head {
     border-bottom: 1px dashed #33333333;
     padding: 5px;
-    .cherry-toc-title{
+    .cherry-toc-title {
       font-size: 16px;
       font-weight: bold;
       padding-left: 5px;
     }
     .ch-icon-chevronsLeft {
       display: none;
     }
-    .ch-icon-chevronsRight, .ch-icon-chevronsLeft {
+    .ch-icon-chevronsRight,
+    .ch-icon-chevronsLeft {
       padding: 5px;
       position: absolute;
       right: 0;
-      top:0;
+      top: 0;
     }
     i {
       cursor: pointer;
@@ -867,7 +870,7 @@
     width: 30px;
     height: calc(100% - 200px);
     max-height: 600px;
-    background: #FFFFFF00;
+    background: #ffffff00;
     box-shadow: none;
     border-radius: 0;
     .cherry-toc-head {
@@ -894,49 +897,51 @@
       }
     }
   }
-  
+
   &.auto-num {
     .cherry-toc-list {
       counter-reset: toclevel1;
 
-      .cherry-toc-one-a__1{
+      .cherry-toc-one-a__1 {
         counter-reset: toclevel2;
       }
-      .cherry-toc-one-a__2{
+      .cherry-toc-one-a__2 {
         counter-reset: toclevel3;
       }
-      .cherry-toc-one-a__3{
+      .cherry-toc-one-a__3 {
         counter-reset: toclevel4;
       }
-      .cherry-toc-one-a__4{
+      .cherry-toc-one-a__4 {
         counter-reset: toclevel5;
       }
-      .cherry-toc-one-a__5{
+      .cherry-toc-one-a__5 {
         counter-reset: toclevel6;
       }
-      .cherry-toc-one-a__1:before{
+      .cherry-toc-one-a__1:before {
         counter-increment: toclevel1;
-        content: counter(toclevel1) ". ";
+        content: counter(toclevel1) '. ';
       }
-      .cherry-toc-one-a__2:before{
+      .cherry-toc-one-a__2:before {
         counter-increment: toclevel2;
-        content: counter(toclevel1) "." counter(toclevel2) ". ";
+        content: counter(toclevel1) '.' counter(toclevel2) '. ';
       }
-      .cherry-toc-one-a__3:before{
+      .cherry-toc-one-a__3:before {
         counter-increment: toclevel3;
-        content: counter(toclevel1) "." counter(toclevel2) "." counter(toclevel3) ". ";
+        content: counter(toclevel1) '.' counter(toclevel2) '.' counter(toclevel3) '. ';
       }
-      .cherry-toc-one-a__4:before{
+      .cherry-toc-one-a__4:before {
         counter-increment: toclevel4;
-        content: counter(toclevel1) "." counter(toclevel2) "." counter(toclevel3) "." counter(toclevel4) ". ";
+        content: counter(toclevel1) '.' counter(toclevel2) '.' counter(toclevel3) '.' counter(toclevel4) '. ';
       }
-      .cherry-toc-one-a__5:before{
+      .cherry-toc-one-a__5:before {
         counter-increment: toclevel5;
-        content: counter(toclevel1) "." counter(toclevel2) "." counter(toclevel3) "." counter(toclevel4) "." counter(toclevel5) ". ";
+        content: counter(toclevel1) '.' counter(toclevel2) '.' counter(toclevel3) '.' counter(toclevel4) '.'
+          counter(toclevel5) '. ';
       }
-      .cherry-toc-one-a__6:before{
+      .cherry-toc-one-a__6:before {
         counter-increment: toclevel5;
-        content: counter(toclevel1) "." counter(toclevel2) "." counter(toclevel3) "." counter(toclevel4) "." counter(toclevel5) "." counter(toclevel6) ". ";
+        content: counter(toclevel1) '.' counter(toclevel2) '.' counter(toclevel3) '.' counter(toclevel4) '.'
+          counter(toclevel5) '.' counter(toclevel6) '. ';
       }
     }
   }