adjustments

Author: AlexAndBear

changelog/unreleased/bugfix-replace-text-editor.md

@@ -59,7 +59,11 @@
         ref="markdownContainerRef"
         class="markdown-container oc-flex oc-flex-middle"
       >
-        <text-editor is-read-only :current-content="markdownContent" />
+        <text-editor
+          class="markdown-container-content"
+          is-read-only
+          :current-content="markdownContent"
+        />
         <div class="markdown-container-edit oc-ml-s">
           <router-link
             v-oc-tooltip="$gettext('Edit description')"
@@ -89,6 +93,7 @@ import {
   computed,
   defineComponent,
   inject,
+  nextTick,
   onBeforeUnmount,
   onMounted,
   PropType,
@@ -153,6 +158,7 @@ export default defineComponent({
       unref(markdownContainerRef).classList.toggle(markdownContainerCollapsedClass)
     }
     const onMarkdownResize = () => {
+      console.log('RESIZE')
       if (!unref(markdownContainerRef)) {
         return
       }
@@ -171,6 +177,8 @@ export default defineComponent({
     }
     const markdownResizeObserver = new ResizeObserver(onMarkdownResize)
     const observeMarkdownContainerResize = () => {
+      console.log(markdownResizeObserver)
+      console.log(unref(markdownContainerRef))
       if (!markdownResizeObserver || !unref(markdownContainerRef)) {
         return
       }
@@ -206,6 +214,7 @@ export default defineComponent({
         markdownContent.value = fileContentsResponse.body
         markdownResource.value = fileInfoResponse
 
+        await nextTick()
         if (unref(markdownContent)) {
           observeMarkdownContainerResize()
         }
@@ -340,6 +349,14 @@ export default defineComponent({
     white-space: nowrap;
   }
 
+  .markdown-container {
+    &-content {
+      .md-editor-preview-wrapper {
+        padding: 0;
+      }
+    }
+  }
+
   .markdown-container.collapsed {
     max-height: 100px;
     overflow: hidden;

packages/web-app-files/src/components/Spaces/SpaceHeader.vue

@@ -36,30 +36,8 @@ export default defineComponent({
 
 <style lang="scss">
 .oc-text-editor-readonly {
-  //Toastui Editor doesn't have margins in view mode, adjusted for uniformity
-  padding: 18px 25px;
-
   //Fixes in readonly mode vertical scrolling is not available
   height: calc(100vh - 52px);
   overflow: auto;
 }
-
-// Make url links limited in height and scrollable since base64 encoded images might be very long
-.toastui-editor-md-link-url {
-  display: block;
-  max-height: 100px;
-  overflow: auto;
-}
-
-.toastui-editor-defaultUI {
-  // Adjustments to match our theming
-  border: none;
-  // Adjustments to not overlay with the app switcher
-  z-index: 0;
-}
-
-.toastui-editor-defaultUI-toolbar,
-.toastui-editor-md-tab-container {
-  background-color: var(--oc-color-background-default) !important;
-}
 </style>

packages/web-app-text-editor/src/App.vue

@@ -2,7 +2,7 @@
   <div id="text-editor-container" class="oc-height-1-1">
     <md-preview
       v-if="isReadOnly"
-      id="space-description-preview"
+      id="text-editor-preview-component"
       :model-value="currentContent"
       :language="languages[language.current] || 'en-US'"
       :theme="theme"
@@ -87,30 +87,15 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-#text-editor-component {
+.md-editor {
   height: 100%;
-}
-
-.toastui-editor-tabs {
-  // Fix tab with for long i18n text
-  .tab-item {
-    width: auto;
-    padding-left: var(--oc-space-small);
-    padding-right: var(--oc-space-small);
-  }
-}
-
-#space-description-preview {
-  background-color: transparent;
-  width: max-content;
 
-  .md-editor-preview-wrapper {
-    padding: 0;
+  &-code-head {
+    justify-content: end !important;
   }
 
-  .md-editor-preview {
-    color: var(--oc-color-text-default);
-    font-size: var(--oc-text-default);
+  &-code-flag {
+    display: none;
   }
 }
 </style>