@use-kona/editor 0.1.2-rc.5 → 0.1.2-rc.7

package/dist/core/serialize.d.ts

@@ -1,3 +1,3 @@
 import type { CustomElement, CustomText } from '../../types';
 import type { IPlugin } from '../types';
-export declare const serialize: (plugins: IPlugin[]) => (node: CustomElement | CustomElement[] | CustomText | CustomText[]) => string;
+export declare const serialize: (plugins: IPlugin[]) => (node: CustomElement | CustomText) => string;

package/dist/core/serialize.js

@@ -1,12 +1,12 @@
 import escape_html from "escape-html";
 import { Text } from "slate";
 const serialize = (plugins)=>(node)=>{
-        const serializers = plugins.flatMap((plugin)=>plugin.blocks?.map((element)=>element.serialize)).filter(Boolean);
+        const serializers = plugins.flatMap((plugin)=>plugin.blocks?.map((element)=>element.serialize)).concat(plugins.flatMap((plugin)=>plugin.leafs?.map((element)=>element.serialize))).filter(Boolean);
         if (Array.isArray(node)) return node.map(serialize(plugins)).join('');
         if (Text.isText(node)) return serializers.reduce((prev, current)=>current?.(node) || prev, escape_html(node.text));
         {
-            const children = node.children?.map((n)=>serialize(plugins)(n)).join('');
-            if ('paragraph' === node.type) return `<p>${children}</p>`;
+            const children = node?.children?.map((n)=>serialize(plugins)(n)).join('');
+            if (node?.type === 'paragraph') return `<p>${children}</p>`;
             return serializers.reduce((prev, current)=>current?.(node, children) || prev, '') || children;
         }
     };

package/dist/examples/{LanguageSelector.d.ts → CodeBlock.d.ts}

@@ -1,10 +1,12 @@
+import { type ReactNode } from 'react';
 import type { CustomElement } from '../../types';
 type Props = {
     value: string;
     onChange: (value: string) => void;
     params: {
         element: CustomElement;
+        Content: () => ReactNode;
     };
 };
-export declare const LanguageSelector: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeBlock: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/examples/{LanguageSelector.js → CodeBlock.js}

@@ -1,9 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { Node } from "slate";
+import CodeBlock_module from "./CodeBlock.module.js";
 import { CheckIcon } from "./icons/check.js";
 import { CopyIcon } from "./icons/copy.js";
-import LanguageSelector_module from "./LanguageSelector.module.js";
 import { Button } from "./ui/Button/index.js";
 import { Dropdown } from "./ui/Dropdown/index.js";
 import { Menu } from "./ui/Menu/index.js";
@@ -93,10 +93,10 @@ const languages = [
         label: 'Plain Text'
     }
 ];
