feat: add shortcutKeys override(s) to extensions

meliora · meliora · commit 2012590bb289 · 2025-10-10T12:37:13.000+03:00
diff --git a/src/extensions/Blockquote/Blockquote.ts b/src/extensions/Blockquote/Blockquote.ts
@@ -15,14 +15,14 @@ export const Blockquote = /* @__PURE__ */ TiptapBlockquote.extend<BlockquoteOpti
       HTMLAttributes: {
         class: 'blockquote',
       },
-      button: ({ editor, t }: any) => ({
+      button: ({ editor, t, extension }: any) => ({
         component: ActionButton,
         componentProps: {
           action: () => editor.commands.toggleBlockquote(),
           isActive: () => editor.isActive('blockquote') || false,
           disabled: !editor.can().toggleBlockquote(),
           icon: 'TextQuote',
-          shortcutKeys: ['shift', 'mod', 'B'],
+          shortcutKeys: extension.options.shortcutKeys ?? ['shift', 'mod', 'B'],
           tooltip: t('editor.blockquote.tooltip'),
         },
       }),
diff --git a/src/extensions/Bold/Bold.ts b/src/extensions/Bold/Bold.ts
@@ -10,14 +10,14 @@ export const Bold = /* @__PURE__ */ TiptapBold.extend<BoldOptions>({
   addOptions() {
     return {
       ...this.parent?.(),
-      button: ({ editor, t }: any) => ({
+      button: ({ editor, t, extension }: any) => ({
         component: ActionButton,
         componentProps: {
           action: () => editor.commands.toggleBold(),
           isActive: () => editor.isActive('bold') || false,
           disabled: false,
           icon: 'Bold',
-          shortcutKeys: ['mod', 'B'],
+          shortcutKeys: extension.options.shortcutKeys ?? ['mod', 'B'],
           tooltip: t('editor.bold.tooltip'),
         },
       }),
diff --git a/src/extensions/BulletList/BulletList.ts b/src/extensions/BulletList/BulletList.ts
@@ -12,13 +12,13 @@ export const BulletList = /* @__PURE__ */ TiptapBulletList.extend<BulletListOpti
   addOptions() {
     return {
       ...this.parent?.(),
-      button: ({ editor, t }) => ({
+      button: ({ editor, t, extension }) => ({
         component: ActionButton,
         componentProps: {
           action: () => editor.commands.toggleBulletList(),
           isActive: () => editor.isActive('bulletList') || false,
           disabled: false,
-          shortcutKeys: ['shift', 'mod', '8'],
+          shortcutKeys: extension.options.shortcutKeys ?? ['shift', 'mod', '8'],
           icon: 'List',
           tooltip: t('editor.bulletlist.tooltip'),
         },
diff --git a/src/extensions/Code/Code.ts b/src/extensions/Code/Code.ts
@@ -10,14 +10,14 @@ export const Code = /* @__PURE__ */ TiptapCode.extend<CodeOptions>({
   addOptions() {
     return {
       ...this.parent?.(),
-      button: ({ editor, t }) => ({
+      button: ({ editor, t, extension }) => ({
         component: ActionButton,
         componentProps: {
           action: () => editor.commands.toggleCode(),
           isActive: () => editor.isActive('code') || false,
           disabled: !editor.can().toggleCode(),
           icon: 'Code',
-          shortcutKeys: ['mod', 'E'],
+          shortcutKeys: extension.options.shortcutKeys ?? ['mod', 'E'],
           tooltip: t('editor.code.tooltip'),
         },
       }),
diff --git a/src/extensions/Heading/Heading.ts b/src/extensions/Heading/Heading.ts
@@ -27,7 +27,7 @@ export const Heading = /* @__PURE__ */ TiptapHeading.extend<HeadingOptions>({
           disabled: !editor.can().toggleHeading({ level }),
           title: t(`editor.heading.h${level}.tooltip`),
           level,
-          shortcutKeys: ['alt', 'mod', `${level}`],
+          shortcutKeys: extension.options.shortcutKeys?.[level] ?? ['alt', 'mod', `${level}`],
         }));
 
         if (baseKitExt && baseKitExt.options.paragraph !== false) {
@@ -37,7 +37,7 @@ export const Heading = /* @__PURE__ */ TiptapHeading.extend<HeadingOptions>({
             disabled: !editor.can().setParagraph(),
             level: 0,
             title: t('editor.paragraph.tooltip'),
-            shortcutKeys: ['alt', 'mod', '0'],
+            shortcutKeys: extension.options.shortcutKeys?.[0] ?? ['alt', 'mod', '0'],
           });
         }
 
diff --git a/src/extensions/Highlight/Highlight.ts b/src/extensions/Highlight/Highlight.ts
@@ -31,7 +31,7 @@ export const Highlight = /* @__PURE__ */ TiptapHighlight.extend<HighlightOptions
           editor,
           isActive: () => editor.isActive('highlight') || false,
           disabled: false,
-          shortcutKeys: ['⇧', 'mod', 'H'],
+          shortcutKeys: extension.options.shortcutKeys ?? ['⇧', 'mod', 'H'],
           tooltip: t('editor.highlight.tooltip'),
           defaultColor: extension.options.defaultColor
         },
diff --git a/src/extensions/History/History.ts b/src/extensions/History/History.ts
@@ -14,7 +14,7 @@ export const History = /* @__PURE__ */ TiptapHistory.extend<HistoryOptions>({
       ...this.parent?.(),
       depth: 100,
       newGroupDelay: 500,
-      button: ({ editor, t }: any) => {
+      button: ({ editor, t, extension }: any) => {
         return historys.map(item => ({
           component: HistoryActionButton,
           componentProps: {
@@ -26,7 +26,7 @@ export const History = /* @__PURE__ */ TiptapHistory.extend<HistoryOptions>({
                 editor.chain().focus().redo().run();
               }
             },
-            shortcutKeys: item === 'undo' ? ['mod', 'Z'] : ['shift', 'mod', 'Z'],
+            shortcutKeys: item === 'undo' ? (extension.options.shortcutKeys?.[0] ?? ['mod', 'Z']) : (extension.options.shortcutKeys?.[1] ?? ['shift', 'mod', 'Z']),
             disabled: item === 'undo' ? !editor.can().undo() : !editor.can().redo(),
             isActive: () => (item === 'undo' ? !editor.can().undo() : !editor.can().redo()),
             icon: item === 'undo' ? 'Undo2' : 'Redo2',
diff --git a/src/extensions/HorizontalRule/HorizontalRule.ts b/src/extensions/HorizontalRule/HorizontalRule.ts
@@ -22,13 +22,13 @@ export const HorizontalRule = /* @__PURE__ */ TiptapHorizontalRule.extend<Horizo
   addOptions() {
     return {
       ...this.parent?.(),
-      button: ({ editor, t }) => ({
+      button: ({ editor, t, extension }) => ({
         component: ActionButton,
         componentProps: {
           action: () => editor.commands.setHorizontalRule(),
           disabled: !editor.can().setHorizontalRule(),
           icon: 'Minus',
-          shortcutKeys: ['mod', 'alt', 'S'],
+          shortcutKeys: extension.options.shortcutKeys ?? ['mod', 'alt', 'S'],
           tooltip: t('editor.horizontalrule.tooltip'),
         },
       }),
diff --git a/src/extensions/ImportWord/ImportWord.ts b/src/extensions/ImportWord/ImportWord.ts
@@ -40,7 +40,7 @@ export const ImportWord = /* @__PURE__ */ Extension.create<ImportWordOptions>({
             action: () => editor.commands.setHorizontalRule(),
             disabled: !editor.can().setHorizontalRule(),
             icon: 'Word',
-            shortcutKeys: ['alt', 'mod', 'S'],
+            shortcutKeys: extension.options.shortcutKeys ?? ['alt', 'mod', 'S'],
             tooltip: t('editor.importWord.tooltip'),
           },
         };
diff --git a/src/extensions/Indent/Indent.ts b/src/extensions/Indent/Indent.ts
@@ -34,15 +34,15 @@ export const Indent = /* @__PURE__ */ Extension.create<IndentOptions>({
       types: ['paragraph', 'heading', 'blockquote'],
       minIndent: IndentProps.min,
       maxIndent: IndentProps.max,
-      button({ editor, t }: { editor: Editor, t: (...args: any[]) => string }) {
+      button({ editor, t, extension }) {
         return [
           {
             component: ActionButton,
             componentProps: {
               action: () => {
                 editor.commands.indent();
               },
-              shortcutKeys: ['Tab'],
+              shortcutKeys: extension.options.shortcutKeys?.[0] ?? ['Tab'],
               icon: 'IndentIncrease',
               tooltip: t('editor.indent.tooltip'),
             },
@@ -53,7 +53,7 @@ export const Indent = /* @__PURE__ */ Extension.create<IndentOptions>({
               action: () => {
                 editor.commands.outdent();
               },
-              shortcutKeys: ['Shift', 'Tab'],
+              shortcutKeys: extension.options.shortcutKeys?.[1] ?? ['Shift', 'Tab'],
               icon: 'IndentDecrease',
               tooltip: t('editor.outdent.tooltip'),
             },
diff --git a/src/extensions/Italic/Italic.ts b/src/extensions/Italic/Italic.ts
@@ -11,14 +11,15 @@ export const Italic = /* @__PURE__ */ TiptapItalic.extend<ItalicOptions>({
   addOptions() {
     return {
       ...this.parent?.(),
-      button({ editor, t }: { editor: Editor, t: (...args: any[]) => string }) {
+//       button({ editor, t, extension }: { editor: Editor, t: (...args: any[]) => string }) {
+      button({ editor, t, extension }) {
         return {
           component: ActionButton,
           componentProps: {
             action: () => editor.commands.toggleItalic(),
             isActive: () => editor.isActive('italic') || false,
             disabled: false,
-            shortcutKeys: ['mod', 'I'],
+            shortcutKeys: extension.options.shortcutKeys ?? ['mod', 'I'],
             icon: 'Italic',
             tooltip: t('editor.italic.tooltip'),
           },
diff --git a/src/extensions/MoreMark/MoreMark.ts b/src/extensions/MoreMark/MoreMark.ts
@@ -38,7 +38,7 @@ export const MoreMark = /* @__PURE__ */ Extension.create<MoreMarkOptions>({
           disabled: !editor.can().toggleSubscript(),
           icon: 'Subscript',
           title: t('editor.subscript.tooltip'),
-          shortcutKeys: ['mod', '.'],
+          shortcutKeys: (extension.options.shortcutKeys?.[0] ?? ['mod', '.']) as string[],
         };
 
         const superBtn: Item = {
@@ -47,7 +47,7 @@ export const MoreMark = /* @__PURE__ */ Extension.create<MoreMarkOptions>({
           disabled: !editor.can().toggleSuperscript(),
           icon: 'Superscript',
           title: t('editor.superscript.tooltip'),
-          shortcutKeys: ['mod', ','],
+          shortcutKeys: (extension.options.shortcutKeys?.[1] ?? ['mod', ',']) as string[],
         };
         // const hasCode = hasExtension(editor, 'code');
 
diff --git a/src/extensions/OrderedList/OrderedList.ts b/src/extensions/OrderedList/OrderedList.ts
@@ -12,14 +12,14 @@ export const OrderedList = /* @__PURE__ */ TiptapOrderedList.extend<OrderedListO
   addOptions() {
     return {
       ...this.parent?.(),
-      button: ({ editor, t }) => ({
+      button: ({ editor, t, extension }) => ({
         component: ActionButton,
         componentProps: {
           action: () => editor.commands.toggleOrderedList(),
           isActive: () => editor.isActive('orderedList') || false,
           disabled: false,
           icon: 'ListOrdered',
-          shortcutKeys: ['mod', 'shift', '7'],
+          shortcutKeys: extension.options.shortcutKeys ?? ['mod', 'shift', '7'],
           tooltip: t('editor.orderedlist.tooltip'),
         },
       }),
diff --git a/src/extensions/Strike/Strike.ts b/src/extensions/Strike/Strike.ts
@@ -10,14 +10,14 @@ export const Strike = /* @__PURE__ */ TiptapStrike.extend<StrikeOptions>({
   addOptions() {
     return {
       ...this.parent?.(),
-      button: ({ editor, t }: any) => ({
+      button: ({ editor, t, extension }: any) => ({
         component: ActionButton,
         componentProps: {
           action: () => editor.commands.toggleStrike(),
           isActive: () => editor.isActive('strike') || false,
           disabled: false,
           icon: 'Strikethrough',
-          shortcutKeys: ['shift', 'mod', 'S'],
+          shortcutKeys: extension.options.shortcutKeys ?? ['shift', 'mod', 'S'],
           tooltip: t('editor.strike.tooltip'),
         },
       }),
diff --git a/src/extensions/TaskList/TaskList.ts b/src/extensions/TaskList/TaskList.ts
@@ -26,14 +26,14 @@ export const TaskList = /* @__PURE__ */ TiptapTaskList.extend<TaskListOptions>({
           class: 'task-list-item',
         },
       },
-      button: ({ editor, t }) => ({
+      button: ({ editor, t, extension }) => ({
         component: ActionButton,
         componentProps: {
           action: () => editor.commands.toggleTaskList(),
           isActive: () => editor.isActive('taskList') || false,
           disabled: false,
           icon: 'ListTodo',
-          shortcutKeys: ['shift', 'mod', '9'],
+          shortcutKeys: extension.options.shortcutKeys ?? ['shift', 'mod', '9'],
           tooltip: t('editor.tasklist.tooltip'),
         },
       }),
diff --git a/src/extensions/TextAlign/TextAlign.ts b/src/extensions/TextAlign/TextAlign.ts
@@ -33,10 +33,10 @@ export const TextAlign = /* @__PURE__ */ TiptapTextAlign.extend<TextAlignOptions
       }) {
         const alignments = (extension.options?.alignments as Alignments[]) || [];
         const shortcutKeysMap = {
-          left: ['mod', 'Shift', 'L'],
-          center: ['mod', 'Shift', 'E'],
-          right: ['mod', 'Shift', 'R'],
-          justify: ['mod', 'Shift', 'J'],
+          left: extension.options.shortcutKeys?.[0] ?? ['mod', 'Shift', 'L'],
+          center: extension.options.shortcutKeys?.[1] ?? ['mod', 'Shift', 'E'],
+          right: extension.options.shortcutKeys?.[2] ?? ['mod', 'Shift', 'R'],
+          justify: extension.options.shortcutKeys?.[3] ?? ['mod', 'Shift', 'J'],
         };
         const iconMap = {
           left: 'AlignLeft',
diff --git a/src/extensions/TextUnderline/TextUnderline.ts b/src/extensions/TextUnderline/TextUnderline.ts
@@ -12,15 +12,15 @@ export const TextUnderline = /* @__PURE__ */ TiptapUnderline.extend<UnderlineOpt
   addOptions() {
     return {
       ...this.parent?.(),
-      button({ editor, t }: any) {
+      button({ editor, t, extension }: any) {
         return {
           component: ActionButton,
           componentProps: {
             action: () => editor.commands.toggleUnderline(),
             isActive: () => editor.isActive('underline') || false,
             disabled: false,
             icon: 'Underline',
-            shortcutKeys: ['mod', 'U'],
+            shortcutKeys: extension.options.shortcutKeys ?? ['mod', 'U'],
             tooltip: t('editor.underline.tooltip'),
           },
         };
diff --git a/src/types.ts b/src/types.ts
@@ -59,6 +59,8 @@ export interface GeneralOptions<T> {
   button: ButtonView<T>
   /** Show on Toolbar */
   toolbar?: boolean
+  /** Shortcut keys override */
+  shortcutKeys?: string[] | string[][]
 }
 
 /**
