Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jan 13 15:57
    floriankrueger commented #1233
  • Jan 13 15:32
    marijnh closed #1234
  • Jan 13 15:32
    marijnh commented #1234
  • Jan 13 10:46
    luke-john-atlassian commented #1234
  • Jan 13 09:19
    marijnh commented #1234
  • Jan 13 01:09
    luke-john-atlassian opened #1234
  • Jan 11 23:24
    marijnh commented #1233
  • Jan 11 17:54
    benasher44 commented #1233
  • Jan 11 17:16
    marijnh closed #1233
  • Jan 11 17:16
    marijnh commented #1233
  • Jan 11 13:33
    floriankrueger opened #1233
  • Jan 03 15:24
    marijnh commented #1232
  • Dec 30 2021 09:10
    ocavue opened #1232
  • Dec 29 2021 14:53
    marijnh closed #1231
  • Dec 29 2021 13:19
    VFritsch commented #1231
  • Dec 29 2021 11:56
    marijnh commented #1230
  • Dec 29 2021 11:56
    marijnh closed #1230
  • Dec 29 2021 11:10
    marijnh commented #1231
  • Dec 29 2021 08:40
    VFritsch opened #1231
  • Dec 29 2021 04:45
    ght901 opened #1230
AndrΓ© Drougge
@miphe
Andrew I have a similar case. I'm using a simple text area where the user writes markdown, and can switch with a toggle to ProseMirror where they see the wysiwyg
So in my case, prose mirror is the preview.
But I suppose you can do a third option as well, where you simply render the HTML (or in my case markdown) with certain styles, to preview.
I simply pass on the state (html or markdown) to outside prosemirror and keep it up to date, at that point you can do what you will with it
Andrew Kirwin
@amk221

Ty.

Another question.. how expensive is this:

this.html = DOMSerializer
      .fromSchema(this.schema)
      .serializeFragment(this.state.doc.content)

Could it be run on an update cycle for example?

Marijn Haverbeke
@marijnh
@amk221 Depends on document size. It's going to build up a whole new DOM structure for the document. Should be fine for small ones, you'll have to benchmark with what you expect your users will be editing.
Andrew Kirwin
@amk221
@marijnh ok thank you. I think I can use on blur instead actually.
Andrew Kirwin
@amk221

I need to apply some changes to a document, strip out some nodes and whatnot.... but I want to leave the editor untouched.

But I'm a bit confused, because dispatch'ing is bound to a view. But in this case, I don't need a view.

Here's a pseudocode example:

toHTML() {
  let schema = this.view.schema;
  let content = this.view.state.doc.content;

  content.descendants((node, pos) => {
    // Find and change some stuff, without affecting the view
  });

  // ...in order to be able to produce an HTML preview

  let div = document.createElement('div');
  let fragment = DOMSerializer.fromSchema(schema).serializeFragment(content);
  div.appendChild(fragment);
  return div.innerHTML;
}

Do I need to juggle two EditorState's?

Andrew Kirwin
@amk221
Or two views for that matter? πŸ€”
Andrew Kirwin
@amk221
Never mind, it's clicked now... I can use state.apply, instead of dispatch to get a new state, leaving the view intact.
Andrew Kirwin
@amk221

But that leads me to another question....
in a content.descendants loop, how can you batch up operations, and then dispatch the transaction (at the end)?

Say for example you were looping through and replacing nodes by using insertText. This has a knock on effect for the next transaction, because all the positions will have changed.

Andrew Kirwin
@amk221

for example,

function replaceNodesWithTextContent(state, nodeTypes) {
  const tr = state.tr;

  state.doc.content.descendants((node, pos) => {
    if (nodeTypes.includes(node.type)) {
      const from = pos;
      const to = from + node.nodeSize;
      const text = node.textContent;

      tr.insertText(text, from, to);
    }

    return true;
  });

  return state.apply(tr);
}

this gives me an out of range error

Nicholas Vella
@vella-nicholas
Hello, in prosemirror, is one able to create custom html element like <mylist count="#"></mylist>? I do not need to put anything into it, but I need it to exist in a document
Andrew Kirwin
@amk221
@vella-nicholas yes very easy to do that.
Marijn Haverbeke
@marijnh
@amk221 You can either sort the changes in reverse order and apply them in that way, or map changes forward through previous steps before applying them
Andrew Kirwin
@amk221
@marijnh Interesting thanks
Nicholas Vella
@vella-nicholas
@amk221 Thank you very much. I will re-read well the documentation. Thanks!
Andrew Kirwin
@amk221

