diff --git a/docs/app/styles.css b/docs/app/styles.css index c1f4c85362..9facb69def 100644 --- a/docs/app/styles.css +++ b/docs/app/styles.css @@ -68,11 +68,6 @@ body { padding-block: 1rem; } -.demo .bn-editor a { - color: revert; - text-decoration: revert; -} - .demo code.bn-inline-content { font-size: 1em; line-height: 1.5; diff --git a/docs/content/docs/react/styling-theming/overriding-css.mdx b/docs/content/docs/react/styling-theming/overriding-css.mdx index bece286f4d..3d28ef2208 100644 --- a/docs/content/docs/react/styling-theming/overriding-css.mdx +++ b/docs/content/docs/react/styling-theming/overriding-css.mdx @@ -42,3 +42,16 @@ BlockNote uses data attributes to target specific block types and properties: - `[data-content-type="blockType"]`: Targets blocks of type `blockType`. - `[data-propName="propValue"]`: Targets blocks with specific prop values. If the value is the same as the default value, the `data-propName` attribute will not be added. + +## Links + +Links in the editor use the browser's default link styling. BlockNote sets this with a rule of zero CSS specificity, so any `a` rule in your own stylesheet overrides it. + +Tailwind's preflight reset also targets `a`. In Tailwind v4 the reset lives in a cascade layer, so BlockNote's rule still applies. In Tailwind v3 the reset wins and links look like plain text; restore them with: + +```css +.bn-editor a { + color: revert; + text-decoration: revert; +} +``` diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css index ef2867121d..79a1382f92 100644 --- a/packages/core/src/editor/Block.css +++ b/packages/core/src/editor/Block.css @@ -106,6 +106,20 @@ NESTED BLOCKS font-family: monospace; } +/* Links keep the browser's default look (#2398). CSS resets such as Tailwind's + preflight set `a { color: inherit; text-decoration: inherit }`, which makes + links indistinguishable from text; `revert` restores the user-agent values. + `:where()` keeps the specificity at zero, so any `a` rule a consumer writes + wins regardless of import order, while Tailwind v4's preflight still loses: + it lives in a cascade layer, and unlayered rules beat layered ones. Tailwind + v3's preflight is unlayered and still wins; the styling docs show the + override. The typst exporter mirrors the underline in its `show link` rule + (packages/xl-typst-exporter/src/typstExporter.ts). */ +:where(.bn-editor a) { + color: revert; + text-decoration: revert; +} + /* NESTED BLOCK ANIMATIONS (change in indent) */ [data-prev-depth-change="1"] { diff --git a/packages/diagram-block/src/typst-exporter/__snapshots__/withDiagramMappings/diagramDocument.typ b/packages/diagram-block/src/typst-exporter/__snapshots__/withDiagramMappings/diagramDocument.typ index bf1cf06411..b95c9877c6 100644 --- a/packages/diagram-block/src/typst-exporter/__snapshots__/withDiagramMappings/diagramDocument.typ +++ b/packages/diagram-block/src/typst-exporter/__snapshots__/withDiagramMappings/diagramDocument.typ @@ -22,7 +22,7 @@ #set figure(numbering: none) #show figure: set block(breakable: false) #show figure.caption: set text(size: 9.6pt, fill: luma(110)) -#show link: set text(fill: rgb("#0b6e99")) +#show link: it => underline(text(fill: rgb("#0b6e99"), it)) #let _cb-box(fill, stroke, tick) = box(baseline: 0.13em, width: 0.9em, height: 0.9em, radius: 2pt, stroke: 0.08em + stroke, fill: fill, tick) #let _cb-unchecked = _cb-box(white, luma(148), none) #let _cb-checked = _cb-box(rgb("#3183c8"), rgb("#3183c8"), place(top + left, curve( diff --git a/packages/math-block/src/typst-exporter/__snapshots__/withMathMappings/mathDocument.typ b/packages/math-block/src/typst-exporter/__snapshots__/withMathMappings/mathDocument.typ index 27f26624a1..2c3dd6286b 100644 --- a/packages/math-block/src/typst-exporter/__snapshots__/withMathMappings/mathDocument.typ +++ b/packages/math-block/src/typst-exporter/__snapshots__/withMathMappings/mathDocument.typ @@ -22,7 +22,7 @@ #set figure(numbering: none) #show figure: set block(breakable: false) #show figure.caption: set text(size: 9.6pt, fill: luma(110)) -#show link: set text(fill: rgb("#0b6e99")) +#show link: it => underline(text(fill: rgb("#0b6e99"), it)) #let _cb-box(fill, stroke, tick) = box(baseline: 0.13em, width: 0.9em, height: 0.9em, radius: 2pt, stroke: 0.08em + stroke, fill: fill, tick) #let _cb-unchecked = _cb-box(white, luma(148), none) #let _cb-checked = _cb-box(rgb("#3183c8"), rgb("#3183c8"), place(top + left, curve( diff --git a/packages/xl-typst-exporter/src/__snapshots__/testDocument.typ b/packages/xl-typst-exporter/src/__snapshots__/testDocument.typ index 7beb8b3135..8b595d4a88 100644 --- a/packages/xl-typst-exporter/src/__snapshots__/testDocument.typ +++ b/packages/xl-typst-exporter/src/__snapshots__/testDocument.typ @@ -22,7 +22,7 @@ #set figure(numbering: none) #show figure: set block(breakable: false) #show figure.caption: set text(size: 9.6pt, fill: luma(110)) -#show link: set text(fill: rgb("#0b6e99")) +#show link: it => underline(text(fill: rgb("#0b6e99"), it)) #let _cb-box(fill, stroke, tick) = box(baseline: 0.13em, width: 0.9em, height: 0.9em, radius: 2pt, stroke: 0.08em + stroke, fill: fill, tick) #let _cb-unchecked = _cb-box(white, luma(148), none) #let _cb-checked = _cb-box(rgb("#3183c8"), rgb("#3183c8"), place(top + left, curve( diff --git a/packages/xl-typst-exporter/src/typstExporter.ts b/packages/xl-typst-exporter/src/typstExporter.ts index 1c8f6af33c..21bcc91f6d 100644 --- a/packages/xl-typst-exporter/src/typstExporter.ts +++ b/packages/xl-typst-exporter/src/typstExporter.ts @@ -558,8 +558,9 @@ export class TypstExporter< `#show figure: set block(breakable: false)`, // Figure captions: smaller, muted. `#show figure.caption: set text(size: 9.6pt, fill: luma(110))`, - // Links: BlockNote blue. - `#show link: set text(fill: rgb("#0b6e99"))`, + // Links: BlockNote blue, underlined like the editor's browser-default + // links (`:where(.bn-editor a)` in packages/core/src/editor/Block.css). + `#show link: it => underline(text(fill: rgb("#0b6e99"), it))`, // Check-list marker symbols (used as per-item list markers). CHECKBOX_MARKER_DEFS, ].join("\n");