isolate markdown editing in MarkdownEditorImpl

enso-org · Feb 6, 2025 · bd0ae98 · bd0ae98
1 parent 6697f2f
commit bd0ae98
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 68 deletions.
diff --git a/app/gui/src/project-view/components/DocumentationEditor.vue b/app/gui/src/project-view/components/DocumentationEditor.vue
@@ -4,7 +4,6 @@ import { useDocumentationImages } from '@/components/DocumentationEditor/images'
 import { transformPastedText } from '@/components/DocumentationEditor/textPaste'
 import FullscreenButton from '@/components/FullscreenButton.vue'
 import MarkdownEditor from '@/components/MarkdownEditor.vue'
-import BlockTypeDropdown from '@/components/MarkdownEditor/BlockTypeDropdown.vue'
 import { htmlToMarkdown } from '@/components/MarkdownEditor/htmlToMarkdown'
 import SvgButton from '@/components/SvgButton.vue'
 import WithFullscreenMode from '@/components/WithFullscreenMode.vue'
@@ -22,7 +21,6 @@ const emit = defineEmits<{
   'update:fullscreen': [boolean]
 }>()
 
-const toolbarElement = ref<HTMLElement>()
 const markdownEditor = ref<ComponentInstance<typeof MarkdownEditor>>()
 
 const graphStore = useGraphStore()
