Initial editor toolbar setup

src/components/App.tsx

@@ -25,6 +25,10 @@ import AppNavigator from './organisms/AppNavigator'
 import Toast from '../shared/components/organisms/Toast'
 import styled from '../shared/lib/styled'
 import { useToast } from '../shared/lib/stores/toast'
+import {
+  applyBoldStyleEventEmitter,
+  applyItalicStyleEventEmitter,
+} from '../lib/events'
 
 const LoadingText = styled.div`
   margin: 30px;
@@ -155,6 +159,23 @@ const App = () => {
     }
   }, [togglePreferencesModal, push])
 
+  useEffectOnce(() => {
+    const applyBoldStyleIpcEventHandler = () => {
+      applyBoldStyleEventEmitter.dispatch()
+    }
+    const applyItalicStyleIpcEventHandler = () => {
+      applyItalicStyleEventEmitter.dispatch()
+    }
+
+    addIpcListener('apply-bold-style', applyBoldStyleIpcEventHandler)
+    addIpcListener('apply-italic-style', applyItalicStyleIpcEventHandler)
+
+    return () => {
+      removeIpcListener('apply-bold-style', applyBoldStyleIpcEventHandler)
+      removeIpcListener('apply-italic-style', applyItalicStyleIpcEventHandler)
+    }
+  })
+
   const switchWorkspaceHandler = useCallback(
     (_event: any, index: number) => {
       const storageIds = keys(storageMap)

src/components/PreferencesModal/EditorTab.tsx

@@ -12,7 +12,11 @@ import { themes } from '../../lib/CodeMirror'
 import CustomizedCodeEditor from '../atoms/CustomizedCodeEditor'
 import { useDebounce } from 'react-use'
 import Form from '../../shared/components/molecules/Form'
-import { SimpleFormSelect } from '../../shared/components/molecules/Form/atoms/FormSelect'
+import FormSelect, {
+  FormSelectOption,
+  SimpleFormSelect,
+} from '../../shared/components/molecules/Form/atoms/FormSelect'
+import { lngKeys } from '../../lib/i18n/types'
 
 const defaultPreviewContent = `# hello-world.js
 
@@ -101,6 +105,15 @@ const EditorTab = () => {
     [setPreferences]
   )
 
+  const selectShowEditorToolbar = useCallback(
+    (formOption: FormSelectOption) => {
+      setPreferences({
+        'editor.showEditorToolbar': formOption.value === 'Show',
+      })
+    },
+    [setPreferences]
+  )
+
   const codeEditorKeydownInterceptor = useMemo<KeyboardEventHandler>(() => {
     return (event) => {
       if (event.key === 'Escape') {
@@ -187,6 +200,34 @@ const EditorTab = () => {
               },
             ],
           },
+          {
+            title: t(lngKeys.SettingsShowEditorToolbar),
+            items: [
+              {
+                type: 'node',
+                element: (
+                  <FormSelect
+                    options={[
+                      {
+                        label: t(lngKeys.GeneralShowVerb),
+                        value: 'Show',
+                      },
+                      { label: t(lngKeys.GeneralHideVerb), value: 'Hide' },
+                    ]}
+                    value={{
+                      label: preferences['editor.showEditorToolbar']
+                        ? t(lngKeys.GeneralShowVerb)
+                        : t(lngKeys.GeneralHideVerb),
+                      value: preferences['editor.showEditorToolbar']
+                        ? 'Show'
+                        : 'Hide',
+                    }}
+                    onChange={selectShowEditorToolbar}
+                  />
+                ),
+              },
+            ],
+          },
           {
             title: t('preferences.editorKeymap'),
             items: [