feat(editor): add rich text editor toolbar by jpzwarte · Pull Request #3173 · sl-design-system/components

jpzwarte · 2026-04-03T20:31:58Z

Add <sl-editor-toolbar> component that renders a formatting toolbar
inside <sl-editor> using <sl-tool-bar> and <sl-button>.

Toolbar groups:

Text marks: Bold, Italic, Underline, Strikethrough, Inline code
Block formats: Blockquote, Heading 1–3
Lists: Bullet list, Ordered list
History: Undo, Redo (disabled when unavailable)

Buttons reflect the current editor selection state via aria-pressed
and fill="outline" when active. The toolbar is schema-aware — buttons
only render when the corresponding mark/node is in the editor schema.

Set toolbar=false on <sl-editor> to hide the toolbar.

https://claude.ai/code/session_01D6g9VibYCJSMMmMp1y5qgm

Add `<sl-editor-toolbar>` component that renders a formatting toolbar inside `<sl-editor>` using `<sl-tool-bar>` and `<sl-button>`. Toolbar groups: - Text marks: Bold, Italic, Underline, Strikethrough, Inline code - Block formats: Blockquote, Heading 1–3 - Lists: Bullet list, Ordered list - History: Undo, Redo (disabled when unavailable) Buttons reflect the current editor selection state via `aria-pressed` and `fill="outline"` when active. The toolbar is schema-aware — buttons only render when the corresponding mark/node is in the editor schema. Set `toolbar=false` on `<sl-editor>` to hide the toolbar. https://claude.ai/code/session_01D6g9VibYCJSMMmMp1y5qgm

changeset-bot · 2026-04-03T20:32:03Z

🦋 Changeset detected

Latest commit: 4c9b235

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package "@sl-design-system/grid" depends on the ignored package "@sl-design-system/example-data", but "@sl-design-system/grid" is not being ignored. Please add "@sl-design-system/grid" to the `ignore` option.

Copilot

Pull request overview

Adds a new rich text editor toolbar component (<sl-editor-toolbar>) and integrates it into <sl-editor> (enabled by default, hideable via toolbar=false) to expose common formatting actions that reflect selection state.

Changes:

Introduces <sl-editor-toolbar> built on <sl-tool-bar>/<sl-button> with schema-aware button rendering and undo/redo support.
Integrates the toolbar into <sl-editor> and adds a toolbar boolean property to toggle visibility.
Adds styling, Storybook controls/stories, registration/exports, and a new spec file for the toolbar.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/components/editor/src/editor.ts	Adds toolbar integration, scoped element registration, and transaction-to-toolbar state syncing.
packages/components/editor/src/editor.stories.ts	Adds a `toolbar` control and new stories (NoToolbar/Empty), refactors sample content.
packages/components/editor/src/editor.scss	Updates layout to accommodate toolbar above the editor mount.
packages/components/editor/src/editor-toolbar.ts	New toolbar component implementing formatting actions and active-state UI.
packages/components/editor/src/editor-toolbar.spec.ts	New tests covering rendering, disabled/hidden states, and basic interactions.
packages/components/editor/src/editor-toolbar.scss	Adds toolbar border/padding styling.
packages/components/editor/register.ts	Registers `sl-editor-toolbar` alongside `sl-editor`.
packages/components/editor/package.json	Adds dependencies needed by the toolbar and scoped elements usage.
packages/components/editor/index.ts	Exports the new toolbar class.
.changeset/add-editor-toolbar.md	Documents the new toolbar feature and API surface.

Copilot · 2026-04-03T20:39:02Z

  override firstUpdated(): void {
    this.view ??= this.createEditor();
+
+    if (this.toolbarElement) {
+      this.toolbarElement.view = this.view;
+    }
  }


If toolbar is initially false and later toggled to true, the newly-rendered <sl-editor-toolbar> never receives view, so it will render without any schema/buttons and won’t sync state. Consider setting toolbarElement.view = this.view whenever the toolbar is (re)created (e.g. in updated() when toolbar changes or when toolbarElement becomes defined), not only in firstUpdated().

Copilot · 2026-04-03T20:39:02Z

+  #isNodeActive(nodeType: NodeType, attrs?: Record<string, unknown>): boolean {
+    const state = this.view?.state;
+    if (!state || !nodeType) return false;
+
+    const { from, to } = state.selection;
+    let found = false;
+
+    state.doc.nodesBetween(from, to, (node: PMNode) => {
+      if (node.type === nodeType) {
+        if (!attrs || Object.entries(attrs).every(([key, val]) => node.attrs[key] === val)) {
+          found = true;
+        }
+      }
+    });
+
+    return found;


#isNodeActive() relies on state.doc.nodesBetween(from, to, ...). For a collapsed selection (from === to), nodesBetween won’t visit any nodes, which means node-based formats (blockquote/headings/lists) will never be reported as active when the cursor is inside them. Handle state.selection.empty explicitly (e.g. inspect $from.parent / ancestor chain) so active state works without requiring a range selection.

