Rich text markdown editor

[GAsplund]

Key Features

• Add rich text markdown editor through Milkdown
• Includes a source editing and preview mode

Known Issues

• You cannot use the mouse cursor to select text in an image upload pane. Keyboard shortcuts only.
• Some buttons have subpar contrast

Screenshots

[Copilot]

Pull Request Overview

This PR introduces a rich text markdown editor using Milkdown, replacing the previous plain textarea-based markdown editor. The new editor provides a WYSIWYG interface with toolbar controls for formatting, along with source editing and preview modes.

Key changes:

• Integrated Milkdown library for rich text editing with markdown support
• Refactored MarkdownEditor component to include toolbar, WYSIWYG, raw markdown, and preview modes
• Updated all form components to use refs instead of state for retrieving markdown content
• Enhanced file upload functionality to automatically embed images vs. link other file types

Reviewed Changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
package.json	Added Milkdown dependencies (@milkdown/kit, @milkdown/react, @milkdown/utils)
src/services/fileService.ts	Added isMimeEmbeddable method to determine if a file should be embedded as an image
src/dictionaries/en.json	Added translations for new editor UI elements (formatting options, view modes)
src/dictionaries/sv.json	Added Swedish translations for new editor UI elements
src/components/MarkdownEditor/MarkdownEditor.tsx	Complete rewrite to implement Milkdown-based rich text editor with toolbar and multiple view modes
src/components/MarkdownEditor/MarkdownEditor.module.scss	Added comprehensive styling for toolbar, editor modes, and Milkdown components
src/components/PageForm/PageForm.tsx	Updated to use new MarkdownEditor API with refs; removed preview popup
src/components/NewsPostForm/NewsPostForm.tsx	Updated to use new MarkdownEditor API with refs; removed preview popup
src/components/DivisionPageForm/DivisionPageForm.tsx	Updated to use new MarkdownEditor API with refs; removed preview popup

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The hidden attribute should be set to true when group === '' to hide the placeholder option once a selection is made. The current logic is inverted - it hides the option when a group IS selected, but shows it when empty, which is the opposite of the typical pattern for placeholder options.

[Sus-H]

Looks beautiful, however I am having some issues with the link button. It worked the first time i tried it and then for some reason nothing happened when I clicked it. Attaching image with console in case it helps.

Also, when editing a long text, it would be nice if the toolbar was always visible, because i need to scroll up in case I need to use something from it.

[GAsplund]

Looks beautiful, however I am having some issues with the link button. It worked the first time i tried it and then for some reason nothing happened when I clicked it. Attaching image with console in case it helps.

Also, when editing a long text, it would be nice if the toolbar was always visible, because i need to scroll up in case I need to use something from it.

Are you talking about the fact that clicking the link button without any text selected does nothing? I think I could add some default behavior for that to make it always behave as expected.

I'll look into fixing the toolbar. Thanks for the feedback!

[Sus-H]

Ohhh yeah sorry, I forgot it worked that way. hmm...

[Sus-H]

Something his happening when I try to make a list by typing dash and then space as well, the dash disappears sometimes

Recording.2025-10-14.185430.mp4

[Sus-H]

Another feedback, WYSIWYG for the different heading sizes would be nice!

Sorry for spam

[Sus-H]

Another issue: I just clicked the richtext button (when it was already selected) and all my content disappeared.

It seems like clicking it while its already selected removes the content, it was possible to undo it unless you selected another view.

[Sus-H]

Another thing: I'm suspecting its the empty file upload and something else, but yeah, but they show as "1.00" in the preview mode which can be a bit confusing. edit: Oh I can see its the link text when i look in markdown view.

[GAsplund]

Responding to all your points here:

• I've changed the link button to create a text field with "text", on which it adds a new link as if you selected it
• Bullet points seem like a CSS issue. I've tried to make the CSS consistent between the editor and preview and it is almost identical to it now from my testing
• It seems like you'd need to make a custom drop-down renderer in order to be able to do custom CSS on options. The options themselves are apparently rendered natively by the OS itself
• It seems like content is only removed when clicking it after not having previously selected anything. I've changed the logic to do nothing if you try to switch from one mode to itself which seemed to fix it.
• I'm unable to reproduce images showing in WYSIWYG but not preview. Any local images show fine for me. However, I've found the preview in WYSIWYG to be a bit spotty for local images at times. Will look further into it!