T
TyphonJSWHITESPINE

Bug: Multiple ProseMirror editors on same svelte component do not save properly

Simple reproduction in a foundry world with at least one actor defined: 
<svelte:options accessors={true} />

<script>
    import { ApplicationShell } from "#runtime/svelte/component/core";
    import { TJSDocument } from "#runtime/svelte/store/fvtt/document";
    import { TJSProseMirror } from "#standard/component";

    export let elementRoot;

    let actor = new TJSDocument(game.actors.contents[0]);
    let base_options = {
        document: $actor,
        fieldName: "name",
        collaborate: true,
        button: false,
        editable: true,
        initialSelection: "start",
    };
</script>

<ApplicationShell bind:elementRoot>
    <main>
        <h1>Basic application</h1>
        <span>{$actor.name}</span>
        <TJSProseMirror options={base_options} />
        <TJSProseMirror options={base_options} />
    </main>
</ApplicationShell>

<style lang="scss">
    main {
        text-align: center;
        display: flex;
        flex-direction: column;
    }
</style>
<svelte:options accessors={true} />

<script>
    import { ApplicationShell } from "#runtime/svelte/component/core";
    import { TJSDocument } from "#runtime/svelte/store/fvtt/document";
    import { TJSProseMirror } from "#standard/component";

    export let elementRoot;

    let actor = new TJSDocument(game.actors.contents[0]);
    let base_options = {
        document: $actor,
        fieldName: "name",
        collaborate: true,
        button: false,
        editable: true,
        initialSelection: "start",
    };
</script>

<ApplicationShell bind:elementRoot>
    <main>
        <h1>Basic application</h1>
        <span>{$actor.name}</span>
        <TJSProseMirror options={base_options} />
        <TJSProseMirror options={base_options} />
    </main>
</ApplicationShell>

<style lang="scss">
    main {
        text-align: center;
        display: flex;
        flex-direction: column;
    }
