Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Nov 26 14:47
    marijnh commented #1218
  • Nov 26 14:41
    katepol commented #1218
  • Nov 26 14:37
    marijnh commented #1218
  • Nov 26 14:14
    katepol commented #1218
  • Nov 26 09:23
    lmf commented #1223
  • Nov 26 08:38
    marijnh commented #1223
  • Nov 26 08:07
    lmf commented #1223
  • Nov 26 07:49
    marijnh commented #1223
  • Nov 26 07:49
    marijnh closed #1223
  • Nov 26 07:48
    marijnh commented #1223
  • Nov 26 02:48
    lmf opened #1223
  • Nov 25 17:16
    chrisdone commented #1222
  • Nov 25 14:47
    chrisdone commented #1222
  • Nov 25 12:56
    marijnh closed #1222
  • Nov 25 12:56
    marijnh commented #1222
  • Nov 25 11:57
    chrisdone opened #1222
  • Nov 25 07:18
    lmf commented #1221
  • Nov 25 07:16
    lmf commented #1221
  • Nov 25 07:03
    marijnh closed #1221
  • Nov 25 07:03
    marijnh commented #1221
Andrew Kirwin
@amk221

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?

Marijn Haverbeke
@marijnh
It only adds the extra nodes to non-empty blocks when they end in an uneditable node, because otherwise the browser (often, depending on the situation and browser) won't let you put your cursor after that.
As for the pasting problem, I don't think that has much to do with the hack nodes.
Andrew Kirwin
@amk221

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:

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?

Andrew Kirwin
@amk221

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/

Andrew Kirwin
@amk221
I'm hoping to raise an issue, with your approval Marijn
Marijn Haverbeke
@marijnh
I don't think there is an issue. The HTML in the editor will look different from the plain document HTML, if you don't add a kludge for this to your serializer. And that's okayβ€”it's a semantic editor, not microsoft word.
Andrew Kirwin
@amk221

Ok thank you I undertsand that :thumbsup: Ignoring my screen cast though, did you try the js fiddle?

I'm not sure if it's something that should be fixed in prosemirror-tables or prosemirror-view.

Andrew Kirwin
@amk221
(an img with no src, followed by a br in a td seems to be behaving oddly)
Marijn Haverbeke
@marijnh
The bug tracker might be better for this kind of thing. I still don't understand what the problem is or how you could manage to copy a ProseMirror-separator node (copying from the editor should not include those), nor how the table plugin could be involved in the pasting of <img> and <br> nodes.
Andrew Kirwin
@amk221
Oh no I didn't copy it, it gets created when pasting
Andrew Kirwin
@amk221
I understand whats going on now. addHackNode is used when a node is a block level element and contains only inline content. But, crucially - if one of those inline elements has a style that turns it in into block level element the hack node will apply when it doesn’t need to.
Andrew Kirwin
@amk221
:) So it's not to do with tables, it just happens that that's how discovered it.
Could ProseMirror could use getComputedStyle to check for genuinely inline elements? instead of using the schema?
Marijn Haverbeke
@marijnh
Okay, I think I see what you're doing now, but my suggested solution would be to not do that. If your images are blocks, define them as block nodes in the schema. If they are inline, make sure they are styled to be inline as well. The correspondence between schema block/inline nature and styling is just an assumption the library makes.
Andrew Kirwin
@amk221
Thanks for baring with me on that one!
Would you consider adding a class name to the hack <br> element, in the same way that you do for the hack <img class="ProseMirror-separator"> element. That would help distinguish them.
Marijn Haverbeke
@marijnh
I guess we could do that. Do you intend to hide them with CSS somehow? A PR that adds this should be noncontroversial.
Andrew Kirwin
@amk221
Yes, that would be great. I could do that,
Do you have any idea what such a class name would be acceptable?
Marijn Haverbeke
@marijnh
I'd go with "ProseMirror-trailingBreak"
denny
@dennyluan
hello is there an easy way to merge two editor states?
say that I'm trying to create an updated EditorState from react props changing
or is it better to just make the editorstate receiveTransaction() on whatever the diff is?
denny
@dennyluan
Sarvar Dhillon
@SarvarD

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?

Marijn Haverbeke
@marijnh
You could either make your test asynchronous, so that the mutation observer fires, or call view.domObserver.flush() to force synchronous reading from the DOM. That's not part of the public interface, but should be stable enough for a test.
Shaun Grady
@shaungrady
Hi y'all. Is it possible to force the order of node content? I want to create a definition list with a single DT first, then one or more DL's; e.g., content: 'DT{1} DL{1,}'
Shaun Grady
@shaungrady
OK, got it implemented, now I see why no one replied. πŸ˜› Just wasn't specified in the docs.
Sarvar Dhillon
@SarvarD
@shaungrady, how'd you do it?
2 replies
Sarvar Dhillon
@SarvarD

@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
Marijn Haverbeke
@marijnh
Oh, no, running the view on JSDOM is definitely not going to work. I'm surprised it didn't crash on some missing API right away.
1 reply
The library's own tests don't emulate a browser env, they run in a full browser.
marek-baranowski
@marek-baranowski
This message was deleted
Andrew Kirwin
@amk221

If I paste a list item, with no content <li></li>, because my schema says paragraph block*, I end up with <li><p></p></li> πŸ‘πŸ»

But, if I do exactly the same with a <td></td>, I end up with <td></td>

Any ideas why the p isn't created?

Marijn Haverbeke
@marijnh
If the schema restriction exists (probably something like content: block+ for table cells), then you should get some block in there. If it doesn't add one, that sounds like a bug, and an issue report with reproduction instructions would be useful.
Andrew Kirwin
@amk221
I thought it might, ok I'll create a reproduction thanks
Marijn Haverbeke
@marijnh
fromJSON does not validate or check schema constraints, so if you feed it an invalid document, it'll give you an invalid node. You can call .check() on a node if you're not sure that it conforms to the schema.
Andrew Kirwin
@amk221
Thanks, you've taught me about .check()before πŸ‘πŸ»
I've refactored my reproduction to not use .fromJSON
https://codesandbox.io/s/prosemirror-table-cell-content-jxiev?file=/index.html. And td still does not get a paragraph
Marijn Haverbeke
@marijnh
That was a bug. ProseMirror/prosemirror-view@3be4284 should help
Andrew Kirwin
@amk221
πŸ’›
Rishikesh Tirumala
@rishter

Hi! I'm trying to understand if there's a way to serialize comments in a node's toDOM, so that they render when the content is unserialized? Looking in DOMSerializer but open to any tips.

Rendering nodes in email, and it's very helpful to have conditional comments to support VML for outlook compatibility. Thank you!

Rishikesh Tirumala
@rishter
^ we found a solution here, threw a document.createComment('text') in instead of the node we wanted to generate
Andrew Kirwin
@amk221
I'm making a plugin that uses transformPasted. I need to utilise state.tr.setMeta (and pluginKey.getState), to store some information about what was pasted, but at that point in time (inside transformPasted), they don't appear to be accessible in the scope or arguments available. Is my approach wrong here?
Marijn Haverbeke
@marijnh
transformPasted can only modify the parsed content, not do anything else (no transaction has even been created yet when it is called). You may have to use handlePaste instead.
Andrew Kirwin
@amk221
thanks πŸ‘€