@haklex/rich-renderer-katex 0.0.3 → 0.0.5

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/dist/KaTeXEditDecorator.d.ts.map +1 -1
  2. package/dist/index.mjs +212 -84
  3. package/dist/rich-renderer-katex.css +34 -34
  4. package/dist/styles.css.d.ts +52 -1
  5. package/dist/styles.css.d.ts.map +1 -1
  6. package/package.json +5 -4
package/dist/KaTeXEditDecorator.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"KaTeXEditDecorator.d.ts","sourceRoot":"","sources":["../src/KaTeXEditDecorator.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAGzC,UAAU,uBAAuB;IAC/B,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,YAAY,CAAA;CACvB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAQ,GACT,EAAE,uBAAuB,2CA8NzB"}
1
+ {"version":3,"file":"KaTeXEditDecorator.d.ts","sourceRoot":"","sources":["../src/KaTeXEditDecorator.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAKzC,UAAU,uBAAuB;IAC/B,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,YAAY,CAAA;CACvB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAQ,GACT,EAAE,uBAAuB,2CAuQzB"}
package/dist/index.mjs CHANGED
@@ -5,6 +5,32 @@ import { Popover, PopoverTrigger, PopoverPanel, AnimatedTabs } from "@haklex/ric
5
5
  import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
6
6
  import { $getNodeByKey } from "lexical";
7
7
  import { Terminal, Trash2, Check, Copy, RotateCcw } from "lucide-react";
8
+ var semanticClassNames = { editWrapper: "rich-katex-edit-wrapper", panel: "rich-katex-editor-panel", header: "rich-katex-editor-header", headerLeft: "rich-katex-editor-header-left", iconWrap: "rich-katex-editor-icon-wrap", title: "rich-katex-editor-title", headerRight: "rich-katex-editor-header-right", mode: "rich-katex-editor-mode", deleteButton: "rich-katex-editor-delete", tabs: "rich-katex-editor-tabs", body: "rich-katex-editor-body", field: "rich-katex-editor-field", label: "rich-katex-editor-label", inputWrap: "rich-katex-editor-input-wrap", textarea: "rich-katex-editor-textarea", inputActions: "rich-katex-editor-input-actions", actionButton: "rich-katex-editor-action-btn", preview: "rich-katex-editor-preview", previewEmpty: "rich-katex-editor-preview-empty", snippetsPlaceholder: "rich-katex-editor-snippets-placeholder", footer: "rich-katex-editor-footer", charCount: "rich-katex-editor-charcount", footerActions: "rich-katex-editor-footer-actions", footerButton: "rich-katex-editor-btn", footerButtonPrimary: "rich-katex-editor-btn-primary" };
9
+ var editWrapper = "mkenhu0";
10
+ var panel = "mkenhu1";
11
+ var header = "mkenhu2";
12
+ var headerLeft = "mkenhu3";
13
+ var iconWrap = "mkenhu4";
14
+ var title = "mkenhu5";
15
+ var headerRight = "mkenhu6";
16
+ var mode = "mkenhu7";
17
+ var deleteButton = "mkenhu8";
18
+ var tabs = "mkenhu9";
19
+ var body = "mkenhua";
20
+ var field = "mkenhub";
21
+ var label = "mkenhuc";
22
+ var inputWrap = "mkenhud";
23
+ var textarea = "mkenhue";
24
+ var inputActions = "mkenhuf";
25
+ var actionButton = "mkenhug";
26
+ var preview = "mkenhuh";
27
+ var previewEmpty = "mkenhui";
28
+ var snippetsPlaceholder = "mkenhuj";
29
+ var footer = "mkenhuk";
30
+ var charCount = "mkenhul";
31
+ var footerActions = "mkenhum";
32
+ var footerButton = "mkenhun";
33
+ var footerButtonPrimary = "mkenhuo";
8
34
  function KaTeXEditDecorator({
9
35
  nodeKey,
10
36
  equation,
@@ -81,7 +107,13 @@ function KaTeXEditDecorator({
81
107
  /* @__PURE__ */ jsx(
82
108
  PopoverTrigger,
83
109
  {
84
- render: /* @__PURE__ */ jsx("span", { className: "rich-katex-edit-wrapper", title: "Click to edit" }),
110
+ render: /* @__PURE__ */ jsx(
111
+ "span",
112
+ {
113
+ className: `${editWrapper} ${semanticClassNames.editWrapper}`,
114
+ title: "Click to edit"
115
+ }
116
+ ),
85
117
  children
86
118
  }
87
119
  ),
@@ -90,26 +122,56 @@ function KaTeXEditDecorator({
90
122
  {
91
123
  side: "bottom",
92
124
  sideOffset: 8,
93
- className: "rich-katex-editor-panel",
125
+ className: `${panel} ${semanticClassNames.panel}`,
94
126
  children: [
95
- /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-header", children: [
96
- /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-header-left", children: [
97
- /* @__PURE__ */ jsx("div", { className: "rich-katex-editor-icon-wrap", children: /* @__PURE__ */ jsx(Terminal, { size: 12 }) }),
98
- /* @__PURE__ */ jsx("span", { className: "rich-katex-editor-title", children: "Math Editor" })
99
- ] }),
100
- /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-header-right", children: [
101
- /* @__PURE__ */ jsx("span", { className: "rich-katex-editor-mode", children: displayMode ? "Block" : "Inline" }),
102
- /* @__PURE__ */ jsx(
103
- "button",
104
- {
105
- className: "rich-katex-editor-delete",
106
- type: "button",
107
- onClick: handleDelete,
108
- title: "Delete node",
109
- children: /* @__PURE__ */ jsx(Trash2, { size: 14 })
110
- }
111
- )
112
- ] })
127
+ /* @__PURE__ */ jsxs("div", { className: `${header} ${semanticClassNames.header}`, children: [
128
+ /* @__PURE__ */ jsxs(
129
+ "div",
130
+ {
131
+ className: `${headerLeft} ${semanticClassNames.headerLeft}`,
132
+ children: [
133
+ /* @__PURE__ */ jsx(
134
+ "div",
135
+ {
136
+ className: `${iconWrap} ${semanticClassNames.iconWrap}`,
137
+ children: /* @__PURE__ */ jsx(Terminal, { size: 12 })
138
+ }
139
+ ),
140
+ /* @__PURE__ */ jsx(
141
+ "span",
142
+ {
143
+ className: `${title} ${semanticClassNames.title}`,
144
+ children: "Math Editor"
145
+ }
146
+ )
147
+ ]
148
+ }
149
+ ),
150
+ /* @__PURE__ */ jsxs(
151
+ "div",
152
+ {
153
+ className: `${headerRight} ${semanticClassNames.headerRight}`,
154
+ children: [
155
+ /* @__PURE__ */ jsx(
156
+ "span",
157
+ {
158
+ className: `${mode} ${semanticClassNames.mode}`,
159
+ children: displayMode ? "Block" : "Inline"
160
+ }
161
+ ),
162
+ /* @__PURE__ */ jsx(
163
+ "button",
164
+ {
165
+ className: `${deleteButton} ${semanticClassNames.deleteButton}`,
166
+ type: "button",
167
+ onClick: handleDelete,
168
+ title: "Delete node",
169
+ children: /* @__PURE__ */ jsx(Trash2, { size: 14 })
170
+ }
171
+ )
172
+ ]
173
+ }
174
+ )
113
175
  ] }),
114
176
  /* @__PURE__ */ jsx(
115
177
  AnimatedTabs,
@@ -120,84 +182,150 @@ function KaTeXEditDecorator({
120
182
  ],
121
183
  value: activeTab,
122
184
  onChange: (id) => setActiveTab(id),
123
- className: "rich-katex-editor-tabs"
185
+ className: `${tabs} ${semanticClassNames.tabs}`
124
186
  }
125
187
  ),
126
- activeTab === "editor" && /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-body", children: [
127
- /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-field", children: [
128
- /* @__PURE__ */ jsx("label", { className: "rich-katex-editor-label", children: "LaTeX Input" }),
129
- /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-input-wrap", children: [
130
- /* @__PURE__ */ jsx(
131
- "textarea",
132
- {
133
- ref: inputRef,
134
- className: "rich-katex-editor-textarea",
135
- value,
136
- onChange: (e) => setValue(e.target.value),
137
- onKeyDown: handleKeyDown,
138
- rows: displayMode ? 4 : 3,
139
- spellCheck: false,
140
- autoComplete: "off",
141
- autoCorrect: "off",
142
- autoCapitalize: "off",
143
- placeholder: "e.g. \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}"
144
- }
145
- ),
146
- /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-input-actions", children: [
188
+ activeTab === "editor" && /* @__PURE__ */ jsxs("div", { className: `${body} ${semanticClassNames.body}`, children: [
189
+ /* @__PURE__ */ jsxs(
190
+ "div",
191
+ {
192
+ className: `${field} ${semanticClassNames.field}`,
193
+ children: [
194
+ /* @__PURE__ */ jsx(
195
+ "label",
196
+ {
197
+ className: `${label} ${semanticClassNames.label}`,
198
+ children: "LaTeX Input"
199
+ }
200
+ ),
201
+ /* @__PURE__ */ jsxs(
202
+ "div",
203
+ {
204
+ className: `${inputWrap} ${semanticClassNames.inputWrap}`,
205
+ children: [
206
+ /* @__PURE__ */ jsx(
207
+ "textarea",
208
+ {
209
+ ref: inputRef,
210
+ className: `${textarea} ${semanticClassNames.textarea}`,
211
+ value,
212
+ onChange: (e) => setValue(e.target.value),
213
+ onKeyDown: handleKeyDown,
214
+ rows: displayMode ? 4 : 3,
215
+ spellCheck: false,
216
+ autoComplete: "off",
217
+ autoCorrect: "off",
218
+ autoCapitalize: "off",
219
+ placeholder: "e.g. \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}"
220
+ }
221
+ ),
222
+ /* @__PURE__ */ jsxs(
223
+ "div",
224
+ {
225
+ className: `${inputActions} ${semanticClassNames.inputActions}`,
226
+ children: [
227
+ /* @__PURE__ */ jsx(
228
+ "button",
229
+ {
230
+ className: `${actionButton} ${semanticClassNames.actionButton}`,
231
+ type: "button",
232
+ onClick: handleCopy,
233
+ title: "Copy LaTeX",
234
+ disabled: !value.trim(),
235
+ children: copied ? /* @__PURE__ */ jsx(Check, { size: 12, style: { color: "#22c55e" } }) : /* @__PURE__ */ jsx(Copy, { size: 12 })
236
+ }
237
+ ),
238
+ /* @__PURE__ */ jsx(
239
+ "button",
240
+ {
241
+ className: `${actionButton} ${semanticClassNames.actionButton}`,
242
+ type: "button",
243
+ onClick: handleReset,
244
+ title: "Reset",
245
+ disabled: value === equation,
246
+ children: /* @__PURE__ */ jsx(RotateCcw, { size: 12 })
247
+ }
248
+ )
249
+ ]
250
+ }
251
+ )
252
+ ]
253
+ }
254
+ )
255
+ ]
256
+ }
257
+ ),
258
+ /* @__PURE__ */ jsxs(
259
+ "div",
260
+ {
261
+ className: `${field} ${semanticClassNames.field}`,
262
+ children: [
263
+ /* @__PURE__ */ jsx(
264
+ "label",
265
+ {
266
+ className: `${label} ${semanticClassNames.label}`,
267
+ children: "Preview"
268
+ }
269
+ ),
270
+ /* @__PURE__ */ jsx(
271
+ "div",
272
+ {
273
+ className: `${preview} ${semanticClassNames.preview}`,
274
+ children: value.trim() ? /* @__PURE__ */ jsx(KaTeXRenderer, { equation: value, displayMode }) : /* @__PURE__ */ jsx(
275
+ "span",
276
+ {
277
+ className: `${previewEmpty} ${semanticClassNames.previewEmpty}`,
278
+ children: "Enter a formula"
279
+ }
280
+ )
281
+ }
282
+ )
283
+ ]
284
+ }
285
+ )
286
+ ] }),
287
+ activeTab === "snippets" && /* @__PURE__ */ jsx("div", { className: `${body} ${semanticClassNames.body}`, children: /* @__PURE__ */ jsx(
288
+ "div",
289
+ {
290
+ className: `${snippetsPlaceholder} ${semanticClassNames.snippetsPlaceholder}`,
291
+ children: "Snippets coming soon"
292
+ }
293
+ ) }),
294
+ /* @__PURE__ */ jsxs("div", { className: `${footer} ${semanticClassNames.footer}`, children: [
295
+ /* @__PURE__ */ jsx(
296
+ "span",
297
+ {
298
+ className: `${charCount} ${semanticClassNames.charCount}`,
299
+ children: value.trim() ? `${value.length} chars` : "Enter a formula"
300
+ }
301
+ ),
302
+ /* @__PURE__ */ jsxs(
303
+ "div",
304
+ {
305
+ className: `${footerActions} ${semanticClassNames.footerActions}`,
306
+ children: [
147
307
  /* @__PURE__ */ jsx(
148
308
  "button",
149
309
  {
150
- className: "rich-katex-editor-action-btn",
310
+ className: `${footerButton} ${semanticClassNames.footerButton}`,
151
311
  type: "button",
152
- onClick: handleCopy,
153
- title: "Copy LaTeX",
154
- disabled: !value.trim(),
155
- children: copied ? /* @__PURE__ */ jsx(Check, { size: 12, style: { color: "#22c55e" } }) : /* @__PURE__ */ jsx(Copy, { size: 12 })
312
+ onClick: cancel,
313
+ children: "Cancel"
156
314
  }
157
315
  ),
158
316
  /* @__PURE__ */ jsx(
159
317
  "button",
160
318
  {
161
- className: "rich-katex-editor-action-btn",
319
+ className: `${footerButton} ${semanticClassNames.footerButton} ${footerButtonPrimary} ${semanticClassNames.footerButtonPrimary}`,
162
320
  type: "button",
163
- onClick: handleReset,
164
- title: "Reset",
165
- disabled: value === equation,
166
- children: /* @__PURE__ */ jsx(RotateCcw, { size: 12 })
321
+ onClick: commit,
322
+ disabled: !value.trim(),
323
+ children: "Save"
167
324
  }
168
325
  )
169
- ] })
170
- ] })
171
- ] }),
172
- /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-field", children: [
173
- /* @__PURE__ */ jsx("label", { className: "rich-katex-editor-label", children: "Preview" }),
174
- /* @__PURE__ */ jsx("div", { className: "rich-katex-editor-preview", children: value.trim() ? /* @__PURE__ */ jsx(KaTeXRenderer, { equation: value, displayMode }) : /* @__PURE__ */ jsx("span", { className: "rich-katex-editor-preview-empty", children: "Enter a formula" }) })
175
- ] })
176
- ] }),
177
- activeTab === "snippets" && /* @__PURE__ */ jsx("div", { className: "rich-katex-editor-body", children: /* @__PURE__ */ jsx("div", { className: "rich-katex-editor-snippets-placeholder", children: "Snippets coming soon" }) }),
178
- /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-footer", children: [
179
- /* @__PURE__ */ jsx("span", { className: "rich-katex-editor-charcount", children: value.trim() ? `${value.length} chars` : "Enter a formula" }),
180
- /* @__PURE__ */ jsxs("div", { className: "rich-katex-editor-footer-actions", children: [
181
- /* @__PURE__ */ jsx(
182
- "button",
183
- {
184
- className: "rich-katex-editor-btn",
185
- type: "button",
186
- onClick: cancel,
187
- children: "Cancel"
188
- }
189
- ),
190
- /* @__PURE__ */ jsx(
191
- "button",
192
- {
193
- className: "rich-katex-editor-btn rich-katex-editor-btn-primary",
194
- type: "button",
195
- onClick: commit,
196
- disabled: !value.trim(),
197
- children: "Save"
198
- }
199
- )
200
- ] })
326
+ ]
327
+ }
328
+ )
201
329
  ] })
