smartrte-react 0.2.1 → 0.2.3

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 (7) hide show
  1. package/dist/components/ClassicEditor.d.ts +19 -1
  2. package/dist/components/ClassicEditor.js +1081 -108
  3. package/dist/components/MediaManager.d.ts +7 -0
  4. package/dist/components/MediaManager.js +65 -14
  5. package/dist/theme.d.ts +1 -1
  6. package/dist/theme.js +17 -0
  7. package/package.json +13 -11
package/dist/components/MediaManager.d.ts CHANGED
@@ -10,6 +10,13 @@ export type MediaItem = {
10
10
  title?: string;
11
11
  alt?: string;
12
12
  tags?: string[];
13
+ license?: {
14
+ author?: string;
15
+ licenseType?: string;
16
+ licenseText?: string;
17
+ sourceUrl?: string;
18
+ workName?: string;
19
+ };
13
20
  };
14
21
  export type MediaSearchQuery = {
15
22
  q?: string;
package/dist/components/MediaManager.js CHANGED
@@ -7,6 +7,7 @@ export function MediaManager(props) {
7
7
  const [error, setError] = useState(null);
8
8
  const [query, setQuery] = useState("");
9
9
  const [results, setResults] = useState([]);
10
+ const [infoItem, setInfoItem] = useState(null);
10
11
  const fileInputRef = useRef(null);
11
12
  useEffect(() => {
12
13
  if (!open)
@@ -151,22 +152,72 @@ export function MediaManager(props) {
151
152
  gap: 12,
152
153
  overflowY: "auto",
153
154
  paddingBottom: 16,
154
- }, children: results.map((it) => (_jsxs("button", { onClick: () => {
155
- onSelect(it);
156
- onClose();
157
- }, title: it.title || it.url, style: {
158
- display: "block",
155
+ }, children: results.map((it) => (_jsxs("div", { title: it.title || it.url, style: {
156
+ display: "flex",
157
+ flexDirection: "column",
158
+ gap: 6,
159
159
  border: "1px solid var(--srte-border-light)",
160
160
  borderRadius: 8,
161
161
  padding: 6,
162
162
  background: "var(--srte-input-bg)",
163
- textAlign: "center",
164
- }, children: [_jsx("img", { src: it.url, alt: it.alt || "", style: {
165
- maxWidth: "100%",
166
- maxHeight: 100,
167
- display: "block",
168
- margin: "0 auto",
169
- objectFit: "cover",
170
- borderRadius: 6,
171
- } }), _jsx("div", { style: { fontSize: 11, marginTop: 6, color: "var(--srte-text-muted)" }, children: it.width && it.height ? `${it.width}×${it.height}` : "" })] }, it.id || it.url))) })] }))] }) }));
163
+ color: "var(--srte-input-text)",
164
+ }, children: [_jsx("button", { type: "button", onClick: () => {
165
+ onSelect(it);
166
+ onClose();
167
+ }, style: {
168
+ border: "none",
169
+ padding: 0,
170
+ background: "transparent",
171
+ cursor: "pointer",
172
+ }, children: _jsx("img", { src: it.url, alt: it.alt || "", style: {
173
+ maxWidth: "100%",
174
+ maxHeight: 100,
175
+ display: "block",
176
+ margin: "0 auto",
177
+ objectFit: "cover",
178
+ borderRadius: 6,
179
+ } }) }), _jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 6 }, children: [_jsx("div", { style: { fontSize: 11, color: "var(--srte-text-muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: it.title || it.alt || (it.width && it.height ? `${it.width}×${it.height}` : "Image") }), _jsx("button", { type: "button", onClick: () => setInfoItem(it), title: "Image info", style: {
180
+ width: 24,
181
+ height: 24,
182
+ border: "1px solid var(--srte-border)",
183
+ borderRadius: 999,
184
+ background: "var(--srte-surface-subtle)",
185
+ color: "var(--srte-input-text)",
186
+ cursor: "pointer",
187
+ flex: "0 0 auto",
188
+ }, children: "i" })] }), it.tags && it.tags.length > 0 && (_jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: it.tags.slice(0, 3).map((tag) => (_jsx("span", { style: {
189
+ fontSize: 10,
190
+ padding: "1px 5px",
191
+ borderRadius: 999,
192
+ background: "var(--srte-surface-subtle)",
193
+ color: "var(--srte-text-muted)",
194
+ }, children: tag }, tag))) }))] }, it.id || it.url))) })] })), infoItem && (_jsx("div", { style: {
195
+ position: "fixed",
196
+ inset: 0,
197
+ background: "var(--srte-modal-backdrop)",
198
+ display: "flex",
199
+ alignItems: "center",
200
+ justifyContent: "center",
201
+ zIndex: 90,
202
+ }, onClick: () => setInfoItem(null), children: _jsxs("div", { style: {
203
+ width: 420,
204
+ maxWidth: "90vw",
205
+ background: "var(--srte-modal-bg)",
206
+ color: "var(--srte-modal-text)",
207
+ borderRadius: 10,
208
+ boxShadow: "var(--srte-menu-shadow)",
209
+ padding: 16,
210
+ }, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: 12, marginBottom: 12 }, children: [_jsx("div", { style: { fontWeight: 600 }, children: "Image info" }), _jsx("button", { type: "button", onClick: () => setInfoItem(null), children: "\u2715" })] }), _jsx("img", { src: infoItem.url, alt: infoItem.alt || "", style: { maxWidth: "100%", maxHeight: 180, display: "block", margin: "0 auto 12px", borderRadius: 8 } }), [
211
+ ["Title", infoItem.title],
212
+ ["Alt text", infoItem.alt],
213
+ ["Dimensions", infoItem.width && infoItem.height ? `${infoItem.width}×${infoItem.height}` : undefined],
214
+ ["MIME type", infoItem.mimeType],
215
+ ["Size", infoItem.sizeBytes ? `${Math.round(infoItem.sizeBytes / 1024)} KB` : undefined],
216
+ ["Created", infoItem.createdAt],
217
+ ["Tags", infoItem.tags?.join(", ")],
218
+ ["Work", infoItem.license?.workName],
219
+ ["Author", infoItem.license?.author],
220
+ ["License", [infoItem.license?.licenseType, infoItem.license?.licenseText].filter(Boolean).join(" - ")],
221
+ ["Source", infoItem.license?.sourceUrl],
222
+ ].filter(([, value]) => value).map(([label, value]) => (_jsxs("div", { style: { display: "grid", gridTemplateColumns: "92px 1fr", gap: 8, fontSize: 12, marginBottom: 6 }, children: [_jsx("div", { style: { color: "var(--srte-text-muted)" }, children: label }), _jsx("div", { style: { overflowWrap: "anywhere" }, children: value })] }, label)))] }) }))] }) }));
172
223
  }
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-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}\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.6);\n --srte-modal-bg: #252525;\n --srte-modal-text: #e0e0e0;\n --srte-menu-bg: #2a2a2a;\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}\n";
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-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}\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.6);\n --srte-modal-bg: #252525;\n --srte-modal-text: #e0e0e0;\n --srte-menu-bg: #2a2a2a;\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}\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.srte-dark [contenteditable] [style*=\"color\"]:not(.srte-preserve-colors):not(.srte-preserve-colors *),\n.srte-editor.srte-dark [contenteditable] [style*=\"background\"]: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
@@ -47,6 +47,23 @@ export const SRTE_DEFAULT_CSS = `
47
47
  --srte-on-primary: #ffffff;
48
48
  --srte-cancel-bg: #333333;
49
49
  }
50
+ .srte-editor [contenteditable] blockquote {
51
+ border-left: 4px solid var(--srte-accent);
52
+ margin: 0.75em 0;
53
+ padding: 0.5em 1em;
54
+ background: var(--srte-surface-subtle);
55
+ color: var(--srte-text);
56
+ }
57
+ .srte-editor.srte-dark [contenteditable] [style*="color"]:not(.srte-preserve-colors):not(.srte-preserve-colors *),
58
+ .srte-editor.srte-dark [contenteditable] [style*="background"]:not(.srte-preserve-colors):not(.srte-preserve-colors *) {
59
+ color: var(--srte-text) !important;
60
+ background: transparent !important;
61
+ background-color: transparent !important;
62
+ }
63
+ .srte-editor [contenteditable] sub,
64
+ .srte-editor [contenteditable] sup {
65
+ line-height: 0;
66
+ }
50
67
  `;
