首页 / 资讯中心 / 文章详情

HedgeDoc 前端 Changelog 解读:从 HedgeDoc 1 到 2 的功能演进、弃用与迁移指南

HedgeDoc 前端 Changelog 解读:从 HedgeDoc 1 到 2 的功能演进、弃用与迁移指南 ★ FEATURED ARTICLE
后端前端云原生【免费下载链接】hedgedocHedgeDoc - Ideas grow better together项目地址https://gitcode.com/gh_mirrors/he/hedgedoc点击查看免费下载本指南以frontend/CHANGELOG.mdHedgeDoc 前端Next.js/React 客户端的变更日志为主线逐条解读其 Unreleased 版本中记录的 Deprecations、Removed 与 Added/Changed 条目并结合仓库源码如frontend/src/extensions、commons/src/note-frontmatter、frontend/package.json等说明每项变动的实际实现位置、行为细节与迁移方法。读完本文你将能够判断存量文档中哪些语法已过时并了解其替代写法理解新版嵌入、代码高亮、标签解析等机制的实现原理以及掌握将旧版 HedgeDoc 1 笔记迁移到当前版本的关键注意事项。1. 文档定位与版本背景frontend/CHANGELOG.md是 HedgeDoc 仓库中前端子包hedgedoc/frontend基于 Next.js React CodeMirror见 frontend/package.json的变更记录。文件开头的 SPDX 注释表明其遵循 CC-BY-SA-4.0 协议格式遵循 Keep a Changelog。当前hedgedoc/frontend的版本为2.0.0-alpha.3本文档内容属于Unreleased尚未正式发布区块记录的是 HedgeDoc 2.x 相对 HedgeDoc 1.x 的破坏性变更与新增能力。对于 HedgeDoc 1 的老用户而言这些条目本质上是升级迁移手册对于新用户而言则是理解当前前端功能边界的最佳索引。2. Deprecations短代码嵌入语法全面让位于纯链接单行嵌入本节是全文最重要、影响面最广的变更。旧版 HedgeDoc 使用{%xxx ... %}形式的短代码short code语法嵌入外部内容而本版本明确声明这是最后一个支持该语法的版本新写法是把普通链接单独放在文档的一行中。2.1 逐项对照旧短代码 → 新写法旧短代码将被弃用新的推荐写法现状{%youtube someid %}https://youtube.com/watch?vsomeid单独一行仍支持将弃用{%vimeo 123456789 %}https://vimeo.com/123456789单独一行仍支持将弃用{%gist user/12345 %}https://gist.github.com/user/12345单独一行仍支持将弃用{%slideshare user/my-awesome-presentation %}不再提供嵌入仅显示链接嵌入移除{%speakerdeck foobar %}不再提供嵌入仅显示链接嵌入移除{%pdf https://example.org/example-pdf.pdf %}不再提供嵌入仅显示链接嵌入移除2.2 源码实现短代码如何被识别与替换YouTube 短代码legacyYouTubeRegex /^{%youtube\s([\w-]{11})\s*%}$/匹配 11 位视频 ID 后通过markdown-it-regex插件替换为app-youtube id...自定义标签replace-legacy-youtube-short-code.ts。Vimeo 短代码legacyVimeoRegex /^{%vimeo\s(\d{6,11})\s*%}$/同样生成自定义标签replace-legacy-vimeo-short-code.ts。Gist 短代码finalRegex /^{%gist\s(\w\/\w)\s*%}$/replace-legacy-gist-short-code.ts。PDF / SlideShare / SpeakerDecklegacyPdfRegex /^{%pdf\s(\S*)\s*%}$/等被替换为普通a链接replace-legacy-pdf-short-code.ts与只显示链接而非嵌入的声明一致这组逻辑集中在 legacy-shortcodes-markdown-extension.ts。2.3 编辑器侧联动Linter 主动提示迁移值得注意的设计是前端不仅在渲染端兼容旧语法还在CodeMirror 编辑器中注册了对应的单行正则 Linter当用户输入{%youtube ... %}、{%speakerdeck ... %}等旧语法时编辑器会提示editor.linter.shortcode文案并把匹配内容自动改写为对应的纯链接如 YouTube 改写为https://www.youtube.com/watch?v${match}SpeakerDeck 改写为https://speakerdeck.com/${match}实现输入即迁移见 youtube-app-extension.ts 与 legacy-shortcodes-app-extension.ts。3. Removed明确移除的能力清单3.1 三类嵌入被彻底移除SlideShare、SpeakerDeck、PDF 三类嵌入不再渲染为嵌入内容若检测到遗留短代码将退化为显示指向原内容的链接对应源码见第 2.2 节的 PDF/SlideShare/SpeakerDeck 替换逻辑。迁移动作很简单把这些旧短代码替换为文档中的普通链接即可。3.2 代码高亮统一到 highlight.js变更代码高亮从highlight.js prism.js双引擎改为仅使用highlight.js。影响以下语言不再受支持——tiddlywiki、mediawiki、jsx、1c。如果你的笔记中使用了这些语言标记的代码块需要迁移到 highlight.js 支持的语言或改为普通代码块。事实依据当前前端依赖中只保留highlight.js: 11.12.0未包含 prism.js见 frontend/package.json。3.3 其他移除项Alternative anchor URL formats不再支持备选的锚点 URL 格式。Import HTML and convert to Markdown移除导入 HTML 并转成 Markdown能力。Import content from a url移除从 URL 导入内容能力。F9 shortcut to sort lines移除 F9 快捷键排序行功能。Tag definitions in headings移除在标题中定义标签的写法。Fork Awesome 图标库以 Bootstrap Icons。4. Added新增能力全景4.1 文档编辑与阅读体验历史页面新增表格视图与卡片视图并存RTL 语言更好支持且 RTL 页面内可正常排版 LTR 内容代码块高亮可同时启用自动换行与行号历史页面可直接删除笔记笔记信息对话框展示字数、修订次数、最后编辑者与创建时间编辑器可直接切换笔记的置顶状态笔记可从历史页面直接删除支持通过/new?contentExample%20content携带预置内容创建新笔记。4.2 嵌入与媒体配置了后端图片代理时图片会经代理加载Asciinema 视频可通过把视频 URL 单独放一行来嵌入与 2.x 新的链接即嵌入理念一致所有图片可点击全屏查看上传中的图片渲染为 uploading 占位带占位符 URLhttps://的图片标签会渲染为占位框图片过大超过上限时给出自定义错误提示。4.3 编辑器功能工具栏新增emoji 选择器新增details自动补全与工具栏按钮支持折叠块新增图标短代码如:bi-picture:——bi前缀即 Bootstrap Icons 的缩写代码按钮在未选中任何文本时也会插入代码围栏fencecsv语言代码块渲染为表格代码块新增Copy code to clipboard复制按钮vega-lite语言代码块渲染为 vega-lite 图表plantuml语言代码块通过配置的渲染服务器渲染为 PlantUML 图可直接从编辑器把Markdown 文件导入到现有笔记表格按钮弹出覆盖层可选择行列数编辑器偏好中新增连字ligatures开关支持ctrlk/cmdk快捷键为选中文本加链接从 LibreOffice Calc / MS Excel 粘贴表格时自动重排为 Markdown 表格。4.4 外观、品牌与页面实例可被品牌化在 HedgeDoc Logo 与文字后追加 自定义字符串或 自定义 Logo新增侧边栏承载菜单选项通过编辑 frontend/public/public/intro.md 可修改首页intro page内容注意前端源码目录中另有backend/public/intro.md对应后端默认文档支持基于文件的motd今日消息支持不含 HTML 的 Markdown历史页支持 URL 参数可收藏特定搜索或标签过滤的组合。4.5 安全与渲染架构将 Markdown 渲染包裹进 iframe提升安全性——这与前端渲染器中的 iframe 胶囊iframe capsule机制见 iframe-capsule.spec.ts相印证代码块复制按钮、上传占位、全屏查看等交互均在 iframe 内通过消息传递实现。5. Changed行为变化与配置迁移要点5.1 登录与用户体系登录/注册功能移到独立页面邮箱登录/注册改为用户名登录不再强制需要邮箱地址用户可在个人资料页管理CLI 与第三方客户端的访问令牌Access Tokens——对应后端api-token模块见 backend/src/api-token/api-token.service.ts若只配置了一个外部登录提供方登录按钮会直接链接到该提供方。5.2 标记语法与渲染行为[name...]、[time...]、[color...]标记现在可用于文档任意位置而不限于 blockquote 与列表内标签定义改为 YAML 数组详见下文 5.4数学公式渲染从 MathJax 切换到KaTeX依赖katex: 0.18.5见 frontend/package.jsonGist 嵌入使用点击盾click-shield与 vimeo、youtube 一致Gist 框架内的链接仅在新标签页中显式打开时才有效HTML-Iframe 被封装在点击盾中使用Twemoji作为图标字体依赖twemoji-colr-font: 15.0.3新增图片/新增链接的工具栏按钮生成的 Markdown 中选中链接直接放入()而非[]编辑器默认字体改为Fira Code依赖firacode: 6.2.0帮助对话框改为多标签页结构更有序深色模式同样应用于只读视图并可在其中切换默认编辑器占位符包含到/features页面的完整 URL图片路径改为相对路径。5.3 历史数据来源合并历史页面现在同时展示 LocalStorage 中保存的条目与服务器端保存的条目合并呈现。5.4 重点详解frontmatter 标签从逗号分隔字符串迁移到 YAML 数组Changelog 中同时出现两条相关条目Comma-separated definition of tags in the yaml-frontmatterDeprecations即逗号分隔写法将被弃用与 Note tags can be set as yaml-array in frontmatterChanged。其底层实现在 parse-tags-field.tsparseTagsField对输入做双兼容处理——若输入是字符串则按逗号切分、去空白并丢弃空标签若输入是数组则逐项转字符串、去空白并过滤空项。换言之当前版本同时接受--- tags: tag1, tag2 # 旧写法逗号分隔将被弃用 ------ tags: - tag1 - tag2 # 新写法YAML 数组 ---迁移建议新文档一律使用 YAML 数组写法旧文档在本次版本内仍可解析向后兼容但应在后续版本正式移除前完成迁移。该解析函数被 note-frontmatter 模块复用相关测试见 parse-tags-field.spec.ts。6. 从 HedgeDoc 1 迁移到当前版本的实操清单综合以上条目从 HedgeDoc 1 升级或迁移笔记时可参考以下清单嵌入内容把{%youtube ... %}、{%vimeo ... %}、{%gist ... %}改为对应链接单独成行把 SlideShare/SpeakerDeck/PDF 短代码改为普通链接嵌入已移除。代码高亮检查tiddlywiki、mediawiki、jsx、1c语言的代码块改用 highlight.js 支持的语言标记序列图不再使用sequence代码块语言请改用其他图表方案。frontmatter 标签将逗号分隔的tags: a, b改为 YAML 数组。公式渲染若使用了 MathJax 专属语法需按 KaTeX 语法核对KaTeX 不再支持 MathJax 的\def、\color等扩展宏的某些用法。图标将 Fork Awesome 类名替换为 Bootstrap Icons 对应的bi短代码或组件。用户体系邮箱账号改为用户名登录后确认自己的登录凭据与访问令牌如有在新版个人资料页中可用。7. 附如何在当前仓库验证这些变更若你想在本地验证上述行为可关注以下文件与测试嵌入扩展的统一注册入口external-lib-app-extensions.ts 与 essential-app-extensions.tsYouTube 新旧两种语法替换的单元测试replace-legacy-youtube-short-code.spec.ts、replace-youtube-link.spec.ts、youtube-markdown-extension.spec.tsx旧短代码PDF/SlideShare/SpeakerDeck降级为链接的测试replace-legacy-pdf-short-code.spec.ts、replace-legacy-slideshare-short-code.spec.ts、replace-legacy-speakerdeck-short-code.spec.ts标签解析的向后兼容测试parse-tags-field.spec.ts前端端到端验证iframe 渲染、只读页面、导出等frontend/cypress/e2e。结语frontend/CHANGELOG.md的 Unreleased 区块实质上是一份浓缩的HedgeDoc 2 前端迁移手册它以 Changelog 条目形式记录了从旧版短代码嵌入到链接即嵌入、从双引擎高亮到统一 highlight.js、从逗号标签到 YAML 数组等一整套向后兼容但终将收紧的语法演进。结合前端扩展机制App Extension → MarkdownRendererExtension → markdown-it 插件 → 组件替换器与编辑器 Linter 的联动实现可以确认这些变更并非简单删除而是渲染端降级兼容 编辑器端主动提示改写的双轨迁移策略。升级前对照第 6 节清单逐一核对存量文档即可平稳过渡到新版本。本文内容均依据当前仓库中的frontend/CHANGELOG.md、前端扩展源码、commons 前端元数据解析模块及frontend/package.json依赖清单整理未引入任何外部未经证实的描述。赞分享后端前端云原生【免费下载链接】hedgedocHedgeDoc - Ideas grow better together项目地址https://gitcode.com/gh_mirrors/he/hedgedoc点击查看免费下载相关推荐BuildKit 弃用功能演进与迁移指南从 Build information 到 SLSA Provenance AttestationsBuildKit 弃用功能演进与迁移指南从 Build information 到 SLSA Provenance Attestations BuildKit构建工具云原生后端yuzu模拟器终极指南在PC上免费畅玩Switch游戏的完整方案yuzu模拟器终极指南在PC上免费畅玩Switch游戏的完整方案 你是否想在电脑上体验任天堂Switch的精彩游戏yuzu模拟器正是你寻找的解决方案作为目后端前端云原生Firecracker 版本演进与功能变迁从 v0.1 到 1.16 的 CHANGELOG 深度解读Firecracker 版本演进与功能变迁从 v0.1 到 1.16 的 CHANGELOG 深度解读 Firecracker 是面向 Serverless虚拟化云原生上一篇Darling文档生成使用Doxygen自动生成API文档下一篇react-color代码质量门禁CI流程中的测试与 lint 检查创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
阅读完成 · 觉得有帮助?
咨询建站