From 387831b799db2acdf4b5d4481d6479ff5d88c49b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 28 Oct 2021 15:29:48 +0100
Subject: [PATCH] Add in-preview editing of buttons and add settings bar for
 buttons

---
 packages/client/manifest.json                 | 13 +++++++++-
 .../client/src/components/app/Button.svelte   | 25 ++++++++++++++++---
 .../client/src/components/app/Heading.svelte  | 13 +++-------
 .../client/src/components/app/Link.svelte     | 10 +-------
 .../client/src/components/app/Text.svelte     | 13 +++-------
 .../src/components/preview/SettingsBar.svelte |  4 +--
 6 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 74e28e688c..47c79df6bb 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -245,7 +245,9 @@
     "name": "Button",
     "description": "A basic html button that is ready for styling",
     "icon": "Button",
+    "editable": true,
     "illegalChildren": ["section"],
+    "showSettingsBar": true,
     "settings": [
       {
         "type": "text",
@@ -254,6 +256,7 @@
       },
       {
         "type": "select",
+        "showInBar": true,
         "label": "Variant",
         "key": "type",
         "options": [
@@ -282,6 +285,7 @@
       {
         "type": "select",
         "label": "Size",
+        "showInBar": true,
         "key": "size",
         "options": [
           {
@@ -306,11 +310,18 @@
       {
         "type": "boolean",
         "label": "Quiet",
-        "key": "quiet"
+        "key": "quiet",
+        "showInBar": true,
+        "barIcon": "VisibilityOff",
+        "barTitle": "Quiet variant",
+        "barSeparator": false
       },
       {
         "type": "boolean",
         "label": "Disabled",
+        "showInBar": true,
+        "barIcon": "NoEdit",
+        "barTitle": "Disable button",
         "key": "disabled"
       },
       {
diff --git a/packages/client/src/components/app/Button.svelte b/packages/client/src/components/app/Button.svelte
index 9900c740d2..3fbdcf6744 100644
--- a/packages/client/src/components/app/Button.svelte
+++ b/packages/client/src/components/app/Button.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import "@spectrum-css/button/dist/index-vars.css"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let disabled = false
@@ -11,16 +11,35 @@
   export let size = "M"
   export let type = "primary"
   export let quiet = false
+
+  let node
+
+  $: $component.editing && node?.focus()
+  $: componentText = getComponentText(text, $builderStore, $component)
+
+  const getComponentText = (text, builderState, componentState) => {
+    if (!builderState.inBuilder || componentState.editing) {
+      return text || " "
+    }
+    return text || componentState.name || "Placeholder text"
+  }
+
+  const updateText = e => {
+    builderStore.actions.updateProp("text", e.target.textContent)
+  }
 </script>
 
 <button
   class={`spectrum-Button spectrum-Button--size${size} spectrum-Button--${type}`}
   class:spectrum-Button--quiet={quiet}
-  disabled={disabled || false}
+  {disabled}
   use:styleable={$component.styles}
   on:click={onClick}
+  class:editing={$component.editing}
+  contenteditable={$component.editing}
+  on:blur={$component.editing ? updateText : null}
 >
-  {text || ""}
+  {componentText}
 </button>
 
 <style>
diff --git a/packages/client/src/components/app/Heading.svelte b/packages/client/src/components/app/Heading.svelte
index 2647b608a5..0450d2d11d 100644
--- a/packages/client/src/components/app/Heading.svelte
+++ b/packages/client/src/components/app/Heading.svelte
@@ -47,17 +47,12 @@
 
   // Convert contenteditable HTML to text and save
   const updateText = e => {
-    const html = e.target.innerHTML
-    const sanitized = html
-      .replace(/<\/div><div>/gi, "\n")
-      .replace(/<div>/gi, "")
-      .replace(/<\/div>/gi, "")
-      .replace(/<br>/gi, "")
+    const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n")
     builderStore.actions.updateProp("text", sanitized)
   }
 </script>
 
-<div
+<h1
   bind:this={node}
   contenteditable={$component.editing}
   use:styleable={styles}
@@ -69,10 +64,10 @@
   on:blur={$component.editing ? updateText : null}
 >
   {componentText}
-</div>
+</h1>
 
 <style>
-  div {
+  h1 {
     white-space: pre-wrap;
     font-weight: 600;
   }
diff --git a/packages/client/src/components/app/Link.svelte b/packages/client/src/components/app/Link.svelte
index b002eb9e9d..9587b34f11 100644
--- a/packages/client/src/components/app/Link.svelte
+++ b/packages/client/src/components/app/Link.svelte
@@ -46,15 +46,8 @@
     }
   }
 
-  // Convert contenteditable HTML to text and save
   const updateText = e => {
-    const html = e.target.innerHTML
-    const sanitized = html
-      .replace(/<\/div><div>/gi, "\n")
-      .replace(/<div>/gi, "")
-      .replace(/<\/div>/gi, "")
-      .replace(/<br>/gi, "")
-    builderStore.actions.updateProp("text", sanitized)
+    builderStore.actions.updateProp("text", e.target.textContent)
   }
 </script>
 
@@ -106,7 +99,6 @@
   div {
     color: var(--spectrum-alias-text-color);
     transition: color 130ms ease-in-out;
-    white-space: pre-wrap;
   }
   a:not(.placeholder):hover {
     color: var(--spectrum-link-primary-m-text-color-hover) !important;
diff --git a/packages/client/src/components/app/Text.svelte b/packages/client/src/components/app/Text.svelte
index c14806050e..14681ebbaf 100644
--- a/packages/client/src/components/app/Text.svelte
+++ b/packages/client/src/components/app/Text.svelte
@@ -46,17 +46,12 @@
 
   // Convert contenteditable HTML to text and save
   const updateText = e => {
-    const html = e.target.innerHTML
-    const sanitized = html
-      .replace(/<\/div><div>/gi, "\n")
-      .replace(/<div>/gi, "")
-      .replace(/<\/div>/gi, "")
-      .replace(/<br>/gi, "")
+    const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n")
     builderStore.actions.updateProp("text", sanitized)
   }
 </script>
 
-<div
+<p
   bind:this={node}
   contenteditable={$component.editing}
   use:styleable={styles}
@@ -68,10 +63,10 @@
   on:blur={$component.editing ? updateText : null}
 >
   {componentText}
-</div>
+</p>
 
 <style>
-  div {
+  p {
     display: inline-block;
     white-space: pre-wrap;
     margin: 0;
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 43c77ef1e6..96bff6408f 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -110,7 +110,7 @@
               prop={setting.key}
               value={option.value}
               icon={option.barIcon}
-              title={option.barTitle}
+              title={option.barTitle || option.label}
             />
           {/each}
         {:else}
@@ -124,7 +124,7 @@
         <SettingsButton
           prop={setting.key}
           icon={setting.barIcon}
-          title={setting.barTitle}
+          title={setting.barTitle || setting.label}
           bool
         />
       {:else if setting.type === "color"}