@aiquants/markdown 6.4.1 → 8.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +108 -15
- package/dist/{abnfDiagram-VRR7QNED-2HHLEFYn.js → abnfDiagram-VRR7QNED-CBM41EC-.js} +3 -3
- package/dist/{abnfDiagram-VRR7QNED-B9qvbKps.cjs → abnfDiagram-VRR7QNED-RXKSzAok.cjs} +1 -1
- package/dist/{arc-DGI79XZe.cjs → arc-BgmWispZ.cjs} +1 -1
- package/dist/{arc-DD1A3GS6.js → arc-Bih4TvC8.js} +1 -1
- package/dist/{architectureDiagram-ZJ3FMSHR-C2Isv_kl.js → architectureDiagram-ZJ3FMSHR-D5xVqWe2.js} +2 -2
- package/dist/{architectureDiagram-ZJ3FMSHR-B7adKw79.cjs → architectureDiagram-ZJ3FMSHR-G8H1xynt.cjs} +1 -1
- package/dist/{blockDiagram-677ZJIJ3-tX1_79x-.cjs → blockDiagram-677ZJIJ3-ChRokBD8.cjs} +1 -1
- package/dist/{blockDiagram-677ZJIJ3-BzDG3iuJ.js → blockDiagram-677ZJIJ3-D2McEwPe.js} +3 -3
- package/dist/{c4Diagram-LMCZKHZV-Cw3Nz-fO.cjs → c4Diagram-LMCZKHZV-BbuZbR8I.cjs} +1 -1
- package/dist/{c4Diagram-LMCZKHZV-C1E7x4pL.js → c4Diagram-LMCZKHZV-pbn9ZNfc.js} +2 -2
- package/dist/{channel-rE7Nidar.js → channel-BSzyMwb9.js} +1 -1
- package/dist/{channel-BDmOr8WI.cjs → channel-Bsz6w6My.cjs} +1 -1
- package/dist/{chunk-2Q5K7J3B-CTJGCzMl.js → chunk-2Q5K7J3B-BTLV8fQR.js} +1 -1
- package/dist/{chunk-2Q5K7J3B-B_uu3ryF.cjs → chunk-2Q5K7J3B-JZcIC-fN.cjs} +1 -1
- package/dist/{chunk-32BRIVSS-BU3k8fI2.cjs → chunk-32BRIVSS-CE9TqZq-.cjs} +1 -1
- package/dist/{chunk-32BRIVSS-80KutoA3.js → chunk-32BRIVSS-DVNzMr7e.js} +1 -1
- package/dist/{chunk-5VM5RSS4-B832yI0V.js → chunk-5VM5RSS4-Cs47jzo-.js} +1 -1
- package/dist/{chunk-5VM5RSS4-uqdZf5S-.cjs → chunk-5VM5RSS4-r0VjpGpm.cjs} +1 -1
- package/dist/{chunk-EX3LRPZG-5HbToUCP.cjs → chunk-EX3LRPZG-BY25xTq7.cjs} +1 -1
- package/dist/{chunk-EX3LRPZG-DApvzt_L.js → chunk-EX3LRPZG-B_5Ggj5W.js} +4 -4
- package/dist/{chunk-JWPE2WC7-CBmUqzlg.cjs → chunk-JWPE2WC7-C27eOtyn.cjs} +1 -1
- package/dist/{chunk-JWPE2WC7-Dum8Mfkz.js → chunk-JWPE2WC7-CNmttOZb.js} +1 -1
- package/dist/{chunk-MOJQB5TN-EODWFr7m.js → chunk-MOJQB5TN-CEUtU-PA.js} +1 -1
- package/dist/{chunk-MOJQB5TN-hBYZmLmM.cjs → chunk-MOJQB5TN-sLs8lWY5.cjs} +1 -1
- package/dist/{chunk-PUDLZKDR-Cy-CXwf7.cjs → chunk-PUDLZKDR-CKqKzHIr.cjs} +1 -1
- package/dist/{chunk-PUDLZKDR-C2TE3L5R.js → chunk-PUDLZKDR-kE8IVbnR.js} +6 -6
- package/dist/{chunk-RYQCIY6F-DYWz_eP5.cjs → chunk-RYQCIY6F-DFx9Fm0p.cjs} +1 -1
- package/dist/{chunk-RYQCIY6F-BEpprYHU.js → chunk-RYQCIY6F-DvGyCn1K.js} +1 -1
- package/dist/{chunk-V7JOEXUC-GAaV0B4H.cjs → chunk-V7JOEXUC-CDO6Uw3c.cjs} +1 -1
- package/dist/{chunk-V7JOEXUC-BM-hXi97.js → chunk-V7JOEXUC-Ct7hq70I.js} +5 -5
- package/dist/{chunk-VR4S4FIN-BXcUlQwZ.cjs → chunk-VR4S4FIN-BHCUd_x_.cjs} +1 -1
- package/dist/{chunk-VR4S4FIN-BC678u_2.js → chunk-VR4S4FIN-BfeSjNNr.js} +1 -1
- package/dist/{chunk-XXDRQBXY-DUBr_c4F.cjs → chunk-XXDRQBXY-DcTILS1N.cjs} +1 -1
- package/dist/{chunk-XXDRQBXY-CQpPgj7q.js → chunk-XXDRQBXY-HnJRRkBi.js} +1 -1
- package/dist/{classDiagram-OUVF2IWQ-COvGPN2S.cjs → classDiagram-OUVF2IWQ-D2U1rWVc.cjs} +1 -1
- package/dist/{classDiagram-v2-EOCWNBFH-yWKe5-Fq.js → classDiagram-OUVF2IWQ-aidSJ9xs.js} +2 -2
- package/dist/{classDiagram-v2-EOCWNBFH-COvGPN2S.cjs → classDiagram-v2-EOCWNBFH-D2U1rWVc.cjs} +1 -1
- package/dist/{classDiagram-OUVF2IWQ-yWKe5-Fq.js → classDiagram-v2-EOCWNBFH-aidSJ9xs.js} +2 -2
- package/dist/components/mdastNodes/codeTokenPalette.d.ts +5 -0
- package/dist/components/mermaidInteraction.d.ts +53 -4
- package/dist/components/mermaidLabels.d.ts +12 -1
- package/dist/components/pointerCoarse.d.ts +2 -0
- package/dist/converter.wasm +0 -0
- package/dist/{cose-bilkent-JH36ORCC-BZn7k9jD.js → cose-bilkent-JH36ORCC-BRo-F7tL.js} +1 -1
- package/dist/{cose-bilkent-JH36ORCC-CcFTw3np.cjs → cose-bilkent-JH36ORCC-Dwf9bYva.cjs} +1 -1
- package/dist/css/github-markdown.css +34 -0
- package/dist/css/zenn-content.css +34 -0
- package/dist/{cynefinDiagram-TSTJHNR4-hurHHCIy.js → cynefinDiagram-TSTJHNR4-C-GL5fqa.js} +2 -2
- package/dist/{cynefinDiagram-TSTJHNR4-XM1i8MSX.cjs → cynefinDiagram-TSTJHNR4-zinokqe_.cjs} +1 -1
- package/dist/{dagre-VKFMJZFB-CAdYW8rl.js → dagre-VKFMJZFB-BffjLC2e.js} +2 -2
- package/dist/{dagre-VKFMJZFB-3LTByKBx.cjs → dagre-VKFMJZFB-DuneW1hp.cjs} +1 -1
- package/dist/{diagram-FQU43EPY-CksXO5SO.js → diagram-FQU43EPY-Dzgvcg1I.js} +2 -2
- package/dist/{diagram-FQU43EPY-Cbzx46mZ.cjs → diagram-FQU43EPY-zo5gKmtP.cjs} +1 -1
- package/dist/{diagram-G47NLZAW-CyQT8r6l.js → diagram-G47NLZAW-CzcPjsD-.js} +3 -3
- package/dist/{diagram-G47NLZAW-C86xos3U.cjs → diagram-G47NLZAW-IhAHXHlI.cjs} +1 -1
- package/dist/{diagram-NH7WQ7WH-DqE3-hMS.cjs → diagram-NH7WQ7WH-CJ5N1ivv.cjs} +1 -1
- package/dist/{diagram-NH7WQ7WH-ClLVgFsl.js → diagram-NH7WQ7WH-DHiaRk6y.js} +2 -2
- package/dist/{diagram-OA4YK3LP-CkDm25Bj.js → diagram-OA4YK3LP-ByjYRYdV.js} +3 -3
- package/dist/{diagram-OA4YK3LP-TeFqqPyo.cjs → diagram-OA4YK3LP-DgT93Vwf.cjs} +1 -1
- package/dist/{diagram-WEI45ONY-DCJ7RPdW.js → diagram-WEI45ONY-BAxzHZgz.js} +2 -2
- package/dist/{diagram-WEI45ONY-sNQ6RgM4.cjs → diagram-WEI45ONY-QLDnHl3R.cjs} +1 -1
- package/dist/{ebnfDiagram-CCIWWBDH-CwojFWHZ.cjs → ebnfDiagram-CCIWWBDH-CMtypcXn.cjs} +1 -1
- package/dist/{ebnfDiagram-CCIWWBDH-ORZrs8P1.js → ebnfDiagram-CCIWWBDH-DgSrRJ63.js} +3 -3
- package/dist/{erDiagram-Q63AITRT-B5r4qjGb.cjs → erDiagram-Q63AITRT-CQ9Q6fWy.cjs} +1 -1
- package/dist/{erDiagram-Q63AITRT-DLihpfSY.js → erDiagram-Q63AITRT-CyJyuZ4T.js} +4 -4
- package/dist/extractHeadings-Bu1mM2zB.cjs +311 -0
- package/dist/{extractHeadings-jpTidOYO.js → extractHeadings-z3AodVn3.js} +6636 -6329
- package/dist/flowDiagram-23GEKE2U-CF3VxB6X.js +7 -0
- package/dist/flowDiagram-23GEKE2U-D3VUCGjn.cjs +1 -0
- package/dist/{ganttDiagram-NO4QXBWP-qrmnl_LY.cjs → ganttDiagram-NO4QXBWP-CxK0RSqW.cjs} +1 -1
- package/dist/{ganttDiagram-NO4QXBWP-Cc8dpB_u.js → ganttDiagram-NO4QXBWP-DhRS80ms.js} +2 -2
- package/dist/{gitGraphDiagram-IHSO6WYX-DEf3gB0s.js → gitGraphDiagram-IHSO6WYX-2Va5zqby.js} +3 -3
- package/dist/{gitGraphDiagram-IHSO6WYX-Bi0LKdq4.cjs → gitGraphDiagram-IHSO6WYX-CN12KReP.cjs} +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.client.cjs +1 -1
- package/dist/index.client.js +1 -1
- package/dist/index.js +1 -1
- package/dist/index.server.cjs +1 -1
- package/dist/index.server.js +246 -241
- package/dist/{infoDiagram-FWYZ7A6U-CC1jQUez.js → infoDiagram-FWYZ7A6U--V_yHphS.js} +1 -1
- package/dist/{infoDiagram-FWYZ7A6U-ByUzaoGp.cjs → infoDiagram-FWYZ7A6U-k83LxwrO.cjs} +1 -1
- package/dist/{ishikawaDiagram-FXEZZL3T-q0Tua53X.cjs → ishikawaDiagram-FXEZZL3T-694D7LFH.cjs} +1 -1
- package/dist/{ishikawaDiagram-FXEZZL3T-BD2ZWvM9.js → ishikawaDiagram-FXEZZL3T-Bd4kOAap.js} +1 -1
- package/dist/{journeyDiagram-5HDEW3XC-Cc_OHYxa.cjs → journeyDiagram-5HDEW3XC-CbcL76rx.cjs} +1 -1
- package/dist/{journeyDiagram-5HDEW3XC-B2d4YZ1X.js → journeyDiagram-5HDEW3XC-Czr00oZx.js} +4 -4
- package/dist/{kanban-definition-HUTT4EX6-CGhp8hq-.cjs → kanban-definition-HUTT4EX6-BNO2VHFH.cjs} +1 -1
- package/dist/{kanban-definition-HUTT4EX6-CVTjOFjf.js → kanban-definition-HUTT4EX6-DYscvXvj.js} +2 -2
- package/dist/{linear-Gki9XU32.js → linear-DHAx74C6.js} +1 -1
- package/dist/{linear-NPD77kko.cjs → linear-DZLxJhtt.cjs} +1 -1
- package/dist/{mindmap-definition-LN4V7U3C-BVMzWil4.cjs → mindmap-definition-LN4V7U3C-CEitacUY.cjs} +1 -1
- package/dist/{mindmap-definition-LN4V7U3C-CcFlbH0m.js → mindmap-definition-LN4V7U3C-DoqEgdhu.js} +3 -3
- package/dist/{pegDiagram-2B236MQR-BjkrlFo4.cjs → pegDiagram-2B236MQR-B8G9cHi4.cjs} +1 -1
- package/dist/{pegDiagram-2B236MQR-BIEbmEyL.js → pegDiagram-2B236MQR-C7BDICCf.js} +3 -3
- package/dist/{pieDiagram-ENE6RG2P-C_zKMY-f.cjs → pieDiagram-ENE6RG2P-Bg4RGsL0.cjs} +1 -1
- package/dist/{pieDiagram-ENE6RG2P-B8b2HOMr.js → pieDiagram-ENE6RG2P-J6aMzjsp.js} +3 -3
- package/dist/{quadrantDiagram-ABIIQ3AL-DM2brpjs.cjs → quadrantDiagram-ABIIQ3AL-B3io0Zj4.cjs} +1 -1
- package/dist/{quadrantDiagram-ABIIQ3AL-CAzEuvrn.js → quadrantDiagram-ABIIQ3AL-DZMEnLkj.js} +2 -2
- package/dist/{railroadDiagram-RFXS5EU6-D4qyeIm0.cjs → railroadDiagram-RFXS5EU6-CHPuNJfr.cjs} +1 -1
- package/dist/{railroadDiagram-RFXS5EU6-Dj5Hhb2C.js → railroadDiagram-RFXS5EU6-b6ccE5L3.js} +3 -3
- package/dist/{requirementDiagram-TGXJPOKE-DxMueY11.cjs → requirementDiagram-TGXJPOKE-4iI6cUK1.cjs} +1 -1
- package/dist/{requirementDiagram-TGXJPOKE-DCsyd9cl.js → requirementDiagram-TGXJPOKE-DyI3IxhA.js} +3 -3
- package/dist/{sankeyDiagram-HTMAVEWB-Djmdo0Ih.js → sankeyDiagram-HTMAVEWB-C4kn0m5M.js} +1 -1
- package/dist/{sankeyDiagram-HTMAVEWB-HPKhkyBx.cjs → sankeyDiagram-HTMAVEWB-Cu9APNc7.cjs} +1 -1
- package/dist/{sequenceDiagram-DBY2YBRQ-3XPFEpyb.cjs → sequenceDiagram-DBY2YBRQ-4nhGxKJK.cjs} +1 -1
- package/dist/{sequenceDiagram-DBY2YBRQ-BsELINW9.js → sequenceDiagram-DBY2YBRQ-Cw7yhFCq.js} +3 -3
- package/dist/{sizeCapture-X5ZJPWSS-CYMPBUJR.js → sizeCapture-X5ZJPWSS-B-QK7YKx.js} +1 -1
- package/dist/{sizeCapture-X5ZJPWSS-31abQGwa.cjs → sizeCapture-X5ZJPWSS-xbVXdoFv.cjs} +1 -1
- package/dist/{stateDiagram-2N3HPSRC-a3NuIfYf.js → stateDiagram-2N3HPSRC-Bzh1K0Rc.js} +2 -2
- package/dist/{stateDiagram-2N3HPSRC-B0XEIOiL.cjs → stateDiagram-2N3HPSRC-Ds2EuiOJ.cjs} +1 -1
- package/dist/{stateDiagram-v2-6OUMAXLB-DGoXPnAk.js → stateDiagram-v2-6OUMAXLB-BlfKLpe-.js} +2 -2
- package/dist/{stateDiagram-v2-6OUMAXLB-BwCXOhvG.cjs → stateDiagram-v2-6OUMAXLB-DRUVmXUz.cjs} +1 -1
- package/dist/styles/markdown.css +1 -1
- package/dist/styles/markdown.standalone.css +3 -0
- package/dist/{swimlanes-5IMT3BWC-BogVCjJZ.cjs → swimlanes-5IMT3BWC-BIWoRJar.cjs} +1 -1
- package/dist/{swimlanes-5IMT3BWC-261b0Snh.js → swimlanes-5IMT3BWC-DUDhAFXh.js} +3 -3
- package/dist/{swimlanesDiagram-G3AALYLV-B-HBl7xR.cjs → swimlanesDiagram-G3AALYLV-BKJ-xuX7.cjs} +1 -1
- package/dist/{swimlanesDiagram-G3AALYLV-0hHND0xf.js → swimlanesDiagram-G3AALYLV-Cw5EI2_0.js} +2 -2
- package/dist/{timeline-definition-FHXFAJF6-B_euDX4t.js → timeline-definition-FHXFAJF6-BFvyhmFu.js} +2 -2
- package/dist/{timeline-definition-FHXFAJF6-Cm4g61OO.cjs → timeline-definition-FHXFAJF6-BZUlhY1Z.cjs} +1 -1
- package/dist/{vennDiagram-L72KCM5P-BL65fZ2Z.js → vennDiagram-L72KCM5P-0cC3-YkU.js} +1 -1
- package/dist/{vennDiagram-L72KCM5P-DCLNzpM1.cjs → vennDiagram-L72KCM5P-CySpaALH.cjs} +1 -1
- package/dist/{wardleyDiagram-EHGQE667-yrrICYTB.cjs → wardleyDiagram-EHGQE667-CTzDdsPw.cjs} +1 -1
- package/dist/{wardleyDiagram-EHGQE667-BbdgmKNq.js → wardleyDiagram-EHGQE667-CttMnmMH.js} +2 -2
- package/dist/{xychartDiagram-FW5EYKEG-1YlGN0q3.cjs → xychartDiagram-FW5EYKEG-CDQbUs0H.cjs} +1 -1
- package/dist/{xychartDiagram-FW5EYKEG-D0ITIjet.js → xychartDiagram-FW5EYKEG-Dy4JEmdB.js} +2 -2
- package/package.json +14 -12
- package/dist/extractHeadings-AC80DPCv.cjs +0 -311
- package/dist/flowDiagram-23GEKE2U-gaIzKUxz.js +0 -7
- package/dist/flowDiagram-23GEKE2U-pAPxQFWB.cjs +0 -1
- package/dist/markdown.css +0 -1
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@ Advanced Markdown renderer for React with support for various extensions and cus
|
|
|
9
9
|
- **Browser Converter**: the same Go converter, compiled to WebAssembly and run in a worker, converts in the browser exactly as the service does, byte for byte, without a round trip (`@aiquants/markdown/converter`).
|
|
10
10
|
- **Custom Extensions & Plugins**: GitHub alerts, Zenn-style directives (`:::message` / `:::details`), single-line display math, and pluggable subscript, superscript, mark highlights, table cell merges, and opt-in embeds: posts and videos of ten SNS and video providers as script-free cross-origin frames, and link cards from the host's metadata endpoint.
|
|
11
11
|
- **Dynamic Configuration**: Easily enable or disable custom extensions dynamically using parse options.
|
|
12
|
-
- **Syntax Highlighting**: Code blocks with Shiki syntax highlighting.
|
|
12
|
+
- **Syntax Highlighting**: Code blocks with Shiki syntax highlighting, every token at a 7:1 contrast ratio or better in the GitHub, Zenn and None styles, light and dark (see [Code blocks](#code-blocks)).
|
|
13
13
|
- **TypeScript**: Full TypeScript support with comprehensive type definitions.
|
|
14
14
|
|
|
15
15
|
## Installation
|
|
@@ -57,7 +57,8 @@ export MARKDOWN_API_BINARY=/path/to/markdown-api
|
|
|
57
57
|
|
|
58
58
|
| 変数 | 既定値 | 用途 |
|
|
59
59
|
| --- | --- | --- |
|
|
60
|
-
| `MARKDOWN_SOCKET_PATH` |
|
|
60
|
+
| `MARKDOWN_SOCKET_PATH` | (必須) | サービスと通信する UNIX ドメインソケットのパス (サービスも同じ変数を読む)。未設定か空なら `parseMarkdown` は変数を名指して失敗し、サービスは起動しない (パスを推し量らない) |
|
|
61
|
+
| `MARKDOWN_SOCKET_MODE` | `0600` | サービスのソケットの権限。`0600` (所有者のみ) か `0660` (所有者とグループ) だけで、ほかの値ではサービスが値を名指して起動しない (ソケットの上では何も認証しないため、ほかの利用者へは開かない) |
|
|
61
62
|
| `MARKDOWN_API_BINARY` | (なし) | 自前ビルドしたバイナリの明示指定 |
|
|
62
63
|
| `MARKDOWN_API_STARTUP_TIMEOUT_MS` | `10000` | 自動起動したサービスが待ち受け開始するまでの猶予 |
|
|
63
64
|
| `MARKDOWN_MAX_SOURCE_BYTES` | `8388608` (8 MiB) | サービスが受け付ける Markdown の本文の最大 (`@import` で取り込んだ分を含む) |
|
|
@@ -74,7 +75,11 @@ export MARKDOWN_API_BINARY=/path/to/markdown-api
|
|
|
74
75
|
import { MarkdownRenderer } from "@aiquants/markdown"
|
|
75
76
|
import type { MarkdownEmbeds } from "@aiquants/markdown/embeds"
|
|
76
77
|
import { parseMarkdown } from "@aiquants/markdown/server"
|
|
77
|
-
|
|
78
|
+
|
|
79
|
+
// The components' styles are a stylesheet, loaded by the host's CSS rather than by this module (see Stylesheets):
|
|
80
|
+
// a Tailwind v4 host: @import "@aiquants/markdown/styles/markdown.css"; (in its Tailwind entry, with no layer())
|
|
81
|
+
// a host without Tailwind: <link rel="stylesheet" href=".../@aiquants/markdown/styles/markdown.standalone.css">
|
|
82
|
+
// A document style (github-markdown.css or zenn-content.css) colours the code blocks and the document itself.
|
|
78
83
|
|
|
79
84
|
// A module constant: the providers whose posts embed, and the host's link-card endpoint (see Embeds)
|
|
80
85
|
const EMBEDS: MarkdownEmbeds = { providers: ["youtube", "x"], linkCardEndpoint: "/api/site_metadata" }
|
|
@@ -228,7 +233,8 @@ const { htmlContent, headings } = await converter.convert(
|
|
|
228
233
|
|
|
229
234
|
| Import | Content |
|
|
230
235
|
| --- | --- |
|
|
231
|
-
| `@aiquants/markdown/styles/markdown.css` | The components' own styles
|
|
236
|
+
| `@aiquants/markdown/styles/markdown.css` | The components' own styles, for a host that builds with Tailwind CSS v4: hand-written rules only, with no `:root` theme variables, no utilities and no preflight. The utilities the components use come from the host's own Tailwind build |
|
|
237
|
+
| `@aiquants/markdown/styles/markdown.standalone.css` | The same styles with the utilities the components use and the theme values they read already compiled in, for a host without Tailwind (or with Tailwind v3). It declares no `:root` or `:host` rule |
|
|
232
238
|
| `@aiquants/markdown/styles/github-markdown.css` | GitHub document style (`markdown-body`) |
|
|
233
239
|
| `@aiquants/markdown/styles/zenn-content.css` | Zenn document style (`znc`) |
|
|
234
240
|
| `@aiquants/markdown/styles/katex.min.css` | KaTeX's own stylesheet, shipped with the fonts it references (`fonts/` next to it) at the version of the bundled `katex` |
|
|
@@ -236,6 +242,27 @@ const { htmlContent, headings } = await converter.convert(
|
|
|
236
242
|
|
|
237
243
|
The document stylesheets size their text in `rem`, so the document follows text-only zoom (the browser's default font size, the root `font-size`) together with the viewer's controls; at the default 16 px root they look exactly as GitHub's and Zenn's own stylesheets.
|
|
238
244
|
|
|
245
|
+
#### Host setup
|
|
246
|
+
|
|
247
|
+
- **A Tailwind v4 host** imports `markdown.css` in its Tailwind entry, tells Tailwind to scan the package's build output for the utilities the components use, and declares the `dark` variant those utilities follow. The path of `@source` is relative to the CSS file that declares it:
|
|
248
|
+
|
|
249
|
+
```css
|
|
250
|
+
@import "tailwindcss";
|
|
251
|
+
/* No layer(): the sheet's link and link-card rules and the diagram's focus ring must stay outside every cascade layer */
|
|
252
|
+
@import "@aiquants/markdown/styles/markdown.css";
|
|
253
|
+
@source "../node_modules/@aiquants/markdown/dist/**/*.js";
|
|
254
|
+
/* The components' dark: utilities follow this build's dark variant; this one is the standalone sheet's */
|
|
255
|
+
@custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
The host's utilities and `@theme` stay the host's own: the sheet carries no `:root` variable and no utility that could override them. Do not link `markdown.css` a second time as a separate stylesheet.
|
|
259
|
+
The components' `dark:` utilities come from the host's build, so they follow the host's `dark` variant, which is Tailwind's `prefers-color-scheme` media query unless the host declares one. Declare one that matches how the page signals dark mode.
|
|
260
|
+
The declaration above is the standalone sheet's: it darkens under a `.dark` ancestor (a class-based theme toggle) or a `[data-theme="dark"]` ancestor (which `MarkdownRenderer` and `MarkdownViewer` set from their `theme` prop), the signal the package's hand-written dark rules (code-block controls, Mermaid controls, embed boxes, alert borders) always follow. A host whose variant differs gets the utilities in its own scheme while those rules keep the package's signal.
|
|
261
|
+
The `@source` over the whole `dist` also scans the Mermaid diagram chunks bundled there, which only adds utilities for class-like words in them to the host's CSS. No narrower glob is stable: the components land in a chunk the bundler names by content hash.
|
|
262
|
+
- **Any other host** links `markdown.standalone.css` instead. Never load it together with `markdown.css` or with a Tailwind v4 build of the host: its utilities would meet the host's own in the same cascade layer. A banner comment near the top of the file, after Tailwind's own, says so.
|
|
263
|
+
- **Never both** sheets of the components on one page.
|
|
264
|
+
- **The document styles** (`github-markdown.css`, `zenn-content.css`, `message.css`, `details.css`, `katex.min.css`) are linked as before. Load `zenn-content.css` after `github-markdown.css`: where both match, the Zenn code block's navy and the Zenn token colours win by order. The colours of the code blocks come from these sheets, not from the components' own (see [Code blocks](#code-blocks)).
|
|
265
|
+
|
|
239
266
|
### Raw HTML
|
|
240
267
|
|
|
241
268
|
Every renderer of the package — `MarkdownRenderer` (and so `MarkdownViewer`) for the converter's HTML, and `NodesRenderer`'s raw HTML nodes and HTML containers for an mdast tree — renders raw HTML through one allow list. It runs on the tree html-react-parser builds, right where the tree is rendered, so it needs no DOM and holds the same under server rendering and in the browser; nothing is serialized and parsed again.
|
|
@@ -307,7 +334,7 @@ It links to the written `href` (never `og:url`), takes the host name from the `h
|
|
|
307
334
|
|
|
308
335
|
A pending card has the height of the chosen size, so an answer never shifts the page. A link the endpoint gives no card (a `204 No Content` with a reason, below) becomes a compact card whatever the size: a leading icon — a building for `private-network`, a globe otherwise — then the host name and the URL, marked `data-link-card="compact"` and `data-link-card-reason="<reason>"`. It may shrink a pending banner or full card; Chromium's scroll anchoring keeps the visible content in place when that happens above the viewport. An error answer renders the paragraph.
|
|
309
336
|
Every link that gets no full card writes one `console.info` line naming the link and the reason, for example `[markdown] No link card for <href> (private-network)`; an error answer names its cause instead — `HTTP <status>` for another status, `HTTP 204 without a known skip reason` for a 204 whose `X-Link-Card-Skip` is missing or unknown, `HTTP 200, not JSON` or `HTTP 200, not a JSON object` for a 200 that is not a JSON object, `network error` for a failed request — and a card that unmounts before its answer writes nothing.
|
|
310
|
-
The card's look — light and dark (`data-theme`), hover, keyboard focus ring — comes from `styles/markdown.css
|
|
337
|
+
The card's look — light and dark (`data-theme`), hover, keyboard focus ring — comes from `styles/markdown.css` (`styles/markdown.standalone.css` carries the same rules), outside every cascade layer, so the GitHub and Zenn display styles cannot override it with their `a` and `img` rules; every size shares that one frame. The rules for a broken link (`a[data-link-kind][data-doc-exists="false"]`) sit outside the layers for the same reason. A host must therefore import `markdown.css` without `layer()`: a layered rule loses to the unlayered display styles whatever its specificity.
|
|
311
338
|
|
|
312
339
|
The endpoint contract:
|
|
313
340
|
|
|
@@ -429,6 +456,26 @@ The alignment button needs `onAlignChange`, `showAlign` (on by default) and a `w
|
|
|
429
456
|
|
|
430
457
|
With the `GitHub` and `Zenn` styles of `DEFAULT_MARKDOWN_STYLES`, a wide table or a long code line scrolls inside its own box. Content with a fixed width wider than the column, such as an embedded `<iframe>` whose `width` attribute exceeds it, overflows the column, and so does any wide content under the `None` style, which loads no stylesheet; the scroll container then scrolls sideways.
|
|
431
458
|
|
|
459
|
+
### Code blocks
|
|
460
|
+
|
|
461
|
+
A fenced code block is highlighted by Shiki with two themes at once, `solarized-light` and `github-dark-high-contrast`. A token carries no colour of its own: its `style` holds only the themes' custom properties (`--shiki-light` and `--shiki-dark`, with `--shiki-light-font-style`, `--shiki-dark-font-weight` and the like for the font style, weight and decoration), and the `<pre>` keeps the same properties. Neither the `<pre>` nor a line sets a background or a text colour.
|
|
462
|
+
An info string of the form `diff:typescript:my-file.ts` makes a diff (the leading `+` or `-` of a line is replaced by a ➕ or ➖ sign, so a change never rests on colour alone) of the language `typescript` under the file name `my-file.ts`; the `diff:` and the file name are optional.
|
|
463
|
+
|
|
464
|
+
The colours come from the display stylesheet that paints the block, in a block of rules generated into the sheet:
|
|
465
|
+
|
|
466
|
+
| Display style | Stylesheet | Tokens painted | Block | Added / removed lines |
|
|
467
|
+
| --- | --- | --- | --- | --- |
|
|
468
|
+
| GitHub, None (the renderer always nests the document in `.markdown-body`), light | `github-markdown.css` | `--shiki-light` | GitHub's muted surface | `#defff6` / `#fff6f6` |
|
|
469
|
+
| GitHub, None, dark (`[data-theme="dark"]`) | `github-markdown.css` | `--shiki-dark` | GitHub's muted surface | `#001f1c` / `#2d1219` |
|
|
470
|
+
| Zenn, light and dark | `zenn-content.css` | `--shiki-dark` | Zenn's navy, `#1a2638`, in both schemes | `#002b2e` / `#361e2c` |
|
|
471
|
+
|
|
472
|
+
A block rendered without such a sheet shows plain inherited text: the components carry no fallback colour. Load `zenn-content.css` after `github-markdown.css`, as above.
|
|
473
|
+
|
|
474
|
+
- **Contrast**: every token reaches at least 7:1 (WCAG AAA) on its block and on the tinted lines of a diff, in None, GitHub and Zenn, light and dark (the lowest measured in a browser is 7.01 for None and GitHub in the light scheme, 8.16 in the dark one; 7.15 for Zenn in the light scheme, 7.19 in the dark one).
|
|
475
|
+
- **Palette**: a theme colour that falls below 7:1 on any of those backgrounds is replaced by one with the same hue and chroma (chroma is lowered only to stay inside sRGB), moved in lightness only as far as 7:1 needs. The tints keep the hue of a translucent green and red and take the luminance of the block, so a tint never lowers a token's contrast.
|
|
476
|
+
- **Hooks** are data attributes, not classes: `data-aqmd-code-block` on the block's root, `data-aqmd-code-filename` on the file name's tab, `data-aqmd-code-copy` on the copy button (the copy button of a display-math block carries it too) and `data-aqmd-diff="add"` or `"remove"` on a changed line, which sets no inline background.
|
|
477
|
+
- **Copy button and file name**: `markdown.css` colours them (`#1f2937` on `#e5e7eb`, `#d1d5db` on hover; in the dark scheme, `.dark` or `[data-theme="dark"]` on an ancestor, `#f3f4f6` on `#374151`, `#4a5361` on hover), every pair at 7:1 or more. Under `(pointer: coarse)` the copy buttons are at least 44 × 44 px.
|
|
478
|
+
|
|
432
479
|
### Mermaid diagrams
|
|
433
480
|
|
|
434
481
|
A fenced code block in the `mermaid` language renders as `MermaidDiagram`, a block that takes its containing block's width (its slot). The slot's first child is a hidden measuring element, `[data-aqmd-mermaid-measure]` (no height, clipped, `visibility: hidden`, `aria-hidden`), present while the diagram loads, shows or fails; the component measures the slot's width with it.
|
|
@@ -439,7 +486,28 @@ Mermaid draws in that element and the component shows the result in the slot, so
|
|
|
439
486
|
- Nothing is drawn while the slot has no width (inside a closed `<details>` the browser does not lay out, or a hidden panel): the loading text stays until the slot gets a width. A drawing already under way when the slot loses its width finishes at the width it was given.
|
|
440
487
|
- When the width of a slot showing a gantt chart changes (a splitter drag, a window resize), the chart is drawn again at the new width 200 ms after the last change, unless the slot then has no width or the width of the latest drawing. The shown chart stays until the new one replaces it, and the new one starts at the initial zoom and pan. Other diagram types take their size from their text and are never drawn again for a width change.
|
|
441
488
|
- A drawing that finishes after a newer one started, after the diagram's text changed or after the component unmounted is discarded.
|
|
442
|
-
- Touch and pen
|
|
489
|
+
- **Touch and pen**: the default mode, `both-shift`, is the same for every pointer, and Shift gates only the mouse. A finger or pen pans the drawing only while the drawing overflows its frame (zoomed in, or capped, see below); at fit it scrolls the page over the diagram as anywhere else. The component writes `touch-action` on the diagram's `<svg>` and on its frame to match, rewrites it whenever the zoom or pan changes, the mode changes or the frame resizes, and removes it (with the other styles Panzoom wrote) when it tears its Panzoom instance down:
|
|
490
|
+
|
|
491
|
+
| Mode | Drawing fits its frame | Drawing overflows its frame |
|
|
492
|
+
| --- | --- | --- |
|
|
493
|
+
| `none` | `auto` | `auto` |
|
|
494
|
+
| `zoom` | `pan-x pan-y` | `pan-x pan-y` |
|
|
495
|
+
| `pan`, `pan-shift` | `auto` | `pinch-zoom` |
|
|
496
|
+
| `both`, `both-shift` | `pan-x pan-y` | `none` |
|
|
497
|
+
|
|
498
|
+
- **Frame and clipping**: the shown drawing sits in a frame, `[data-aqmd-mermaid-frame]` (it also keeps `data-testid="mermaid-diagram"`), that clips it with `overflow: clip` from the components' stylesheet (the component writes no inline `overflow`), and the `<svg>` is a block. A zoomed drawing therefore never widens the frame or scrolls the document sideways. `data-aqmd-mermaid-overflowing` is `"true"` while the drawing overflows the frame and `"false"` otherwise.
|
|
499
|
+
- **Zoom bounds**: the zoom runs from the drawing as laid out in the frame (1×) to 200 % of the diagram's natural size (WCAG 1.4.4), the width at which one unit of the drawing is one CSS px, read from the drawing itself: the width of its `viewBox`, which the browser scales to the drawing's box; a drawing without a `viewBox` (Mermaid's `info`) is never scaled, so its layout is its natural size and it zooms up to 2×. Only a drawing whose `viewBox` has no usable size (not four numbers with a positive width) shows an error and a retry button in its place.
|
|
500
|
+
A drawing of 1993.6 px natural width laid out in a 372 px frame zooms up to 10.72×; a diagram that already fits zooms up to 2×. The view is clamped on each axis like a scroll container: a drawing larger than the frame keeps covering it, a smaller one stays inside.
|
|
501
|
+
- **Zoom controls**: the zoom buttons and the `+`, `=` and `-` keys zoom about the frame's centre, Shift+wheel about the pointer. Two fingers (touch or pen) pinching zoom about their midpoint and follow it, in the modes that zoom (`zoom`, `both`, `both-shift`); in the other modes the browser keeps the pinch: a second finger ends a finger's pan of an overflowing drawing, so `touch-action: pinch-zoom` lets the page be pinch-zoomed, and the remaining finger pans again only from the next touch. Lifting one finger of a pinch continues a pan with the other where the mode allows one.
|
|
502
|
+
While a finger or pen pans or pinches the drawing, the frame cancels the default action of its `touchmove` events, so the browser starts no momentum scroll and the next tap on a control is never spent stopping one. That non-passive listener is bound only while the drawing overflows its frame: over a fitting diagram a finger scrolls without the browser waiting for the page's script.
|
|
503
|
+
- **Keyboard**: the frame takes focus (`tabindex="0"`, `role="group"`) and is named by the `diagram` label, which a hidden element carries with its own `lang`, so the drawing's text is not marked with it. On the frame itself, not on a link inside it and not with Ctrl, Meta or Alt held, the arrow keys pan the view by 25.9 % of the frame (only when the view can move; otherwise the page scrolls), `+` and `=` zoom in, `-` zooms out and `0` resets.
|
|
504
|
+
When an element inside the drawing takes the focus (a node's link, by Tab), the view pans by the least distance that brings the element's box inside the frame, because the clipping frame is no scroll container the browser could scroll to it.
|
|
505
|
+
- **Pan buttons**: four buttons (`pan-left`, `pan-up`, `pan-down`, `pan-right`) are shown in the toolbar only while the drawing overflows its frame, so panning never needs a drag (WCAG 2.5.7); at fit they keep their slots hidden (`visibility: hidden`: not focusable, not exposed), so zooming never adds a toolbar row or moves the frame; each moves the view by the same step as the arrow keys.
|
|
506
|
+
- **Sizes**: under a coarse pointer (`(pointer: coarse)`, a touch screen) every control is 44 × 44 px and each menu item at least 44 px tall; under a fine pointer the controls are 32 × 32 px (the reset button 36 × 32). A coarse pointer also turns the toolbar into a wrapping row above the frame, which never covers the drawing, and opens the menu from the button's left edge; a fine pointer keeps the toolbar over the frame's top-right corner.
|
|
507
|
+
- **Tall diagrams**: under a coarse pointer the frame is at most `calc(100svh - 2 * 2.75rem)` tall, so two 44 px bands of the page stay outside it wherever it sits and a finger can scroll the page past the diagram; the clipped drawing then overflows and pans by finger.
|
|
508
|
+
- **Touch menu**: under a coarse pointer the menu button is named by `interactionModeTouch` and the menu lists four items, `none`, `zoom`, `pan` and `both`, worded for touch (see [Labels and languages](#labels-and-languages)); the checked item is the touch counterpart of the mode in force (`pan-shift` shows `pan`, `both-shift` shows `both`), and choosing an item sets that mode. Escape closes a menu and returns the focus to its button.
|
|
509
|
+
- **Colours and focus ring**: the controls, the menu items, the checked item, the error message and the retry button reach 7:1 against their surfaces in both schemes (dark when `.dark` or `[data-theme="dark"]` is on an ancestor). The focus ring of the frame, the toolbar controls and the retry button is a 2 px `#003abc` outline with a white 4 px halo, 9:1 apart, so some part of it stands out on any background (WCAG 2.4.13, 1.4.11); the menu items draw it inset. The ring's rules sit outside every cascade layer, so the controls' `shadow` utility cannot replace the halo.
|
|
510
|
+
- **Hooks**: `data-aqmd-mermaid` (the root, which carries the palette's CSS variables), `data-aqmd-mermaid-frame`, `data-aqmd-mermaid-toolbar`, `data-aqmd-mermaid-control` (`mode`, `zoom-in`, `zoom-out`, `reset`, `pan-left`, `pan-up`, `pan-down` or `pan-right`), `data-aqmd-mermaid-menu`, `data-aqmd-mermaid-error` and `data-aqmd-mermaid-retry`.
|
|
443
511
|
|
|
444
512
|
### Viewer toolbar
|
|
445
513
|
|
|
@@ -464,8 +532,12 @@ The scroll container (`[data-aqmd-scroll-container]`) publishes `--aqmd-toolbar-
|
|
|
464
532
|
The value is measured again whenever the container, the content or the toolbar resizes, the window resizes, the alignment changes (the content moves sideways), anything scrolls (a toolbar fixed to the viewport stays put while the container moves; at most once per frame), and the two inset properties change (an invisible box inside the toolbar, `[data-aqmd-toolbar-inset-probe]`, takes its size from them).
|
|
465
533
|
|
|
466
534
|
Each menu's popover opens below the toolbar at its inline end, whichever button opened it, and is never wider than the scroll container less the toolbar's distance from its inline end, so the popover stays inside the container at any width and text size. The scroll container is an inline-size query container (`container-type: inline-size`) for that measure; the menu activated last stacks on top.
|
|
535
|
+
A popover is also never taller than the room below its top in the scroll container's visible part (the container's bottom, clipped to the visual viewport), less 8 px: it scrolls inside instead (`overflow-y: auto`, `overscroll-behavior: contain`, so its scroll never chains to the document), so the last entry of a long table of contents stays reachable on a phone and in a landscape window.
|
|
536
|
+
The bound is the popover's border box (the popover is `box-sizing: border-box` whatever the host's default) and is measured once the scroll container is attached (so a popover that is already open when the viewer mounts, such as a pinned menu a host keeps across documents, gets it too), and again while the popover is open, whenever the container resizes, the window or the visual viewport resizes or scrolls (the on-screen keyboard, a pinch-zoom) and anything scrolls.
|
|
467
537
|
|
|
468
538
|
An open, unpinned popover closes on Escape while the focus is inside its menu, returns the focus to its button and calls `preventDefault()` on that keydown, so an outer Escape handler can skip a key the viewer consumed. Escape is not consumed while no popover is open.
|
|
539
|
+
It also closes on a pointer press outside its menu. A touch press that closes it consumes the click it produces (on the document's capture phase, within 800 ms and 16 px of the press), so the tap that dismisses the popover does not also follow a link or press a heading under the finger; a press that turns into a scroll produces no click, and once the browser cancels its pointer the next tap is not consumed; a press on the toolbar itself (another menu's button) is not consumed, and a mouse press's click goes through.
|
|
540
|
+
Under a coarse pointer the toolbar's buttons, the popovers' pin buttons, the style and alignment items and the table of contents' entries are 44 px targets (WCAG 2.2 enhanced target size; a `TableOfContents` entry is padded above and below by half of what its line box lacks of 44 px, `max(0px, (2.75rem - 1lh) / 2)`, so it holds at any font size, and the entries stack edge to edge); a popover's heading and the table of contents' links keep 7:1 against the popover in both themes.
|
|
469
541
|
|
|
470
542
|
### Host scroll bar
|
|
471
543
|
|
|
@@ -484,15 +556,23 @@ Given the prop, the viewer renders
|
|
|
484
556
|
| `[data-aqmd-scroll-bar]` | The slot at the row's inline end (`flex: none`), as tall as the row; its child is stretched to the full height |
|
|
485
557
|
|
|
486
558
|
The function receives the scroll container, `[data-aqmd-scroll-container]`, the same element with the same hooks and classes as without the prop. It is called on every render once the container is mounted, before the first paint. The bar reads and writes the container's scroll position itself (`scrollTop`, `scrollHeight`, `clientHeight`, `scroll` events).
|
|
559
|
+
A bar that watches the container's size or children must not render React synchronously from a `ResizeObserver` or `MutationObserver` callback (for example by notifying a `useSyncExternalStore` store there). React would then render inside the browser's delivery of the observations, and before such a render it runs the page's pending effects and updates, the viewer's insertion of a drawn Mermaid diagram among them. Elements observed in the same delivery then change size, and the browser reports `ResizeObserver loop completed with undelivered notifications`.
|
|
560
|
+
Measure, and notify React, on the next animation frame instead; notifying from the container's `scroll` event is fine, because the browser dispatches it before it delivers the observations.
|
|
561
|
+
|
|
562
|
+
The native vertical scrollbar never shows beside the host's bar. How it is hidden depends on how the platform draws scrollbars:
|
|
487
563
|
|
|
488
|
-
|
|
489
|
-
The native horizontal scrollbar keeps its native look, spans exactly the visible width and stays usable
|
|
490
|
-
|
|
564
|
+
- **Scrollbars that take space** (Windows, Linux, macOS with "Always" or a mouse attached): only the vertical one is hidden. The scroll container always reserves it (`overflow-y: scroll`, so its thickness is constant), its border box (`box-sizing: border-box`, whatever the host's default) is widened by the measured thickness (`width: calc(100% + <thickness>px)`), and the clipping cell cuts that strip off.
|
|
565
|
+
The native horizontal scrollbar keeps its native look, spans exactly the visible width and stays usable. No `::-webkit-scrollbar` or `scrollbar-width` rule is involved, so a host's `scrollbar-color` or `scrollbar-width` neither breaks the hiding nor is overridden.
|
|
566
|
+
- **Scrollbars overlaid on the content** (phones, tablets, macOS by default, Firefox's and GTK's overlay modes): such a bar takes no space, so there is no strip to cut off, and it would be drawn over the content beside the host's bar while scrolling. The scroll container takes `scrollbar-width: none` instead, which hides both native scrollbars, the horizontal one included (overriding a host's `scrollbar-width` there).
|
|
567
|
+
|
|
568
|
+
Either way the wheel, the keyboard, touch and the trackpad scroll in both directions. The cell uses `overflow: clip` rather than `hidden`, so nothing can scroll the cell itself, and it creates no containing block, so the fixed toolbar is neither moved nor clipped by it.
|
|
569
|
+
Coverage: scrollbars that take space are hidden in every browser that supports `overflow: clip` (Chromium 90, Firefox 81, Safari 16); overlaid ones in every browser that supports `scrollbar-width` (Chromium 121, Firefox 64, Safari 18.2), and they stay visible while scrolling in older ones. The right-to-left inline end is handled the same way.
|
|
491
570
|
|
|
492
571
|
The thickness and the slot's width are measured in the scroll container's own CSS px, which a CSS `zoom` or a transform above it makes differ from the viewport's: a native scrollbar keeps its size on screen, so under `zoom: 1.1` its 15 px are 13.64 of the container's px.
|
|
493
|
-
The container is positioned (`position: relative`) and holds an invisible
|
|
572
|
+
The container is positioned (`position: relative`) and holds an invisible box stretched across its padding box, `[data-aqmd-scroll-bar-probe]` (`aria-hidden`, out of flow, no larger than the padding box); the thickness is the container's rect width less that box's, converted by the ratio of the container's rect width to its computed width, less its side borders.
|
|
573
|
+
The box is a scroller itself with nothing to scroll (`overflow-y: scroll`), and its own vertical scrollbar tells how the platform draws scrollbars: the platform overlays them when the container's thickness is 0 and the box's own scrollbar takes no space either (`offsetWidth` equals `clientWidth`). The box, not the container, is read for this because the container keeps measuring 0 once its scrollbars are hidden, while the box follows the platform: when the platform switches (macOS's setting, a mouse attached or removed), the box's content box narrows or widens and the area measures again.
|
|
494
574
|
It is rounded up to a whole px, because the clip must never leave any of the native bar showing: the price is less than 1 px of the container's own px cut off its inline-end padding and the end of the native horizontal scrollbar (0.36 px at `zoom: 1.1`, none where the thickness is whole).
|
|
495
|
-
Both are measured before the first paint and again whenever the container or the slot resizes and the window resizes (a page zoom changes a scrollbar's thickness in CSS px). The floating toolbar keeps the slot's measured width from the inline end instead of a native scrollbar's 24 px, and each popover's maximum width uses the same clearance.
|
|
575
|
+
Both are measured before the first paint and again whenever the container, the probe or the slot resizes and the window resizes (a page zoom changes a scrollbar's thickness in CSS px). The floating toolbar keeps the slot's measured width from the inline end instead of a native scrollbar's 24 px, and each popover's maximum width uses the same clearance.
|
|
496
576
|
|
|
497
577
|
Everything else keeps using the native scroller: fragment and table-of-contents scrolling with `scroll-padding-block-start`, the scroll position kept across a display-style change, link-card visibility observation, embed minimum widths measured from the content column, and the browser's scroll anchoring. Without the prop, the scroll container is the viewer's root element with its native scrollbars, and no row, cell or slot is rendered. Switching between given and omitted moves the scroll container onto another element, which starts at the top.
|
|
498
578
|
|
|
@@ -500,7 +580,7 @@ The layout is the exported `HostedScrollArea` (next section), which hosts can us
|
|
|
500
580
|
|
|
501
581
|
### Hosted scroll area
|
|
502
582
|
|
|
503
|
-
`HostedScrollArea` (props `HostedScrollAreaProps`) is the layout behind `renderScrollBar`, exported so a host can give any scroller of its own (an image canvas, a media stage, a panel's scroll area) the same bar. It renders the caller's scroller and, given `renderScrollBar`, the same row, clipping cell, slot and probe as the viewer: the host's bar replaces the native vertical scrollbar, and the native horizontal one stays.
|
|
583
|
+
`HostedScrollArea` (props `HostedScrollAreaProps`) is the layout behind `renderScrollBar`, exported so a host can give any scroller of its own (an image canvas, a media stage, a panel's scroll area) the same bar. It renders the caller's scroller and, given `renderScrollBar`, the same row, clipping cell, slot and probe as the viewer: the host's bar replaces the native vertical scrollbar, and the native horizontal one stays where the platform's scrollbars take space (where it overlays them, both are hidden, as above).
|
|
504
584
|
|
|
505
585
|
```tsx
|
|
506
586
|
<HostedScrollArea
|
|
@@ -521,7 +601,7 @@ The layout is the exported `HostedScrollArea` (next section), which hosts can us
|
|
|
521
601
|
| `rowClassName`, `rowStyle` | Place the row in its parent, with a bar only: the row takes the scroller's place there, so a flex item's `flex` and minimum sizes go here. `rowStyle` is merged over the row's own `display: flex; inline-size: 100%; block-size: 100%` and zero minimum sizes. |
|
|
522
602
|
| `onBarInlineSizeChange` | Called with the slot's measured width, in the scroller's own CSS px, whenever it changes, before the paint that shows it. The width is 0 before the first call and returns to 0 when the bar is removed. The viewer keeps its floating toolbar clear of the bar with it. |
|
|
523
603
|
|
|
524
|
-
With a bar, the area owns four of the scroller's styles, `position: relative`, `box-sizing: border-box`, `overflow-y: scroll` and `width: calc(100% + <thickness>px)`, and appends the probe as its last child
|
|
604
|
+
With a bar, the area owns four of the scroller's styles, `position: relative`, `box-sizing: border-box`, `overflow-y: scroll` and `width: calc(100% + <thickness>px)`, and a fifth, `scrollbar-width: none`, while the platform overlays its scrollbars; it appends the probe as its last child. The rest of `scrollerProps.style` and the class are kept, so the horizontal overflow stays the caller's. The scroller must be as tall as the clipping cell (`block-size: 100%`). The hiding, the measurement under zoom and their coverage are those described in the previous section.
|
|
525
605
|
|
|
526
606
|
### Table of contents
|
|
527
607
|
|
|
@@ -562,7 +642,20 @@ const headingHref: MarkdownHeadingHrefResolver = (heading) => `/docs/guide.md#${
|
|
|
562
642
|
|
|
563
643
|
Every name and text the viewer draws comes from `labels` (`MarkdownViewerLabels`), including the table-of-contents and alignment controls and, through the `mermaid*` keys, the controls of each Mermaid diagram (`MermaidDiagram` takes `MermaidDiagramLabels` as `labels`).
|
|
564
644
|
A label you pass carries no language of its own and is read in your page's language.
|
|
565
|
-
A built-in label marks the element that bears it with its own language: the status texts and style controls are English (`lang="en"`), the table-of-contents, alignment and Mermaid menu controls are Japanese (`lang="ja"`), and the Mermaid zoom buttons are English. The embed labels (`embeddedVideo`, `embeddedPost`, `embeddedFrame`) are English. `DEFAULT_MARKDOWN_VIEWER_LABELS`, `DEFAULT_MERMAID_DIAGRAM_LABELS` and `DEFAULT_MARKDOWN_EMBED_LABELS` hold the built-in texts.
|
|
645
|
+
A built-in label marks the element that bears it with its own language: the status texts and style controls are English (`lang="en"`), the table-of-contents, alignment and Mermaid menu controls are Japanese (`lang="ja"`), and the Mermaid zoom and pan buttons and the diagram's frame name are English. The embed labels (`embeddedVideo`, `embeddedPost`, `embeddedFrame`) are English. `DEFAULT_MARKDOWN_VIEWER_LABELS`, `DEFAULT_MERMAID_DIAGRAM_LABELS` and `DEFAULT_MARKDOWN_EMBED_LABELS` hold the built-in texts.
|
|
646
|
+
|
|
647
|
+
The Mermaid keys of `MermaidDiagramLabels`, all optional (the viewer's key for each is `mermaid` followed by the key with a capital first letter: `panUp` is `mermaidPanUp`):
|
|
648
|
+
|
|
649
|
+
| Key | Names | Built-in text | `lang` |
|
|
650
|
+
| --- | --- | --- | --- |
|
|
651
|
+
| `interactionMode` | The mode menu's button and the menu under a fine pointer | マウス操作モード | `ja` |
|
|
652
|
+
| `interactionModeTouch` | The same under a coarse pointer (a touch screen) | タッチ操作モード | `ja` |
|
|
653
|
+
| `modeNone`, `modeZoom`, `modePan`, `modePanShift`, `modeBoth`, `modeBothShift` | The items of the mouse menu | 操作なし / 拡大縮小のみ / 移動のみ (左ドラッグ) / 移動のみ (Shift+ドラッグ) / 拡大縮小+移動 (左ドラッグ) / 拡大縮小+移動 (Shift+ドラッグ) | `ja` |
|
|
654
|
+
| `modeNoneTouch`, `modeZoomTouch`, `modePanTouch`, `modeBothTouch` | The items of the touch menu (`none`, `zoom`, `pan`, `both`) | 操作なし (指はページをスクロール) / 拡大縮小のみ (2 本指) / 移動のみ (はみ出す図を 1 本指でドラッグ) / 拡大縮小+移動 (2 本指・はみ出す図は 1 本指) | `ja` |
|
|
655
|
+
| `zoomIn`, `zoomOut`, `resetView` | The zoom and reset buttons | Zoom In / Zoom Out / Reset View | `en` |
|
|
656
|
+
| `panUp`, `panDown`, `panLeft`, `panRight` | The pan buttons, shown while the drawing overflows its frame | Pan Up / Pan Down / Pan Left / Pan Right | `en` |
|
|
657
|
+
| `diagram` | The diagram's focusable frame | Diagram (arrow keys pan, + and - zoom, 0 resets) | `en` |
|
|
658
|
+
| `retry` | The retry button after a failed drawing | 再試行 | `ja` |
|
|
566
659
|
|
|
567
660
|
### Settings without React
|
|
568
661
|
|
|
@@ -704,7 +797,7 @@ The markup is the one the `ZennMessageNode` / `ZennDetailsNode` components rende
|
|
|
704
797
|
|
|
705
798
|
| Stylesheet | Styles |
|
|
706
799
|
| --- | --- |
|
|
707
|
-
| `@aiquants/markdown/styles/markdown.css` | Package core sheet. Includes a theme-independent baseline for GitHub alerts (GitHub's light and dark palette, dark via `.dark` or `[data-theme="dark"]`), written with zero-specificity `:where()` selectors so any display style overrides it. |
|
|
800
|
+
| `@aiquants/markdown/styles/markdown.css` | Package core sheet (`markdown.standalone.css` carries the same rules). Includes a theme-independent baseline for GitHub alerts (GitHub's light and dark palette, dark via `.dark` or `[data-theme="dark"]`), written with zero-specificity `:where()` selectors in `@layer components` so any display style overrides it. |
|
|
708
801
|
| `@aiquants/markdown/styles/github-markdown.css` | The GitHub display style (`.markdown-body`), including GitHub's own alert rules, which win over the baseline. |
|
|
709
802
|
| `@aiquants/markdown/styles/message.css` | `:::message` boxes (`aside.message`), in every display style. The `!` symbol (`.message-symbol`) is not selectable, so copying a message copies its text only. |
|
|
710
803
|
| `@aiquants/markdown/styles/details.css` | `:::details` boxes (`.markdown-details`), in every display style. A summary focused from the keyboard (`:focus-visible`) shows the GitHub style's focus ring, `2px solid` drawn `2px` inside its edge, in `#0969da` (`#1f6feb` under `[data-theme="dark"]`); a mouse press shows none. |
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { g as p, r as u, d as a } from "./chunk-MOJQB5TN-
|
|
2
|
-
import { p as f } from "./chunk-JWPE2WC7-
|
|
3
|
-
import { _ as n, Q as o } from "./extractHeadings-
|
|
1
|
+
import { g as p, r as u, d as a } from "./chunk-MOJQB5TN-CEUtU-PA.js";
|
|
2
|
+
import { p as f } from "./chunk-JWPE2WC7-CNmttOZb.js";
|
|
3
|
+
import { _ as n, Q as o } from "./extractHeadings-z3AodVn3.js";
|
|
4
4
|
import { M as c, b as d } from "./cynefin-VYW2F7L2-Bkk-F_Js.js";
|
|
5
5
|
var v = d().RailroadAbnf.parser.LangiumParser, i = /* @__PURE__ */ n((e) => {
|
|
6
6
|
const r = e.alternatives.map(g);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./chunk-MOJQB5TN-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./chunk-MOJQB5TN-sLs8lWY5.cjs"),u=require("./chunk-JWPE2WC7-C27eOtyn.cjs"),n=require("./extractHeadings-Bu1mM2zB.cjs"),i=require("./cynefin-VYW2F7L2-MpAliYy9.cjs");var p=i.createRailroadAbnfServices().RailroadAbnf.parser.LangiumParser,o=n.__name(e=>{const r=e.alternatives.map(c);return r.length===1?r[0]:{type:"choice",alternatives:r}},"transformAlternation"),c=n.__name(e=>{const r=e.elements.map(d);return r.length===1?r[0]:{type:"sequence",elements:r}},"transformConcatenation"),f=n.__name(e=>{if(e.includes("*")){const[t,s]=e.split("*"),l=t?parseInt(t,10):0,m=s?parseInt(s,10):1/0;return{min:l,max:m}}const r=parseInt(e,10);return{min:r,max:r}},"parseRepeat"),d=n.__name(e=>{const r=b(e.primary);if(!e.repeat)return r;const{min:t,max:s}=f(e.repeat);return t===0&&s===1?{type:"optional",element:r}:{type:"repetition",element:r,min:t,max:s}},"transformElement"),b=n.__name(e=>{switch(e.$type){case"AbnfStringLiteral":return{type:"terminal",value:e.value};case"AbnfNumVal":return{type:"terminal",value:e.value};case"AbnfRuleName":return{type:"nonterminal",name:e.name};case"AbnfGroup":return o(e.element);case"AbnfOptionalGroup":return{type:"optional",element:o(e.element)};default:throw new Error(`Unsupported ABNF primary node: ${e.$type}`)}},"transformPrimary"),g=n.__name(e=>({name:e.name,definition:o(e.definition)}),"transformRule"),v=n.__name(e=>{u.populateCommonDb(e,a.db),e.title&&a.db.setTitle(e.title),e.rules.map(r=>a.db.addRule(g(r)))},"populateDb"),y={parse:n.__name(e=>{a.db.clear(),n.log.debug("[ABNF Parser] Starting Langium parse");const r=p.parse(e);if(r.lexerErrors.length>0||r.parserErrors.length>0)throw new i.MermaidParseError(r);const t=r.value;n.log.debug("[ABNF Parser] Parsed rules:",t.rules.length),v(t),n.log.debug("[ABNF Parser] Parse complete")},"parse"),parser:{yy:a.db}},_={parser:y,db:a.db,renderer:a.renderer,styles:a.getStyles};exports.diagram=_;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const n=require("./extractHeadings-
|
|
1
|
+
"use strict";const n=require("./extractHeadings-Bu1mM2zB.cjs");function $(o){return o.innerRadius}function b(o){return o.outerRadius}function k(o){return o.startAngle}function _(o){return o.endAngle}function nn(o){return o&&o.padAngle}function en(o,x,D,P,h,v,S,s){var E=D-o,r=P-x,e=S-h,p=s-v,i=p*E-e*r;if(!(i*i<n.epsilon))return i=(e*(x-v)-p*(o-h))/i,[o+i*E,x+i*r]}function M(o,x,D,P,h,v,S){var s=o-D,E=x-P,r=(S?v:-v)/n.sqrt(s*s+E*E),e=r*E,p=-r*s,i=o+e,u=x+p,c=D+e,f=P+p,j=(i+c)/2,l=(u+f)/2,y=c-i,g=f-u,A=y*y+g*g,R=h-v,T=i*f-c*u,H=(g<0?-1:1)*n.sqrt(n.max(0,R*R*A-T*T)),I=(T*g-y*H)/A,O=(-T*y-g*H)/A,q=(T*g+y*H)/A,d=(-T*y+g*H)/A,m=I-j,a=O-l,t=q-j,z=d-l;return m*m+a*a>t*t+z*z&&(I=q,O=d),{cx:I,cy:O,x01:-e,y01:-p,x11:I*(h/R-1),y11:O*(h/R-1)}}function an(){var o=$,x=b,D=n.constant(0),P=null,h=k,v=_,S=nn,s=null,E=n.withPath(r);function r(){var e,p,i=+o.apply(this,arguments),u=+x.apply(this,arguments),c=h.apply(this,arguments)-n.halfPi,f=v.apply(this,arguments)-n.halfPi,j=n.abs(f-c),l=f>c;if(s||(s=e=E()),u<i&&(p=u,u=i,i=p),!(u>n.epsilon))s.moveTo(0,0);else if(j>n.tau-n.epsilon)s.moveTo(u*n.cos(c),u*n.sin(c)),s.arc(0,0,u,c,f,!l),i>n.epsilon&&(s.moveTo(i*n.cos(f),i*n.sin(f)),s.arc(0,0,i,f,c,l));else{var y=c,g=f,A=c,R=f,T=j,H=j,I=S.apply(this,arguments)/2,O=I>n.epsilon&&(P?+P.apply(this,arguments):n.sqrt(i*i+u*u)),q=n.min(n.abs(u-i)/2,+D.apply(this,arguments)),d=q,m=q,a,t;if(O>n.epsilon){var z=n.asin(O/i*n.sin(I)),F=n.asin(O/u*n.sin(I));(T-=z*2)>n.epsilon?(z*=l?1:-1,A+=z,R-=z):(T=0,A=R=(c+f)/2),(H-=F*2)>n.epsilon?(F*=l?1:-1,y+=F,g-=F):(H=0,y=g=(c+f)/2)}var B=u*n.cos(y),C=u*n.sin(y),G=i*n.cos(R),J=i*n.sin(R);if(q>n.epsilon){var K=u*n.cos(g),L=u*n.sin(g),N=i*n.cos(A),Q=i*n.sin(A),w;if(j<n.pi)if(w=en(B,C,N,Q,K,L,G,J)){var U=B-w[0],V=C-w[1],W=K-w[0],X=L-w[1],Y=1/n.sin(n.acos((U*W+V*X)/(n.sqrt(U*U+V*V)*n.sqrt(W*W+X*X)))/2),Z=n.sqrt(w[0]*w[0]+w[1]*w[1]);d=n.min(q,(i-Z)/(Y-1)),m=n.min(q,(u-Z)/(Y+1))}else d=m=0}H>n.epsilon?m>n.epsilon?(a=M(N,Q,B,C,u,m,l),t=M(K,L,G,J,u,m,l),s.moveTo(a.cx+a.x01,a.cy+a.y01),m<q?s.arc(a.cx,a.cy,m,n.atan2(a.y01,a.x01),n.atan2(t.y01,t.x01),!l):(s.arc(a.cx,a.cy,m,n.atan2(a.y01,a.x01),n.atan2(a.y11,a.x11),!l),s.arc(0,0,u,n.atan2(a.cy+a.y11,a.cx+a.x11),n.atan2(t.cy+t.y11,t.cx+t.x11),!l),s.arc(t.cx,t.cy,m,n.atan2(t.y11,t.x11),n.atan2(t.y01,t.x01),!l))):(s.moveTo(B,C),s.arc(0,0,u,y,g,!l)):s.moveTo(B,C),!(i>n.epsilon)||!(T>n.epsilon)?s.lineTo(G,J):d>n.epsilon?(a=M(G,J,K,L,i,-d,l),t=M(B,C,N,Q,i,-d,l),s.lineTo(a.cx+a.x01,a.cy+a.y01),d<q?s.arc(a.cx,a.cy,d,n.atan2(a.y01,a.x01),n.atan2(t.y01,t.x01),!l):(s.arc(a.cx,a.cy,d,n.atan2(a.y01,a.x01),n.atan2(a.y11,a.x11),!l),s.arc(0,0,i,n.atan2(a.cy+a.y11,a.cx+a.x11),n.atan2(t.cy+t.y11,t.cx+t.x11),l),s.arc(t.cx,t.cy,d,n.atan2(t.y11,t.x11),n.atan2(t.y01,t.x01),!l))):s.arc(0,0,i,R,A,l)}if(s.closePath(),e)return s=null,e+""||null}return r.centroid=function(){var e=(+o.apply(this,arguments)+ +x.apply(this,arguments))/2,p=(+h.apply(this,arguments)+ +v.apply(this,arguments))/2-n.pi/2;return[n.cos(p)*e,n.sin(p)*e]},r.innerRadius=function(e){return arguments.length?(o=typeof e=="function"?e:n.constant(+e),r):o},r.outerRadius=function(e){return arguments.length?(x=typeof e=="function"?e:n.constant(+e),r):x},r.cornerRadius=function(e){return arguments.length?(D=typeof e=="function"?e:n.constant(+e),r):D},r.padRadius=function(e){return arguments.length?(P=e==null?null:typeof e=="function"?e:n.constant(+e),r):P},r.startAngle=function(e){return arguments.length?(h=typeof e=="function"?e:n.constant(+e),r):h},r.endAngle=function(e){return arguments.length?(v=typeof e=="function"?e:n.constant(+e),r):v},r.padAngle=function(e){return arguments.length?(S=typeof e=="function"?e:n.constant(+e),r):S},r.context=function(e){return arguments.length?(s=e??null,r):s},r}exports.d3arc=an;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { aD as ln, aE as an, aF as y, aG as tn, aH as N, aI as D, aJ as _, aK as un, aL as rn, aM as j, aN as o, aO as J, aP as sn, aQ as on, aR as fn } from "./extractHeadings-
|
|
1
|
+
import { aD as ln, aE as an, aF as y, aG as tn, aH as N, aI as D, aJ as _, aK as un, aL as rn, aM as j, aN as o, aO as J, aP as sn, aQ as on, aR as fn } from "./extractHeadings-z3AodVn3.js";
|
|
2
2
|
function cn(l) {
|
|
3
3
|
return l.innerRadius;
|
|
4
4
|
}
|
package/dist/{architectureDiagram-ZJ3FMSHR-C2Isv_kl.js → architectureDiagram-ZJ3FMSHR-D5xVqWe2.js}
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { p as Ze } from "./chunk-JWPE2WC7-
|
|
2
|
-
import { bL as qe, _ as gt, al as Qe, aB as Je, Q as Fe, J as Ke, G as je, a6 as _e, a7 as tr, A as er, z as rr, ac as ir, ai as ar, ag as nr, aj as or, K as Ee, bE as Te, aX as pe, W as sr, O as hr, ab as lr, aY as fr, bM as cr } from "./extractHeadings-
|
|
1
|
+
import { p as Ze } from "./chunk-JWPE2WC7-CNmttOZb.js";
|
|
2
|
+
import { bL as qe, _ as gt, al as Qe, aB as Je, Q as Fe, J as Ke, G as je, a6 as _e, a7 as tr, A as er, z as rr, ac as ir, ai as ar, ag as nr, aj as or, K as Ee, bE as Te, aX as pe, W as sr, O as hr, ab as lr, aY as fr, bM as cr } from "./extractHeadings-z3AodVn3.js";
|
|
3
3
|
import { p as gr } from "./cynefin-VYW2F7L2-Bkk-F_Js.js";
|
|
4
4
|
import { c as be } from "./cytoscape.esm-kVAWcYoG.js";
|
|
5
5
|
var he = { exports: {} }, le = { exports: {} }, fe = { exports: {} }, ur = fe.exports, Oe;
|