refactor(css): scope Quill editor into styled() and delete offers.css
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 <RichEditorRoot> (min-height still via --re-min-height); InvoiceDetail + OrderDetail use <RichTextView> 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) <noreply@anthropic.com>
This commit is contained in:
BOHA
@@ -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"));
|
||||
|
||||
@@ -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 (
|
||||
<div
|
||||
className="admin-rich-editor"
|
||||
<RichEditorRoot
|
||||
style={{ "--re-min-height": minHeight } as React.CSSProperties}
|
||||
>
|
||||
<ReactQuill
|
||||
@@ -118,6 +118,6 @@ export default function RichEditor({
|
||||
placeholder={placeholder}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
</div>
|
||||
</RichEditorRoot>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
</Typography>
|
||||
{notes && notes.trim() && notes !== "<p><br></p>" ? (
|
||||
<Box
|
||||
className="admin-rich-text-view"
|
||||
<RichTextView
|
||||
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(notes) }}
|
||||
/>
|
||||
) : (
|
||||
|
||||
@@ -31,6 +31,7 @@ import {
|
||||
EmptyState,
|
||||
LoadingState,
|
||||
PageEnter,
|
||||
RichTextView,
|
||||
type DataColumn,
|
||||
} from "../ui";
|
||||
|
||||
@@ -759,8 +760,7 @@ export default function OrderDetail() {
|
||||
</Typography>
|
||||
</Box>
|
||||
{section.content && (
|
||||
<Box
|
||||
className="admin-rich-text-view"
|
||||
<RichTextView
|
||||
sx={{ p: 2 }}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(section.content),
|
||||
|
||||
207
src/admin/ui/RichText.tsx
Normal file
207
src/admin/ui/RichText.tsx
Normal file
@@ -0,0 +1,207 @@
|
||||
import { styled } from "@mui/material/styles";
|
||||
|
||||
/**
|
||||
* Theme-aware styling for the Quill rich-text editor and its read-only
|
||||
* rendered output. Replaces the former `offers.css` — the overrides now layer
|
||||
* on top of `react-quill-new/dist/quill.snow.css` via scoped `styled()`
|
||||
* wrappers, resolving against `theme.vars` for light/dark.
|
||||
*
|
||||
* The font/size picker rules from the old stylesheet were dropped: the editor
|
||||
* toolbar (see RichEditor.tsx) exposes neither picker. The `.ql-font-*`
|
||||
* content classes are kept so legacy stored HTML still renders with its font.
|
||||
*/
|
||||
|
||||
// Font classes applied to content spans (legacy HTML). Shared by editor + view.
|
||||
const QL_FONT_CLASSES = {
|
||||
"& .ql-font-arial": { fontFamily: "Arial, sans-serif" },
|
||||
"& .ql-font-tahoma": { fontFamily: "Tahoma, sans-serif" },
|
||||
"& .ql-font-verdana": { fontFamily: "Verdana, sans-serif" },
|
||||
"& .ql-font-georgia": { fontFamily: "Georgia, serif" },
|
||||
"& .ql-font-times-new-roman": { fontFamily: '"Times New Roman", serif' },
|
||||
"& .ql-font-courier-new": { fontFamily: '"Courier New", monospace' },
|
||||
"& .ql-font-trebuchet-ms": { fontFamily: '"Trebuchet MS", sans-serif' },
|
||||
"& .ql-font-impact": { fontFamily: "Impact, sans-serif" },
|
||||
"& .ql-font-comic-sans-ms": { fontFamily: '"Comic Sans MS", cursive' },
|
||||
"& .ql-font-lucida-console": { fontFamily: '"Lucida Console", monospace' },
|
||||
"& .ql-font-palatino-linotype": { fontFamily: '"Palatino Linotype", serif' },
|
||||
"& .ql-font-garamond": { fontFamily: "Garamond, serif" },
|
||||
} as const;
|
||||
|
||||
/** Wrapper around <ReactQuill> — 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,
|
||||
}));
|
||||
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user