Merge branch 'feat/133066-able-to-change-text-format-using-button' into feat/133085-add-prefix-to-line

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

@@ -2,7 +2,8 @@ import { useCallback, useState } from 'react';
 
 import { Collapse } from 'reactstrap';
 
-import { useCodeMirrorEditorIsolated } from '../../../stores';
+import type { GlobalCodeMirrorEditorKey } from '../../../consts';
+import { useCodeMirrorEditorIsolated, useCodeMirrorEditorIsolated } from '../../../stores';
 
 
 import styles from './TextFormatTools.module.scss';
@@ -33,7 +34,7 @@ const TextFormatToolsToggler = (props: TogglarProps): JSX.Element => {
 };
 
 type TextFormatToolsType = {
-  editorKey: string,
+  editorKey: string | GlobalCodeMirrorEditorKey,
 }
 
 export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
@@ -47,25 +48,27 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
 
   const onClickAddHeaderToSelection = (prefix: string) => codeMirrorEditor?.insertHeader(prefix);
 
+  const onClickInsertMarkdownElements = (prefix: string, suffix: string) => codeMirrorEditor?.insertMarkdownElements(prefix, suffix);
+
   return (
     <div className="d-flex">
       <TextFormatToolsToggler isOpen={isOpen} onClick={toggle} />
 
       <Collapse isOpen={isOpen} horizontal>
         <div className="d-flex px-1 gap-1" style={{ width: '220px' }}>
-          <button type="button" className="btn btn-toolbar-button">
+          <button type="button" className="btn btn-toolbar-button" onClick={() => onClickInsertMarkdownElements('**', '**')}>
             <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">format_italic</span>
+            <span className="material-symbols-outlined fs-5" onClick={() => onClickInsertMarkdownElements('*', '*')}>format_italic</span>
           </button>
-          <button type="button" className="btn btn-toolbar-button">
+          <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('#')}>
             <span className="material-symbols-outlined fs-5">block</span>
           </button>
-          <button type="button" className="btn btn-toolbar-button">
+          <button type="button" className="btn btn-toolbar-button" onClick={() => onClickInsertMarkdownElements('`', '`')}>
             <span className="material-symbols-outlined fs-5">code</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">

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

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 
-import { AcceptedUploadFileType } from '../../../consts';
+import type { GlobalCodeMirrorEditorKey, AcceptedUploadFileType } from '../../../consts';
 
 import { AttachmentsDropup } from './AttachmentsDropup';
 import { DiagramButton } from './DiagramButton';
@@ -9,11 +9,10 @@ import { TableButton } from './TableButton';
 import { TemplateButton } from './TemplateButton';
 import { TextFormatTools } from './TextFormatTools';
 
-
 import styles from './Toolbar.module.scss';
 
 type Props = {
-  editorKey: string,
+  editorKey: string | GlobalCodeMirrorEditorKey,
   onFileOpen: () => void,
   acceptedFileType: AcceptedUploadFileType
 }
@@ -21,7 +20,6 @@ type Props = {
 export const Toolbar = memo((props: Props): JSX.Element => {
 
   const { editorKey, onFileOpen, acceptedFileType } = props;
-
   return (
     <div className={`d-flex gap-2 p-2 codemirror-editor-toolbar ${styles['codemirror-editor-toolbar']}`}>
       <AttachmentsDropup onFileOpen={onFileOpen} acceptedFileType={acceptedFileType} />

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

@@ -17,6 +17,7 @@ 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';
 import { useSetCaretLine, type SetCaretLine } from './utils/set-caret-line';
@@ -38,6 +39,7 @@ type UseCodeMirrorEditorUtils = {
   setCaretLine: SetCaretLine,
   insertText: InsertText,
   replaceText: ReplaceText,
+  insertMarkdownElements: InsertMarkdowElements,
   insertHeader: InsertHeader,
 }
 export type UseCodeMirrorEditor = {
@@ -91,6 +93,7 @@ export const useCodeMirrorEditor = (props?: UseCodeMirror): UseCodeMirrorEditor
   const setCaretLine = useSetCaretLine(view);
   const insertText = useInsertText(view);
   const replaceText = useReplaceText(view);
+  const insertMarkdownElements = useInsertMarkdownElements(view);
   const insertHeader = useInsertHeader(view);
 
   return {
@@ -103,6 +106,7 @@ export const useCodeMirrorEditor = (props?: UseCodeMirror): UseCodeMirrorEditor
     setCaretLine,
     insertText,
     replaceText,
+    insertMarkdownElements,
     insertHeader,
   };
 };

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

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+
+import { EditorView } from '@codemirror/view';
+
+export type InsertMarkdowElements = (
+  prefix: string,
+  suffix: string,
+) => void;
+
+export const useInsertMarkdownElements = (view?: EditorView): InsertMarkdowElements => {
+
+  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;
+    const insertText = view?.state.replaceSelection(prefix + selection + suffix);
+
+    if (insertText == null || cursorPos == null) {
+      return;
+    }
+    view?.dispatch(insertText);
+    view?.dispatch({ selection: { anchor: cursorPos + prefix.length } });
+    view?.focus();
+  }, [view]);
+};