@yoopta/lists 1.9.6-rc → 1.9.8-rc

package/dist/index.js

@@ -1 +1,535 @@
-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 l}from"@yoopta/editor";import{Editor as a,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})=>r=>{if(!e.selection)return;if(s(e,e.selection.anchor.path,"lowest").type!==g)return;const l=a.above(e,{at:e.selection.anchor,match:e=>o.isElement(e)&&e.type===g});if(!l)return;const{anchor:p}=e.selection,[h,m]=l,[u,y]=a.parent(e,m),v=a.string(e,m),b=a.isEnd(e,p,m),x=a.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(),""===v.trim()){d.unwrapNodes(e,{match:e=>!a.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(!b&&!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]=a.first(e,y),n=0===c.compare(e.selection.anchor.path,t);x&&n&&(r.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(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=>o.isElement(e)&&e.type===u.type})}if(t.isShiftTab(r)){if(r.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 v=({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})),b=i({type:"numbered-list",renderer:e=>v,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=>{var t,i;const n=f.getPlugin.defineElement();d.unwrapNodes(e,{match:e=>{var t;return!a.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,n,{at:null===(t=e.selection)||void 0===t?void 0:t.anchor});const s=b.getPlugin.defineElement();d.wrapNodes(e,s,{at:null===(i=e.selection)||void 0===i?void 0:i.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=>{var t,i;const n=f.getPlugin.defineElement();d.unwrapNodes(e,{match:e=>{var t;return!a.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,n,{at:null===(t=e.selection)||void 0===t?void 0:t.anchor});const s=k.getPlugin.defineElement();d.wrapNodes(e,s,{at:null===(i=e.selection)||void 0===i?void 0:i.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",L="GzvUWhTl",D="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 O="todo-list-item",j=i({type:O,renderer:i=>function({attributes:n,children:s,element:r,HTMLAttributes:a}){const c=r.data.checked;return t("div",Object.assign({draggable:!1},n,a,{className:l(w,{[T]:c})},{children:[e("label",Object.assign({className:z,contentEditable:!1,style:{userSelect:"none"}},{children:e("input",{type:"checkbox",checked:c,className:L,onChange:e=>{const t=p.findPath(i,r);d.setNodes(i,{data:{checked:e.target.checked}},{at:t,match:e=>o.isElement(e)&&e.type===O})}})})),e("span",Object.assign({className:D},{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 l;if(!e.selection)return;if(s(e,e.selection.anchor.path,"lowest").type!==O)return;const p=a.above(e,{at:null===(l=e.selection)||void 0===l?void 0:l.anchor.path,match:e=>o.isElement(e)&&e.type===O});if(!p)return;const[h,m]=p,[u,g]=a.parent(e,m),f=a.string(e,m),y=a.isEnd(e,e.selection.anchor,m),v=a.isStart(e,e.selection.anchor,m),b=m.length-1,x=2===b,N=1===b;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=>o.isElement(e)&&e.type===u.type,split:!0});const t=b>1?{id:n(),type:O,children:[{text:""}],options:{checked:!1}}:i;return void d.setNodes(e,t,{at:e.selection})}if(!y&&!v)return d.splitNodes(e),void d.setNodes(e,{id:n(),data:{checked:!1}},{match:e=>o.isElement(e)&&e.type===O});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=>o.isElement(e)&&e.type===O});if(t.isBackspace(r)){const[,t]=a.first(e,g),n=0===c.compare(e.selection.anchor.path,t);v&&n&&(r.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(r)){if(r.preventDefault(),x)return;const t=Object.assign(Object.assign({},u),{id:n(),type:u.type,children:[j.getPlugin.defineElement()]});d.wrapNodes(e,t,{at:m})}else if(t.isShiftTab(r)){if(r.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:r({element:i,HTMLAttributes:s,className:E})},{children:n})),S=i({type:"todo-list",renderer:e=>P,childPlugin:j,shortcut:"[]",defineElement:()=>({id:n(),type:"todo-list",children:[j.getPlugin.defineElement()],nodeType:"block",data:{depth:1,skipDrag:!0,skipSettings:!0}}),extendEditor:e=>e,createElement:e=>{var t,i;const n=j.getPlugin.defineElement();d.unwrapNodes(e,{match:e=>{var t;return!a.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,n,{at:null===(t=e.selection)||void 0===t?void 0:t.anchor});const s=S.getPlugin.defineElement();d.wrapNodes(e,s,{at:null===(i=e.selection)||void 0===i?void 0:i.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:b,BulletedList:k,TodoList:S};export{k as BulletedList,b as NumberedList,S as TodoList,$ as default};
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createYooptaPlugin, generateId, getElementByPath, getElementClassname, cx } from '@yoopta/editor';
+import { Editor, Element, Transforms, Path } from 'slate';
+import { ReactEditor } from 'slate-react';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+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}";
+var s$4 = {"listItem":"ListItem-module_listItem","dotWrapper":"ListItem-module_dotWrapper","dot":"ListItem-module_dot"};
+styleInject(css_248z$4);
+
+const ListItemRender = ({ attributes, children, HTMLAttributes }) => {
+    return (jsx("li", Object.assign({ className: s$4.listItem, draggable: false }, HTMLAttributes, attributes, { children: children })));
+};
+ListItemRender.displayName = 'ListItem';
+const LIST_ITEM_NODE_TYPE = 'list-item';
+const ListItemList = createYooptaPlugin({
+    type: LIST_ITEM_NODE_TYPE,
+    renderer: (editor) => ListItemRender,
+    shortcut: '-',
+    defineElement: () => ({
+        id: generateId(),
+        type: 'list-item',
+        children: [{ text: '' }],
+        nodeType: 'block',
+    }),
+    placeholder: null,
+    events: {
+        onKeyDown: (editor, { hotkeys, defaultNode }) => (event) => {
+            if (!editor.selection)
+                return;
+            const currentNode = getElementByPath(editor, editor.selection.anchor.path, 'lowest');
+            if (currentNode.type !== LIST_ITEM_NODE_TYPE)
+                return;
+            const nodeEntry = Editor.above(editor, {
+                at: editor.selection.anchor,
+                match: (n) => Element.isElement(n) && n.type === LIST_ITEM_NODE_TYPE,
+            });
+            if (!nodeEntry)
+                return;
+            const { anchor } = editor.selection;
+            const [listItemNode, listItemPath] = nodeEntry;
+            const [parentNode, parentPath] = Editor.parent(editor, listItemPath);
+            const text = Editor.string(editor, listItemPath);
+            const isEnd = Editor.isEnd(editor, anchor, listItemPath);
+            const isStart = Editor.isStart(editor, anchor, listItemPath);
+            const currentDepth = listItemPath.length - 1;
+            const isMaxDepth = currentDepth === 2;
+            const isMinDepth = currentDepth === 1;
+            if (hotkeys.isShiftEnter(event)) {
+                event.preventDefault();
+                editor.insertText('\n');
+                return;
+            }
+            if (hotkeys.isEnter(event)) {
+                event.preventDefault();
+                if (text.trim() === '') {
+                    Transforms.unwrapNodes(editor, {
+                        match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.type === parentNode.type,
+                        split: true,
+                    });
+                    const candidateNode = currentDepth > 1
+                        ? { id: generateId(), type: LIST_ITEM_NODE_TYPE, children: [{ text: '' }] }
+                        : defaultNode;
+                    Transforms.setNodes(editor, candidateNode, {
+                        at: editor.selection,
+                    });
+                    return;
+                }
+                if (!isEnd && !isStart) {
+                    Transforms.splitNodes(editor);
+                    Transforms.setNodes(editor, { id: generateId() });
+                    return;
+                }
+                const listItem = Object.assign(Object.assign({}, listItemNode), { id: generateId(), children: [
+                        {
+                            text: '',
+                        },
+                    ] });
+                Transforms.insertNodes(editor, listItem);
+                return;
+            }
+            if (hotkeys.isBackspace(event)) {
+                const [, firstPath] = Editor.first(editor, parentPath);
+                const isFirstListItemNode = Path.compare(editor.selection.anchor.path, firstPath) === 0;
+                if (isStart && isFirstListItemNode) {
+                    event.preventDefault();
+                    Transforms.unwrapNodes(editor, {
+                        match: (n) => Element.isElement(n) && n.type === parentNode.type,
+                        split: true,
+                    });
+                    Transforms.setNodes(editor, defaultNode, {
+                        at: editor.selection,
+                    });
+                }
+                return;
+            }
+            if (hotkeys.isTab(event)) {
+                event.preventDefault();
+                if (isMaxDepth)
+                    return;
+                const parentNestedNode = Object.assign(Object.assign({}, parentNode), { id: generateId(), type: parentNode.type, children: [ListItemList.getPlugin.defineElement()] });
+                Transforms.wrapNodes(editor, parentNestedNode, { at: listItemPath });
+                Transforms.setNodes(editor, { data: { depth: currentDepth + 1, skipDrag: true } }, {
+                    match: (n) => Element.isElement(n) && n.type === parentNode.type,
+                });
+                return;
+            }
+            if (hotkeys.isShiftTab(event)) {
+                event.preventDefault();
+                if (isMinDepth)
+                    return;
+                Transforms.unwrapNodes(editor, {
+                    match: (n) => Element.isElement(n) && n.type === parentNode.type,
+                    // at: listItemPath,
+                    split: true,
+                });
+                Transforms.setNodes(editor, { data: { depth: currentDepth - 1, skipDrag: true } }, {
+                    match: (n) => Element.isElement(n) && n.type === parentNode.type,
+                });
+                return;
+            }
+        },
+    },
+    exports: {
+        markdown: {
+            serialize: (node, text) => `- ${text}`,
+        },
+        html: {
+            serialize: (node, children) => {
+                console.log('children', children);
+                return `<li>${children}</li>`;
+            },
+            deserialize: {
+                nodeName: 'LI',
+            },
+        },
+    },
+});
+
+var css_248z$3 = ".NumberedList-module_list{margin:2px 0;padding-left:18px}";
+var s$3 = {"list":"NumberedList-module_list"};
+styleInject(css_248z$3);
+
+const NumberedListRender = ({ attributes, children, element, HTMLAttributes, }) => {
+    return (jsx("ol", Object.assign({ draggable: false }, HTMLAttributes, attributes, { className: getElementClassname({ element, HTMLAttributes, className: s$3.list }) }, { children: children })));
+};
+const NUMBERED_LIST_NODE_TYPE = 'numbered-list';
+const NumberedList = createYooptaPlugin({
+    type: NUMBERED_LIST_NODE_TYPE,
+    renderer: (editor) => NumberedListRender,
+    childPlugin: ListItemList,
+    shortcut: '1.',
+    defineElement: () => ({
+        id: generateId(),
+        type: 'numbered-list',
+        children: [ListItemList.getPlugin.defineElement()],
+        nodeType: 'block',
+        data: { depth: 1, skipDrag: true, skipSettings: true },
+    }),
+    createElement: (editor, elementData) => {
+        var _a, _b;
+        const listItem = ListItemList.getPlugin.defineElement();
+        Transforms.unwrapNodes(editor, {
+            match: (n) => {
+                var _a;
+                return !Editor.isEditor(n) &&
+                    Element.isElement(n) &&
+                    n.type !== 'list-item' &&
+                    n.type !== 'todo-list-item' &&
+                    ((_a = n.data) === null || _a === void 0 ? void 0 : _a.depth) >= 1;
+            },
+            split: true,
+        });
+        Transforms.setNodes(editor, listItem, {
+            at: (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor,
+        });
+        const numberedList = Object.assign(Object.assign({}, NumberedList.getPlugin.defineElement()), elementData);
+        Transforms.wrapNodes(editor, numberedList, {
+            at: (_b = editor.selection) === null || _b === void 0 ? void 0 : _b.anchor,
+        });
+    },
+    exports: {
+        markdown: {
+            serialize: (node, text) => `${text}\n`,
+        },
+        html: {
+            serialize: (node, children) => {
+                var _a;
+                const paddingLeft = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.depth) ? node.data.depth * 15 : 15;
+                return `<ol style="padding-left: ${paddingLeft}px;">${children}</ol>`;
+            },
+            deserialize: {
+                nodeName: 'OL',
+            },
+        },
+    },
+    options: { searchString: 'order number list', displayLabel: 'NumberedList' },
+});
+
+var css_248z$2 = ".BulletedList-module_list{margin:2px 0;padding-left:18px}";
+var s$2 = {"list":"BulletedList-module_list"};
+styleInject(css_248z$2);
+
+const BulletedListRender = ({ attributes, children, element, HTMLAttributes, }) => {
+    return (jsx("ul", Object.assign({ draggable: false }, HTMLAttributes, { className: getElementClassname({ element, HTMLAttributes, className: s$2.list }) }, attributes, { children: children })));
+};
+const BULLETED_LIST_NODE_TYPE = 'bulleted-list';
+const BulletedList = createYooptaPlugin({
+    type: BULLETED_LIST_NODE_TYPE,
+    renderer: (editor) => BulletedListRender,
+    // [TODO] - fix for nested items
+    shortcut: '-',
+    childPlugin: ListItemList,
+    defineElement: () => ({
+        id: generateId(),
+        type: 'bulleted-list',
+        children: [ListItemList.getPlugin.defineElement()],
+        nodeType: 'block',
+        data: { depth: 1, skipDrag: true, skipSettings: true },
+    }),
+    // extendEditor(editor) {
+    //   const { normalizeNode } = editor;
+    //   editor.normalizeNode = (entry) => {
+    //     const [node] = entry;
+    //     if (Element.isElement(node) && node.type === BULLETED_LIST_NODE_TYPE) {
+    //       // console.log('Node.child(node, 0)', Node.child(node, 0));
+    //       // if (Node.child(node, 0)?.text.length === 0) {
+    //       //   Transforms.removeNodes(editor, {
+    //       //     at: entry[1],
+    //       //     match: (n) => Element.isElement(n) && n.type === BULLETED_LIST_NODE_TYPE,
+    //       //   });
+    //       // }
+    //     }
+    //     normalizeNode(entry);
+    //   };
+    //   return editor;
+    // },
+    createElement: (editor, elementData) => {
+        var _a, _b;
+        const listItem = ListItemList.getPlugin.defineElement();
+        Transforms.unwrapNodes(editor, {
+            match: (n) => {
+                var _a;
+                return !Editor.isEditor(n) &&
+                    Element.isElement(n) &&
+                    n.type !== 'list-item' &&
+                    n.type !== 'todo-list-item' &&
+                    ((_a = n.data) === null || _a === void 0 ? void 0 : _a.depth) >= 1;
+            },
+            split: true,
+        });
+        Transforms.setNodes(editor, listItem, {
+            at: (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor,
+        });
+        const bulletedList = Object.assign(Object.assign({}, BulletedList.getPlugin.defineElement()), elementData);
+        Transforms.wrapNodes(editor, bulletedList, {
+            at: (_b = editor.selection) === null || _b === void 0 ? void 0 : _b.anchor,
+        });
+    },
+    exports: {
+        markdown: {
+            serialize: (node, text) => `- ${text}`,
+        },
+        html: {
+            serialize: (node, children) => {
+                var _a;
+                const paddingLeft = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.depth) ? node.data.depth * 15 : 15;
+                return `<ul style="padding-left: ${paddingLeft}px;">${children}</ul>`;
+            },
+            deserialize: {
+                nodeName: 'UL',
+            },
+        },
+    },
+    options: {
+        searchString: 'bullet list',
+        displayLabel: 'BulletedList',
+    },
+});
+
+var css_248z$1 = ".TodoList-module_todoList{padding-left:18px}";
+var s$1 = {"todoList":"TodoList-module_todoList"};
+styleInject(css_248z$1);
+
+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}";
+var s = {"todoListItem":"TodoListItem-module_todoListItem","checked":"TodoListItem-module_checked","label":"TodoListItem-module_label","input":"TodoListItem-module_input","children":"TodoListItem-module_children"};
+styleInject(css_248z);
+
+const TODO_LIST_NODE_ITEM_TYPE = 'todo-list-item';
+const TodoListItemRender = (editor) => {
+    return function TodoListItemRender({ attributes, children, element, HTMLAttributes, }) {
+        const onChange = (event) => {
+            const path = ReactEditor.findPath(editor, element);
+            Transforms.setNodes(editor, { data: { checked: event.target.checked } }, {
+                at: path,
+                match: (n) => Element.isElement(n) && n.type === TODO_LIST_NODE_ITEM_TYPE,
+            });
+        };
+        const isChecked = element.data.checked;
+        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 }))] })));
+    };
+};
+const TodoListItem = createYooptaPlugin({
+    type: TODO_LIST_NODE_ITEM_TYPE,
+    renderer: TodoListItemRender,
+    placeholder: null,
+    defineElement: () => ({
+        id: generateId(),
+        type: 'todo-list-item',
+        children: [{ text: '' }],
+        nodeType: 'block',
+        data: { checked: false },
+    }),
+    events: {
+        onKeyDown: (editor, { hotkeys, defaultNode }) => (event) => {
+            var _a;
+            if (!editor.selection)
+                return;
+            const node = getElementByPath(editor, editor.selection.anchor.path, 'lowest');
+            if (node.type !== TODO_LIST_NODE_ITEM_TYPE)
+                return;
+            const todoItemEntry = Editor.above(editor, {
+                at: (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path,
+                match: (n) => Element.isElement(n) && n.type === TODO_LIST_NODE_ITEM_TYPE,
+            });
+            if (!todoItemEntry)
+                return;
+            const [todoItemNode, todoItemPath] = todoItemEntry;
+            const [parentNode, parentPath] = Editor.parent(editor, todoItemPath);
+            const text = Editor.string(editor, todoItemPath);
+            const isEnd = Editor.isEnd(editor, editor.selection.anchor, todoItemPath);
+            const isStart = Editor.isStart(editor, editor.selection.anchor, todoItemPath);
+            const currentDepth = todoItemPath.length - 1;
+            const isMaxDepth = currentDepth === 2;
+            const isMinDepth = currentDepth === 1;
+            if (hotkeys.isShiftEnter(event)) {
+                event.preventDefault();
+                editor.insertText('\n');
+                return;
+            }
+            if (hotkeys.isEnter(event)) {
+                event.preventDefault();
+                if (text.trim() === '') {
+                    Transforms.unwrapNodes(editor, {
+                        match: (n) => Element.isElement(n) && n.type === parentNode.type,
+                        split: true,
+                    });
+                    const candidateNode = currentDepth > 1
+                        ? {
+                            id: generateId(),
+                            type: TODO_LIST_NODE_ITEM_TYPE,
+                            children: [{ text: '' }],
+                            options: { checked: false },
+                        }
+                        : defaultNode;
+                    Transforms.setNodes(editor, candidateNode, {
+                        at: editor.selection,
+                    });
+                    return;
+                }
+                if (!isEnd && !isStart) {
+                    Transforms.splitNodes(editor);
+                    Transforms.setNodes(editor, { id: generateId(), data: { checked: false } }, {
+                        match: (n) => Element.isElement(n) && n.type === TODO_LIST_NODE_ITEM_TYPE,
+                    });
+                    return;
+                }
+                const todoListItem = Object.assign(Object.assign({}, todoItemNode), { id: generateId(), children: [
+                        {
+                            text: '',
+                        },
+                    ], data: { checked: false } });
+                Transforms.insertNodes(editor, todoListItem, { select: true });
+                return;
+            }
+            if (hotkeys.isCmdEnter(event)) {
+                event.preventDefault();
+                Transforms.setNodes(editor, { data: { checked: todoItemNode.data.checked ? false : true } }, { at: todoItemPath, match: (n) => Element.isElement(n) && n.type === TODO_LIST_NODE_ITEM_TYPE });
+                return;
+            }
+            if (hotkeys.isBackspace(event)) {
+                const [, firstPath] = Editor.first(editor, parentPath);
+                const isFirstListItemNode = Path.compare(editor.selection.anchor.path, firstPath) === 0;
+                if (isStart && isFirstListItemNode) {
+                    event.preventDefault();
+                    Transforms.unwrapNodes(editor, {
+                        match: (n) => Element.isElement(n) && n.type === parentNode.type,
+                        split: true,
+                    });
+                    Transforms.setNodes(editor, defaultNode, {
+                        at: editor.selection,
+                    });
+                }
+                return;
+            }
+            if (hotkeys.isTab(event)) {
+                event.preventDefault();
+                if (isMaxDepth)
+                    return;
+                const parentNestedNode = Object.assign(Object.assign({}, parentNode), { id: generateId(), type: parentNode.type, children: [TodoListItem.getPlugin.defineElement()] });
+                Transforms.wrapNodes(editor, parentNestedNode, { at: todoItemPath });
+                return;
+            }
+            if (hotkeys.isShiftTab(event)) {
+                event.preventDefault();
+                if (isMinDepth)
+                    return;
+                Transforms.unwrapNodes(editor, {
+                    match: (n) => Element.isElement(n) && n.type === parentNode.type,
+                    split: true,
+                });
+                return;
+            }
+        },
+    },
+    options: {
+        checked: false,
+    },
+    exports: {
+        markdown: {
+            serialize: (node, text) => {
+                return `[${node.data.checked ? 'x' : ' '}] ${text}\n`;
+            },
+        },
+        html: {
+            serialize: (node, children) => {
+                const isChecked = node.data.checked;
+                return `<div>[${isChecked ? 'x' : ' '}] ${children}</div>`;
+            },
+        },
+    },
+});
+
+const TodoListRender = ({ attributes, element, children, HTMLAttributes }) => {
+    return (jsx("div", Object.assign({ draggable: false }, HTMLAttributes, attributes, { className: getElementClassname({ element, HTMLAttributes, className: s$1.todoList }) }, { children: children })));
+};
+const TODO_LIST_NODE_TYPE = 'todo-list';
+const TodoList = createYooptaPlugin({
+    type: TODO_LIST_NODE_TYPE,
+    renderer: (editor) => TodoListRender,
+    childPlugin: TodoListItem,
+    shortcut: '[]',
+    defineElement: () => ({
+        id: generateId(),
+        type: 'todo-list',
+        children: [TodoListItem.getPlugin.defineElement()],
+        nodeType: 'block',
+        data: { depth: 1, skipDrag: true, skipSettings: true },
+    }),
+    // extendEditor(editor) {
+    //   const { normalizeNode } = editor;
+    //   // editor.normalizeNode = (entry) => {
+    //   //   const [node, path] = entry;
+    //   //   if (Element.isElement(node) && node.type === TODO_LIST_NODE_TYPE) {
+    //   //     if (node.children.length === 1 && !Element.isElement(node.children[0])) {
+    //   //       Transforms.removeNodes(editor, {
+    //   //         at: entry[1],
+    //   //         match: (n) => Element.isElement(n) && n.type === TODO_LIST_NODE_TYPE,
+    //   //       });
+    //   //     }
+    //   //   }
+    //   //   normalizeNode(entry);
+    //   // };
+    //   return editor;
+    // },
+    createElement: (editor, elementData) => {
+        var _a, _b;
+        const todoListItemElement = TodoListItem.getPlugin.defineElement();
+        Transforms.unwrapNodes(editor, {
+            match: (n) => {
+                var _a;
+                return !Editor.isEditor(n) &&
+                    Element.isElement(n) &&
+                    n.type !== 'list-item' &&
+                    n.type !== 'todo-list-item' &&
+                    ((_a = n.data) === null || _a === void 0 ? void 0 : _a.depth) >= 1;
+            },
+            split: true,
+        });
+        Transforms.setNodes(editor, todoListItemElement, {
+            at: (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor,
+        });
+        const todoList = Object.assign(Object.assign({}, TodoList.getPlugin.defineElement()), elementData);
+        Transforms.wrapNodes(editor, todoList, {
+            at: (_b = editor.selection) === null || _b === void 0 ? void 0 : _b.anchor,
+        });
+    },
+    exports: {
+        markdown: {
+            serialize: (node, children) => `${children}`,
+        },
+        html: {
+            serialize: (node, children) => {
+                var _a;
+                const paddingLeft = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.depth) ? node.data.depth * 15 : 15;
+                return `<div style="padding-left: ${paddingLeft}px;">${children}</div>`;
+            },
+        },
+    },
+    options: { searchString: 'todo check list', displayLabel: 'TodoList' },
+});
+
+const Lists = {
+    NumberedList,
+    BulletedList,
+    TodoList,
+};
+
+export { BulletedList, NumberedList, TodoList, Lists as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/lists",
-  "version": "1.9.6-rc",
+  "version": "1.9.8-rc",
   "description": "> TODO: description",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",