Fix character sheet biographies and use prosemirror in character, npc…

…, and hazard sheets (foundryvtt#14707)

src/module/actor/hazard/sheet.ts

@@ -156,7 +156,8 @@ export class HazardSheetPF2e extends ActorSheetPF2e<HazardPF2e> {
  handlers["edit-section"] = (event) => {
  const container = htmlClosest(event.target, ".section-container");
  const name = htmlQuery(container, "[data-edit]")?.dataset.edit;
- return name ? this.activateEditor(name) : null;
+ const active = this.editors[name ?? ""]?.active;
+ return name && !active ? this.activateEditor(name) : null;
  };
 
  return handlers;

src/styles/actor/character/_biography.scss

@@ -1,4 +1,6 @@
 &.biography {
+ padding-bottom: 1rem;
+
  & > header {
  align-items: baseline;
  display: flex;
@@ -12,7 +14,7 @@
 
  section {
  &.editable {
- .editor-content,
+ .editor,
  input {
  background: rgba(0, 0, 0, 5%);
  }
@@ -157,135 +159,24 @@
  margin-bottom: var(--space-1);
  width: 100%;
  }
+ }
 
- .biography-content {
- padding: 0 0 var(--space-8);
-
- /* Typography */
- h1,
- h2 {
- font-family: var(--serif);
- line-height: 1.1;
- }
- h1 {
- text-align: center;
- font-size: 2.5em;
- margin-bottom: 1.875rem;
- }
-
- h2 {
- color: var(--color-pf-secondary);
- font-size: 2.25em;
- }
-
- h3 {
- font-size: 2em;
- border-bottom: 0;
- }
-
- h4 {
- border-bottom: 1px solid var(--color-border-dark-primary);
- color: var(--text-dark);
- margin-bottom: 0;
- text-transform: uppercase;
- }
-
- h5 {
- text-transform: uppercase;
- }
-
- h6 {
- background-color: var(--header-bg);
- border-radius: var(--space-12) var(--space-12) 0 0;
- color: var(--header-color);
- font-size: 1.25em;
- margin-bottom: var(--space-5);
- padding-bottom: var(--space-3);
- padding-left: var(--space-8);
- padding-top: var(--space-5);
- text-transform: uppercase;
- }
-
- p,
- p + p,
- ul,
- ol {
- font-family: var(--body-serif);
- }
-
- .editor {
- .editor-edit {
- background: var(--color-pf-primary);
- color: var(--text-light);
- }
-
- // When the editor is open, fill more space so the user has something to work with
- .tox.tox-tinymce {
- // !important to work around tox's limitations and a foundry issue where initial height is overwritten
- height: 12.5rem !important;
- }
-
- .tox {
- .tox-editor-container {
- .tox-editor-header {
- background: none;
-
- .tox-toolbar-overlord {
- background-color: var(--color-pf-secondary);
-
- .tox-toolbar {
- &__primary {
- background-color: var(--color-pf-alternate);
- box-shadow: inset 0 0 0 1px rgba(white, 0.3);
- }
- }
- }
- }
- }
-
- .tox-tbtn {
- &:not(&--disabled) {
- border-radius: 1px;
- color: var(--text-light);
- cursor: pointer;
-
- &:hover {
- background: var(--color-pf-secondary);
-
- svg {
- fill: var(--text-light);
- }
- }
-
- span {
- cursor: pointer;
- }
-
- svg {
- fill: var(--text-light);
- }
- }
-
- &--disabled {
- svg {
- fill: var(--text-light-disabled);
- }
- }
-
- &--select {
- background: var(--color-pf-alternate);
+ // Styling for the editor and editor content, especially to fit better in a small space
+ .editor {
+ .editor-content {
+ @include journal-styling;
+ padding: 0 var(--space-4);
+ }
 
- .tox-tbtn__select-label {
- width: 5em;
- }
- }
- }
- }
+ .editor-edit {
+ background: var(--color-pf-primary);
+ color: var(--text-light);
+ }
 
-  .editor-content {
-  overflow-y: inherit;
-  padding: 0 0.25rem;
- }
+ &.prosemirror {
+ height: 13.5rem; // When the editor is open, fill more space
+ .editor-container {
+ margin: var(--space-4) 0;
  }
  }
  }

src/styles/actor/hazard/_index.scss

@@ -75,10 +75,17 @@
  padding: var(--space-4) var(--space-6) 0;
 
  .editor {
- width: 100%;
+ // Hide editor button for those controlled by section controls
+ // In the current version of foundry, not rendering the button in handlebars auto opens the prompt instead.
+ .editor-edit {
+ display: none;
+ }
 
- .tox {
- width: 100%;
+ &.prosemirror {
+ height: 12.5rem; // When the editor is open, fill more space
+ .editor-container {
+ margin: var(--space-4) 0;
+ }
  }
  }
 
@@ -146,16 +153,4 @@
  }
  }
  }
-
- // When the editor is open, fill more space so the user has something to work with
- .tox.tox-tinymce {
- // !important to work around tox's limitations and a foundry issue where initial height is overwritten
- height: 12.5rem !important;
- }
-
- // Hide editor button for those controlled by section controls
- // In the current version of foundry, not rendering the button in handlebars auto opens the prompt instead.
- .hazard-editor .editor .editor-edit {
- display: none;
- }
 }

src/styles/actor/npc/_index.scss

@@ -390,8 +390,6 @@ $faded-color: #7a7971;
  flex-grow: 1;
 
  .editor {
- height: 100%;
-
  .editor-content {
  min-height: 75px;
  }
@@ -404,6 +402,13 @@ $faded-color: #7a7971;
  a.editor-edit {
  padding: 2px 2px 2px 0.25rem;
  }
+
+ &.prosemirror {
+ min-height: 18rem;
+ .editor-container {
+ margin: var(--space-4) 0;
+ }
+ }
  }
  }
 
@@ -420,10 +425,6 @@ $faded-color: #7a7971;
  }
  }
  }
