Lexical 语法覆盖 · 本地文章

这是一篇写入本地 Core 的真实测试文章：它把原 Lexical showcase 的完整语法覆盖放回生产文章壳子，供后续页面回归检查。

“

Note 本 fixture 覆盖站点当前注册的 Lexical 基础节点、富媒体节点和交互节点；投票、动态组件与外部媒体继续走页面的正常适配器，便于检查真实加载状态。

一、行内排版

行内可施 粗体、斜体、删除线、<u>下划线</u>、inline code；可缀链接如 innei.in，或 autolink：https://github.com/Innei/Yohaku。

日语之 ruby 标音示例：紅葉（もみじ）、東京（とうきょう）。

社交平台 mention：innei 与 @innei。

二、标题与段落

h3 子标题

段落数行散布。

“

引文一则：天地有大美而不言。

—— 庄子，《知北游》

三、列表与任务

• 无序首项
• 嵌套：
• • 子项 A
  • 子项 B
• 末项

1. 有序首项
2. 有序次项
3. 有序末项

• 已成：写 fixture
• 已成：接 mock adapter
• 待办：覆盖 edge cases

四、代码

import type { LexicalContentProps } from '~/components/ui/rich-content/LexicalContent'

export function renderArticle(props: LexicalContentProps) {
  return <LexicalContent {...props} />
}

代码片段：counter.tsx

import { useState } from 'react'

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

代码片段：main.ts

import { createRoot } from 'react-dom/client'
import { Counter } from './counter'

createRoot(document.getElementById('root')!).render(<Counter />)

五、引用与提示

“

Important 要紧：此功能须先登入方可一用。

Banner（note）：仅以醒目装饰示之。
Banner（tip）：与 alert 同 type 而 layout 异。
Banner（important）：重要事项专用。
Banner（warning）：警示意。
Banner（caution）：凶险意。

六、媒体

单图：

!随机配图

图集（grid）：

!一

!二

!三

!四

视频封面与视频文件：

!视频封面

播放示例视频

Embed（YouTube）：https://www.youtube.com/watch?v=dQw4w9WgXcQ

Link card：https://github.com/Innei/Shiro

七、表格与折叠

折叠节点测试（原页面初始为收起状态）：

“

点击展开：本节点之内部资料

折叠节点用于隐次要内容，初始 open=false。
内部可置任何块级节点。

八、图与图灵机

Mermaid 流程图：

Mermaid 序列图：

Excalidraw 白板（Lexical 专属节点；Markdown 中以文字描述代替交互画布）：

“

Frame「01 · 语法覆盖（文章）」中有一个蓝色矩形和一个橙色椭圆。

九、Chat 与投票

User · Agent 对话：

“

Innei： 为何 Lexical 之 DecoratorNode 与 ElementNode 有别？

Claude： ElementNode 容他节点（段落、标题、列表）；DecoratorNode 渲一 React component 为叶（poll、embed、chart）。当其内容非 text-editable 时用 decorator。

单选 poll：

汝最爱何猫？

• 布偶
• 美短
• 橘猫

多选 poll：

汝曾养何宠？（可多选）

• 猫
• 狗
• 仓鼠
• 鱼

十、嵌套文档

Nested doc 是一独立 SerializedEditorState 之块，点击展开可见全文。

嵌套之子文档

此子文档本身亦是一份 lexical state，含 paragraph、code、image 之属。

{
  "type": "nested-doc",
  "content": { "root": { /* ... */ } }
}

嵌套之内可再嵌，但默认渲 6 节点上限。

十一、补充布局与扩展节点

以下案例补齐独立 Lexical demo 中未在长文重复展开的布局、媒体和交互变体。

Image (display width)

displayWidth 60% / 35%，居中（默认 layout）。

!山 60%

displayWidth: 60

!山 35%

displayWidth: 35

Image (align)

layout = align-left / align-right，displayWidth 40%。

!湖 左对齐

align-left

!湖 右对齐

align-right

Image (float)

layout = float-left / float-right，文字环绕；≤640px 自动解除浮动。

!林 左浮动

float-left · displayWidth: 40

左浮动之图占行宽四成，正文自右侧环绕而下。环绕段落需有足够长度方能观察换行行为：当文字行数超过图片高度时，后续行自然回到全宽。余白之间，图文相生，版式因此而活。

此为第二段环绕文字，用以验证多段落连续环绕时的间距与对齐。浮动图与正文之间的水平间距由 haklex 样式内置（1.5rem），不应被站内样式覆盖。

!海岸 右浮动

float-right · 默认宽（50%）

右浮动未指定 displayWidth，回落至默认 50% 宽。正文自左侧环绕。窄屏（≤640px）下两种浮动皆解除，图片回到全宽居中，避免移动端文字被挤压成窄条。

文末再补一段，确认容器以 flow-root 收束浮动：本块之后的内容不应被浮动图侵入。

Gallery (carousel)

gallery layout = carousel

!Slide 1

!Slide 2

!Slide 3

Afilmory Photo

afilmory photo node — schema 仅 id + baseUrl；运行时取 /api/manifest 解 EXIF。完整 cases 见 /dev-demos/lexical/afilmory。

