dsrptlab/clientsflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(documents): switch markdown editor to single-pane wysiwyg

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-23 15:53:29 +07:00
parent cb2d12819c
commit 6bc0bfa156
1 changed files with 5 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/app/components/workspace/documents/MarkdownRichEditor.client.vue
View File

@@ -29,18 +29,20 @@ function looksLikeHtml(value: string) {
onMounted(async () => { onMounted(async () => {
if (!mountEl.value) return; if (!mountEl.value) return;
const [{ default: Editor }] = await Promise.all([ 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"), import("@toast-ui/editor/dist/toastui-editor.css"),
]); ]);
const initialValue = String(props.modelValue ?? ""); const initialValue = String(props.modelValue ?? "");
const instance = new Editor({ const instance = new Editor({
el: mountEl.value, el: mountEl.value,
initialEditType: "markdown", initialEditType: "wysiwyg",
previewStyle: "vertical", previewStyle: "tab",
initialValue: looksLikeHtml(initialValue) ? "" : initialValue, initialValue: looksLikeHtml(initialValue) ? "" : initialValue,
placeholder: props.placeholder ?? "Write with Markdown...", placeholder: props.placeholder ?? "Write with Markdown...",
height: "520px", height: "520px",
hideModeSwitch: true,
usageStatistics: false, usageStatistics: false,
events: { events: {
change: () => { change: () => {
@@ -99,10 +101,6 @@ onBeforeUnmount(() => {
border: 1px solid color-mix(in oklab, var(--color-base-content) 14%, transparent); 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) { .markdown-rich-editor :deep(.toastui-editor-main-container) {
min-height: 360px; min-height: 360px;
} }