[PR][Feature] Support multiline adversary and character names (#1437)

* Support multiline adversary names

* Create fake placeholder

* Also support multiline character names

module/applications/sheets/api/application-mixin.mjs

@@ -179,6 +179,7 @@ export default function DHApplicationMixin(Base) {
             super._attachPartListeners(partId, htmlElement, options);
             this._dragDrop.forEach(d => d.bind(htmlElement));
 
+            // Handle delta inputs
             for (const deltaInput of htmlElement.querySelectorAll('input[data-allow-delta]')) {
                 deltaInput.dataset.numValue = deltaInput.value;
                 deltaInput.inputMode = 'numeric';
@@ -232,6 +233,25 @@ export default function DHApplicationMixin(Base) {
                     handleUpdate();
                 });
             }
+
+            // Handle contenteditable
+            for (const input of htmlElement.querySelectorAll('[contenteditable][data-property]')) {
+                const property = input.dataset.property;
+                input.addEventListener("blur", () => {
+                    const selection = document.getSelection();
+                    if (input.contains(selection.anchorNode)) {
+                        selection.empty();
+                    }
+                    this.document.update({ [property]: input.textContent });
+                });
+
+                input.addEventListener("keydown", event => {
+                    if (event.key === "Enter") input.blur();
+                });
+
+                // Chrome sometimes add <br>, which aren't a problem for the value but are for the placeholder
+                input.addEventListener("input", () => input.querySelectorAll("br").forEach((i) => i.remove()));
+            }
         }
 
         /**@inheritdoc */

styles/less/global/elements.less

@@ -6,7 +6,8 @@
 
     input[type='text'],
     input[type='number'],
-    textarea {
+    textarea,
+    .input[contenteditable] {
         background: light-dark(transparent, transparent);
         border-radius: 6px;
         box-shadow: 0 4px 30px @soft-shadow;
@@ -43,6 +44,14 @@
         }
     }
 
+    .input[contenteditable] {
+        cursor: var(--cursor-text);
+        &:empty:before {
+            color: light-dark(@dark-40, @beige-50);
+            content: attr(placeholder);
+        }
+    }
+
     input[type='checkbox'],
     input[type='radio'] {
         &:checked::after {

styles/less/sheets/actors/adversary/header.less

@@ -12,18 +12,19 @@
             gap: 5px;
             align-items: center;
             justify-content: space-between;
-            padding: 0;
-            padding-top: 5px;
-            padding-bottom: 8px;
+            padding: 8px 0;
             flex: 1;
 
-            input[type='text'] {
+            h1 {
+                display: flex;
+                flex: 1;
+                padding: 6px 0 0 0;
                 font-size: var(--font-size-32);
-                height: 42px;
                 text-align: start;
                 border: 1px solid transparent;
                 outline: 2px solid transparent;
                 transition: all 0.3s ease;
+                word-break: break-word;
 
                 &:hover {
                     outline: 2px solid light-dark(@dark, @golden);

styles/less/sheets/actors/character/header.less

@@ -34,19 +34,22 @@
         .name-row {
             display: flex;
             gap: 5px;
-            align-items: end;
+            align-items: start;
             justify-content: space-between;
             padding: 0;
             padding-top: 5px;
             flex: 1;
 
-            input[type='text'] {
+            h1 {
+                display: flex;
+                flex: 1;
+                padding: 6px 0 0 0;
                 font-size: var(--font-size-32);
-                height: 42px;
                 text-align: start;
                 border: 1px solid transparent;
                 outline: 2px solid transparent;
                 transition: all 0.3s ease;
+                word-break: break-word;
 
                 &:hover {
                     outline: 2px solid light-dark(@dark, @golden);
@@ -57,6 +60,8 @@
                 white-space: nowrap;
                 display: flex;
                 justify-content: end;
+                height: var(--font-size-32);
+                margin-top: 6px;
 
                 .label {
                     display: flex;

templates/sheets/actors/adversary/header.hbs

@@ -1,10 +1,7 @@
 <header class='adversary-header-sheet'>
     <line-div></line-div>
     <div class="name-row">
-        <h1 class='actor-name'>
-            <input type='text' name='name' value='{{source.name}}' placeholder="{{localize "DAGGERHEART.GENERAL.actorName"}}"
-            />
-        </h1>
+        <h1 class='input actor-name' contenteditable="plaintext-only" data-property="name" placeholder="{{localize "DAGGERHEART.GENERAL.actorName"}}">{{source.name}}</h1>
     </div>
     <div class="tags">
         <div class="tag">

templates/sheets/actors/character/header.hbs

@@ -1,15 +1,7 @@
 <header class="character-header-sheet">
     <line-div></line-div>
     <div class="name-row">
-        <h1 class='actor-name'>
-            <input
-                type='text'
-                name='name'
-                value='{{document.name}}'
-                placeholder='{{localize "DAGGERHEART.GENERAL.actorName"}}'
-            />
-        </h1>
-
+        <h1 class="actor-name input" contenteditable="plaintext-only" data-property="name" placeholder="{{localize "DAGGERHEART.GENERAL.actorName"}}">{{source.name}}</h1>
         <div class='level-div'>
             <h3 class='label'>
                 {{#if (or document.system.needsCharacterSetup document.system.levelData.canLevelUp)}}