feat(editor): add format button to codeblock toolbar

apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx

@@ -1,4 +1,4 @@
-import { CKTextEditor, ClassicEditor, EditorWatchdog, PopupEditor, TemplateDefinition,type WatchdogConfig } from "@triliumnext/ckeditor5";
+import { CKTextEditor, ClassicEditor, EditorWatchdog, PopupEditor, TemplateDefinition, type EventInfo, type NotificationShowEventData, type WatchdogConfig } from "@triliumnext/ckeditor5";
 import { DISPLAYABLE_LOCALE_IDS } from "@triliumnext/commons";
 import { HTMLProps, RefObject, useEffect, useImperativeHandle, useRef, useState } from "preact/compat";
 
@@ -25,7 +25,7 @@ interface CKEditorWithWatchdogProps extends Pick<HTMLProps<HTMLDivElement>, "cla
     isClassicEditor?: boolean;
     watchdogRef: RefObject<EditorWatchdog>;
     watchdogConfig?: WatchdogConfig;
-    onNotificationWarning?: (evt: any, data: any) => void;
+    onNotificationWarning?: (evt: EventInfo, data: NotificationShowEventData) => void;
     onWatchdogStateChange?: (watchdog: EditorWatchdog) => void;
     onChange: () => void;
     /** Called upon whenever a new CKEditor instance is initialized, whether it's the first initialization, after a crash or after a config change that requires it (e.g. content language). */

apps/client/src/widgets/type_widgets/text/EditableText.tsx

@@ -1,6 +1,6 @@
 import "./EditableText.css";
 
-import { CKTextEditor, EditorWatchdog, TemplateDefinition } from "@triliumnext/ckeditor5";
+import { CKTextEditor, EditorWatchdog, TemplateDefinition, type EventInfo, type NotificationShowEventData } from "@triliumnext/ckeditor5";
 import { deferred } from "@triliumnext/commons";
 import { RefObject } from "preact";
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
@@ -333,13 +333,13 @@ function useWatchdogCrashHandling() {
     return onWatchdogStateChange;
 }
 
