Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 13:52
    barbatus commented #1271
  • 13:50
    barbatus commented #1271
  • 13:39
    barbatus edited #1271
  • 13:38
    barbatus edited #1271
  • 13:36
    marijnh commented #1271
  • 13:32
    barbatus opened #1271
  • 03:30
    kg782 commented #1270
  • May 16 12:45
    marijnh closed #1269
  • May 16 12:45
    marijnh commented #1269
  • May 16 12:14
    marijnh commented #1270
  • May 16 04:35
    kg782 opened #1270
  • May 14 14:11
    bdbch opened #1269
  • May 13 18:58
    Billiam opened #1268
  • May 10 06:53
    qinbinhua601 commented #884
  • May 10 06:52
    qinbinhua601 commented #884
  • May 10 06:52
    qinbinhua601 commented #884
  • May 10 06:51
    qinbinhua601 commented #884
  • May 10 05:50
    marijnh commented #884
  • May 10 00:51
    qinbinhua601 commented #884
  • May 04 14:04
    Gamerth-cyo commented #748
André Drougge
@miphe
Is there a good example around on how to achieve this?
Andrew Kirwin
@amk221
@miphe
const href = prompt('Link');
toggleMark(editor.state.schema.marks.link, { href })(editor.state, editor.dispatch)
Andrew Kirwin
@amk221

When using custom node views, generally its assumed you'd make your own dom nodes, thereby bypassing toDOM from the node type spec...... but, what if you want the new view to just add a layer of behaviour (and not have to re-do all the work that toDOM does?).

Is it possible in a new view to convert the node to dom, and just use it as it is, rather than assuming it will be entirely custom?

constructor(node, editor, getPos) {
  this.node = node;
  // this.dom = document.createElement('div') // not this
  this.dom = node.toDOM(); // this?
  this.dom.addEventListener('click', this._clickHandler);
}
André Drougge
@miphe
Thank you @amk221
I get missing value for href though, but this seems to get me further:
toggleMark(schema.marks.link, { href: { url: '...', title: '...' } })(state, dispatch);
I've just been trying things out, I don't know if that's correct.. because I don't know where to find this information in documentation :/
Andrew Kirwin
@amk221

@miphe The docs are clear:

toggleMark(markType: MarkType, attrs: ?⁠Object)

So that's

toggleMark(yourLinkMark, anyAttrsGoHere)

The way you have sent in your attrs is wrong
it should be as per my example above. You've confused href with url

André Drougge
@miphe
All right, so this would be it:
toggleMark(schema.marks.link, { href: 'http://example.com' })
And if I want a title attribute, I can add that there too.
Andrew Kirwin
@amk221
that's it
André Drougge
@miphe
Cheers
I'm now looking to get the link text in the mix somehow.
André Drougge
@miphe
I'm not sure I'm getting this. I feel ProseMirror is very obtuse to work with.
For the sake of flexibility and extensibility I've chosen prosemirror but using this with React, and markdown it really seems like I'm swimming against the current.
Just implementing a link feature is quite the challenge.
Does anyone know of an example where something like this has been done before? React, Markdown, Link.
André Drougge
@miphe
When I create a new link, I first prompt a form where the user can add the link text (I suppose ProseMirror calls this "title") and the URL (href). Is there a way to get the current selection in the ProseMirror editor to prefill the title field?
I'm looking through the state object but the selection is quite complicated and I can't seem to find just a simple string to prefill with.
Marijn Haverbeke
@marijnh
stat.doc.textBetween is probably useful for that
André Drougge
@miphe
Thanks, I will read about it
Andrew Kirwin
@amk221
Anybody know how I can prevent the cursor from ending up in this NodeView: https://share.getcloudapp.com/6qu8v0EB
André Drougge
@miphe

I'm aiming to use textBetween in order to create a link feature, seems it's not that straightforward.
I made a PoC in this code sandbox https://codesandbox.io/s/prosemirror-markdown-react-b4gfr?file=/src/RichEditor.js

Perhaps this illustrate my struggles more clearly? I'd appreciate any indications here..

Kees de Kooter
@kdekooter
I am well aware that prosemirror is kind of a lego-box that you need to assemble yourself. The "basic example" is very helpful. However I cannot seem to find one quite essential brick: how does one get edited content out of the editor?
Andrew Kirwin
@amk221
@kdekooter I think if you have access to the editor you can do .state.doc.toJSON(), to get the HTML is a bit more involved
Kees de Kooter
@kdekooter
Thanks @amk221 that is a good first step. I am eventually aiming for the HTML here though.
Kees de Kooter
@kdekooter
@amk221 excellent!
Andrew Kirwin
@amk221

I need to implement a 'toggle mode' feature (preview ↔ edit).
This could be done by adding a class, something like this:

.ProseMirror--edit-mode .my-node {
  border: 1px solid red;
}
Hello <div class="my-node">World</div>

...but that means all the styles are 'trapped' inside the ProseMirror 'namespace'.

An alternative approach would be to iterate through certain nodes and remove them when in preview mode:

Hello World

I don't really know where to start with the latter. Can anybody guide me? Or is there a better way?

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
1 reply
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?