From cb63694a7dba9999c0d92653c65ff27481725a2e Mon Sep 17 00:00:00 2001 From: zzxming Date: Mon, 13 Jan 2025 22:26:56 +0800 Subject: [PATCH 1/4] feat: shortcut key --- packages/fluent-editor/package.json | 3 +- packages/fluent-editor/src/assets/style.scss | 1 + .../fluent-editor/src/config/i18n/en-us.ts | 2 + .../fluent-editor/src/config/i18n/zh-cn.ts | 2 + packages/fluent-editor/src/fluent-editor.ts | 3 +- .../fluent-editor/src/modules/link/index.ts | 8 - .../fluent-editor/src/modules/quick-menu.ts | 100 --------- .../src/modules/shortcut-key/index.ts | 210 ++++++++++++++++++ packages/fluent-editor/src/themes/snow.ts | 3 + pnpm-lock.yaml | 30 ++- 10 files changed, 245 insertions(+), 117 deletions(-) delete mode 100644 packages/fluent-editor/src/modules/quick-menu.ts create mode 100644 packages/fluent-editor/src/modules/shortcut-key/index.ts diff --git a/packages/fluent-editor/package.json b/packages/fluent-editor/package.json index b916960..b3fdb81 100644 --- a/packages/fluent-editor/package.json +++ b/packages/fluent-editor/package.json @@ -35,7 +35,8 @@ "dependencies": { "lodash-es": "^4.17.15", "quill": "^2.0.0", - "quill-easy-color": "^0.0.5" + "quill-easy-color": "^0.0.8", + "quill-shortcut-key": "0.0.1" }, "devDependencies": { "@types/jest": "^26.0.23", diff --git a/packages/fluent-editor/src/assets/style.scss b/packages/fluent-editor/src/assets/style.scss index 2001034..0701b37 100644 --- a/packages/fluent-editor/src/assets/style.scss +++ b/packages/fluent-editor/src/assets/style.scss @@ -6,6 +6,7 @@ url('./iconfont/iconfont.ttf') format('truetype'); } @import 'quill/dist/quill.snow'; +@import 'quill-shortcut-key/index.css'; @import './variable.scss'; @import './common'; diff --git a/packages/fluent-editor/src/config/i18n/en-us.ts b/packages/fluent-editor/src/config/i18n/en-us.ts index 8c2af30..b634423 100644 --- a/packages/fluent-editor/src/config/i18n/en-us.ts +++ b/packages/fluent-editor/src/config/i18n/en-us.ts @@ -102,6 +102,7 @@ export const EN_US = { 'background': 'Background Color', 'font': 'Font', 'size': 'Size', + 'list': 'List', 'list-ordered': 'Ordered List', 'list-bullet': 'Unordered List', 'list-check': 'Task List', @@ -123,6 +124,7 @@ export const EN_US = { 'header-5': 'Heading 5', 'header-6': 'Heading 6', 'header-list': 'Heading List', + 'input-recall-menu-placeholder': 'Input / recall menu', 'clear-color': 'Clear color', 'custom-color': 'Color picker', } diff --git a/packages/fluent-editor/src/config/i18n/zh-cn.ts b/packages/fluent-editor/src/config/i18n/zh-cn.ts index bcfd9ba..25e3a2a 100644 --- a/packages/fluent-editor/src/config/i18n/zh-cn.ts +++ b/packages/fluent-editor/src/config/i18n/zh-cn.ts @@ -100,6 +100,7 @@ export const ZH_CN = { 'background': '背景色', 'font': '字体', 'size': '字号', + 'list': '列表', 'list-ordered': '有序列表', 'list-bullet': '无序列表', 'list-check': '任务列表', @@ -121,6 +122,7 @@ export const ZH_CN = { 'header-5': '标题5', 'header-6': '标题6', 'header-list': '标题列表', + 'input-recall-menu-placeholder': '输入 / 唤起菜单', 'clear-color': '清除颜色', 'custom-color': '选择颜色', } diff --git a/packages/fluent-editor/src/fluent-editor.ts b/packages/fluent-editor/src/fluent-editor.ts index 06c97e6..d5635f6 100644 --- a/packages/fluent-editor/src/fluent-editor.ts +++ b/packages/fluent-editor/src/fluent-editor.ts @@ -16,11 +16,11 @@ import Link from './modules/link' // 超链接 import MathliveModule from './modules/mathlive' // latex公式 import MathliveBlot from './modules/mathlive/formats' import Mention from './modules/mention/Mention' // @提醒 +import { ShortCutKey } from './modules/shortcut-key' import Syntax from './modules/syntax' // 代码块高亮 import BetterTable from './modules/table/better-table' // 表格 import Toolbar from './modules/toolbar' // 工具栏 import { ColorPicker, Picker } from './modules/toolbar/better-picker' -// import QuickMenu from './modules/quick-menu' // 快捷菜单 import SnowTheme from './themes/snow' import Icons from './ui/icons' @@ -54,6 +54,7 @@ FluentEditor.register( 'modules/uploader': Uploader, // make sure register after `HeaderList` 'modules/better-table': BetterTable, + 'modules/shortcut-key': ShortCutKey, 'themes/snow': SnowTheme, diff --git a/packages/fluent-editor/src/modules/link/index.ts b/packages/fluent-editor/src/modules/link/index.ts index b3a97d3..538f322 100644 --- a/packages/fluent-editor/src/modules/link/index.ts +++ b/packages/fluent-editor/src/modules/link/index.ts @@ -23,14 +23,6 @@ SnowTheme.prototype.extendToolbar = function (toolbar) { this.buildButtons(toolbar.container.querySelectorAll('button'), icons) this.buildPickers(toolbar.container.querySelectorAll('select'), icons) this.tooltip = new Tooltip(this.quill, this.options.bounds) - if (toolbar.container.querySelector('.ql-link')) { - this.quill.keyboard.addBinding( - { key: 'k', shortKey: true }, - (_range, context) => { - toolbar.handlers.link.call(toolbar, !context.format.link) - }, - ) - } } export default Link diff --git a/packages/fluent-editor/src/modules/quick-menu.ts b/packages/fluent-editor/src/modules/quick-menu.ts deleted file mode 100644 index 8b30d4d..0000000 --- a/packages/fluent-editor/src/modules/quick-menu.ts +++ /dev/null @@ -1,100 +0,0 @@ -import type Quill from 'quill' - -interface QuickMenuOptions { - container: string - component: any -} - -class QuickMenu { - private container: HTMLDivElement - private hostElement: HTMLDivElement - private quickMenu: HTMLDivElement - private quickMenuContainer: HTMLDivElement - - // @ts-ignore - constructor(private quill: Quill, private options: QuickMenuOptions) { - this.quill = quill - this.options = options - this.container = this.quill.container - this.hostElement = this.container.parentNode as HTMLDivElement - this.quickMenu = this.hostElement.querySelector('.quick-menu') - this.quickMenuContainer = this.quickMenu.querySelector('.quick-menu-container') - quill.keyboard.addBinding({ key: '/' }, this.handleSlashKeyDown) - quill.keyboard.addBinding({ key: 'ArrowUp' }, this.handleArrowUpKey) - quill.keyboard.addBinding({ key: 'ArrowDown' }, this.handleArrowDownKey) - quill.keyboard.addBinding({ key: 'Enter' }, this.handleEnterKey) - quill.keyboard.bindings.Enter.unshift(quill.keyboard.bindings.Enter.pop()) - document.body.addEventListener('click', this.hideQuickMenu.bind(this)) - } - - handleSlashKeyDown = (_range, context) => { - const index = this.quill.selection.savedRange.index - this.quill.insertText(index, '/') - - // 一行的第一个字符为 '/'，且没有格式化，则触发快捷菜单 - const shouldTriggerQuickMenu = context.prefix === '' && Object.keys(context.format).length === 0 - if (shouldTriggerQuickMenu) { - const cursorIndex = this.quill.selection.savedRange.index - const cursorBounds = this.quill.getBounds(cursorIndex) - const { left, top } = cursorBounds - const { left: editorLeft, top: editorTop } = this.container.getBoundingClientRect() - const { left: hostElementLeft, top: hostElementTop } = this.hostElement.getBoundingClientRect() - const relativeLeft = editorLeft - hostElementLeft - const relativeTop = editorTop - hostElementTop - const menuLeft = left + relativeLeft - 5 - const menuTop = top + relativeTop + 20 - - this.quickMenu.style.display = 'block' - const zIndex = this.quill.options.modules.quickmenu.zIndex - let style = `left:${menuLeft}px;top:${menuTop}px;` - if (zIndex || zIndex === 0) { - style += `z-index:${zIndex}` - } - this.quickMenuContainer.setAttribute('style', style) - this.options.component.activeIndex = 0 - } - else { - this.quickMenu.style.display = 'none' - } - } - - private isOpen() { - return this.quickMenuContainer.style.display !== 'none' && this.quickMenu.style.display === 'block' - } - - hideQuickMenu = (event) => { - if (this.quickMenuContainer && !this.quickMenuContainer.contains(event.target)) { - this.quickMenuContainer.style.display = 'none' - } - } - - handleArrowUpKey = (_range, _context) => { - if (this.isOpen()) { - const index = this.options.component.activeIndex - const total = this.options.component.quickMenus.length - this.options.component.activeIndex = (index + total - 1) % total - return false - } - return true - } - - handleArrowDownKey = (_range, _context) => { - if (this.isOpen()) { - const index = this.options.component.activeIndex - const total = this.options.component.quickMenus.length - this.options.component.activeIndex = (index + 1) % total - return false - } - return true - } - - handleEnterKey = (_range, _context) => { - if (this.isOpen()) { - this.options.component.onEnter() - return false - } - return true - } -} - -export default QuickMenu diff --git a/packages/fluent-editor/src/modules/shortcut-key/index.ts b/packages/fluent-editor/src/modules/shortcut-key/index.ts new file mode 100644 index 0000000..55600a2 --- /dev/null +++ b/packages/fluent-editor/src/modules/shortcut-key/index.ts @@ -0,0 +1,210 @@ +import type { Range } from 'quill' +import type { Context } from 'quill/modules/keyboard' +import type TypeToolbar from 'quill/modules/toolbar' +import type FluentEditor from '../../fluent-editor' +import Quill from 'quill' +import QuillShortcutKey, { defaultShortKey } from 'quill-shortcut-key' +import { CHANGE_LANGUAGE_EVENT } from '../../config' + +export class ShortCutKey extends QuillShortcutKey { + constructor(public quill: FluentEditor, options: any) { + super(quill, options) + + this.quill.emitter.on(CHANGE_LANGUAGE_EVENT, () => { + this.destroyMenuList() + this.options = this.resolveOptions(options) + this.placeholderTip.remove() + this.placeholderTip = this.initPlaceholder() + this.placeholderUpdate() + }) + } + + resolveOptions(options: any) { + return Object.assign({ + placeholder: this.quill.getLangText('input-recall-menu-placeholder'), + menuItems: this.defaultMenuList(), + menuKeyboardControls: () => false, + }, options) + } + + defaultMenuList() { + const icons = Quill.import('ui/icons') as Record + const toolbarHandler = (format: string) => { + return function (range: Range | null) { + if (!range) return + const toolbarModule = this.getModule('toolbar') as TypeToolbar + if (!toolbarModule) return + toolbarModule.handlers[format].call(toolbarModule, true) + } + } + const formatHandler = (format: string, value: any) => { + return function (this: Quill, range: Range | null) { + if (!range) return + this.formatLine(range.index, 0, format, value, Quill.sources.USER) + } + } + + return [ + ...new Array(6).fill(0).map((_, i) => ({ + type: 'item' as const, + name: `h${i + 1}`, + alias: ['header', `head${i + 1}`], + icon: icons.header[i + 1], + title: this.quill.getLangText(`header-${i + 1}`), + onClick: formatHandler('header', i + 1), + })), + { + type: 'item' as const, + name: 'yy', + alias: ['blockquote'], + icon: icons.blockquote, + title: this.quill.getLangText('blockquote'), + onClick: formatHandler('blockquote', true), + + }, + { + type: 'item' as const, + name: 'dm', + alias: ['code', 'codeblock'], + icon: icons['code-block'], + title: this.quill.getLangText('code-block'), + onClick: formatHandler('code-block', true), + }, + { + type: 'item' as const, + name: 'lj', + alias: ['link'], + icon: icons.link, + title: this.quill.getLangText('link'), + onClick(this: Quill, range: Range | null, _: any) { + if (!range) return + const title = 'link' + const link = prompt('Enter link URL') + if (!link) return + this.insertText(range.index, title, Quill.sources.USER) + this.formatText(range.index, range.length + title.length, 'link', link, Quill.sources.USER) + this.setSelection({ index: range.index, length: range.index + title.length }) + }, + }, + { + type: 'group' as const, + name: 'lb', + alias: [], + hideSearch: true, + icon: icons.list.bullet, + title: this.quill.getLangText('list'), + children: [ + { + type: 'item' as const, + name: 'wxlb', + alias: ['list', 'bullet'], + icon: icons.list.bullet, + title: this.quill.getLangText('list-bullet'), + onClick: formatHandler('list', 'bullet'), + }, + { + type: 'item' as const, + name: 'yxlb', + alias: ['list', 'ordered'], + icon: icons.list.ordered, + title: this.quill.getLangText('list-ordered'), + onClick: formatHandler('list', 'ordered'), + }, + { + type: 'item' as const, + name: 'rwlb', + alias: ['list', 'check'], + icon: icons.list.check, + title: this.quill.getLangText('list-check'), + onClick: formatHandler('list', 'unchecked'), + }, + ], + }, + { + type: 'item' as const, + name: 'bq', + alias: ['emoji'], + icon: icons.emoji, + title: this.quill.getLangText('emoji'), + onClick(this: Quill, range: Range | null, _: any) { + if (!range) return + const toolbarModule = this.getModule('toolbar') as TypeToolbar + if (!toolbarModule) return + // TODO: keyboard handler emoji select(in emoji module) + toolbarModule.handlers.emoji.call(toolbarModule, true) + }, + }, + { + type: 'item' as const, + name: 'jp', + alias: ['screenshot'], + icon: icons.screenshot, + title: this.quill.getLangText('screenshot'), + onClick: toolbarHandler('screenshot'), + }, + { + type: 'item' as const, + name: 'gs', + alias: ['formula'], + icon: icons.formula, + title: this.quill.getLangText('formula'), + onClick: toolbarHandler('formula'), + }, + { + type: 'item' as const, + name: 'tp', + alias: ['image', 'pic', 'picture'], + icon: icons.image, + title: this.quill.getLangText('image'), + onClick: toolbarHandler('image'), + }, + { + type: 'item' as const, + name: 'sp', + alias: ['video'], + icon: icons.video, + title: this.quill.getLangText('video'), + onClick: toolbarHandler('video'), + }, + { + type: 'item' as const, + name: 'wj', + alias: ['file'], + icon: icons.file, + title: this.quill.getLangText('file'), + onClick: toolbarHandler('file'), + }, + ] + } +} + +export const shortKey = { + ...defaultShortKey, + link: { + key: 'k', + shortKey: true, + handler(_, context: Context) { + const toolbar = this.quill.getModule('toolbar') as TypeToolbar + if (!toolbar) return + toolbar.handlers.link.call(toolbar, !context.format.link) + }, + }, + color: { + key: 'c', + altKey: true, + shortKey: true, + handler() { + const selected = this.quill.getModule('toolbar').container.querySelector('.ql-color.ql-color-picker .ql-picker-options .ql-selected') + this.quill.format('color', selected?.dataset?.value || false, Quill.sources.USER) + }, + }, + background: { + key: 'b', + altKey: true, + shortKey: true, + handler() { + const selected = this.quill.getModule('toolbar').container.querySelector('.ql-background.ql-color-picker .ql-picker-options .ql-selected') + this.quill.format('background', selected?.dataset?.value || false, Quill.sources.USER) + }, + }, +} diff --git a/packages/fluent-editor/src/themes/snow.ts b/packages/fluent-editor/src/themes/snow.ts index eab0bd3..aeb3bc7 100644 --- a/packages/fluent-editor/src/themes/snow.ts +++ b/packages/fluent-editor/src/themes/snow.ts @@ -5,6 +5,7 @@ import type { TypeParchment } from '../core/fluent-editor' import { CHANGE_LANGUAGE_EVENT, getListValue, inputFile, isNullOrUndefined } from '../config' import FluentEditor from '../core/fluent-editor' import { CustomImageSpec } from '../modules/custom-image/specs/CustomImageSpec' +import { shortKey } from '../modules/shortcut-key' import BetterTable from '../modules/table/better-table' import { ColorPicker, Picker } from '../modules/toolbar/better-picker' import { FormatPainter } from '../tools/format-painter' @@ -20,6 +21,7 @@ OriginSnowTheme.DEFAULTS = { 'keyboard': { bindings: { ...BetterTable.keyboardBindings, + ...shortKey, }, }, 'toolbar': { @@ -122,6 +124,7 @@ OriginSnowTheme.DEFAULTS = { }, }, }, + 'shortcut-key': true, }, } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3d9879e..3e886f1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -85,8 +85,11 @@ importers: specifier: ^2.0.0 version: 2.0.3 quill-easy-color: - specifier: ^0.0.5 - version: 0.0.5(quill@2.0.3) + specifier: ^0.0.8 + version: 0.0.8(quill@2.0.3) + quill-shortcut-key: + specifier: 0.0.1 + version: 0.0.1(quill@2.0.3) devDependencies: '@types/jest': specifier: ^26.0.23 @@ -3730,8 +3733,8 @@ packages: resolution: {integrity: sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==} engines: {node: '>= 12.0.0'} - quill-easy-color@0.0.5: - resolution: {integrity: sha512-0+qMTzJLXRIgiyQaSTaD6wPlD4cYrvWViAQkEHME3K+qMTwMC9HNKbgO/vrC4j5X9uuvU1MKkZZ8YbhGsA6bwg==} + quill-easy-color@0.0.8: + resolution: {integrity: sha512-nZ25opQtkinvP/QdRJEDvrxbw5GS69DRpdyqp6CkAK58LZb14anox0UXBEjE5co/61kJgj40OuzdJ+wfeh8GBA==} peerDependencies: quill: '>=1.3.7' @@ -3743,6 +3746,11 @@ packages: quill-markdown-shortcuts@0.0.10: resolution: {integrity: sha512-2FFFqqo65JgDgAGSer7cFQTCeiSjJF4N8lRGXGv/xjppCxSwj42OnNdGPZ/zeeCxdUY/j1LW4AiSvPQaTIkY2A==} + quill-shortcut-key@0.0.1: + resolution: {integrity: sha512-/6EY/pjhrEanRKcF4Jjta9j+IKViNQ53PoOzADQX3/HgKGYAykgCr07T0+a+avsO2gux7yfImDnEAzveue65uA==} + peerDependencies: + quill: ^2.0.0 + quill-toolbar-tip@0.0.10: resolution: {integrity: sha512-2VPctu6yNH/+97ImywNTx94YWP5OGFWNv1NZ99VnjSIHAd//e+NQefBkIdLfUVWbkvZHLvfV2Ch9opuwCDLwuw==} peerDependencies: @@ -5435,7 +5443,7 @@ snapshots: '@types/istanbul-lib-coverage': 2.0.6 collect-v8-coverage: 1.0.2 - '@jest/test-sequencer@26.6.3': + '@jest/test-sequencer@26.6.3(ts-node@9.1.1(typescript@4.9.5))': dependencies: '@jest/test-result': 26.6.2 graceful-fs: 4.2.11 @@ -5443,7 +5451,11 @@ snapshots: jest-runner: 26.6.3(ts-node@9.1.1(typescript@4.9.5)) jest-runtime: 26.6.3(ts-node@9.1.1(typescript@4.9.5)) transitivePeerDependencies: + - bufferutil + - canvas - supports-color + - ts-node + - utf-8-validate '@jest/transform@26.6.2': dependencies: @@ -7671,7 +7683,7 @@ snapshots: jest-config@26.6.3(ts-node@9.1.1(typescript@4.9.5)): dependencies: '@babel/core': 7.26.0 - '@jest/test-sequencer': 26.6.3 + '@jest/test-sequencer': 26.6.3(ts-node@9.1.1(typescript@4.9.5)) '@jest/types': 26.6.2 babel-jest: 26.6.3(@babel/core@7.26.0) chalk: 4.1.2 @@ -8932,7 +8944,7 @@ snapshots: lodash.clonedeep: 4.5.0 lodash.isequal: 4.5.0 - quill-easy-color@0.0.5(quill@2.0.3): + quill-easy-color@0.0.8(quill@2.0.3): dependencies: quill: 2.0.3 @@ -8944,6 +8956,10 @@ snapshots: dependencies: quill: 1.3.7 + quill-shortcut-key@0.0.1(quill@2.0.3): + dependencies: + quill: 2.0.3 + quill-toolbar-tip@0.0.10(quill@2.0.3): dependencies: '@floating-ui/dom': 1.6.12 From 70406efcc7ea5e69cbfbc2ac991dbf1efcf34297 Mon Sep 17 00:00:00 2001 From: zzxming Date: Sat, 18 Jan 2025 15:21:31 +0800 Subject: [PATCH 2/4] feat: tooltip shortcut key --- packages/docs/package.json | 2 +- packages/fluent-editor/src/fluent-editor.ts | 1 - .../src/modules/toolbar/toolbar-tip.ts | 39 ++++++++++++++++--- pnpm-lock.yaml | 10 ++--- 4 files changed, 40 insertions(+), 12 deletions(-) diff --git a/packages/docs/package.json b/packages/docs/package.json index e4eca9b..909f655 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -19,7 +19,7 @@ "mathlive": "^0.101.0", "quill-header-list": "0.0.2", "quill-markdown-shortcuts": "^0.0.10", - "quill-toolbar-tip": "^0.0.10", + "quill-toolbar-tip": "^0.0.11", "vue": "^3.5.13", "vue-toastification": "2.0.0-rc.5" }, diff --git a/packages/fluent-editor/src/fluent-editor.ts b/packages/fluent-editor/src/fluent-editor.ts index d5635f6..59da72c 100644 --- a/packages/fluent-editor/src/fluent-editor.ts +++ b/packages/fluent-editor/src/fluent-editor.ts @@ -48,7 +48,6 @@ FluentEditor.register( 'modules/link': Link, 'modules/mathlive': MathliveModule, 'modules/mention': Mention, - // 'modules/quickmenu': QuickMenu, // TODO 'modules/syntax': Syntax, 'modules/toolbar': Toolbar, 'modules/uploader': Uploader, diff --git a/packages/fluent-editor/src/modules/toolbar/toolbar-tip.ts b/packages/fluent-editor/src/modules/toolbar/toolbar-tip.ts index f9c1546..1506b2a 100644 --- a/packages/fluent-editor/src/modules/toolbar/toolbar-tip.ts +++ b/packages/fluent-editor/src/modules/toolbar/toolbar-tip.ts @@ -20,7 +20,38 @@ export function generateToolbarTip(QuillToolbarTip: Constructor) { resolveOptions(options: Partial>): Record { const result = super.resolveOptions(options) if (!this.quill.lang) return result + const shortKeyMap = { + 'bold': 'ctrl + B', + 'italic': 'ctrl + I', + 'underline': 'ctrl + U', + 'strike': 'ctrl + D', + 'clean': 'ctrl + /', + 'align-left': 'alt + L', + 'align-center': 'alt + C', + 'align-right': 'alt + R', + 'align-justify': 'alt + J', + 'indent-+1': 'ctrl + ]', + 'indent--1': 'ctrl + [', + 'script-sub': 'ctrl + ;', + 'script-super': 'ctrl + \'', + 'code': 'ctrl + E', + 'direction-rtl': 'ctrl + R', + 'direction-ltr': 'ctrl + L', + 'undo': 'ctrl + Z', + 'redo': 'ctrl + shift + Z', + 'color': 'ctrl + alt + C', + 'background': 'ctrl + alt + B', + 'link': 'ctrl + K', + } + const shortcutModule = this.quill.getModule('shortcut-key') + const getShortKey = (name: string) => { + if (!shortcutModule) return '' + const shortKey = shortKeyMap[name] + return shortKey ? `\n${shortKey}` : '' + } const btnTips = [ + 'color', + 'background', 'bold', 'italic', 'strike', @@ -43,19 +74,17 @@ export function generateToolbarTip(QuillToolbarTip: Constructor) { 'format-painter', 'header-list', ].reduce((map, name) => { - map[name] = this.quill.getLangText(name) + map[name] = this.quill.getLangText(name) + getShortKey(name) return map }, {} as Record) const selectTips = [ - 'color', - 'background', 'font', 'size', 'lineheight', ].reduce((map, name) => { map[name] = { onShow: () => { - return this.quill.getLangText(name) + return this.quill.getLangText(name) + getShortKey(name) }, } return map @@ -81,7 +110,7 @@ export function generateToolbarTip(QuillToolbarTip: Constructor) { value = 'normal' } } - return this.quill.getLangText(`${name}-${value}`) + return this.quill.getLangText(`${name}-${value}`) + getShortKey(`${name}-${value}`) }, } return map diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3e886f1..692bdc8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -48,8 +48,8 @@ importers: specifier: ^0.0.10 version: 0.0.10 quill-toolbar-tip: - specifier: ^0.0.10 - version: 0.0.10(quill@2.0.3) + specifier: ^0.0.11 + version: 0.0.11(quill@2.0.3) vue: specifier: ^3.5.13 version: 3.5.13(typescript@5.4.2) @@ -3751,8 +3751,8 @@ packages: peerDependencies: quill: ^2.0.0 - quill-toolbar-tip@0.0.10: - resolution: {integrity: sha512-2VPctu6yNH/+97ImywNTx94YWP5OGFWNv1NZ99VnjSIHAd//e+NQefBkIdLfUVWbkvZHLvfV2Ch9opuwCDLwuw==} + quill-toolbar-tip@0.0.11: + resolution: {integrity: sha512-JbtWnRhnJZRpv0K/fK+02WG0QvrrkecrMRSnun78OmWdbLwDPDBERRZMRIX2kKF3jERfZz5mbNptgkX5eqVSgw==} peerDependencies: quill: ^2.0.0 @@ -8960,7 +8960,7 @@ snapshots: dependencies: quill: 2.0.3 - quill-toolbar-tip@0.0.10(quill@2.0.3): + quill-toolbar-tip@0.0.11(quill@2.0.3): dependencies: '@floating-ui/dom': 1.6.12 quill: 2.0.3 From e77eeb230fe2e9bc37bb5a7fde2e42f98e023d3f Mon Sep 17 00:00:00 2001 From: zzxming Date: Tue, 21 Jan 2025 22:11:38 +0800 Subject: [PATCH 3/4] chore: update deps --- packages/fluent-editor/package.json | 2 +- pnpm-lock.yaml | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/fluent-editor/package.json b/packages/fluent-editor/package.json index b3fdb81..047447a 100644 --- a/packages/fluent-editor/package.json +++ b/packages/fluent-editor/package.json @@ -35,7 +35,7 @@ "dependencies": { "lodash-es": "^4.17.15", "quill": "^2.0.0", - "quill-easy-color": "^0.0.8", + "quill-easy-color": "^0.0.9", "quill-shortcut-key": "0.0.1" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 692bdc8..6f344a4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -85,8 +85,8 @@ importers: specifier: ^2.0.0 version: 2.0.3 quill-easy-color: - specifier: ^0.0.8 - version: 0.0.8(quill@2.0.3) + specifier: ^0.0.9 + version: 0.0.9(quill@2.0.3) quill-shortcut-key: specifier: 0.0.1 version: 0.0.1(quill@2.0.3) @@ -3733,8 +3733,8 @@ packages: resolution: {integrity: sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==} engines: {node: '>= 12.0.0'} - quill-easy-color@0.0.8: - resolution: {integrity: sha512-nZ25opQtkinvP/QdRJEDvrxbw5GS69DRpdyqp6CkAK58LZb14anox0UXBEjE5co/61kJgj40OuzdJ+wfeh8GBA==} + quill-easy-color@0.0.9: + resolution: {integrity: sha512-vzYe7yTMA0n85Tp66pApkgyqHMvTEBsCsVBq1rtZPiZ7MoItUY1UAhzay57xrzN0dZtvhiBYjMXzidPUBaHsRg==} peerDependencies: quill: '>=1.3.7' @@ -8944,7 +8944,7 @@ snapshots: lodash.clonedeep: 4.5.0 lodash.isequal: 4.5.0 - quill-easy-color@0.0.8(quill@2.0.3): + quill-easy-color@0.0.9(quill@2.0.3): dependencies: quill: 2.0.3 From 4b9ca979d57e08644368c81edfefacb3b72ac528 Mon Sep 17 00:00:00 2001 From: zzxming Date: Tue, 21 Jan 2025 22:13:30 +0800 Subject: [PATCH 4/4] typo: upper case word --- .../src/modules/toolbar/toolbar-tip.ts | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/fluent-editor/src/modules/toolbar/toolbar-tip.ts b/packages/fluent-editor/src/modules/toolbar/toolbar-tip.ts index 1506b2a..461b4eb 100644 --- a/packages/fluent-editor/src/modules/toolbar/toolbar-tip.ts +++ b/packages/fluent-editor/src/modules/toolbar/toolbar-tip.ts @@ -21,27 +21,27 @@ export function generateToolbarTip(QuillToolbarTip: Constructor) { const result = super.resolveOptions(options) if (!this.quill.lang) return result const shortKeyMap = { - 'bold': 'ctrl + B', - 'italic': 'ctrl + I', - 'underline': 'ctrl + U', - 'strike': 'ctrl + D', - 'clean': 'ctrl + /', - 'align-left': 'alt + L', - 'align-center': 'alt + C', - 'align-right': 'alt + R', - 'align-justify': 'alt + J', - 'indent-+1': 'ctrl + ]', - 'indent--1': 'ctrl + [', - 'script-sub': 'ctrl + ;', - 'script-super': 'ctrl + \'', - 'code': 'ctrl + E', - 'direction-rtl': 'ctrl + R', - 'direction-ltr': 'ctrl + L', - 'undo': 'ctrl + Z', - 'redo': 'ctrl + shift + Z', - 'color': 'ctrl + alt + C', - 'background': 'ctrl + alt + B', - 'link': 'ctrl + K', + 'bold': 'Ctrl + B', + 'italic': 'Ctrl + I', + 'underline': 'Ctrl + U', + 'strike': 'Ctrl + D', + 'clean': 'Ctrl + /', + 'align-left': 'Alt + L', + 'align-center': 'Alt + C', + 'align-right': 'Alt + R', + 'align-justify': 'Alt + J', + 'indent-+1': 'Ctrl + ]', + 'indent--1': 'Ctrl + [', + 'script-sub': 'Ctrl + ;', + 'script-super': 'Ctrl + \'', + 'code': 'Ctrl + E', + 'direction-rtl': 'Ctrl + R', + 'direction-ltr': 'Ctrl + L', + 'undo': 'Ctrl + Z', + 'redo': 'Ctrl + shift + Z', + 'color': 'Ctrl + Alt + C', + 'background': 'Ctrl + Alt + B', + 'link': 'Ctrl + K', } const shortcutModule = this.quill.getModule('shortcut-key') const getShortKey = (name: string) => {