[lexical-code-prism][lexical-code-shiki][lexical-playground] Feature: Add CodePrismExtension, CodeShikiExtension, and migrate playground plugins to extensions

[etrepum]

Description

Continues the migration of lexical-playground plugins from legacy React
<Plugin /> components to declarative extensions built with
defineExtension. Each plugin is migrated in its own commit so it can
be reviewed independently, and every commit passes pnpm run ci-check.

Playground plugin migrations

Eight plugins are migrated. Node-and-command plugins become
straightforward extensions with nodes + register. Plugins whose
registration was previously toggled by conditional React rendering use
namedSignals + effect (following the existing MaxLengthExtension
pattern), synced from settings via useSyncExtensionSignal in
Editor.tsx.

Trivial (command + node registration):

• PageBreakPlugin → PageBreakExtension
• TwitterPlugin → TwitterExtension
• YouTubePlugin → YouTubeExtension
• FigmaPlugin → FigmaExtension
• TabFocusPlugin → TabFocusExtension (FOCUS_COMMAND handler)
• CollapsiblePlugin → CollapsibleExtension (nodes, transforms,
  arrow-key/enter handlers, and INSERT_COLLAPSIBLE_COMMAND; folder
  renamed so the sibling CollapsibleContainerNode /
  CollapsibleContentNode / CollapsibleTitleNode files move with it)

Signal-toggled (conditional on a setting):

• SpecialTextPlugin → SpecialTextExtension with a disabled signal
  driven by shouldAllowHighlightingWithBrackets
• CodeHighlightPrismPlugin + CodeHighlightShikiPlugin → unified
  playground CodeHighlightExtension with a
  mode: 'off' | 'prism' | 'shiki' signal driven by isCodeHighlighted
  / isCodeShiki, replacing the previous React-level ternary that
  swapped between two plugin components

Imports from ToolbarPlugin, ComponentPickerPlugin, AutoEmbedPlugin,
and PlaygroundNodes are updated to reference the new extension paths.
Editor.tsx drops the matching <*Plugin /> mounts and App.tsx
registers the new extensions in the appropriate scope —
PlaygroundRichTextExtension for rich-text-only features and
AppExtension for features that previously ran in both modes.

Plugins that render portals / floating panels / modals / dialogs
(Toolbar, FloatingLink, FloatingTextFormat, CodeActionMenu,
DraggableBlock, Comment, EmojiPicker, Mentions, ComponentPicker,
ContextMenu, AutoEmbed, Equations, Excalidraw, Poll, Table* plugins,
Actions, Shortcuts, VersionsPlugin, TreeView, TestRecorder, etc.) are
intentionally out of scope here — they still need a React host.

Dead code cleanup

Two playground plugin files were unreferenced anywhere in the codebase
and are removed:

• LinkPlugin — an orphan wrapper around @lexical/react/LexicalLinkPlugin;
  link support is already registered declaratively via LinkExtension
  in App.tsx.
• StickyPlugin — a registration-guard useEffect for StickyNode that
  was never mounted. StickyNode is still registered via PlaygroundNodes,
  and the collaboration logic lives in StickyComponent.tsx. The
  collaboration docs link in packages/lexical-website/docs/collaboration/react.md
  is updated to point at StickyComponent.tsx, which is where the
  nested-editor + real-time sync example actually lives.

New code highlighter extensions

The playground aggregator needs to route the same editor between two
different highlighter implementations, which motivated exposing
extensions for each engine:

• @lexical/code-prism now exports CodePrismExtension +
  CodePrismConfig ({disabled, tokenizer}). The extension declares
  CodeExtension as a dependency and uses build: namedSignals(config)
  plus an effect over the signals to (un)register the Prism
  highlighter reactively. Both disabled and tokenizer are signals,
  so the highlighter can be toggled on/off and the tokenizer can be
  hot-swapped at runtime via useSyncExtensionSignal.
• @lexical/code-shiki now exports CodeShikiExtension +
  CodeShikiConfig with the same shape and behaviour.

Deprecated shim (backward compatible). The existing
CodeHighlighterShikiExtension and CodeHighlighterShikiConfig are
kept and marked @deprecated, pointing at CodeShikiExtension. The
deprecated export is now a thin backward-compat shim that declares
CodeShikiExtension as a dependency and, in its init method, writes
its flat Tokenizer config to
state.getDependency(CodeShikiExtension).config.tokenizer before
CodeShikiExtension builds. This means existing code like
configExtension(CodeHighlighterShikiExtension, customTokenizer)
continues to work without modification, and the resulting signal is
initialized with the forwarded tokenizer without a wasteful register /
re-register. The shim is registered under the runtime name
@lexical/code-shiki/legacy so it does not collide with the new
extension's @lexical/code-shiki name.

Flow types (packages/lexical-code-prism/flow/LexicalCodePrism.js.flow,
packages/lexical-code-shiki/flow/LexicalCodeShiki.js.flow) are updated
for the new exports and declare the deprecated shim; the
included-extensions.md doc now lists both CodePrismExtension and
CodeShikiExtension.

Playground CodeHighlightExtension

Now depends on configExtension(CodePrismExtension, {disabled: true})
and configExtension(CodeShikiExtension, {disabled: true}), owns a
mode signal, and uses an effect that flips each sub-extension's
disabled signal via getExtensionDependencyFromEditor(editor, …).output.
No more direct registerCodeHighlighting calls from the playground.

Closes #

Test plan

No behavior change expected. Settings that previously toggled plugin
mounting (isCodeHighlighted, isCodeShiki,
shouldAllowHighlightingWithBrackets) should continue to behave the
same way, driven by signals instead of conditional rendering. Existing
CodeHighlighterShikiExtension imports and configExtension calls
should continue to work unchanged via the deprecated shim.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
lexical	Ready	Preview, Comment	Apr 11, 2026 7:25pm
lexical-playground	Ready	Preview, Comment	Apr 11, 2026 7:25pm