feat(editor): add format button to codeblock toolbar by giuxtaposition · Pull Request #9076 · TriliumNext/Trilium

giuxtaposition · 2026-03-16T14:33:34Z

No description provided.

gemini-code-assist · 2026-03-16T14:33:55Z

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a significant enhancement to the CKEditor5 code block functionality by adding an integrated code formatting button. This feature leverages Prettier to automatically format code within code blocks, improving code readability and consistency directly within the editor. The implementation includes new plugins, commands, and configuration to support various programming and markup languages, making the code editing experience more robust and user-friendly.

Highlights

New Feature: Code Block Formatting: A new 'Format code block' button has been added to the code block toolbar in CKEditor5, allowing users to automatically format code within the editor.
Prettier Integration: The formatting functionality is powered by Prettier, dynamically loading its plugins based on the detected code block language.
Language Support: The feature supports a wide range of languages including JavaScript, TypeScript, JSON, CSS, SCSS, LESS, HTML, XML, YAML, Markdown, GraphQL, JSX, and TSX.
Toolbar Enhancement: The CodeBlockToolbar has been updated to include the new format button, enhancing the usability of code blocks.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

packages/ckeditor5/package.json
- Added 'prettier' as a new production dependency.
packages/ckeditor5/src/icons/format-codeblock.svg
- Added a new SVG icon for the 'Format code block' button.
packages/ckeditor5/src/plugins/code_block_toolbar.ts
- Imported and registered the new FormatCodeblockButton plugin.
- Added 'formatCodeblock' to the list of items in the code block toolbar.
packages/ckeditor5/src/plugins/format_codeblock/format_codeblock_button.ts
- Created a new plugin to define and register the 'formatCodeblock' command and its corresponding UI button.
- Configured the button with a tooltip and the new format icon.
packages/ckeditor5/src/plugins/format_codeblock/format_codeblock_command.ts
- Implemented a new command responsible for executing the code formatting logic.
- Integrated Prettier to format the code block content, dynamically loading necessary plugins.
- Added logic to determine command enablement based on supported languages and current selection.
- Included helper methods to extract and update code block text within the editor model.
packages/ckeditor5/src/plugins/format_codeblock/languages_config.ts
- Introduced utility functions to map CKEditor5 code block languages to appropriate Prettier parsers.
- Provided a mechanism to dynamically import Prettier plugins based on the language.
- Defined a list of statically supported languages for formatting.
packages/ckeditor5/tests/format_codeblock_button.ts
- Added comprehensive unit tests for the FormatCodeblockButton and FormatCodeblockCommand.
- Verified plugin registration, command enablement for supported/unsupported languages, and correct formatting for various code types (JavaScript, JSON, CSS, TypeScript, YAML).
- Included tests for edge cases like already-formatted, empty, or whitespace-only code blocks.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces a new 'Format' button to the code block toolbar, leveraging Prettier to format code snippets within the editor. The implementation is well-structured, making good use of dynamic imports for performance and including a comprehensive set of tests. My feedback focuses on a couple of areas for improvement: refining the code extraction logic to better preserve user-inputted formatting, and a refactoring opportunity in the language configuration to enhance maintainability by reducing code duplication.

giuxtaposition · 2026-03-16T16:04:06Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces a new feature to format code blocks within the editor, leveraging Prettier for various languages. The implementation includes a FormatterRegistry for managing different formatters, a FormatCodeblockCommand to execute the formatting logic, and a UI button to trigger the action. The changes are well-structured, integrate smoothly with the existing CKEditor 5 architecture, and are accompanied by comprehensive unit tests, ensuring the reliability and correctness of the new functionality.

giuxtaposition · 2026-03-16T16:31:01Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces a new 'Format' button for code blocks in the editor, leveraging Prettier.js for code formatting. The implementation is well-structured, using a plugin architecture with a command, a singleton registry for formatters, and dynamic imports for Prettier plugins to optimize bundle size. The changes also include comprehensive unit tests. My review includes a few suggestions to improve correctness and robustness, particularly regarding XML formatting, text extraction logic to prevent re-runs, and test stability.

giuxtaposition · 2026-03-16T17:14:40Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces a new feature to format code blocks within the CKEditor5 instance, leveraging Prettier for various languages. The implementation includes a new FormatCodeblockButton plugin, a FormatCodeblockCommand, and a FormatterRegistry to manage different code formatters. New SVG icons and language constants are also added. The changes are well-tested with comprehensive unit tests covering various scenarios, including supported/unsupported languages and different code types.

