Make the code macro editable in-place in BlockNote

Issue created

Marius Dumitru Florea created this issue on 08/Oct/26 10:24

Summary:	Make the code macro editable in-place in BlockNote
Issue Type:	New Feature
Affects Versions:	18.8.0
Assignee:	Unassigned
Components:	BlockNote
Created:	08/Oct/26 10:24
Priority:	Major
Reporter:	Marius Dumitru Florea
Description:	Currently the BlockNote editor displays the `code` macro calls like any other macro call: the macro output is read-only and the code can be modified only through the macro edit dialog. The code macro calls should be edited in-place, as BlockNote code blocks, with syntax highlighting and a language selector: the `language` parameter is mapped to the language of the code block, and the other macro parameters (e.g. `layout`) are preserved on save; new code blocks are saved as code macro calls, while the code blocks that come from verbatim blocks ({{{{`...`}}}}) are still saved as verbatim blocks; code macro calls that are inline or that take the code from a different source (the `source` parameter) remain read-only macro calls; the code blocks look the same in edit mode as the code macro output in view mode.

Changes by Marius Dumitru Florea on 08/Oct/26 10:25

Fix Version:	18.9.0-rc-1
Description:	Currently the BlockNote editor displays the {{code}} macro calls like any other macro call: the macro output is read-only and the code can be modified only through the macro edit dialog. The code macro calls should be edited in-place, as BlockNote code blocks, with syntax highlighting and a language selector: * the {{language}} parameter is mapped to the language of the code block, and the other macro parameters (e.g. {{layout}}) are preserved on save; * new code blocks are saved as code macro calls, while the code blocks that come from verbatim blocks ({{ \ { \ { \ { { ... \ } \ } \ }}} } ) are still saved as verbatim blocks; * code macro calls that are inline or that take the code from a different source (the {{source}} parameter) remain read-only macro calls; * the code blocks look the same in edit mode as the code macro output in view mode.
Assignee:	Marius Dumitru Florea
Resolution:	Fixed
Tests:	Integration
Status:	Open Closed

Marius Dumitru Florea on 08/Oct/26 10:25

Summary of the changes:

XWiki Rendering (xwiki-rendering-syntax-blocknote)

New (unstable) component role org.xwiki.rendering.blocknote.BlockNoteMacroConverter, with the macro id as hint, that converts the calls of a macro to a dedicated BlockNote block and back. The conversion works on the generic macro block JSON (xwikiMacroBlock / xwikiInlineMacro): the renderer replaces the macro block with the block returned by the converter (the macro output is discarded) and the parser converts the block back to a macro block before parsing it. XWiki extensions can use it to map the macros they provide to custom BlockNote blocks.
Code blocks produced from verbatim blocks are marked with xwikiVerbatim: true so that they are saved back as verbatim blocks.
The new line at the start and at the end of the verbatim content is not displayed in the code block, like in view mode (the browser ignores them inside a pre element). The xwikiLeadingNewLine / xwikiTrailingNewLine code block properties remember whether they were present, so the round-trip is lossless.

XWiki Platform

CodeMacroBlockNoteConverter maps the code macro calls to BlockNote code blocks: the language parameter is mapped to the code block language and the other parameters (e.g. layout) are kept in xwikiParameters. Inline code macro calls and those using the source parameter are not converted. Code blocks are saved as code macro calls, unless they come from verbatim blocks. Code blocks without language are saved without the language parameter (the code macro detects the language), while an explicit language="text" is preserved.
The BlockNote code blocks have syntax highlighting and a language selector; languages not supported by the language selector are preserved.
The code blocks are styled like the code macro output in view mode, using the same CSS classes (box code), passed through the new codeBlockClassName option of the BlockNote editor.
The editor backs up the new code block metadata (xwikiVerbatim, xwikiLeadingNewLine, xwikiTrailingNewLine) while editing.
BlockNote doesn't support line numbers in code blocks, so the layout parameter is preserved but has no effect in edit mode.

This message was sent by Atlassian Jira (v9.3.0#930000-sha1:287aeb6)

If image attachments aren't displayed, see this article.