From 8882cc823b6981691e193e85c857374c18f9bb90 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sun, 20 Apr 2025 12:21:24 +0100
Subject: [PATCH 1/3] Use new markdown viewer library for much faster markdown
 performance

---
 .../bbui/src/Markdown/MarkdownViewer.svelte   | 101 +++++++++---------
 packages/builder/package.json                 |   1 +
 yarn.lock                                     |   5 +
 3 files changed, 59 insertions(+), 48 deletions(-)

diff --git a/packages/bbui/src/Markdown/MarkdownViewer.svelte b/packages/bbui/src/Markdown/MarkdownViewer.svelte
index 0fd10efadf..55b341b33b 100644
--- a/packages/bbui/src/Markdown/MarkdownViewer.svelte
+++ b/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>
diff --git a/packages/builder/package.json b/packages/builder/package.json
index ee121cdf14..4a16f5ee4e 100644
--- a/packages/builder/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index e6d3422b62..44d85eca7b 100644
--- a/yarn.lock
+++ b/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"

From be2ae0ff1c21437da6130fba5a54da72adb66872 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Apr 2025 10:26:53 +0100
Subject: [PATCH 2/3] Mark MarkdownViewer component as depreated

---
 .../[componentId]/new/_components/componentStructure.json       | 1 -
 packages/client/manifest.json                                   | 2 ++
 .../src/components/app/{ => deprecated}/MarkdownViewer.svelte   | 2 +-
 packages/client/src/components/app/index.js                     | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)
 rename packages/client/src/components/app/{ => deprecated}/MarkdownViewer.svelte (89%)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
index bc1c541319..3ae318b281 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
@@ -45,7 +45,6 @@
       "link",
       "icon",
       "embed",
-      "markdownviewer",
       "backgroundimage",
       "embeddedmap"
     ]
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 16d1109875..989b2e8130 100644
--- a/packages/client/manifest.json
+++ b/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",
diff --git a/packages/client/src/components/app/MarkdownViewer.svelte b/packages/client/src/components/app/deprecated/MarkdownViewer.svelte
similarity index 89%
rename from packages/client/src/components/app/MarkdownViewer.svelte
rename to packages/client/src/components/app/deprecated/MarkdownViewer.svelte
index 23866e20e9..d19e3341a2 100644
--- a/packages/client/src/components/app/MarkdownViewer.svelte
+++ b/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
 
diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js
index ac8c9a964d..b96759221e 100644
--- a/packages/client/src/components/app/index.js
+++ b/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"

From 89ec61dce366061c57bef89cc484c37c3e1aad24 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Apr 2025 10:27:17 +0100
Subject: [PATCH 3/3] Add more aliases for text component, add new badge,
 adjust size so medium titles fit into 2 grid rows

---
 .../[componentId]/new/_components/NewComponentPanel.svelte   | 2 +-
 packages/client/src/components/app/Text.svelte               | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
index bb08514d3d..80478c8606 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/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
diff --git a/packages/client/src/components/app/Text.svelte b/packages/client/src/components/app/Text.svelte
index c4937fec3d..f27d0e8241 100644
--- a/packages/client/src/components/app/Text.svelte
+++ b/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>