133069 able to insert text using button

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

@@ -36,6 +36,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   } = props;
 
   const containerRef = useRef(null);
+  // const editorRef = useRef<EditorView | null>(null);
 
   const cmProps = useMemo<ReactCodeMirrorProps>(() => {
     return {
@@ -103,7 +104,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   return (
     <div {...getRootProps()} className="flex-expand-vert">
       <CodeMirrorEditorContainer ref={containerRef} />
-      <Toolbar onFileOpen={open} />
+      <Toolbar onFileOpen={open} editorKey={editorKey} />
     </div>
   );
 };

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

@@ -2,6 +2,8 @@ import { useCallback, useState } from 'react';
 
 import { Collapse } from 'reactstrap';
 
+import { useCodeMirrorEditorIsolated } from '../../../stores';
+
 
 type TogglarProps = {
   isOpen: boolean,
@@ -25,26 +27,44 @@ const TextFormatToolsToggler = (props: TogglarProps): JSX.Element => {
   );
 };
 
-export const TextFormatTools = (): JSX.Element => {
+type TextFormatToolsType = {
+  editorKey: string,
+}
+
+export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
+  const { editorKey } = props;
   const [isOpen, setOpen] = useState(false);
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
 
   const toggle = useCallback(() => {
     setOpen(bool => !bool);
   }, []);
 
+  const view = codeMirrorEditor?.view;
+
+  const createReplaceSelectionHandler = useCallback((prefix: string, suffix: string) => {
+    return () => {
+      const insertText = view?.state.replaceSelection(`${prefix}${suffix}`);
+      if (insertText) {
+        view?.dispatch(insertText);
+      }
+    };
+  }, [view]);
+
+
   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={() => createReplaceSelectionHandler('**', '**')()}>
             <span className="material-icons-outlined fs-5">format_bold</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">
-            <span className="material-icons-outlined fs-5">format_italic</span>
+            <span className="material-icons-outlined fs-5" onClick={() => createReplaceSelectionHandler('*', '*')()}>format_italic</span>
           </button>
-          <button type="button" className="btn btn-toolbar-button">
+          <button type="button" className="btn btn-toolbar-button" onClick={() => createReplaceSelectionHandler('~', '~')()}>
             <span className="material-icons-outlined fs-5">format_strikethrough</span>
           </button>
           <button type="button" className="btn btn-toolbar-button">

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

@@ -10,16 +10,17 @@ import { TextFormatTools } from './TextFormatTools';
 import styles from './Toolbar.module.scss';
 
 type Props = {
+  editorKey: string,
   onFileOpen: () => void,
 }
 
 export const Toolbar = memo((props: Props): JSX.Element => {
 
-  const { onFileOpen } = props;
+  const { editorKey, onFileOpen } = props;
   return (
     <div className={`d-flex gap-2 p-2 codemirror-editor-toolbar ${styles['codemirror-editor-toolbar']}`}>
       <AttachmentsDropup onFileOpen={onFileOpen} />
-      <TextFormatTools />
+      <TextFormatTools editorKey={editorKey} />
       <EmojiButton />
       <TableButton />
       <DiagramButton />