@malaya_jeeva/rich-text-editor 1.0.11 → 1.0.12

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 (5) hide show
  1. package/dist/index.d.mts +2 -1
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.js +102 -64
  4. package/dist/index.mjs +102 -64
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -5,8 +5,9 @@ type RichTextEditorProps = {
5
5
  value?: string;
6
6
  onChange?: (value: string) => void;
7
7
  toolbar?: ToolbarItem[];
8
+ theme?: "light" | "dark";
8
9
  };
9
10
 
10
- declare function RichTextEditor({ value, onChange, toolbar }: RichTextEditorProps): ReactElement;
11
+ declare function RichTextEditor({ value, onChange, toolbar, theme }: RichTextEditorProps): ReactElement;
11
12
 
12
13
  export { type RichTextEditorProps, RichTextEditor as default };
package/dist/index.d.ts CHANGED
@@ -5,8 +5,9 @@ type RichTextEditorProps = {
5
5
  value?: string;
6
6
  onChange?: (value: string) => void;
7
7
  toolbar?: ToolbarItem[];
8
+ theme?: "light" | "dark";
8
9
  };
9
10
 
10
- declare function RichTextEditor({ value, onChange, toolbar }: RichTextEditorProps): ReactElement;
11
+ declare function RichTextEditor({ value, onChange, toolbar, theme }: RichTextEditorProps): ReactElement;
11
12
 
12
13
  export { type RichTextEditorProps, RichTextEditor as default };
package/dist/index.js CHANGED
@@ -64,64 +64,107 @@ var PALETTE = [
64
64
  "#20124d",
65
65
  "#4c1130"
66
66
  ];
