feat(lexical): support styling declarative actions

Accept className on action declarations and carry it through compiled actions, default toolbar controls, menu items, custom renderers, and custom controls. Keep preset action ordering consistent across toolbar and bubble placements, with coverage for default and custom rendering paths.
This commit is contained in:
Maofeng
2026-08-08 21:13:49 +08:00
parent bc84912e48
commit c64864b3b5
6 changed files with 90 additions and 16 deletions
+41 -1
View File
@@ -1,6 +1,6 @@
// @vitest-environment jsdom
import { cleanup, render, screen } from "@testing-library/react"
import { cleanup, fireEvent, render, screen } from "@testing-library/react"
import { afterEach, describe, expect, it } from "vitest"
import {
@@ -54,6 +54,46 @@ describe("declarative Lexical actions", () => {
expect(screen.getByRole("button", { name: "格式" })).not.toBeNull()
})
it("forwards an action className to its default control", () => {
render(
<LexicalRoot value="" onChange={() => undefined}>
<LexicalActions>
<Bold className="text-destructive" />
</LexicalActions>
<LexicalFixedToolbar />
<LexicalContent />
</LexicalRoot>
)
expect(
screen
.getByRole("button", { name: "Bold" })
.classList.contains("text-destructive")
).toBe(true)
})
it("forwards an action className to its default menu item", async () => {
render(
<LexicalRoot value="" onChange={() => undefined}>
<LexicalActions>
<ActionGroup type="menu" label="格式">
<Bold className="text-destructive" />
</ActionGroup>
</LexicalActions>
<LexicalFixedToolbar />
<LexicalContent />
</LexicalRoot>
)
fireEvent.click(screen.getByRole("button", { name: "格式" }))
expect(
(
await screen.findByRole("menuitem", { name: "Bold" })
).classList.contains("text-destructive")
).toBe(true)
})
it("does not render optional regions without matching actions", () => {
render(
<LexicalRoot value="" onChange={() => undefined}>