-function onNotificationWarning(data, evt) {
+function onNotificationWarning(evt: EventInfo, data: NotificationShowEventData) {
     const title = data.title;
-    const message = data.message.message;
+    const message = data.message;
 
     if (title && message) {
-        toast.showErrorTitleAndMessage(data.title, data.message.message);
-    } else if (title) {
+        toast.showErrorTitleAndMessage(title, message);
+    } else if (title || message) {
         toast.showError(title || message);
     }
 

package.json

@@ -32,8 +32,8 @@
     "docs:preview": "pnpm http-server site -p 9000",
     "edit-docs:edit-demo": "pnpm run --filter edit-docs edit-demo",
     "test:all": "pnpm test:parallel && pnpm test:sequential",
-    "test:parallel": "pnpm --filter=!server --filter=!ckeditor5-mermaid --filter=!ckeditor5-math --parallel test",
-    "test:sequential": "pnpm --filter=server --filter=ckeditor5-mermaid --filter=ckeditor5-math --sequential test",
+    "test:parallel": "pnpm --filter=!server --filter=!ckeditor5-mermaid --filter=!ckeditor5-math --filter=!@triliumnext/ckeditor5 --parallel test",
+    "test:sequential": "pnpm --filter=server --filter=ckeditor5-mermaid --filter=ckeditor5-math --filter=@triliumnext/ckeditor5 --sequential test",
     "typecheck": "tsc --build",
     "dev:format-check": "eslint -c eslint.format.config.mjs .",
     "dev:format-fix": "eslint -c eslint.format.config.mjs . --fix",

packages/ckeditor5/package.json

@@ -5,6 +5,9 @@
   "private": true,
   "type": "module",
   "main": "./src/index.ts",
+  "scripts": {
+    "test": "vitest"
+  },
   "dependencies": {
     "@triliumnext/commons": "workspace:*",
     "@triliumnext/ckeditor5-admonition": "workspace:*",
@@ -13,7 +16,8 @@
     "@triliumnext/ckeditor5-math": "workspace:*",
     "@triliumnext/ckeditor5-mermaid": "workspace:*",
     "ckeditor5": "47.6.1",
-    "ckeditor5-premium-features": "47.6.1"
+    "ckeditor5-premium-features": "47.6.1",
+    "prettier": "^3.5.3"
   },
   "devDependencies": {
     "@smithy/middleware-retry": "4.4.42",

packages/ckeditor5/src/index.ts

@@ -7,7 +7,7 @@ import { BalloonEditor, DecoupledEditor, FindAndReplaceEditing, FindCommand } fr
 import "./translation_overrides.js";
 export { default as EditorWatchdog } from "./custom_watchdog";
 export { loadPremiumPlugins } from "./plugins.js";
-export type { EditorConfig, MentionFeed, MentionFeedObjectItem, ModelNode, ModelPosition, ModelElement, ModelText, WatchdogConfig, WatchdogState } from "ckeditor5";
+export type { EditorConfig, EventInfo, MentionFeed, MentionFeedObjectItem, ModelNode, ModelPosition, ModelElement, ModelText, NotificationShowEventData, WatchdogConfig, WatchdogState } from "ckeditor5";
 export type { TemplateDefinition } from "ckeditor5-premium-features";
 export { default as buildExtraCommands } from "./extra_slash_commands.js";
 export { default as getCkLocale } from "./i18n.js";

packages/ckeditor5/src/plugins/code_block_toolbar.ts

@@ -1,22 +1,37 @@
-import { BalloonToolbarShowEvent, CodeBlock, Plugin, ViewDocumentFragment, WidgetToolbarRepository, type ViewNode } from "ckeditor5";
+import {
+    CodeBlock,
+    Plugin,
+    ViewDocumentFragment,
+    WidgetToolbarRepository,
+    type ViewNode,
+} from "ckeditor5";
 import CodeBlockLanguageDropdown from "./code_block_language_dropdown";
 import CopyToClipboardButton from "./copy_to_clipboard_button";
+import FormatCodeblockButton from "./format_codeblock/format_codeblock_button";
 
 export default class CodeBlockToolbar extends Plugin {
-
     static get requires() {
-        return [ WidgetToolbarRepository, CodeBlock, CodeBlockLanguageDropdown, CopyToClipboardButton ] as const;
+        return [
+            WidgetToolbarRepository,
+            CodeBlock,
+            CodeBlockLanguageDropdown,
+            CopyToClipboardButton,
+            FormatCodeblockButton,
+        ] as const;
     }
 
     afterInit() {
         const editor = this.editor;
-        const widgetToolbarRepository = editor.plugins.get(WidgetToolbarRepository);
+        const widgetToolbarRepository = editor.plugins.get(
+            WidgetToolbarRepository,
+        );
 
         widgetToolbarRepository.register("codeblock", {
             items: [
                 "codeBlockDropdown",
                 "|",
-                "copyToClipboard"
+                "copyToClipboard",
+                "formatCodeblock",
             ],
             balloonClassName: "ck-toolbar-container codeblock-language-list",
             getRelatedElement(selection) {
@@ -25,7 +40,8 @@ export default class CodeBlockToolbar extends Plugin {
                     return null;
                 }
 
-                let parent: ViewNode | ViewDocumentFragment | null = selectionPosition.parent;
+                let parent: ViewNode | ViewDocumentFragment | null =
+                    selectionPosition.parent;
                 while (parent) {
                     if (parent.is("element", "pre")) {
                         return parent;
@@ -35,20 +51,26 @@ export default class CodeBlockToolbar extends Plugin {
                 }
 
                 return null;
-            }
+            },
         });
 
         // Hide balloon toolbar when in a code block
         if (editor.plugins.has("BalloonToolbar")) {
-            editor.listenTo(editor.plugins.get('BalloonToolbar'), 'show', (evt) => {
-                const firstPosition = editor.model.document.selection.getFirstPosition();
-                const isInCodeBlock = firstPosition?.findAncestor('codeBlock');
+            editor.listenTo(
+                editor.plugins.get("BalloonToolbar"),
+                "show",
+                (evt) => {
+                    const firstPosition =
+                        editor.model.document.selection.getFirstPosition();
+                    const isInCodeBlock =
+                        firstPosition?.findAncestor("codeBlock");
 
-                if (isInCodeBlock) {
-                    evt.stop(); // Prevent the balloon toolbar from showing
-                }
-            }, { priority: 'high' });
+                    if (isInCodeBlock) {
+                        evt.stop(); // Prevent the balloon toolbar from showing
+                    }
+                },
+                { priority: "high" },
+            );
         }
     }
-
 }

packages/ckeditor5/src/plugins/format_codeblock/code_formatter.ts

@@ -0,0 +1,29 @@
+export interface CodeFormatter {
+    readonly name: string;
+    canFormat(language: string): boolean;
+    format(code: string, language: string): Promise<string>;
+}
+
+export class FormatterRegistry {
+    private static instance: FormatterRegistry | null = null;
+    private readonly formatters: CodeFormatter[] = [];
+
+    static getInstance(): FormatterRegistry {
+        if (!FormatterRegistry.instance) {
+            FormatterRegistry.instance = new FormatterRegistry();
+        }
+        return FormatterRegistry.instance;
+    }
+
+    register(formatter: CodeFormatter): void {
+        this.formatters.push(formatter);
+    }
+
+    getFormatterForLanguage(language: string): CodeFormatter | undefined {
+        return this.formatters.find((f) => f.canFormat(language));
+    }
+
+    isLanguageSupported(language: string): boolean {
+        return this.formatters.some((f) => f.canFormat(language));
+    }
+}

packages/ckeditor5/src/plugins/format_codeblock/format_codeblock_button.ts

@@ -0,0 +1,42 @@
+import { ButtonView, Notification, Plugin } from "ckeditor5";
+import formatIcon from "../../icons/format-codeblock.svg?raw";
+import { FormatterRegistry } from "./code_formatter";
+import { FormatCodeblockCommand } from "./format_codeblock_command";
+import { PrettierFormatter } from "./prettier_formatter";
+
+export default class FormatCodeblockButton extends Plugin {
+    static get requires() {
+        return [Notification];
+    }
+
+    public init() {
+        const editor = this.editor;
+
+        const registry = FormatterRegistry.getInstance();
+        registry.register(new PrettierFormatter());
+
+        editor.commands.add(
+            "formatCodeblock",
+            new FormatCodeblockCommand(this.editor),
+        );
+
+        const componentFactory = editor.ui.componentFactory;
+        componentFactory.add("formatCodeblock", (locale) => {
+            const button = new ButtonView(locale);
+            const command = editor.commands.get("formatCodeblock")!;
+
+            button.set({
+                tooltip: "Format code block",
+                icon: formatIcon,
+            });
+
+            button.bind("isEnabled").to(command, "isEnabled");
+
+            this.listenTo(button, "execute", () => {
+                editor.execute("formatCodeblock");
+            });
+
+            return button;
+        });
+    }
+}

packages/ckeditor5/src/plugins/format_codeblock/format_codeblock_command.ts

@@ -0,0 +1,97 @@
+import { Command, ModelElement, Notification } from "ckeditor5";
+import { FormatterRegistry } from "./code_formatter";
+
+export class FormatCodeblockCommand extends Command {
+    declare value: string | false;
+
+    override refresh() {
+        const codeBlockCommand = this.editor.commands.get("codeBlock");
+        const language = codeBlockCommand?.value;
+        const registry = FormatterRegistry.getInstance();
+
+        if (
+            typeof language === "string" &&
+            registry.isLanguageSupported(language)
+        ) {
+            this.isEnabled = true;
+            this.value = language;
+        } else {
+            this.isEnabled = false;
+            this.value = false;
+        }
+    }
+
+    override execute() {
+        const editor = this.editor;
+        const model = editor.model;
+        const selection = model.document.selection;
+        const notification = editor.plugins.get(Notification);
+        const t = editor.locale.t;
+
+        const language = this.value;
+        if (!language) {
+            return;
+        }
+
+        const registry = FormatterRegistry.getInstance();
+        const formatter = registry.getFormatterForLanguage(language);
+        if (!formatter) {
+            return;
+        }
+
+        const codeBlockEl = selection
+            .getFirstPosition()
+            ?.findAncestor("codeBlock");
+        if (!codeBlockEl) {
+            notification.showWarning(
+                t("Unable to find code block element to format."),
+                {
+                    namespace: "formatCodeblock",
+                },
+            );
+            return;
+        }
+
+        const codeText = this.extractCodeText(codeBlockEl);
+
+        if (!codeText) {
+            return;
+        }
+
+        formatter
+            .format(codeText, language)
+            .then((formatted) => {
+                if (formatted === codeText) {
+                    return;
+                }
+
+                model.change((writer) => {
+                    const range = writer.createRangeIn(codeBlockEl);
+                    writer.remove(range);
+                    const lines = formatted.split("\n");
+                    for (let i = 0; i < lines.length; i++) {
+                        if (i > 0) {
+                            writer.appendElement("softBreak", codeBlockEl);
+                        }
+                        if (lines[i]) {
+                            writer.appendText(lines[i], codeBlockEl);
+                        }
+                    }
+                });
+            })
+            .catch((err) => {
+                notification.showWarning(err.message || String(err), {
+                    title: t(
+                        `Failed to format code block with ${formatter.name}`,
+                    ),
+                    namespace: "formatCodeblock",
+                });
+            });
+    }
+
+    private extractCodeText(codeBlockEl: ModelElement): string {
+        return Array.from(codeBlockEl.getChildren())
+            .map((child) => ("data" in child ? child.data : "\n"))
+            .join("");
+    }
+}

packages/ckeditor5/src/plugins/format_codeblock/languages.ts

@@ -0,0 +1,17 @@
+export const LANG_JAVASCRIPT_FRONTEND = "application-javascript-env-frontend";
+export const LANG_JAVASCRIPT_BACKEND = "application-javascript-env-backend";
+export const LANG_TYPESCRIPT = "application-typescript";
+export const LANG_TYPESCRIPT_JSX = "text-typescript-jsx";
+export const LANG_JSX = "text-jsx";
+export const LANG_JSON = "application-json";
+export const LANG_YAML = "text-x-yaml";
+export const LANG_GRAPHQL = "text-x-graphql";
+export const LANG_HTML = "text-html";
+export const LANG_XML = "text-xml";
+export const LANG_MARKDOWN = "text-x-markdown";
+export const LANG_CSS = "text-css";
+export const LANG_LESS = "text-x-less";
+export const LANG_SCSS = "text-x-scss";
+export const LANG_PYTHON = "text-x-python";
+export const LANG_RUST = "text-x-rustsrc";
+export const LANG_C = "text-x-csrc";