T
TyphonJSgeoidesic

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.
No description
G
geoidesic•221d 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>
G
geoidesic•221d ago
With similar results
No description
G
geoidesic•221d 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;
  }
}
TM
TyphonJS (Michael)•221d 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.
G
geoidesic•220d 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.
W
WHITESPINE•214d ago
I've still not managed to get an editor that grows with its content, haha Though I'm trying from the MCE editor
B
Bolts•214d 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
No description
B
Bolts•214d ago
Pls ingore the complete lack of any styling atm
TM
TyphonJS (Michael)•213d 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.
No description
TM
TyphonJS (Michael)•213d 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.
Want results from more Discord servers?
Add your server
More Posts
FQL / TextEditor enrichment issueFrom @ooblekie: > can anyone give me a hand as to why the text keeps coming up as object promise inTJSDocument not working properly with Module Sub-Types (Data Models)In Foundry, modules can define a [Sub-Types](<https://foundryvtt.com/article/module-sub-types/>) usiTRL `0.1.2` - Fine Tuning releaseGreets @FVTT ▹ Developer! I have just released a fine tuning release that brings a few more featureEmbed a DropDown/MenuList made with SvelteHello again! 😄 I've been pondering creating a second module for Foundry and a few questions poppedSlide Animations for SvelteApplicationI'd like my window ( which is an EmptyApplicationShell ) to play a slide-in animation when open andBug: Multiple ProseMirror editors on same svelte component do not save properlySimple reproduction in a foundry world with at least one actor defined: ``` <svelte:options accessorSystem 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 fr