[Feature] Formatting Toolbar (WYSIWYG Toolbar) for Crepe Editor

[fehmisener]

Initial checklist

• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Problem

Milkdown Crepe Editor currently provides a clean editing experience, but it lacks a visible formatting toolbar (WYSIWYG / rich-text toolbar).
For many users—especially non-technical or first-time users—discoverability of formatting actions (bold, italic, headings, lists, links, code, etc.) is limited without a toolbar.

This creates a usability gap compared to other editors and makes onboarding harder, as users must rely on shortcuts or external UI implementations.

Solution

Introduce an optional built-in formatting toolbar for the Crepe Editor that:

• Displays common formatting actions:

  • Bold, Italic, Strikethrough
  • Headings (H1–H6)
  • Bullet / Ordered lists
  • Blockquote
  • Code / Code block
  • Link
  • Undo / Redo

• Syncs automatically with editor state (active marks/nodes)

• Is configurable:

  • Enable/disable toolbar
  • Choose which buttons appear
  • Horizontal / floating / sticky variants

• Uses Milkdown commands internally to stay consistent with the core architecture

This would significantly improve UX while keeping Crepe’s minimal design philosophy intact.

Alternatives

1. Expose a Toolbar API / Plugin

   • Provide an official toolbar plugin or helper utilities
   • Allows developers to build custom toolbars with less boilerplate

2. Example Toolbar Implementation

   • Add an official example in the docs showing how to build a toolbar for Crepe
   • Include recommended patterns and command bindings

3. Command-to-UI Mapping Helper

   • Provide a helper that maps Milkdown commands to UI state (active/disabled)
   • Makes it easier for frameworks (React/Vue/Svelte) to implement toolbars

[fehmisener]

Many editors (e.g. TipTap, ProseMirror-based editors, Notion-like UIs) include toolbars as a core UX element. Adding this as an optional feature would preserve Crepe’s flexibility while improving accessibility and adoption.

[kinecology]

In case it is of any use, I'm working on a Svelte 4 app that has a Milkdown component in it:

import { Editor, ... } from '@milkdown/core';
// ...	
function editor(dom: any) {
        const MakeEditor = Editor.make()
// ...
<div use:editor on:dblclick={handleDblClickEditor} role="link" tabindex="0" />

My toolbar is built with schadcn-svelte, and I wrote it to sync automatically with editor state; as you can see:

Just FYI, in case it helps I can share code. (It's rough -- my primary work is not in TypeScript.)

[fehmisener]

In case it is of any use, I'm working on a Svelte 4 app that has a Milkdown component in it:

import { Editor, ... } from '@milkdown/core';
// ...	
function editor(dom: any) {
        const MakeEditor = Editor.make()
// ...
<div use:editor on:dblclick={handleDblClickEditor} role="link" tabindex="0" />

My toolbar is built with schadcn-svelte, and I wrote it to sync automatically with editor state; as you can see:

Just FYI, in case it helps I can share code. (It's rough -- my primary work is not in TypeScript.)

Would be nice actually, I can see how you did it and adjust the usage, thanks a lot!

[kinecology]

Ok, I'll get it cleaned up and create a demo repo; give me about a week. (If I get sidetracked, don't hesitate to ping me back.)

[fehmisener]

Ok, I'll get it cleaned up and create a demo repo; give me about a week. (If I get sidetracked, don't hesitate to ping me back.)

Just reminding 😄

[kinecology]

Thanks, sorry. I'm trying to ship a new app and got bogged down.

I'll knock this out tomorrow and post a repo.

[kinecology]

@fehmisener , I managed to extract the code into a Demo of using Milkdown with Svelte 5.

I decided that, while I was at it, I might as well get it to work with Svelte 5 (my codebase is 4).

Let me know if you have any difficulty building it. You might have to initialize shadcn-svelte, but I added all the components (to save time).

(Also, if there are more Milkdown ways of doing things that I did the prose way, let me know.)

Cheers.

[kinecology]

@fehmisener , did you find it helpful?