133085 able to add header tag with button

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

@@ -45,7 +45,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
     setOpen(bool => !bool);
   }, []);
 
-  const onClickAddPrefixToSelection = (prefix: string) => codeMirrorEditor?.insertPrefix(prefix);
+  const onClickAddHeaderToSelection = (prefix: string) => codeMirrorEditor?.insertHeader(prefix);
 
   return (
     <div className="d-flex">
@@ -62,7 +62,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
           <button type="button" className="btn btn-toolbar-button">
             <span className="material-symbols-outlined fs-5">format_strikethrough</span>
           </button>
-          <button type="button" className="btn btn-toolbar-button" onClick={() => onClickAddPrefixToSelection('#')}>
+          <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">

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

@@ -16,7 +16,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 { useInsertPrefix, type InsertPrefix } from './utils/insert-prefix';
+import { useInsertHeader, type InsertHeader } from './utils/insert-header';
 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';
@@ -38,7 +38,7 @@ type UseCodeMirrorEditorUtils = {
   setCaretLine: SetCaretLine,
   insertText: InsertText,
   replaceText: ReplaceText,
-  insertPrefix: InsertPrefix,
+  insertHeader: InsertHeader,
 }
 export type UseCodeMirrorEditor = {
   state: EditorState | undefined;
@@ -91,7 +91,7 @@ export const useCodeMirrorEditor = (props?: UseCodeMirror): UseCodeMirrorEditor
   const setCaretLine = useSetCaretLine(view);
   const insertText = useInsertText(view);
   const replaceText = useReplaceText(view);
-  const insertPrefix = useInsertPrefix(view);
+  const insertHeader = useInsertHeader(view);
 
   return {
     state,
@@ -103,6 +103,6 @@ export const useCodeMirrorEditor = (props?: UseCodeMirror): UseCodeMirrorEditor
     setCaretLine,
     insertText,
     replaceText,
-    insertPrefix,
+    insertHeader,
   };
 };

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

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+
+import { EditorView } from '@codemirror/view';
+
+export type InsertHeader = (prefix: string) => void;
+
+export const useInsertHeader = (view?: EditorView): InsertHeader => {
+
+  return useCallback((prefix) => {
+    const selection = view?.state.sliceDoc(
+      view?.state.selection.main.from,
+      view?.state.selection.main.to,
+    );
+
+    const cursorPos = view?.state.selection.main.head;
+    const space = ' ';
+    const insertText = prefix + space;
+
+    if (insertText && cursorPos) {
+      view.dispatch({
+        changes: {
+          from: view?.state.selection.main.from,
+          to: view?.state.selection.main.from,
+          insert: insertText + selection,
+        },
+        selection: { anchor: cursorPos + insertText.length },
+      });
+    }
+    view?.focus();
+  }, [view]);
+
+};

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

@@ -1,22 +0,0 @@
-import { useCallback } from 'react';
-
-import { EditorView } from '@codemirror/view';
-
-export type InsertPrefix = (prefix: string) => void;
-
-export const useInsertPrefix = (view?: EditorView): InsertPrefix => {
-
-  return useCallback((prefix) => {
-    const selection = view?.state.sliceDoc(
-      view?.state.selection.main.from,
-      view?.state.selection.main.to,
-    );
-    const insertText = view?.state.replaceSelection(prefix + selection);
-
-    if (insertText) {
-      view?.dispatch(insertText);
-      view?.focus();
-    }
-  }, [view]);
-
-};