There is 1 comment.
 
 
XWiki Platform / cid:jira-generated-image-avatar-b79deac4-9ccd-4cdf-8da7-52cecafcc366 XWIKI-23025 In Progress

Introduce Blocknote as an editor for XWiki

 
View issue   ยท   Add comment
 

1 comment

 
cid:jira-generated-image-avatar-c378d05c-4c59-4081-b9ef-441325a4314c Marius Dumitru Florea on 11/Jul/25 12:07
 

TODO:

  • Load and Save
    • Load the editor in both standalone and in-place edit modes (test with Sandbox home page).
    • In-place edit mode is missing the BlockNote CSS.
    • Save the edited content from both standalone and in-place edit modes.
  • Accessibility
  • L&F
    • Content
      • The way BlockNote renders the content to HTML is completely different from what we have in view mode. It's not easy to achieve WYSIWYG when a list is rendered using UL/LI in view mode and using DIVs and paragraphs by BlockNote (just to give an example).
      • BlockNote provides a set of default content styles. We can configure BlockNote to drop them, but we won't get the same result as in view mode because the HTML is completely different.
    • UI
      • The floating toolbar is badly styled (takes the full width and the buttons are too small).
      • Block action buttons (side menu), displayed when hovering a block, are too small.
  • Text styles
    • Strikethrough leads to "Uncaught Error: style strikethrough not found in styleSchema"
    • Underline leads to "Failed to load document: Error: TODO: handle inlines of type html". The Markdown syntax is <ins>Text in Underline</ins>. It seems Markdown doesn't have a dedicated syntax for underline so it uses HTML which is currently not supported by the UniAst converter.
    • Subscript incorrectly detected as strike-through. Note that Markdown has an extension for subscript style, see https://www.markdownguide.org/cheat-sheet/ .
    • Superscript not supported. Note that Markdown has an extension for superscript style, see https://www.markdownguide.org/cheat-sheet/ .
  • Links
    • Link references are not resolved. Will be fixed by implementing the required components.
    • Relative link references like attach:file.png are badly handled
    • Insert link navigates away from the edit mode.
    • The link floating toolbar shown on link hover gets hidden when you try to move the mouse over it.
    • Clicking on the link opens the URL in a new tab, which is distracting if you just want to change the link label. See https://github.com/TypeCellOS/BlockNote/issues/1539
  • Headings
    • Headings are not top level. They are wrapped in some block (DIV) markup. This means for instance that margin between consecutive headings is not merged (i.e. there is more space between consecutive headings in edit mode than in view mode).
  • Lists:
    • Lists are rendered using DIVs and paragraphs, so without using semantic content.
    • Styling BlockNote lists to look like in view mode is a pain. For instance, each top level list item is inside a top level generic block, without any "list" wrapper / grouping, so there's no way to leave some margin after the list... Reproducing the same indentation and type of bullets as in view mode is also a pain because they use custom styled bullets, and we rely on the default browser list indentation.
    • Level 3 square is larger than level 1 dot and level 2 circle.
    • Mixed lists: the bullet style doesn't match what we have in view mode.
  • Images
    • Image references are not resolved. Will be fixed by implementing the required components.
    • A default 512px width is enforced on images that don't specify a width. See https://github.com/TypeCellOS/BlockNote/issues/1600 (requires BlockNote version upgrade).
    • Inline images are not supported.
    • Can't upload a new image: 'No bindings found for service: "AttachmentsService"'.
  • Tables
    • Table header (TH) not detected / generated. Markdown supports header row though https://www.markdownguide.org/extended-syntax/#tables .
    • Table vertical header column not supported by Markdown (without relying to HTML) so it gets messed up on load.
    • You can insert table header row / column though. Is it saved as HTML?
  • Macros
    • Don't execute the macro transformation until we protect the macro transformation.
    • Macro output is not protected. For this reason we don't execute any rendering transformation currently.
  • Extra features
    • How is the checklist saved?
    • How is the code block saved? It seems you can't edit the code block after you insert it.
    • How is two / three columns saved?
  • Features to disable (by default, the user should focus on the content):
    • Text alignment
    • Text color
    • Background color