feat(mention): renderMentionItem support html (#33)

packages/docs/fluent-editor/demos/mention-custom-list.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import FluentEditor from '@opentiny/fluent-editor'
+
+let editor
+
+// @提醒
+const searchKey = 'name'
+const mentionList = [
+  {
+    name: 'kagol',
+    cn: '卡哥',
+    followers: 156,
+    avatar: 'https://avatars.githubusercontent.com/u/9566362?v=4'
+  },
+  {
+    name: 'zzcr',
+    cn: '超哥',
+    followers: 10,
+    avatar: 'https://avatars.githubusercontent.com/u/18521562?v=4'
+  },
+  {
+    name: 'hexqi',
+    cn: '小伍哥',
+    followers: 2,
+    avatar: 'https://avatars.githubusercontent.com/u/18585869?v=4'
+  }
+]
+
+onMounted(() => {
+  // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
+  import('@opentiny/fluent-editor').then((module) => {
+    const FluentEditor = module.default
+
+    editor = new FluentEditor('#editor-mention-custom-list', {
+      theme: 'snow',
+      modules: {
+        mention: {
+          containerClass: 'ql-mention-list-container__custom-list',
+          itemKey: 'cn',
+          searchKey,
+          search: function(term) {
+            return mentionList.filter(item => {
+              return item[searchKey] && String(item[searchKey]).includes(term)
+            })
+          },
+          renderMentionItem: function(item) {
+            return `
+              <div class="item-avatar">
+                <img src="${item.avatar}">
+              </div>
+              <div class="item-info">
+                <div class="item-name">${item.cn}</div>
+                <div class="item-desc">${item.followers}粉丝</div>
+              </div>
+            `
+          }
+        }
+      }
+    })
+  })
+})
+</script>
+
+<template>
+  <div id="editor-mention-custom-list"></div>
+</template>
+
+<style lang="less">
+.ql-mention-list-container.ql-mention-list-container__custom-list .ql-mention-list .ql-mention-item {
+  display: flex;
+  align-items: center;
+  height: 52px;
+  line-height: 1.5;
+  font-size: 12px;
+  padding: 0 12px;
+
+  &.ql-mention-item--active {
+    background-color: #f1f2f3;
+    color: #18191c;
+  }
+
+  .item-avatar {
+    margin-right: 8px;
+
+    img {
+      width: 36px;
+      border-radius: 50%;
+    }
+  }
+
+  .item-info {
+    .item-desc {
+      color: #9499a0;
+    }
+  }
+}
+</style>

packages/docs/fluent-editor/docs/mention.md

@@ -1,7 +1,23 @@
 # @提醒
 
+通过输入 `@` 符号，可以触发提醒功能。
+
+## 基本用法
+
 通过配置 `mention` 模块，可以开启@提醒功能。
 
+:::demo src=demos/mention.vue
+:::
+
+## 自定义列表样式
+
+通过配置 `renderMentionItem` 方法，可以自定义选项列表的样式。
+
+:::demo src=demos/mention-custom-list.vue
+:::
+
+## API
+
 `mention` 模块配置项：
 
 ```typescript
@@ -17,14 +33,11 @@ interface MentionOption {
   maxHeight?: number;
   mentionChar?: string;
   remove?: (data: any) => void;
-  renderMentionItem?: (data: any) => HTMLElement;
-  renderMentionText?: (data: any) => HTMLElement | string;
+  renderMentionItem?: (data: any) => string | HTMLElement;
+  renderMentionText?: (data: any) => string | HTMLElement;
   search?: (term: string) => Promise<any[]>;
   searchKey: string;
   select?: (data: any) => void;
   target?: string;
 }
 ```
-
-:::demo src=demos/mention.vue
-:::

packages/docs/package.json

@@ -16,6 +16,7 @@
     "@types/node": "^15.0.2",
     "@vitepress-code-preview/container": "^1.0.8",
     "@vitepress-code-preview/plugin": "^1.0.4",
+    "less": "^4.2.0",
     "vite": "^2.3.0",
     "vitepress": "^1.3.2"
   },

packages/fluent-editor/src/mention/Mention.ts

@@ -18,8 +18,8 @@ interface MentionOption {
   maxHeight?: number;
   mentionChar?: string;
   remove?: (data: any) => void;
-  renderMentionItem?: (data: any) => HTMLElement;
-  renderMentionText?: (data: any) => HTMLElement | string;
+  renderMentionItem?: (data: any) => string | HTMLElement;
+  renderMentionText?: (data: any) => string | HTMLElement;
   search?: (term: string) => Promise<any[]>;
   searchKey: string;
   select?: (data: any) => void;
@@ -82,7 +82,10 @@ class Mention {
 
     this.options = Object.assign(this.defaultOptions, options);
     const container = document.createElement('div');
-    container.classList.add(this.options.containerClass);
+    container.classList.add('ql-mention-list-container');
+    if (this.options.containerClass !== 'ql-mention-list-container') {
+      container.classList.add(this.options.containerClass);
+    }
     this.mentionListEL = document.createElement('ul');
     this.mentionListEL.classList.add(this.options.listClass, this.options.listHideClass);
     this.mentionListEL.style.cssText += `
@@ -332,7 +335,11 @@ class Mention {
         mentionItemEl.classList.add(this.options.itemActiveClass);
       }
       const renderResult = this.options.renderMentionItem(mentionItem);
-      mentionItemEl.insertAdjacentElement('afterbegin', renderResult);
+      if (typeof renderResult === 'string') {
+        mentionItemEl.insertAdjacentHTML('afterbegin', renderResult);
+      } else {
+        mentionItemEl.insertAdjacentElement('afterbegin', renderResult);
+      }
       wrapEl.appendChild(mentionItemEl);
     });