@yoopta/lists 1.9.12-rc → 1.9.13-rc

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 (2) hide show
  1. package/dist/index.js +1 -551
  2. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -1,551 +1 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { createYooptaPlugin, generateId, getElementByPath, getElementClassname, cx } from '@yoopta/editor';
3
- import { Element, Editor, Transforms, Path } from 'slate';
4
- import { ReactEditor } from 'slate-react';
5
-
6
- function styleInject(css, ref) {
7
- if ( ref === void 0 ) ref = {};
8
- var insertAt = ref.insertAt;
9
-
10
- if (!css || typeof document === 'undefined') { return; }
11
-
12
- var head = document.head || document.getElementsByTagName('head')[0];
13
- var style = document.createElement('style');
14
- style.type = 'text/css';
15
-
16
- if (insertAt === 'top') {
17
- if (head.firstChild) {
18
- head.insertBefore(style, head.firstChild);
19
- } else {
20
- head.appendChild(style);
21
- }
22
- } else {
23
- head.appendChild(style);
24
- }
25
-
26
- if (style.styleSheet) {
27
- style.styleSheet.cssText = css;
28
- } else {
29
- style.appendChild(document.createTextNode(css));
30
- }
31
- }
32
-
33
- var css_248z$4 = ".ListItem-module_listItem{color:inherit;font-size:16px;letter-spacing:-.003em;line-height:28px;list-style-position:inside;padding-bottom:2px;padding-left:0;padding-top:2px;position:relative}.ListItem-module_dotWrapper{align-items:center;display:flex;flex-grow:0;flex-shrink:0;justify-content:center;margin-right:2px;min-height:calc(1.5em + 6px);user-select:none;width:24px}.ListItem-module_dot{box-sizing:border-box;color:#000;display:inline;flex-shrink:0;font-size:16px;font-style:normal;font-weight:400;line-height:28px;min-width:28px;padding:0 6px 0 4px;word-break:break-word}";
34
- var s$4 = {"listItem":"ListItem-module_listItem","dotWrapper":"ListItem-module_dotWrapper","dot":"ListItem-module_dot"};
35
- styleInject(css_248z$4);
36
-
37
- const ListItemRender = ({ attributes, children, HTMLAttributes }) => {
38
- return (jsx("li", Object.assign({ className: s$4.listItem, draggable: false }, HTMLAttributes, attributes, { children: children })));
39
- };
40
- ListItemRender.displayName = 'ListItem';
41
- const LIST_ITEM_NODE_TYPE = 'list-item';
42
- const ListItemList = createYooptaPlugin({
43
- type: LIST_ITEM_NODE_TYPE,
44
- renderer: (editor) => ListItemRender,
45
- extendEditor(editor) {
46
- const { normalizeNode } = editor;
47
- editor.normalizeNode = (entry) => {
48
- const [node, path] = entry;
49
- if (Element.isElement(node) && node.type === LIST_ITEM_NODE_TYPE) {
50
- const childNode = node.children[0];
51
- if (Element.isElement(childNode) && !Editor.isInline(editor, childNode)) {
52
- Transforms.unwrapNodes(editor, {
53
- at: path.concat(0),
54
- });
55
- }
56
- }
57
- normalizeNode(entry);
58
- };
59
- return editor;
60
- },
61
- shortcut: '-',
62
- defineElement: () => ({
63
- id: generateId(),
64
- type: 'list-item',
65
- children: [{ text: '' }],
66
- nodeType: 'block',
67
- }),
68
- placeholder: null,
69
- events: {
70
- onKeyDown: (editor, { hotkeys, defaultNode }) => (event) => {
71
- if (!editor.selection)
72
- return;
73
- const currentNode = getElementByPath(editor, editor.selection.anchor.path, 'lowest');
74
- if (currentNode.type !== LIST_ITEM_NODE_TYPE)
75
- return;
76
- const nodeEntry = Editor.above(editor, {
77
- at: editor.selection.anchor,
78
- match: (n) => Element.isElement(n) && n.type === LIST_ITEM_NODE_TYPE,
79
- });
80
- if (!nodeEntry)
81
- return;
82
- const { anchor } = editor.selection;
83
- const [listItemNode, listItemPath] = nodeEntry;
84
- const [parentNode, parentPath] = Editor.parent(editor, listItemPath);
85
- const text = Editor.string(editor, listItemPath);
86
- const isEnd = Editor.isEnd(editor, anchor, listItemPath);
87
- const isStart = Editor.isStart(editor, anchor, listItemPath);
88
- const currentDepth = listItemPath.length - 1;
89
- const isMaxDepth = currentDepth === 2;
90
- const isMinDepth = currentDepth === 1;
91
- if (hotkeys.isShiftEnter(event)) {
92
- event.preventDefault();
93
- editor.insertText('\n');
94
- return;
95
- }
96
- if (hotkeys.isEnter(event)) {
97
- event.preventDefault();
98
- if (text.trim() === '') {
99
- Transforms.unwrapNodes(editor, {
100
- match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.type === parentNode.type,
101
- split: true,
102
- });
103
- const candidateNode = currentDepth > 1
104
- ? { id: generateId(), type: LIST_ITEM_NODE_TYPE, children: [{ text: '' }] }
105
- : defaultNode;
106
- Transforms.setNodes(editor, candidateNode, {
107
- at: editor.selection,
108
- });
109
- return;
110
- }
111
- if (!isEnd && !isStart) {
112
- Transforms.splitNodes(editor);
113
- Transforms.setNodes(editor, { id: generateId() });
114
- return;
115
- }
116
- const listItem = Object.assign(Object.assign({}, listItemNode), { id: generateId(), children: [
117
- {
118
- text: '',
119
- },
120
- ] });
121
- Transforms.insertNodes(editor, listItem);
122
- return;
123
- }
124
- if (hotkeys.isBackspace(event)) {
125
- const [, firstPath] = Editor.first(editor, parentPath);
126
- const isFirstListItemNode = Path.compare(editor.selection.anchor.path, firstPath) === 0;
127
- if (isStart && isFirstListItemNode) {
128
- event.preventDefault();
129
- Transforms.unwrapNodes(editor, {
130
- match: (n) => Element.isElement(n) && n.type === parentNode.type,
131
- split: true,
132
- });
133
- Transforms.setNodes(editor, defaultNode, {
134
- at: editor.selection,
135
- });
136
- }
137
- return;
138
- }
139
- if (hotkeys.isTab(event)) {
140
- event.preventDefault();
141
- if (isMaxDepth)
142
- return;
143
- const parentNestedNode = Object.assign(Object.assign({}, parentNode), { id: generateId(), type: parentNode.type, children: [ListItemList.getPlugin.defineElement()] });
144
- Transforms.wrapNodes(editor, parentNestedNode, { at: listItemPath });
145
- Transforms.setNodes(editor, { data: { depth: currentDepth + 1, skipDrag: true } }, {
146
- match: (n) => Element.isElement(n) && n.type === parentNode.type,
147
- });
148
- return;
149
- }
150
- if (hotkeys.isShiftTab(event)) {
151
- event.preventDefault();
152
- if (isMinDepth)
153
- return;
154
- Transforms.unwrapNodes(editor, {
155
- match: (n) => Element.isElement(n) && n.type === parentNode.type,
156
- // at: listItemPath,
157
- split: true,
158
- });
159
- Transforms.setNodes(editor, { data: { depth: currentDepth - 1, skipDrag: true } }, {
160
- match: (n) => Element.isElement(n) && n.type === parentNode.type,
161
- });
162
- return;
163
- }
164
- },
165
- },
166
- exports: {
167
- markdown: {
168
- serialize: (node, text) => `- ${text}`,
169
- },
170
- html: {
171
- serialize: (node, children) => {
172
- console.log('children', children);
173
- return `<li>${children}</li>`;
174
- },
175
- deserialize: {
176
- nodeName: 'LI',
177
- },
178
- },
179
- },
180
- });
181
-
182
- var css_248z$3 = ".NumberedList-module_list{margin:2px 0;padding-left:18px}";
183
- var s$3 = {"list":"NumberedList-module_list"};
184
- styleInject(css_248z$3);
185
-
186
- const NumberedListRender = ({ attributes, children, element, HTMLAttributes, }) => {
187
- return (jsx("ol", Object.assign({ draggable: false }, HTMLAttributes, attributes, { className: getElementClassname({ element, HTMLAttributes, className: s$3.list }) }, { children: children })));
188
- };
189
- const NUMBERED_LIST_NODE_TYPE = 'numbered-list';
190
- const NumberedList = createYooptaPlugin({
191
- type: NUMBERED_LIST_NODE_TYPE,
192
- renderer: (editor) => NumberedListRender,
193
- childPlugin: ListItemList,
194
- shortcut: '1.',
195
- defineElement: () => ({
196
- id: generateId(),
197
- type: 'numbered-list',
198
- children: [ListItemList.getPlugin.defineElement()],
199
- nodeType: 'block',
200
- data: { depth: 1, skipDrag: true, skipSettings: true },
201
- }),
202
- createElement: (editor, elementData) => {
203
- var _a, _b;
204
- const listItem = ListItemList.getPlugin.defineElement();
205
- Transforms.unwrapNodes(editor, {
206
- match: (n) => {
207
- var _a;
208
- return !Editor.isEditor(n) &&
209
- Element.isElement(n) &&
210
- n.type !== 'list-item' &&
211
- n.type !== 'todo-list-item' &&
212
- ((_a = n.data) === null || _a === void 0 ? void 0 : _a.depth) >= 1;
213
- },
214
- split: true,
215
- });
216
- Transforms.setNodes(editor, listItem, {
217
- at: (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor,
218
- });
219
- const numberedList = Object.assign(Object.assign({}, NumberedList.getPlugin.defineElement()), elementData);
220
- Transforms.wrapNodes(editor, numberedList, {
221
- at: (_b = editor.selection) === null || _b === void 0 ? void 0 : _b.anchor,
222
- });
223
- },
224
- exports: {
225
- markdown: {
226
- serialize: (node, text) => `${text}\n`,
227
- },
228
- html: {
229
- serialize: (node, children) => {
230
- var _a;
231
- const paddingLeft = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.depth) ? node.data.depth * 15 : 15;
232
- return `<ol style="padding-left: ${paddingLeft}px;">${children}</ol>`;
233
- },
234
- deserialize: {
235
- nodeName: 'OL',
236
- },
237
- },
238
- },
239
- options: { searchString: 'order number list', displayLabel: 'NumberedList' },
240
- });
241
-
242
- var css_248z$2 = ".BulletedList-module_list{margin:2px 0;padding-left:18px}";
243
- var s$2 = {"list":"BulletedList-module_list"};
244
- styleInject(css_248z$2);
245
-
246
- const BulletedListRender = ({ attributes, children, element, HTMLAttributes, }) => {
247
- return (jsx("ul", Object.assign({ draggable: false }, HTMLAttributes, { className: getElementClassname({ element, HTMLAttributes, className: s$2.list }) }, attributes, { children: children })));
248
- };
249
- const BULLETED_LIST_NODE_TYPE = 'bulleted-list';
250
- const BulletedList = createYooptaPlugin({
251
- type: BULLETED_LIST_NODE_TYPE,
252
- renderer: (editor) => BulletedListRender,
253
- // [TODO] - fix for nested items
254
- shortcut: '-',
255
- childPlugin: ListItemList,
256
- defineElement: () => ({
257
- id: generateId(),
258
- type: 'bulleted-list',
259
- children: [ListItemList.getPlugin.defineElement()],
260
- nodeType: 'block',
261
- data: { depth: 1, skipDrag: true, skipSettings: true },
262
- }),
263
- // extendEditor(editor) {
264
- // const { normalizeNode } = editor;
265
- // editor.normalizeNode = (entry) => {
266
- // const [node] = entry;
267
- // if (Element.isElement(node) && node.type === BULLETED_LIST_NODE_TYPE) {
268
- // // console.log('Node.child(node, 0)', Node.child(node, 0));
269
- // // if (Node.child(node, 0)?.text.length === 0) {
270
- // // Transforms.removeNodes(editor, {
271
- // // at: entry[1],
272
- // // match: (n) => Element.isElement(n) && n.type === BULLETED_LIST_NODE_TYPE,
273
- // // });
274
- // // }
275
- // }
276
- // normalizeNode(entry);
277
- // };
278
- // return editor;
279
- // },
280
- createElement: (editor, elementData) => {
281
- var _a, _b;
282
- const listItem = ListItemList.getPlugin.defineElement();
283
- Transforms.unwrapNodes(editor, {
284
- match: (n) => {
285
- var _a;
286
- return !Editor.isEditor(n) &&
287
- Element.isElement(n) &&
288
- n.type !== 'list-item' &&
289
- n.type !== 'todo-list-item' &&
290
- ((_a = n.data) === null || _a === void 0 ? void 0 : _a.depth) >= 1;
291
- },
292
- split: true,
293
- });
294
- Transforms.setNodes(editor, listItem, {
295
- at: (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor,
296
- });
297
- const bulletedList = Object.assign(Object.assign({}, BulletedList.getPlugin.defineElement()), elementData);
298
- Transforms.wrapNodes(editor, bulletedList, {
299
- at: (_b = editor.selection) === null || _b === void 0 ? void 0 : _b.anchor,
300
- });
301
- },
302
- exports: {
303
- markdown: {
304
- serialize: (node, text) => `- ${text}`,
305
- },
306
- html: {
307
- serialize: (node, children) => {
308
- var _a;
309
- const paddingLeft = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.depth) ? node.data.depth * 15 : 15;
310
- return `<ul style="padding-left: ${paddingLeft}px;">${children}</ul>`;
311
- },
312
- deserialize: {
313
- nodeName: 'UL',
314
- },
315
- },
316
- },
317
- options: {
318
- searchString: 'bullet list',
319
- displayLabel: 'BulletedList',
320
- },
321
- });
322
-
323
- var css_248z$1 = ".TodoListItem-module_todoListItem{fill:inherit;align-items:flex-start;color:#292929;color:inherit;display:flex;font-size:16px;letter-spacing:-.003em;line-height:24px;margin-bottom:1px;margin-top:1px;padding-bottom:2px;padding-left:2px;padding-top:2px;width:100%}.TodoListItem-module_checked{text-decoration:line-through}.TodoListItem-module_label{align-items:center;display:flex;flex-grow:0;flex-shrink:0;justify-content:center;margin-right:2px;min-height:30px;user-select:none;width:24px}.TodoListItem-module_label+.TodoListItem-module_label{margin-top:1em}.TodoListItem-module_input{align-items:center;-webkit-appearance:none;appearance:none;border:.1em solid;color:currentColor;cursor:pointer;display:flex;flex-grow:0;flex-shrink:0;height:1.15em;height:16px;place-content:center;justify-content:center;position:relative;transition:background .2s ease-out 0s;width:1.15em;width:16px}.TodoListItem-module_input:before{background-color:CanvasText;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);color:inherit;content:\"\";height:.65em;transform:scale(0);transform-origin:bottom left;transition:transform .12s ease-in-out;width:.65em}.TodoListItem-module_input:checked:before{transform:scale(1)}.TodoListItem-module_children{caret-color:#37352f;max-width:100%;min-width:1px;opacity:1;padding:3px 2px;text-align:left;white-space:pre-wrap;word-break:break-word}";
324
- var s$1 = {"todoListItem":"TodoListItem-module_todoListItem","checked":"TodoListItem-module_checked","label":"TodoListItem-module_label","input":"TodoListItem-module_input","children":"TodoListItem-module_children"};
325
- styleInject(css_248z$1);
326
-
327
- const TODO_LIST_NODE_ITEM_TYPE = 'todo-list-item';
328
- const TodoListItemRender = (editor) => {
329
- return function TodoListItemRender({ attributes, children, element, HTMLAttributes, }) {
330
- const onChange = (event) => {
331
- const path = ReactEditor.findPath(editor, element);
332
- Transforms.setNodes(editor, { data: { checked: event.target.checked } }, {
333
- at: path,
334
- match: (n) => Element.isElement(n) && n.type === TODO_LIST_NODE_ITEM_TYPE,
335
- });
336
- };
337
- const isChecked = element.data.checked;
338
- return (jsxs("div", Object.assign({ draggable: false }, attributes, HTMLAttributes, { className: cx(s$1.todoListItem, { [s$1.checked]: isChecked }) }, { children: [jsx("label", Object.assign({ className: s$1.label, contentEditable: false, style: { userSelect: 'none' } }, { children: jsx("input", { type: "checkbox", checked: isChecked, className: s$1.input, onChange: onChange }) })), jsx("span", Object.assign({ className: s$1.children }, { children: children }))] })));
339
- };
340
- };
341
- const TodoListItem = createYooptaPlugin({
342
- type: TODO_LIST_NODE_ITEM_TYPE,
343
- renderer: TodoListItemRender,
344
- placeholder: null,
345
- defineElement: () => ({
346
- id: generateId(),
347
- type: 'todo-list-item',
348
- children: [{ text: '' }],
349
- nodeType: 'block',
350
- data: { checked: false },
351
- }),
352
- events: {
353
- onKeyDown: (editor, { hotkeys, defaultNode }) => (event) => {
354
- var _a;
355
- if (!editor.selection)
356
- return;
357
- const node = getElementByPath(editor, editor.selection.anchor.path, 'lowest');
358
- if (node.type !== TODO_LIST_NODE_ITEM_TYPE)
359
- return;
360
- const todoItemEntry = Editor.above(editor, {
361
- at: (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path,
362
- match: (n) => Element.isElement(n) && n.type === TODO_LIST_NODE_ITEM_TYPE,
363
- });
364
- if (!todoItemEntry)
365
- return;
366
- const [todoItemNode, todoItemPath] = todoItemEntry;
367
- const [parentNode, parentPath] = Editor.parent(editor, todoItemPath);
368
- const text = Editor.string(editor, todoItemPath);
369
- const isEnd = Editor.isEnd(editor, editor.selection.anchor, todoItemPath);
370
- const isStart = Editor.isStart(editor, editor.selection.anchor, todoItemPath);
371
- const currentDepth = todoItemPath.length - 1;
372
- const isMaxDepth = currentDepth === 2;
373
- const isMinDepth = currentDepth === 1;
374
- if (hotkeys.isShiftEnter(event)) {
375
- event.preventDefault();
376
- editor.insertText('\n');
377
- return;
378
- }
379
- if (hotkeys.isEnter(event)) {
380
- event.preventDefault();
381
- if (text.trim() === '') {
382
- Transforms.unwrapNodes(editor, {
383
- match: (n) => Element.isElement(n) && n.type === parentNode.type,
384
- split: true,
385
- });
386
- const candidateNode = currentDepth > 1
387
- ? {
388
- id: generateId(),
389
- type: TODO_LIST_NODE_ITEM_TYPE,
390
- children: [{ text: '' }],
391
- options: { checked: false },
392
- }
393
- : defaultNode;
394
- Transforms.setNodes(editor, candidateNode, {
395
- at: editor.selection,
396
- });
397
- return;
398
- }
399
- if (!isEnd && !isStart) {
400
- Transforms.splitNodes(editor);
401
- Transforms.setNodes(editor, { id: generateId(), data: { checked: false } }, {
402
- match: (n) => Element.isElement(n) && n.type === TODO_LIST_NODE_ITEM_TYPE,
403
- });
404
- return;
405
- }
406
- const todoListItem = Object.assign(Object.assign({}, todoItemNode), { id: generateId(), children: [
407
- {
408
- text: '',
409
- },
410
- ], data: { checked: false } });
411
- Transforms.insertNodes(editor, todoListItem, { select: true });
412
- return;
413
- }
414
- if (hotkeys.isCmdEnter(event)) {
415
- event.preventDefault();
416
- Transforms.setNodes(editor, { data: { checked: todoItemNode.data.checked ? false : true } }, { at: todoItemPath, match: (n) => Element.isElement(n) && n.type === TODO_LIST_NODE_ITEM_TYPE });
417
- return;
418
- }
419
- if (hotkeys.isBackspace(event)) {
420
- const [, firstPath] = Editor.first(editor, parentPath);
421
- const isFirstListItemNode = Path.compare(editor.selection.anchor.path, firstPath) === 0;
422
- if (isStart && isFirstListItemNode) {
423
- event.preventDefault();
424
- Transforms.unwrapNodes(editor, {
425
- match: (n) => Element.isElement(n) && n.type === parentNode.type,
426
- split: true,
427
- });
428
- Transforms.setNodes(editor, defaultNode, {
429
- at: editor.selection,
430
- });
431
- }
432
- return;
433
- }
434
- if (hotkeys.isTab(event)) {
435
- event.preventDefault();
436
- if (isMaxDepth)
437
- return;
438
- const parentNestedNode = Object.assign(Object.assign({}, parentNode), { id: generateId(), type: parentNode.type, children: [TodoListItem.getPlugin.defineElement()] });
439
- Transforms.wrapNodes(editor, parentNestedNode, { at: todoItemPath });
440
- return;
441
- }
442
- if (hotkeys.isShiftTab(event)) {
443
- event.preventDefault();
444
- if (isMinDepth)
445
- return;
446
- Transforms.unwrapNodes(editor, {
447
- match: (n) => Element.isElement(n) && n.type === parentNode.type,
448
- split: true,
449
- });
450
- return;
451
- }
452
- },
453
- },
454
- options: {
455
- checked: false,
456
- },
457
- exports: {
458
- markdown: {
459
- serialize: (node, text) => {
460
- return `[${node.data.checked ? 'x' : ' '}] ${text}\n`;
461
- },
462
- },
463
- html: {
464
- serialize: (node, children) => {
465
- const isChecked = node.data.checked;
466
- return `<div>[${isChecked ? 'x' : ' '}] ${children}</div>`;
467
- },
468
- },
469
- },
470
- });
471
-
472
- var css_248z = ".TodoList-module_todoList{padding-left:18px}";
473
- var s = {"todoList":"TodoList-module_todoList"};
474
- styleInject(css_248z);
475
-
476
- const TodoListRender = ({ attributes, element, children, HTMLAttributes }) => {
477
- return (jsx("div", Object.assign({ draggable: false }, HTMLAttributes, attributes, { className: getElementClassname({ element, HTMLAttributes, className: s.todoList }) }, { children: children })));
478
- };
479
- const TODO_LIST_NODE_TYPE = 'todo-list';
480
- const TodoList = createYooptaPlugin({
481
- type: TODO_LIST_NODE_TYPE,
482
- renderer: (editor) => TodoListRender,
483
- childPlugin: TodoListItem,
484
- shortcut: '[]',
485
- defineElement: () => ({
486
- id: generateId(),
487
- type: 'todo-list',
488
- children: [TodoListItem.getPlugin.defineElement()],
489
- nodeType: 'block',
490
- data: { depth: 1, skipDrag: true, skipSettings: true },
491
- }),
492
- // extendEditor(editor) {
493
- // const { normalizeNode } = editor;
494
- // // editor.normalizeNode = (entry) => {
495
- // // const [node, path] = entry;
496
- // // if (Element.isElement(node) && node.type === TODO_LIST_NODE_TYPE) {
497
- // // if (node.children.length === 1 && !Element.isElement(node.children[0])) {
498
- // // Transforms.removeNodes(editor, {
499
- // // at: entry[1],
500
- // // match: (n) => Element.isElement(n) && n.type === TODO_LIST_NODE_TYPE,
501
- // // });
502
- // // }
503
- // // }
504
- // // normalizeNode(entry);
505
- // // };
506
- // return editor;
507
- // },
508
- createElement: (editor, elementData) => {
509
- var _a, _b;
510
- const todoListItemElement = TodoListItem.getPlugin.defineElement();
511
- Transforms.unwrapNodes(editor, {
512
- match: (n) => {
513
- var _a;
514
- return !Editor.isEditor(n) &&
515
- Element.isElement(n) &&
516
- n.type !== 'list-item' &&
517
- n.type !== 'todo-list-item' &&
518
- ((_a = n.data) === null || _a === void 0 ? void 0 : _a.depth) >= 1;
519
- },
520
- split: true,
521
- });
522
- Transforms.setNodes(editor, todoListItemElement, {
523
- at: (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor,
524
- });
525
- const todoList = Object.assign(Object.assign({}, TodoList.getPlugin.defineElement()), elementData);
526
- Transforms.wrapNodes(editor, todoList, {
527
- at: (_b = editor.selection) === null || _b === void 0 ? void 0 : _b.anchor,
528
- });
529
- },
530
- exports: {
531
- markdown: {
532
- serialize: (node, children) => `${children}`,
533
- },
534
- html: {
535
- serialize: (node, children) => {
536
- var _a;
537
- const paddingLeft = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.depth) ? node.data.depth * 15 : 15;
538
- return `<div style="padding-left: ${paddingLeft}px;">${children}</div>`;
539
- },
540
- },
541
- },
542
- options: { searchString: 'todo check list', displayLabel: 'TodoList' },
543
- });
544
-
545
- const Lists = {
546
- NumberedList,
547
- BulletedList,
548
- TodoList,
549
- };
550
-
551
- export { BulletedList, NumberedList, TodoList, Lists as default };
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import{createYooptaPlugin as i,generateId as n,getElementByPath as s,getElementClassname as r,cx as a}from"@yoopta/editor";import{Element as l,Editor as o,Transforms as d,Path as c}from"slate";import{ReactEditor as p}from"slate-react";function h(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}var m="mfUTTw6O";h(".mfUTTw6O{color:inherit;font-size:16px;letter-spacing:-.003em;line-height:28px;list-style-position:inside;padding-bottom:2px;padding-left:0;padding-top:2px;position:relative}.qvO-1a-q{align-items:center;display:flex;flex-grow:0;flex-shrink:0;justify-content:center;margin-right:2px;min-height:calc(1.5em + 6px);user-select:none;width:24px}.xPshFZ5Y{box-sizing:border-box;color:#000;display:inline;flex-shrink:0;font-size:16px;font-style:normal;font-weight:400;line-height:28px;min-width:28px;padding:0 6px 0 4px;word-break:break-word}");const u=({attributes:t,children:i,HTMLAttributes:n})=>e("li",Object.assign({className:m,draggable:!1},n,t,{children:i}));u.displayName="ListItem";const g="list-item",f=i({type:g,renderer:e=>u,extendEditor(e){const{normalizeNode:t}=e;return e.normalizeNode=i=>{const[n,s]=i;if(l.isElement(n)&&n.type===g){const t=n.children[0];l.isElement(t)&&!o.isInline(e,t)&&d.unwrapNodes(e,{at:s.concat(0)})}t(i)},e},shortcut:"-",defineElement:()=>({id:n(),type:"list-item",children:[{text:""}],nodeType:"block"}),placeholder:null,events:{onKeyDown:(e,{hotkeys:t,defaultNode:i})=>r=>{if(!e.selection)return;if(s(e,e.selection.anchor.path,"lowest").type!==g)return;const a=o.above(e,{at:e.selection.anchor,match:e=>l.isElement(e)&&e.type===g});if(!a)return;const{anchor:p}=e.selection,[h,m]=a,[u,y]=o.parent(e,m),b=o.string(e,m),v=o.isEnd(e,p,m),x=o.isStart(e,p,m),N=m.length-1,k=2===N,E=1===N;if(t.isShiftEnter(r))return r.preventDefault(),void e.insertText("\n");if(t.isEnter(r)){if(r.preventDefault(),""===b.trim()){d.unwrapNodes(e,{match:e=>!o.isEditor(e)&&l.isElement(e)&&e.type===u.type,split:!0});const t=N>1?{id:n(),type:g,children:[{text:""}]}:i;return void d.setNodes(e,t,{at:e.selection})}if(!v&&!x)return d.splitNodes(e),void d.setNodes(e,{id:n()});const t=Object.assign(Object.assign({},h),{id:n(),children:[{text:""}]});d.insertNodes(e,t)}else if(t.isBackspace(r)){const[,t]=o.first(e,y),n=0===c.compare(e.selection.anchor.path,t);x&&n&&(r.preventDefault(),d.unwrapNodes(e,{match:e=>l.isElement(e)&&e.type===u.type,split:!0}),d.setNodes(e,i,{at:e.selection}))}else{if(t.isTab(r)){if(r.preventDefault(),k)return;const t=Object.assign(Object.assign({},u),{id:n(),type:u.type,children:[f.getPlugin.defineElement()]});return d.wrapNodes(e,t,{at:m}),void d.setNodes(e,{data:{depth:N+1,skipDrag:!0}},{match:e=>l.isElement(e)&&e.type===u.type})}if(t.isShiftTab(r)){if(r.preventDefault(),E)return;return d.unwrapNodes(e,{match:e=>l.isElement(e)&&e.type===u.type,split:!0}),void d.setNodes(e,{data:{depth:N-1,skipDrag:!0}},{match:e=>l.isElement(e)&&e.type===u.type})}}}},exports:{markdown:{serialize:(e,t)=>`- ${t}`},html:{serialize:(e,t)=>(console.log("children",t),`<li>${t}</li>`),deserialize:{nodeName:"LI"}}}});var y="cN2XzHcO";h(".cN2XzHcO{margin:2px 0;padding-left:18px}");const b=({attributes:t,children:i,element:n,HTMLAttributes:s})=>e("ol",Object.assign({draggable:!1},s,t,{className:r({element:n,HTMLAttributes:s,className:y})},{children:i})),v=i({type:"numbered-list",renderer:e=>b,childPlugin:f,shortcut:"1.",defineElement:()=>({id:n(),type:"numbered-list",children:[f.getPlugin.defineElement()],nodeType:"block",data:{depth:1,skipDrag:!0,skipSettings:!0}}),createElement:(e,t)=>{var i,n;const s=f.getPlugin.defineElement();d.unwrapNodes(e,{match:e=>{var t;return!o.isEditor(e)&&l.isElement(e)&&"list-item"!==e.type&&"todo-list-item"!==e.type&&(null===(t=e.data)||void 0===t?void 0:t.depth)>=1},split:!0}),d.setNodes(e,s,{at:null===(i=e.selection)||void 0===i?void 0:i.anchor});const r=Object.assign(Object.assign({},v.getPlugin.defineElement()),t);d.wrapNodes(e,r,{at:null===(n=e.selection)||void 0===n?void 0:n.anchor})},exports:{markdown:{serialize:(e,t)=>`${t}\n`},html:{serialize:(e,t)=>{var i;return`<ol style="padding-left: ${(null===(i=e.data)||void 0===i?void 0:i.depth)?15*e.data.depth:15}px;">${t}</ol>`},deserialize:{nodeName:"OL"}}},options:{searchString:"order number list",displayLabel:"NumberedList"}});var x="wVFRrWWa";h(".wVFRrWWa{margin:2px 0;padding-left:18px}");const N=({attributes:t,children:i,element:n,HTMLAttributes:s})=>e("ul",Object.assign({draggable:!1},s,{className:r({element:n,HTMLAttributes:s,className:x})},t,{children:i})),k=i({type:"bulleted-list",renderer:e=>N,shortcut:"-",childPlugin:f,defineElement:()=>({id:n(),type:"bulleted-list",children:[f.getPlugin.defineElement()],nodeType:"block",data:{depth:1,skipDrag:!0,skipSettings:!0}}),createElement:(e,t)=>{var i,n;const s=f.getPlugin.defineElement();d.unwrapNodes(e,{match:e=>{var t;return!o.isEditor(e)&&l.isElement(e)&&"list-item"!==e.type&&"todo-list-item"!==e.type&&(null===(t=e.data)||void 0===t?void 0:t.depth)>=1},split:!0}),d.setNodes(e,s,{at:null===(i=e.selection)||void 0===i?void 0:i.anchor});const r=Object.assign(Object.assign({},k.getPlugin.defineElement()),t);d.wrapNodes(e,r,{at:null===(n=e.selection)||void 0===n?void 0:n.anchor})},exports:{markdown:{serialize:(e,t)=>`- ${t}`},html:{serialize:(e,t)=>{var i;return`<ul style="padding-left: ${(null===(i=e.data)||void 0===i?void 0:i.depth)?15*e.data.depth:15}px;">${t}</ul>`},deserialize:{nodeName:"UL"}}},options:{searchString:"bullet list",displayLabel:"BulletedList"}});var E="zLPFpe0C",w="cJeUAnzK",T="YT2kDg7r",z="GzvUWhTl",O="YiyH9UVU";h('.zLPFpe0C{fill:inherit;align-items:flex-start;color:#292929;color:inherit;display:flex;font-size:16px;letter-spacing:-.003em;line-height:24px;margin-bottom:1px;margin-top:1px;padding-bottom:2px;padding-left:2px;padding-top:2px;width:100%}.cJeUAnzK{text-decoration:line-through}.YT2kDg7r{align-items:center;display:flex;flex-grow:0;flex-shrink:0;justify-content:center;margin-right:2px;min-height:30px;user-select:none;width:24px}.YT2kDg7r+.YT2kDg7r{margin-top:1em}.GzvUWhTl{align-items:center;-webkit-appearance:none;appearance:none;border:.1em solid;color:currentColor;cursor:pointer;display:flex;flex-grow:0;flex-shrink:0;height:1.15em;height:16px;place-content:center;justify-content:center;position:relative;transition:background .2s ease-out 0s;width:1.15em;width:16px}.GzvUWhTl:before{background-color:CanvasText;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);color:inherit;content:"";height:.65em;transform:scale(0);transform-origin:bottom left;transition:transform .12s ease-in-out;width:.65em}.GzvUWhTl:checked:before{transform:scale(1)}.YiyH9UVU{caret-color:#37352f;max-width:100%;min-width:1px;opacity:1;padding:3px 2px;text-align:left;white-space:pre-wrap;word-break:break-word}');const j="todo-list-item",L=i({type:j,renderer:i=>function({attributes:n,children:s,element:r,HTMLAttributes:o}){const c=r.data.checked;return t("div",Object.assign({draggable:!1},n,o,{className:a(E,{[w]:c})},{children:[e("label",Object.assign({className:T,contentEditable:!1,style:{userSelect:"none"}},{children:e("input",{type:"checkbox",checked:c,className:z,onChange:e=>{const t=p.findPath(i,r);d.setNodes(i,{data:{checked:e.target.checked}},{at:t,match:e=>l.isElement(e)&&e.type===j})}})})),e("span",Object.assign({className:O},{children:s}))]}))},placeholder:null,defineElement:()=>({id:n(),type:"todo-list-item",children:[{text:""}],nodeType:"block",data:{checked:!1}}),events:{onKeyDown:(e,{hotkeys:t,defaultNode:i})=>r=>{var a;if(!e.selection)return;if(s(e,e.selection.anchor.path,"lowest").type!==j)return;const p=o.above(e,{at:null===(a=e.selection)||void 0===a?void 0:a.anchor.path,match:e=>l.isElement(e)&&e.type===j});if(!p)return;const[h,m]=p,[u,g]=o.parent(e,m),f=o.string(e,m),y=o.isEnd(e,e.selection.anchor,m),b=o.isStart(e,e.selection.anchor,m),v=m.length-1,x=2===v,N=1===v;if(t.isShiftEnter(r))return r.preventDefault(),void e.insertText("\n");if(t.isEnter(r)){if(r.preventDefault(),""===f.trim()){d.unwrapNodes(e,{match:e=>l.isElement(e)&&e.type===u.type,split:!0});const t=v>1?{id:n(),type:j,children:[{text:""}],options:{checked:!1}}:i;return void d.setNodes(e,t,{at:e.selection})}if(!y&&!b)return d.splitNodes(e),void d.setNodes(e,{id:n(),data:{checked:!1}},{match:e=>l.isElement(e)&&e.type===j});const t=Object.assign(Object.assign({},h),{id:n(),children:[{text:""}],data:{checked:!1}});d.insertNodes(e,t,{select:!0})}else{if(t.isCmdEnter(r))return r.preventDefault(),void d.setNodes(e,{data:{checked:!h.data.checked}},{at:m,match:e=>l.isElement(e)&&e.type===j});if(t.isBackspace(r)){const[,t]=o.first(e,g),n=0===c.compare(e.selection.anchor.path,t);b&&n&&(r.preventDefault(),d.unwrapNodes(e,{match:e=>l.isElement(e)&&e.type===u.type,split:!0}),d.setNodes(e,i,{at:e.selection}))}else if(t.isTab(r)){if(r.preventDefault(),x)return;const t=Object.assign(Object.assign({},u),{id:n(),type:u.type,children:[L.getPlugin.defineElement()]});d.wrapNodes(e,t,{at:m})}else if(t.isShiftTab(r)){if(r.preventDefault(),N)return;d.unwrapNodes(e,{match:e=>l.isElement(e)&&e.type===u.type,split:!0})}else;}}},options:{checked:!1},exports:{markdown:{serialize:(e,t)=>`[${e.data.checked?"x":" "}] ${t}\n`},html:{serialize:(e,t)=>`<div>[${e.data.checked?"x":" "}] ${t}</div>`}}});var D="Mzo1TbSt";h(".Mzo1TbSt{padding-left:18px}");const P=({attributes:t,element:i,children:n,HTMLAttributes:s})=>e("div",Object.assign({draggable:!1},s,t,{className:r({element:i,HTMLAttributes:s,className:D})},{children:n})),S=i({type:"todo-list",renderer:e=>P,childPlugin:L,shortcut:"[]",defineElement:()=>({id:n(),type:"todo-list",children:[L.getPlugin.defineElement()],nodeType:"block",data:{depth:1,skipDrag:!0,skipSettings:!0}}),createElement:(e,t)=>{var i,n;const s=L.getPlugin.defineElement();d.unwrapNodes(e,{match:e=>{var t;return!o.isEditor(e)&&l.isElement(e)&&"list-item"!==e.type&&"todo-list-item"!==e.type&&(null===(t=e.data)||void 0===t?void 0:t.depth)>=1},split:!0}),d.setNodes(e,s,{at:null===(i=e.selection)||void 0===i?void 0:i.anchor});const r=Object.assign(Object.assign({},S.getPlugin.defineElement()),t);d.wrapNodes(e,r,{at:null===(n=e.selection)||void 0===n?void 0:n.anchor})},exports:{markdown:{serialize:(e,t)=>`${t}`},html:{serialize:(e,t)=>{var i;return`<div style="padding-left: ${(null===(i=e.data)||void 0===i?void 0:i.depth)?15*e.data.depth:15}px;">${t}</div>`}}},options:{searchString:"todo check list",displayLabel:"TodoList"}}),$={NumberedList:v,BulletedList:k,TodoList:S};export{k as BulletedList,v as NumberedList,S as TodoList,$ as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yoopta/lists",
3
- "version": "1.9.12-rc",
3
+ "version": "1.9.13-rc",
4
4
  "description": "> TODO: description",
5
5
  "author": "Darginec05 <devopsbanda@gmail.com>",
6
6
  "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",
@@ -14,11 +14,11 @@
14
14
  "dist/"
15
15
  ],
16
16
  "peerDependencies": {
17
- "@yoopta/editor": "1.9.7-rc",
17
+ "@yoopta/editor": "1.9.17-rc",
18
18
  "react": ">=17.0.2",
19
19
  "react-dom": ">=17.0.2",
20
20
  "slate": ">=0.72.3",
21
- "slate-react": ">=0.72.4"
21
+ "slate-react": ">=0.95.0"
22
22
  },
23
23
  "publishConfig": {
24
24
  "registry": "https://registry.yarnpkg.com"