…nly with tooltips Registers custom Lucide-style SVG icons (editor-bold, editor-italic, editor-underline, editor-strikethrough) and renders them via sl-icon inside sl-button. The tooltip directive provides accessible labels via aria-labelledby. Adds @sl-design-system/icon and @sl-design-system/tooltip as dependencies. https://claude.ai/code/session_01D6g9VibYCJSMMmMp1y5qgm

github-actions · 2026-04-04T07:20:54Z

🕸 Website preview

You can view a preview here (commit 4c9b235141172dcbdf3c6af5e67b118fc9992a45).

Copilot

Pull request overview

Copilot reviewed 10 out of 11 changed files in this pull request and generated 2 comments.

Copilot · 2026-04-04T07:23:32Z

    const editor = new EditorView(
      { mount },
      {
        state,
-        dispatchTransaction: function (tr) {
-          // `this` is bound to the view instance.
-          (this as unknown as EditorView).updateState(this.state.apply(tr));
+        dispatchTransaction: (tr) => {
+          editor.updateState(editor.state.apply(tr));
+
+          // Notify toolbar so it can sync active-state of buttons
+          if (this.toolbarElement) {
+            this.toolbarElement.editorState = editor.state;
+          }
        }


dispatchTransaction closes over editor while editor is still being constructed. If ProseMirror (or a plugin) dispatches during new EditorView(...), this can hit the TDZ and throw at runtime. Prefer the previous pattern that uses function (tr) { /* this bound to view */ }, or assign the view to a let first and reference that from the callback.

Copilot · 2026-04-04T07:23:32Z

  @property({ attribute: false }) plugins?: Plugin[];

+  /** Whether to show the formatting toolbar. Defaults to true. */
+  @property({ type: Boolean }) toolbar = true;


toolbar is implemented as a Boolean attribute/property, but in HTML an attribute like toolbar="false" is still treated as truthy by Lit’s Boolean converter. If the intended API is to support toolbar=false (as mentioned in the PR description), you’ll need a custom converter (e.g. treat the string "false" as false) or switch to an inverted attribute such as no-toolbar. Otherwise, please update docs/examples to use property binding (e.g. .toolbar=${false}) and avoid implying toolbar="false" works.

Suggested change

@property({ type: Boolean }) toolbar = true;

@property({

converter: {

fromAttribute: (value: string | null) => value !== null && value.toLowerCase() !== 'false'

}

})

toolbar = true;

Copilot

Pull request overview

Copilot reviewed 10 out of 11 changed files in this pull request and generated 4 comments.

Copilot · 2026-04-07T07:17:29Z

+  #isNodeActive(nodeType: NodeType, attrs?: Record<string, unknown>): boolean {
+    const state = this.view?.state;
+    if (!state || !nodeType) return false;
+
+    const { from, to } = state.selection;
+    let found = false;
+
+    state.doc.nodesBetween(from, to, (node: PMNode) => {
+      if (node.type === nodeType) {
+        if (!attrs || Object.entries(attrs).every(([key, val]) => node.attrs[key] === val)) {
+          found = true;
+        }
+      }
+    });
+
+    return found;
+  }


#isNodeActive() uses doc.nodesBetween(from, to, ...) which will not visit any nodes for an empty (cursor) selection (from === to). This makes block-level buttons (blockquote/headings/lists) never show as active for the common cursor case, and can also cause toggle logic to behave incorrectly. Handle the empty-selection case by checking the selection’s $from.parent / $from.node(...) chain (and matching attrs), or use a helper that detects the current block type at the cursor position.

Copilot · 2026-04-07T07:17:30Z

+          lift(state, view.dispatch);
+        } else {
+          wrapIn(schema.nodes.blockquote)(state, view.dispatch);


The Blockquote action uses wrapIn(schema.nodes.blockquote) (and lift to undo), but the editor schema defines blockquote with content: 'inline*' (a textblock), so wrapping a paragraph selection in a blockquote is typically not applicable and the command will no-op. If blockquote is intended as a block format (per PR description), either change the schema so blockquote can wrap blocks (e.g. content: 'block+') or switch the command to setBlockType(schema.nodes.blockquote) (and revert to paragraph) to match the current schema.

Suggested change

lift(state, view.dispatch);

} else {

wrapIn(schema.nodes.blockquote)(state, view.dispatch);

setBlockType(schema.nodes.paragraph)(state, view.dispatch);

} else {

setBlockType(schema.nodes.blockquote)(state, view.dispatch);

Copilot · 2026-04-07T07:17:30Z

+      case 'bullet-list':
+        if (this.#isNodeActive(schema.nodes.bulletList)) {
+          liftListItem(schema.nodes.listItem)(state, view.dispatch);
+        } else {
+          wrapInList(schema.nodes.bulletList)(state, view.dispatch);
+        }
+        break;
+      case 'ordered-list':
+        if (this.#isNodeActive(schema.nodes.orderedList)) {
+          liftListItem(schema.nodes.listItem)(state, view.dispatch);
+        } else {
+          wrapInList(schema.nodes.orderedList)(state, view.dispatch);
+        }
+        break;


List toggling currently uses wrapInList() and liftListItem() directly and relies on #isNodeActive() to decide which path to take. Given the cursor-selection issue in #isNodeActive(), clicking list buttons while inside an existing list can incorrectly wrap/nest instead of toggling off. Consider reusing the existing list helpers in this package (e.g. toggleUnorderedList / toggleOrderedList in list-utils.ts), which already implement proper on/off behavior and lifting semantics for this schema.

Copilot · 2026-04-07T07:17:30Z

+    it('should keep paragraph block when Blockquote action is not applicable', async () => {
+      const view = editor.view!;
+      view.dispatch(view.state.tr.setSelection(TextSelection.near(view.state.doc.resolve(2))));
+      await toolbar.updateComplete;
+
+      const bqButton = getButtonByIconName('far-quote-left')!;
+      bqButton.click();
+      await toolbar.updateComplete;
+
+      expect(editor.view?.state.doc.firstChild?.type.name).to.equal('paragraph');
+    });


This test asserts that clicking the Blockquote button does not change the document (expects the first node to remain paragraph). That contradicts the PR description which lists Blockquote as a supported toolbar block format. Once the blockquote command/schema is fixed so the action is applicable, this test should be updated to assert that blockquote is applied/toggled correctly (including the cursor-selection case).

github-actions · 2026-04-07T11:19:17Z

🕸 Storybook preview

You can view a preview here (commit 4c9b235141172dcbdf3c6af5e67b118fc9992a45).

Copilot

Pull request overview

Copilot reviewed 16 out of 17 changed files in this pull request and generated 2 comments.

Copilot · 2026-04-07T12:08:40Z

 export default {
  title: 'Form/Editor',
-  tags: ['!dev'],
+  tags: [/*'!dev',*/ 'draft'],


Leaving a commented-out Storybook tag inside the tags array makes the story metadata harder to read and maintain. Prefer removing the comment and explicitly setting the intended tags (e.g., keep !dev if the story should remain hidden, or drop it entirely if it shouldn’t).

Suggested change

tags: [/*'!dev',*/ 'draft'],

tags: ['draft'],

Copilot · 2026-04-07T12:08:41Z

@@ -5,7 +5,6 @@
    "emitDeclarationOnly": false,
    "module": "ES2022",
    "moduleResolution": "bundler",


Removing noPropertyAccessFromIndexSignature reduces TypeScript strictness for the Angular package and can mask unsafe property access. If this was done to unblock a specific error, consider addressing that type issue directly (or scoping the relaxation) to avoid weakening type safety across the package.

Suggested change

"moduleResolution": "bundler",

"moduleResolution": "bundler",

"noPropertyAccessFromIndexSignature": true,

Diaan · 2026-04-17T12:12:07Z

closed because we need environments

jpzwarte requested review from Diaan, a11ymiko, anna-lach and michal-sanoma as code owners April 3, 2026 20:31

Copilot AI review requested due to automatic review settings April 3, 2026 20:31

Copilot started reviewing on behalf of jpzwarte April 3, 2026 20:32 View session

Copilot AI reviewed Apr 3, 2026

View reviewed changes

claude and others added 2 commits April 3, 2026 20:47

🐫

cbbe48b

Copilot AI review requested due to automatic review settings April 4, 2026 07:18

Copilot started reviewing on behalf of jpzwarte April 4, 2026 07:19 View session

Copilot AI reviewed Apr 4, 2026

View reviewed changes

☀️

cabf0a4

jpzwarte marked this pull request as draft April 4, 2026 11:42

🐳

617163e

Copilot AI review requested due to automatic review settings April 7, 2026 07:10

Copilot started reviewing on behalf of jpzwarte April 7, 2026 07:11 View session

Copilot AI reviewed Apr 7, 2026

View reviewed changes

🍰

55fc157

🍊

b9f1328

Copilot AI review requested due to automatic review settings April 7, 2026 12:02

Copilot started reviewing on behalf of jpzwarte April 7, 2026 12:02 View session

Copilot AI reviewed Apr 7, 2026

View reviewed changes

💙

4c9b235

Diaan closed this Apr 17, 2026

Diaan reopened this Apr 20, 2026

	"moduleResolution": "bundler",
	"moduleResolution": "bundler",
	"noPropertyAccessFromIndexSignature": true,

Conversation

jpzwarte commented Apr 3, 2026

Uh oh!

changeset-bot Bot commented Apr 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Apr 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕸 Website preview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕸 Storybook preview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Diaan commented Apr 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-bot Bot commented Apr 3, 2026 •

edited

Loading

github-actions Bot commented Apr 4, 2026 •

edited

Loading

github-actions Bot commented Apr 7, 2026 •

edited

Loading