67
+ var DARK = `
68
+ --rte-toolbar-bg:#1e1e1e;--rte-toolbar-border:#333;
69
+ --rte-btn:#ccc;--rte-btn-hover-bg:#2e2e2e;--rte-btn-active-bg:#1a3a5c;--rte-btn-active:#90c4ff;
70
+ --rte-btn-danger:#ff6b6b;--rte-btn-danger-hover-bg:#3a1a1a;
71
+ --rte-sep:#3a3a3a;
72
+ --rte-select-bg:#2a2a2a;--rte-select-border:#444;--rte-select:#ccc;
73
+ --rte-cpick-bg:#222;--rte-cpick-border:#444;
74
+ --rte-cactions-border:#333;--rte-caction-hover-bg:#2a2a2a;--rte-caction-hover-border:#444;
75
+ --rte-tpick-bg:#222;--rte-tpick-border:#444;
76
+ --rte-tpcell-bg:#2a2a2a;--rte-tpcell-border:#444;--rte-tpcell-on-bg:#1a3a5c;--rte-tpcell-on-border:#90c4ff;
77
+ --rte-ipick-bg:#222;--rte-ipick-border:#444;
78
+ --rte-itabs-border:#333;--rte-itab-hover-bg:#2a2a2a;
79
+ --rte-idrop-border:#555;--rte-idrop-hover-bg:#1a3a5c;--rte-idrop-hover-border:#90c4ff;
80
+ --rte-float-bg:#222;--rte-float-border:#444;--rte-float-arrow-border:#444;--rte-float-arrow-bg:#222;
81
+ --rte-linkinput-bg:#1a1a1a;--rte-linkinput-border:#555;--rte-linkinput:#ddd;
82
+ --rte-area-bg:#141414;
83
+ --rte-body:#ddd;--rte-table-border:#444;--rte-th-bg:#2a2a2a;
84
+ --rte-pre-bg:#1e1e2e;--rte-pre-border:#333;
85
+ --rte-footer-bg:#1a1a1a;--rte-footer-border:#2a2a2a;--rte-footer:#aaa;
86
+ --rte-iepanel-bg:#222;--rte-iepanel-border:#444;
87
+ --rte-ietabs-border:#333;--rte-ietab-hover-bg:#2a2a2a;
88
+ --rte-ieinput-bg:#1a1a1a;--rte-ieinput-border:#444;--rte-ieinput:#ddd;
89
+ `;
67
90
  var CSS = `
68
91
  *{box-sizing:border-box;}
69
- .rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:1px;padding:4px 8px;background:#f8f8f8;border-bottom:1px solid #e0e0e0;position: sticky;top: 0;z-index: 9;}
70
- @media(prefers-color-scheme:dark){.rte-toolbar{background:#1e1e1e;border-color:#333;}}
71
- .rte-btn{background:transparent;border:none;border-radius:3px;cursor:pointer;height:30px;min-width:30px;padding:0 6px;color:#444;font-size:13px;font-weight:500;font-family:var(--font-sans);display:inline-flex;align-items:center;justify-content:center;user-select:none;white-space:nowrap;transition:background 0.1s;flex-shrink:0;}
72
- .rte-btn:hover{background:#e8e8e8;}.rte-btn.active{background:#d0e4ff;color:#1a5fb4;}
73
- .rte-btn.danger{color:#c0392b;}.rte-btn.danger:hover{background:#fdecea;}
74
- @media(prefers-color-scheme:dark){.rte-btn{color:#ccc;}.rte-btn:hover{background:#2e2e2e;}.rte-btn.active{background:#1a3a5c;color:#90c4ff;}.rte-btn.danger{color:#ff6b6b;}.rte-btn.danger:hover{background:#3a1a1a;}}
75
- .rte-sep{width:1px;height:20px;background:#d8d8d8;margin:0 4px;flex-shrink:0;}
76
- @media(prefers-color-scheme:dark){.rte-sep{background:#3a3a3a;}}
77
- .rte-select{height:28px;border:1px solid #d8d8d8;border-radius:3px;background:#fff;color:#333;font-size:12px;padding:0 22px 0 7px;cursor:pointer;outline:none;font-family:var(--font-sans);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;}
78
- @media(prefers-color-scheme:dark){.rte-select{background-color:#2a2a2a;border-color:#444;color:#ccc;}}
92
+
93
+ /* \u2500\u2500\u2500 Theme tokens \u2500\u2500\u2500 */
94
+ .customeditor{
95
+ max-height:350px;overflow-y:auto;position:relative;
96
+ /* light (default) */
97
+ --rte-toolbar-bg:#f8f8f8;--rte-toolbar-border:#e0e0e0;
98
+ --rte-btn:#444;--rte-btn-hover-bg:#e8e8e8;--rte-btn-active-bg:#d0e4ff;--rte-btn-active:#1a5fb4;
99
+ --rte-btn-danger:#c0392b;--rte-btn-danger-hover-bg:#fdecea;
100
+ --rte-sep:#d8d8d8;
101
+ --rte-select-bg:#fff;--rte-select-border:#d8d8d8;--rte-select:#333;
102
+ --rte-cpick-bg:#fff;--rte-cpick-border:#ccc;
103
+ --rte-cactions-border:#eee;--rte-caction-hover-bg:#f0f0f0;--rte-caction-hover-border:#ddd;
104
+ --rte-tpick-bg:#fff;--rte-tpick-border:#d8d8d8;
105
+ --rte-tpcell-bg:#fff;--rte-tpcell-border:#ddd;--rte-tpcell-on-bg:#d0e4ff;--rte-tpcell-on-border:#1a5fb4;
106
+ --rte-ipick-bg:#fff;--rte-ipick-border:#ccc;
107
+ --rte-itabs-border:#eee;--rte-itab-hover-bg:#f8f8f8;
108
+ --rte-idrop-border:#ccc;--rte-idrop-hover-bg:#f0f4ff;--rte-idrop-hover-border:#1a5fb4;
109
+ --rte-float-bg:#fff;--rte-float-border:#d0d0d0;--rte-float-arrow-border:#d0d0d0;--rte-float-arrow-bg:#fff;
110
+ --rte-linkinput-bg:#fff;--rte-linkinput-border:#ccc;--rte-linkinput:#222;
111
+ --rte-area-bg:#fff;
112
+ --rte-body:#222;--rte-table-border:#ccc;--rte-th-bg:#f5f5f5;
113
+ --rte-pre-bg:#f4f4f4;--rte-pre-border:#e0e0e0;
114
+ --rte-footer-bg:#fafafa;--rte-footer-border:#e8e8e8;--rte-footer:#999;
115
+ --rte-iepanel-bg:#fff;--rte-iepanel-border:#d0d0d0;
116
+ --rte-ietabs-border:#eee;--rte-ietab-hover-bg:#f8f8f8;
117
+ --rte-ieinput-bg:#fff;--rte-ieinput-border:#ccc;--rte-ieinput:#222;
118
+ }
119
+ /* Explicit dark */
120
+ .customeditor.rte-dark{${DARK}}
121
+ /* OS-level auto dark (ignored when an explicit theme class is present) */
122
+ @media(prefers-color-scheme:dark){
123
+ .customeditor:not(.rte-light):not(.rte-dark){${DARK}}
124
+ }
125
+
126
+ /* \u2500\u2500\u2500 Component styles \u2500\u2500\u2500 */
127
+ .rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:1px;padding:4px 8px;background:var(--rte-toolbar-bg);border-bottom:1px solid var(--rte-toolbar-border);position:sticky;top:0;z-index:9;}
128
+ .rte-btn{background:transparent;border:none;border-radius:3px;cursor:pointer;height:30px;min-width:30px;padding:0 6px;color:var(--rte-btn);font-size:13px;font-weight:500;font-family:var(--font-sans);display:inline-flex;align-items:center;justify-content:center;user-select:none;white-space:nowrap;transition:background 0.1s;flex-shrink:0;}
129
+ .rte-btn:hover{background:var(--rte-btn-hover-bg);}
130
+ .rte-btn.active{background:var(--rte-btn-active-bg);color:var(--rte-btn-active);}
131
+ .rte-btn.danger{color:var(--rte-btn-danger);}
132
+ .rte-btn.danger:hover{background:var(--rte-btn-danger-hover-bg);}
133
+ .rte-sep{width:1px;height:20px;background:var(--rte-sep);margin:0 4px;flex-shrink:0;}
134
+ .rte-select{height:28px;border:1px solid var(--rte-select-border);border-radius:3px;background:var(--rte-select-bg);color:var(--rte-select);font-size:12px;padding:0 22px 0 7px;cursor:pointer;outline:none;font-family:var(--font-sans);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;}
79
135
  .rte-swatch{width:14px;height:3px;border-radius:1px;margin-top:2px;}
80
- .rte-cpick{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.15);padding:8px;min-width:190px;}
81
- @media(prefers-color-scheme:dark){.rte-cpick{background:#222;border-color:#444;}}
136
+ .rte-cpick{background:var(--rte-cpick-bg);border:1px solid var(--rte-cpick-border);border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.15);padding:8px;min-width:190px;}
82
137
  .rte-cgrid{display:grid;grid-template-columns:repeat(8,20px);gap:2px;margin-bottom:6px;}
83
138
  .rte-ccell{width:20px;height:20px;border-radius:3px;cursor:pointer;border:1px solid rgba(0,0,0,0.12);transition:transform 0.08s,box-shadow 0.08s;}
84
139
  .rte-ccell:hover{transform:scale(1.2);box-shadow:0 1px 4px rgba(0,0,0,0.3);z-index:1;position:relative;}
85
140
  .rte-ccell.sel{outline:2px solid #1a5fb4;outline-offset:1px;}
86
- .rte-cactions{display:flex;align-items:center;gap:2px;border-top:1px solid #eee;padding-top:6px;margin-top:2px;}
87
- @media(prefers-color-scheme:dark){.rte-cactions{border-color:#333;}}
141
+ .rte-cactions{display:flex;align-items:center;gap:2px;border-top:1px solid var(--rte-cactions-border);padding-top:6px;margin-top:2px;}
88
142
  .rte-caction{flex:1;height:28px;display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;border:1px solid transparent;transition:background 0.1s;}
89
- .rte-caction:hover{background:#f0f0f0;border-color:#ddd;}
90
- @media(prefers-color-scheme:dark){.rte-caction:hover{background:#2a2a2a;border-color:#444;}}
91
- .rte-tpick{background:#fff;border:1px solid #d8d8d8;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.12);padding:10px;}
92
- @media(prefers-color-scheme:dark){.rte-tpick{background:#222;border-color:#444;}}
143
+ .rte-caction:hover{background:var(--rte-caction-hover-bg);border-color:var(--rte-caction-hover-border);}
144
+ .rte-tpick{background:var(--rte-tpick-bg);border:1px solid var(--rte-tpick-border);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.12);padding:10px;}
93
145
  .rte-tplbl{font-size:11px;color:#888;text-align:center;margin-bottom:8px;font-family:var(--font-sans);}
94
146
  .rte-tpgrid{display:grid;grid-template-columns:repeat(8,18px);gap:2px;}
95
- .rte-tpcell{width:18px;height:18px;border-radius:2px;border:1px solid #ddd;cursor:pointer;background:#fff;transition:background 0.08s;}
96
- .rte-tpcell.on{background:#d0e4ff;border-color:#1a5fb4;}
97
- @media(prefers-color-scheme:dark){.rte-tpcell{background:#2a2a2a;border-color:#444;}.rte-tpcell.on{background:#1a3a5c;border-color:#90c4ff;}}
98
- .rte-ipick{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.15);width:300px;overflow:hidden;}
99
- @media(prefers-color-scheme:dark){.rte-ipick{background:#222;border-color:#444;}}
100
- .rte-itabs{display:flex;border-bottom:1px solid #eee;}
101
- @media(prefers-color-scheme:dark){.rte-itabs{border-color:#333;}}
147
+ .rte-tpcell{width:18px;height:18px;border-radius:2px;border:1px solid var(--rte-tpcell-border);cursor:pointer;background:var(--rte-tpcell-bg);transition:background 0.08s;}
148
+ .rte-tpcell.on{background:var(--rte-tpcell-on-bg);border-color:var(--rte-tpcell-on-border);}
149
+ .rte-ipick{background:var(--rte-ipick-bg);border:1px solid var(--rte-ipick-border);border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.15);width:300px;overflow:hidden;}
150
+ .rte-itabs{display:flex;border-bottom:1px solid var(--rte-itabs-border);}
102
151
  .rte-itab{flex:1;padding:8px 4px;font-size:12px;font-weight:500;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;color:#888;font-family:var(--font-sans);}
103
- .rte-itab:hover{color:#444;background:#f8f8f8;}.rte-itab.active{color:#1a5fb4;border-bottom-color:#1a5fb4;}
104
- @media(prefers-color-scheme:dark){.rte-itab:hover{background:#2a2a2a;}}
152
+ .rte-itab:hover{color:#444;background:var(--rte-itab-hover-bg);}
153
+ .rte-itab.active{color:#1a5fb4;border-bottom-color:#1a5fb4;}
105
154
  .rte-ipbody{padding:12px;display:flex;flex-direction:column;gap:10px;}
106
- .rte-idrop{border:2px dashed #ccc;border-radius:6px;padding:24px 12px;text-align:center;cursor:pointer;transition:border-color 0.15s,background 0.15s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:110px;}
107
- .rte-idrop:hover,.rte-idrop.drag{border-color:#1a5fb4;background:#f0f4ff;}
108
- @media(prefers-color-scheme:dark){.rte-idrop{border-color:#555;}.rte-idrop:hover,.rte-idrop.drag{background:#1a3a5c;border-color:#90c4ff;}}
155
+ .rte-idrop{border:2px dashed var(--rte-idrop-border);border-radius:6px;padding:24px 12px;text-align:center;cursor:pointer;transition:border-color 0.15s,background 0.15s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:110px;}
156
+ .rte-idrop:hover,.rte-idrop.drag{border-color:var(--rte-idrop-hover-border);background:var(--rte-idrop-hover-bg);}
109
157
  .rte-iinsert{width:100%;height:30px;background:#1a6fc4;color:#fff;border:none;border-radius:4px;font-size:12px;font-weight:600;cursor:pointer;}
110
158
  .rte-iinsert:disabled{opacity:0.4;cursor:not-allowed;}
111
- .rte-float{position:absolute;z-index:50;background:#fff;border:1px solid #d0d0d0;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.13);padding:4px 6px;display:flex;align-items:center;gap:1px;flex-wrap:wrap;}
112
- @media(prefers-color-scheme:dark){.rte-float{background:#222;border-color:#444;}}
159
+ .rte-float{position:absolute;z-index:50;background:var(--rte-float-bg);border:1px solid var(--rte-float-border);border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.13);padding:4px 6px;display:flex;align-items:center;gap:1px;flex-wrap:wrap;}
113
160
  .rte-float-arrow{position:absolute;top:-7px;width:14px;height:7px;}
114
161
  .rte-float-arrow::before,.rte-float-arrow::after{content:'';position:absolute;left:0;border-left:7px solid transparent;border-right:7px solid transparent;}
115
- .rte-float-arrow::before{top:0;border-bottom:7px solid #d0d0d0;}
116
- .rte-float-arrow::after{top:1px;border-bottom:6px solid #fff;}
117
- @media(prefers-color-scheme:dark){.rte-float-arrow::before{border-bottom-color:#444;}.rte-float-arrow::after{border-bottom-color:#222;}}
162
+ .rte-float-arrow::before{top:0;border-bottom:7px solid var(--rte-float-arrow-border);}
163
+ .rte-float-arrow::after{top:1px;border-bottom:6px solid var(--rte-float-arrow-bg);}
118
164
  .rte-linkbar{min-width:340px;}
119
- .rte-linkbar input{flex:1;height:26px;border:1px solid #ccc;border-radius:3px;padding:0 8px;font-size:13px;outline:none;font-family:var(--font-sans);background:#fff;color:#222;min-width:0;}
120
- @media(prefers-color-scheme:dark){.rte-linkbar input{background:#1a1a1a;border-color:#555;color:#ddd;}}
121
- .rte-area{position:relative;background:#fff;}
122
- @media(prefers-color-scheme:dark){.rte-area{background:#141414;}}
123
- .rte-body{min-height:280px;outline:none;font-size:15px;line-height:1.75;color:#222;caret-color:#222;padding:18px 20px;}
124
- @media(prefers-color-scheme:dark){.rte-body{color:#ddd;caret-color:#ddd;}}
165
+ .rte-linkbar input{flex:1;height:26px;border:1px solid var(--rte-linkinput-border);border-radius:3px;padding:0 8px;font-size:13px;outline:none;font-family:var(--font-sans);background:var(--rte-linkinput-bg);color:var(--rte-linkinput);min-width:0;}
166
+ .rte-area{position:relative;background:var(--rte-area-bg);}
167
+ .rte-body{min-height:280px;outline:none;font-size:15px;line-height:1.75;color:var(--rte-body);caret-color:var(--rte-body);padding:18px 20px;}
125
168
  .rte-body h1{font-size:26px;font-weight:600;margin:0.6em 0 0.2em;}
126
169
  .rte-body h2{font-size:20px;font-weight:600;margin:0.6em 0 0.2em;}
127
170
  .rte-body h3{font-size:16px;font-weight:600;margin:0.6em 0 0.2em;}
@@ -135,32 +178,26 @@ var CSS = `
135
178
  .rte-body ul ul ul{list-style-type:square;padding-left:1.6em;}
