Merge pull request #15987 from Budibase/markdown-performance

Markdown performance improvements

packages/bbui/src/Markdown/MarkdownViewer.svelte

@@ -1,71 +1,76 @@
 <script lang="ts">
-  import SpectrumMDE from "./SpectrumMDE.svelte"
+  import { marked } from "marked"
 
   export let value: string | undefined = undefined
   export let height: string | undefined = undefined
 
-  let mde: any
+  let ref: HTMLDivElement | undefined
 
-  // Keep the value up to date
-  $: mde && mde.value(value || "")
-  $: {
-    if (mde && !mde.isPreviewActive()) {
-      mde.togglePreview()
+  $: updateValue(ref, value)
+
+  const updateValue = (
+    ref: HTMLDivElement | undefined,
+    markdown: string | undefined
+  ) => {
+    if (!ref) {
+      return
     }
+    if (!markdown) {
+      ref.innerHTML = ""
+      return
+    }
+    ref.innerHTML = marked.parse(markdown)
   }
 </script>
 
-<div class="markdown-viewer" style="height:{height};">
-  <SpectrumMDE
-    bind:mde
-    scroll={false}
-    easyMDEOptions={{
-      initialValue: value,
-      toolbar: false,
-    }}
-  />
-</div>
+<div class="markdown-viewer" style="height:{height};" bind:this={ref} />
 
 <style>
   .markdown-viewer {
     overflow: auto;
   }
-  /* Remove padding, borders and background colors */
-  .markdown-viewer :global(.editor-preview) {
-    padding: 0;
-    border: none;
-    background: transparent;
-  }
-  .markdown-viewer :global(.CodeMirror) {
-    border: none;
-    background: transparent;
-    padding: 0;
-    color: inherit;
-  }
-  .markdown-viewer :global(.EasyMDEContainer) {
-    background: transparent;
-  }
-  /* Hide the actual code editor */
-  .markdown-viewer :global(.CodeMirror-scroll) {
-    display: none;
-  }
-  /*Hide the scrollbar*/
-  .markdown-viewer :global(.CodeMirror-vscrollbar) {
-    display: none !important;
-  }
-  /*Position relatively so we only consume whatever space we need */
-  .markdown-viewer :global(.editor-preview-full) {
-    position: relative;
-  }
   /* Remove margin on the first and last components to fully trim the preview */
-  .markdown-viewer :global(.editor-preview-full > :first-child) {
+  .markdown-viewer :global(:first-child) {
     margin-top: 0;
   }
-  .markdown-viewer :global(.editor-preview-full > :last-child) {
+  .markdown-viewer :global(:last-child) {
     margin-bottom: 0;
   }
-  /* Code blocks in preview */
-  .markdown-viewer :global(.editor-preview-full pre) {
+  /* Code blocks */
+  .markdown-viewer :global(pre) {
     background: var(--spectrum-global-color-gray-200);
+    padding: 4px;
+    border-radius: 4px;
+  }
+  .markdown-viewer :global(code) {
+    color: #e83e8c;
+  }
+  .markdown-viewer :global(pre code) {
+    color: var(--spectrum-alias-text-color);
+  }
+  /* Block quotes */
+  .markdown-viewer :global(blockquote) {
+    border-left: 4px solid var(--spectrum-global-color-gray-400);
+    color: var(--spectrum-global-color-gray-700);
+    margin-left: 0;
+    padding-left: 20px;
+  }
+  /* HRs */
+  .markdown-viewer :global(hr) {
+    background-color: var(--spectrum-global-color-gray-300);
+    border: none;
+    height: 2px;
+  }
+  /* Tables */
+  .markdown-viewer :global(td),
+  .markdown-viewer :global(th) {
+    border-color: var(--spectrum-alias-border-color) !important;
+  }
+  /* Links */
+  .markdown-viewer :global(a) {
+    color: var(--primaryColor);
+  }
+  .markdown-viewer :global(a:hover) {
+    color: var(--primaryColorHover);
   }
 </style>

packages/builder/package.json

@@ -75,6 +75,7 @@
     "downloadjs": "1.4.7",
     "fast-json-patch": "^3.1.1",
     "lodash": "4.17.21",
+    "marked": "^15.0.8",
     "posthog-js": "^1.118.0",
     "remixicon": "2.5.0",
     "sanitize-html": "^2.13.0",

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte

@@ -20,7 +20,7 @@
 
   // Aliases for other strings to match to when searching
   const aliases = {
-    text: ["headline", "paragraph"],
+    text: ["headline", "heading", "title", "paragraph", "markdown"],
   }
 
   let searchString

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json

@@ -45,7 +45,6 @@
       "link",
       "icon",
       "embed",
-      "markdownviewer",
       "backgroundimage",
       "embeddedmap"
     ]

packages/client/manifest.json

@@ -6980,6 +6980,7 @@
     ]
   },
   "markdownviewer": {
+    "deprecated": true,
     "name": "Markdown Viewer",
     "icon": "Preview",
     "styles": ["size"],
@@ -8057,6 +8058,7 @@
     }
   },
   "textv2": {
+    "new": true,
     "name": "Text",
     "description": "A component for displaying text",
     "icon": "Text",

packages/client/src/components/app/Text.svelte

@@ -72,4 +72,9 @@
   div :global(h6) {
     font-weight: 600;
   }
+
+  /* Slightly shrink h1 so that it fits into 2 grid rows by default */
+  div :global(h1) {
+    font-size: 1.8em;
+  }
 </style>

packages/client/src/components/app/deprecated/MarkdownViewer.svelte

@@ -1,7 +1,7 @@
 <script>
   import { MarkdownViewer } from "@budibase/bbui"
   import { getContext } from "svelte"
-  import Placeholder from "./Placeholder.svelte"
+  import Placeholder from "../Placeholder.svelte"
 
   export let value
 

packages/client/src/components/app/index.js

@@ -30,7 +30,6 @@ export { default as daterangepicker } from "./DateRangePicker.svelte"
 export { default as cardstat } from "./CardStat.svelte"
 export { default as spectrumcard } from "./SpectrumCard.svelte"
 export { default as tag } from "./Tag.svelte"
-export { default as markdownviewer } from "./MarkdownViewer.svelte"
 export { default as embeddedmap } from "./embedded-map/EmbeddedMap.svelte"
 export { default as sidepanel } from "./SidePanel.svelte"
 export { default as modal } from "./Modal.svelte"
@@ -54,3 +53,4 @@ export { default as card } from "./deprecated/Card.svelte"
 export { default as section } from "./deprecated/Section.svelte"
 export { default as text } from "./deprecated/Text.svelte"
 export { default as heading } from "./deprecated/Heading.svelte"
+export { default as markdownviewer } from "./deprecated/MarkdownViewer.svelte"

yarn.lock

@@ -15957,6 +15957,11 @@ map-obj@^4.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
+marked@^15.0.8:
+  version "15.0.8"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-15.0.8.tgz#39873a3fdf91a520111e48aeb2ef3746d58d7166"
+  integrity sha512-rli4l2LyZqpQuRve5C0rkn6pj3hT8EWPC+zkAxFTAJLxRbENfTAhEQq9itrmf1Y81QtAX5D/MYlGlIomNgj9lA==
+
 marked@^4.0.10, marked@^4.1.0:
   version "4.2.12"
   resolved "https://registry.yarnpkg.com/marked/-/marked-4.2.12.tgz#d69a64e21d71b06250da995dcd065c11083bebb5"