Add Insert HTML toolbar button to PortableTextEditor

[diogoascarneiro]

What does this PR do?

Adds a visible Insert HTML toolbar button to the WYSIWYG Portable Text editor. This exposes the existing htmlBlock insertion path that was previously only discoverable through the /html slash command.

Closes #1341

Type of change

• Bug fix
• Feature (requires maintainer-approved Discussion)
• Refactor (no behavior change)
• Translation
• Documentation
• Performance improvement
• Tests
• Chore (dependencies, CI, tooling)

Checklist

• I have read CONTRIBUTING.md
• pnpm typecheck passes
• pnpm lint passes
• pnpm test passes (or targeted tests for my change)
• pnpm format has been run
• I have added/updated tests for my changes (if applicable)
• User-visible strings in the admin UI are wrapped for translation (if applicable). Do not include messages.po changes except in translation PRs — a workflow extracts catalogs on merge to main.
• I have added a changeset (if this PR changes a published package)
• New features link to an approved Discussion: https://github.com/emdash-cms/emdash/discussions/...

AI-generated code disclosure

• This PR includes AI-generated code — model/tool: OpenCode + GPT-5.5

Screenshots / test output

Verified locally:

• pnpm lint:json | jq '.diagnostics | length' -> 0
• pnpm lint:quick
• pnpm --filter @emdash-cms/admin typecheck
• pnpm exec vitest run tests/editor/toolbar.test.tsx -> 47 passed
• pnpm exec vitest run in packages/admin -> 79 files passed, 997 tests passed

Formatting was run on touched files:

• pnpm exec oxfmt --ignore-path .gitignore packages/admin/src/components/PortableTextEditor.tsx packages/admin/tests/editor/toolbar.test.tsx
• pnpm exec prettier --write .changeset/html-block-toolbar.md

[changeset-bot]

🦋 Changeset detected

Latest commit: 543a3c3

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

This PR includes changesets to release 14 packages

Name	Type
@emdash-cms/admin	Patch
emdash	Patch
@emdash-cms/cloudflare	Patch
@emdash-cms/sandbox-workerd	Patch
@emdash-cms/fixture-perf-site	Patch
@emdash-cms/perf-demo-site	Patch
@emdash-cms/cache-demo-site	Patch
@emdash-cms/auth	Patch
@emdash-cms/blocks	Patch
@emdash-cms/gutenberg-to-portable-text	Patch
@emdash-cms/x402	Patch
create-emdash	Patch
@emdash-cms/auth-atproto	Patch
@emdash-cms/plugin-embeds	Patch

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

[github-actions]

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

[pkg-pr-new]

Open in StackBlitz

@emdash-cms/admin

npm i https://pkg.pr.new/@emdash-cms/admin@1440

@emdash-cms/auth

npm i https://pkg.pr.new/@emdash-cms/auth@1440

@emdash-cms/auth-atproto

npm i https://pkg.pr.new/@emdash-cms/auth-atproto@1440

@emdash-cms/blocks

npm i https://pkg.pr.new/@emdash-cms/blocks@1440

@emdash-cms/cloudflare

npm i https://pkg.pr.new/@emdash-cms/cloudflare@1440

@emdash-cms/contentful-to-portable-text

npm i https://pkg.pr.new/@emdash-cms/contentful-to-portable-text@1440

emdash

npm i https://pkg.pr.new/emdash@1440

create-emdash

npm i https://pkg.pr.new/create-emdash@1440

@emdash-cms/gutenberg-to-portable-text

npm i https://pkg.pr.new/@emdash-cms/gutenberg-to-portable-text@1440

@emdash-cms/plugin-cli

npm i https://pkg.pr.new/@emdash-cms/plugin-cli@1440

@emdash-cms/plugin-types

npm i https://pkg.pr.new/@emdash-cms/plugin-types@1440

@emdash-cms/registry-client

npm i https://pkg.pr.new/@emdash-cms/registry-client@1440

@emdash-cms/registry-lexicons

npm i https://pkg.pr.new/@emdash-cms/registry-lexicons@1440

@emdash-cms/sandbox-workerd

npm i https://pkg.pr.new/@emdash-cms/sandbox-workerd@1440

@emdash-cms/x402

npm i https://pkg.pr.new/@emdash-cms/x402@1440

@emdash-cms/plugin-ai-moderation

npm i https://pkg.pr.new/@emdash-cms/plugin-ai-moderation@1440

@emdash-cms/plugin-atproto

npm i https://pkg.pr.new/@emdash-cms/plugin-atproto@1440

@emdash-cms/plugin-audit-log

npm i https://pkg.pr.new/@emdash-cms/plugin-audit-log@1440

@emdash-cms/plugin-color

npm i https://pkg.pr.new/@emdash-cms/plugin-color@1440

@emdash-cms/plugin-embeds

npm i https://pkg.pr.new/@emdash-cms/plugin-embeds@1440

@emdash-cms/plugin-field-kit

npm i https://pkg.pr.new/@emdash-cms/plugin-field-kit@1440

@emdash-cms/plugin-forms

npm i https://pkg.pr.new/@emdash-cms/plugin-forms@1440

@emdash-cms/plugin-webhook-notifier

npm i https://pkg.pr.new/@emdash-cms/plugin-webhook-notifier@1440

commit: 543a3c3

[emdashbot]

Approach judgment: This is the right change. The PR exposes the existing htmlBlock insertion capability (previously only discoverable via the /html slash command) through a visible toolbar button. This directly addresses issue #1341, follows the established pattern of other insertion buttons (Image, Horizontal Rule), and is purely additive with no breaking changes.

Implementation: The button reuses the exact same insertContent call as the slash command, uses the already-imported BracketsAngle icon, and wraps the label with Lingui's t macro. The title prop feeds the required aria-label, and onMouseDown prevents focus theft from the editor — all consistent with sibling buttons.

What I checked:

• Logic and edge cases: no off-by-one, null, or state issues. The insertion chain matches the existing slash-command path.
• Accessibility: the button carries a proper aria-label and is discoverable via getByRole("button", { name: "Insert HTML" }).
• AGENTS.md conventions: Lingui wrapping is present, no raw directional Tailwind classes, no SQL/API/cache concerns (this is a UI-only change), and a changeset is included.
• Tests: a functional test is added, but it is misplaced in the test file (see finding below).

The author left the pnpm typecheck checkbox unchecked; they note running the filtered admin-package typecheck locally. I did not verify this statically.

[diogoascarneiro]

I have read the CLA Document and I hereby sign the CLA

[ascorbic]

Thanks!