Content
View differences
Updated by Bruno Pagno 9 months ago
The goal of this task is to identify CKEditor features that we should make available in BlockNote before releasing it to public.
The idea is that users that are used to CKEditor might miss some expressiveness if BlockNote does not support the same core set of features of the other editor.
## Features of CKEditor
<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Feature name </p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Notes</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">BlockNote support</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><a class="op-uc-link" href="https://commonmark.org/">Commonmark</a></p></td><td class="op-uc-table--cell"><p class="op-uc-p">We support it through <a class="op-uc-link" href="https://github.com/markdown-it/markdown-it">markdown-it</a> library. But the support is only partial because we mix the Markdwn with HTML</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Has a LOSSY export to markdown. Not sure if it's Commonmark</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">@mentions</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Using OpenProject API api/v3/principals</p></td><td class="op-uc-table--cell"><p class="op-uc-p">No</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Formatting</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Paragraph + Heading + <strong>Bold</strong>/<i>Italic</i> + other formatting things</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Code Block</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Inline code</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Like <code class="op-uc-code">this</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Link</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Lists</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Unordered and Ordered</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">To-do lists</p></td><td class="op-uc-table--cell"><ul class="todo-list op-uc-list_task-list op-uc-list"><li class="op-uc-list--item"><label class="todo-list__label"><input type="checkbox" disabled="disabled"><span class="todo-list__label__description op-uc-p">Like these</span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Images</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes, but no upload</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Quote</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Tables</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes<br>Advanced styling, formatting of cells, heading cells, merging of cells etc.</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes<br>No advanced features(?)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Local modifications</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Local versioning scoped by editor that the user can revert to</p></td><td class="op-uc-table--cell"><p class="op-uc-p">No</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Undo/Redo</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">PageBreak</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Special marker, only used in PDF export, can be implemented as <code class="op-uc-code"><br style="page-break-after: always;"></code> or custom HTML tag</p></td><td class="op-uc-table--cell"><p class="op-uc-p">?</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Preview mode</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">No - BlockNote can export documents to HTML so should be possible</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Markdown view</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Shows the "source"</p></td><td class="op-uc-table--cell"><p class="op-uc-p">No</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Macros</p></td><td class="op-uc-table--cell"><p class="op-uc-p">As seen on CKEditor on wiki</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes - <a class="op-uc-link" href="https://github.com/opf/op-blocknote-extensions/">as extentions that need to be custom built</a></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Inline macros</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Supported in work package description, meeting notes, activity, rich text custom fields<br><code class="op-uc-code">##67386</code> <mention class="mention" data-id="67386" data-type="work_package" data-text="##67386">##67386</mention> <br><code class="op-uc-code">workPackageValue:67386:status</code> workPackageValue:67386:status<br><code class="op-uc-code">projectValue:name</code> projectValue:name</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Keyboard shortcut</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><a class="op-uc-link" href="https://www.openproject.org/docs/user-guide/wysiwyg/#keyboard-shortcuts">https://www.openproject.org/docs/user-guide/wysiwyg/#keyboard-shortcuts</a> </p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr></tbody></table></figure>
Also useful to be aware of future features requested that might affect CKEditor
* <mention class="mention" data-id="49941" data-type="work_package" data-text="###49941">###49941</mention>
* [<mention class="mention" data-id="31863" data-type="work_package" data-text="###31863">###31863</mention>](https://community.openproject.org/work_packages/31863)
* [<mention class="mention" data-id="33971" data-type="work_package" data-text="###33971">###33971</mention>](https://community.openproject.org/work_packages/33971)
* <mention class="mention" data-id="28843" data-type="work_package" data-text="###28843">###28843</mention>
The idea is that users that are used to CKEditor might miss some expressiveness if BlockNote does not support the same core set of features of the other editor.
## Features of CKEditor
<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Feature name </p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Notes</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">BlockNote support</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><a class="op-uc-link" href="https://commonmark.org/">Commonmark</a></p></td><td class="op-uc-table--cell"><p class="op-uc-p">We support it through <a class="op-uc-link" href="https://github.com/markdown-it/markdown-it">markdown-it</a> library. But the support is only partial because we mix the Markdwn with HTML</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Has a LOSSY export to markdown. Not sure if it's Commonmark</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">@mentions</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Using OpenProject API api/v3/principals</p></td><td class="op-uc-table--cell"><p class="op-uc-p">No</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Formatting</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Paragraph + Heading + <strong>Bold</strong>/<i>Italic</i> + other formatting things</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Code Block</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Inline code</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Like <code class="op-uc-code">this</code></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Link</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Lists</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Unordered and Ordered</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">To-do lists</p></td><td class="op-uc-table--cell"><ul class="todo-list op-uc-list_task-list op-uc-list"><li class="op-uc-list--item"><label class="todo-list__label"><input type="checkbox" disabled="disabled"><span class="todo-list__label__description op-uc-p">Like these</span></label></li></ul></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Images</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes, but no upload</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Quote</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Tables</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes<br>Advanced styling, formatting of cells, heading cells, merging of cells etc.</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes<br>No advanced features(?)</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Local modifications</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Local versioning scoped by editor that the user can revert to</p></td><td class="op-uc-table--cell"><p class="op-uc-p">No</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Undo/Redo</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">PageBreak</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Special marker, only used in PDF export, can be implemented as <code class="op-uc-code"><br style="page-break-after: always;"></code> or custom HTML tag</p></td><td class="op-uc-table--cell"><p class="op-uc-p">?</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Preview mode</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td><td class="op-uc-table--cell"><p class="op-uc-p">No - BlockNote can export documents to HTML so should be possible</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Markdown view</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Shows the "source"</p></td><td class="op-uc-table--cell"><p class="op-uc-p">No</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Macros</p></td><td class="op-uc-table--cell"><p class="op-uc-p">As seen on CKEditor on wiki</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Yes - <a class="op-uc-link" href="https://github.com/opf/op-blocknote-extensions/">as extentions that need to be custom built</a></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Inline macros</p></td><td class="op-uc-table--cell"><p class="op-uc-p">Supported in work package description, meeting notes, activity, rich text custom fields<br><code class="op-uc-code">##67386</code> <mention class="mention" data-id="67386" data-type="work_package" data-text="##67386">##67386</mention> <br><code class="op-uc-code">workPackageValue:67386:status</code> workPackageValue:67386:status<br><code class="op-uc-code">projectValue:name</code> projectValue:name</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p">Keyboard shortcut</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><a class="op-uc-link" href="https://www.openproject.org/docs/user-guide/wysiwyg/#keyboard-shortcuts">https://www.openproject.org/docs/user-guide/wysiwyg/#keyboard-shortcuts</a> </p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br data-cke-filler="true"></p></td></tr></tbody></table></figure>
Also useful to be aware of future features requested that might affect CKEditor
* <mention class="mention" data-id="49941" data-type="work_package" data-text="###49941">###49941</mention>
* [<mention class="mention" data-id="31863" data-type="work_package" data-text="###31863">###31863</mention>](https://community.openproject.org/work_packages/31863)
* [<mention class="mention" data-id="33971" data-type="work_package" data-text="###33971">###33971</mention>](https://community.openproject.org/work_packages/33971)
* <mention class="mention" data-id="28843" data-type="work_package" data-text="###28843">###28843</mention>