133085 use insert-header directly

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

@@ -3,6 +3,7 @@ import { useCallback, useState } from 'react';
 import { Collapse } from 'reactstrap';
 
 import type { GlobalCodeMirrorEditorKey } from '../../../consts';
+import { useInsertHeader } from '../../../services/codemirror-editor/use-codemirror-editor/utils/insert-header';
 import { useCodeMirrorEditorIsolated } from '../../../stores';
 
 import styles from './TextFormatTools.module.scss';
@@ -40,19 +41,20 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
   const { editorKey } = props;
   const [isOpen, setOpen] = useState(false);
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
+  const insertHeader = useInsertHeader();
 
   const toggle = useCallback(() => {
     setOpen(bool => !bool);
   }, []);
 
-  const onClickAddHeaderToSelection = (prefix: string) => {
-    codeMirrorEditor?.insertHeader(prefix);
-  };
-
   const onClickInsertMarkdownElements = (prefix: string, suffix: string) => {
     codeMirrorEditor?.insertMarkdownElements(prefix, suffix);
   };
 
+  const onClickAddHeaderToSelection = () => {
+    insertHeader(codeMirrorEditor?.view);
+  };
+
   return (
     <div className="d-flex">
       <TextFormatToolsToggler isOpen={isOpen} onClick={toggle} />
@@ -68,7 +70,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
           <button type="button" className="btn btn-toolbar-button" onClick={() => onClickInsertMarkdownElements('~', '~')}>
             <span className="material-symbols-outlined fs-5">format_strikethrough</span>
           </button>
-          <button type="button" className="btn btn-toolbar-button" onClick={() => onClickAddHeaderToSelection('#')}>
+          <button type="button" className="btn btn-toolbar-button" onClick={() => onClickAddHeaderToSelection()}>
             <span className="material-symbols-outlined fs-5">block</span>
           </button>
           <button type="button" className="btn btn-toolbar-button" onClick={() => onClickInsertMarkdownElements('`', '`')}>

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

@@ -16,7 +16,6 @@ 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 { useInsertHeader, type InsertHeader } from './utils/insert-header';
 import { useInsertMarkdownElements, type InsertMarkdowElements } from './utils/insert-markdown-elements';
 import { useInsertText, type InsertText } from './utils/insert-text';
 import { useReplaceText, type ReplaceText } from './utils/replace-text';
@@ -40,7 +39,6 @@ type UseCodeMirrorEditorUtils = {
   insertText: InsertText,
   replaceText: ReplaceText,
   insertMarkdownElements: InsertMarkdowElements,
-  insertHeader: InsertHeader,
 }
 export type UseCodeMirrorEditor = {
   state: EditorState | undefined;
@@ -94,7 +92,6 @@ export const useCodeMirrorEditor = (props?: UseCodeMirror): UseCodeMirrorEditor
   const insertText = useInsertText(view);
   const replaceText = useReplaceText(view);
   const insertMarkdownElements = useInsertMarkdownElements(view);
-  const insertHeader = useInsertHeader(view);
 
   return {
     state,
@@ -107,6 +104,5 @@ export const useCodeMirrorEditor = (props?: UseCodeMirror): UseCodeMirrorEditor
     insertText,
     replaceText,
     insertMarkdownElements,
-    insertHeader,
   };
 };

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

@@ -2,37 +2,30 @@ import { useCallback } from 'react';
 
 import { EditorView } from '@codemirror/view';
 
-export type InsertHeader = (prefix: string) => void;
+type InsertHeader = (view?: EditorView) => void;
 
-export const useInsertHeader = (view?: EditorView): InsertHeader => {
-
-  return useCallback((prefix) => {
+export const useInsertHeader = (): InsertHeader => {
+  return useCallback((view?: EditorView) => {
     if (view == null) {
       return;
     }
-
-    const selection = view.state.sliceDoc(
-      view.state.selection.main.from,
-      view.state.selection.main.to,
-    );
-
+    let prefix = '#';
     const cursorPos = view.state.selection.main.head;
     const line = view.state.doc.lineAt(cursorPos);
     const insertPos = line.text.startsWith(prefix) ? cursorPos - 1 : cursorPos;
 
-    let insertText = prefix;
     if (!line.text.startsWith(prefix)) {
-      insertText += ' ';
+      prefix += ' ';
     }
 
     view.dispatch({
       changes: {
         from: insertPos,
         to: insertPos,
-        insert: insertText + selection,
+        insert: prefix,
       },
-      selection: { anchor: cursorPos + insertText.length },
+      selection: { anchor: cursorPos + prefix.length },
     });
     view.focus();
-  }, [view]);
+  }, []);
 };