Show textarea as editable

examples/website/src/index.html

@@ -145,31 +145,36 @@
 
           <div class="text-area-card diamond-parent">
             <label
+              class="input-label"
               for="original"
               title="The original text before any concurrent edits were made."
-              >Original</label
             >
+              Original
+              <span class="edit-hint" aria-hidden="true">Click to edit</span>
+            </label>
             <textarea id="original" name="original"></textarea>
           </div>
 
           <div class="text-area-card diamond-left">
             <label
+              class="input-label"
               for="left"
               title="First user's edits - changes from this box appear in green in the result."
             >
-              First user's edits
+              <span>First user's edits <span class="box Left"></span></span>
-              <div class="box Left"></div>
+              <span class="edit-hint" aria-hidden="true">Click to edit</span>
             </label>
             <textarea id="left" name="left"></textarea>
           </div>
 
           <div class="text-area-card diamond-right">
             <label
+              class="input-label"
               for="right"
               title="Second user's edits - changes from this box appear in blue in the result."
             >
-              Second user's edits
+              <span>Second user's edits <span class="box Right"></span></span>
-              <div class="box Right"></div>
+              <span class="edit-hint" aria-hidden="true">Click to edit</span>
             </label>
             <textarea id="right" name="right"></textarea>
           </div>

examples/website/src/index.ts

@@ -225,7 +225,8 @@ function resizeTextAreas(): void {
 
 function autoResize(textarea: HTMLTextAreaElement): void {
   textarea.style.height = 'auto';
-  textarea.style.height = textarea.scrollHeight + 'px';
+  const borderHeight = textarea.offsetHeight - textarea.clientHeight;
+  textarea.style.height = textarea.scrollHeight + borderHeight + 'px';
 }
 
 main().catch((error) => {

examples/website/src/style.scss

@@ -272,6 +272,22 @@ label {
   cursor: help;
 }
 
+.input-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  cursor: text;
+}
+
+.edit-hint {
+  color: $text-secondary;
+  font-size: 0.75rem;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
 .box {
   width: 1ch;
   height: 1ch;
@@ -283,18 +299,39 @@ label {
 
 textarea {
   width: 100%;
-  border: none;
+  border: 1px solid $border-grey;
+  border-radius: 6px;
+  padding: 8px 10px;
+  background: $light-bg;
   font-size: 1rem;
   font-family: inherit;
   color: $text-primary;
   box-sizing: border-box;
   resize: none;
-  outline: none;
+  cursor: text;
+  user-select: text;
+  caret-color: $primary-blue;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  transition:
+    border-color 0.15s,
+    background-color 0.15s,
+    outline-color 0.15s;
   margin-bottom: 0;
   field-sizing: content;
   /* Doesn't work in Safari yet */
 }
 
+textarea:hover {
+  border-color: $primary-blue;
+}
+
+textarea:focus {
+  border-color: $primary-blue;
+  background: $white;
+  outline-color: selection-colour($primary-blue, 0.3);
+}
+
 #merged {
   width: 100%;
   user-select: text;