How to get rid of funky Prosemirror overlap

Hi. I'm getting some overlap with Prosemirror (see image) any ideas how to avoid that?

    "@typhonjs-fvtt/runtime": "^0.1.0",
    "@typhonjs-fvtt/svelte-standard": "^0.1.0",

    "@typhonjs-fvtt/runtime": "^0.1.0",
    "@typhonjs-fvtt/svelte-standard": "^0.1.0",

It's like the Prosemirror component doesn't expand the height of it's container while editing. It's fine after the edit, i.e. the rendered content doesn't overflow the container once the content is saved and the editor closed. Looking at the prosemirror npm repo it looks like it has been discontinued. What includes prosemirror anyway? Is that a foundry thing. Am I asking this in the wrong server? I'll ask in Foundry too just in case. I think this probably is a TJS thing as I'm using this:

  import { TJSProseMirror } from "@typhonjs-fvtt/svelte-standard/component";

  import { TJSProseMirror } from "@typhonjs-fvtt/svelte-standard/component";

I get similar behaviour with TinyMCE btw except that the overflow-y seems to be handled with a scroll, although the wrapping element still does not expand, so the layout is awkward.

10 Replies

geoidesicOP•15mo ago

I tried it with a new application modelled on the one from essential-svelte-esm

<svelte:options accessors={true} />

<script>
  import { ApplicationShell } from "@typhonjs-fvtt/runtime/svelte/component/core";
  import { TJSProseMirror } from "@typhonjs-fvtt/svelte-standard/component";
  export let elementRoot = void 0;
  const options = {};

  let content = "Hello from ProseMirror!";
  let content2 = "Hello from ProseMirror2!";
  let enrichedContent;
  let enrichedContent2;

  $: if (content) {
    console.log(`! bound content changed: ${content}`);
  }
  $: if (enrichedContent) {
    console.log(`! bound enrichedContent changed: ${enrichedContent}`);
  }
</script>

<svelte:options accessors={true} />

<script>
  import { ApplicationShell } from "@typhonjs-fvtt/runtime/svelte/component/core";
  import { TJSProseMirror } from "@typhonjs-fvtt/svelte-standard/component";
  export let elementRoot = void 0;
  const options = {};

  let content = "Hello from ProseMirror!";
  let content2 = "Hello from ProseMirror2!";
  let enrichedContent;
  let enrichedContent2;

  $: if (content) {
    console.log(`! bound content changed: ${content}`);
  }
  $: if (enrichedContent) {
    console.log(`! bound enrichedContent changed: ${enrichedContent}`);
  }
</script>

<ApplicationShell bind:elementRoot>
  <article>
    <h1>jiggy</h1>
    <TJSProseMirror
      {options}
      bind:content
      bind:enrichedContent
      on:editor:cancel={() => console.log("! event - editor:cancel")}
      on:editor:document:deleted={() => console.log("! event - editor:document:deleted")}
      on:editor:enrichedContent={(event) =>
        console.log(`! event - editor:enrichedContent - ${event.detail.enrichedContent}`)}
      on:editor:save={(event) => console.log(`! event - editor:save - ${event.detail.content}`)}
      on:editor:start={() => console.log("! event - editor:start")}
    />
  </article>
  <article>
    <h1>wkddy</h1>
    <TJSProseMirror
      {options}
      bind:content2
      bind:enrichedContent2
      on:editor:cancel={() => console.log("! event - editor:cancel")}
      on:editor:document:deleted={() => console.log("! event - editor:document:deleted")}
      on:editor:enrichedContent={(event) =>
        console.log(`! event - editor:enrichedContent - ${event.detail.enrichedContent}`)}
      on:editor:save={(event) => console.log(`! event - editor:save - ${event.detail.content}`)}
      on:editor:start={() => console.log("! event - editor:start")}
    />
  </article>
</ApplicationShell>