-const LanguageSelector = (props)=>{
-    const { value: language, onChange, params } = props;
+const CodeBlock = (props)=>{
+    const { value: language, onChange, params: { element, Content } } = props;
     const handleCopyClick = ()=>{
-        const text = Array.from(Node.texts(params.element)).map((nodeEntry)=>nodeEntry[0].text).join('\n');
+        const text = Array.from(Node.texts(element)).map((nodeEntry)=>nodeEntry[0].text).join('\n');
         navigator.clipboard.writeText(text);
     };
     const menuConfig = useMemo(()=>({
@@ -121,34 +121,43 @@ const LanguageSelector = (props)=>{
         language
     ]);
     return /*#__PURE__*/ jsxs("div", {
-        className: LanguageSelector_module.root,
+        className: CodeBlock_module.root,
         children: [
-            /*#__PURE__*/ jsx(Dropdown, {
-                config: menuConfig,
-                Menu: /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx("div", {
-                        ...props,
-                        ref: ref,
-                        className: [
-                            LanguageSelector_module.customMenu,
-                            props.className
-                        ].join(' ')
-                    })),
-                children: ({ ref, onClick })=>/*#__PURE__*/ jsx(Button, {
-                        ref: ref,
+            /*#__PURE__*/ jsxs("div", {
+                className: CodeBlock_module.menu,
+                children: [
+                    /*#__PURE__*/ jsx(Dropdown, {
+                        config: menuConfig,
+                        Menu: /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx("div", {
+                                ...props,
+                                ref: ref,
+                                className: [
+                                    CodeBlock_module.customMenu,
+                                    props.className
+                                ].join(' ')
+                            })),
+                        children: ({ ref, onClick })=>/*#__PURE__*/ jsx(Button, {
+                                ref: ref,
+                                size: "sm",
+                                onClick: onClick,
+                                children: languages.find((l)=>l.value === language)?.label || 'Select language'
+                            })
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
                         size: "sm",
-                        onClick: onClick,
-                        children: languages.find((l)=>l.value === language)?.label || 'Select language'
+                        type: "button",
+                        onClick: handleCopyClick,
+                        children: /*#__PURE__*/ jsx(CopyIcon, {
+                            size: 16
+                        })
                     })
+                ]
             }),
-            /*#__PURE__*/ jsx(Button, {
-                size: "sm",
-                type: "button",
-                onClick: handleCopyClick,
-                children: /*#__PURE__*/ jsx(CopyIcon, {
-                    size: 16
-                })
+            /*#__PURE__*/ jsx("div", {
+                className: CodeBlock_module.content,
+                children: /*#__PURE__*/ jsx(Content, {})
             })
         ]
     });
 };
-export { LanguageSelector };
+export { CodeBlock };

package/dist/examples/CodeBlock.module.js

@@ -0,0 +1,9 @@
+import "./CodeBlock_module.css";
+const CodeBlock_module = {
+    root: "root-qalHKY",
+    button: "button-NFVN8i",
+    menu: "menu-tWodT1",
+    content: "content-vvTcTm",
+    customMenu: "customMenu-PLCVVP"
+};
+export { CodeBlock_module as default };

package/dist/examples/{LanguageSelector_module.css → CodeBlock_module.css}

@@ -1,12 +1,12 @@
-.root-lOdP_6 {
-  border-bottom: 1px solid var(--kona-editor-border-color);
-  justify-content: space-between;
-  column-gap: 8px;
+.root-qalHKY {
+  background-color: var(--kona-editor-alt-background-color);
+  border-radius: 8px;
+  flex-direction: column;
   padding: 4px;
   display: flex;
 }
 
-.button-GlQ_nf {
+.button-NFVN8i {
   cursor: pointer;
   background-color: #0000;
   border-radius: 4px;
@@ -24,7 +24,20 @@
   }
 }
 
-.customMenu-eXoQR8 {
+.menu-tWodT1 {
+  justify-content: space-between;
+  column-gap: 4px;
+  padding: 4px 0;
+  display: flex;
+}
+
+.content-vvTcTm {
+  background-color: var(--kona-editor-background-color);
+  border-radius: 6px;
+  padding: 8px 4px;
+}
+
+.customMenu-PLCVVP {
   background-color: var(--kona-editor-background-color);
   border: 1px solid var(--kona-editor-border-color);
   z-index: 21;

package/dist/examples/Editor.d.ts

@@ -4,5 +4,5 @@ type Props = {
     value?: any;
     onChange?: (value: Descendant[]) => void;
 };
-export declare const ExampleEditor: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ExampleEditor: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
 export {};

package/dist/examples/Editor.js

@@ -1,24 +1,29 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { deserialize } from "../core/deserialize.js";
+import { serialize } from "../core/serialize.js";
 import { KonaEditor } from "../editor.js";
 import Editor_module from "./Editor.module.js";
 import { getPlugins } from "./getPlugins.js";
 import { text as external_text_js_text } from "./text.js";
 const initialValue = external_text_js_text;
-const ExampleEditor = (props)=>{
-    const { initialValueType = 'kona-editor' } = props;
+const ExampleEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { value: defaultValue = external_text_js_text, initialValueType = 'kona-editor' } = props;
     const [plugins] = useState(getPlugins());
     const [value, setValue] = useState(null);
-    const ref = useRef(null);
+    const editorRef = useRef(null);
+    useImperativeHandle(ref, ()=>({
+            serialize: serialize(plugins)
+        }), [
+        plugins
+    ]);
     useEffect(()=>{
-        if ('kona-editor' === initialValueType) setValue(props.value);
+        if ('kona-editor' === initialValueType) setValue(defaultValue);
         else {
-            const parsed = deserialize(plugins)(props.value);
+            const parsed = deserialize(plugins)(defaultValue);
             parsed && setValue(parsed);
-            console.log(parsed);
         }
     }, []);
     return /*#__PURE__*/ jsx(DndProvider, {
@@ -28,12 +33,12 @@ const ExampleEditor = (props)=>{
                 Editor_module.root
             ].join(' '),
             children: value && /*#__PURE__*/ jsx(KonaEditor, {
-                ref: ref,
+                ref: editorRef,
                 initialValue: value || initialValue,
                 plugins: plugins,
                 onChange: props.onChange || console.log
             })
         })
     });
-};
+});
 export { ExampleEditor };

package/dist/examples/getPlugins.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { BasicFormattingPlugin, BreaksPlugin, CodeBlockPlugin, CommandsPlugin, DnDPlugin, FloatingMenuPlugin, HeadingsPlugin, HighlightsPlugin, LinksPlugin, ListsPlugin, MenuPlugin, NodeIdPlugin, PlaceholderPlugin, ShortcutsPlugin, TableOfContentsPlugin } from "../plugins/index.js";
 import { Backdrop } from "./Backdrop.js";
+import { CodeBlock } from "./CodeBlock.js";
 import { colors } from "./colors.js";
 import { DragBlock } from "./DragBlock.js";
 import { FloatingMenu } from "./FloatingMenu.js";
 import { getCommands } from "./getCommands.js";
 import { getShortcuts } from "./getShortcuts.js";
-import { LanguageSelector } from "./LanguageSelector.js";
 import { LinksHint } from "./LinksHint.js";
 import { Menu } from "./Menu.js";
 import { $store } from "./store.js";
@@ -113,7 +113,7 @@ const getPlugins = ()=>{
         }),
         new ListsPlugin({}),
         new CodeBlockPlugin({
-            renderLanguageSelector: (value, onChange, params)=>/*#__PURE__*/ jsx(LanguageSelector, {
+            renderCodeBlock: (value, onChange, params)=>/*#__PURE__*/ jsx(CodeBlock, {
                     value: value,
                     onChange: onChange,
                     params: {

package/dist/examples/text.js

@@ -44,7 +44,7 @@ const text_text = /*#__PURE__*/ jsx("fragment", null, /*#__PURE__*/ jsx("heading
     italic: true
 }, "Kona Editor"), ' ', "is a text editor based on Slate.js that I use in", ' ', /*#__PURE__*/ jsx("hlink", {
     url: "https://kona.to"
-}, "Kona application"), " for notes and event descriptions. I decided to open-source the editor for a few reasons:"), /*#__PURE__*/ jsx("numberedList", null, /*#__PURE__*/ jsx("listItem", null, "I had a lot of ", /*#__PURE__*/ jsx("htext", {
+}, "Kona calendar"), " for notes and event descriptions. I decided to open-source the editor for a few reasons:"), /*#__PURE__*/ jsx("numberedList", null, /*#__PURE__*/ jsx("listItem", null, "I had a lot of ", /*#__PURE__*/ jsx("htext", {
     strikethrough: true
 }, "difficulties"), " fun while building this editor and there were always not enough examples of how to do it right. I wanted to make a little contribution to the community, so others could use my code as a reference."), /*#__PURE__*/ jsx("listItem", null, "I have always wanted to try to build something open-sourced, but there have not been enough good ideas on what to build. I think that an editor is a pretty decent starting point.")), /*#__PURE__*/ jsx("heading2", null, "Usage"), /*#__PURE__*/ jsx("codeBlock", {
     language: "tsx"

package/dist/plugins/BasicFormattingPlugin/BasicFormattingPlugin.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { Editor } from "slate";
+import escape_html from "escape-html";
+import { Editor, Text } from "slate";
 import { jsx as external_slate_hyperscript_jsx } from "slate-hyperscript";
 class BasicFormattingPlugin {
     hotkeys = [
@@ -50,6 +51,16 @@ class BasicFormattingPlugin {
                     children: content
                 });
             },
+            serialize: (node)=>{
+                if (Text.isText(node)) {
+                    let text = escape_html(node.text);
+                    if (node.bold) text = `<strong>${text}</strong>`;
+                    if (node.italic) text = `<em>${text}</em>`;
+                    if (node.underline) text = `<u>${text}</u>`;
+                    if (node.strikethrough) text = `<s>${text}</s>`;
+                    return text;
+                }
+            },
             deserialize: (element, children)=>{
                 const { nodeName } = element;
                 let attrs = null;

package/dist/plugins/CodeBlockPlugin/CodeBlock.d.ts

@@ -1,9 +1,7 @@
-import type { ReactNode } from 'react';
 import type { RenderElementProps } from 'slate-react';
 import type { CodeElement } from './types';
 type Props = RenderElementProps & {
     element: CodeElement;
-    renderLanguageSelector: (element: CodeElement) => ReactNode;
 };
 export declare const CodeBlock: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/plugins/CodeBlockPlugin/CodeBlock.js

@@ -1,21 +1,15 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import styles_module from "./styles.module.js";
-const CodeBlock = (props)=>/*#__PURE__*/ jsxs("div", {
+const CodeBlock = (props)=>/*#__PURE__*/ jsx("div", {
         ...props.attributes,
         className: styles_module.root,
         spellCheck: false,
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                contentEditable: false,
-                children: props.renderLanguageSelector(props.element)
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: styles_module.content,
-                children: /*#__PURE__*/ jsx("div", {
-                    className: styles_module.code,
-                    children: props.children
-                })
+        children: /*#__PURE__*/ jsx("div", {
+            className: styles_module.content,
+            children: /*#__PURE__*/ jsx("div", {
+                className: styles_module.code,
+                children: props.children
             })
-        ]
+        })
     });
 export { CodeBlock };

package/dist/plugins/CodeBlockPlugin/CodeBlockPlugin.d.ts

@@ -1,4 +1,4 @@
-import type { KeyboardEvent } from 'react';
+import type { KeyboardEvent, ReactNode } from 'react';
 import { Editor, type NodeEntry } from 'slate';
 import { type RenderElementProps, type RenderLeafProps } from 'slate-react';
 import type { IPlugin } from '../../types';
@@ -25,7 +25,8 @@ import 'prismjs/components/prism-sql';
 import 'prismjs/components/prism-yaml';
 import 'prismjs/components/prism-markdown';
 type Options = {
-    renderLanguageSelector: (value: string, onChange: (value: string) => void, params: {
+    renderCodeBlock: (language: string, onChange: (language: string) => void, params: {
+        Content: () => ReactNode;
         element: CodeElement;
     }) => React.ReactNode;
 };

package/dist/plugins/CodeBlockPlugin/CodeBlockPlugin.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 import prismjs from "prismjs";
 import { Editor, Element, Node, Transforms } from "slate";
 import { ReactEditor } from "slate-react";
@@ -136,6 +136,7 @@ class CodeBlockPlugin {
         {
             type: CodeBlockPlugin.CODE_ELEMENT,
             render: (props, editor)=>{
+                const { language } = props.element;
                 const onChange = (language)=>{
                     const path = ReactEditor.findPath(editor, props.element);
                     Transforms.setNodes(editor, {
@@ -144,12 +145,15 @@ class CodeBlockPlugin {
                         at: path
                     });
                 };
-                return /*#__PURE__*/ jsx(CodeBlock, {
-                    ...props,
-                    element: props.element,
-                    renderLanguageSelector: (element)=>this.options.renderLanguageSelector(props.element.language, onChange, {
-                            element: element
-                        })
+                const Content = ()=>/*#__PURE__*/ jsx(CodeBlock, {
+                        ...props,
+                        element: props.element
+                    });
+                return /*#__PURE__*/ jsx(Fragment, {
+                    children: this.options.renderCodeBlock(language, onChange, {
+                        element: props.element,
+                        Content
+                    })
                 });
             }
         },

package/dist/plugins/CodeBlockPlugin/styles_module.css

@@ -1,6 +1,4 @@
 .root-aY1XCj {
-  border: 1px solid var(--kona-editor-border-color, #eee);
-  border-radius: 4px;
   flex-direction: column;
   font-family: monospace;
   display: flex;
@@ -8,7 +6,6 @@
 }
 
 .content-HIkMJO {
-  background-color: var(--kona-editor-background-color, #fff);
   display: flex;
 }
 

package/dist/plugins/CommandsPlugin/Menu.js

@@ -76,7 +76,6 @@ const Menu = (props)=>{
                 case 'Escape':
                     event.stopPropagation();
                     $store.setKey('isOpen', false);
-                    close();
                     break;
             }
         };
@@ -114,7 +113,9 @@ const Menu = (props)=>{
         children: [
             store.isOpen && /*#__PURE__*/ jsx("div", {
                 className: styles_module.backdrop,
-                onClick: close
+                onClick: ()=>{
+                    $store.setKey('isOpen', false);
+                }
             }),
             /*#__PURE__*/ jsx("div", {
                 ref: handleMenuLayout,

package/dist/plugins/CommandsPlugin/styles_module.css

@@ -1,16 +1,9 @@
-:root {
-  --menu-background-color: #fff;
-  --menu-background-color-hover: #f9f9f9;
-  --menu-text-color: #444;
-  --menu-border-color: #ddd;
-}
-
 .menu-ZXHiGS {
-  color: var(--menu-text-color, #444);
+  color: var(--kona-editor-text-color);
   z-index: 31;
   opacity: 0;
-  background-color: var(--menu-background-color, #fff);
-  border: 1px solid var(--menu-border-color, #ddd);
+  background-color: var(--kona-editor-background-color, #fff);
+  border: 1px solid var(--kona-editor-border-color, #ddd);
   border-radius: 4px;
   flex-direction: column;
   max-height: 200px;
@@ -24,13 +17,26 @@
   overflow-y: auto;
   transform: scale(.9);
   box-shadow: 0 1px 3px #00000006;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #00000040;
+    border-radius: 10px;
+  }
 }
 
 .button-yrhMLR {
   box-sizing: border-box;
   cursor: pointer;
   height: 40px;
-  color: var(--menu-text-color, #444);
+  color: var(--kona-editor-text-color, #444);
   background: none;
   border: none;
   align-items: center;
@@ -40,15 +46,15 @@
 }
 
 .button-yrhMLR:hover, .active-Is5D6b {
-  background-color: var(--menu-background-color-hover, #f9f9f9);
+  background-color: var(--kona-editor-alt-background-color, #f9f9f9);
 }
 
 .icon-Xca6dM {
   opacity: .5;
-  background: var(--menu-background-color-hover, #f9f9f9);
+  background: var(--kona-editor-alt-background-color, #f9f9f9);
   width: 24px;
   height: 24px;
-  color: var(--menu-text-color, #444);
+  color: var(--kona-editor-text-color, #444);
   border-radius: 4px;
   justify-content: center;
   align-items: center;

package/dist/plugins/HeadingsPlugin/HeadingsPlugin.d.ts

@@ -1,4 +1,4 @@
-import { Editor } from 'slate';
+import { Descendant, Editor } from 'slate';
 import type { RenderElementProps } from 'slate-react';
 import type { IPlugin } from '../../types';
 export declare class HeadingsPlugin implements IPlugin {
@@ -9,6 +9,7 @@ export declare class HeadingsPlugin implements IPlugin {
         type: string;
         render: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;
         deserialize: (element: HTMLElement, children: any) => import("../..").CustomElement | undefined;
+        serialize: (node: Descendant, children: any) => string | undefined;
     }[];
     static isHeading1Active(editor: Editor): boolean;
     static isHeading2Active(editor: Editor): boolean;

package/dist/plugins/HeadingsPlugin/HeadingsPlugin.js

@@ -17,6 +17,9 @@ class HeadingsPlugin {
                 if ('H1' === nodeName) return external_slate_hyperscript_jsx('element', {
                     type: HeadingsPlugin.HeadingLevel1
                 }, children);
+            },
+            serialize: (node, children)=>{
+                if (Element.isElement(node) && node.type === HeadingsPlugin.HeadingLevel1) return `<h1>${children}</h1>`;
             }
         },
         {
@@ -30,6 +33,9 @@ class HeadingsPlugin {
                 if ('H2' === nodeName) return external_slate_hyperscript_jsx('element', {
                     type: HeadingsPlugin.HeadingLevel2
                 }, children);
+            },
+            serialize: (node, children)=>{
+                if (Element.isElement(node) && node.type === HeadingsPlugin.HeadingLevel2) return `<h2>${children}</h2>`;
             }
         },
         {
@@ -43,6 +49,9 @@ class HeadingsPlugin {
                 if ('H3' === nodeName) return external_slate_hyperscript_jsx('element', {
                     type: HeadingsPlugin.HeadingLevel3
                 }, children);
+            },
+            serialize: (node, children)=>{
+                if (Element.isElement(node) && node.type === HeadingsPlugin.HeadingLevel3) return `<h3>${children}</h3>`;
             }
         }
     ];

package/dist/plugins/LinksPlugin/LinksPlugin.d.ts

@@ -11,6 +11,7 @@ export declare class LinksPlugin implements IPlugin {
         isInline: boolean;
         type: string;
         render: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;
+        serialize: (element: any, children: any) => string | undefined;
         deserialize: (element: HTMLElement, children: any) => import("../..").CustomElement | undefined;
     }[];
     static addLink: (editor: Editor, url: string) => void;

package/dist/plugins/LinksPlugin/LinksPlugin.js

@@ -49,6 +49,9 @@ class LinksPlugin {
                     element: props.element,
                     renderHint: this.options.renderHint
                 }),
+            serialize: (element, children)=>{
+                if (Element.isElement(element) && element.type === LinksPlugin.LINK_TYPE) return `<a href="${element.url}">${children}</a>`;
+            },
             deserialize: (element, children)=>{
                 if ('A' === element.tagName) {
                     const url = element.getAttribute('href') || '';

package/dist/plugins/ListsPlugin/ListsPlugin.d.ts

@@ -17,6 +17,7 @@ export declare class ListsPlugin implements IPlugin {
     blocks: {
         type: string;
         render: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;
+        serialize: (element: any, children: any) => string | undefined;
         deserialize: (element: HTMLElement, children: any) => CustomElement | undefined;
     }[];
     handlers: {

package/dist/plugins/ListsPlugin/ListsPlugin.js

@@ -78,6 +78,9 @@ class ListsPlugin {
                     ...props.attributes,
                     children: props.children
                 }),
+            serialize: (element, children)=>{
+                if (element.type === ListsPlugin.BULLETED_LIST_ELEMENT) return `<ul>${children}</ul>`;
+            },
             deserialize: (element, children)=>{
                 const { nodeName } = element;
                 if ('UL' === nodeName) return external_slate_hyperscript_jsx('element', {
@@ -92,6 +95,9 @@ class ListsPlugin {
                     ...props.attributes,
                     children: props.children
                 }),
+            serialize: (element, children)=>{
+                if (element.type === ListsPlugin.NUMBERED_LIST_ELEMENT) return `<ol>${children}</ol>`;
+            },
             deserialize: (element, children)=>{
                 const { nodeName } = element;
                 if ('OL' === nodeName) return external_slate_hyperscript_jsx('element', {
@@ -106,6 +112,9 @@ class ListsPlugin {
                     ...props.attributes,
                     children: props.children
                 }),
+            serialize: (element, children)=>{
+                if (element.type === ListsPlugin.BULLETED_LIST_ELEMENT) return `<li>${children}</li>`;
+            },
             deserialize: (element, children)=>{
                 const { nodeName } = element;
                 if ('LI' === nodeName) return external_slate_hyperscript_jsx('element', {

package/dist/plugins/MenuPlugin/styles_module.css

@@ -1,6 +1,6 @@
 .menu-PPuUUG {
-  color: var(--text-color, #444);
-  background-color: var(--background-color, #fff);
+  color: var(--kona-editor-text-color, #444);
+  background-color: var(--kona-editor-background-color, #fff);
   flex-direction: row;
   justify-content: space-between;
   display: flex;

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { KeyboardEvent, ReactElement, ReactNode } from 'react';
-import type { DecoratedRange, Descendant, Editor, Node, NodeEntry } from 'slate';
+import type { DecoratedRange, Descendant, Editor, NodeEntry } from 'slate';
 import type { RenderElementProps, RenderLeafProps } from 'slate-react';
 import type { CustomElement, CustomText } from '../types';
 export interface IPlugin<TEditor extends Editor = Editor, TBlock extends CustomElement = CustomElement, TLeaf extends CustomText = CustomText> {
@@ -34,6 +34,7 @@ export type Leaf<T extends Editor, TLeaf extends CustomText = CustomText> = {
         leaf: CustomText & TLeaf;
     }, editor: T) => ReactElement | null;
     isVoid?: boolean;
+    serialize?: Serialize;
     deserialize?: Deserialize;
 };
 type Hotkey = readonly [string, (event: KeyboardEvent, editor: Editor) => void];
@@ -43,9 +44,9 @@ export type UiParams = {
     children: ReactNode;
 };
 export type EditorRef = {
-    serialize: (node: CustomElement | CustomElement[] | CustomText | CustomText[]) => string;
+    serialize: (node: CustomElement | CustomText) => string;
     deserialize: (element: HTMLElement) => (Descendant | string)[] | string | Descendant | null;
 };
-export type Serialize = (node: Node, children?: string) => string | undefined;
+export type Serialize = (node: CustomElement | CustomText, children?: string) => string | undefined;
 export type Deserialize = (element: HTMLElement, children?: (string | Descendant)[]) => CustomElement | CustomText[] | undefined;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.2-rc.5",
+  "version": "0.1.2-rc.7",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"

package/src/plugins/MenuPlugin/styles.module.css

@@ -3,8 +3,8 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  color: var(--text-color, #444);
-  background-color: var(--background-color, #fff);
+  color: var(--kona-editor-text-color, #444);
+  background-color: var(--kona-editor-background-color, #fff);
 }
 
 .editor {

package/dist/examples/LanguageSelector.module.js

@@ -1,7 +0,0 @@
-import "./LanguageSelector_module.css";
-const LanguageSelector_module = {
-    root: "root-lOdP_6",
-    button: "button-GlQ_nf",
-    customMenu: "customMenu-eXoQR8"
-};
-export { LanguageSelector_module as default };