From d424ef8c15d3e253141b9b739b3ed187328fe2a5 Mon Sep 17 00:00:00 2001 From: BOHA Date: Sun, 7 Jun 2026 17:37:11 +0200 Subject: [PATCH] refactor(css): scope Quill editor into styled() and delete offers.css MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Phase 3 of the "fully MUI" cleanup. - New src/admin/ui/RichText.tsx exports two theme-aware styled() wrappers: RichEditorRoot (the .admin-rich-editor Quill overrides) and RichTextView (the .admin-rich-text-view read-only output). All colors resolve via theme.vars; picker/tooltip shadows use theme.applyStyles for the light/dark difference; the active-button tint uses the primary channel. - Dropped the ~170 dead font/size picker rules from the old stylesheet — the editor toolbar exposes neither picker. Kept the .ql-font-* content classes (shared by editor + view) so legacy stored HTML still renders. - RichEditor uses (min-height still via --re-min-height); InvoiceDetail + OrderDetail use for the sanitized output. - offers.css deleted; its import removed from AdminApp. tsc -b --noEmit and npm run build clean. Verified the editor in Chrome (light + dark): toolbar, editor surface, text, icon strokes and min-height all correct and theme-reactive. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/admin/AdminApp.tsx | 1 - src/admin/components/RichEditor.tsx | 6 +- src/admin/offers.css | 417 ---------------------------- src/admin/pages/InvoiceDetail.tsx | 4 +- src/admin/pages/OrderDetail.tsx | 4 +- src/admin/ui/RichText.tsx | 207 ++++++++++++++ src/admin/ui/index.ts | 1 + 7 files changed, 215 insertions(+), 425 deletions(-) delete mode 100644 src/admin/offers.css create mode 100644 src/admin/ui/RichText.tsx diff --git a/src/admin/AdminApp.tsx b/src/admin/AdminApp.tsx index 726a970..2e1ccd1 100644 --- a/src/admin/AdminApp.tsx +++ b/src/admin/AdminApp.tsx @@ -12,7 +12,6 @@ import { LoadingState } from "./ui"; import Login from "./pages/Login"; import Dashboard from "./pages/Dashboard"; import "./variables.css"; -import "./offers.css"; const Users = lazy(() => import("./pages/Users")); const Attendance = lazy(() => import("./pages/Attendance")); diff --git a/src/admin/components/RichEditor.tsx b/src/admin/components/RichEditor.tsx index 41fbf86..72f1d5a 100644 --- a/src/admin/components/RichEditor.tsx +++ b/src/admin/components/RichEditor.tsx @@ -1,6 +1,7 @@ import { useMemo, useRef, useCallback, useLayoutEffect } from "react"; import ReactQuill from "react-quill-new"; import "react-quill-new/dist/quill.snow.css"; +import { RichEditorRoot } from "../ui/RichText"; const COLORS = [ "#000000", @@ -104,8 +105,7 @@ export default function RichEditor({ }, []); return ( -
-
+ ); } diff --git a/src/admin/offers.css b/src/admin/offers.css deleted file mode 100644 index 86d2a51..0000000 --- a/src/admin/offers.css +++ /dev/null @@ -1,417 +0,0 @@ -/* ============================================ - Offers Module - ============================================ */ - -/* RichEditor (Quill) */ -.admin-rich-editor { - border: 1px solid var(--border-color); - border-radius: 0.5rem; - overflow: visible; -} - -.admin-rich-editor .quill { - display: flex; - flex-direction: column; -} - -/* Toolbar */ -.admin-rich-editor .ql-toolbar.ql-snow { - background: var(--bg-secondary); - border: none; - border-bottom: 1px solid var(--border-color); - border-radius: 0.5rem 0.5rem 0 0; - padding: 0.5rem; - flex-wrap: wrap; - gap: 2px; -} - -.admin-rich-editor .ql-toolbar .ql-formats { - margin-right: 8px; -} - -/* Toolbar buttons */ -.admin-rich-editor .ql-snow .ql-stroke { - stroke: var(--text-secondary); -} -.admin-rich-editor .ql-snow .ql-fill { - fill: var(--text-secondary); -} -.admin-rich-editor .ql-snow .ql-picker-label { - color: var(--text-secondary); - border-color: var(--border-color); -} - -.admin-rich-editor .ql-snow button:hover .ql-stroke, -.admin-rich-editor .ql-snow .ql-picker-label:hover .ql-stroke { - stroke: var(--text-primary); -} -.admin-rich-editor .ql-snow button:hover .ql-fill, -.admin-rich-editor .ql-snow .ql-picker-label:hover .ql-fill { - fill: var(--text-primary); -} -.admin-rich-editor .ql-snow button:hover, -.admin-rich-editor .ql-snow .ql-picker-label:hover { - color: var(--text-primary); -} - -/* Active state */ -.admin-rich-editor .ql-snow button.ql-active { - color: var(--accent-color); - background: color-mix(in srgb, var(--accent-color) 15%, transparent); - border-radius: 4px; -} -.admin-rich-editor .ql-snow button.ql-active .ql-stroke { - stroke: var(--accent-color); -} -.admin-rich-editor .ql-snow button.ql-active .ql-fill, -.admin-rich-editor .ql-snow button.ql-active .ql-stroke.ql-fill { - fill: var(--accent-color); -} -.admin-rich-editor .ql-snow .ql-picker-item.ql-selected { - color: var(--accent-color); -} -.admin-rich-editor .ql-snow .ql-picker-label.ql-active { - color: var(--accent-color); -} -.admin-rich-editor .ql-snow .ql-picker-label.ql-active .ql-stroke { - stroke: var(--accent-color); -} - -/* Dropdowns (font, size, color, align) */ -.admin-rich-editor .ql-snow .ql-picker-options { - background: var(--bg-primary); - border: 1px solid var(--border-color); - border-radius: 0.375rem; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); - z-index: 1000; - padding: 0.25rem; -} - -.admin-rich-editor .ql-snow .ql-picker-item { - color: var(--text-secondary); - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; -} -.admin-rich-editor .ql-snow .ql-picker-item:hover { - color: var(--text-primary); - background: var(--bg-secondary); -} - -/* Font picker */ -.admin-rich-editor .ql-snow .ql-font .ql-picker-options { - min-width: 11rem; - max-height: 200px; - overflow-y: auto; -} -.admin-rich-editor .ql-snow .ql-size .ql-picker-options { - max-height: 200px; - overflow-y: auto; -} - -/* Font labels - vysoka specificita kvuli quill.snow.css */ -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before, -.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before { - content: "Arial" !important; - font-family: Arial, sans-serif; -} -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="tahoma"]::before, -.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="tahoma"]::before { - content: "Tahoma" !important; - font-family: Tahoma, sans-serif; -} -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="verdana"]::before, -.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="verdana"]::before { - content: "Verdana" !important; - font-family: Verdana, sans-serif; -} -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before, -.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before { - content: "Georgia" !important; - font-family: Georgia, serif; -} -.ql-snow - .ql-picker.ql-font - .ql-picker-label[data-value="times-new-roman"]::before, -.ql-snow - .ql-picker.ql-font - .ql-picker-item[data-value="times-new-roman"]::before { - content: "Times New Roman" !important; - font-family: "Times New Roman", serif; -} -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier-new"]::before, -.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier-new"]::before { - content: "Courier New" !important; - font-family: "Courier New", monospace; -} -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="trebuchet-ms"]::before, -.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="trebuchet-ms"]::before { - content: "Trebuchet MS" !important; - font-family: "Trebuchet MS", sans-serif; -} -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="impact"]::before, -.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="impact"]::before { - content: "Impact" !important; - font-family: Impact, sans-serif; -} -.ql-snow - .ql-picker.ql-font - .ql-picker-label[data-value="comic-sans-ms"]::before, -.ql-snow - .ql-picker.ql-font - .ql-picker-item[data-value="comic-sans-ms"]::before { - content: "Comic Sans MS" !important; - font-family: "Comic Sans MS", cursive; -} -.ql-snow - .ql-picker.ql-font - .ql-picker-label[data-value="lucida-console"]::before, -.ql-snow - .ql-picker.ql-font - .ql-picker-item[data-value="lucida-console"]::before { - content: "Lucida Console" !important; - font-family: "Lucida Console", monospace; -} -.ql-snow - .ql-picker.ql-font - .ql-picker-label[data-value="palatino-linotype"]::before, -.ql-snow - .ql-picker.ql-font - .ql-picker-item[data-value="palatino-linotype"]::before { - content: "Palatino Linotype" !important; - font-family: "Palatino Linotype", serif; -} -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="garamond"]::before, -.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="garamond"]::before { - content: "Garamond" !important; - font-family: Garamond, serif; -} - -/* Font classes */ -.ql-font-arial { - font-family: Arial, sans-serif; -} -.ql-font-tahoma { - font-family: Tahoma, sans-serif; -} -.ql-font-verdana { - font-family: Verdana, sans-serif; -} -.ql-font-georgia { - font-family: Georgia, serif; -} -.ql-font-times-new-roman { - font-family: "Times New Roman", serif; -} -.ql-font-courier-new { - font-family: "Courier New", monospace; -} -.ql-font-trebuchet-ms { - font-family: "Trebuchet MS", sans-serif; -} -.ql-font-impact { - font-family: Impact, sans-serif; -} -.ql-font-comic-sans-ms { - font-family: "Comic Sans MS", cursive; -} -.ql-font-lucida-console { - font-family: "Lucida Console", monospace; -} -.ql-font-palatino-linotype { - font-family: "Palatino Linotype", serif; -} -.ql-font-garamond { - font-family: Garamond, serif; -} - -/* Size picker */ -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before { - content: "8px" !important; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="9px"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="9px"]::before { - content: "9px" !important; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before { - content: "10px" !important; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="11px"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11px"]::before { - content: "11px" !important; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { - content: "12px" !important; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { - content: "14px" !important; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { - content: "16px" !important; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { - content: "18px" !important; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { - content: "20px" !important; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { - content: "24px" !important; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before { - content: "28px" !important; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { - content: "32px" !important; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before { - content: "36px" !important; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before { - content: "48px" !important; -} - -/* Editor area */ -.admin-rich-editor .ql-container.ql-snow { - border: none; - border-radius: 0 0 0.5rem 0.5rem; - font-family: Tahoma, sans-serif; - font-size: 14px; -} - -.admin-rich-editor .ql-editor { - min-height: var(--re-min-height, 120px); - padding: 0.75rem; - color: var(--text-primary); - line-height: 1.6; - font-family: Tahoma, sans-serif; - font-size: 14px; - background: var(--input-bg); -} - -.admin-rich-editor .ql-editor.ql-blank::before { - color: var(--text-tertiary); - font-style: normal; -} - -/* Lists inside editor */ -.admin-rich-editor .ql-editor ul, -.admin-rich-editor .ql-editor ol { - padding-left: 1.5rem; -} - -/* Color picker */ -.admin-rich-editor - .ql-snow - .ql-color-picker - .ql-picker-options[aria-hidden="false"] { - width: 176px; - padding: 0.375rem; - display: flex; - flex-wrap: wrap; - gap: 2px; -} - -.admin-rich-editor .ql-snow .ql-color-picker .ql-picker-item { - width: 18px; - height: 18px; - border-radius: 2px; - margin: 0; - padding: 0; - flex-shrink: 0; -} - -/* Tooltip (link editor) */ -.admin-rich-editor .ql-snow .ql-tooltip { - background: var(--bg-primary); - border: 1px solid var(--border-color); - border-radius: 0.375rem; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); - color: var(--text-primary); -} - -.admin-rich-editor .ql-snow .ql-tooltip input[type="text"] { - background: var(--bg-secondary); - border: 1px solid var(--border-color); - border-radius: 0.25rem; - color: var(--text-primary); - padding: 0.25rem 0.5rem; -} - -.admin-rich-editor .ql-snow .ql-tooltip a { - color: var(--accent-color); -} - -/* Read-only rendered rich text (Quill HTML output) */ -.admin-rich-text-view { - color: var(--text-secondary); - line-height: 1.6; - font-size: 0.875rem; - overflow-wrap: break-word; - word-break: break-word; - min-width: 0; -} - -.admin-rich-text-view ul, -.admin-rich-text-view ol { - padding-left: 1.5rem; - margin: 0.25rem 0 0.75rem; -} - -.admin-rich-text-view li { - margin-bottom: 0.15rem; -} - -.admin-rich-text-view a { - color: var(--accent-color); -} - -.admin-rich-text-view strong, -.admin-rich-text-view b { - font-weight: 600; - color: var(--text-primary); - display: inline-block; - margin-top: 0.5rem; -} - -.admin-rich-text-view br + b, -.admin-rich-text-view br + strong { - margin-top: 0.75rem; -} - -.admin-rich-text-view > br:first-child, -.admin-rich-text-view ul + br, -.admin-rich-text-view ol + br { - display: none; -} - -/* Keep Quill picker dropdowns on-screen on narrow phones. - The font picker hard-codes min-width: 11rem and the color picker a fixed - 176px width — both overflow a ~360px viewport. */ -@media (max-width: 480px) { - .admin-rich-editor .ql-snow .ql-picker-options, - .admin-rich-editor .ql-snow .ql-font .ql-picker-options, - .admin-rich-editor .ql-snow .ql-size .ql-picker-options { - min-width: 0; - max-width: calc(100vw - 32px); - } - - .admin-rich-editor - .ql-snow - .ql-color-picker - .ql-picker-options[aria-hidden="false"] { - width: auto; - max-width: calc(100vw - 32px); - } -} diff --git a/src/admin/pages/InvoiceDetail.tsx b/src/admin/pages/InvoiceDetail.tsx index 10f960c..a767590 100644 --- a/src/admin/pages/InvoiceDetail.tsx +++ b/src/admin/pages/InvoiceDetail.tsx @@ -63,6 +63,7 @@ import { EmptyState, LoadingState, PageEnter, + RichTextView, } from "../ui"; const API_BASE = "/api/admin"; @@ -1559,8 +1560,7 @@ export default function InvoiceDetail() { Veřejné poznámky na faktuře {notes && notes.trim() && notes !== "


" ? ( - ) : ( diff --git a/src/admin/pages/OrderDetail.tsx b/src/admin/pages/OrderDetail.tsx index e950cf6..9e3545c 100644 --- a/src/admin/pages/OrderDetail.tsx +++ b/src/admin/pages/OrderDetail.tsx @@ -31,6 +31,7 @@ import { EmptyState, LoadingState, PageEnter, + RichTextView, type DataColumn, } from "../ui"; @@ -759,8 +760,7 @@ export default function OrderDetail() { {section.content && ( - — was `.admin-rich-editor`. */ +export const RichEditorRoot = styled("div")(({ theme }) => ({ + border: `1px solid ${theme.vars!.palette.divider}`, + borderRadius: "0.5rem", + overflow: "visible", + + "& .quill": { display: "flex", flexDirection: "column" }, + + // Toolbar + "& .ql-toolbar.ql-snow": { + background: theme.vars!.palette.background.paper, + border: "none", + borderBottom: `1px solid ${theme.vars!.palette.divider}`, + borderRadius: "0.5rem 0.5rem 0 0", + padding: "0.5rem", + flexWrap: "wrap", + gap: "2px", + }, + "& .ql-toolbar .ql-formats": { marginRight: "8px" }, + + // Toolbar icons (idle) + "& .ql-snow .ql-stroke": { stroke: theme.vars!.palette.text.secondary }, + "& .ql-snow .ql-fill": { fill: theme.vars!.palette.text.secondary }, + "& .ql-snow .ql-picker-label": { + color: theme.vars!.palette.text.secondary, + borderColor: theme.vars!.palette.divider, + }, + + // Toolbar icons (hover) + "& .ql-snow button:hover .ql-stroke, & .ql-snow .ql-picker-label:hover .ql-stroke": + { stroke: theme.vars!.palette.text.primary }, + "& .ql-snow button:hover .ql-fill, & .ql-snow .ql-picker-label:hover .ql-fill": + { fill: theme.vars!.palette.text.primary }, + "& .ql-snow button:hover, & .ql-snow .ql-picker-label:hover": { + color: theme.vars!.palette.text.primary, + }, + + // Active state + "& .ql-snow button.ql-active": { + color: theme.vars!.palette.primary.main, + background: `rgba(${theme.vars!.palette.primary.mainChannel} / 0.15)`, + borderRadius: "4px", + }, + "& .ql-snow button.ql-active .ql-stroke": { + stroke: theme.vars!.palette.primary.main, + }, + "& .ql-snow button.ql-active .ql-fill, & .ql-snow button.ql-active .ql-stroke.ql-fill": + { fill: theme.vars!.palette.primary.main }, + "& .ql-snow .ql-picker-item.ql-selected": { + color: theme.vars!.palette.primary.main, + }, + "& .ql-snow .ql-picker-label.ql-active": { + color: theme.vars!.palette.primary.main, + }, + "& .ql-snow .ql-picker-label.ql-active .ql-stroke": { + stroke: theme.vars!.palette.primary.main, + }, + + // Dropdowns (color / background / align pickers) + "& .ql-snow .ql-picker-options": { + background: theme.vars!.palette.background.default, + border: `1px solid ${theme.vars!.palette.divider}`, + borderRadius: "0.375rem", + boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)", + zIndex: 1000, + padding: "0.25rem", + ...theme.applyStyles("dark", { + boxShadow: "0 4px 16px rgba(0, 0, 0, 0.3)", + }), + }, + "& .ql-snow .ql-picker-item": { + color: theme.vars!.palette.text.secondary, + padding: "0.25rem 0.5rem", + borderRadius: "0.25rem", + }, + "& .ql-snow .ql-picker-item:hover": { + color: theme.vars!.palette.text.primary, + background: theme.vars!.palette.background.paper, + }, + + // Editor area + "& .ql-container.ql-snow": { + border: "none", + borderRadius: "0 0 0.5rem 0.5rem", + fontFamily: "Tahoma, sans-serif", + fontSize: "14px", + }, + "& .ql-editor": { + minHeight: "var(--re-min-height, 120px)", + padding: "0.75rem", + color: theme.vars!.palette.text.primary, + lineHeight: 1.6, + fontFamily: "Tahoma, sans-serif", + fontSize: "14px", + background: theme.vars!.palette.background.paper, + }, + "& .ql-editor.ql-blank::before": { + color: theme.vars!.palette.text.disabled, + fontStyle: "normal", + }, + "& .ql-editor ul, & .ql-editor ol": { paddingLeft: "1.5rem" }, + + // Color picker + '& .ql-snow .ql-color-picker .ql-picker-options[aria-hidden="false"]': { + width: "176px", + padding: "0.375rem", + display: "flex", + flexWrap: "wrap", + gap: "2px", + }, + "& .ql-snow .ql-color-picker .ql-picker-item": { + width: "18px", + height: "18px", + borderRadius: "2px", + margin: 0, + padding: 0, + flexShrink: 0, + }, + + // Tooltip (link editor) + "& .ql-snow .ql-tooltip": { + background: theme.vars!.palette.background.default, + border: `1px solid ${theme.vars!.palette.divider}`, + borderRadius: "0.375rem", + boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)", + color: theme.vars!.palette.text.primary, + ...theme.applyStyles("dark", { + boxShadow: "0 4px 16px rgba(0, 0, 0, 0.3)", + }), + }, + '& .ql-snow .ql-tooltip input[type="text"]': { + background: theme.vars!.palette.background.paper, + border: `1px solid ${theme.vars!.palette.divider}`, + borderRadius: "0.25rem", + color: theme.vars!.palette.text.primary, + padding: "0.25rem 0.5rem", + }, + "& .ql-snow .ql-tooltip a": { color: theme.vars!.palette.primary.main }, + + ...QL_FONT_CLASSES, + + // Keep picker dropdowns on-screen on narrow phones (the color picker is a + // fixed 176px which overflows a ~360px viewport). + "@media (max-width:480px)": { + "& .ql-snow .ql-picker-options": { + minWidth: 0, + maxWidth: "calc(100vw - 32px)", + }, + '& .ql-snow .ql-color-picker .ql-picker-options[aria-hidden="false"]': { + width: "auto", + maxWidth: "calc(100vw - 32px)", + }, + }, +})); + +/** Read-only rendered Quill HTML output — was `.admin-rich-text-view`. */ +export const RichTextView = styled("div")(({ theme }) => ({ + color: theme.vars!.palette.text.secondary, + lineHeight: 1.6, + fontSize: "0.875rem", + overflowWrap: "break-word", + wordBreak: "break-word", + minWidth: 0, + + "& ul, & ol": { paddingLeft: "1.5rem", margin: "0.25rem 0 0.75rem" }, + "& li": { marginBottom: "0.15rem" }, + "& a": { color: theme.vars!.palette.primary.main }, + "& strong, & b": { + fontWeight: 600, + color: theme.vars!.palette.text.primary, + display: "inline-block", + marginTop: "0.5rem", + }, + "& br + b, & br + strong": { marginTop: "0.75rem" }, + "& > br:first-child, & ul + br, & ol + br": { display: "none" }, + + ...QL_FONT_CLASSES, +})); diff --git a/src/admin/ui/index.ts b/src/admin/ui/index.ts index 8418222..98fd371 100644 --- a/src/admin/ui/index.ts +++ b/src/admin/ui/index.ts @@ -29,3 +29,4 @@ export { default as ProgressBar } from "./ProgressBar"; export type { ProgressColor } from "./ProgressBar"; export { default as ThemeToggle } from "./ThemeToggle"; export { default as PageEnter } from "./PageEnter"; +export { RichEditorRoot, RichTextView } from "./RichText";