Add in-preview editing of buttons and add settings bar for buttons

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"
       },
       {

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>

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;
   }

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;

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;

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"}