Split host-UI CSS into opt-in files and parameterise the overlay id - #24
Open
namedgraph wants to merge 7 commits into
Open
Split host-UI CSS into opt-in files and parameterise the overlay id#24namedgraph wants to merge 7 commits into
namedgraph wants to merge 7 commits into
Conversation
…lay id rdfa-editor.css no longer contains the annotation overlay or editor toolbar styles — host UIs that provide their own design system (e.g. Bootstrap) should omit overlay.css and toolbar.css and style #rdfa-editor-overlay / #edit-toolbar themselves. - overlay.css: extracted #rdfa-editor-overlay, .rdfa-editor-ui .btn-*, typeahead styles (formerly lines 600–885 of rdfa-editor.css) - toolbar.css: extracted #edit-toolbar layout and button styles (formerly lines 156–283 of rdfa-editor.css) - src/overlay.xsl: add $local:overlay-id variable (default 'rdfa-editor-overlay'); use it in local:render-overlay, local:show-overlay, local:hide-overlay and the ixsl:onkeydown match pattern so host UIs can shadow the id without forking the templates Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Follows the rename of the overlay element id introduced in the previous commit (parameterised via $local:overlay-id). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Move toolbar insertion dialog styles (link, table, figure) into a separate dialogs.css alongside overlay.css and toolbar.css. Host UIs that provide their own form styling should omit this file and style .edit-dialog themselves. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The earlier selector sweep only caught #overlay CSS selectors; three files
still used getElementById('overlay') in JS evaluate() callbacks, causing
getComputedStyle() to receive null and crash the test runner.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
These files were split out of rdfa-editor.css; the demo page must load all three so the annotation overlay, editor toolbar and insertion dialogs are styled correctly for non-Bootstrap users. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
After the CSS split, z-index: 10000 for .edit-dialog moved from rdfa-editor.css to dialogs.css. Without dialogs.css in fixture.html, dialogs had no z-index and rendered behind the fixed nav (z-index:1000), causing pointer-event interception failures in editor, tables and blocks tests. Same applies to overlay.css for the annotation overlay. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
fixture.html was fixed in d67322d but fixture-blocks.html, fixture-dragnest.html and fixture-nesting.html also load only rdfa-editor.css. Without dialogs.css the ldh-block dialog has no z-index and the fixed breadcrumb footer intercepts its button clicks (blocks.mjs:222 TimeoutError). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Separates the editor's host-UI styling from its intrinsic styling so host applications (e.g. LinkedDataHub with Bootstrap) can supply their own look without fighting upstream rules:
rdfa-editor.cssnow contains only editor-intrinsic styles (content highlighting, block chrome, drag-drop, slash menu, drawers)overlay.css— the annotation overlay form (Material-style default)toolbar.css— the#edit-toolbarbutton/group stylingdialogs.css— the.edit-dialogpopups (link/figure/table insert)Hosts that provide their own styling omit the three opt-in files; standalone users load all four (as
index.htmland the test fixtures now do).$local:overlay-id(defaultrdfa-editor-overlay) so hosts can shadow it; the previous bareoverlayid was collision-prone in host pages#rdfa-editor-overlayselectors,getElementByIdcalls, split CSS<link>s — withoutdialogs.cssthe dialogs lost theirz-indexand the fixed nav/breadcrumb intercepted pointer events, causing the earlier CI timeouts)Test plan
make test(RDFa extraction, lint, canonicalization suites)make test-browser(editor, tables, typeahead, blocks and the rest of the Playwright suites — previously failing on pointer-event interception, green with the fixture CSS links in place)🤖 Generated with Claude Code