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>
 
+{#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}
@@ -57,6 +59,7 @@
     {/if}
     {componentText}
   </button>
+{/key}
 
 <style>
   button {

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

@@ -47,11 +47,11 @@
 
   // Convert contenteditable HTML to text and save
   const updateText = e => {
-    const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n").trim()
+    builderStore.actions.updateProp("text", e.target.textContent)
-    builderStore.actions.updateProp("text", sanitized)
   }
 </script>
 
+{#key $component.editing}
   <h1
     bind:this={node}
     contenteditable={$component.editing}
@@ -65,6 +65,7 @@
   >
     {componentText}
   </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,11 +46,11 @@
 
   // Convert contenteditable HTML to text and save
   const updateText = e => {
-    const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n").trim()
+    builderStore.actions.updateProp("text", e.target.textContent)
-    builderStore.actions.updateProp("text", sanitized)
   }
 </script>
 
+{#key $component.editing}
   <p
     bind:this={node}
     contenteditable={$component.editing}
@@ -64,6 +64,7 @@
   >
     {componentText}
   </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" />