查看 AFILMORY 照片：DSCF6094

File

file 附件：block 行 + inline chip，md / code 可展开预览（Range 512KB）。

README.md（4.0 KB）

季度报告.pdf（2.3 MB）

附件也可以内联：vite.config.ts，跟在正文里。

Embed - Tweet

embed (Tweet) — verify TweetRenderer renders a card, not fallback link

Embed (Tweet)：

https://x.com/shirouzu_ref/status/2061673485056040980?s=20

Dynamic - remote quiz

dynamic 节点：远程 ESM widget（线上 S3 资产），import(url) 进 shadow root，URL 须在 /s/dynamic-widgets-catalog 清单内。

组件问题：这个 quiz 组件本身是从哪里加载的？

• 站点的 JS bundle
• 对象存储上的独立 ESM 模块
• iframe 嵌的外部页面

原组件配置的正确答案是“对象存储上的独立 ESM 模块”。其远程模块地址：

Chat - user · user

Alice：今晚约？
Bob：约。

Chat - user · agent (long markdown)

以下为多轮对话之展示，用以验字款与下划之效：

User： 请简述 Lexical 与 ProseMirror 之主要差异，并举三例典型用例。

Yohaku： Lexical 偏 component-driven，节点皆经 DecoratorNode 与 ElementNode 派生；ProseMirror 则以 schema 描结构，节点为 immutable 之数据。

三例典型用例：

• 文档编辑器（如 Notion、Coda）多用 ProseMirror，重 schema 之严
• 社交内容编辑（如 Meta、Threads）多用 Lexical，重 React 之合
• AI 流式接入（如 chat UI）二者皆可，然 Lexical 之 update cycle 更近 React，集成略简

可参 lexical.dev 与 prosemirror.net 之 docs。

User： 那 Lexical 之 DecoratorNode 适合渲什么？

Yohaku： DecoratorNode 适合非文本叶节点——其内容由 React 自管，编辑器不进入其 DOM：

• 图片、视频、嵌入式 iframe
• 投票、表格之复杂组件
• 自定义 widget（如本 chat node）

decorate() 之返回即所渲之 React element。

User： 了解，谢。

以上 chat 之容当为 sans，纵 note variant 之父级用 serif。

本地 Markdown 脚注侧注布局测试（仅开发环境）

Markdown 脚注侧注布局检查

开头先放两条相邻引用「阅读进度轨」1和「富格式侧注」2，观察它们靠得比较近时是否会自然错开。左侧还有固定阅读进度轨，侧注需要和它留出距离。

接下来留几段普通正文，让页面出现真实的阅读节奏。脚注应留在引用段落旁边，而不是集中到文章结尾；正文顺序也不应该因为侧注而被打断。

阅读进度轨会随着滚动更新，它属于页面边缘的阅读工具。未展开时侧注与它保留间距；悬浮展开时侧注仍固定在左侧，允许进度轨覆盖部分侧注，不改变正文布局。

有些段落会比较短，有些则会连续换行。这里再放一段较长的说明文字，用来观察侧注是否仍与引用段落对齐；如果注释内容比正文长，也不应反过来挤压正文或覆盖下一条注释。

文章里的目录仍放在右侧，因此这组测试只观察左边的空白区域。打开余白侧栏时，侧注应该让出位置回到正文流里；展开阅读进度轨时则保持原位，不挤动正文。

这段模拟文章中段，专门确认侧注在较长内容之后仍跟着自己的引用位置3。继续阅读下面的内容时，它不应挤回前面那组脚注，也不应遮住目录；进度轨展开时可以作为浮层覆盖侧注。

普通段落之间可以有更多文字、列表或图片。这里补一段稍长的测试文案：侧注与正文是并行的阅读辅助信息，桌面端放在左侧空白区域，窄屏则回到当前段落下方。

再继续几段正文，确认编号按引用首次出现的顺序递增，而不是按脚注定义所在的位置生成。脚注定义仍统一写在 Markdown 文末，渲染后则应回到各自引用附近。

窗口变窄时，侧注不再占用文章左边的空白，而是在引用段落后以小字号继续阅读。这个回退布局也需要保持段间距，避免一条注释紧贴下一段正文。

再往后放一条引用4，确认它会出现在文章靠后的位置，并且仍使用按首次出现顺序生成的编号。

这里再隔开几段普通内容，模拟真实文章中穿插的例子、解释和补充说明。这样能看出侧注是否跟随各自的引用，而不是因为位置计算而逐渐堆叠到某一处。

若读者打开右侧目录或左侧余白侧栏，侧注应临时回到正文布局，避免与侧栏争用空间。悬浮展开阅读进度轨时侧注保持左侧定位，允许进度轨浮层覆盖；关闭侧栏后，再恢复到左侧留白即可。

最后一段放置返回引用5，检查返回箭头是否回到正确的引用位置；它不应把所有侧注都带到文末。

const note = '代码块也能留在侧注里'
console.log(note)


图片和代码都不应撑破侧注宽度，也不改变原段落的阅读顺序。