<ApplicationShell bind:elementRoot>
  <article>
    <h1>jiggy</h1>
    <TJSProseMirror
      {options}
      bind:content
      bind:enrichedContent
      on:editor:cancel={() => console.log("! event - editor:cancel")}
      on:editor:document:deleted={() => console.log("! event - editor:document:deleted")}
      on:editor:enrichedContent={(event) =>
        console.log(`! event - editor:enrichedContent - ${event.detail.enrichedContent}`)}
      on:editor:save={(event) => console.log(`! event - editor:save - ${event.detail.content}`)}
      on:editor:start={() => console.log("! event - editor:start")}
    />
  </article>
  <article>
    <h1>wkddy</h1>
    <TJSProseMirror
      {options}
      bind:content2
      bind:enrichedContent2
      on:editor:cancel={() => console.log("! event - editor:cancel")}
      on:editor:document:deleted={() => console.log("! event - editor:document:deleted")}
      on:editor:enrichedContent={(event) =>
        console.log(`! event - editor:enrichedContent - ${event.detail.enrichedContent}`)}
      on:editor:save={(event) => console.log(`! event - editor:save - ${event.detail.content}`)}
      on:editor:start={() => console.log("! event - editor:start")}
    />
  </article>
</ApplicationShell>

geoidesicOP•15mo ago

With similar results

geoidesicOP•15mo ago

This CSS solved the problem:

.prosemirror {
  display: block;

  .editor-container {
    position: relative;
    display: block;

    .editor-content {
      outline: 0 solid transparent;
      height: unset;
      position: relative;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding-right: 0.5rem;
    }
  }

  .editor {
    overflow: unset;
    max-height: none;
    max-width: none;
    text-align: left;
  }
}

.prosemirror {
  display: block;

  .editor-container {
    position: relative;
    display: block;

    .editor-content {
      outline: 0 solid transparent;
      height: unset;
      position: relative;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding-right: 0.5rem;
    }
  }

  .editor {
    overflow: unset;
    max-height: none;
    max-width: none;
    text-align: left;
  }
}

TyphonJS (Michael)•15mo ago

I assume you are changing the layout of the containing elements to something other than a flexbox. Not that this is bad. I definitely need to review the editor components and make them a bit more configurable for different layout constraints. IE the article element is likely just block. It might work if you change article to a flexbox without CSS changes to the component.

geoidesicOP•15mo ago

Tx. I tried your suggestion and while it's not as extreme, the overflow problem still occurs, and the article won't expand while editing content, instead you get a tiny scrollable area in which to type your content. My feeling at this stage is that it might be better not to include CSS for the prosemirror component and leave that up to the implementer entirely. It's not hard to target since the css class-structure is good. CSS vars will always still constrain you in some way that can't cater for every potential use-case and it just doesn't seem necessary to include styles for this component.

WHITESPINE•15mo ago

I've still not managed to get an editor that grows with its content, haha Though I'm trying from the MCE editor

Bolts•15mo ago

I have the main body of my sheet as a section with the flexcol class and then I have a div with role ="tabpanel" that actually contains the editor and that causes the editor to fill the available space for me

Bolts•15mo ago

Pls ingore the complete lack of any styling atm

TyphonJS (Michael)•15mo ago

Things should work fine in a flexbox layout; though if you wrap the RTE components in any given other element that containing element should also be a flexbox. @geoidesic the attached pict. By containing things in an article element that is a block layout by default. If you add the following then things should work:

<style>
   article {
      display: flex;
      flex-direction: column;
   }
</style>

<style>
   article {
      display: flex;
      flex-direction: column;
   }
</style>

In the future I can certainly take a look at offering more finite control in other display / layouts, but it definitely works now w/ flexbox.

TyphonJS (Michael)•15mo ago

There are a bunch of CSS variables you can adjust too.. width and height are --tjs-editor-width / --tjs-editor-height and set to 100% by default hence why things play nice in a flex layout. There is a styles option you can use to set inline styles for the CSS vars. This does bring up the possibility though of adding min / max height CSS vars for the editors though you can technically pass those in as the styles themselves; there just isn't CSS vars that could be applied over a group of editors right now.

Gaming

Programming

How to get rid of funky Prosemirror overlap