I just tried this with the prosemirror-basic-schema
// ...
markViews: {
link: (mark) => {
const dom = document.createElement('a');
const contentDOM = document.createElement('span');
const { href, title } = mark.attrs;
const post = `(${href}${title ? `, "${title}"` : ''})`;
const preDOM = document.createElement('span');
preDOM.style.color = 'blue';
preDOM.appendChild(document.createTextNode('['));
preDOM.appendChild(contentDOM);
preDOM.appendChild(document.createTextNode(']'));
const postDOM = document.createElement('span');
postDOM.style.color = 'purple';
postDOM.innerText = post;
dom.appendChild(preDOM);
dom.appendChild(postDOM);
return {
dom,
contentDOM,
};
}
And this is what I got:
Do you think it’s legal? Or it’s something anti-pattern that I didn’t realize.
