diff --git a/module/applications/sheets/api/application-mixin.mjs b/module/applications/sheets/api/application-mixin.mjs
index b11fc779..619305f1 100644
--- a/module/applications/sheets/api/application-mixin.mjs
+++ b/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
, which aren't a problem for the value but are for the placeholder
+ input.addEventListener("input", () => input.querySelectorAll("br").forEach((i) => i.remove()));
+ }
}
/**@inheritdoc */
diff --git a/styles/less/global/elements.less b/styles/less/global/elements.less
index 79deb99d..e740d917 100755
--- a/styles/less/global/elements.less
+++ b/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 {
diff --git a/styles/less/sheets/actors/adversary/header.less b/styles/less/sheets/actors/adversary/header.less
index d4a7812e..aa3e6e83 100644
--- a/styles/less/sheets/actors/adversary/header.less
+++ b/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);
diff --git a/styles/less/sheets/actors/character/header.less b/styles/less/sheets/actors/character/header.less
index 80089cf7..4115fbd5 100644
--- a/styles/less/sheets/actors/character/header.less
+++ b/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;
diff --git a/templates/sheets/actors/adversary/header.hbs b/templates/sheets/actors/adversary/header.hbs
index e6f829b8..42a673d5 100644
--- a/templates/sheets/actors/adversary/header.hbs
+++ b/templates/sheets/actors/adversary/header.hbs
@@ -1,10 +1,7 @@