…rs in the future

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

… button test Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

…s more complex than I thought

…lback and add types The CKEditor notification warning handler had its parameters reversed (data, evt) instead of (evt, data), causing it to read title/message from EventInfo and call .stop() on NotificationShowEventData. Added proper types (EventInfo, NotificationShowEventData) to prevent future regressions.

…nning test commands

giuxtaposition · 2026-03-16T19:56:54Z

@eliandoran Sorry for the many PRs! I recently migrated my notes to Trilium and have been adding a few features I missed from my previous setup lol

There is currently a failing test. I’m not sure if it ever passed, since the ckeditor5 package tests weren’t being run before my changes. Let me know if I need to fix it or delete it.

For the code formatter, I followed a strategy pattern so we can easily add additional formatters alongside Prettier in the future!

eliandoran

Seems promising, but before this can be merged we need to:

On my side: Check the impact on the delivery size. I will trigger a nightly build to see if the size increase is acceptable.
On your side: Handling the actual formatting should not be the responsibility of the CKEditor plugin. The reasoning is that we might want to introduce the same for code notes, not just code blocks (or even different editors if we ever get to that). So move the formatting part into the client and provide an API to determine if formatting is enabled.
Documentation also need to be updated to reflect this feature. A general mention of what languages are supported and what not and that it doesn't work if the language is set to auto.

- add missing Template plugin from ckeditor5-premium-features - add afterEach cleanup to destroy editor and remove DOM element - fix TypeScript error by replacing optional chaining with non-null assertion on toolbar

…instead of a ckeditor5 plugin

…nt phantom softBreak

…erations when pressing format button many times

…ndant wrapper

…ng falsiness

…ted button tests

…roperty shorthand

giuxtaposition · 2026-03-20T18:33:55Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces a code formatting feature for code blocks in the editor, powered by Prettier. The implementation is well-structured, with a clear separation between the generic formatter registry and the Prettier-specific implementation. The new CKEditor plugin, command, and button are correctly integrated, and the feature is well-tested and documented. I've found a significant issue with how Prettier plugins are being dynamically imported, which would likely prevent the feature from working. My review includes suggestions to fix this.

giuxtaposition · 2026-03-20T19:01:54Z

I've found a significant issue with how Prettier plugins are being dynamically imported, which would likely prevent the feature from working. My review includes suggestions to fix this.

Prettier's ESM plugins explicitly re-export everything as named exports

…lock-button

gemini-code-assist bot reviewed Mar 16, 2026

View reviewed changes

Comment thread packages/ckeditor5/src/plugins/format_codeblock/format_codeblock_command.ts Outdated

Comment thread packages/ckeditor5/src/plugins/format_codeblock/languages_config.ts Outdated

gemini-code-assist bot reviewed Mar 16, 2026

View reviewed changes

Comment thread packages/ckeditor5/src/plugins/format_codeblock/prettier_formatter.ts Outdated

gemini-code-assist bot reviewed Mar 16, 2026

View reviewed changes

Comment thread packages/ckeditor5/src/plugins/format_codeblock/prettier_formatter.ts Outdated

Comment thread packages/ckeditor5/src/plugins/format_codeblock/format_codeblock_command.ts Outdated

Comment thread packages/ckeditor5/tests/format_codeblock_button.test.ts Outdated

gemini-code-assist bot reviewed Mar 16, 2026

View reviewed changes

giuxtaposition and others added 8 commits March 16, 2026 19:21

feat(editor): add format button to codeblock toolbar

108d8bc

refactor(editor): add formatter registry to support multiple formatte…

0c6482a

…rs in the future

feat(editor): make PrettierParserConfig plugins type stricter

aa09d0c

fix(editor): remove unnecessary trim in extract code text

fb49152

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

fix(editor): use vi.waitFor instead of setTimeout in format codeblock…

24af153

… button test Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

fix(editor): remove XML from supported languages for prettier as it i…

ad5ca36

…s more complex than I thought

fix(editor): gemini suggestion adding double join

1b638fd

giuxtaposition force-pushed the feat/add-format-codeblock-button branch from 8bed3a1 to 47becfb Compare March 16, 2026 18:21

giuxtaposition added 2 commits March 16, 2026 19:45

feat(editor): show notification toast when code formatting fails

20fa962

