@budibase/bbui 3.9.2 → 3.9.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.9.2",
+  "version": "3.9.3",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -99,5 +99,5 @@
       }
     }
   },
-  "gitHead": "f9927b35b3939f1b96eb911d820ba5b06f288cd6"
+  "gitHead": "1a6437c9cc639e40b884932d3db2cea12ddf9267"
 }

package/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;
+  /* Remove margin on the first and last components to fully trim the preview */
+  .markdown-viewer :global(:first-child) {
+    margin-top: 0;
   }
-  .markdown-viewer :global(.CodeMirror) {
-    border: none;
-    background: transparent;
-    padding: 0;
-    color: inherit;
+  .markdown-viewer :global(:last-child) {
+    margin-bottom: 0;
   }
-  .markdown-viewer :global(.EasyMDEContainer) {
-    background: transparent;
+  /* Code blocks */
+  .markdown-viewer :global(pre) {
+    background: var(--spectrum-global-color-gray-200);
+    padding: 4px;
+    border-radius: 4px;
   }
-  /* Hide the actual code editor */
-  .markdown-viewer :global(.CodeMirror-scroll) {
-    display: none;
+  .markdown-viewer :global(code) {
+    color: #e83e8c;
   }
-  /*Hide the scrollbar*/
-  .markdown-viewer :global(.CodeMirror-vscrollbar) {
-    display: none !important;
+  .markdown-viewer :global(pre code) {
+    color: var(--spectrum-alias-text-color);
   }
-  /*Position relatively so we only consume whatever space we need */
-  .markdown-viewer :global(.editor-preview-full) {
-    position: relative;
+  /* 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;
   }
-  /* Remove margin on the first and last components to fully trim the preview */
-  .markdown-viewer :global(.editor-preview-full > :first-child) {
-    margin-top: 0;
+  /* HRs */
+  .markdown-viewer :global(hr) {
+    background-color: var(--spectrum-global-color-gray-300);
+    border: none;
+    height: 2px;
   }
-  .markdown-viewer :global(.editor-preview-full > :last-child) {
-    margin-bottom: 0;
+  /* Tables */
+  .markdown-viewer :global(td),
+  .markdown-viewer :global(th) {
+    border-color: var(--spectrum-alias-border-color) !important;
   }
-  /* Code blocks in preview */
-  .markdown-viewer :global(.editor-preview-full pre) {
-    background: var(--spectrum-global-color-gray-200);
+  /* Links */
+  .markdown-viewer :global(a) {
+    color: var(--primaryColor);
+  }
+  .markdown-viewer :global(a:hover) {
+    color: var(--primaryColorHover);
   }
 </style>