202
330
  ]
203
331
  }
package/dist/rich-renderer-katex.css CHANGED
@@ -1,31 +1,31 @@
1
- .rich-katex-edit-wrapper {
1
+ .mkenhu0 {
2
2
  cursor: pointer;
3
3
  border-radius: var(--rc-radius-sm);
4
4
  transition: background-color 0.15s ease;
5
5
  }
6
- .rich-katex-edit-wrapper:hover {
6
+ .mkenhu0:hover {
7
7
  background-color: var(--rc-accent-light);
8
8
  }
9
- .rich-katex-editor-panel {
9
+ .mkenhu1 {
10
10
  width: min(420px, 90vw);
11
11
  padding: 0;
12
12
  overflow: hidden;
13
13
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2);
14
14
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
15
15
  }
16
- .rich-katex-editor-header {
16
+ .mkenhu2 {
17
17
  display: flex;
18
18
  align-items: center;
19
19
  justify-content: space-between;
20
20
  padding: 10px 16px;
21
21
  border-bottom: 1px solid color-mix(in srgb, var(--rc-border) 60%, transparent);
22
22
  }
23
- .rich-katex-editor-header-left {
23
+ .mkenhu3 {
24
24
  display: flex;
25
25
  align-items: center;
26
26
  gap: 8px;
27
27
  }
28
- .rich-katex-editor-icon-wrap {
28
+ .mkenhu4 {
29
29
  display: flex;
30
30
  align-items: center;
31
31
  justify-content: center;
@@ -35,17 +35,17 @@
35
35
  background-color: var(--rc-accent-light);
36
36
  color: var(--rc-accent);
37
37
  }
38
- .rich-katex-editor-title {
38
+ .mkenhu5 {
39
39
  font-weight: 600;
40
40
  font-size: var(--rc-font-size-small);
41
41
  color: var(--rc-text);
42
42
  }
43
- .rich-katex-editor-header-right {
43
+ .mkenhu6 {
44
44
  display: flex;
45
45
  align-items: center;
46
46
  gap: 4px;
47
47
  }
48
- .rich-katex-editor-mode {
48
+ .mkenhu7 {
49
49
  font-size: 10px;
50
50
  font-weight: 500;
51
51
  text-transform: uppercase;
@@ -55,7 +55,7 @@
55
55
  border-radius: var(--rc-radius-sm);
56
56
  background-color: var(--rc-bg-secondary);
57
57
  }
58
- .rich-katex-editor-delete {
58
+ .mkenhu8 {
59
59
  display: flex;
60
60
  align-items: center;
61
61
  justify-content: center;
@@ -70,24 +70,24 @@
70
70
  transition: color 0.15s ease, background-color 0.15s ease;
71
71
  flex-shrink: 0;
72
72
  }
73
- .rich-katex-editor-delete:hover {
73
+ .mkenhu8:hover {
74
74
  color: var(--rc-alert-caution);
75
75
  background-color: color-mix(in srgb, var(--rc-alert-caution) 10%, transparent);
76
76
  }
77
- .rich-katex-editor-tabs {
77
+ .mkenhu9 {
78
78
  padding: 0 16px;
79
79
  }
80
- .rich-katex-editor-body {
80
+ .mkenhua {
81
81
  padding: 12px;
82
82
  display: flex;
83
83
  flex-direction: column;
84
84
  gap: 12px;
85
85
  }
86
- .rich-katex-editor-field {
86
+ .mkenhub {
87
87
  display: flex;
88
88
  flex-direction: column;
89
89
  }
90
- .rich-katex-editor-label {
90
+ .mkenhuc {
91
91
  font-size: 10px;
92
92
  font-weight: 500;
93
93
  text-transform: uppercase;
@@ -96,10 +96,10 @@
96
96
  margin-bottom: 6px;
97
97
  padding-left: 2px;
98
98
  }
99
- .rich-katex-editor-input-wrap {
99
+ .mkenhud {
100
100
  position: relative;
101
101
  }
102
- .rich-katex-editor-textarea {
102
+ .mkenhue {
103
103
  display: block;
104
104
  width: 100%;
105
105
  padding: 10px 12px;
@@ -116,21 +116,21 @@
116
116
  box-sizing: border-box;
117
117
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
118
118
  }
119
- .rich-katex-editor-textarea::placeholder {
119
+ .mkenhue::placeholder {
120
120
  color: color-mix(in srgb, var(--rc-text-secondary) 50%, transparent);
121
121
  }
122
- .rich-katex-editor-textarea:focus {
122
+ .mkenhue:focus {
123
123
  border-color: color-mix(in srgb, var(--rc-accent) 50%, transparent);
124
124
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc-accent) 25%, transparent);
125
125
  }
126
- .rich-katex-editor-input-actions {
126
+ .mkenhuf {
127
127
  position: absolute;
128
128
  right: 6px;
129
129
  top: 6px;
130
130
  display: flex;
131
131
  gap: 2px;
132
132
  }
133
- .rich-katex-editor-action-btn {
133
+ .mkenhug {
134
134
  display: flex;
135
135
  align-items: center;
136
136
  justify-content: center;
@@ -144,16 +144,16 @@
144
144
  border-radius: var(--rc-radius-sm);
145
145
  transition: color 0.15s ease, background-color 0.15s ease;
146
146
  }
147
- .rich-katex-editor-action-btn:hover {
147
+ .mkenhug:hover {
148
148
  color: var(--rc-text);
149
149
  background-color: var(--rc-bg-secondary);
150
150
  }
151
- .rich-katex-editor-action-btn:disabled {
151
+ .mkenhug:disabled {
152
152
  opacity: 0.3;
153
153
  cursor: default;
154
154
  pointer-events: none;
155
155
  }
156
- .rich-katex-editor-preview {
156
+ .mkenhuh {
157
157
  border: 1px solid color-mix(in srgb, var(--rc-border) 60%, transparent);
158
158
  border-radius: var(--rc-radius-md);
159
159
  padding: var(--rc-space-md);
@@ -164,17 +164,17 @@
164
164
  overflow-x: auto;
165
165
  background-color: var(--rc-bg);
166
166
  }
167
- .rich-katex-editor-preview-empty {
167
+ .mkenhui {
168
168
  color: color-mix(in srgb, var(--rc-text-secondary) 50%, transparent);
169
169
  font-size: var(--rc-font-size-small);
170
170
  }
171
- .rich-katex-editor-snippets-placeholder {
171
+ .mkenhuj {
172
172
  color: var(--rc-text-secondary);
173
173
  font-size: var(--rc-font-size-small);
174
174
  text-align: center;
175
175
  padding: var(--rc-space-lg) 0;
176
176
  }
177
- .rich-katex-editor-footer {
177
+ .mkenhuk {
178
178
  display: flex;
179
179
  align-items: center;
180
180
  justify-content: space-between;
@@ -182,7 +182,7 @@
182
182
  border-top: 1px solid color-mix(in srgb, var(--rc-border) 60%, transparent);
183
183
  background-color: color-mix(in srgb, var(--rc-bg-secondary) 20%, transparent);
184
184
  }
185
- .rich-katex-editor-charcount {
185
+ .mkenhul {
186
186
  color: var(--rc-text-secondary);
187
187
  font-size: 10px;
188
188
  font-family: var(--rc-font-mono);
@@ -191,12 +191,12 @@
191
191
  white-space: nowrap;
192
192
  max-width: 200px;
193
193
  }
194
- .rich-katex-editor-footer-actions {
194
+ .mkenhum {
195
195
  display: flex;
196
196
  align-items: center;
197
197
  gap: 8px;
198
198
  }
199
- .rich-katex-editor-btn {
199
+ .mkenhun {
200
200
  appearance: none;
201
201
  border: none;
202
202
  background: none;
@@ -212,20 +212,20 @@
212
212
  align-items: center;
213
213
  transition: color 0.15s ease, background-color 0.15s ease;
214
214
  }
215
- .rich-katex-editor-btn:hover {
215
+ .mkenhun:hover {
216
216
  color: var(--rc-text);
217
217
  background-color: var(--rc-bg-secondary);
218
218
  }
219
- .rich-katex-editor-btn-primary {
219
+ .mkenhuo {
220
220
  background-color: var(--rc-accent);
221
221
  color: #fff;
222
222
  }
223
- .rich-katex-editor-btn-primary:hover {
223
+ .mkenhuo:hover {
224
224
  background-color: var(--rc-accent);
225
225
  filter: brightness(0.9);
226
226
  color: #fff;
227
227
  }
228
- .rich-katex-editor-btn-primary:disabled {
228
+ .mkenhuo:disabled {
229
229
  opacity: 0.5;
230
230
  cursor: default;
231
231
  pointer-events: none;
package/dist/styles.css.d.ts CHANGED
@@ -1,2 +1,53 @@
1
- export {};
1
+ export declare const semanticClassNames: {
2
+ readonly editWrapper: "rich-katex-edit-wrapper";
3
+ readonly panel: "rich-katex-editor-panel";
4
+ readonly header: "rich-katex-editor-header";
5
+ readonly headerLeft: "rich-katex-editor-header-left";
6
+ readonly iconWrap: "rich-katex-editor-icon-wrap";
7
+ readonly title: "rich-katex-editor-title";
8
+ readonly headerRight: "rich-katex-editor-header-right";
9
+ readonly mode: "rich-katex-editor-mode";
10
+ readonly deleteButton: "rich-katex-editor-delete";
11
+ readonly tabs: "rich-katex-editor-tabs";
12
+ readonly body: "rich-katex-editor-body";
13
+ readonly field: "rich-katex-editor-field";
14
+ readonly label: "rich-katex-editor-label";
15
+ readonly inputWrap: "rich-katex-editor-input-wrap";
16
+ readonly textarea: "rich-katex-editor-textarea";
17
+ readonly inputActions: "rich-katex-editor-input-actions";
18
+ readonly actionButton: "rich-katex-editor-action-btn";
19
+ readonly preview: "rich-katex-editor-preview";
20
+ readonly previewEmpty: "rich-katex-editor-preview-empty";
21
+ readonly snippetsPlaceholder: "rich-katex-editor-snippets-placeholder";
22
+ readonly footer: "rich-katex-editor-footer";
23
+ readonly charCount: "rich-katex-editor-charcount";
24
+ readonly footerActions: "rich-katex-editor-footer-actions";
25
+ readonly footerButton: "rich-katex-editor-btn";
26
+ readonly footerButtonPrimary: "rich-katex-editor-btn-primary";
27
+ };
28
+ export declare const editWrapper: string;
29
+ export declare const panel: string;
30
+ export declare const header: string;
31
+ export declare const headerLeft: string;
32
+ export declare const iconWrap: string;
33
+ export declare const title: string;
34
+ export declare const headerRight: string;
35
+ export declare const mode: string;
36
+ export declare const deleteButton: string;
37
+ export declare const tabs: string;
38
+ export declare const body: string;
39
+ export declare const field: string;
40
+ export declare const label: string;
41
+ export declare const inputWrap: string;
42
+ export declare const textarea: string;
43
+ export declare const inputActions: string;
44
+ export declare const actionButton: string;
45
+ export declare const preview: string;
46
+ export declare const previewEmpty: string;
47
+ export declare const snippetsPlaceholder: string;
48
+ export declare const footer: string;
49
+ export declare const charCount: string;
50
+ export declare const footerActions: string;
51
+ export declare const footerButton: string;
52
+ export declare const footerButtonPrimary: string;
2
53
  //# sourceMappingURL=styles.css.d.ts.map
package/dist/styles.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":""}
1
+ {"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BrB,CAAA;AAEV,eAAO,MAAM,WAAW,QAStB,CAAA;AAEF,eAAO,MAAM,KAAK,QAOhB,CAAA;AAEF,eAAO,MAAM,MAAM,QAMjB,CAAA;AAEF,eAAO,MAAM,UAAU,QAIrB,CAAA;AAEF,eAAO,MAAM,QAAQ,QASnB,CAAA;AAEF,eAAO,MAAM,KAAK,QAIhB,CAAA;AAEF,eAAO,MAAM,WAAW,QAItB,CAAA;AAEF,eAAO,MAAM,IAAI,QASf,CAAA;AAEF,eAAO,MAAM,YAAY,QAoBvB,CAAA;AAEF,eAAO,MAAM,IAAI,QAEf,CAAA;AAEF,eAAO,MAAM,IAAI,QAKf,CAAA;AAEF,eAAO,MAAM,KAAK,QAGhB,CAAA;AAEF,eAAO,MAAM,KAAK,QAQhB,CAAA;AAEF,eAAO,MAAM,SAAS,QAEpB,CAAA;AAEF,eAAO,MAAM,QAAQ,QAyBnB,CAAA;AAEF,eAAO,MAAM,YAAY,QAMvB,CAAA;AAEF,eAAO,MAAM,YAAY,QAwBvB,CAAA;AAEF,eAAO,MAAM,OAAO,QAUlB,CAAA;AAEF,eAAO,MAAM,YAAY,QAGvB,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAK9B,CAAA;AAEF,eAAO,MAAM,MAAM,QAOjB,CAAA;AAEF,eAAO,MAAM,SAAS,QAQpB,CAAA;AAEF,eAAO,MAAM,aAAa,QAIxB,CAAA;AAEF,eAAO,MAAM,YAAY,QAqBvB,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAe9B,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@haklex/rich-renderer-katex",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "description": "KaTeX math renderer for haklex rich editor",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -17,15 +17,16 @@
17
17
  ],
18
18
  "dependencies": {
19
19
  "lucide-react": "^0.574.0",
20
- "@haklex/rich-editor": "0.0.3",
21
- "@haklex/rich-style-token": "0.0.3",
22
- "@haklex/rich-editor-ui": "0.0.3"
20
+ "@haklex/rich-editor": "0.0.5",
21
+ "@haklex/rich-style-token": "0.0.5",
22
+ "@haklex/rich-editor-ui": "0.0.5"
23
23
  },
24
24
  "devDependencies": {
25
25
  "@lexical/react": "^0.39.0",
26
26
  "@types/react": "^19.2.9",
27
27
  "@types/react-dom": "^19.2.3",
28
28
  "@vanilla-extract/css": "^1.17.1",
29
+ "@vanilla-extract/recipes": "^0.5.7",
29
30
  "@vanilla-extract/vite-plugin": "^4.0.20",
30
31
  "katex": ">=0.16.0",
31
32
  "lexical": "^0.39.0",