133069 create insertMarkdownText as a hook

packages/editor/src/components/CodeMirrorEditor/Toolbar/TextFormatTools.tsx

@@ -39,28 +39,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
     setOpen(bool => !bool);
   }, []);
 
-  const view = codeMirrorEditor?.view;
-
-  const createReplaceSelectionHandler = useCallback((prefix: string, suffix: string) => {
-    return () => {
-      const selection = view?.state.sliceDoc(
-        view?.state.selection.main.from,
-        view?.state.selection.main.to,
-      );
-      const cursorPos = view?.state.selection.main.head;
-      let curPosAfterReplacing = {};
-      const insertText = view?.state.replaceSelection(prefix + selection + suffix);
-
-      if (insertText) {
-        view?.dispatch(insertText);
-        if (cursorPos) {
-          curPosAfterReplacing = cursorPos + prefix.length;
-        }
-        view?.dispatch({ selection: { anchor: curPosAfterReplacing as number } });
-        view?.focus();
-      }
-    };
-  }, [view]);
+  const insertMarkdownText = (prefix: string, suffix: string) => codeMirrorEditor?.insertMarkdownText(prefix, suffix);
 
   return (
     <div className="d-flex">
@@ -68,19 +47,19 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
 
       <Collapse isOpen={isOpen} horizontal>
         <div className="d-flex px-1 gap-1" style={{ width: '220px' }}>
-          <button type="button" className="btn btn-toolbar-button" onClick={() => createReplaceSelectionHandler('**', '**')()}>
+          <button type="button" className="btn btn-toolbar-button" onClick={() => insertMarkdownText('**', '**')}>
             <span className="material-symbols-outlined fs-5">format_bold</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-symbols-outlined fs-5" onClick={() => createReplaceSelectionHandler('*', '*')()}>format_italic</span>
+            <span className="material-symbols-outlined fs-5" onClick={() => insertMarkdownText('*', '*')}>format_italic</span>
           </button>
-          <button type="button" className="btn btn-toolbar-button" onClick={() => createReplaceSelectionHandler('~', '~')()}>
+          <button type="button" className="btn btn-toolbar-button" onClick={() => insertMarkdownText('~', '~')}>
             <span className="material-symbols-outlined fs-5">format_strikethrough</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
             <span className="material-symbols-outlined fs-5">block</span>
           </button>
-          <button type="button" className="btn btn-toolbar-button" onClick={() => createReplaceSelectionHandler('`', '`')()}>
+          <button type="button" className="btn btn-toolbar-button" onClick={() => insertMarkdownText('`', '`')}>
             <span className="material-symbols-outlined fs-5">code</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">

packages/editor/src/services/codemirror-editor/use-codemirror-editor/use-codemirror-editor.ts

@@ -14,6 +14,7 @@ import { useAppendExtensions, type AppendExtensions } from './utils/append-exten
 import { useFocus, type Focus } from './utils/focus';
 import { useGetDoc, type GetDoc } from './utils/get-doc';
 import { useInitDoc, type InitDoc } from './utils/init-doc';
+import { useInsertMarkdownText, type InsertMarkdownText } from './utils/insert-markdown-text';
 import { useInsertText, type InsertText } from './utils/insert-text';
 import { useReplaceText, type ReplaceText } from './utils/replace-text';
 import { useSetCaretLine, type SetCaretLine } from './utils/set-caret-line';
@@ -35,6 +36,7 @@ type UseCodeMirrorEditorUtils = {
   setCaretLine: SetCaretLine,
   insertText: InsertText,
   replaceText: ReplaceText,
+  insertMarkdownText: InsertMarkdownText,
 }
 export type UseCodeMirrorEditor = {
   state: EditorState | undefined;
@@ -82,6 +84,7 @@ export const useCodeMirrorEditor = (props?: UseCodeMirror): UseCodeMirrorEditor
   const setCaretLine = useSetCaretLine(view);
   const insertText = useInsertText(view);
   const replaceText = useReplaceText(view);
+  const insertMarkdownText = useInsertMarkdownText(view);
 
   return {
     state,
@@ -93,5 +96,6 @@ export const useCodeMirrorEditor = (props?: UseCodeMirror): UseCodeMirrorEditor
     setCaretLine,
     insertText,
     replaceText,
+    insertMarkdownText,
   };
 };

packages/editor/src/services/codemirror-editor/use-codemirror-editor/utils/insert-markdown-text.ts

@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+
+import { EditorView } from '@codemirror/view';
+
+
+export type InsertMarkdownText = (
+  prefix: string,
+  suffix: string,
+) => void;
+
+export const useInsertMarkdownText = (view?: EditorView): InsertMarkdownText => {
+
+  return useCallback((prefix, suffix) => {
+    const selection = view?.state.sliceDoc(
+      view?.state.selection.main.from,
+      view?.state.selection.main.to,
+    );
+    const cursorPos = view?.state.selection.main.head;
+    let curPosAfterReplacing = {};
+    const insertText = view?.state.replaceSelection(prefix + selection + suffix);
+
+    if (insertText) {
+      view?.dispatch(insertText);
+      if (cursorPos) {
+        curPosAfterReplacing = cursorPos + prefix.length;
+      }
+      view?.dispatch({ selection: { anchor: curPosAfterReplacing as number } });
+      view?.focus();
+    }
+  }, [view]);
+};