From 7910b6a40fd2ec497091c3827c082d1a214ec0e1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 28 Oct 2021 13:20:04 +0100
Subject: [PATCH] Add in-preview editing of link text and improve placeholder
 usage when combined with in-preview editing

---
 packages/client/manifest.json                 |  1 +
 .../client/src/components/app/Heading.svelte  | 13 +++--
 .../client/src/components/app/Link.svelte     | 49 ++++++++++++++-----
 .../client/src/components/app/Text.svelte     | 13 +++--
 4 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 63ac7b1c7f..74e28e688c 100644
--- a/packages/client/manifest.json
+++ b/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": [
       {
diff --git a/packages/client/src/components/app/Heading.svelte b/packages/client/src/components/app/Heading.svelte
index f3e283cf97..43ed0a066c 100644
--- a/packages/client/src/components/app/Heading.svelte
+++ b/packages/client/src/components/app/Heading.svelte
@@ -13,10 +13,8 @@
   export let underline
   export let size
 
-  $: placeholder = $builderStore.inBuilder && !text
-  $: componentText = $builderStore.inBuilder
-    ? text || $component.name || "Placeholder text"
-    : text || ""
+  $: placeholder = $builderStore.inBuilder && !text && !$component.editing
+  $: componentText = getComponentText(text, $builderStore, $component)
   $: 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
diff --git a/packages/client/src/components/app/Link.svelte b/packages/client/src/components/app/Link.svelte
index d948e11241..3a6d7c2438 100644
--- a/packages/client/src/components/app/Link.svelte
+++ b/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
-    ? text || "Placeholder link"
-    : text || ""
+  $: componentText = getComponentText(text, $builderStore, $component)
 
-  // 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 external}
+{#if $component.editing}
+  <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 {
diff --git a/packages/client/src/components/app/Text.svelte b/packages/client/src/components/app/Text.svelte
index 558b0da9d6..06e0f7a954 100644
--- a/packages/client/src/components/app/Text.svelte
+++ b/packages/client/src/components/app/Text.svelte
@@ -12,10 +12,8 @@
   export let underline
   export let size
 
-  $: placeholder = $builderStore.inBuilder && !text
-  $: componentText = $builderStore.inBuilder
-    ? text || $component.name || "Placeholder text"
-    : text || ""
+  $: placeholder = $builderStore.inBuilder && !text && !$component.editing
+  $: componentText = getComponentText(text, $builderStore, $component)
   $: 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