51
68
  const SRTE_STYLE_ID = 'srte-theme-defaults';
52
69
  export function ensureStyleSheet() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "smartrte-react",
3
- "version": "0.2.1",
3
+ "version": "0.2.3",
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",
@@ -38,6 +38,16 @@
38
38
  },
39
39
  "author": "Smart RTE Contributors",
40
40
  "license": "MIT",
41
+ "scripts": {
42
+ "build": "tsc -p tsconfig.json",
43
+ "prepublishOnly": "pnpm run build",
44
+ "dev": "pnpm build",
45
+ "lint": "eslint . || true",
46
+ "test": "vitest run || true",
47
+ "storybook": "storybook dev -p 6006",
48
+ "build-storybook": "storybook build",
49
+ "e2e": "playwright test || true"
50
+ },
41
51
  "publishConfig": {
42
52
  "access": "public"
43
53
  },
@@ -62,16 +72,8 @@
62
72
  "vitest": "^2.1.4"
63
73
  },
64
74
  "dependencies": {
75
+ "jszip": "^3.10.1",
65
76
  "mammoth": "^1.11.0",
66
77
  "pdfjs-dist": "^5.4.530"
67
- },
68
- "scripts": {
69
- "build": "tsc -p tsconfig.json",
70
- "dev": "pnpm build",
71
- "lint": "eslint . || true",
72
- "test": "vitest run || true",
73
- "storybook": "storybook dev -p 6006",
74
- "build-storybook": "storybook build",
75
- "e2e": "playwright test || true"
76
78
  }
77
- }
79
+ }