Update markdown viewer and editor BBUI components

packages/bbui/src/Form/Core/RichTextField.svelte

@@ -6,6 +6,7 @@
   export let disabled = false
   export let error = null
   export let height = null
+  export let id = null
 </script>
 
-<MarkdownEditor {value} {placeholder} {height} on:change />
+<MarkdownEditor {value} {placeholder} {height} {id} on:change />

packages/bbui/src/Form/RichTextField.svelte

@@ -10,6 +10,7 @@
   export let disabled = false
   export let error = null
   export let height = null
+  export let id = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -25,6 +26,7 @@
     {value}
     {placeholder}
     {height}
+    {id}
     on:change={onChange}
   />
 </Field>

packages/bbui/src/Markdown/MarkdownEditor.svelte

@@ -2,15 +2,18 @@
   import SpectrumMDE from "./SpectrumMDE.svelte"
   import { createEventDispatcher, onMount } from "svelte"
 
-  export let value
+  export let value = null
   export let height = "300px"
-  export let placeholder
+  export let placeholder = null
+  export let id = null
 
   const dispatch = createEventDispatcher()
 
   let latestValue
   let mde
 
+  // Ensure the value is updated if the value prop changes outside the editor's
+  // control
   $: checkValue(value)
 
   const checkValue = val => {
@@ -19,11 +22,24 @@
     }
   }
 
-  onMount(() => {
+  const debounce = (fn, interval) => {
-    mde.codemirror.on("change", () => {
+    let timeout
+    return () => {
+      clearTimeout(timeout)
+      timeout = setTimeout(fn, interval)
+    }
+  }
+
+  const update = () => {
     latestValue = mde.value()
     dispatch("change", latestValue)
-    })
+  }
+
+  // Debounce the update function to avoid spamming it constantly
+  const debouncedUpdate = debounce(update, 250)
+
+  onMount(() => {
+    mde.codemirror.on("change", debouncedUpdate)
   })
 </script>
 
@@ -31,6 +47,7 @@
   bind:mde
   scroll={true}
   {height}
+  {id}
   easyMDEOptions={{
     initialValue: value,
     placeholder,

packages/bbui/src/Markdown/MarkdownViewer.svelte

@@ -3,6 +3,7 @@
   import { onMount } from "svelte"
 
   export let value
+  export let height
 
   let mde
 
@@ -15,7 +16,7 @@
   })
 </script>
 
-<div class="markdown-viewer">
+<div class="markdown-viewer" style="height:{height};">
   <SpectrumMDE
     bind:mde
     scroll={false}
@@ -27,6 +28,9 @@
 </div>
 
 <style>
+  .markdown-viewer {
+    overflow: auto;
+  }
   /* Remove padding, borders and background colors */
   .markdown-viewer :global(.editor-preview) {
     padding: 0;

packages/bbui/src/Markdown/SpectrumMDE.svelte

@@ -4,9 +4,10 @@
   import { onMount } from "svelte"
 
   export let height = "300px"
-  export let scroll = false
+  export let scroll = true
   export let easyMDEOptions = null
-  export let mde
+  export let mde = null
+  export let id = null
 
   let element
 
@@ -19,6 +20,7 @@
       unorderedListStyle: "-",
       maxHeight: scroll ? height : undefined,
       minHeight: scroll ? undefined : height,
+      hideIcons: ["fullscreen", "side-by-side"],
       ...easyMDEOptions,
     })
 
@@ -29,21 +31,21 @@
   })
 </script>
 
-<textarea bind:this={element} />
+<textarea {id} bind:this={element} />
 
 <style>
   /* Toolbar container */
   :global(.EasyMDEContainer .editor-toolbar) {
-    background: var(--background);
+    background: var(--spectrum-global-color-gray-50);
-    border-top: var(--border-light);
+    border-top: 1px solid var(--spectrum-alias-border-color);
-    border-left: var(--border-light);
+    border-left: 1px solid var(--spectrum-alias-border-color);
-    border-right: var(--border-light);
+    border-right: 1px solid var(--spectrum-alias-border-color);
   }
   /* Main code mirror instance and default color */
   :global(.EasyMDEContainer .CodeMirror) {
-    border: var(--border-light);
+    border: 1px solid var(--spectrum-alias-border-color);
-    background: var(--background);
+    background: var(--spectrum-global-color-gray-50);
-    color: var(--ink);
+    color: var(--spectrum-alias-text-color);
   }
   /* Toolbar button active state */
   :global(.EasyMDEContainer .editor-toolbar button.active) {
@@ -65,7 +67,7 @@
   }
   /* Cursor */
   :global(.EasyMDEContainer .CodeMirror-cursor) {
-    border-color: var(--ink);
+    border-color: var(--spectrum-alias-text-color);
   }
   /* Text selections */
   :global(.EasyMDEContainer .CodeMirror-selectedtext) {
@@ -85,10 +87,10 @@
   }
   /* Full preview window */
   :global(.EasyMDEContainer .editor-preview) {
-    background: var(--background);
+    background: var(--spectrum-global-color-gray-50);
   }
   /* Side by side preview window */
   :global(.EasyMDEContainer .editor-preview) {
-    border: var(--border-light);
+    border: 1px solid var(--spectrum-alias-border-color);
   }
 </style>