136
179
  .rte-body li{margin:0.1em 0;}
137
180
  .rte-body a{color:#1a6fc4;text-decoration:underline;cursor:pointer;}
138
- .rte-body pre{background:#f4f4f4;border:1px solid #e0e0e0;border-radius:4px;padding:12px 14px;margin:0.6em 0;overflow-x:auto;}
181
+ .rte-body pre{background:var(--rte-pre-bg);border:1px solid var(--rte-pre-border);border-radius:4px;padding:12px 14px;margin:0.6em 0;overflow-x:auto;}
139
182
  .rte-body code{font-family:var(--font-mono);font-size:13px;}
140
183
  .rte-body:empty:before{content:attr(data-ph);color:#aaa;pointer-events:none;}
141
184
  .rte-body table{border-collapse:collapse;width:100%;margin:0.8em 0;}
142
- .rte-body td,.rte-body th{border:1px solid #ccc;padding:7px 10px;min-width:60px;text-align:left;vertical-align:top;}
143
- .rte-body th{background:#f5f5f5;font-weight:600;}
144
- @media(prefers-color-scheme:dark){.rte-body td,.rte-body th{border-color:#444;}.rte-body th{background:#2a2a2a;}}
185
+ .rte-body td,.rte-body th{border:1px solid var(--rte-table-border);padding:7px 10px;min-width:60px;text-align:left;vertical-align:top;}
186
+ .rte-body th{background:var(--rte-th-bg);font-weight:600;}
145
187
  .rte-body td.rte-sel,.rte-body th.rte-sel{background:rgba(26,95,180,0.15)!important;outline:2px solid #1a5fb4;outline-offset:-2px;}
146
188
  .rte-body img{max-width:100%;height:auto;display:block;margin:4px 0;cursor:pointer;}
147
189
  .rte-body figure{margin:0.8em 0;display:block;overflow:hidden;}
148
190
  .rte-body figcaption{font-size:13px;color:#666;text-align:center;padding:4px 0;outline:none;clear:both;display:block;}
149
191
  .rte-code{min-height:280px;width:100%;background:#1e1e2e;color:#cdd6f4;font-family:var(--font-mono);font-size:13px;line-height:1.6;padding:18px 20px;border:none;outline:none;resize:vertical;}
150
- .rte-footer{font-size:11px;color:#999;padding:4px 20px 5px;border-top:1px solid #e8e8e8;background:#fafafa;}
151
- @media(prefers-color-scheme:dark){.rte-footer{border-color:#2a2a2a;background:#1a1a1a;color:#555;}}
152
- .rte-ie-panel{position:absolute;z-index:52;background:#fff;border:1px solid #d0d0d0;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.15);width:210px;overflow:hidden;}
153
- @media(prefers-color-scheme:dark){.rte-ie-panel{background:#222;border-color:#444;}}
154
- .rte-ie-tabs{display:flex;border-bottom:1px solid #eee;}
155
- @media(prefers-color-scheme:dark){.rte-ie-tabs{border-color:#333;}}
192
+ .rte-footer{font-size:11px;color:var(--rte-footer);padding:4px 20px 5px;border-top:1px solid var(--rte-footer-border);background:var(--rte-footer-bg);}
193
+ .rte-ie-panel{position:absolute;z-index:52;background:var(--rte-iepanel-bg);border:1px solid var(--rte-iepanel-border);border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.15);width:210px;overflow:hidden;}
194
+ .rte-ie-tabs{display:flex;border-bottom:1px solid var(--rte-ietabs-border);}
156
195
  .rte-ie-tab{flex:1;padding:7px 4px;font-size:11px;font-weight:500;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;color:#888;font-family:var(--font-sans);}
157
196
  .rte-ie-tab.active{color:#1a5fb4;border-bottom-color:#1a5fb4;}
158
- .rte-ie-tab:hover{background:#f8f8f8;}
159
- @media(prefers-color-scheme:dark){.rte-ie-tab:hover{background:#2a2a2a;}}
197
+ .rte-ie-tab:hover{background:var(--rte-ietab-hover-bg);}
160
198
  .rte-ie-body{padding:10px;display:flex;flex-direction:column;gap:8px;}
161
199
  .rte-ie-label{font-size:10px;color:#888;margin-bottom:3px;font-family:var(--font-sans);}
162
- .rte-ie-input{width:100%;height:26px;border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:11px;outline:none;font-family:var(--font-sans);background:#fff;color:#222;}
163
- @media(prefers-color-scheme:dark){.rte-ie-input{background:#1a1a1a;border-color:#444;color:#ddd;}}
200
+ .rte-ie-input{width:100%;height:26px;border:1px solid var(--rte-ieinput-border);border-radius:4px;padding:0 8px;font-size:11px;outline:none;font-family:var(--font-sans);background:var(--rte-ieinput-bg);color:var(--rte-ieinput);}
164
201
  .rte-ie-row{display:flex;gap:4px;}
165
202
  .rte-ie-seg-btn{flex:1;height:26px;font-size:11px;border:1px solid #ccc;border-radius:4px;background:transparent;color:#444;cursor:pointer;font-family:var(--font-sans);transition:all 0.1s;}
166
203
  .rte-ie-seg-btn.active{background:#d0e4ff;border-color:#1a5fb4;color:#1a5fb4;}
@@ -170,12 +207,13 @@ var CSS = `
170
207
  .rte-ie-apply{flex:1;height:26px;background:#1a6fc4;color:#fff;border:none;border-radius:4px;font-size:11px;font-weight:600;cursor:pointer;}
171
208
  .rte-ie-remove{flex:1;height:26px;background:#fdecea;color:#c0392b;border:1px solid #f5c6c2;border-radius:4px;font-size:11px;cursor:pointer;}
172
209
  .rte-handle{position:absolute;width:10px;height:10px;background:#fff;border:2px solid #1a5fb4;border-radius:2px;pointer-events:all;z-index:53;}
173
- .customeditor {
174
- max-height: 350px;
175
- overflow-y: auto;
176
- position: relative;
177
- }
178
-
210
+ .rte-body blockquote{background-color: rgb(245, 243, 255);
211
+ border-left: 4px solid rgb(100, 80, 220);
212
+ margin: 8px 0;
213
+ padding: 10px 16px;
214
+ font-style: italic;
215
+ color: rgb(75, 85, 99);
216
+ border-radius: 0 4px 4px 0;}
179
217
  `;
180
218
 
181
219
  // src/rte/utils.ts
@@ -1150,7 +1188,7 @@ function ImageEditor({ img, containerRef, onClose, onDelete, onChange }) {
1150
1188
 
1151
1189
  // src/RichTextEditor.tsx
1152
1190
  var import_jsx_runtime7 = require("react/jsx-runtime");
1153
- function RichTextEditor({ value, onChange, toolbar }) {
1191
+ function RichTextEditor({ value, onChange, toolbar, theme }) {
1154
1192
  var _a;
1155
1193
  const editorRef = (0, import_react5.useRef)(null);
1156
1194
  const editorAreaRef = (0, import_react5.useRef)(null);
@@ -1691,7 +1729,7 @@ function RichTextEditor({ value, onChange, toolbar }) {
1691
1729
  const show = (key) => !toolbar || toolbar.includes(key);
1692
1730
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { padding: "1rem 0" }, children: [
1693
1731
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: CSS }),
1694
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "customeditor", style: { border: "1px solid #d8d8d8", borderRadius: 4, boxShadow: "0 1px 3px rgba(0,0,0,0.06)" }, children: [
1732
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `customeditor${theme ? ` rte-${theme}` : ""}`, style: { border: "1px solid #d8d8d8", borderRadius: 4, boxShadow: "0 1px 3px rgba(0,0,0,0.06)" }, children: [
1695
1733
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rte-toolbar", children: [
1696
1734
  !isCode && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
1697
1735
  show("bold") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("bold"), title: "Bold (Ctrl+B)", active: fmt.bold, style: { fontWeight: 800, fontFamily: "Georgia,serif" }, children: "B" }),
@@ -1707,7 +1745,7 @@ function RichTextEditor({ value, onChange, toolbar }) {
1707
1745
  active: showColor,
1708
1746
  style: { flexDirection: "column", gap: 1, padding: "3px 6px" },
1709
1747
  children: [
1710
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: 13, fontWeight: 800, fontFamily: "Georgia,serif", lineHeight: 1, color: "#222" }, children: "A" }),
1748
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: 13, fontWeight: 800, fontFamily: "Georgia,serif", lineHeight: 1 }, children: "A" }),
1711
1749
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "rte-swatch", style: { background: color } })
1712
1750
  ]
1713
1751
  }
package/dist/index.mjs CHANGED
@@ -43,64 +43,107 @@ var PALETTE = [
43
43
  "#20124d",
44
44
  "#4c1130"
45
45
  ];
46
+ var DARK = `
47
+ --rte-toolbar-bg:#1e1e1e;--rte-toolbar-border:#333;
48
+ --rte-btn:#ccc;--rte-btn-hover-bg:#2e2e2e;--rte-btn-active-bg:#1a3a5c;--rte-btn-active:#90c4ff;
49
+ --rte-btn-danger:#ff6b6b;--rte-btn-danger-hover-bg:#3a1a1a;
50
+ --rte-sep:#3a3a3a;
51
+ --rte-select-bg:#2a2a2a;--rte-select-border:#444;--rte-select:#ccc;
52
+ --rte-cpick-bg:#222;--rte-cpick-border:#444;
53
+ --rte-cactions-border:#333;--rte-caction-hover-bg:#2a2a2a;--rte-caction-hover-border:#444;
54
+ --rte-tpick-bg:#222;--rte-tpick-border:#444;
55
+ --rte-tpcell-bg:#2a2a2a;--rte-tpcell-border:#444;--rte-tpcell-on-bg:#1a3a5c;--rte-tpcell-on-border:#90c4ff;
56
+ --rte-ipick-bg:#222;--rte-ipick-border:#444;
57
+ --rte-itabs-border:#333;--rte-itab-hover-bg:#2a2a2a;
58
+ --rte-idrop-border:#555;--rte-idrop-hover-bg:#1a3a5c;--rte-idrop-hover-border:#90c4ff;
59
+ --rte-float-bg:#222;--rte-float-border:#444;--rte-float-arrow-border:#444;--rte-float-arrow-bg:#222;
60
+ --rte-linkinput-bg:#1a1a1a;--rte-linkinput-border:#555;--rte-linkinput:#ddd;
61
+ --rte-area-bg:#141414;
62
+ --rte-body:#ddd;--rte-table-border:#444;--rte-th-bg:#2a2a2a;
63
+ --rte-pre-bg:#1e1e2e;--rte-pre-border:#333;
64
+ --rte-footer-bg:#1a1a1a;--rte-footer-border:#2a2a2a;--rte-footer:#aaa;
65
+ --rte-iepanel-bg:#222;--rte-iepanel-border:#444;
66
+ --rte-ietabs-border:#333;--rte-ietab-hover-bg:#2a2a2a;
67
+ --rte-ieinput-bg:#1a1a1a;--rte-ieinput-border:#444;--rte-ieinput:#ddd;
68
+ `;
46
69
  var CSS = `
47
70
  *{box-sizing:border-box;}
48
- .rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:1px;padding:4px 8px;background:#f8f8f8;border-bottom:1px solid #e0e0e0;position: sticky;top: 0;z-index: 9;}
49
- @media(prefers-color-scheme:dark){.rte-toolbar{background:#1e1e1e;border-color:#333;}}
50
- .rte-btn{background:transparent;border:none;border-radius:3px;cursor:pointer;height:30px;min-width:30px;padding:0 6px;color:#444;font-size:13px;font-weight:500;font-family:var(--font-sans);display:inline-flex;align-items:center;justify-content:center;user-select:none;white-space:nowrap;transition:background 0.1s;flex-shrink:0;}
51
- .rte-btn:hover{background:#e8e8e8;}.rte-btn.active{background:#d0e4ff;color:#1a5fb4;}
52
- .rte-btn.danger{color:#c0392b;}.rte-btn.danger:hover{background:#fdecea;}
53
- @media(prefers-color-scheme:dark){.rte-btn{color:#ccc;}.rte-btn:hover{background:#2e2e2e;}.rte-btn.active{background:#1a3a5c;color:#90c4ff;}.rte-btn.danger{color:#ff6b6b;}.rte-btn.danger:hover{background:#3a1a1a;}}
54
- .rte-sep{width:1px;height:20px;background:#d8d8d8;margin:0 4px;flex-shrink:0;}
55
- @media(prefers-color-scheme:dark){.rte-sep{background:#3a3a3a;}}
56
- .rte-select{height:28px;border:1px solid #d8d8d8;border-radius:3px;background:#fff;color:#333;font-size:12px;padding:0 22px 0 7px;cursor:pointer;outline:none;font-family:var(--font-sans);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;}
57
- @media(prefers-color-scheme:dark){.rte-select{background-color:#2a2a2a;border-color:#444;color:#ccc;}}
71
+
72
+ /* \u2500\u2500\u2500 Theme tokens \u2500\u2500\u2500 */
73
+ .customeditor{
74
+ max-height:350px;overflow-y:auto;position:relative;
75
+ /* light (default) */
76
+ --rte-toolbar-bg:#f8f8f8;--rte-toolbar-border:#e0e0e0;
77
+ --rte-btn:#444;--rte-btn-hover-bg:#e8e8e8;--rte-btn-active-bg:#d0e4ff;--rte-btn-active:#1a5fb4;
78
+ --rte-btn-danger:#c0392b;--rte-btn-danger-hover-bg:#fdecea;
79
+ --rte-sep:#d8d8d8;
80
+ --rte-select-bg:#fff;--rte-select-border:#d8d8d8;--rte-select:#333;
81
+ --rte-cpick-bg:#fff;--rte-cpick-border:#ccc;
82
+ --rte-cactions-border:#eee;--rte-caction-hover-bg:#f0f0f0;--rte-caction-hover-border:#ddd;
83
+ --rte-tpick-bg:#fff;--rte-tpick-border:#d8d8d8;
84
+ --rte-tpcell-bg:#fff;--rte-tpcell-border:#ddd;--rte-tpcell-on-bg:#d0e4ff;--rte-tpcell-on-border:#1a5fb4;
85
+ --rte-ipick-bg:#fff;--rte-ipick-border:#ccc;
86
+ --rte-itabs-border:#eee;--rte-itab-hover-bg:#f8f8f8;
87
+ --rte-idrop-border:#ccc;--rte-idrop-hover-bg:#f0f4ff;--rte-idrop-hover-border:#1a5fb4;
88
+ --rte-float-bg:#fff;--rte-float-border:#d0d0d0;--rte-float-arrow-border:#d0d0d0;--rte-float-arrow-bg:#fff;
89
+ --rte-linkinput-bg:#fff;--rte-linkinput-border:#ccc;--rte-linkinput:#222;
90
+ --rte-area-bg:#fff;
91
+ --rte-body:#222;--rte-table-border:#ccc;--rte-th-bg:#f5f5f5;
92
+ --rte-pre-bg:#f4f4f4;--rte-pre-border:#e0e0e0;
93
+ --rte-footer-bg:#fafafa;--rte-footer-border:#e8e8e8;--rte-footer:#999;
94
+ --rte-iepanel-bg:#fff;--rte-iepanel-border:#d0d0d0;
95
+ --rte-ietabs-border:#eee;--rte-ietab-hover-bg:#f8f8f8;
96
+ --rte-ieinput-bg:#fff;--rte-ieinput-border:#ccc;--rte-ieinput:#222;
97
+ }
98
+ /* Explicit dark */
99
+ .customeditor.rte-dark{${DARK}}
100
+ /* OS-level auto dark (ignored when an explicit theme class is present) */
101
+ @media(prefers-color-scheme:dark){
102
+ .customeditor:not(.rte-light):not(.rte-dark){${DARK}}
103
+ }
104
+
105
+ /* \u2500\u2500\u2500 Component styles \u2500\u2500\u2500 */
106
+ .rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:1px;padding:4px 8px;background:var(--rte-toolbar-bg);border-bottom:1px solid var(--rte-toolbar-border);position:sticky;top:0;z-index:9;}
107
+ .rte-btn{background:transparent;border:none;border-radius:3px;cursor:pointer;height:30px;min-width:30px;padding:0 6px;color:var(--rte-btn);font-size:13px;font-weight:500;font-family:var(--font-sans);display:inline-flex;align-items:center;justify-content:center;user-select:none;white-space:nowrap;transition:background 0.1s;flex-shrink:0;}
108
+ .rte-btn:hover{background:var(--rte-btn-hover-bg);}
109
+ .rte-btn.active{background:var(--rte-btn-active-bg);color:var(--rte-btn-active);}
110
+ .rte-btn.danger{color:var(--rte-btn-danger);}
111
+ .rte-btn.danger:hover{background:var(--rte-btn-danger-hover-bg);}
112
+ .rte-sep{width:1px;height:20px;background:var(--rte-sep);margin:0 4px;flex-shrink:0;}
113
+ .rte-select{height:28px;border:1px solid var(--rte-select-border);border-radius:3px;background:var(--rte-select-bg);color:var(--rte-select);font-size:12px;padding:0 22px 0 7px;cursor:pointer;outline:none;font-family:var(--font-sans);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;}
58
114
  .rte-swatch{width:14px;height:3px;border-radius:1px;margin-top:2px;}
59
- .rte-cpick{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.15);padding:8px;min-width:190px;}
60
- @media(prefers-color-scheme:dark){.rte-cpick{background:#222;border-color:#444;}}
115
+ .rte-cpick{background:var(--rte-cpick-bg);border:1px solid var(--rte-cpick-border);border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.15);padding:8px;min-width:190px;}
61
116
  .rte-cgrid{display:grid;grid-template-columns:repeat(8,20px);gap:2px;margin-bottom:6px;}
62
117
  .rte-ccell{width:20px;height:20px;border-radius:3px;cursor:pointer;border:1px solid rgba(0,0,0,0.12);transition:transform 0.08s,box-shadow 0.08s;}
63
118
  .rte-ccell:hover{transform:scale(1.2);box-shadow:0 1px 4px rgba(0,0,0,0.3);z-index:1;position:relative;}
64
119
  .rte-ccell.sel{outline:2px solid #1a5fb4;outline-offset:1px;}
65
- .rte-cactions{display:flex;align-items:center;gap:2px;border-top:1px solid #eee;padding-top:6px;margin-top:2px;}
66
- @media(prefers-color-scheme:dark){.rte-cactions{border-color:#333;}}
120
+ .rte-cactions{display:flex;align-items:center;gap:2px;border-top:1px solid var(--rte-cactions-border);padding-top:6px;margin-top:2px;}
67
121
  .rte-caction{flex:1;height:28px;display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;border:1px solid transparent;transition:background 0.1s;}
68
- .rte-caction:hover{background:#f0f0f0;border-color:#ddd;}
69
- @media(prefers-color-scheme:dark){.rte-caction:hover{background:#2a2a2a;border-color:#444;}}
70
- .rte-tpick{background:#fff;border:1px solid #d8d8d8;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.12);padding:10px;}
71
- @media(prefers-color-scheme:dark){.rte-tpick{background:#222;border-color:#444;}}
122
+ .rte-caction:hover{background:var(--rte-caction-hover-bg);border-color:var(--rte-caction-hover-border);}
123
+ .rte-tpick{background:var(--rte-tpick-bg);border:1px solid var(--rte-tpick-border);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.12);padding:10px;}
72
124
  .rte-tplbl{font-size:11px;color:#888;text-align:center;margin-bottom:8px;font-family:var(--font-sans);}
73
125
  .rte-tpgrid{display:grid;grid-template-columns:repeat(8,18px);gap:2px;}
74
- .rte-tpcell{width:18px;height:18px;border-radius:2px;border:1px solid #ddd;cursor:pointer;background:#fff;transition:background 0.08s;}
75
- .rte-tpcell.on{background:#d0e4ff;border-color:#1a5fb4;}
76
- @media(prefers-color-scheme:dark){.rte-tpcell{background:#2a2a2a;border-color:#444;}.rte-tpcell.on{background:#1a3a5c;border-color:#90c4ff;}}
77
- .rte-ipick{background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.15);width:300px;overflow:hidden;}
78
- @media(prefers-color-scheme:dark){.rte-ipick{background:#222;border-color:#444;}}
79
- .rte-itabs{display:flex;border-bottom:1px solid #eee;}
80
- @media(prefers-color-scheme:dark){.rte-itabs{border-color:#333;}}
126
+ .rte-tpcell{width:18px;height:18px;border-radius:2px;border:1px solid var(--rte-tpcell-border);cursor:pointer;background:var(--rte-tpcell-bg);transition:background 0.08s;}
127
+ .rte-tpcell.on{background:var(--rte-tpcell-on-bg);border-color:var(--rte-tpcell-on-border);}
128
+ .rte-ipick{background:var(--rte-ipick-bg);border:1px solid var(--rte-ipick-border);border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.15);width:300px;overflow:hidden;}
129
+ .rte-itabs{display:flex;border-bottom:1px solid var(--rte-itabs-border);}
81
130
  .rte-itab{flex:1;padding:8px 4px;font-size:12px;font-weight:500;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;color:#888;font-family:var(--font-sans);}
82
- .rte-itab:hover{color:#444;background:#f8f8f8;}.rte-itab.active{color:#1a5fb4;border-bottom-color:#1a5fb4;}
83
- @media(prefers-color-scheme:dark){.rte-itab:hover{background:#2a2a2a;}}
131
+ .rte-itab:hover{color:#444;background:var(--rte-itab-hover-bg);}
132
+ .rte-itab.active{color:#1a5fb4;border-bottom-color:#1a5fb4;}
84
133
  .rte-ipbody{padding:12px;display:flex;flex-direction:column;gap:10px;}
85
- .rte-idrop{border:2px dashed #ccc;border-radius:6px;padding:24px 12px;text-align:center;cursor:pointer;transition:border-color 0.15s,background 0.15s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:110px;}
86
- .rte-idrop:hover,.rte-idrop.drag{border-color:#1a5fb4;background:#f0f4ff;}
87
- @media(prefers-color-scheme:dark){.rte-idrop{border-color:#555;}.rte-idrop:hover,.rte-idrop.drag{background:#1a3a5c;border-color:#90c4ff;}}
134
+ .rte-idrop{border:2px dashed var(--rte-idrop-border);border-radius:6px;padding:24px 12px;text-align:center;cursor:pointer;transition:border-color 0.15s,background 0.15s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:110px;}
135
+ .rte-idrop:hover,.rte-idrop.drag{border-color:var(--rte-idrop-hover-border);background:var(--rte-idrop-hover-bg);}
88
136
  .rte-iinsert{width:100%;height:30px;background:#1a6fc4;color:#fff;border:none;border-radius:4px;font-size:12px;font-weight:600;cursor:pointer;}
89
137
  .rte-iinsert:disabled{opacity:0.4;cursor:not-allowed;}
90
- .rte-float{position:absolute;z-index:50;background:#fff;border:1px solid #d0d0d0;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.13);padding:4px 6px;display:flex;align-items:center;gap:1px;flex-wrap:wrap;}
91
- @media(prefers-color-scheme:dark){.rte-float{background:#222;border-color:#444;}}
138
+ .rte-float{position:absolute;z-index:50;background:var(--rte-float-bg);border:1px solid var(--rte-float-border);border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.13);padding:4px 6px;display:flex;align-items:center;gap:1px;flex-wrap:wrap;}
92
139
  .rte-float-arrow{position:absolute;top:-7px;width:14px;height:7px;}
93
140
  .rte-float-arrow::before,.rte-float-arrow::after{content:'';position:absolute;left:0;border-left:7px solid transparent;border-right:7px solid transparent;}
94
- .rte-float-arrow::before{top:0;border-bottom:7px solid #d0d0d0;}
95
- .rte-float-arrow::after{top:1px;border-bottom:6px solid #fff;}
96
- @media(prefers-color-scheme:dark){.rte-float-arrow::before{border-bottom-color:#444;}.rte-float-arrow::after{border-bottom-color:#222;}}
141
+ .rte-float-arrow::before{top:0;border-bottom:7px solid var(--rte-float-arrow-border);}
142
+ .rte-float-arrow::after{top:1px;border-bottom:6px solid var(--rte-float-arrow-bg);}
97
143
  .rte-linkbar{min-width:340px;}
98
- .rte-linkbar input{flex:1;height:26px;border:1px solid #ccc;border-radius:3px;padding:0 8px;font-size:13px;outline:none;font-family:var(--font-sans);background:#fff;color:#222;min-width:0;}
99
- @media(prefers-color-scheme:dark){.rte-linkbar input{background:#1a1a1a;border-color:#555;color:#ddd;}}
100
- .rte-area{position:relative;background:#fff;}
101
- @media(prefers-color-scheme:dark){.rte-area{background:#141414;}}
102
- .rte-body{min-height:280px;outline:none;font-size:15px;line-height:1.75;color:#222;caret-color:#222;padding:18px 20px;}
103
- @media(prefers-color-scheme:dark){.rte-body{color:#ddd;caret-color:#ddd;}}
144
+ .rte-linkbar input{flex:1;height:26px;border:1px solid var(--rte-linkinput-border);border-radius:3px;padding:0 8px;font-size:13px;outline:none;font-family:var(--font-sans);background:var(--rte-linkinput-bg);color:var(--rte-linkinput);min-width:0;}
145
+ .rte-area{position:relative;background:var(--rte-area-bg);}
146
+ .rte-body{min-height:280px;outline:none;font-size:15px;line-height:1.75;color:var(--rte-body);caret-color:var(--rte-body);padding:18px 20px;}
104
147
  .rte-body h1{font-size:26px;font-weight:600;margin:0.6em 0 0.2em;}
105
148
  .rte-body h2{font-size:20px;font-weight:600;margin:0.6em 0 0.2em;}
106
149
  .rte-body h3{font-size:16px;font-weight:600;margin:0.6em 0 0.2em;}
@@ -114,32 +157,26 @@ var CSS = `
114
157
  .rte-body ul ul ul{list-style-type:square;padding-left:1.6em;}
115
158
  .rte-body li{margin:0.1em 0;}
116
159
  .rte-body a{color:#1a6fc4;text-decoration:underline;cursor:pointer;}
117
- .rte-body pre{background:#f4f4f4;border:1px solid #e0e0e0;border-radius:4px;padding:12px 14px;margin:0.6em 0;overflow-x:auto;}
160
+ .rte-body pre{background:var(--rte-pre-bg);border:1px solid var(--rte-pre-border);border-radius:4px;padding:12px 14px;margin:0.6em 0;overflow-x:auto;}
118
161
  .rte-body code{font-family:var(--font-mono);font-size:13px;}
119
162
  .rte-body:empty:before{content:attr(data-ph);color:#aaa;pointer-events:none;}
120
163
  .rte-body table{border-collapse:collapse;width:100%;margin:0.8em 0;}
121
- .rte-body td,.rte-body th{border:1px solid #ccc;padding:7px 10px;min-width:60px;text-align:left;vertical-align:top;}
122
- .rte-body th{background:#f5f5f5;font-weight:600;}
123
- @media(prefers-color-scheme:dark){.rte-body td,.rte-body th{border-color:#444;}.rte-body th{background:#2a2a2a;}}
164
+ .rte-body td,.rte-body th{border:1px solid var(--rte-table-border);padding:7px 10px;min-width:60px;text-align:left;vertical-align:top;}
165
+ .rte-body th{background:var(--rte-th-bg);font-weight:600;}
124
166
  .rte-body td.rte-sel,.rte-body th.rte-sel{background:rgba(26,95,180,0.15)!important;outline:2px solid #1a5fb4;outline-offset:-2px;}
125
167
  .rte-body img{max-width:100%;height:auto;display:block;margin:4px 0;cursor:pointer;}
126
168
  .rte-body figure{margin:0.8em 0;display:block;overflow:hidden;}
127
169
  .rte-body figcaption{font-size:13px;color:#666;text-align:center;padding:4px 0;outline:none;clear:both;display:block;}
128
170
  .rte-code{min-height:280px;width:100%;background:#1e1e2e;color:#cdd6f4;font-family:var(--font-mono);font-size:13px;line-height:1.6;padding:18px 20px;border:none;outline:none;resize:vertical;}
129
- .rte-footer{font-size:11px;color:#999;padding:4px 20px 5px;border-top:1px solid #e8e8e8;background:#fafafa;}
130
- @media(prefers-color-scheme:dark){.rte-footer{border-color:#2a2a2a;background:#1a1a1a;color:#555;}}
131
- .rte-ie-panel{position:absolute;z-index:52;background:#fff;border:1px solid #d0d0d0;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.15);width:210px;overflow:hidden;}
132
- @media(prefers-color-scheme:dark){.rte-ie-panel{background:#222;border-color:#444;}}
133
- .rte-ie-tabs{display:flex;border-bottom:1px solid #eee;}
134
- @media(prefers-color-scheme:dark){.rte-ie-tabs{border-color:#333;}}
171
+ .rte-footer{font-size:11px;color:var(--rte-footer);padding:4px 20px 5px;border-top:1px solid var(--rte-footer-border);background:var(--rte-footer-bg);}
172
+ .rte-ie-panel{position:absolute;z-index:52;background:var(--rte-iepanel-bg);border:1px solid var(--rte-iepanel-border);border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.15);width:210px;overflow:hidden;}
173
+ .rte-ie-tabs{display:flex;border-bottom:1px solid var(--rte-ietabs-border);}
135
174
  .rte-ie-tab{flex:1;padding:7px 4px;font-size:11px;font-weight:500;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;color:#888;font-family:var(--font-sans);}
136
175
  .rte-ie-tab.active{color:#1a5fb4;border-bottom-color:#1a5fb4;}
137
- .rte-ie-tab:hover{background:#f8f8f8;}
138
- @media(prefers-color-scheme:dark){.rte-ie-tab:hover{background:#2a2a2a;}}
176
+ .rte-ie-tab:hover{background:var(--rte-ietab-hover-bg);}
139
177
  .rte-ie-body{padding:10px;display:flex;flex-direction:column;gap:8px;}
140
178
  .rte-ie-label{font-size:10px;color:#888;margin-bottom:3px;font-family:var(--font-sans);}
141
- .rte-ie-input{width:100%;height:26px;border:1px solid #ccc;border-radius:4px;padding:0 8px;font-size:11px;outline:none;font-family:var(--font-sans);background:#fff;color:#222;}
142
- @media(prefers-color-scheme:dark){.rte-ie-input{background:#1a1a1a;border-color:#444;color:#ddd;}}
179
+ .rte-ie-input{width:100%;height:26px;border:1px solid var(--rte-ieinput-border);border-radius:4px;padding:0 8px;font-size:11px;outline:none;font-family:var(--font-sans);background:var(--rte-ieinput-bg);color:var(--rte-ieinput);}
143
180
  .rte-ie-row{display:flex;gap:4px;}
144
181
  .rte-ie-seg-btn{flex:1;height:26px;font-size:11px;border:1px solid #ccc;border-radius:4px;background:transparent;color:#444;cursor:pointer;font-family:var(--font-sans);transition:all 0.1s;}
145
182
  .rte-ie-seg-btn.active{background:#d0e4ff;border-color:#1a5fb4;color:#1a5fb4;}
@@ -149,12 +186,13 @@ var CSS = `
149
186
  .rte-ie-apply{flex:1;height:26px;background:#1a6fc4;color:#fff;border:none;border-radius:4px;font-size:11px;font-weight:600;cursor:pointer;}
150
187
  .rte-ie-remove{flex:1;height:26px;background:#fdecea;color:#c0392b;border:1px solid #f5c6c2;border-radius:4px;font-size:11px;cursor:pointer;}
151
188
  .rte-handle{position:absolute;width:10px;height:10px;background:#fff;border:2px solid #1a5fb4;border-radius:2px;pointer-events:all;z-index:53;}
152
- .customeditor {
153
- max-height: 350px;
154
- overflow-y: auto;
155
- position: relative;
156
- }
157
-
189
+ .rte-body blockquote{background-color: rgb(245, 243, 255);
190
+ border-left: 4px solid rgb(100, 80, 220);
191
+ margin: 8px 0;
192
+ padding: 10px 16px;
193
+ font-style: italic;
194
+ color: rgb(75, 85, 99);
195
+ border-radius: 0 4px 4px 0;}
158
196
  `;
159
197
 
160
198
  // src/rte/utils.ts
@@ -1129,7 +1167,7 @@ function ImageEditor({ img, containerRef, onClose, onDelete, onChange }) {
1129
1167
 
1130
1168
  // src/RichTextEditor.tsx
1131
1169
  import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
1132
- function RichTextEditor({ value, onChange, toolbar }) {
1170
+ function RichTextEditor({ value, onChange, toolbar, theme }) {
1133
1171
  var _a;
1134
1172
  const editorRef = useRef4(null);
1135
1173
  const editorAreaRef = useRef4(null);
@@ -1670,7 +1708,7 @@ function RichTextEditor({ value, onChange, toolbar }) {
1670
1708
  const show = (key) => !toolbar || toolbar.includes(key);
1671
1709
  return /* @__PURE__ */ jsxs6("div", { style: { padding: "1rem 0" }, children: [
1672
1710
  /* @__PURE__ */ jsx7("style", { children: CSS }),
1673
- /* @__PURE__ */ jsxs6("div", { className: "customeditor", style: { border: "1px solid #d8d8d8", borderRadius: 4, boxShadow: "0 1px 3px rgba(0,0,0,0.06)" }, children: [
1711
+ /* @__PURE__ */ jsxs6("div", { className: `customeditor${theme ? ` rte-${theme}` : ""}`, style: { border: "1px solid #d8d8d8", borderRadius: 4, boxShadow: "0 1px 3px rgba(0,0,0,0.06)" }, children: [
1674
1712
  /* @__PURE__ */ jsxs6("div", { className: "rte-toolbar", children: [
1675
1713
  !isCode && /* @__PURE__ */ jsxs6(Fragment4, { children: [
1676
1714
  show("bold") && /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("bold"), title: "Bold (Ctrl+B)", active: fmt.bold, style: { fontWeight: 800, fontFamily: "Georgia,serif" }, children: "B" }),
@@ -1686,7 +1724,7 @@ function RichTextEditor({ value, onChange, toolbar }) {
1686
1724
  active: showColor,
1687
1725
  style: { flexDirection: "column", gap: 1, padding: "3px 6px" },
1688
1726
  children: [
1689
- /* @__PURE__ */ jsx7("span", { style: { fontSize: 13, fontWeight: 800, fontFamily: "Georgia,serif", lineHeight: 1, color: "#222" }, children: "A" }),
1727
+ /* @__PURE__ */ jsx7("span", { style: { fontSize: 13, fontWeight: 800, fontFamily: "Georgia,serif", lineHeight: 1 }, children: "A" }),
1690
1728
  /* @__PURE__ */ jsx7("span", { className: "rte-swatch", style: { background: color } })
1691
1729
  ]
1692
1730
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@malaya_jeeva/rich-text-editor",
3
- "version": "1.0.11",
3
+ "version": "1.0.12",
4
4
  "description": "Custom React Rich Text Editor",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",