@@ -73,30 +71,23 @@ const handler = documentationEditorBindings.handler({
 
 <template>
   <WithFullscreenMode :fullscreen="fullscreen" @update:animating="fullscreenAnimating = $event">
-    <div class="DocumentationEditor">
-      <div ref="toolbarElement" class="toolbar">
-        <FullscreenButton v-model="fullscreen" />
-        <BlockTypeDropdown
-          @toggleHeader="markdownEditor?.toggleHeader($event)"
-          @toggleQuote="markdownEditor?.toggleQuote()"
-          @toggleList="markdownEditor?.toggleList($event)"
-        />
-        <SvgButton name="image" title="Insert image" @click.stop="tryUploadImageFile()" />
-      </div>
-      <slot name="belowToolbar" />
-      <div
-        class="scrollArea"
-        @keydown="handler"
-        @dragover.prevent
-        @drop.prevent="tryUploadDroppedImage($event)"
-      >
-        <MarkdownEditor
-          ref="markdownEditor"
-          :content="yText"
-          :transformImageUrl="transformImageUrl"
-          :toolbarContainer="toolbarElement"
-        />
-      </div>
+    <div
+      class="DocumentationEditor"
+      @keydown="handler"
+      @dragover.prevent
+      @drop.prevent="tryUploadDroppedImage($event)"
+    >
+      <MarkdownEditor ref="markdownEditor" :content="yText" :transformImageUrl="transformImageUrl">
+        <template #toolbarLeft>
+          <FullscreenButton v-model="fullscreen" />
+        </template>
+        <template #toolbarRight>
+          <SvgButton name="image" title="Insert image" @click.stop="tryUploadImageFile()" />
+        </template>
+        <template #belowToolbar>
+          <slot name="belowToolbar" />
+        </template>
+      </MarkdownEditor>
     </div>
   </WithFullscreenMode>
 </template>
@@ -109,24 +100,4 @@ const handler = documentationEditorBindings.handler({
   height: 100%;
   width: 100%;
 }
-
-.scrollArea {
-  width: 100%;
-  overflow-y: auto;
-  padding-left: 10px;
-  /* Prevent touchpad back gesture, which can be triggered while panning. */
-  overscroll-behavior-x: none;
-  flex-grow: 1;
-}
-
-.toolbar {
-  height: 48px;
-  padding-left: 16px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  gap: 8px;
-  z-index: 250;
-}
 </style>
diff --git a/app/gui/src/project-view/components/MarkdownEditor.vue b/app/gui/src/project-view/components/MarkdownEditor.vue
@@ -3,15 +3,13 @@ import {
   provideDocumentationImageUrlTransformer,
   type UrlTransformer,
 } from '@/components/MarkdownEditor/imageUrlTransformer'
-import { HeaderLevel, ListType } from '@/util/codemirror/markdownEditing'
 import { Vec2 } from '@/util/data/vec2'
 import { ComponentInstance, computed, defineAsyncComponent, ref, toRef } from 'vue'
 import * as Y from 'yjs'
 
 const props = defineProps<{
   content: Y.Text | string
   transformImageUrl?: UrlTransformer
-  toolbarContainer: HTMLElement | undefined
 }>()
 
 const inner = ref<ComponentInstance<typeof LazyMarkdownEditor>>()
@@ -30,20 +28,21 @@ defineExpose({
   putTextAtCoord: (text: string, coords: Vec2) => {
     inner.value?.putTextAtCoords(text, coords)
   },
-  toggleHeader: (level: HeaderLevel) => {
-    inner.value?.toggleHeader(level)
-  },
-  toggleQuote: () => {
-    inner.value?.toggleQuote()
-  },
-  toggleList: (type: ListType) => {
-    inner.value?.toggleList(type)
-  },
 })
 </script>
 
 <template>
   <Suspense>
-    <LazyMarkdownEditor ref="inner" v-bind="props" class="MarkdownEditor" />
+    <LazyMarkdownEditor ref="inner" v-bind="props">
+      <template #toolbarLeft>
+        <slot name="toolbarLeft" />
+      </template>
+      <template #toolbarRight>
+        <slot name="toolbarRight" />
+      </template>
+      <template #belowToolbar>
+        <slot name="belowToolbar" />
+      </template>
+    </LazyMarkdownEditor>
   </Suspense>
 </template>
diff --git a/app/gui/src/project-view/components/MarkdownEditor/MarkdownEditorImpl.vue b/app/gui/src/project-view/components/MarkdownEditor/MarkdownEditorImpl.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import CodeMirrorRoot from '@/components/CodeMirrorRoot.vue'
 import { transformPastedText } from '@/components/DocumentationEditor/textPaste'
+import BlockTypeDropdown from '@/components/MarkdownEditor/BlockTypeDropdown.vue'
 import { ensoMarkdown } from '@/components/MarkdownEditor/markdown'
 import VueHostRender, { VueHostInstance } from '@/components/VueHostRender.vue'
 import { useCodeMirror } from '@/util/codemirror'
@@ -58,23 +59,61 @@ defineExpose({
     const pos = editorView.posAtCoords(coords, false)
     putTextAt(text, pos, pos)
   },
-  toggleHeader,
-  toggleQuote,
-  toggleList,
 })
 </script>
 
 <template>
-  <CodeMirrorRoot
-    ref="editorRoot"
-    v-bind="$attrs"
-    :class="{ editing }"
-    @focusout="focused = false"
-  />
-  <VueHostRender :host="vueHost" />
+  <div class="MarkdownEditorRoot">
+    <div class="toolbar">
+      <slot name="toolbarLeft" />
+      <BlockTypeDropdown
+        @toggleHeader="toggleHeader($event)"
+        @toggleQuote="toggleQuote()"
+        @toggleList="toggleList($event)"
+      />
+      <slot name="toolbarRight" />
+    </div>
+    <slot name="belowToolbar" />
+    <div class="scrollArea">
+      <CodeMirrorRoot
+        ref="editorRoot"
+        v-bind="$attrs"
+        :class="{ MarkdownEditor: true, editing }"
+        @focusout="focused = false"
+      />
+      <VueHostRender :host="vueHost" />
+    </div>
+  </div>
 </template>
 
 <style scoped>
+.MarkdownEditorRoot {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.toolbar {
+  height: 48px;
+  padding-left: 18px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 8px;
+  z-index: 250;
+}
+
+.scrollArea {
+  width: 100%;
+  overflow-y: auto;
+  padding-left: 10px;
+  /* Prevent touchpad back gesture, which can be triggered while panning. */
+  overscroll-behavior-x: none;
+  flex-grow: 1;
+}
+
 :deep(.cm-content) {
   /*noinspection CssUnresolvedCustomProperty,CssNoGenericFontName*/
   font-family: var(--font-sans);