</style>
The top editor save button will do nothing. In general, it seems like only the last editor's save button actually works. When the components are unmounted, save works normally. This issue persists even if the editors are targeting different fieldNames.
TM
TyphonJS (Michael)•262d ago
I'll have to take a look as TJSProseMirror does utilize the underlying Foundry support for controlling the editor / menu is the Foundry core support. I do load a custom plugin related to saving / changing key commands, but will need to investigate. Hopefully tomorrow I can take a look and include this in the next release.
W
WHITESPINE•252d ago
The Paragraph/Font panels also appear to have no effect, in the same minimal configuration pasted above.
TM
TyphonJS (Michael)•251d ago
I gather this potentially will be on the more challenging side of things due to the fact that TJSProseMirror is embedding the Foundry implementation of PM thus there is less direct control involved. IE the menu bar is not directly controlled or created by the component, so aspects involved in making sure there are not conflicts between multiple component usages may not be straightforward to solve. I don't want to hold up the next release to finish this up, so I'll likely push this to October though I'll try and do some initial engineering analysis before then. If you happen to have spare time to keep poking at things to get a better idea of what may be occurring that can help as well.
W
WHITESPINE•251d ago
Can't promise much there honestly I tried to trace it through but I have almost no idea where the actual element is being passed in I can try again though Paragraph/Font appears to be a firefox only issue
TM
TyphonJS (Michael)•250d ago
Is that also the case for normal Foundry & Firefox?
W
WHITESPINE•250d ago
I'll check when I get home assuming 5e system uses it The event listeners are getting setup properly they just aren't actually firing Same foundry install 5E prosemirror editors work. Additionally, even within the TJS world / dev server, utilizing the Journal prosemirrors work. I haven't really observed anything different in how they initialize listeners There's a specific prosemirror.js function that actually sets up the paragraph/font dropdowns: 
    /**
     * Attach event listeners.
     * @param {HTMLMenuElement} html  The root menu element.
     */
    activateListeners(html) {
      if ( !this.#onAction ) return;
      html.querySelectorAll(`.pm-dropdown.${this.#cssClass} li`).forEach(item => {
        item.addEventListener("click", event => {
          this.#onAction(event);
        });
      });
    }
    /**
     * Attach event listeners.
     * @param {HTMLMenuElement} html  The root menu element.
     */
    activateListeners(html) {
      if ( !this.#onAction ) return;
      html.querySelectorAll(`.pm-dropdown.${this.#cssClass} li`).forEach(item => {
        item.addEventListener("click", event => {
          this.#onAction(event);
        });
      });
    }
For the listeners are being created in the TJS ProseMirror, but for whatever reason the events are never being fired My best guess was that something in the wrapping component was capturing or intercepting clicks but it doesn't really seem like that is the case Another wrinkle: Setting button to true and individually summoning each ProseMirror appears to resolve the save-aliasing issue.
TM
TyphonJS (Michael)•250d ago
Core could have changed how they implemented the PM support. Perhaps I just have to find a way to set a unique cssClass per component as that seems like the only problem. Though presumably html is just the menu element, but if it's somehow say the whole page or an element higher in the DOM then a unique CSS class would be needed. I'll take a look as that could be easy to fix. I'm done with all the other work for the next release.
TM
TyphonJS (Michael)•250d ago
So, from some cursory analysis there are various things that work and don't work when two editors are initialized. I'm just working w/ the basic example directly binding the content from the essential-svelte-esm demo and not a more complex setup. As things go this is going to take quite a bit of intense work diving into PM and furthermore working out all the details of the Foundry PM implementation. I of course did a fair amount of that a while back for the initial component implementation. This is not going to be something I can easily work on while traveling and is better suited to sustained full time effort, so I'll have to push things to the next release and not hold up the current release. I can potentially poke around at things for the coming month, but it might be early October before I can set aside dedicated blocks of time again as working with PM is not easy per se as you have to understand the internals of PM and what Foundry core is doing with it as well. IE no quick fix.
No description
TM
TyphonJS (Michael)•250d ago
If there is any consolation is that the TJSTinyMCE component works just fine seemingly w/ multiple editors, but that is to be expected from a fully blown / mature RTE which the Foundry core PM implementation is far from being mature. The only thing you'd be missing from the TJSTinyMCE implementation is potentially collaboration. I designed both editor components to take essentially the same configuration setup. In the meantime you can pretty easily work with the TJSTinyMCE component and more or less swap it to the PM one when the work is complete on hardening the PM component support.
W
WHITESPINE•249d ago
Thanks, I'll just use mce then for the time being
TM
TyphonJS (Michael)•196d ago
So, I'm debugging things presently. The Foundry ProseMirror implementation is just junk and buggy. The keymaps / control implementation internally to prosemirror.js does not respect independent editors and this affects the stock Foundry apps as well. IE the last opened editor is always the target of special key entry for instance. In the attached video I am opening two stock Foundry item instances for editing. A -> B. Then going back to A and hitting Ctrl-S this will save B instead of A. Hit Ctrl-S again from A and it tries to save B again. This indicates there is poor management inside of prosemirror.js for handling multiple open editors at the same time. It likely extends beyond just keymaps and includes other symptoms that you see. I'm going to try and work around this by always closing / saving any open editor when a new TJSProseMirror editor component is opened for editing. This won't help any of the Foundry core editors that might be open too. For system developers this will help for the most part until the core team fixes this major PM issue. The real solution is for a patch to the Foundry core implementation. It's just another PM implementation bug / lack of testing on the core teams part. I have zero belief that the PM based editor will ever be any good; at least any time soon.
TM
TyphonJS (Michael)•196d ago
https://github.com/foundryvtt/foundryvtt/issues/10139 On the latest v11.313 build w/ multiple editors opened clicking on the Save toolbar button seems to work correctly. I think your initial report indicated that they don't, but I believe you also were talking about Ctrl-s / key handling. The next TRL release will have a lot of general hardening improvements including the editors.
W
WHITESPINE•196d ago
Tbh I didn't know ctrl+s worked - I was simply referring to the buttons. That's an improvement, at least
TM
TyphonJS (Michael)•196d ago
Yeah, it can be a mess as each Foundry release / point releases things may change under the hood and w/ the PM work constantly being ongoing it's not something that is easy to track. I just loaded up v10.291 and it seems like the toolbar buttons save correctly when multiple editors are open. Nonetheless the solution for best current support w/ the next TRL release is to only allow one TJSProseMirror editor open at a time. When the next TRL release is out it would be great to get some hammering away on the editor components to find anything additionally that can be fixed. I put in a lot of testing and hardening especially around PopOut support, but for the PM angle it certainly can be temperamental given how it is being developed.
Want results from more Discord servers?
Add your server
More Posts
System Works in Dev Mode but not after buildAfter updating to 0.1.1, I noticed something odd happening. The TITAN system now seems to work whenError building after updating to TRL 0.1.1Recently updated the TITAN system to TRL 0.1.1, but when I `npm run build` it errors out. Not sure wTJSApplication Character Sheet odd behavior with unlinked tokensHas anyone else experienced weird when using a TJSApplication as a character sheet with unlinked tokTJSDocumentCollection best practices?Hi! I've got a little component I'm using whose purpose is basically to just show a tiny preview of Release `TRL 0.1.1` - Patch releaseGreets @FVTT ▹ Developer! I have just released a patch / fix release that fixes a small oversight iUncaught TypeError: $storeElementRoot is undefinedHi! Encountering the following error when trying to resize an application based on a TJSApplicationSPopcorn InitiativeJust opening a forum post to track @gerark progress w/ TRL & Svelte + an initial idea of implementinToken Action HUDLet's continue chatting about TAH here to keep track of discussion @larkinaboutPostcssConfig seem not workin with 0.1.0@mleahy sorry to bother i'm trying to use the postccs feature of the @typhonjs-fvtt/runtime on the TJSDocument for aggregating actor flags for Svelte ComponentI'm sure this is very simple, but I'm having a hard time understanding how to get this to work. MaybUpdate to ChatMessage outside of Svelte doesn't trigger reactivity on linked TJSDocumentI'm a bit confused about this... 1. When I render a ChatMessage via svelte, in the chat message sveRelease `TRL 0.1.0` - The journey to beta begins...Greets @FVTT ▹ Developer, I am very excited to announce the release of TRL `0.1.0`. This is a majorHow do I get the elementRoot of a ChatMessage?SvelteApplication provides `elementRoot` prop to components that implement it, which is very useful.Getting started with the GUI and understanding element rootIt's been a while, but I've been working on my Knowledge Recalled module since V11 is out, and my frDrag & Drop broke in v11Ok so something that broke for me when moving to v11 is drag&drop from both the items tab of the sidTJSDocument and Token Issues```js const tokens = cardData.targets .map(t => [t, fromUuidSync(t)]) .filter(([_, tSyrinControl & Svelte...I gather there is a bit to discuss... 😄Ver .11Not sure if this is the place to ask, but updated to v .7.11 foundry 10. Lost all quest data. FoldePackage Release: Foundry Summons (3rd party)Greets @everyone. I do try to use pings sparingly, but want to show a spotlight on @vauxs new packagCreating an interim TJSDocument / document attribute bridgeHi @wasp... Just moving discussion here as it is a better forum post. > So I have made a system wi