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:
@@ -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}>
|
||||
|
||||
Reference in New Issue
Block a user