title attribute, I can add that there too.
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..
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 WorldI don't really know where to start with the latter. Can anybody guide me? Or is there a better way?
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?
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.
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
1 reply
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?
https://pandoc.org
(not sure yet how this excactly works) http://archieml.org/
https://github.com/Novlr/DOCX.js
https://xsweet.org/
