Skip to content

Move the inline mark styles to styles/content.css (#200 Phase 3) - #210

Open
sneridagh wants to merge 2 commits into
b2-text-blocksfrom
b3-leaves-inlines
Open

sneridagh wants to merge 2 commits into
b2-text-blocksfrom
b3-leaves-inlines

Conversation

@sneridagh

Copy link
Copy Markdown
Member

Phase 3 of #200: inline marks and elements are styled by plain CSS instead of Tailwind utilities, with zero visual change. The only intended change is to comments and suggestions in the public view.

Stacked on #209 (Phase 2). The base is b2-text-blocks. This PR's own change is only the last commit.

Changes

@plone/plate/styles/content.css now styles these, in both the public renderer and the editor:

Element Hook Before (Tailwind)
Inline code .slate-code rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm whitespace-pre-wrap
Keyboard input .slate-kbd rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-sm + an arbitrary shadow-[…]
Highlight .slate-highlight bg-highlight/30 text-inherit
Link .slate-a font-medium text-primary underline decoration-primary underline-offset-4
Mention .slate-mention, [data-bold], [data-italic], [data-underline] inline-block rounded-md bg-muted px-1.5 py-0.5 align-baseline text-sm font-medium, plus mark-dependent font-bold / italic / underline

Values read the same Tailwind theme variables with Tailwind's defaults as fallback, as in Phase 2. Themeable tokens: --block-code-background, --block-kbd-background, --block-highlight-color, --block-mention-background.

Three classes turned out to do nothing, so the CSS doesn't reproduce them:

  • bg-highlight/30 generates no CSS, because no theme defines --color-highlight. Highlights render with the browser's default mark yellow. The rule keeps that: background-color: var(--block-highlight-color, Mark).
  • The kbd shadow-[rgba(…)…] is parsed by Tailwind as a shadow color. It only sets --tw-shadow-color, never a box-shadow, so keys have no shadow.
  • The dark:shadow-[…] variant is dropped, as decided in Remove Tailwind from block content in @plone/plate and @plone/blocks #200; dark mode for content comes from theme tokens.

Components

  • Inline code, keyboard input, highlight and links: the static and editable versions use the CSS. Editor affordances stay Tailwind: the link's suggestion colors, and the mention's cursor-pointer and selection ring.
  • Mentions: their text marks become data attributes, through a shared mentionMarkAttributes() helper used by both versions.
  • Comment and suggestion marks render as plain text in the public view, as decided in Remove Tailwind from block content in @plone/plate and @plone/blocks #200. They're editorial tools, so commented text gets no highlight, and suggested insertions and deletions render as plain text without <ins>/<del>. The editor still shows them (comment-node.tsx, suggestion-node.tsx are unchanged). This is the one intended change, and no screenshot covers it.

Tests

  • New visual test, plate/acceptance/visual/inline-marks.test.ts: kbd, highlight, mentions (plain and bold), inline code and a link, in the public view and the editor. The native-blocks fixture didn't cover kbd, highlight or mentions, so these conversions couldn't be checked otherwise. The local reference was generated from the Phase 2 build before converting. The content lives in a new shared fixture, fixtures/inline-marks.ts, so the existing native-blocks screenshots don't change.
  • Contract test: a second check renders the inline marks plus comment and suggestion marks. It expects no classes outside the contract (apart from the editor root, still pending), no <del>/<ins>, and a transparent background on commented text. PENDING loses the code and a entries.
  • New reset-independence test, plate/acceptance/tests/inline-marks-content-css.test.ts: the computed styles of all inline elements match under Agave's preflight, with no reset, and under @plone/theming's simple reset. Without a reset, browsers style code, kbd and mark themselves. The highlight's color: inherit is checked as "equals its paragraph's color".

Baselines: the 2 new screenshots need baselines; update with grep set to Inline marks.

Validation

  • CI=1 pnpm visual-test --retries=0: 24/24 pixel-identical, the 22 existing plus the 2 new inline-marks screenshots against their pre-conversion reference.
  • pnpm acceptance-test: 173 passed.
  • pnpm --filter @plone/plate test --run: 75 passed. check:ts, eslint and stylelint: clean.

Part of #200.

Phase 3 of #200. Inline code, keyboard input, highlight, links and
mentions are styled by plain CSS in @plone/plate's styles/content.css
instead of Tailwind utilities. Mention marks become data attributes.
Comment and suggestion marks render as plain text in the public view;
the editor keeps showing them. New tests: a visual test for the inline
marks, a contract check for inline and editorial marks, and a reset
independence test for the inline styles.
* b2-text-blocks:
  Move the table drag handle fragment to @plone/quanta
  Releasing @plone/aurora 1.0.0-alpha.16
  Release @plone/contents 1.0.0-alpha.3
  Release @plone/publicui 1.0.0-alpha.8
  Release @plone/cmsui 1.0.0-alpha.11
  Release @plone/agave 1.0.0-alpha.8
  Release @plone/theming 1.0.0-alpha.8
  Release @plone/layout 1.0.0-alpha.13
  Release @plone/blocks 1.0.0-alpha.17
  Release @plone/plate 1.0.0-alpha.22
  Release @plone/react-router 2.0.0-alpha.7
  Release @plone/helpers 2.0.0-alpha.9
  Release @plone/registry 4.0.0-alpha.4
  Release @plone/quanta 1.0.0-alpha.1
  Release @plone/components 5.0.0-alpha.5
  Release @plone/client 2.0.0-alpha.8
  Release @plone/icons 1.0.0-alpha.1
  Release @plone/types 3.0.0-alpha.7
  Split Quanta and icons out of @plone/components into @plone/quanta and @plone/icons (#212)

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant