Upgrade StorageHow to convert several HTLM features used in TinyMCE note into their equivalent in Prosemirror
We learned that Zotero will be switching to ProseMirror this year. We are very happy that you continue to improve the Zotero not editor and we thank you for the time you kindly spend on it.
As we use extensively/mainly Zotero for the notes, we have added several HTML features (cf the examples below) to Zotero via a custom TinyMCE plugin. (We are several people using the same account and the same TinyMCE customizations).
Here is a jsfiddle (https://jsfiddle.net/gn38ab5e/) with the main features we are talking about.
So we wonder:
- if there is a way to make these features work on ProseMirror and, if that the case,...
- … how to convert them to ProseMirror.
We found already out that some features are supported by ProseMirror. But we did not manage to find a way to convert them (we installed the Beta version on a separate account to try it).
Here are the details of the HTML features:
1) Thick horizontal demarcation lines : a simple HTML div with a background-color, with some text in it
- apparently background-color is supported
- but how to convert HTML lines ?
2) Scrollable div boxes : a div with a fixed width/height and with overflow: auto;
This feature seems possible according to this example (the Code Editor is scrollable): https://prosemirror.net/examples/codemirror/
- is it really the case?
- and how to convert HTML boxes ?
3) Tooltips : a simple span with a CSS visibility set as hidden except when hover
This feature also seems possible based on this example https://prosemirror.net/examples/tooltip/ but it's only plain text. (Our tooltip contains font colors and links.)
- is it possible to have tooltip with rich text
- how to convert HTML tooltips?
4) Tables
- apparently tables are supported by ProseMirror : https://github.com/ProseMirror/prosemirror-tables
- how to convert HTML tables?
5) We also love Zotero links in our notes! Will these links be supported in ProseMirror :
5.1) link to another note (with zotero://select/library/items/….) ?
5.2) link to a specific page of a pdf added as attachement : PDF/ page 213 (with zotero://open-pdf/0_…..) ?
6) We use text formatting extensively : background color, font color, superscript, subscript, strikethrough, and also basic indentations.
Apparently some of these formatting will be supported*, but:
- will all of these style be preserved?
By the way we added custom shortcuts for them (using TinyMce Plugin with editor.addShortcut). It also seems possible to set keymap in ProseMirror: https://github.com/ProseMirror/prosemirror-keymap
- will keymappping be possible in Zotero?
Any idea if it will be possible to keep these features?
And once again, thanks a lot for your work!
*https://forums.zotero.org/discussion/comment/377204/#Comment_377204
As we use extensively/mainly Zotero for the notes, we have added several HTML features (cf the examples below) to Zotero via a custom TinyMCE plugin. (We are several people using the same account and the same TinyMCE customizations).
Here is a jsfiddle (https://jsfiddle.net/gn38ab5e/) with the main features we are talking about.
So we wonder:
- if there is a way to make these features work on ProseMirror and, if that the case,...
- … how to convert them to ProseMirror.
We found already out that some features are supported by ProseMirror. But we did not manage to find a way to convert them (we installed the Beta version on a separate account to try it).
Here are the details of the HTML features:
1) Thick horizontal demarcation lines : a simple HTML div with a background-color, with some text in it
- apparently background-color is supported
- but how to convert HTML lines ?
2) Scrollable div boxes : a div with a fixed width/height and with overflow: auto;
This feature seems possible according to this example (the Code Editor is scrollable): https://prosemirror.net/examples/codemirror/
- is it really the case?
- and how to convert HTML boxes ?
3) Tooltips : a simple span with a CSS visibility set as hidden except when hover
This feature also seems possible based on this example https://prosemirror.net/examples/tooltip/ but it's only plain text. (Our tooltip contains font colors and links.)
- is it possible to have tooltip with rich text
- how to convert HTML tooltips?
4) Tables
- apparently tables are supported by ProseMirror : https://github.com/ProseMirror/prosemirror-tables
- how to convert HTML tables?
5) We also love Zotero links in our notes! Will these links be supported in ProseMirror :
5.1) link to another note (with zotero://select/library/items/….) ?
5.2) link to a specific page of a pdf added as attachement : PDF/ page 213 (with zotero://open-pdf/0_…..) ?
6) We use text formatting extensively : background color, font color, superscript, subscript, strikethrough, and also basic indentations.
Apparently some of these formatting will be supported*, but:
- will all of these style be preserved?
By the way we added custom shortcuts for them (using TinyMce Plugin with editor.addShortcut). It also seems possible to set keymap in ProseMirror: https://github.com/ProseMirror/prosemirror-keymap
- will keymappping be possible in Zotero?
Any idea if it will be possible to keep these features?
And once again, thanks a lot for your work!
*https://forums.zotero.org/discussion/comment/377204/#Comment_377204
Is there any chance these features* will be implemented in Zotero 6?
* Feature 4 was table: we saw that it has already been implemented.
Strategically, I'd think about what you need most urgently and make a case for why that's more broadly useful.
If you literally need every feature you list in your notes and otherwise find Zotero useless, I'd start looking for an alternative while you still have a convenient server-side API to help with migration.