-
- .tox {
- min-height: 20em;
- }
  }
 
  &.dead {

src/styles/item/_index.scss

@@ -194,13 +194,17 @@
  }
 
  .editor {
- display: flex;
- flex-direction: column;
-
+ // Set style for both header buttons
+ // We also override the core one so that it matches the GM one in case it changes later
+ // These properties match core and shouldn't use the rem based properties
  a.add-gm-notes,
  a.editor-edit {
- font-size: 1.33em;
  background: rgb(205, 205, 205);
+ border: 1px solid var(--color-border-dark-1);
+ border-radius: 4px;
+ box-shadow: 0 0 1px var(--color-shadow-dark);
+ font-size: 1.25em;
+ padding: 1px 2px;
 
  i {
  width: 1em;
@@ -209,11 +213,7 @@
  }
 
  a.add-gm-notes {
- border: 1px solid var(--color-border-dark-1);
- border-radius: 4px;
- box-shadow: 0 0 1px var(--color-shadow-dark);
  display: none;
- padding: var(--space-1) var(--space-2);
  position: absolute;
  right: 2.25rem;
  top: var(--space-5);
@@ -222,10 +222,6 @@
  &:hover a.add-gm-notes {
  display: block;
  }
-
- .tox {
- flex: 1;
- }
  }
  }
 

static/templates/actors/character/tabs/biography.hbs

@@ -11,7 +11,7 @@
  <section class="appearance-details{{#if editable}} editable{{/if}}">
  <div class="bio appearance">
  <div class="biography-content" data-tooltip-class="">
- {{editor enrichedContent.appearance target="system.details.biography.appearance" button=true owner=owner editable=editable}}
+ {{editor enrichedContent.appearance target="system.details.biography.appearance" button=true owner=owner editable=editable engine="prosemirror"}}
  </div>
  </div>
  <label class="pc pc_height">
@@ -37,7 +37,7 @@
  <section{{#if editable}} class="editable"{{/if}}>
  <div class="bio backstory">
  <div class="biography-content" data-tooltip-class="">
- {{editor enrichedContent.backstory target="system.details.biography.backstory" button=true owner=owner editable=editable}}
+ {{editor enrichedContent.backstory target="system.details.biography.backstory" button=true owner=owner editable=editable engine="prosemirror"}}
  </div>
  </div>
  <div class="bio birth-place">
@@ -163,25 +163,25 @@
  <div class="bio campaign-notes">
  <h4 class="details-label">{{localize "PF2E.BiographyCampaignNotes"}}</h4>
  <div class="biography-content" data-tooltip-class="">
- {{editor enrichedContent.campaignNotes target="system.details.biography.campaignNotes" button=true owner=owner editable=editable}}
+ {{editor enrichedContent.campaignNotes target="system.details.biography.campaignNotes" button=true owner=owner editable=editable engine="prosemirror"}}
  </div>
  </div>
  <div class="bio allies">
  <h4 class="details-label">{{localize "PF2E.BiographyAllies"}}</h4>
  <div class="biography-content" data-tooltip-class="">
- {{editor enrichedContent.allies target="system.details.biography.allies" button=true owner=owner editable=editable}}
+ {{editor enrichedContent.allies target="system.details.biography.allies" button=true owner=owner editable=editable engine="prosemirror"}}
  </div>
  </div>
  <div class="bio enemies">
  <h4 class="details-label">{{localize "PF2E.BiographyEnemies"}}</h4>
  <div class="biography-content" data-tooltip-class="">
- {{editor enrichedContent.enemies target="system.details.biography.enemies" button=true owner=owner editable=editable}}
+ {{editor enrichedContent.enemies target="system.details.biography.enemies" button=true owner=owner editable=editable engine="prosemirror"}}
  </div>
  </div>
  <div class="bio organizations">
  <h4 class="details-label">{{localize "PF2E.BiographyOrganizations"}}</h4>
  <div class="biography-content" data-tooltip-class="">
- {{editor enrichedContent.organizations target="system.details.biography.organizations" button=true owner=owner editable=editable}}
+ {{editor enrichedContent.organizations target="system.details.biography.organizations" button=true owner=owner editable=editable engine="prosemirror"}}
  </div>
  </div>
  </section>

static/templates/actors/hazard/sheet.hbs

@@ -26,7 +26,7 @@
  </div>
  </div>
  <div class="section-body hazard-editor">
- {{editor enrichedContent.stealthDetails target="system.attributes.stealth.details" button=true owner=owner editable=editable}}
+ {{editor enrichedContent.stealthDetails target="system.attributes.stealth.details" button=true owner=owner editable=editable engine="prosemirror"}}
  </div>
  </div>
  {{/if}}
@@ -42,7 +42,7 @@
  </div>
  </div>
  <div class="section-body hazard-editor">
- {{editor enrichedContent.description target="system.details.description" button=true owner=owner editable=editable}}
+ {{editor enrichedContent.description target="system.details.description" button=true owner=owner editable=editable engine="prosemirror"}}
  </div>
  </div>
  {{/if}}
@@ -58,7 +58,7 @@
  </div>
  </div>
  <div class="section-body hazard-editor">
- {{editor enrichedContent.disable target="system.details.disable" button=true owner=owner editable=editable}}
+ {{editor enrichedContent.disable target="system.details.disable" button=true owner=owner editable=editable engine="prosemirror"}}
  </div>
  </div>
  {{/if}}
@@ -74,7 +74,7 @@
  </div>
  </div>
  <div class="section-body hazard-editor">
- {{editor enrichedContent.routine target="system.details.routine" button=true owner=owner editable=editable}}
+ {{editor enrichedContent.routine target="system.details.routine" button=true owner=owner editable=editable engine="prosemirror"}}
  </div>
  </div>
  {{/if}}
@@ -90,7 +90,7 @@
  </div>
  </div>
  <div class="section-body hazard-editor">
- {{editor enrichedContent.reset target="system.details.reset" button=true owner=owner editable=editable}}
+ {{editor enrichedContent.reset target="system.details.reset" button=true owner=owner editable=editable engine="prosemirror"}}
  </div>
  </div>
  {{/if}}