feat: move raw switch to toolbar

Author: codewec

app/components/editoro/MainContent.vue

@@ -25,6 +25,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
+  toggleMode: []
   updateEditorContent: [value: string]
   selectPath: [path: string]
   goParent: []
@@ -49,6 +50,18 @@ const {
   canUploadImage: () => props.canUploadImage,
   uploadImage: props.uploadImage
 })
+
+const richEditorHandlers = computed(() => ({
+  ...editorHandlers,
+  toggleRawMode: {
+    canExecute: () => true,
+    execute: () => {
+      emit('toggleMode')
+      return true
+    },
+    isActive: () => false
+  }
+}))
 </script>
 
 <template>
@@ -134,22 +147,40 @@ const {
         </div>
       </template>
 
-      <UTextarea
+      <div
         v-if="props.editorViewMode === 'raw'"
-        :model-value="props.editorContent"
-        :rows="30"
-        :autoresize="false"
-        class="editoro-raw"
-        :placeholder="t('main.rawPlaceholder')"
-        @update:model-value="emit('updateEditorContent', String($event || ''))"
-      />
+        class="editoro-raw-wrap"
+      >
+        <div class="editoro-raw-switch-wrap">
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="soft"
+            class="editoro-raw-switch"
+            icon="i-lucide-square-pen"
+            :aria-label="t('editorMode.toRich')"
+            @click="emit('toggleMode')"
+          >
+            {{ t('editorMode.rich') }}
+          </UButton>
+        </div>
+
+        <UTextarea
+          :model-value="props.editorContent"
+          :rows="30"
+          :autoresize="false"
+          class="editoro-raw"
+          :placeholder="t('main.rawPlaceholder')"
+          @update:model-value="emit('updateEditorContent', String($event || ''))"
+        />
+      </div>
 
       <UEditor
         v-else
         :model-value="props.editorContent"
         class="editoro-editor"
         content-type="markdown"
-        :handlers="editorHandlers"
+        :handlers="richEditorHandlers"
         :placeholder="t('main.editorPlaceholder')"
         @update:model-value="emit('updateEditorContent', String($event || ''))"
       >
@@ -278,8 +309,23 @@ const {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
 }
 
+.editoro-raw-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.editoro-raw-switch-wrap {
+  position: absolute;
+  top: 0.75rem;
+  right: 1rem;
+  z-index: 10;
+}
+
 .editoro-raw :deep(textarea) {
   height: 100%;
+  padding-right: 6.25rem;
 }
 
 .editoro-toolbar {

app/components/editoro/MainHeader.vue

@@ -5,9 +5,6 @@ const { t } = useI18n()
 
 const props = defineProps<{
   showExpandSidebarButton: boolean
-  editorModeLabel: string
-  editorModeIcon: string
-  editorModeTooltip: string
   headerBadges: EditorPinnedBadge[]
   canRenameOrDelete: boolean
   isSaving: boolean
@@ -18,7 +15,6 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   expandSidebar: []
-  toggleMode: []
   selectBadge: [path: string]
   togglePin: [path: string]
   rename: []
@@ -38,13 +34,6 @@ const emit = defineEmits<{
       @click="emit('expandSidebar')"
     />
 
-    <EditoroHeaderModeToggle
-      :label="props.editorModeLabel"
-      :icon="props.editorModeIcon"
-      :tooltip="props.editorModeTooltip"
-      @toggle="emit('toggleMode')"
-    />
-
     <EditoroHeaderPinnedBadges
       :badges="props.headerBadges"
       @select="(path) => emit('selectBadge', path)"

app/components/editoro/Workspace.vue

@@ -63,7 +63,6 @@ const {
         v-bind="mainHeaderProps"
         :show-expand-sidebar-button="editoro.ui.isSidebarCollapsed.value"
         @expand-sidebar="mainHeaderHandlers.expandSidebar"
-        @toggle-mode="mainHeaderHandlers.toggleMode"
         @select-badge="mainHeaderHandlers.selectBadge"
         @toggle-pin="mainHeaderHandlers.togglePin"
         @rename="mainHeaderHandlers.rename"
@@ -72,6 +71,7 @@ const {
 
       <EditoroMainContent
         v-bind="mainContentProps"
+        @toggle-mode="mainContentHandlers.toggleMode"
         @update-editor-content="mainContentHandlers.updateEditorContent"
         @select-path="mainContentHandlers.selectPath"
         @go-parent="mainContentHandlers.goParent"

app/composables/workspace/useEditoroMainContentBindings.ts

@@ -27,6 +27,7 @@ export function useEditoroMainContentBindings(options: WorkspaceBindingOptions)
   }))
 
   const mainContentHandlers = {
+    toggleMode: state.editor.toggleMode,
     updateEditorContent: (value: string) => {
       state.editor.content.value = value
     },

app/composables/workspace/useEditoroMainHeaderBindings.ts

@@ -8,9 +8,6 @@ import type { EditoroState } from '~/composables/workspace/types'
 export function useEditoroMainHeaderBindings(state: EditoroState) {
   const mainHeaderProps = computed(() => ({
     showExpandSidebarButton: unref(state.ui.isSidebarCollapsed),
-    editorModeLabel: state.editor.modeLabel.value,
-    editorModeIcon: state.editor.modeIcon.value,
-    editorModeTooltip: state.editor.modeTooltip.value,
     headerBadges: state.view.headerBadges.value,
     canRenameOrDelete: state.view.canRenameOrDelete.value,
     isSaving: state.editor.isSaving.value,
@@ -21,7 +18,6 @@ export function useEditoroMainHeaderBindings(state: EditoroState) {
 
   const mainHeaderHandlers = {
     expandSidebar: state.ui.expandSidebar,
-    toggleMode: state.editor.toggleMode,
     selectBadge: (path: string) => {
       if (!path) {
         return

app/constants/editoro.ts

@@ -25,6 +25,9 @@ export function createEditorToolbarItems(t: Translator) {
       { kind: 'codeBlock', icon: 'i-lucide-square-code', tooltip: { text: t('toolbar.codeBlock') } },
       { kind: 'horizontalRule', icon: 'i-lucide-minus', tooltip: { text: t('toolbar.divider') } }
     ],
+    [
+      { kind: 'toggleRawMode', icon: 'i-lucide-file-text', label: 'Raw', tooltip: { text: t('toolbar.raw') }, 'aria-label': t('toolbar.raw') }
+    ],
     [
       { 'kind': 'uploadImage', 'icon': 'i-lucide-image-plus', 'tooltip': { text: t('toolbar.uploadImage') }, 'aria-label': t('toolbar.uploadImage') }
     ]

i18n/locales/en.json

@@ -79,6 +79,7 @@
     "quote": "Quote",
     "codeBlock": "Code block",
     "divider": "Divider",
+    "raw": "Open raw editor",
     "uploadImage": "Upload image"
   },
   "suggestion": {

i18n/locales/ru.json

@@ -79,6 +79,7 @@
     "quote": "Цитата",
     "codeBlock": "Блок кода",
     "divider": "Разделитель",
+    "raw": "Открыть raw-редактор",
     "uploadImage": "Загрузить изображение"
   },
   "suggestion": {