How to get all styles of the selected text in the current editor

How to get all styles of the selected text in the current editor (Font background color and font color)

,thanks

微信图片_20220217114339

You probably have defined marks for those styles, since the default schema doesn’t implement many of them. Scanning through the selection with doc.nodesBetween and collecting all the marks on the nodes you get might be what you’re looking for, but your question is so vague that I don’t really know what you want to do.

Thank you for your reply I mean, I want to make a format brush function, which is similar to the format brush of word

such as

Now there are two paragraphs

hellow world

hellow world2

If the first paragraph of text has colors or other styles, I want to copy all styles of the first paragraph of text to the second paragraph of text through the format brush, so that it also has the same style as the first paragraph of text

This feature exists in software like Google Docs / Microsoft Word and is pretty useful. Somewhat rewording what was said above:

If your schema has marks for all supported styling (if not, users will be unable to add/remove them) then it comes down to operating on the current text selection to collect the list of marks, store them when “copying format to clipboard” .

Then you just need to apply a transform to a different selection using those stored marks. Seems relatively straight-forward, although you may need to break down the application step to use both:

https://prosemirror.net/docs/ref/#transform.Transform.addMark
https://prosemirror.net/docs/ref/#transform.Transform.setNodeMarkup

Although @marijn might be able to get you off in the right direction on the best way to use the existing API to your advantage.

thanks Thank you for your reply and guidance. I think I have encountered new problems now.

How can I get the style and data of this row selected by my mouse

I use state to get all the node styles

for example

I just want to get the style data of “3312312312312”

image

With regards to your most recent screenshot / question, I’d suggest you take the time to read through the prosemirror documentation, but in your case specifically https://prosemirror.net/docs/ref/#state.EditorState & https://prosemirror.net/docs/ref/#state.Selection

At some point, the overall architecture (ex: positions, text or node selections & ranges, marks and nodes) will make sense and you’ll be able to do these sorts of things more confidently without the help of others.

Though, the answer to your question is that you should re-read How to get all styles of the selected text in the current editor - #2 by marijn, then https://prosemirror.net/docs/ref/#model.Node.nodesBetween.

Figure out the right from and to to pass to this method, and you’ll have the selected nodes (state.doc is all of them)

Once you have the user selected nodes, the marks exist on each, and you’ll be iterating through them while collecting unique ones. https://prosemirror.net/docs/ref/#model.Node.marks

Its possible these will come in handy to simplify your implementation

https://prosemirror.net/docs/ref/#state.Transaction.setStoredMarks https://prosemirror.net/docs/ref/#state.Transaction.ensureMarks

setStoredMarks can be used once you have the list of “copied” marks, and ensureMarks could directly answer your question (“How to add multiple marks except for loops”)

I havent used either of these methods yet in my own usage, but from reading the manual, it is likely they may assist you perfectly here. (@marijn, would appreciate if you could confirm / deny - I am not entirely sure about how this is worded: "Make sure the current stored marks or, if that is null, the marks at the selection, match the given set of marks. Does nothing if this is already the case.")

Although, I dont see too much a problem with your current work (can use a for-loop to apply a sequence of transactions) its just much longer… if the above methods do work, you are duplicating quite a bit of prosemirror library support

Thank you for your help. Thank you again

Now there’s a final question. Is there a function or event?

I select a text and release it to execute an event or method

Does the editor have a trigger event API when selecting a piece of text

Ah the final part. There might be a few ways to do this, but I dont think there is direct support for mouseup handler, just indirect where prosemirror hooks into native browser events. You’ll want to use handleDOMEvents which supports regular event listeners

https://prosemirror.net/docs/ref/#view.EditorProps.handleDOMEvents

handleDOMEvents: {
     mouseup(view, event) { 
        // Conditionals before applying format
     },
},

mouseup would be the “trigger” only when the user is in “Paste to selection” mode (and there are marks in clipboard) + there is a non-empty text selection (otherwise, returning false)