structiq 0.0.4
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.
- package/README.md +70 -0
- package/dist/index.css +360 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.cts +14 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.js +5810 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +5793 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +73 -0
package/README.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# @/structiq
|
|
2
|
+
|
|
3
|
+
A powerful rich text editor built with TipTap and React.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
\`\`\`bash
|
|
8
|
+
npm install @structiq
|
|
9
|
+
|
|
10
|
+
# or
|
|
11
|
+
|
|
12
|
+
yarn add @structiq
|
|
13
|
+
|
|
14
|
+
# or
|
|
15
|
+
|
|
16
|
+
pnpm add @structiq
|
|
17
|
+
\`\`\`
|
|
18
|
+
|
|
19
|
+
**Note:** This package requires Tailwind CSS to be set up in your project.
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
\`\`\`tsx
|
|
24
|
+
import { StructiqEditor } from '@structiq';
|
|
25
|
+
import "Structiq/dist/index.css";
|
|
26
|
+
|
|
27
|
+
function App() {
|
|
28
|
+
const [content, setContent] = useState('');
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<StructiqEditor
|
|
32
|
+
content={content}
|
|
33
|
+
onChange={(html) => setContent(html)}
|
|
34
|
+
onBlur={(html) => console.log('Saved:', html)}
|
|
35
|
+
autoFocus
|
|
36
|
+
/>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
\`\`\`
|
|
40
|
+
|
|
41
|
+
## Props
|
|
42
|
+
|
|
43
|
+
| Prop | Type | Default | Description |
|
|
44
|
+
| ----------- | ------------------------ | ------- | ------------------------------ |
|
|
45
|
+
| `content` | `string` | `""` | Initial HTML content |
|
|
46
|
+
| `onChange` | `(html: string) => void` | - | Called on every content change |
|
|
47
|
+
| `onBlur` | `(html: string) => void` | - | Called when editor loses focus |
|
|
48
|
+
| `autoFocus` | `boolean` | `false` | Auto-focus on mount |
|
|
49
|
+
| `disabled` | `boolean` | `false` | Disable editing |
|
|
50
|
+
| `className` | `string` | `""` | table row/column controls |
|
|
51
|
+
|
|
52
|
+
## Styling
|
|
53
|
+
|
|
54
|
+
This package uses internal style css file, Make sure you import the css:
|
|
55
|
+
|
|
56
|
+
import "Structiq/dist/index.css";
|
|
57
|
+
|
|
58
|
+
## License
|
|
59
|
+
|
|
60
|
+
MIT
|
|
61
|
+
\`\`\`
|
|
62
|
+
|
|
63
|
+
## 🎯 Key Improvements Made
|
|
64
|
+
|
|
65
|
+
1. **Exported TypeScript types** - Users get full IntelliSense
|
|
66
|
+
2. **Removed commented code** - Cleaner codebase
|
|
67
|
+
3. **Proper peer dependencies** - React is a peer dependency
|
|
68
|
+
4. **Build configuration** - Using tsup for modern bundling
|
|
69
|
+
5. **Export sub-components** - Advanced users can import individual pieces
|
|
70
|
+
6. **Removed dark mode assumption** - Let users handle theming
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,360 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
|
|
3
|
+
/* src/index.scss */
|
|
4
|
+
.ProseMirror {
|
|
5
|
+
outline: none;
|
|
6
|
+
min-height: 300px;
|
|
7
|
+
line-height: 1.6;
|
|
8
|
+
font-size: 16px;
|
|
9
|
+
}
|
|
10
|
+
.ProseMirror p {
|
|
11
|
+
margin: 0.4rem 0;
|
|
12
|
+
}
|
|
13
|
+
.ProseMirror h1 {
|
|
14
|
+
font-size: 1.875rem;
|
|
15
|
+
font-weight: 700;
|
|
16
|
+
margin: 1.2rem 0 0.6rem;
|
|
17
|
+
}
|
|
18
|
+
.ProseMirror h2 {
|
|
19
|
+
font-size: 1.5rem;
|
|
20
|
+
font-weight: 600;
|
|
21
|
+
margin: 1rem 0 0.5rem;
|
|
22
|
+
}
|
|
23
|
+
.ProseMirror h3 {
|
|
24
|
+
font-size: 1.25rem;
|
|
25
|
+
font-weight: 600;
|
|
26
|
+
margin: 0.8rem 0 0.4rem;
|
|
27
|
+
}
|
|
28
|
+
.tippy-content {
|
|
29
|
+
position: relative !important;
|
|
30
|
+
z-index: 1 !important;
|
|
31
|
+
padding: 0px 0px !important;
|
|
32
|
+
}
|
|
33
|
+
.ProseMirror ul {
|
|
34
|
+
list-style-type: disc;
|
|
35
|
+
padding-left: 1.5rem;
|
|
36
|
+
}
|
|
37
|
+
.ProseMirror ol {
|
|
38
|
+
list-style-type: decimal;
|
|
39
|
+
padding-left: 1.5rem;
|
|
40
|
+
}
|
|
41
|
+
.ProseMirror li {
|
|
42
|
+
margin: 0.25rem 0;
|
|
43
|
+
}
|
|
44
|
+
.ProseMirror ul[data-type=taskList] {
|
|
45
|
+
list-style: none;
|
|
46
|
+
padding-left: 0;
|
|
47
|
+
}
|
|
48
|
+
.ProseMirror li[data-type=taskItem] {
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: flex-start;
|
|
51
|
+
}
|
|
52
|
+
.ProseMirror li[data-type=taskItem] > label {
|
|
53
|
+
margin-right: 0.5rem;
|
|
54
|
+
}
|
|
55
|
+
.ProseMirror blockquote {
|
|
56
|
+
border-left: 4px solid #e5e7eb;
|
|
57
|
+
padding-left: 1rem;
|
|
58
|
+
color: #4b5563;
|
|
59
|
+
margin: 0.75rem 0;
|
|
60
|
+
}
|
|
61
|
+
.ProseMirror code {
|
|
62
|
+
background-color: #f3f4f6;
|
|
63
|
+
padding: 0.15rem 0.3rem;
|
|
64
|
+
border-radius: 4px;
|
|
65
|
+
font-size: 0.875rem;
|
|
66
|
+
}
|
|
67
|
+
.ProseMirror pre {
|
|
68
|
+
background: #0f172a;
|
|
69
|
+
color: #e5e7eb;
|
|
70
|
+
padding: 1rem;
|
|
71
|
+
border-radius: 8px;
|
|
72
|
+
overflow-x: auto;
|
|
73
|
+
margin: 0.75rem 0;
|
|
74
|
+
}
|
|
75
|
+
.ProseMirror pre code {
|
|
76
|
+
background: none;
|
|
77
|
+
padding: 0;
|
|
78
|
+
color: inherit;
|
|
79
|
+
}
|
|
80
|
+
.ProseMirror table {
|
|
81
|
+
border-collapse: collapse;
|
|
82
|
+
width: 100%;
|
|
83
|
+
table-layout: fixed;
|
|
84
|
+
margin: 0.75rem 0;
|
|
85
|
+
}
|
|
86
|
+
.ProseMirror th,
|
|
87
|
+
.ProseMirror td {
|
|
88
|
+
border: 1px solid #e5e7eb;
|
|
89
|
+
padding: 0.5rem;
|
|
90
|
+
vertical-align: top;
|
|
91
|
+
}
|
|
92
|
+
.ProseMirror th {
|
|
93
|
+
background-color: #f9fafb;
|
|
94
|
+
font-weight: 600;
|
|
95
|
+
}
|
|
96
|
+
.ProseMirror td p,
|
|
97
|
+
.ProseMirror th p {
|
|
98
|
+
margin: 0;
|
|
99
|
+
}
|
|
100
|
+
.ProseMirror .column-resize-handle {
|
|
101
|
+
position: absolute;
|
|
102
|
+
right: -2px;
|
|
103
|
+
top: 0;
|
|
104
|
+
bottom: 0;
|
|
105
|
+
width: 4px;
|
|
106
|
+
background-color: #3b82f6;
|
|
107
|
+
pointer-events: none;
|
|
108
|
+
}
|
|
109
|
+
.ProseMirror.resize-cursor {
|
|
110
|
+
cursor: col-resize;
|
|
111
|
+
}
|
|
112
|
+
.ProseMirror hr {
|
|
113
|
+
border: none;
|
|
114
|
+
border-top: 1px solid #e5e7eb;
|
|
115
|
+
margin: 1.5rem 0;
|
|
116
|
+
}
|
|
117
|
+
.mention {
|
|
118
|
+
background-color: #eef2ff;
|
|
119
|
+
color: #4338ca;
|
|
120
|
+
padding: 0.1rem 0.4rem;
|
|
121
|
+
border-radius: 0.375rem;
|
|
122
|
+
font-weight: 500;
|
|
123
|
+
}
|
|
124
|
+
.ProseMirror a {
|
|
125
|
+
color: #2563eb;
|
|
126
|
+
text-decoration: underline;
|
|
127
|
+
}
|
|
128
|
+
.ProseMirror img {
|
|
129
|
+
max-width: 100%;
|
|
130
|
+
border-radius: 8px;
|
|
131
|
+
margin: 0.75rem 0;
|
|
132
|
+
}
|
|
133
|
+
.ProseMirror ::selection {
|
|
134
|
+
background: #c7d2fe;
|
|
135
|
+
}
|
|
136
|
+
.ProseMirror table {
|
|
137
|
+
border-collapse: collapse;
|
|
138
|
+
width: 100%;
|
|
139
|
+
table-layout: fixed;
|
|
140
|
+
margin: 1rem 0;
|
|
141
|
+
}
|
|
142
|
+
.ProseMirror th,
|
|
143
|
+
.ProseMirror td {
|
|
144
|
+
border: 1px solid #e5e7eb;
|
|
145
|
+
padding: 8px;
|
|
146
|
+
vertical-align: top;
|
|
147
|
+
position: relative;
|
|
148
|
+
}
|
|
149
|
+
.ProseMirror th {
|
|
150
|
+
background-color: #f9fafb;
|
|
151
|
+
font-weight: 600;
|
|
152
|
+
}
|
|
153
|
+
.ProseMirror .selectedCell {
|
|
154
|
+
background: rgba(59, 130, 246, 0.08);
|
|
155
|
+
}
|
|
156
|
+
.ProseMirror .column-resize-handle {
|
|
157
|
+
position: absolute;
|
|
158
|
+
right: -2px;
|
|
159
|
+
top: 0;
|
|
160
|
+
bottom: 0;
|
|
161
|
+
width: 4px;
|
|
162
|
+
background-color: #3b82f6;
|
|
163
|
+
pointer-events: none;
|
|
164
|
+
}
|
|
165
|
+
.ProseMirror table p {
|
|
166
|
+
margin: 0;
|
|
167
|
+
}
|
|
168
|
+
.table-menu button {
|
|
169
|
+
padding: 4px 8px;
|
|
170
|
+
border-radius: 4px;
|
|
171
|
+
font-size: 12px;
|
|
172
|
+
}
|
|
173
|
+
.table-menu button:hover {
|
|
174
|
+
background: #f3f4f6;
|
|
175
|
+
}
|
|
176
|
+
.ProseMirror ol {
|
|
177
|
+
list-style-type: decimal;
|
|
178
|
+
padding-left: 1.5rem;
|
|
179
|
+
}
|
|
180
|
+
.ProseMirror ol ol {
|
|
181
|
+
list-style-type: lower-alpha;
|
|
182
|
+
}
|
|
183
|
+
.ProseMirror ol ol ol {
|
|
184
|
+
list-style-type: lower-roman;
|
|
185
|
+
}
|
|
186
|
+
.ProseMirror ol ol ol ol {
|
|
187
|
+
list-style-type: decimal;
|
|
188
|
+
}
|
|
189
|
+
.ProseMirror li {
|
|
190
|
+
margin: 0.25rem 0;
|
|
191
|
+
}
|
|
192
|
+
.ProseMirror li > ol,
|
|
193
|
+
.ProseMirror li > ul {
|
|
194
|
+
margin-top: 0.25rem;
|
|
195
|
+
}
|
|
196
|
+
.ProseMirror p {
|
|
197
|
+
position: relative;
|
|
198
|
+
}
|
|
199
|
+
.ProseMirror p.is-empty::before {
|
|
200
|
+
content: attr(data-placeholder);
|
|
201
|
+
color: #9ca3af;
|
|
202
|
+
pointer-events: none;
|
|
203
|
+
position: absolute;
|
|
204
|
+
left: 0;
|
|
205
|
+
top: 0;
|
|
206
|
+
font-style: italic;
|
|
207
|
+
}
|
|
208
|
+
.ProseMirror:not(.ProseMirror-focused) p.is-empty::before {
|
|
209
|
+
content: "";
|
|
210
|
+
}
|
|
211
|
+
.mention {
|
|
212
|
+
color: #2563eb;
|
|
213
|
+
background-color: #e0e7ff;
|
|
214
|
+
padding: 2px 6px;
|
|
215
|
+
border-radius: 6px;
|
|
216
|
+
font-weight: 500;
|
|
217
|
+
}
|
|
218
|
+
.mention {
|
|
219
|
+
color: #2563eb;
|
|
220
|
+
cursor: pointer;
|
|
221
|
+
border-radius: 4px;
|
|
222
|
+
padding: 0 2px;
|
|
223
|
+
}
|
|
224
|
+
.mention:hover {
|
|
225
|
+
background: #eff6ff;
|
|
226
|
+
}
|
|
227
|
+
.tiptap p.is-empty::before,
|
|
228
|
+
.tiptap h1.is-empty::before,
|
|
229
|
+
.tiptap h2.is-empty::before,
|
|
230
|
+
.tiptap h3.is-empty::before {
|
|
231
|
+
content: attr(data-placeholder);
|
|
232
|
+
float: left;
|
|
233
|
+
color: #9ca3af;
|
|
234
|
+
pointer-events: none;
|
|
235
|
+
height: 0;
|
|
236
|
+
}
|
|
237
|
+
.tiptap h1 {
|
|
238
|
+
border-left: 3px solid transparent;
|
|
239
|
+
padding-left: 8px;
|
|
240
|
+
}
|
|
241
|
+
.tiptap h1.is-active {
|
|
242
|
+
border-left-color: #6366f1;
|
|
243
|
+
}
|
|
244
|
+
.tiptap .is-empty::before {
|
|
245
|
+
content: attr(data-placeholder);
|
|
246
|
+
color: #9ca3af;
|
|
247
|
+
float: left;
|
|
248
|
+
pointer-events: none;
|
|
249
|
+
height: 0;
|
|
250
|
+
}
|
|
251
|
+
.tiptap li.is-empty::before {
|
|
252
|
+
position: absolute;
|
|
253
|
+
}
|
|
254
|
+
ul[data-type=taskList] {
|
|
255
|
+
list-style: none;
|
|
256
|
+
padding-left: 0;
|
|
257
|
+
}
|
|
258
|
+
ul[data-type=taskList] li {
|
|
259
|
+
display: flex;
|
|
260
|
+
align-items: flex-start;
|
|
261
|
+
gap: 0.5rem;
|
|
262
|
+
}
|
|
263
|
+
ul[data-type=taskList] li > label {
|
|
264
|
+
flex-shrink: 0;
|
|
265
|
+
margin-top: 0.55rem;
|
|
266
|
+
user-select: none;
|
|
267
|
+
}
|
|
268
|
+
ul[data-type=taskList] li > label input[type=checkbox] {
|
|
269
|
+
cursor: pointer;
|
|
270
|
+
width: 1rem;
|
|
271
|
+
height: 1rem;
|
|
272
|
+
}
|
|
273
|
+
ul[data-type=taskList] li > div {
|
|
274
|
+
flex: 1;
|
|
275
|
+
}
|
|
276
|
+
ul[data-type=taskList] {
|
|
277
|
+
}
|
|
278
|
+
ul[data-type=taskList] ul[data-type=taskList] {
|
|
279
|
+
margin: 0.5rem 0 0 1.5rem;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/* node_modules/tippy.js/dist/tippy.css */
|
|
283
|
+
.tippy-box[data-animation=fade][data-state=hidden] {
|
|
284
|
+
opacity: 0;
|
|
285
|
+
}
|
|
286
|
+
[data-tippy-root] {
|
|
287
|
+
max-width: calc(100vw - 10px);
|
|
288
|
+
}
|
|
289
|
+
.tippy-box {
|
|
290
|
+
position: relative;
|
|
291
|
+
background-color: #333;
|
|
292
|
+
color: #fff;
|
|
293
|
+
border-radius: 4px;
|
|
294
|
+
font-size: 14px;
|
|
295
|
+
line-height: 1.4;
|
|
296
|
+
white-space: normal;
|
|
297
|
+
outline: 0;
|
|
298
|
+
transition-property:
|
|
299
|
+
transform,
|
|
300
|
+
visibility,
|
|
301
|
+
opacity;
|
|
302
|
+
}
|
|
303
|
+
.tippy-box[data-placement^=top] > .tippy-arrow {
|
|
304
|
+
bottom: 0;
|
|
305
|
+
}
|
|
306
|
+
.tippy-box[data-placement^=top] > .tippy-arrow:before {
|
|
307
|
+
bottom: -7px;
|
|
308
|
+
left: 0;
|
|
309
|
+
border-width: 8px 8px 0;
|
|
310
|
+
border-top-color: initial;
|
|
311
|
+
transform-origin: center top;
|
|
312
|
+
}
|
|
313
|
+
.tippy-box[data-placement^=bottom] > .tippy-arrow {
|
|
314
|
+
top: 0;
|
|
315
|
+
}
|
|
316
|
+
.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
|
|
317
|
+
top: -7px;
|
|
318
|
+
left: 0;
|
|
319
|
+
border-width: 0 8px 8px;
|
|
320
|
+
border-bottom-color: initial;
|
|
321
|
+
transform-origin: center bottom;
|
|
322
|
+
}
|
|
323
|
+
.tippy-box[data-placement^=left] > .tippy-arrow {
|
|
324
|
+
right: 0;
|
|
325
|
+
}
|
|
326
|
+
.tippy-box[data-placement^=left] > .tippy-arrow:before {
|
|
327
|
+
border-width: 8px 0 8px 8px;
|
|
328
|
+
border-left-color: initial;
|
|
329
|
+
right: -7px;
|
|
330
|
+
transform-origin: center left;
|
|
331
|
+
}
|
|
332
|
+
.tippy-box[data-placement^=right] > .tippy-arrow {
|
|
333
|
+
left: 0;
|
|
334
|
+
}
|
|
335
|
+
.tippy-box[data-placement^=right] > .tippy-arrow:before {
|
|
336
|
+
left: -7px;
|
|
337
|
+
border-width: 8px 8px 8px 0;
|
|
338
|
+
border-right-color: initial;
|
|
339
|
+
transform-origin: center right;
|
|
340
|
+
}
|
|
341
|
+
.tippy-box[data-inertia][data-state=visible] {
|
|
342
|
+
transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
|
|
343
|
+
}
|
|
344
|
+
.tippy-arrow {
|
|
345
|
+
width: 16px;
|
|
346
|
+
height: 16px;
|
|
347
|
+
color: #333;
|
|
348
|
+
}
|
|
349
|
+
.tippy-arrow:before {
|
|
350
|
+
content: "";
|
|
351
|
+
position: absolute;
|
|
352
|
+
border-color: transparent;
|
|
353
|
+
border-style: solid;
|
|
354
|
+
}
|
|
355
|
+
.tippy-content {
|
|
356
|
+
position: relative;
|
|
357
|
+
padding: 5px 9px;
|
|
358
|
+
z-index: 1;
|
|
359
|
+
}
|
|
360
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../index.scss","../node_modules/tippy.js/dist/tippy.css"],"sourcesContent":["/* ===============================\n CORE EDITOR\n================================ */\n\n.ProseMirror {\n outline: none;\n min-height: 300px;\n line-height: 1.6;\n font-size: 16px;\n}\n\n\n/* Paragraph spacing */\n.ProseMirror p {\n margin: 0.4rem 0;\n}\n\n/* ===============================\n HEADINGS\n================================ */\n\n.ProseMirror h1 {\n font-size: 1.875rem;\n font-weight: 700;\n margin: 1.2rem 0 0.6rem;\n}\n\n.ProseMirror h2 {\n font-size: 1.5rem;\n font-weight: 600;\n margin: 1rem 0 0.5rem;\n}\n\n.ProseMirror h3 {\n font-size: 1.25rem;\n font-weight: 600;\n margin: 0.8rem 0 0.4rem;\n}\n\n/* ===============================\n LISTS\n================================ */\n\n.tippy-content{\n position: relative !important;\n z-index: 1 !important;\n padding: 0px 0px !important\n}\n\n\n.ProseMirror ul {\n list-style-type: disc;\n padding-left: 1.5rem;\n}\n\n.ProseMirror ol {\n list-style-type: decimal;\n padding-left: 1.5rem;\n}\n\n.ProseMirror li {\n margin: 0.25rem 0;\n}\n\n/* Task lists (checkbox) */\n.ProseMirror ul[data-type='taskList'] {\n list-style: none;\n padding-left: 0;\n}\n\n.ProseMirror li[data-type='taskItem'] {\n display: flex;\n align-items: flex-start;\n}\n\n.ProseMirror li[data-type='taskItem'] > label {\n margin-right: 0.5rem;\n}\n\n/* ===============================\n BLOCKQUOTE\n================================ */\n\n.ProseMirror blockquote {\n border-left: 4px solid #e5e7eb;\n padding-left: 1rem;\n color: #4b5563;\n margin: 0.75rem 0;\n}\n\n/* ===============================\n CODE\n================================ */\n\n.ProseMirror code {\n background-color: #f3f4f6;\n padding: 0.15rem 0.3rem;\n border-radius: 4px;\n font-size: 0.875rem;\n}\n\n/* Code block */\n.ProseMirror pre {\n background: #0f172a;\n color: #e5e7eb;\n padding: 1rem;\n border-radius: 8px;\n overflow-x: auto;\n margin: 0.75rem 0;\n}\n\n.ProseMirror pre code {\n background: none;\n padding: 0;\n color: inherit;\n}\n\n/* ===============================\n TABLES (CRITICAL)\n================================ */\n\n.ProseMirror table {\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n margin: 0.75rem 0;\n}\n\n.ProseMirror th,\n.ProseMirror td {\n border: 1px solid #e5e7eb;\n padding: 0.5rem;\n vertical-align: top;\n}\n\n.ProseMirror th {\n background-color: #f9fafb;\n font-weight: 600;\n}\n\n.ProseMirror td p,\n.ProseMirror th p {\n margin: 0;\n}\n\n/* Column resize */\n.ProseMirror .column-resize-handle {\n position: absolute;\n right: -2px;\n top: 0;\n bottom: 0;\n width: 4px;\n background-color: #3b82f6;\n pointer-events: none;\n}\n\n.ProseMirror.resize-cursor {\n cursor: col-resize;\n}\n\n/* ===============================\n HORIZONTAL RULE\n================================ */\n\n.ProseMirror hr {\n border: none;\n border-top: 1px solid #e5e7eb;\n margin: 1.5rem 0;\n}\n\n/* ===============================\n MENTIONS\n================================ */\n\n.mention {\n background-color: #eef2ff;\n color: #4338ca;\n padding: 0.1rem 0.4rem;\n border-radius: 0.375rem;\n font-weight: 500;\n}\n\n/* ===============================\n LINKS\n================================ */\n\n.ProseMirror a {\n color: #2563eb;\n text-decoration: underline;\n}\n\n/* ===============================\n IMAGES (if you add later)\n================================ */\n\n.ProseMirror img {\n max-width: 100%;\n border-radius: 8px;\n margin: 0.75rem 0;\n}\n\n/* ===============================\n SELECTION / CURSOR\n================================ */\n\n.ProseMirror ::selection {\n background: #c7d2fe;\n}\n\n/* ===== TABLE BASE ===== */\n.ProseMirror table {\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n margin: 1rem 0;\n}\n\n.ProseMirror th,\n.ProseMirror td {\n border: 1px solid #e5e7eb;\n padding: 8px;\n vertical-align: top;\n position: relative;\n}\n\n.ProseMirror th {\n background-color: #f9fafb;\n font-weight: 600;\n}\n\n/* ===== SELECTION ===== */\n.ProseMirror .selectedCell {\n background: rgba(59, 130, 246, 0.08);\n}\n\n/* ===== RESIZE HANDLE ===== */\n.ProseMirror .column-resize-handle {\n position: absolute;\n right: -2px;\n top: 0;\n bottom: 0;\n width: 4px;\n background-color: #3b82f6;\n pointer-events: none;\n}\n\n/* ===== TABLE WRAPPER ===== */\n.ProseMirror table p {\n margin: 0;\n}\n.table-menu button {\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n}\n\n.table-menu button:hover {\n background: #f3f4f6;\n}\n/* Ordered list nesting — Notion style */\n\n.ProseMirror ol {\n list-style-type: decimal;\n padding-left: 1.5rem;\n}\n\n.ProseMirror ol ol {\n list-style-type: lower-alpha;\n}\n\n.ProseMirror ol ol ol {\n list-style-type: lower-roman;\n}\n\n.ProseMirror ol ol ol ol {\n list-style-type: decimal;\n}\n.ProseMirror li {\n margin: 0.25rem 0;\n}\n\n.ProseMirror li > ol,\n.ProseMirror li > ul {\n margin-top: 0.25rem;\n}\n/* Show placeholder only on the focused empty paragraph */\n.ProseMirror p {\n position: relative;\n}\n\n.ProseMirror p.is-empty::before {\n content: attr(data-placeholder);\n color: #9ca3af;\n pointer-events: none;\n position: absolute;\n left: 0;\n top: 0;\n font-style: italic;\n}\n\n/* Hide placeholder when editor is not focused */\n.ProseMirror:not(.ProseMirror-focused) p.is-empty::before {\n content: '';\n}\n\n.mention {\n color: #2563eb;\n background-color: #e0e7ff;\n padding: 2px 6px;\n border-radius: 6px;\n font-weight: 500;\n}\n.mention {\n color: #2563eb;\n cursor: pointer;\n border-radius: 4px;\n padding: 0 2px;\n}\n\n.mention:hover {\n background: #eff6ff;\n}\n.tiptap p.is-empty::before,\n.tiptap h1.is-empty::before,\n.tiptap h2.is-empty::before,\n.tiptap h3.is-empty::before {\n content: attr(data-placeholder);\n float: left;\n color: #9ca3af; /* subtle gray */\n pointer-events: none;\n height: 0;\n}\n.tiptap h1 {\n border-left: 3px solid transparent;\n padding-left: 8px;\n}\n\n.tiptap h1.is-active {\n border-left-color: #6366f1;\n}\n.tiptap .is-empty::before {\n content: attr(data-placeholder);\n color: #9ca3af;\n float: left;\n pointer-events: none;\n height: 0;\n}\n\n/* Fix for lists */\n.tiptap li.is-empty::before {\n position: absolute;\n}\n\n\n/* Task List Styles */\nul[data-type=\"taskList\"] {\n list-style: none;\n padding-left: 0;\n \n li {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n \n > label {\n flex-shrink: 0;\n margin-top: 0.55rem;\n user-select: none;\n \n input[type=\"checkbox\"] {\n cursor: pointer;\n width: 1rem;\n height: 1rem;\n }\n }\n \n > div {\n flex: 1;\n }\n }\n \n /* Nested task lists */\n ul[data-type=\"taskList\"] {\n margin: 0.5rem 0 0 1.5rem;\n }\n}\n\n",".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}"],"mappings":"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","names":[]}
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
interface StructiqEditorProps {
|
|
4
|
+
content?: string;
|
|
5
|
+
onChange?: (html: string) => void;
|
|
6
|
+
onBlur?: (html: string) => void;
|
|
7
|
+
autoFocus?: boolean;
|
|
8
|
+
customHeight?: boolean;
|
|
9
|
+
className?: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
}
|
|
12
|
+
declare const StructiqEditor: React.FC<StructiqEditorProps>;
|
|
13
|
+
|
|
14
|
+
export { StructiqEditor, type StructiqEditorProps };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
interface StructiqEditorProps {
|
|
4
|
+
content?: string;
|
|
5
|
+
onChange?: (html: string) => void;
|
|
6
|
+
onBlur?: (html: string) => void;
|
|
7
|
+
autoFocus?: boolean;
|
|
8
|
+
customHeight?: boolean;
|
|
9
|
+
className?: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
}
|
|
12
|
+
declare const StructiqEditor: React.FC<StructiqEditorProps>;
|
|
13
|
+
|
|
14
|
+
export { StructiqEditor, type StructiqEditorProps };
|