I'm trying to write a test that interacts with a prosemirror instance. It is using Ember's test helper e.g. await fillIn('.ProseMirror', '<p><a href="#">test</a></p>');. (this is essentially the same as setting .innerHTML).
With the goal of acceptance testing, a round-trip through parseDOM to make sure the markup generated is as expected.
But this doesn't work - the result is just <p>test</p>. Where did the mark go?
This is reproducible on the demo on the Prosemirror website if you use the dev tools to edit the HTML. Sometimes it works, others it doesn't, I can't seem to find a pattern.
What's going on here and what's the best way to achieve this?
I could of course use ProseMirror commands, but then that is not testing our application as if a user was interacting with it.
edit wait, do you mean parseDOM :)
Hi all, I'm still battling with the kludge line breaks.
As I understand it, they are added to a node to make that node visible - so the cursor can land in it (otherwise it would collapse).
What I don't understand is why it is added when there is already content there, preventing such a collapse.
It seems (to me at least) to create more problems than it solves in this scenario.
Our prosemirror instance supports quite a broad range of HTML nodes and styles, and no matter how hard I try, whatever I paste into ProseMirror, it never looks like the source it was copied from.
Can anybody help?
Thanks for the response, but I still must be missing the point!
Here is a screencast example: https://share.getcloudapp.com/jku4WGzm
In it, I:
- Copy some HTML from here:
https://www.hubspot.com/email-signature-generator - Paste the HTML into Prosemirror
- Toggle between Prosemirror rendering the HTML and just rendering the serialized HTML
Notice how the kludge br means the pasted HTML does not visually match where it was copied from. (It creates a space underneath the icons)
How can I get it to render the same as the serialized HTML?
I've narrowed it down to something to do with:
<img class="ProseMirror-separator" />
<br>...when inside a table:
Instructions for reproducing here: https://jsfiddle.net/amk221/L2mqevax/
<img> and <br> nodes.
Hi, I have what's likely a very silly question but haven't been able to find docs/similar recent Gitter posts. I'm trying to write tests for my inputrules by simulating user text input. I first tried @marijnh's suggestion here to no avail - I found using the view.someProp(handleTextInput) with text that matches input rule regex triggers basic input rules, but using that same function with text that doesn't trigger any input rules doesn't update the view's state at all. I've also tried copying pieces of the tests from prosemirror-view (and using the compose function) and am able to edit the DOM, but it doesn't seem like those DOM edit events are being propagated to the view.
My question is: what's the recommended way to simulate users entering input for the purposes of integration testing?
@marijnh, thanks for the advice. I've been tinkering with this for a few days, and the async approach seems to work (wrapping my assertion in a setTimeout). However, i'd really like to get this to work synchronously via the flush call. Right now, that call is failing to mark the docview as dirty (domobserver.js line 173) because from is always -1. I suspect this is due to my test environment using jsdom, and jsdom not having implementations of certain functions like getClientRects, getBoundingClientRect. Because markDirty doesn't get called, we skip the updateState call on line 177.
I don't follow how the prosemirror-view tests emulate a browser env, and think that's the piece i'm missing here to get things working synchronously. Apologies if my debugging here is totally off, and thanks for the help so far
1 reply
.check()before 👍🏻I've refactored my reproduction to not use
.fromJSONhttps://codesandbox.io/s/prosemirror-table-cell-content-jxiev?file=/index.html. And td still does not get a paragraph