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