If write this into Gmail compose: (don't copy from here)

Line 1

Line 3

And paste it into ProseMirror, you will get two <br> (Where line2 is)

I realised ProseMirror puts in <br> for empty paragraphs to maintain vertical rhythm but this feels like an issue?

Andrew Kirwin
@amk221
If that message wasn't clear, the output is:
Line 1


Line 3
marek-baranowski
@marek-baranowski:matrix.org
[m]

I need to implement opening in editor .docx file so that it's editable, after finishing edit it should be possible to export to .docx. Possibly with minimal losses in consistency between next conversions.

Are there any examples available so I can take a look? Do you think converting .docx to HTML (end from HTML to .docx after editing) will work ok?

marek-baranowski
@marek-baranowski:matrix.org
[m]
there are couple converters so should be doable in theory. Does anyone have an expierience in such use case?
https://pandoc.org
(not sure yet how this excactly works) http://archieml.org/
https://github.com/Novlr/DOCX.js
https://xsweet.org/
Andrew Kirwin
@amk221
Can any body shed light on why handleDOMEvents is separate from handleClick?
Marijn Haverbeke
@marijnh
You can handle clicks through handleDOMEvents, it's just that handleClick provides some additional conveniences that are specific to clicks
Andrew Kirwin
@amk221
ty
Michael Rutter
@m-rutter
Hi, trying to design something that allows users to to author a snippet which gets serialised to a database somewhere, and then allows users to apply that snippet to existing documents. I'm just trying to navigate the data types of prosemirror to identify what I likely need. If I had to guess I would need to either serialise/deserialise a Tranactions, Transform, or EditorState, and then somehow apply that to an existing document via the Editorstate apply/applytractions methods
Marijn Haverbeke
@marijnh
You probably want to serialize a Slice, and use Transaction.replace or Transaction.replaceSelection to insert it.
Michael Rutter
@m-rutter
@marijnh thanks
Michael Rutter
@m-rutter
Say I have a Slice that has nodes tied to a specific schema
and I want to replace all of those nodes with something else, what would I need to do? It doesn't seem like I can perform a transaction on Slice
I can get a flat list of the nodes via descendents callback on the Fragment content on the slice, but I'm not sure how to replace content
for some context, I have a tool that allows authors to create snippets for later insertation into another document that need to be serialized to the database. Some of the custom nodes on the document are essentially variables that I want to identify and replace
effectively, I'm creating a template
Marijn Haverbeke
@marijnh
A recursive function that runs through the slice's fragment, building up a new tree and returning that, seems like the way to do that.
Michael Rutter
@m-rutter
Are you suggesting doing that in its serialized or deserialised form?
I'm guessing deserialised Slice or Fragment I'm guessing you are suggesting I build a second fragment recurively calling appendChild or append, and computing a new fragment on each step?
Or if its serialised JSON mutating a copy the tree in place as I step through the tree?
Michael Rutter
@m-rutter
first time using prosemirror, and quite liking it
Marijn Haverbeke
@marijnh
Both work. I'd just build up the children on a given level as an array, and then call Fragment.from to create the fragment.
Andrew Kirwin
@amk221

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.

ravi7mech
@ravi7mech
Hi
ravi7mech
@ravi7mech
I have successfully integrated the https://github.com/benrbray/prosemirror-math, with https://www.npmjs.com/package/ngx-editor. But when I try to insert the latex using the insertMathCmd(https://github.com/benrbray/prosemirror-math/blob/master/src/commands/insert-math-cmd.ts), The data is not updating in view(or i don't know how to pass the data to that command). Actually, it returns the NodeType instance... But dont how to write the data in view using that? Can anybody help me with this?
Marijn Haverbeke
@marijnh
@amk221 Does this reproduce when you directly call DOMParser methods to parse? What does the fromDOM for your link mark look like? I can't reproduce this on the demos
I'll take a look at the fromDOM πŸ‘€
edit wait, do you mean parseDOM :)
Andrew Kirwin
@amk221
thanks yeh I think it was that, I needed to provide a title for it to work
Andrew Kirwin
@amk221
Quick Q - how come the list schema uses order which then maps to the start attribute? Wouldn't it make more sense to call it start?
Is there something else going on here that I'm no aware of?
Marijn Haverbeke
@marijnh
That descend from terminology used in markdown-it, which I later realized is kind of quicky, but it doesn't seem a big enough deal to cause a breaking change for at this point.
Andrew Kirwin
@amk221
Ok thanks πŸ‘πŸ»
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?