Lexical syntax coverage · local article

This is a real test article written into the local Core: it puts the full syntax coverage of the original Lexical showcase back inside a production article shell, so the page can serve as a regression check later on.

1. Inline formatting

Inline text supports bold, italic, strikethrough, underline, and inline code inline code, plus links like innei.in, or an autolink: https://github.com/Innei/Yohaku.

Ruby annotations in Japanese: 紅葉もみじ, 東京とうきょう.

Social platform mentions: innei and @innei.

2. Headings and paragraphs

h3 subheading

A paragraph spread across several lines.

“

A quotation: Heaven and earth have great beauty and say nothing.

— Zhuangzi, "Knowledge Roams North"

3. Lists and tasks

• First unordered item
• Nested:
  • Child item A
  • Child item B
• Last item

1. First ordered item
2. Second ordered item
3. Last ordered item

• Done: write the fixture
• Done: wire up the mock adapter
• To do: cover edge cases

4. Code

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>
}

5. Quotes and callouts

6. Media

Single image:

Image grid:

Video:

Embed (YouTube):

Link card:

Repository · Innei

4.3k

Shiro

📜 A minimalist personal website embodying the purity of paper and freshness of snow.

TypeScript

7. Tables and collapse

8. Diagrams and Turing machines

Mermaid flowchart:

Mermaid sequence diagram:

Excalidraw whiteboard:

9. Chat and polls

User · Agent conversation:

Single-choice poll:

10. Nested documents

A nested doc is a block holding its own SerializedEditorState; click to expand and read the full text.

Nested child document

This child document is itself a Lexical state containing paragraph, code, image, and other nodes. The code block below was pasted into Lexical with Markdown fenced syntax and is rendered on the front end by Shiki.

11. Additional layout and extended nodes

This section uses data from the backend Lexical exclusively, to verify common nodes such as images, code blocks, links, and long text.

The image uses a public URL already present in the site's test content, so it doesn't depend on a front-end fixture or a local relative path.

Code block:

Link: Google

import { useState } from "react"
export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Markdown footnote sidenote test

Two references to start with — "reading progress rail"1 and "rich-format sidenotes"2 — to confirm that footnotes are generated from the Lexical content and moved to the left side on desktop.

A few more paragraphs follow so the sidenotes aren't bunched together. Each sidenote should track its reference, and on mobile it returns to the body flow. There's enough text here to observe the desktop layout.

Here's a mid-article reference3, used to check larger vertical spacing.

Another reference sits near the end of the article4 to confirm numbers increase in order of first reference.

The final paragraph adds a back-reference5, to check that the return arrow lands on the correct reference.