Only save textContent of editable fields to fix HTML being inserted, and fully remount component when toggling editing to fix chrome issues

packages/client/manifest.json

@@ -2529,7 +2529,6 @@
     "name": "Embedded Map",
     "icon": "Location",
     "styles": ["size"],
-    "editable": true,
     "draggable": false,
     "illegalChildren": ["section"],
     "settings": [
@@ -3631,7 +3630,6 @@
     "name": "Markdown Viewer",
     "icon": "TaskList",
     "styles": ["size"],
-    "editable": true,
     "settings": [
       {
         "type": "text",

packages/client/src/components/app/Button.svelte

@@ -22,20 +22,22 @@
   $: componentText = getComponentText(text, $builderStore, $component)
 
   const getComponentText = (text, builderState, componentState) => {
-    if (!builderState.inBuilder || componentState.editing) {
+    if (componentState.editing) {
       return text || " "
     }
     return text || componentState.name || "Placeholder text"
   }
 
   const updateText = e => {
-    builderStore.actions.updateProp("text", e.target.textContent.trim())
+    builderStore.actions.updateProp("text", e.target.textContent)
   }
 </script>
 
-<button
+{#key $component.editing}
+  <button
     class={`spectrum-Button spectrum-Button--size${size} spectrum-Button--${type}`}
     class:spectrum-Button--quiet={quiet}
+    class:editing={$component.editing}
     {disabled}
     use:styleable={$component.styles}
     on:click={onClick}
@@ -43,7 +45,7 @@
     on:blur={$component.editing ? updateText : null}
     bind:this={node}
     class:active
->
+  >
     {#if icon}
       <svg
         class:hasText={componentText?.length > 0}
@@ -56,7 +58,8 @@
       </svg>
     {/if}
     {componentText}
-</button>
+  </button>
+{/key}
 
 <style>
   button {

packages/client/src/components/app/Heading.svelte

@@ -47,12 +47,12 @@
 
   // Convert contenteditable HTML to text and save
   const updateText = e => {
-    const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n").trim()
-    builderStore.actions.updateProp("text", sanitized)
+    builderStore.actions.updateProp("text", e.target.textContent)
   }
 </script>
 
-<h1
+{#key $component.editing}
+  <h1
     bind:this={node}
     contenteditable={$component.editing}
     use:styleable={styles}
@@ -62,9 +62,10 @@
     class:underline
     class="spectrum-Heading {sizeClass} {alignClass}"
     on:blur={$component.editing ? updateText : null}
->
+  >
     {componentText}
-</h1>
+  </h1>
+{/key}
 
 <style>
   h1 {

packages/client/src/components/app/Link.svelte

@@ -61,7 +61,7 @@
   }
 
   const updateText = e => {
-    builderStore.actions.updateProp("text", e.target.textContent.trim())
+    builderStore.actions.updateProp("text", e.target.textContent)
   }
 </script>
 

packages/client/src/components/app/Text.svelte

@@ -46,12 +46,12 @@
 
   // Convert contenteditable HTML to text and save
   const updateText = e => {
-    const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n").trim()
-    builderStore.actions.updateProp("text", sanitized)
+    builderStore.actions.updateProp("text", e.target.textContent)
   }
 </script>
 
-<p
+{#key $component.editing}
+  <p
     bind:this={node}
     contenteditable={$component.editing}
     use:styleable={styles}
@@ -61,9 +61,10 @@
     class:underline
     class="spectrum-Body {sizeClass} {alignClass}"
     on:blur={$component.editing ? updateText : null}
->
+  >
     {componentText}
-</p>
+  </p>
+{/key}
 
 <style>
   p {

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

@@ -50,12 +50,13 @@
   $: labelClass = labelPos === "above" ? "" : `spectrum-FieldLabel--${labelPos}`
 
   const updateLabel = e => {
-    builderStore.actions.updateProp("label", e.target.textContent.trim())
+    builderStore.actions.updateProp("label", e.target.textContent)
   }
 </script>
 
 <FieldGroupFallback>
   <div class="spectrum-Form-item" use:styleable={$component.styles}>
+    {#key $component.editing}
       <label
         bind:this={labelNode}
         contenteditable={$component.editing}
@@ -66,6 +67,7 @@
       >
         {label || " "}
       </label>
+    {/key}
     <div class="spectrum-Form-itemField">
       {#if !formContext}
         <Placeholder text="Form components need to be wrapped in a form" />