feat: base toolbar tip (#128)

* feat: base toolbar tip * fix: toolbar tip text with i18n * fix: z-index in fullscreen * fix: fullscreen mode switch tooltip still display * feat: change language update tooltip
opentiny · Nov 28, 2024 · a69103c · a69103c
1 parent 5ebed20
commit a69103c
Show file tree

Hide file tree

Showing 14 changed files with 269 additions and 73 deletions.
diff --git a/packages/docs/fluent-editor/demos/custom-toolbar.vue b/packages/docs/fluent-editor/demos/custom-toolbar.vue
@@ -23,7 +23,8 @@ const TOOLBAR_CONFIG = [
   [{ header: [1, 2, 3, 4, 5, 6, false] }, { font: ['songti', 'yahei', 'kaiti', 'heiti', 'lishu', 'mono', 'arial', 'arialblack', 'comic', 'impact', 'times'] }, { size: ['12px', '14px', '16px', '18px', '20px', '24px', '32px', '36px', '48px', '72px'] }],
   ['bold', 'italic', 'strike', 'underline'],
   [{ color: [] }, { background: [] }],
-  [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+  [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
+  [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
   [{ script: 'sub' }, { script: 'super' }],
   [{ indent: '-1' }, { indent: '+1' }],
   [{ direction: 'rtl' }],

diff --git a/packages/fluent-editor/package.json b/packages/fluent-editor/package.json
@@ -34,7 +34,8 @@
   },
   "dependencies": {
     "lodash-es": "^4.17.15",
-    "quill": "^2.0.0"
+    "quill": "^2.0.0",
+    "quill-toolbar-tip": "^0.0.4"
   },
   "devDependencies": {
     "@types/jest": "^26.0.23",

diff --git a/packages/fluent-editor/src/assets/common.scss b/packages/fluent-editor/src/assets/common.scss
@@ -1,6 +1,4 @@
-// @import './style/theme/color';
-
-$defaultFontSize: 14px;
+@use './common/config.scss' as *;
 
 @mixin ellipsis($width) {
   width: $width;
@@ -278,7 +276,6 @@ $defaultFontSize: 14px;
   }
 }
 
-$namespace: fe;
 @function getCssVar($name) {
   @return var(--#{$namespace}-#{$name});
 }

diff --git a/packages/fluent-editor/src/assets/common/config.scss b/packages/fluent-editor/src/assets/common/config.scss
@@ -0,0 +1,4 @@
+$defaultFontSize: 14px;
+$namespace: fe;
+$fullscreenZIndex-normal: 50;
+$fullscreenZIndex-full: 51;
diff --git a/packages/fluent-editor/src/assets/editor.scss b/packages/fluent-editor/src/assets/editor.scss
@@ -1,3 +1,4 @@
+@use './common/config.scss' as *;
 @import './common';
 @import './tasklist';
 @import './better-table';

diff --git a/packages/fluent-editor/src/assets/fullscreen.scss b/packages/fluent-editor/src/assets/fullscreen.scss
@@ -1,3 +1,5 @@
+@use './common/config.scss' as *;
+
 :-webkit-full-screen {
   background-color: white !important;
 }
@@ -23,7 +25,7 @@
   &.ql {
     &-toolbar,
     &-container {
-      @include setCssVar(fullscreen-z-index, 50);
+      @include setCssVar(fullscreen-z-index, $fullscreenZIndex-normal);
 
       position: fixed;
       width: 100%;
@@ -32,7 +34,7 @@
       z-index: getCssVar(fullscreen-z-index);
     }
     &-toolbar {
-      @include setCssVar(fullscreen-container-z-index, calc(getCssVar(fullscreen-z-index) + 1));
+      @include setCssVar(fullscreen-container-z-index, $fullscreenZIndex-full);
 
       top: 0;
       z-index: getCssVar(fullscreen-container-z-index);

diff --git a/packages/fluent-editor/src/assets/toolbar.scss b/packages/fluent-editor/src/assets/toolbar.scss
@@ -1,4 +1,19 @@
+@use './common/config.scss' as *;
 @import './common';
+@import 'quill-toolbar-tip/dist/index.css';
+
+.toolbar-tip__tooltip {
+  @include setCssVar(text-color, #ffffff);
+  @include setCssVar(bg-color, #303133);
+
+  z-index: $fullscreenZIndex-full;
+  color: getCssVar(text-color);
+  background-color: getCssVar(bg-color);
+}
+.dark .toolbar-tip__tooltip {
+  @include setCssVar(text-color, #141414);
+  @include setCssVar(bg-color, #f5f5f5);
+}
 
 $iconHeight: 18px; // 工具栏按钮高度
 $iconPadding: 7.5px; // 工具栏按钮左/右间距

diff --git a/packages/fluent-editor/src/config/i18n/en-us.ts b/packages/fluent-editor/src/config/i18n/en-us.ts
@@ -1,7 +1,4 @@
 export const EN_US = {
-  'undo': 'Undo',
-  'redo': 'Redo',
-  'clean': 'Clear Formatting',
 
   'header': 'Paragraph Formatting',
   'normal': 'Normal',
@@ -12,45 +9,20 @@ export const EN_US = {
   'h5': 'Heading 5',
   'h6': 'Heading 6',
 
-  'font': 'Font',
-  'size': 'Size',
   'lineheight': 'Line Height',
   'songti': 'SimSun',
   'yahei': 'Microsoft Yahei',
   'kaiti': 'KaiTi',
   'heiti': 'SimHei',
   'lishu': 'LiSu',
 
-  'bold': 'Bold',
-  'italic': 'Italic',
-  'underline': 'Underline',
-  'strike': 'Strikethrough',
-
-  'color': 'Font Color',
-  'background': 'Background Color',
-
-  'orderedlist': 'Ordered List',
-  'bulletlist': 'Unordered List',
-  'checklist': 'Task List',
-
   'left': 'Left',
   'center': 'Centered',
   'right': 'Right',
 
-  'image': 'Image',
-  'file': 'File',
-  'table': 'Table',
-  'link': 'Hyperlink',
-
-  'code': 'Inline Code',
   'codeblock': 'Code Block',
-  'blockquote': 'Quote',
-  'superscript': 'Superscript',
-  'subscript': 'Subscript',
   'globallink': 'Link',
 
-  'emoji': 'Emoji',
-  'fullscreen': 'Full Screen',
   'exit-fullscreen': 'Exit Full Screen',
   'help': 'Help',
   'more': 'More',
@@ -103,4 +75,50 @@ export const EN_US = {
   'screenshot': 'Screenshot',
   'uploading': 'Uploading...',
   'sub-title-bg-color': 'Background Color',
+
+  // blot tip name
+  'emoji': 'Emoji',
+  'fullscreen': 'Full Screen',
+  'blockquote': 'Quote',
+  'undo': 'Undo',
+  'redo': 'Redo',
+  'clean': 'Clear Formatting',
+  'bold': 'Bold',
+  'italic': 'Italic',
+  'underline': 'Underline',
+  'strike': 'Strikethrough',
+  'image': 'Image',
+  'file': 'File',
+  'table': 'Table',
+  'link': 'Hyperlink',
+  'code': 'Inline Code',
+  'better-table': 'Table',
+  'code-block': 'Code Block',
+  'formula': 'Formula',
+  'format-painter': 'Format Painter',
+  'video': 'Video',
+  'color': 'Font Color',
+  'background': 'Background Color',
+  'font': 'Font',
+  'size': 'Size',
+  'list-ordered': 'Ordered List',
+  'list-bullet': 'Unordered List',
+  'list-check': 'Task List',
+  'align-left': 'Left aligned',
+  'align-center': 'Center aligned',
+  'align-right': 'Right aligned',
+  'align-justify': 'Justify aligned',
+  'direction-ltr': 'Text Direction Left To Right',
+  'direction-rtl': 'Text Direction Right To Left',
+  'indent--1': 'Minus Indent',
+  'indent-+1': 'Add Indent',
+  'script-super': 'Superscript',
+  'script-sub': 'Subscript',
+  'header-normal': 'Text',
+  'header-1': 'Heading 1',
+  'header-2': 'Heading 2',
+  'header-3': 'Heading 3',
+  'header-4': 'Heading 4',
+  'header-5': 'Heading 5',
+  'header-6': 'Heading 6',
 }
diff --git a/packages/fluent-editor/src/config/i18n/zh-cn.ts b/packages/fluent-editor/src/config/i18n/zh-cn.ts
@@ -1,7 +1,4 @@
 export const ZH_CN = {
-  'undo': '撤销',
-  'redo': '重做',
-  'clean': '清除格式',
 
   'header': '段落格式',
   'normal': '正文',
@@ -12,45 +9,20 @@ export const ZH_CN = {
   'h5': '标题5',
   'h6': '标题6',
 
-  'font': '字体',
-  'size': '字号',
   'lineheight': '行距',
   'songti': '宋体',
   'yahei': '微软雅黑',
   'kaiti': '楷体',
   'heiti': '黑体',
   'lishu': '隶书',
 
-  'bold': '粗体',
-  'italic': '斜体',
-  'underline': '下划线',
-  'strike': '删除线',
-
-  'color': '字体颜色',
-  'background': '背景色',
-
-  'orderedlist': '有序列表',
-  'bulletlist': '无序列表',
-  'checklist': '任务列表',
-
   'left': '左对齐',
   'center': '居中对齐',
   'right': '右对齐',
 
-  'image': '图片',
-  'file': '文件',
-  'table': '表格',
-  'link': '超链接',
-
-  'code': '行内代码',
   'codeblock': '代码块',
-  'blockquote': '引用',
-  'superscript': '上标',
-  'subscript': '下标',
   'globallink': '全局链接',
 
-  'emoji': '表情',
-  'fullscreen': '全屏',
   'exit-fullscreen': '退出全屏',
   'help': '帮助',
   'more': '更多',
@@ -101,4 +73,50 @@ export const ZH_CN = {
   'screenshot': '截图',
   'uploading': '上传中...',
   'sub-title-bg-color': '背景颜色',
+
+  // blot tip name
+  'emoji': '表情',
+  'fullscreen': '全屏',
+  'blockquote': '引用',
+  'undo': '撤销',
+  'redo': '重做',
+  'clean': '清除格式',
+  'bold': '粗体',
+  'italic': '斜体',
+  'underline': '下划线',
+  'strike': '删除线',
+  'image': '图片',
+  'file': '文件',
+  'table': '表格',
+  'link': '超链接',
+  'code': '行内代码',
+  'better-table': '表格',
+  'code-block': '代码块',
+  'formula': '公式',
+  'format-painter': '格式刷',
+  'video': '视频',
+  'color': '字体颜色',
+  'background': '背景色',
+  'font': '字体',
+  'size': '字号',
+  'list-ordered': '有序列表',
+  'list-bullet': '无序列表',
+  'list-check': '任务列表',
+  'align-left': '左对齐',
+  'align-center': '居中对齐',
+  'align-right': '右对齐',
+  'align-justify': '两端对齐',
+  'direction-ltr': '文本方向左到右',
+  'direction-rtl': '文本方向右到左',
+  'indent--1': '减少缩进',
+  'indent-+1': '增加缩进',
+  'script-super': '上标',
+  'script-sub': '下标',
+  'header-normal': '正文',
+  'header-1': '标题1',
+  'header-2': '标题2',
+  'header-3': '标题3',
+  'header-4': '标题4',
+  'header-5': '标题5',
+  'header-6': '标题6',
 }
diff --git a/packages/fluent-editor/src/fluent-editor.ts b/packages/fluent-editor/src/fluent-editor.ts
@@ -21,7 +21,7 @@ import SoftBreak from './soft-break' // 软回车
 import Strike from './strike' // 删除线
 import CustomSyntax from './syntax' // 代码块高亮
 import BetterTable from './table/better-table' // 表格
-import Toolbar from './toolbar' // 工具栏
+import Toolbar, { ToolbarTip } from './toolbar' // 工具栏
 import { isUndefined } from './utils/is'
 import Video from './video' // 视频
 // import GlobalLink from './global-link' // 全局链接
@@ -164,6 +164,7 @@ const registerModules = function () {
           },
         },
       },
+      [ToolbarTip.moduleName]: true,
     },
   }
 
@@ -184,6 +185,7 @@ const registerModules = function () {
       // 'modules/quickmenu': QuickMenu,//暂未开发
       'modules/syntax': CustomSyntax,
       'modules/mathlive': MathliveModule,
+      [`modules/${ToolbarTip.moduleName}`]: ToolbarTip,
 
       'formats/strike': Strike,
       'formats/softBreak': SoftBreak,

diff --git a/packages/fluent-editor/src/fullscreen/handler.ts b/packages/fluent-editor/src/fullscreen/handler.ts
@@ -1,5 +1,6 @@
 import type { FluentEditorToolbar } from '../config/types'
 import { ICONS_CONFIG, namespace } from '../config'
+import { ToolbarTip } from '../toolbar'
 import { lockScroll } from '../utils/scroll-lock'
 
 let exitEscHandlerBindToolbar: (e: KeyboardEvent) => void
@@ -26,6 +27,10 @@ function intoFullscreen(toolbar: FluentEditorToolbar) {
   btn.innerHTML = ICONS_CONFIG['fullscreen-exit']
   window.addEventListener('resize', resizeHandlerBindToolbar)
   document.addEventListener('keydown', exitEscHandlerBindToolbar)
+  const toolbarTipModule = toolbar.quill.getModule(ToolbarTip.moduleName) as ToolbarTip
+  if (toolbarTipModule) {
+    toolbarTipModule.hideAllTips()
+  }
 }
 function exitFullscreen(toolbar: FluentEditorToolbar) {
   toolbar.quill.isFullscreen = false
@@ -37,6 +42,10 @@ function exitFullscreen(toolbar: FluentEditorToolbar) {
   btn.innerHTML = ICONS_CONFIG.fullscreen
   window.removeEventListener('resize', resizeHandlerBindToolbar)
   document.removeEventListener('keydown', exitEscHandlerBindToolbar)
+  const toolbarTipModule = toolbar.quill.getModule(ToolbarTip.moduleName) as ToolbarTip
+  if (toolbarTipModule) {
+    toolbarTipModule.hideAllTips()
+  }
 }
 export function fullscreenHandler(this: FluentEditorToolbar) {
   if (this.quill.isFullscreen) {

diff --git a/packages/fluent-editor/src/toolbar/index.ts b/packages/fluent-editor/src/toolbar/index.ts
@@ -178,3 +178,4 @@ class BetterToolbar extends Toolbar {
 }
 
 export default BetterToolbar
+export * from './toolbar-tip'
Original file line number	Diff line number	Diff line change
Expand Up		@@ -178,3 +178,4 @@ class BetterToolbar extends Toolbar {
		}

		export default BetterToolbar
		export * from './toolbar-tip'