From a0c3ee1c8b576192fb2f7e4da24d243c5c04d73c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 3 Feb 2022 14:28:15 +0000
Subject: [PATCH] Add support for disabling rich text fields

---
 .../bbui/src/Form/Core/RichTextField.svelte   |  1 +
 .../bbui/src/Markdown/MarkdownEditor.svelte   |  2 ++
 packages/bbui/src/Markdown/SpectrumMDE.svelte | 22 +++++++++++++++++--
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Form/Core/RichTextField.svelte b/packages/bbui/src/Form/Core/RichTextField.svelte
index f14c778471..4520f1bf28 100644
--- a/packages/bbui/src/Form/Core/RichTextField.svelte
+++ b/packages/bbui/src/Form/Core/RichTextField.svelte
@@ -17,6 +17,7 @@
     {height}
     {id}
     {fullScreenOffset}
+    {disabled}
     on:change
   />
 </div>
diff --git a/packages/bbui/src/Markdown/MarkdownEditor.svelte b/packages/bbui/src/Markdown/MarkdownEditor.svelte
index 370436f578..4ab961d646 100644
--- a/packages/bbui/src/Markdown/MarkdownEditor.svelte
+++ b/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,
diff --git a/packages/bbui/src/Markdown/SpectrumMDE.svelte b/packages/bbui/src/Markdown/SpectrumMDE.svelte
index 3048697c15..0e3a7c75cc 100644
--- a/packages/bbui/src/Markdown/SpectrumMDE.svelte
+++ b/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"}`}>
-  <textarea {id} bind:this={element} />
+<div class:disabled style={`--fullscreen-offset:${fullScreenOffset || "0px"}`}>
+  <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);