test(editor): fix format codeblock tests not actually running when ru…

09fd1bd

…nning test commands

giuxtaposition force-pushed the feat/add-format-codeblock-button branch from 47becfb to 09fd1bd Compare March 16, 2026 19:36

giuxtaposition marked this pull request as ready for review March 16, 2026 19:44

dosubot bot added the size:XL This PR changes 500-999 lines, ignoring generated files. label Mar 16, 2026

eliandoran requested changes Mar 19, 2026

View reviewed changes

eliandoran marked this pull request as draft March 19, 2026 18:10

eliandoran and others added 3 commits March 19, 2026 20:11

Merge branch 'main' into feat/add-format-codeblock-button

64f921a

Merge branch 'main' into feat/add-format-codeblock-button

f111468

test(ckeditor5): fix templates translation test

1dcb400

- add missing Template plugin from ckeditor5-premium-features - add afterEach cleanup to destroy editor and remove DOM element - fix TypeScript error by replacing optional chaining with non-null assertion on toolbar

giuxtaposition force-pushed the feat/add-format-codeblock-button branch from d128706 to 1f333b8 Compare March 20, 2026 11:37

refactor(ckeditor5): move actual code formatting logic in the client …

16fe432

…instead of a ckeditor5 plugin

giuxtaposition force-pushed the feat/add-format-codeblock-button branch from 1f333b8 to 16fe432 Compare March 20, 2026 11:46

eliandoran added merge-conflicts and removed merge-conflicts labels Mar 20, 2026

Merge branch 'main' into feat/add-format-codeblock-button

e5d7245

giuxtaposition force-pushed the feat/add-format-codeblock-button branch from 2b5f187 to e5d7245 Compare March 20, 2026 11:52

giuxtaposition added 7 commits March 20, 2026 15:46

refactor(ckeditor5): move code formatting execution to client

2a81162

fix(ckeditor5): strip trailing newline from formatted output to preve…

ced8142

…nt phantom softBreak

fix(ckeditor5): add re-entrance guard to prevent concurrent format op…

93a5536

…erations when pressing format button many times

refactor(ckeditor5): extract CodeFormatterConfig type and remove redu…

d9a2ab5

…ndant wrapper

fix(editor): simplify onNotificationWarning to not rely on empty-stri…

f369f16

…ng falsiness

test(editor): add FormatterRegistry.format() tests and remove duplica…

48fb69e

…ted button tests

refactor(editor): simplify PrettierFormatter error handling and use p…

6d49adc

…roperty shorthand

giuxtaposition force-pushed the feat/add-format-codeblock-button branch from d284128 to ff0028a Compare March 20, 2026 18:05

docs: add section about format code block

813c7a5

giuxtaposition force-pushed the feat/add-format-codeblock-button branch from ff0028a to 813c7a5 Compare March 20, 2026 18:23

gemini-code-assist bot reviewed Mar 20, 2026

View reviewed changes

Comment thread apps/client/src/services/prettier_formatter.ts

Comment thread apps/client/src/services/prettier_formatter.ts

Comment thread apps/client/src/services/prettier_formatter.ts

giuxtaposition marked this pull request as ready for review March 20, 2026 19:02

dosubot bot added size:XXL This PR changes 1000+ lines, ignoring generated files. and removed size:XL This PR changes 500-999 lines, ignoring generated files. labels Mar 20, 2026

giuxtaposition added 2 commits March 21, 2026 09:35

Merge branch 'main' into feat/add-format-codeblock-button

0db3bb2

Merge branch 'main' into feat/add-format-codeblock-button

6cb611d

giuxtaposition requested a review from eliandoran March 23, 2026 10:42

eliandoran added the merge-conflicts label Mar 31, 2026

Merge remote-tracking branch 'origin/main' into feat/add-format-codeb…

5c7f502

…lock-button

eliandoran removed the merge-conflicts label Apr 9, 2026

Uh oh!

Conversation

giuxtaposition commented Mar 16, 2026

Uh oh!

gemini-code-assist bot commented Mar 16, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

giuxtaposition commented Mar 16, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

giuxtaposition commented Mar 16, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

giuxtaposition commented Mar 16, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

giuxtaposition commented Mar 16, 2026

Uh oh!

eliandoran left a comment

Choose a reason for hiding this comment

Uh oh!

giuxtaposition commented Mar 20, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

giuxtaposition commented Mar 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants