Add support for disabling rich text fields

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

@@ -17,6 +17,7 @@
     {height}
     {id}
     {fullScreenOffset}
+    {disabled}
     on:change
   />
 </div>

packages/bbui/src/Markdown/MarkdownEditor.svelte

@@ -7,6 +7,7 @@
   export let placeholder = null
   export let id = null
   export let fullScreenOffset = 0
+  export let disabled = false
 
   const dispatch = createEventDispatcher()
 
@@ -48,6 +49,7 @@
     {height}
     {id}
     {fullScreenOffset}
+    {disabled}
     easyMDEOptions={{
       initialValue: value,
       placeholder,

packages/bbui/src/Markdown/SpectrumMDE.svelte

@@ -9,6 +9,7 @@
   export let mde = null
   export let id = null
   export let fullScreenOffset = 0
+  export let disabled = false
 
   let element
 
@@ -32,11 +33,28 @@
   })
 </script>
 
-<div style={`--fullscreen-offset:${fullScreenOffset || "0px"}`}>
+<div class:disabled style={`--fullscreen-offset:${fullScreenOffset || "0px"}`}>
-  <textarea {id} bind:this={element} />
+  <textarea disabled {id} bind:this={element} />
 </div>
 
 <style>
+  /* Disabled styles */
+  .disabled :global(textarea) {
+    display: none;
+  }
+  .disabled :global(.CodeMirror-cursor) {
+    display: none;
+  }
+  .disabled :global(.EasyMDEContainer) {
+    pointer-events: none;
+  }
+  .disabled :global(.editor-toolbar button i) {
+    color: var(--spectrum-global-color-gray-400);
+  }
+  .disabled :global(.CodeMirror) {
+    color: var(--spectrum-global-color-gray-600);
+  }
+
   /* Toolbar container */
   :global(.EasyMDEContainer .editor-toolbar) {
     background: var(--spectrum-global-color-gray-50);