Skip to content

SeeMark 多框架 adapter — Phase 1(HTML adapter + Template 脫 React + AW 升版) #38

Description

@jamliaoo

動機

@coseeing/see-mark 目前只能輸出 React component。本階段讓 SeeMark 除了 React 也能輸出純 HTML 字串,提升生態包容性,也讓 Template 可以不用 React。

SeeMark 內部是兩個 Stage——Stage 1(markdown → 帶 data-seemark-* 標記的中介 HTML 字串,與框架無關)、Stage 2(中介 HTML → 框架)。新增 HTML adapter 只動 Stage 2 的「新增分支」,React adapter 完全不動、向後相容(SemVer minor)

子任務(依賴順序)

  • feat: add HTML adapter via @coseeing/see-mark/html #39 — 新增 @coseeing/see-mark/html adapter(核心)
    → merge 後手動發佈 @coseeing/see-mark@1.11.0 到 GitHub Packages
  • coseeing/Access8MathTemplate#NN — 改寫為 vanilla JS + esbuild(依賴 ^1.11.0
    → 發佈後重生 package-lock.json、build 出新 access8math-web-template.zip
  • coseeing/Access8MathWeb#NN — 升 see-mark 至 ^1.11.0 + 換上新 Template ZIP

元件互動性(遷移影響評估)

切換到 vanilla HTML adapter 不會失去任何「實際運作中」的功能——目前 React adapter 全部 default components 皆無 JS 互動(透過 grep onClick/useState/useEffect/addEventListener/... )。

元件 「互動」性質 vanilla 後
heading, image, imageDisplay, math, alert 純靜態,無互動 不受影響
internalLink, internalLinkTitle <a href="#id"> 錨點跳轉(瀏覽器原生,無 JS) 不受影響
externalLinkTab, externalLinkTabTitle <a target="_blank"> 開新分頁(原生) 不受影響
externalLinkTitle 一般 <a> 同頁連結(原生) 不受影響
imageLink, imageDisplayLink <a><img></a> 可點(原生) 不受影響
youtube, codepen, iframe 互動發生在 iframe 內部(嵌入內容),非本套件程式 不受影響

唯一一個曾規劃的 JS 功能(media modal)尚未實現(可參考 Content.js// TODO: fulfill what linkHandler does

驗證

以涵蓋全語法的測試文案,跑「編輯器→ 點『匯出網站』→ 下載 ZIP → file:// 開啟」完整流程:

  • 匯出站台(vanilla Template + HTML adapter)所有元件正確渲染、無 render error:標題 h1–h6(含 slug id)、行內格式、巢狀清單、表格、4 種連結變體、4 種圖片變體、iframe/YouTube embed/YouTube watch URL 自動轉 embed/CodePen、5 條數學(MathML + SVG a11y 雙軌)。
  • 外部 https 圖片直接當 source 生效(涵蓋既有 feat: support http(s) URLs as image sources across image extensions #37)。
  • AW 主編輯器在 1.11.0(React adapter)預覽渲染一致。
  • 註:YouTube 在 file:// 雙擊下回 Error 153(YouTube origin 政策,與 React 舊版行為一致),部署到 http(s) 後正常。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions