smartrte-react 0.3.1 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/components/ClassicEditor.js +538 -403
  3. package/dist/components/LinkEditorPopover.js +5 -5
  4. package/dist/theme.d.ts +1 -1
  5. package/dist/theme.js +268 -26
  6. package/package.json +1 -1
package/dist/components/LinkEditorPopover.js CHANGED
@@ -8,17 +8,17 @@ const inputStyle = {
8
8
  marginTop: 5,
9
9
  padding: "0 10px",
10
10
  border: "1px solid var(--srte-input-border)",
11
- borderRadius: 6,
11
+ borderRadius: 8,
12
12
  outline: "none",
13
13
  background: "var(--srte-input-bg)",
14
14
  color: "var(--srte-input-text)",
15
15
  font: "inherit",
16
16
  };
17
17
  const buttonStyle = {
18
- minHeight: 34,
18
+ minHeight: 36,
19
19
  padding: "0 11px",
20
20
  border: "1px solid var(--srte-input-border)",
21
- borderRadius: 6,
21
+ borderRadius: 8,
22
22
  background: "var(--srte-input-bg)",
23
23
  color: "var(--srte-menu-text)",
24
24
  cursor: "pointer",
@@ -65,7 +65,7 @@ export function LinkEditorPopover({ x, y, initialHref = "", initialText = "", in
65
65
  background: "var(--srte-menu-bg)",
66
66
  color: "var(--srte-menu-text)",
67
67
  border: "1px solid var(--srte-border)",
68
- borderRadius: 10,
68
+ borderRadius: 12,
69
69
  boxShadow: "var(--srte-menu-shadow)",
70
70
  padding: 14,
71
71
  }, onKeyDown: (event) => {
@@ -77,7 +77,7 @@ export function LinkEditorPopover({ x, y, initialHref = "", initialText = "", in
77
77
  event.preventDefault();
78
78
  apply();
79
79
  }
80
- }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }, children: [_jsxs("div", { id: titleId, style: { display: "flex", alignItems: "center", gap: 8, fontWeight: 650 }, children: [_jsx("span", { "aria-hidden": "true", style: { color: "var(--srte-primary)", fontSize: 18 }, children: "\u2197" }), showRemove ? "Edit link" : "Insert link"] }), _jsx("button", { type: "button", "aria-label": "Close link editor", title: "Close", onClick: onCancel, style: { ...buttonStyle, minWidth: 28, minHeight: 28, padding: 0, border: 0, background: "transparent", fontSize: 18 }, children: "\u00D7" })] }), showTextInput && (_jsxs("label", { style: { display: "block", marginBottom: 10, fontSize: 12, fontWeight: 600 }, children: ["Display text", _jsx("input", { "data-srte-link-text-input": "true", value: text, autoComplete: "off", onChange: (event) => {
80
+ }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }, children: [_jsxs("div", { id: titleId, style: { display: "flex", alignItems: "center", gap: 8, fontWeight: 650 }, children: [_jsxs("svg", { "aria-hidden": "true", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "var(--srte-primary)", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l2-2a5 5 0 0 0-7.07-7.07l-1.15 1.15" }), _jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-2 2a5 5 0 0 0 7.07 7.07l1.14-1.14" })] }), showRemove ? "Edit link" : "Insert link"] }), _jsx("button", { type: "button", "aria-label": "Close link editor", title: "Close", onClick: onCancel, style: { ...buttonStyle, minWidth: 28, minHeight: 28, padding: 0, border: 0, background: "transparent", fontSize: 18 }, children: "\u00D7" })] }), showTextInput && (_jsxs("label", { style: { display: "block", marginBottom: 10, fontSize: 12, fontWeight: 600 }, children: ["Display text", _jsx("input", { "data-srte-link-text-input": "true", value: text, autoComplete: "off", onChange: (event) => {
81
81
  setText(event.target.value);
82
82
  setError("");
83
83
  }, style: inputStyle })] })), _jsxs("label", { style: { display: "block", marginBottom: 10, fontSize: 12, fontWeight: 600 }, children: ["Link destination", _jsx("input", { ref: hrefRef, "data-srte-link-href-input": "true", value: href, inputMode: "url", autoCapitalize: "none", autoCorrect: "off", spellCheck: false, placeholder: "Paste a URL, email, phone, or #anchor", "aria-invalid": Boolean(error), "aria-describedby": error ? errorId : undefined, onChange: (event) => {
package/dist/theme.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export type SrteTheme = 'light' | 'dark';
2
- export declare const SRTE_DEFAULT_CSS = "\n.srte-editor {\n --srte-bg: #ffffff;\n --srte-text: #111111;\n --srte-text-muted: #4b5563;\n --srte-border: #dddddd;\n --srte-border-light: #eeeeee;\n --srte-toolbar-bg: #ffffff;\n --srte-input-bg: #ffffff;\n --srte-input-text: #111111;\n --srte-input-border: #e5e7eb;\n --srte-modal-backdrop: rgba(0, 0, 0, 0.35);\n --srte-modal-backdrop-filter: blur(2px);\n --srte-modal-bg: #ffffff;\n --srte-modal-text: #000000;\n --srte-menu-bg: #ffffff;\n --srte-menu-text: #111111;\n --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\n --srte-accent: #1e90ff;\n --srte-accent-bg: rgba(30, 144, 255, 0.15);\n --srte-danger: #dc2626;\n --srte-primary: #2563eb;\n --srte-surface-subtle: #f3f4f6;\n --srte-on-primary: #ffffff;\n --srte-cancel-bg: #f3f4f6;\n --srte-code-bg: #f6f8fa;\n --srte-code-text: #24292f;\n}\n.srte-editor.srte-dark {\n --srte-bg: #1e1e1e;\n --srte-text: #e0e0e0;\n --srte-text-muted: #9ca3af;\n --srte-border: #3a3a3a;\n --srte-border-light: #2e2e2e;\n --srte-toolbar-bg: #252525;\n --srte-input-bg: #2a2a2a;\n --srte-input-text: #e0e0e0;\n --srte-input-border: #444444;\n --srte-modal-backdrop: rgba(0, 0, 0, 0.22);\n --srte-modal-backdrop-filter: blur(10px) saturate(0.9);\n --srte-modal-bg: #1e293b;\n --srte-modal-text: #e0e0e0;\n --srte-menu-bg: #1e293b;\n --srte-menu-text: #e0e0e0;\n --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n --srte-accent: #3b9eff;\n --srte-accent-bg: rgba(59, 158, 255, 0.2);\n --srte-danger: #ef4444;\n --srte-primary: #3b82f6;\n --srte-surface-subtle: #333333;\n --srte-on-primary: #ffffff;\n --srte-cancel-bg: #333333;\n --srte-code-bg: #111827;\n --srte-code-text: #e5e7eb;\n}\n.srte-editor [contenteditable] blockquote {\n border-left: 4px solid var(--srte-accent);\n margin: 0.75em 0;\n padding: 0.5em 1em;\n background: var(--srte-surface-subtle);\n color: var(--srte-text);\n}\n.srte-editor [contenteditable] p,\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n color: inherit;\n}\n.srte-editor [contenteditable] p {\n display: block;\n margin: 0 0 0.75em;\n font-size: 1em;\n font-weight: 400;\n line-height: 1.6;\n}\n.srte-editor [contenteditable] p[data-srte-caret-boundary=\"true\"] {\n min-height: 1.6em;\n}\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n display: block;\n margin: 0.75em 0 0.4em;\n font-weight: 700;\n line-height: 1.25;\n}\n.srte-editor [contenteditable] h1 {\n font-size: 2em;\n}\n.srte-editor [contenteditable] h2 {\n font-size: 1.5em;\n}\n.srte-editor [contenteditable] h3 {\n font-size: 1.25em;\n}\n.srte-editor [contenteditable] > :first-child {\n margin-top: 0;\n}\n.srte-editor [contenteditable] ul {\n list-style-type: disc;\n list-style-position: outside;\n margin: 0.75em 0;\n padding-left: 1.75em;\n}\n.srte-editor [contenteditable] ol {\n list-style-type: decimal;\n list-style-position: outside;\n margin: 0.75em 0;\n padding-left: 1.75em;\n}\n.srte-editor [contenteditable] li {\n display: list-item;\n margin: 0.25em 0;\n padding-left: 0.25em;\n}\n.srte-editor [contenteditable] li::marker {\n color: currentColor;\n}\n.srte-editor [contenteditable] table {\n width: 100%;\n margin: 0.75em 0;\n border-collapse: collapse;\n}\n.srte-editor [contenteditable] th,\n.srte-editor [contenteditable] td {\n padding: 8px;\n border: 1px solid var(--srte-border);\n vertical-align: top;\n}\n.srte-editor [contenteditable] th {\n background: var(--srte-surface-subtle);\n font-weight: 600;\n text-align: left;\n}\n.srte-editor [contenteditable] td > h1,\n.srte-editor [contenteditable] td > h2,\n.srte-editor [contenteditable] td > h3,\n.srte-editor [contenteditable] th > h1,\n.srte-editor [contenteditable] th > h2,\n.srte-editor [contenteditable] th > h3 {\n margin: 0 0 0.4em;\n overflow-wrap: anywhere;\n}\n.srte-editor [contenteditable] pre {\n display: block;\n margin: 0.75em 0;\n padding: 12px 14px;\n overflow-x: auto;\n border: 1px solid var(--srte-border);\n border-radius: 6px;\n background: var(--srte-code-bg);\n color: var(--srte-code-text);\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n font-size: 0.9em;\n line-height: 1.55;\n white-space: pre-wrap;\n}\n.srte-editor [contenteditable] pre code {\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n}\n.srte-editor [contenteditable] code:not(pre code) {\n padding: 0.1em 0.35em;\n border-radius: 3px;\n background: var(--srte-code-bg);\n color: var(--srte-code-text);\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n font-size: 0.9em;\n}\n.srte-editor [contenteditable] a,\n.srte-editor [contenteditable] a:visited {\n color: var(--srte-primary) !important;\n text-decoration: underline !important;\n text-decoration-thickness: 1px !important;\n text-underline-offset: 2px !important;\n cursor: pointer;\n}\n.srte-editor [contenteditable] a:hover {\n color: var(--srte-accent) !important;\n}\n.srte-editor [contenteditable] a:focus-visible {\n outline: 2px solid var(--srte-accent);\n outline-offset: 2px;\n}\n.srte-editor.srte-dark [contenteditable] [style*=\"color\"]:not(td):not(th):not(.srte-preserve-colors):not(.srte-preserve-colors *),\n.srte-editor.srte-dark [contenteditable] [style*=\"background\"]:not(td):not(th):not(.srte-preserve-colors):not(.srte-preserve-colors *) {\n color: var(--srte-text) !important;\n background: transparent !important;\n background-color: transparent !important;\n}\n.srte-editor [contenteditable] sub,\n.srte-editor [contenteditable] sup {\n line-height: 0;\n}\n";
2
+ export declare const SRTE_DEFAULT_CSS = "\n.srte-editor {\n --srte-background: var(--card, #ffffff);\n --srte-canvas: var(--background, #ffffff);\n --srte-foreground: var(--foreground, #0f172a);\n --srte-muted: var(--muted, #f1f5f9);\n --srte-muted-foreground: var(--muted-foreground, #64748b);\n --srte-ring: var(--ring, #0284c7);\n --srte-radius: var(--radius, 0.625rem);\n --srte-bg: var(--srte-canvas);\n --srte-text: var(--srte-foreground);\n --srte-text-muted: var(--srte-muted-foreground);\n --srte-border: var(--border, #e2e8f0);\n --srte-border-light: var(--srte-border);\n --srte-toolbar-bg: var(--srte-background);\n --srte-input-bg: var(--srte-background);\n --srte-input-text: var(--srte-foreground);\n --srte-input-border: var(--srte-border);\n --srte-modal-backdrop: rgba(0, 0, 0, 0.35);\n --srte-modal-backdrop-filter: blur(2px);\n --srte-modal-bg: #ffffff;\n --srte-modal-text: #000000;\n --srte-menu-bg: var(--srte-background);\n --srte-menu-text: var(--srte-foreground);\n --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\n --srte-accent: #0284c7;\n --srte-accent-bg: rgba(2, 132, 199, 0.12);\n --srte-danger: #dc2626;\n --srte-primary: #2563eb;\n --srte-surface-subtle: #f3f4f6;\n --srte-on-primary: #ffffff;\n --srte-cancel-bg: #f3f4f6;\n --srte-code-bg: #f6f8fa;\n --srte-code-text: #24292f;\n}\n.srte-editor.srte-dark {\n --srte-background: var(--card, #1e293b);\n --srte-canvas: var(--background, #0f172a);\n --srte-foreground: var(--foreground, #f8fafc);\n --srte-muted: var(--muted, #334155);\n --srte-muted-foreground: var(--muted-foreground, #94a3b8);\n --srte-ring: var(--ring, #38bdf8);\n --srte-bg: var(--srte-canvas);\n --srte-text: var(--srte-foreground);\n --srte-text-muted: var(--srte-muted-foreground);\n --srte-border: var(--border, #334155);\n --srte-border-light: var(--srte-border);\n --srte-toolbar-bg: var(--srte-background);\n --srte-input-bg: var(--srte-background);\n --srte-input-text: var(--srte-foreground);\n --srte-input-border: var(--srte-border);\n --srte-modal-backdrop: rgba(0, 0, 0, 0.22);\n --srte-modal-backdrop-filter: blur(10px) saturate(0.9);\n --srte-modal-bg: #1e293b;\n --srte-modal-text: #e0e0e0;\n --srte-menu-bg: var(--srte-background);\n --srte-menu-text: var(--srte-foreground);\n --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n --srte-accent: #38bdf8;\n --srte-accent-bg: rgba(56, 189, 248, 0.16);\n --srte-danger: #ef4444;\n --srte-primary: #3b82f6;\n --srte-surface-subtle: #333333;\n --srte-on-primary: #ffffff;\n --srte-cancel-bg: #333333;\n --srte-code-bg: #111827;\n --srte-code-text: #e5e7eb;\n}\n.srte-editor {\n border-radius: var(--srte-radius);\n font-family: \"IBM Plex Sans\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n container: srte-editor / inline-size;\n}\n.srte-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 4px;\n width: 100%;\n min-height: 48px;\n padding: 8px;\n box-sizing: border-box;\n border-bottom: 1px solid var(--srte-border);\n background: var(--srte-background);\n color: var(--srte-foreground);\n position: sticky;\n top: 0;\n z-index: 10;\n}\n.srte-toolbar-group {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n min-width: 0;\n}\n.srte-toolbar-group + .srte-toolbar-group::before {\n content: \"\";\n width: 1px;\n height: 20px;\n margin: 0 5px 0 3px;\n background: var(--srte-border);\n}\n.srte-tool-button,\n.srte-toolbar select {\n height: 32px;\n min-width: 32px;\n box-sizing: border-box;\n border: 1px solid transparent;\n border-radius: 8px;\n background: transparent;\n color: var(--srte-foreground);\n font: 500 13px/1 \"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif;\n}\n.srte-tool-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 3px;\n padding: 0 7px;\n cursor: pointer;\n}\n.srte-toolbar select {\n max-width: 132px;\n padding: 0 26px 0 9px;\n border-color: var(--srte-border);\n background: var(--srte-input-bg);\n cursor: pointer;\n}\n.srte-tool-button:hover,\n.srte-toolbar select:hover,\n.srte-toolbar-menu[open] > .srte-menu-trigger {\n background: var(--srte-muted);\n border-color: var(--srte-border);\n}\n.srte-tool-button.srte-active,\n.srte-tool-button[aria-pressed=\"true\"] {\n color: var(--srte-primary);\n background: var(--srte-accent-bg);\n border-color: color-mix(in srgb, var(--srte-primary) 35%, transparent);\n}\n.srte-tool-button:focus-visible,\n.srte-toolbar select:focus-visible,\n.srte-menu-item:focus-visible {\n outline: 2px solid var(--srte-ring);\n outline-offset: 1px;\n}\n.srte-tool-button:disabled,\n.srte-menu-item:disabled,\n.srte-toolbar select:disabled {\n cursor: not-allowed;\n opacity: .4;\n}\n.srte-toolbar-menu {\n position: relative;\n}\n.srte-toolbar-menu > summary {\n list-style: none;\n}\n.srte-toolbar-menu > summary::-webkit-details-marker {\n display: none;\n}\n.srte-menu {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n z-index: 80;\n min-width: 210px;\n padding: 4px;\n overflow: hidden;\n border: 1px solid var(--srte-border);\n border-radius: 12px;\n background: var(--srte-menu-bg);\n color: var(--srte-menu-text);\n box-shadow: var(--srte-menu-shadow);\n}\n.srte-menu-item {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n height: 36px;\n padding: 0 8px;\n border: 0;\n border-radius: 8px;\n background: transparent;\n color: inherit;\n cursor: pointer;\n font: 500 13px/1 \"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif;\n text-align: left;\n white-space: nowrap;\n}\n.srte-menu-item:hover {\n background: var(--srte-muted);\n}\n.srte-menu-check {\n margin-left: auto;\n color: var(--srte-primary);\n font-weight: 700;\n}\n.srte-menu-separator {\n height: 1px;\n margin: 4px;\n background: var(--srte-border);\n}\n.srte-mobile-more { display: none; }\n.srte-toolbar .srte-command-proxy { display: none; }\n.srte-split-control {\n display: inline-flex;\n}\n.srte-split-control > .srte-tool-button:first-child {\n border-radius: 8px 0 0 8px;\n}\n.srte-split-control > select {\n width: 27px;\n padding: 0;\n border-radius: 0 8px 8px 0;\n border-left: 0;\n appearance: none;\n -webkit-appearance: none;\n color: transparent;\n background-color: var(--srte-muted);\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center;\n cursor: pointer;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li {\n display: grid;\n grid-template-columns: 1.1em minmax(0, 1fr);\n column-gap: .45em;\n align-items: start;\n padding-left: 0;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check] {\n display: inline-flex;\n grid-column: 1;\n grid-row: 1;\n align-items: center;\n justify-content: center;\n width: 1.1em;\n height: 1.6em;\n margin: 0;\n line-height: 1.6;\n vertical-align: top;\n position: relative;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check]::before {\n content: \"\";\n width: .9em;\n height: .9em;\n box-sizing: border-box;\n border: 1.5px solid var(--srte-muted-foreground);\n border-radius: 3px;\n background: var(--srte-canvas);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check][data-checked=\"true\"]::before {\n border-color: var(--srte-primary);\n background: var(--srte-primary);\n box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--srte-on-primary) 25%, transparent);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check][data-checked=\"true\"]::after {\n content: \"\";\n position: absolute;\n width: .42em;\n height: .22em;\n border-left: 1.5px solid var(--srte-on-primary);\n border-bottom: 1.5px solid var(--srte-on-primary);\n transform: translateY(-.08em) rotate(-45deg);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > :is(p,h1,h2,h3,h4,h5,h6,blockquote,pre) {\n grid-column: 2;\n min-width: 0;\n margin-top: 0;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > :is(ul,ol) {\n grid-column: 2;\n}\n.srte-editor:focus-within {\n border-color: var(--srte-ring) !important;\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--srte-ring) 18%, transparent);\n}\n@media (max-width: 639px) {\n .srte-toolbar { gap: 3px; padding: 6px; }\n .srte-tool-button, .srte-toolbar select { height: 40px; min-width: 40px; }\n .srte-toolbar-group[data-srte-priority=\"3\"] { display: none; }\n .srte-toolbar-menu[data-srte-priority=\"2\"] { display: none; }\n .srte-mobile-more { display: block; }\n .srte-menu-item { height: 40px; }\n}\n@container srte-editor (max-width: 639px) {\n .srte-toolbar { gap: 3px; padding: 6px; }\n .srte-tool-button, .srte-toolbar select { height: 40px; min-width: 40px; }\n .srte-toolbar-group[data-srte-priority=\"3\"],\n .srte-toolbar-menu[data-srte-priority=\"2\"] { display: none; }\n .srte-mobile-more { display: block; }\n .srte-menu-item { height: 40px; }\n}\n.srte-editor [contenteditable] blockquote {\n border-left: 4px solid var(--srte-accent);\n margin: 0.75em 0;\n padding: 0.5em 1em;\n background: var(--srte-surface-subtle);\n color: var(--srte-text);\n}\n.srte-editor [contenteditable] p,\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n color: inherit;\n}\n.srte-editor [contenteditable] p {\n display: block;\n margin: 0 0 0.75em;\n font-size: 1em;\n font-weight: 400;\n line-height: 1.6;\n}\n.srte-editor [contenteditable] p[data-srte-caret-boundary=\"true\"] {\n min-height: 1.6em;\n}\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n display: block;\n margin: 0.75em 0 0.4em;\n font-weight: 700;\n line-height: 1.25;\n}\n.srte-editor [contenteditable] h1 {\n font-size: 2em;\n}\n.srte-editor [contenteditable] h2 {\n font-size: 1.5em;\n}\n.srte-editor [contenteditable] h3 {\n font-size: 1.25em;\n}\n.srte-editor [contenteditable] > :first-child {\n margin-top: 0;\n}\n.srte-editor [contenteditable] ul {\n list-style-type: disc;\n list-style-position: outside;\n margin: 0.75em 0;\n padding-left: 1.75em;\n}\n.srte-editor [contenteditable] ol {\n list-style-type: decimal;\n list-style-position: outside;\n margin: 0.75em 0;\n padding-left: 1.75em;\n}\n.srte-editor [contenteditable] li {\n display: list-item;\n margin: 0.25em 0;\n padding-left: 0.25em;\n}\n.srte-editor [contenteditable] li::marker {\n color: currentColor;\n}\n.srte-editor [contenteditable] table {\n width: 100%;\n margin: 0.75em 0;\n border-collapse: collapse;\n}\n.srte-editor [contenteditable] th,\n.srte-editor [contenteditable] td {\n padding: 8px;\n border: 1px solid var(--srte-border);\n vertical-align: top;\n}\n.srte-editor [contenteditable] th {\n background: var(--srte-surface-subtle);\n font-weight: 600;\n text-align: left;\n}\n.srte-editor [contenteditable] td > h1,\n.srte-editor [contenteditable] td > h2,\n.srte-editor [contenteditable] td > h3,\n.srte-editor [contenteditable] th > h1,\n.srte-editor [contenteditable] th > h2,\n.srte-editor [contenteditable] th > h3 {\n margin: 0 0 0.4em;\n overflow-wrap: anywhere;\n}\n.srte-editor [contenteditable] pre {\n display: block;\n margin: 0.75em 0;\n padding: 12px 14px;\n overflow-x: auto;\n border: 1px solid var(--srte-border);\n border-radius: 6px;\n background: var(--srte-code-bg);\n color: var(--srte-code-text);\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n font-size: 0.9em;\n line-height: 1.55;\n white-space: pre-wrap;\n}\n.srte-editor [contenteditable] pre code {\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n}\n.srte-editor [contenteditable] code:not(pre code) {\n padding: 0.1em 0.35em;\n border-radius: 3px;\n background: var(--srte-code-bg);\n color: var(--srte-code-text);\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n font-size: 0.9em;\n}\n.srte-editor [contenteditable] a,\n.srte-editor [contenteditable] a:visited {\n color: var(--srte-primary) !important;\n text-decoration: underline !important;\n text-decoration-thickness: 1px !important;\n text-underline-offset: 2px !important;\n cursor: pointer;\n}\n.srte-editor [contenteditable] a:hover {\n color: var(--srte-accent) !important;\n}\n.srte-editor [contenteditable] a:focus-visible {\n outline: 2px solid var(--srte-accent);\n outline-offset: 2px;\n}\n.srte-editor.srte-dark [contenteditable] [style*=\"color\"]:not(td):not(th):not(.srte-preserve-colors):not(.srte-preserve-colors *),\n.srte-editor.srte-dark [contenteditable] [style*=\"background\"]:not(td):not(th):not(.srte-preserve-colors):not(.srte-preserve-colors *) {\n color: var(--srte-text) !important;\n background: transparent !important;\n background-color: transparent !important;\n}\n.srte-editor [contenteditable] sub,\n.srte-editor [contenteditable] sup {\n line-height: 0;\n}\n";
3
3
  export declare function ensureStyleSheet(): void;
package/dist/theme.js CHANGED
@@ -1,23 +1,30 @@
1
1
  export const SRTE_DEFAULT_CSS = `
2
2
  .srte-editor {
3
- --srte-bg: #ffffff;
4
- --srte-text: #111111;
5
- --srte-text-muted: #4b5563;
6
- --srte-border: #dddddd;
7
- --srte-border-light: #eeeeee;
8
- --srte-toolbar-bg: #ffffff;
9
- --srte-input-bg: #ffffff;
10
- --srte-input-text: #111111;
11
- --srte-input-border: #e5e7eb;
3
+ --srte-background: var(--card, #ffffff);
4
+ --srte-canvas: var(--background, #ffffff);
5
+ --srte-foreground: var(--foreground, #0f172a);
6
+ --srte-muted: var(--muted, #f1f5f9);
7
+ --srte-muted-foreground: var(--muted-foreground, #64748b);
8
+ --srte-ring: var(--ring, #0284c7);
9
+ --srte-radius: var(--radius, 0.625rem);
10
+ --srte-bg: var(--srte-canvas);
11
+ --srte-text: var(--srte-foreground);
12
+ --srte-text-muted: var(--srte-muted-foreground);
13
+ --srte-border: var(--border, #e2e8f0);
14
+ --srte-border-light: var(--srte-border);
15
+ --srte-toolbar-bg: var(--srte-background);
16
+ --srte-input-bg: var(--srte-background);
17
+ --srte-input-text: var(--srte-foreground);
18
+ --srte-input-border: var(--srte-border);
12
19
  --srte-modal-backdrop: rgba(0, 0, 0, 0.35);
13
20
  --srte-modal-backdrop-filter: blur(2px);
14
21
  --srte-modal-bg: #ffffff;
15
22
  --srte-modal-text: #000000;
16
- --srte-menu-bg: #ffffff;
17
- --srte-menu-text: #111111;
23
+ --srte-menu-bg: var(--srte-background);
24
+ --srte-menu-text: var(--srte-foreground);
18
25
  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
19
- --srte-accent: #1e90ff;
20
- --srte-accent-bg: rgba(30, 144, 255, 0.15);
26
+ --srte-accent: #0284c7;
27
+ --srte-accent-bg: rgba(2, 132, 199, 0.12);
21
28
  --srte-danger: #dc2626;
22
29
  --srte-primary: #2563eb;
23
30
  --srte-surface-subtle: #f3f4f6;
@@ -27,24 +34,30 @@ export const SRTE_DEFAULT_CSS = `
27
34
  --srte-code-text: #24292f;
28
35
  }
29
36
  .srte-editor.srte-dark {
30
- --srte-bg: #1e1e1e;
31
- --srte-text: #e0e0e0;
32
- --srte-text-muted: #9ca3af;
33
- --srte-border: #3a3a3a;
34
- --srte-border-light: #2e2e2e;
35
- --srte-toolbar-bg: #252525;
36
- --srte-input-bg: #2a2a2a;
37
- --srte-input-text: #e0e0e0;
38
- --srte-input-border: #444444;
37
+ --srte-background: var(--card, #1e293b);
38
+ --srte-canvas: var(--background, #0f172a);
39
+ --srte-foreground: var(--foreground, #f8fafc);
40
+ --srte-muted: var(--muted, #334155);
41
+ --srte-muted-foreground: var(--muted-foreground, #94a3b8);
42
+ --srte-ring: var(--ring, #38bdf8);
43
+ --srte-bg: var(--srte-canvas);
44
+ --srte-text: var(--srte-foreground);
45
+ --srte-text-muted: var(--srte-muted-foreground);
46
+ --srte-border: var(--border, #334155);
47
+ --srte-border-light: var(--srte-border);
48
+ --srte-toolbar-bg: var(--srte-background);
49
+ --srte-input-bg: var(--srte-background);
50
+ --srte-input-text: var(--srte-foreground);
51
+ --srte-input-border: var(--srte-border);
39
52
  --srte-modal-backdrop: rgba(0, 0, 0, 0.22);
40
53
  --srte-modal-backdrop-filter: blur(10px) saturate(0.9);
41
54
  --srte-modal-bg: #1e293b;
42
55
  --srte-modal-text: #e0e0e0;
43
- --srte-menu-bg: #1e293b;
44
- --srte-menu-text: #e0e0e0;
56
+ --srte-menu-bg: var(--srte-background);
57
+ --srte-menu-text: var(--srte-foreground);
45
58
  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
46
- --srte-accent: #3b9eff;
47
- --srte-accent-bg: rgba(59, 158, 255, 0.2);
59
+ --srte-accent: #38bdf8;
60
+ --srte-accent-bg: rgba(56, 189, 248, 0.16);
48
61
  --srte-danger: #ef4444;
49
62
  --srte-primary: #3b82f6;
50
63
  --srte-surface-subtle: #333333;
@@ -53,6 +66,235 @@ export const SRTE_DEFAULT_CSS = `
53
66
  --srte-code-bg: #111827;
54
67
  --srte-code-text: #e5e7eb;
55
68
  }
69
+ .srte-editor {
70
+ border-radius: var(--srte-radius);
71
+ font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
72
+ container: srte-editor / inline-size;
73
+ }
74
+ .srte-toolbar {
75
+ display: flex;
76
+ flex-wrap: wrap;
77
+ align-items: center;
78
+ gap: 4px;
79
+ width: 100%;
80
+ min-height: 48px;
81
+ padding: 8px;
82
+ box-sizing: border-box;
83
+ border-bottom: 1px solid var(--srte-border);
84
+ background: var(--srte-background);
85
+ color: var(--srte-foreground);
86
+ position: sticky;
87
+ top: 0;
88
+ z-index: 10;
89
+ }
90
+ .srte-toolbar-group {
91
+ display: inline-flex;
92
+ align-items: center;
93
+ gap: 2px;
94
+ min-width: 0;
95
+ }
96
+ .srte-toolbar-group + .srte-toolbar-group::before {
97
+ content: "";
98
+ width: 1px;
99
+ height: 20px;
100
+ margin: 0 5px 0 3px;
101
+ background: var(--srte-border);
102
+ }
103
+ .srte-tool-button,
104
+ .srte-toolbar select {
105
+ height: 32px;
106
+ min-width: 32px;
107
+ box-sizing: border-box;
108
+ border: 1px solid transparent;
109
+ border-radius: 8px;
110
+ background: transparent;
111
+ color: var(--srte-foreground);
112
+ font: 500 13px/1 "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
113
+ }
114
+ .srte-tool-button {
115
+ display: inline-flex;
116
+ align-items: center;
117
+ justify-content: center;
118
+ gap: 3px;
119
+ padding: 0 7px;
120
+ cursor: pointer;
121
+ }
122
+ .srte-toolbar select {
123
+ max-width: 132px;
124
+ padding: 0 26px 0 9px;
125
+ border-color: var(--srte-border);
126
+ background: var(--srte-input-bg);
127
+ cursor: pointer;
128
+ }
129
+ .srte-tool-button:hover,
130
+ .srte-toolbar select:hover,
131
+ .srte-toolbar-menu[open] > .srte-menu-trigger {
132
+ background: var(--srte-muted);
133
+ border-color: var(--srte-border);
134
+ }
135
+ .srte-tool-button.srte-active,
136
+ .srte-tool-button[aria-pressed="true"] {
137
+ color: var(--srte-primary);
138
+ background: var(--srte-accent-bg);
139
+ border-color: color-mix(in srgb, var(--srte-primary) 35%, transparent);
140
+ }
141
+ .srte-tool-button:focus-visible,
142
+ .srte-toolbar select:focus-visible,
143
+ .srte-menu-item:focus-visible {
144
+ outline: 2px solid var(--srte-ring);
145
+ outline-offset: 1px;
146
+ }
147
+ .srte-tool-button:disabled,
148
+ .srte-menu-item:disabled,
149
+ .srte-toolbar select:disabled {
150
+ cursor: not-allowed;
151
+ opacity: .4;
152
+ }
153
+ .srte-toolbar-menu {
154
+ position: relative;
155
+ }
156
+ .srte-toolbar-menu > summary {
157
+ list-style: none;
158
+ }
159
+ .srte-toolbar-menu > summary::-webkit-details-marker {
160
+ display: none;
161
+ }
162
+ .srte-menu {
163
+ position: absolute;
164
+ top: calc(100% + 6px);
165
+ left: 0;
166
+ z-index: 80;
167
+ min-width: 210px;
168
+ padding: 4px;
169
+ overflow: hidden;
170
+ border: 1px solid var(--srte-border);
171
+ border-radius: 12px;
172
+ background: var(--srte-menu-bg);
173
+ color: var(--srte-menu-text);
174
+ box-shadow: var(--srte-menu-shadow);
175
+ }
176
+ .srte-menu-item {
177
+ display: flex;
178
+ align-items: center;
179
+ gap: 8px;
180
+ width: 100%;
181
+ height: 36px;
182
+ padding: 0 8px;
183
+ border: 0;
184
+ border-radius: 8px;
185
+ background: transparent;
186
+ color: inherit;
187
+ cursor: pointer;
188
+ font: 500 13px/1 "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
189
+ text-align: left;
190
+ white-space: nowrap;
191
+ }
192
+ .srte-menu-item:hover {
193
+ background: var(--srte-muted);
194
+ }
195
+ .srte-menu-check {
196
+ margin-left: auto;
197
+ color: var(--srte-primary);
198
+ font-weight: 700;
199
+ }
200
+ .srte-menu-separator {
201
+ height: 1px;
202
+ margin: 4px;
203
+ background: var(--srte-border);
204
+ }
205
+ .srte-mobile-more { display: none; }
206
+ .srte-toolbar .srte-command-proxy { display: none; }
207
+ .srte-split-control {
208
+ display: inline-flex;
209
+ }
210
+ .srte-split-control > .srte-tool-button:first-child {
211
+ border-radius: 8px 0 0 8px;
212
+ }
213
+ .srte-split-control > select {
214
+ width: 27px;
215
+ padding: 0;
216
+ border-radius: 0 8px 8px 0;
217
+ border-left: 0;
218
+ appearance: none;
219
+ -webkit-appearance: none;
220
+ color: transparent;
221
+ background-color: var(--srte-muted);
222
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
223
+ background-repeat: no-repeat;
224
+ background-position: center;
225
+ cursor: pointer;
226
+ }
227
+ .srte-editor [contenteditable] ul[data-srte-checklist="true"] > li {
228
+ display: grid;
229
+ grid-template-columns: 1.1em minmax(0, 1fr);
230
+ column-gap: .45em;
231
+ align-items: start;
232
+ padding-left: 0;
233
+ }
234
+ .srte-editor [contenteditable] ul[data-srte-checklist="true"] > li > [data-srte-check] {
235
+ display: inline-flex;
236
+ grid-column: 1;
237
+ grid-row: 1;
238
+ align-items: center;
239
+ justify-content: center;
240
+ width: 1.1em;
241
+ height: 1.6em;
242
+ margin: 0;
243
+ line-height: 1.6;
244
+ vertical-align: top;
245
+ position: relative;
246
+ }
247
+ .srte-editor [contenteditable] ul[data-srte-checklist="true"] > li > [data-srte-check]::before {
248
+ content: "";
249
+ width: .9em;
250
+ height: .9em;
251
+ box-sizing: border-box;
252
+ border: 1.5px solid var(--srte-muted-foreground);
253
+ border-radius: 3px;
254
+ background: var(--srte-canvas);
255
+ }
256
+ .srte-editor [contenteditable] ul[data-srte-checklist="true"] > li > [data-srte-check][data-checked="true"]::before {
257
+ border-color: var(--srte-primary);
258
+ background: var(--srte-primary);
259
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--srte-on-primary) 25%, transparent);
260
+ }
261
+ .srte-editor [contenteditable] ul[data-srte-checklist="true"] > li > [data-srte-check][data-checked="true"]::after {
262
+ content: "";
263
+ position: absolute;
264
+ width: .42em;
265
+ height: .22em;
266
+ border-left: 1.5px solid var(--srte-on-primary);
267
+ border-bottom: 1.5px solid var(--srte-on-primary);
268
+ transform: translateY(-.08em) rotate(-45deg);
269
+ }
270
+ .srte-editor [contenteditable] ul[data-srte-checklist="true"] > li > :is(p,h1,h2,h3,h4,h5,h6,blockquote,pre) {
271
+ grid-column: 2;
272
+ min-width: 0;
273
+ margin-top: 0;
274
+ }
275
+ .srte-editor [contenteditable] ul[data-srte-checklist="true"] > li > :is(ul,ol) {
276
+ grid-column: 2;
277
+ }
278
+ .srte-editor:focus-within {
279
+ border-color: var(--srte-ring) !important;
280
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--srte-ring) 18%, transparent);
281
+ }
282
+ @media (max-width: 639px) {
283
+ .srte-toolbar { gap: 3px; padding: 6px; }
284
+ .srte-tool-button, .srte-toolbar select { height: 40px; min-width: 40px; }
285
+ .srte-toolbar-group[data-srte-priority="3"] { display: none; }
286
+ .srte-toolbar-menu[data-srte-priority="2"] { display: none; }
287
+ .srte-mobile-more { display: block; }
288
+ .srte-menu-item { height: 40px; }
289
+ }
290
+ @container srte-editor (max-width: 639px) {
291
+ .srte-toolbar { gap: 3px; padding: 6px; }
292
+ .srte-tool-button, .srte-toolbar select { height: 40px; min-width: 40px; }
293
+ .srte-toolbar-group[data-srte-priority="3"],
294
+ .srte-toolbar-menu[data-srte-priority="2"] { display: none; }
295
+ .srte-mobile-more { display: block; }
296
+ .srte-menu-item { height: 40px; }
297
+ }
56
298
  .srte-editor [contenteditable] blockquote {
57
299
  border-left: 4px solid var(--srte-accent);
58
300
  margin: 0.75em 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "smartrte-react",
3
- "version": "0.3.1",
3
+ "version": "0.3.2",
4
4
  "description": "A powerful, feature-rich Rich Text Editor for React with support for tables, mathematical formulas (LaTeX/KaTeX), and media management",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",