Merge pull request #8214 from weseek/feat/133085-add-prefix-to-line

feat: Able to add header with button

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,12 +41,19 @@ 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 onClickInsertMarkdownElements = (prefix: string, suffix: string) => codeMirrorEditor?.insertMarkdownElements(prefix, suffix);
+  const onClickInsertMarkdownElements = (prefix: string, suffix: string) => {
+    codeMirrorEditor?.insertMarkdownElements(prefix, suffix);
+  };
+
+  const onClickAddHeaderToSelection = () => {
+    insertHeader(codeMirrorEditor?.view);
+  };
 
   return (
     <div className="d-flex">
@@ -62,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">
+          <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/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();
+  }, []);
+};