From 6bc0bfa1560d1c337ccdb05a93c12b558546e9af Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Mon, 23 Feb 2026 15:53:29 +0700
Subject: [PATCH] fix(documents): switch markdown editor to single-pane wysiwyg

---
 .../documents/MarkdownRichEditor.client.vue          | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/frontend/app/components/workspace/documents/MarkdownRichEditor.client.vue b/frontend/app/components/workspace/documents/MarkdownRichEditor.client.vue
index 2d0ce2d..d2869cb 100644
--- a/frontend/app/components/workspace/documents/MarkdownRichEditor.client.vue
+++ b/frontend/app/components/workspace/documents/MarkdownRichEditor.client.vue
@@ -29,18 +29,20 @@ function looksLikeHtml(value: string) {
 onMounted(async () => {
   if (!mountEl.value) return;
   const [{ default: Editor }] = await Promise.all([
-    import("@toast-ui/editor"),
+    // @ts-ignore Package exports for ESM entry do not expose typings correctly.
+    import("@toast-ui/editor/dist/esm/index.js"),
     import("@toast-ui/editor/dist/toastui-editor.css"),
   ]);
 
   const initialValue = String(props.modelValue ?? "");
   const instance = new Editor({
     el: mountEl.value,
-    initialEditType: "markdown",
-    previewStyle: "vertical",
+    initialEditType: "wysiwyg",
+    previewStyle: "tab",
     initialValue: looksLikeHtml(initialValue) ? "" : initialValue,
     placeholder: props.placeholder ?? "Write with Markdown...",
     height: "520px",
+    hideModeSwitch: true,
     usageStatistics: false,
     events: {
       change: () => {
@@ -99,10 +101,6 @@ onBeforeUnmount(() => {
   border: 1px solid color-mix(in oklab, var(--color-base-content) 14%, transparent);
 }
 
-.markdown-rich-editor :deep(.toastui-editor-mode-switch) {
-  border-top: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
-}
-
 .markdown-rich-editor :deep(.toastui-editor-main-container) {
   min-height: 360px;
 }