Add in-preview editing of link text and improve placeholder usage when combined with in-preview editing

packages/client/manifest.json

@@ -941,6 +941,7 @@
     "description": "A basic link component for internal and external links",
     "icon": "Link",
     "showSettingsBar": true,
+    "editable": true,
     "illegalChildren": ["section"],
     "settings": [
       {

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

@@ -13,10 +13,8 @@
   export let underline
   export let size
 
-  $: placeholder = $builderStore.inBuilder && !text
+  $: placeholder = $builderStore.inBuilder && !text && !$component.editing
-  $: componentText = $builderStore.inBuilder
+  $: componentText = getComponentText(text, $builderStore, $component)
-    ? text || $component.name || "Placeholder text"
-    : text || ""
   $: sizeClass = `spectrum-Heading--size${size || "M"}`
   $: alignClass = `align--${align || "left"}`
 
@@ -24,6 +22,13 @@
   // overrides the color when it's passed as inline style.
   $: styles = enrichStyles($component.styles, color)
 
+  const getComponentText = (text, builderState, componentState) => {
+    if (!builderState.inBuilder || componentState.editing) {
+      return text || ""
+    }
+    return text || componentState.name || "Placeholder text"
+  }
+
   const enrichStyles = (styles, color) => {
     if (!color) {
       return styles

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

@@ -14,19 +14,22 @@
   export let underline
   export let size
 
-  $: external = url && typeof url === "string" && !url.startsWith("/")
+  $: externalLink = url && typeof url === "string" && !url.startsWith("/")
   $: target = openInNewTab ? "_blank" : "_self"
   $: placeholder = $builderStore.inBuilder && !text
-  $: componentText = $builderStore.inBuilder
+  $: componentText = getComponentText(text, $builderStore, $component)
-    ? text || "Placeholder link"
-    : text || ""
 
-  // Add color styles to main styles object, otherwise the styleable helper
-  // overrides the color when it's passed as inline style.
   // Add color styles to main styles object, otherwise the styleable helper
   // overrides the color when it's passed as inline style.
   $: styles = enrichStyles($component.styles, color)
 
+  const getComponentText = (text, builderState, componentState) => {
+    if (!builderState.inBuilder || componentState.editing) {
+      return text || ""
+    }
+    return text || componentState.name || "Placeholder text"
+  }
+
   const enrichStyles = (styles, color) => {
     if (!color) {
       return styles
@@ -39,10 +42,33 @@
       },
     }
   }
+
+  // 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)
+  }
 </script>
 
-{#if $builderStore.inBuilder || componentText}
+{#if $component.editing}
-  {#if external}
+  <div
+    contenteditable
+    use:styleable={styles}
+    class:bold
+    class:italic
+    class:underline
+    class="align--{align || 'left'} size--{size || 'M'}"
+    on:blur={$component.editing ? updateText : null}
+  >
+    {componentText}
+  </div>
+{:else if $builderStore.inBuilder || componentText}
+  {#if externalLink}
     <a
       {target}
       href={url || "/"}
@@ -72,12 +98,13 @@
 {/if}
 
 <style>
-  a {
+  a,
+  div {
     color: var(--spectrum-alias-text-color);
-    white-space: nowrap;
     transition: color 130ms ease-in-out;
+    white-space: pre-wrap;
   }
-  a:hover {
+  a:not(.placeholder):hover {
     color: var(--spectrum-link-primary-m-text-color-hover) !important;
   }
   .placeholder {

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

@@ -12,10 +12,8 @@
   export let underline
   export let size
 
-  $: placeholder = $builderStore.inBuilder && !text
+  $: placeholder = $builderStore.inBuilder && !text && !$component.editing
-  $: componentText = $builderStore.inBuilder
+  $: componentText = getComponentText(text, $builderStore, $component)
-    ? text || $component.name || "Placeholder text"
-    : text || ""
   $: sizeClass = `spectrum-Body--size${size || "M"}`
   $: alignClass = `align--${align || "left"}`
 
@@ -23,6 +21,13 @@
   // overrides the color when it's passed as inline style.
   $: styles = enrichStyles($component.styles, color)
 
+  const getComponentText = (text, builderState, componentState) => {
+    if (!builderState.inBuilder || componentState.editing) {
+      return text || ""
+    }
+    return text || componentState.name || "Placeholder text"
+  }
+
   const enrichStyles = (styles, color) => {
     if (!color) {
       return styles