Skip to content

Feat/media blocks theming rtl - #4

Merged
xofdev merged 7 commits into
mainfrom
feat/media-blocks-theming-rtl
Jul 11, 2026
Merged

Feat/media blocks theming rtl#4
xofdev merged 7 commits into
mainfrom
feat/media-blocks-theming-rtl

Conversation

@xmodmor

Copy link
Copy Markdown
Collaborator

No description provided.

xmodmorand others added 7 commits July 11, 2026 13:12
…ark theme, and live RTL
- New `audio` and `file` block types across core, Vue, and React: upload /
library / URL insertion, file metadata (name, size, MIME), download card,
DocRenderer support, and HTML export/import round-trip.
- Media import overhaul: works with zero config (object-URL fallback when no
`upload` prop), paste files from clipboard, drop OS files onto the editor
at a precise position, and a paste-URL tab for images.
- Slash menu now measures itself and anchors to the caret: flips above near
the viewport bottom, clamps to edges, aligns correctly in RTL, and shows a
"No results" state instead of closing abruptly.
- Theming: minimal token set (--xpe-surface, --xpe-primary-muted, --xpe-ring,
--xpe-radius, --xpe-shadow, ...) with a built-in dark theme via `xpe-dark`
class or `data-xpe-theme="dark"`; slash menu and media blocks fully
token-driven for easy custom themes.
- RTL: text direction now resolves live from content instead of locking on
first keystroke, and remaining physical CSS converted to logical properties.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Site restyled to the Bento reference: monochrome soft-neumorphic palette
(no accent color), soft gray gradient canvas, pill surfaces with large
radii and layered shadows, and a light/dark toggle with a diagonal
View-Transitions sweep between themes.
- Live demo gains an editor theme switcher (Bento / Default) proving the
editor restyles with a handful of --xpe-* variables, and follows the
site's dark mode via the packages' built-in xpe-dark scope.
- All remaining hardcoded editor colors converted to theme tokens across
both adapters: text blocks, headings, toolbars (fixed + bubble),
popovers, dropdown menus, inputs, tabs, color/emoji pickers, table
controls, gutter buttons, drop indicators, and callout defaults — the
dark theme and custom themes now cover the entire editor surface.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…lash menu/theming/checkmark bugs
- New `button` block type: editable label, link URL, open-in-new-tab,
primary/outline/ghost style, alignment — settings popover in both
adapters, read-only rendering in DocRenderer, core model + tests.
- Standalone emoji picker (search, 7 categories, recents), used by the
callout icon button and by a new ':' inline trigger (Slack/Discord-style)
that searches and inserts an emoji directly into text.
- Fix: slash-menu ArrowUp/ArrowDown/Enter never worked — the root keydown
handler bailed out for any key typed inside the contenteditable block the
menu lives in, which is the only place slash state exists. Same fix
applied to the new ':' trigger.
- Fix: floating UI (slash menu, bubble toolbar, popovers, dropdowns) is
portaled to document.body, silently escaping any theme class scoped to
an ancestor of the editor. These now resync --xpe-* variables onto the
portaled node so scoped custom themes apply everywhere.
- Fix: to-do checkbox checkmark and toggle chevron were sized via Tailwind
classes that weren't reliably taking effect on raw SVGs — both now use
explicit width/height so the checkmark is always visible.
- Fix: Vue's button-block label lost all styling because it reused
ui/Button.vue's scoped .xpe-btn classes on a plain div — Vue scoped CSS
only applies to elements a component itself renders. Replaced with
locally-scoped styles.
- Slash menu now groups items into Basic/Lists/Media/Advanced sections,
locks page scroll while open (Notion-style), and flips above the caret
when there's no room below.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…lor popover bug
- New right-click context menu on blocks: Duplicate, Delete, and — for
callout blocks — a Color flyout reusing the existing background presets.
Clean two-level menu, no extra clutter.
- Custom slim scrollbars (token-driven via --xpe-*, `.xpe-scroll` class
for custom containers) replace the browser default across popovers,
dropdowns, slash/emoji menus, tables, code blocks, the editor root, the
doc renderer, and the site itself.
- Popover/dropdown/button/input/callout/table/code corners now scale off
--xpe-radius instead of hardcoded pixel values, so one token change
reshapes the whole editor consistently.
- Fix: the bubble toolbar's color popover could never actually be used —
clicking a swatch closed the panel instantly. Root cause: the panel's
"stay open" effect compared toolbar position by object reference, and a
same-range selectionchange fired by clicking inside the toolbar always
produces a fresh position object, closing the panel before a color could
register.
- Fix: a malformed Tailwind class left the "active color" checkmark badge
invisible in the color/table-style panels; replaced along with a few
remaining hardcoded indigo accents with theme tokens.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@xofdev
xofdev merged commit 23cd554 into mainJul 11, 2026
3 checks passed
@xofdev
xofdev deleted the feat/media-blocks-theming-rtl branch July 11, 2026 14:26
Sign up for freeto 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.

2 participants

@xmodmor@xofdev