How to serialize JSON output at backend? #241
Replies: 6 comments 2 replies
-
|
First, I've never used tiptap as I've just got interest in it. However, if it's true that I understood your question well, I can give you a general advice. Another simple strategy might be possible. Just save data as-is without post-processing to database. Modify the data on-demand when loading on frontend. Major SPA frameworks such as vue.js or server-side template engines support that feature (parsing data as text rather then html so < and > are to be |
Beta Was this translation helpful? Give feedback.
-
|
Hey @jjangga0214, thanks for the suggestion! Unfortunately, I must inject the data back to the frontend as Just for the record, I got it to work by providing a simulated DOM API using JSDOM, if anyone is interested. It would be very nice to have your opinions on this code as well. import { JSDOM } from 'jsdom';
import { schema } from 'prosemirror-schema-basic';
import { DOMSerializer } from 'prosemirror-model';
const mainSerializer = DOMSerializer.fromSchema(schema);
const getNewDocument = () => {
const dom = new JSDOM('<!DOCTYPE html><div id="content"></div>');
const document = dom.window.document;
const renderer = document.querySelector('div');
return { document, renderer };
};
export const prosemirrorToHTML = (nodeObject) => {
const { document, renderer } = getNewDocument();
const node = schema.nodeFromJSON(nodeObject);
mainSerializer.serializeFragment(node, { document }, renderer);
return document.getElementById('content').innerHTML;
}; |
Beta Was this translation helpful? Give feedback.
-
|
@vinerz The the best feature (for me) of Prosemirror is that it is based on a schema that you have full control of. If you get a JSON from the backend (or anywhere else) that doesn't comply with it, the document will not be rendered. You don't have to use a |
Beta Was this translation helpful? Give feedback.
-
|
For my project Collect I'm also trying to use the JSON document outside of a browser environment. I implemented something similar to #66 to export Markdown. Everything works nice so far, but the problem I run into is, that WebPack bundles TipTap and Vue.js with my code I want to run in my browser less environment (which is JSContext in my case). So my proposal would be to completely separate schema related methods from the rest of the TipTap |
Beta Was this translation helpful? Give feedback.
-
|
I solved this by using prosemirror-to-html-js import { Renderer } from 'prosemirror-to-html-js';
const content = {
type: 'doc',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'Example Paragraph'
}
]
}
]
};
const renderer = new Renderer();
const html = renderer.render(content);adding additional Marks and Nodes: import { Node, Mark } from 'prosemirror-to-html-js';
class Strike extends Mark {
matching() {
return this.mark.type === 'strike';
}
tag() {
return 's';
}
}
class Quote extends Node {
matching() {
return this.node.type === 'quote';
}
tag() {
return 'blockquote';
}
}
renderer.addMark(Strike);
renderer.addNode(Quote); |
Beta Was this translation helpful? Give feedback.
-
|
In v2 there is an |
Beta Was this translation helpful? Give feedback.
-
|
@philippkuehn the problem I have is that this |
Beta Was this translation helpful? Give feedback.
-
|
Not planned yet, follow #1221 for updates |
Beta Was this translation helpful? Give feedback.
-
Hi there! This question is kinda off-topic, but as you guys are the prosemirror magicians, I'd like to give a try.
I want to save the editor JSON document in my database, but render and filter the XSS at my backend using nodejs. As
prosemirror-modelheavily relies on the browser DOM API, I can't use it there and I also couldn't find any packages at npm capable of doing this out of the box.Do you guys have any tips for this situation?
Thanks!
Beta Was this translation helpful? Give feedback.
All reactions