LongFormField readonly prop

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

@@ -4,6 +4,7 @@
   export let value = ""
   export let placeholder = null
   export let disabled = false
+  export let readonly = false
   export let error = null
   export let height = null
   export let id = null
@@ -20,6 +21,7 @@
     {fullScreenOffset}
     {disabled}
     {easyMDEOptions}
+    {readonly}
     on:change
   />
 </div>

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

@@ -5,6 +5,7 @@
   export let value = ""
   export let placeholder = null
   export let disabled = false
+  export let readonly = false
   export let error = null
   export let id = null
   export let height = null
@@ -61,6 +62,7 @@
     class="spectrum-Textfield-input"
     style={align ? `text-align: ${align}` : ""}
     {disabled}
+    {readonly}
     {id}
     on:focus={() => (focus = true)}
     on:blur={onChange}

packages/bbui/src/Markdown/MarkdownEditor.svelte

@@ -8,6 +8,7 @@
   export let id = null
   export let fullScreenOffset = 0
   export let disabled = false
+  export let readonly = false
   export let easyMDEOptions
 
   const dispatch = createEventDispatcher()
@@ -19,6 +20,7 @@
   // control
   $: checkValue(value)
   $: mde?.codemirror.on("change", debouncedUpdate)
+  $: mde?.codemirror.setOption("readOnly", readonly)
 
   const checkValue = val => {
     if (mde && val !== latestValue) {
@@ -43,7 +45,7 @@
   const debouncedUpdate = debounce(update, 250)
 </script>
 
-{#key height}
+{#key (height, readonly)}
   <SpectrumMDE
     bind:mde
     scroll={true}
@@ -54,6 +56,7 @@
     easyMDEOptions={{
       initialValue: value,
       placeholder,
+      toolbar: readonly ? false : undefined,
       ...easyMDEOptions,
     }}
   />

packages/client/manifest.json

@@ -2589,6 +2589,17 @@
         "key": "disabled",
         "defaultValue": false
       },
+      {
+        "type": "boolean",
+        "label": "Read only",
+        "key": "readonly",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "disabled",
+          "value": true,
+          "invert": true
+        }
+      },
       {
         "type": "text",
         "label": "Initial form step",
@@ -2738,6 +2749,17 @@
         "key": "disabled",
         "defaultValue": false
       },
+      {
+        "type": "boolean",
+        "label": "Read only",
+        "key": "readonly",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "disabled",
+          "value": true,
+          "invert": true
+        }
+      },
       {
         "type": "validation/string",
         "label": "Validation",
@@ -3427,6 +3449,17 @@
         "key": "disabled",
         "defaultValue": false
       },
+      {
+        "type": "boolean",
+        "label": "Read only",
+        "key": "readonly",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "disabled",
+          "value": true,
+          "invert": true
+        }
+      },
       {
         "type": "validation/string",
         "label": "Validation",

packages/client/src/components/app/forms/LongFormField.svelte

@@ -8,6 +8,7 @@
   export let label
   export let placeholder
   export let disabled = false
+  export let readonly = false
   export let validation
   export let defaultValue = ""
   export let format = "auto"
@@ -71,6 +72,7 @@
         value={fieldState.value}
         on:change={handleChange}
         disabled={fieldState.disabled}
+        {readonly}
         error={fieldState.error}
         id={fieldState.fieldId}
         {placeholder}
@@ -88,6 +90,7 @@
         value={fieldState.value}
         on:change={handleChange}
         disabled={fieldState.disabled}
+        {readonly}
         error={fieldState.error}
         id={fieldState.fieldId}
         {placeholder}

packages/client/src/components/app/forms/StringField.svelte

@@ -11,6 +11,7 @@
   export let defaultValue = ""
   export let align
   export let onChange
+  export let readonly = false
 
   let fieldState
   let fieldApi
@@ -44,6 +45,7 @@
       {placeholder}
       {type}
       {align}
+      {readonly}
     />
   {/if}
 </Field>