Merge branch 'feat/133066-able-to-change-text-format-using-button' into imprv/134164-make-button-add-prefix

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,6 +41,7 @@ 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);

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

@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+
+import { EditorView } from '@codemirror/view';
+
+type InsertHeader = (view?: EditorView) => void;
+
+export const useInsertHeader = (): InsertHeader => {
+  return useCallback((view?: EditorView) => {
+    if (view == null) {
+      return;
+    }
+    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;
+
+    if (!line.text.startsWith(prefix)) {
+      prefix += ' ';
+    }
+
+    view.dispatch({
+      changes: {
+        from: insertPos,
+        to: insertPos,
+        insert: prefix,
+      },
+      selection: { anchor: cursorPos + prefix.length },
+    });
+    view.focus();
+  }, []);
+};