diff --git a/app/editor-fonts.ts b/app/editor-fonts.ts new file mode 100644 index 0000000000..27d9db3e4d --- /dev/null +++ b/app/editor-fonts.ts @@ -0,0 +1,39 @@ +/** + * Loads the web fonts offered in the slide editor's text-format picker. + * + * `@fontsource` ships the font files via npm (no binaries committed to the + * repo) and `unicode-range`-subsets the CJK faces, so a CJK font downloads + * lazily — only the glyph-range chunks a slide actually uses. Imported once + * from the root layout. + * + * The picker list lives in `configs/font.ts`; each entry's `value` must match + * the `@font-face` family name of a package imported here. Inter is loaded + * separately via `next/font` in `app/layout.tsx`. + */ + +// Latin +import '@fontsource/roboto/400.css'; +import '@fontsource/roboto/700.css'; +import '@fontsource/open-sans/400.css'; +import '@fontsource/open-sans/700.css'; +import '@fontsource/montserrat/400.css'; +import '@fontsource/montserrat/700.css'; +import '@fontsource/source-sans-3/400.css'; +import '@fontsource/source-sans-3/700.css'; +import '@fontsource/merriweather/400.css'; +import '@fontsource/merriweather/700.css'; +import '@fontsource/literata/400.css'; +import '@fontsource/literata/700.css'; +import '@fontsource/source-serif-4/400.css'; +import '@fontsource/source-serif-4/700.css'; +import '@fontsource/jetbrains-mono/400.css'; +import '@fontsource/jetbrains-mono/700.css'; + +// Chinese — @fontsource unicode-range-subsets these, so each loads lazily. +import '@fontsource/noto-sans-sc/400.css'; +import '@fontsource/noto-sans-sc/700.css'; +import '@fontsource/noto-serif-sc/400.css'; +import '@fontsource/noto-serif-sc/700.css'; +import '@fontsource/lxgw-wenkai/500.css'; +import '@fontsource/lxgw-wenkai/700.css'; +import '@fontsource/zcool-kuaile/400.css'; diff --git a/app/globals.css b/app/globals.css index d21d190f54..520a5c699f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -132,12 +132,78 @@ body { @apply bg-background text-foreground; } + /* Radix Select / Popover wrap with `react-remove-scroll`, which adds a + compensation `padding-right` to when they open. Our + already reserves the scrollbar gutter (above), so that compensation + creates a visible layout shift on every dropdown open. Scope the + override to editor mode — the SlideCanvas sets `data-maic-editor` on + the body while mounted — so Radix's compensation still works on the + rest of the app (modals, sheets, etc. on non-editor pages). */ + body[data-maic-editor='true'] { + padding-right: 0 !important; + } } /* ProseMirror Editor Styles */ .prosemirror-editor { cursor: text; } +/* The slide editor draws a text element's frame via the renderer's Operate + layer. The focused contenteditable must not also paint a UA focus ring on + top of it (the base `* { @apply outline-ring/50 }` rule gives every focused + element an outline). `.prosemirror-editor` is an editor-only class — + playback's BaseTextElement never carries it, so playback is unaffected. */ +.prosemirror-editor :focus, +.prosemirror-editor :focus-visible { + outline: none; +} + +/* Tailwind's preflight resets `list-style: none` and `padding: 0` on + `