feat(web): add textShortcuts support

Author: kacperzolkiewski

src/web/EnrichedTextInput.tsx

@@ -74,6 +74,7 @@ import {
 } from './pmPlugins/MentionPlugin';
 import { StripMarksOnImagePlugin } from './pmPlugins/StripMarksOnImagePlugin';
 import { ShortcutPlugin } from './pmPlugins/ShortcutPlugin';
+import { TextShortcutsPlugin } from './pmPlugins/TextShortcutsPlugin';
 import { returnKeyTypeToEnterKeyHint } from './returnKeyTypeToEnterKeyHint';
 import { AutolinkPlugin } from './pmPlugins/AutolinkPlugin';
 
@@ -116,6 +117,7 @@ export const EnrichedTextInput = ({
   linkRegex,
   htmlStyle,
   useHtmlNormalizer,
+  textShortcuts = ENRICHED_TEXT_INPUT_DEFAULT_PROPS.textShortcuts,
 }: EnrichedTextInputProps) => {
   const tiptapContent =
     defaultValue != null
@@ -142,6 +144,11 @@ export const EnrichedTextInput = ({
     mentionIndicatorsRef.current = mentionIndicators;
   }, [mentionIndicators]);
 
+  const textShortcutsRef = useRef(textShortcuts);
+  useEffect(() => {
+    textShortcutsRef.current = textShortcuts;
+  }, [textShortcuts]);
+
   const mentionCallbacksRef = useRef({
     onStartMention,
     onChangeMention,
@@ -244,6 +251,10 @@ export const EnrichedTextInput = ({
       ShortcutPlugin.configure({
         getHtmlStyle: () => htmlStyleRef.current,
       }),
+      TextShortcutsPlugin.configure({
+        getTextShortcuts: () => textShortcutsRef.current,
+        getHtmlStyle: () => htmlStyleRef.current,
+      }),
       AutolinkPlugin.configure({
         getLinkEmitter: () => linkEmitterRef.current,
       }),

src/web/formats/EnrichedOrderedList.ts

@@ -1,20 +1,8 @@
-import { wrappingInputRule } from '@tiptap/core';
 import { OrderedList } from '@tiptap/extension-list';
 
 import { applyWrappingListToSelection } from './applyWrappingListToSelection';
 
-const ORDERED_LIST_INPUT_REGEX = /^1\.\s$/;
-
 export const EnrichedOrderedList = OrderedList.extend({
-  addInputRules() {
-    return [
-      wrappingInputRule({
-        find: ORDERED_LIST_INPUT_REGEX,
-        type: this.type,
-      }),
-    ];
-  },
-
   addKeyboardShortcuts() {
     return {};
   },

src/web/formats/EnrichedUnorderedList.ts

@@ -1,4 +1,4 @@
-import { wrappingInputRule, type CommandProps } from '@tiptap/core';
+import { type CommandProps } from '@tiptap/core';
 import { BulletList } from '@tiptap/extension-list';
 
 import { applyWrappingListToSelection } from './applyWrappingListToSelection';
@@ -11,20 +11,9 @@ declare module '@tiptap/core' {
   }
 }
 
-const BULLET_LIST_INPUT_REGEX = /^\s*-\s$/;
-
 export const EnrichedUnorderedList = BulletList.extend({
   name: 'unorderedList',
 
-  addInputRules() {
-    return [
-      wrappingInputRule({
-        find: BULLET_LIST_INPUT_REGEX,
-        type: this.type,
-      }),
-    ];
-  },
-
   addKeyboardShortcuts() {
     return {};
   },