Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Aug 10 07:31
    jnystad commented #1055
  • Aug 08 16:42
    benasher44 commented #1305
  • Aug 05 23:25
    benasher44 commented #1305
  • Aug 05 22:51
    benasher44 commented #1305
  • Aug 05 17:08
    marijnh commented #1305
  • Aug 05 16:43
    benasher44 opened #1305
  • Aug 02 06:41
    ocavue closed #1304
  • Aug 02 06:41
    ocavue commented #1304
  • Aug 02 06:21
    ocavue opened #1304
  • Jul 29 09:20
    marijnh commented #1303
  • Jul 29 01:50
    MH4GF commented #1303
  • Jul 28 09:48
    marijnh commented #1303
  • Jul 28 09:25
    MH4GF edited #1303
  • Jul 28 08:45
    MH4GF opened #1303
  • Jul 26 00:49
    shanehyde opened #1302
  • Jul 21 16:02
    pvande commented #1301
  • Jul 21 10:12
    marijnh commented #1301
  • Jul 20 23:15
    pvande edited #1301
  • Jul 20 23:11
    pvande opened #1301
  • Jul 20 09:19
    marijnh closed #1299
ithil
@ithil

Ahh now I have found a solution:

tr = tr.insertText(label, start, end)
tr = tr.addMark(start, start+label.length, linkMark)

Though I'm not sure this is the most robust way?

Sebastian Podgajny
@SebastianPodgajny
Is there a way to render prosemirror state as plain html? (without event listeners)
Cris Ward
@crisward
I'm doing this...
let copy = slide.node.copy(start,end)
tr.delete(start,end)
tr.insert(insertPos, copy)
But sometimes the content of the copy is being added to multiple nodes. Specifically images. So the copy if a div wrapped around and image. There are muliple divs in a surrounding div. Not sure what I'm doing wrong. But insert should only effect one node.. correct?
(I'm guessing I'm screwing up somewhere else in my app)
Cris Ward
@crisward
Found the solution to my own problem. Before the above step I was doing a transform that was updating the attributes of a node, but setting the attributes to the same value as they already had. For some reason this caused the insert/delete to be performed on the wrong nodes, checking and skipping over the non changes fixed the issue.
Marijn Haverbeke
@marijnh
@SebastianPodgajny Look into the DOMSerializer class
Manuel Jacob
@manueljacob
Is there a plugin that implements nested sections, similar to what’s described in https://discuss.prosemirror.net/t/nested-sections-and-splitblock/2323 ?
Manuel Jacob
@manueljacob
Is it possible to get a stable identifier for some block element?
Manuel Jacob
@manueljacob
The background is: In a React application, I’m rendering the document structure (outline) next to the editor. Each node in the outline tree view component needs to have some ID, e.g. for tracking whether the node was expanded in the tree view or not.
Marijn Haverbeke
@marijnh
I'm not aware of a plugin that does the nested section structure. (But I know several people have implemented it in their proprietary systems.)
Assigning and deduplicating IDs is usually done in an appendTransaction hook.
andreas
@andreasvirkus
Hi everyone! I'm seeing a weird behaviour with a plugin where i return a handlePaste handler in my props. I'm trying to read multiple images/files from the clipboard but only get the very last one. Even though all file names are still pasted into the editor
Andrew Kirwin
@amk221

If I have a doc schema of block+, then I create some state:

EditorState.create({
  doc: schema.nodeFromJSON({
    type: 'doc',
    content: []
  })
});

I think this sets up prosemirror in a funny state, because it was expecting at least 1 block. But, we didn't give it 1 block.

(This leads to issues with decoration position)

Can/should prosemirror throw an error in this circumstance?

Marijn Haverbeke
@marijnh
It would be rather expensive to check its entire content every time a node is created, so ProseMirror doesn't do that. Passing invalid content to NodeType.create is considered an error in the calling code.
Andrew Kirwin
@amk221

Thanks, that makes sense. How about not every time a node is created, but at the time the EditorState.create is called?

If not, I'm just thinking about where/how I can guard for this in our app. As it will undoubtedly lead to issues when we render prosemirror with json from our backend api.

Marijn Haverbeke
@marijnh
You can call .check() on a node if you want to assert that it has valid structure.
Andrew Kirwin
@amk221
Nice
Andrew Kirwin
@amk221
Yeh that's perfect, cheers
Andrew Kirwin
@amk221
Seems like a call to doc.check() couldn't harm. Because a doc is required.
Andrew Kirwin
@amk221
(and so it may as well be valid?)
André Drougge
@miphe
Hi all, I'm looking to implement "link" button on my editor. Can't really find an example on how to do that. It's not as straightforward as bold or italic, since I need a URL and link text as well.
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?