@use-kona/editor 0.1.1 → 0.1.2-rc.1

package/dist/core/deserialize.js

@@ -21,13 +21,20 @@ const deserialize = (plugins)=>(element)=>{
         for (const plugin of plugins){
             if (plugin.blocks?.some((b)=>b.deserialize)) plugin.blocks.forEach((e)=>{
                 if (e.deserialize) {
-                    const childrenAsDescendants = children;
+                    const childrenAsDescendants = result || children;
+                    const newResult = e.deserialize(element, childrenAsDescendants);
+                    if (newResult) result = newResult;
+                }
+            });
+            if (plugin.leafs?.some((b)=>b.deserialize)) plugin.leafs.forEach((e)=>{
+                if (e.deserialize) {
+                    const childrenAsDescendants = result || children;
                     const newResult = e.deserialize(element, childrenAsDescendants);
                     if (newResult) result = newResult;
                 }
             });
-            if (result) return result;
         }
+        if (result) return result;
         return children.filter((child)=>null !== child);
     };
 export { deserialize };

package/dist/examples/Editor.d.ts

@@ -1 +1,8 @@
-export declare const ExampleEditor: () => import("react/jsx-runtime").JSX.Element;
+import type { Descendant } from 'slate';
+type Props = {
+    initialValueType?: 'kona-editor' | 'html';
+    value?: any;
+    onChange?: (value: Descendant[]) => void;
+};
+export declare const ExampleEditor: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/examples/Editor.js

@@ -1,22 +1,39 @@
 import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
+import { deserialize } from "../core/deserialize.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 = ()=>/*#__PURE__*/ jsx(DndProvider, {
+const ExampleEditor = (props)=>{
+    const { initialValueType = 'kona-editor' } = props;
+    const [plugins] = useState(getPlugins());
+    const [value, setValue] = useState(null);
+    const ref = useRef(null);
+    useEffect(()=>{
+        if ('kona-editor' === initialValueType) setValue(props.value);
+        else {
+            const parsed = deserialize(plugins)(props.value);
+            parsed && setValue(parsed);
+            console.log(parsed);
+        }
+    }, []);
+    return /*#__PURE__*/ jsx(DndProvider, {
         backend: HTML5Backend,
         children: /*#__PURE__*/ jsx("div", {
             className: [
                 Editor_module.root
             ].join(' '),
-            children: /*#__PURE__*/ jsx(KonaEditor, {
-                initialValue: initialValue,
-                plugins: getPlugins(),
-                onChange: console.log
+            children: value && /*#__PURE__*/ jsx(KonaEditor, {
+                ref: ref,
+                initialValue: value || initialValue,
+                plugins: plugins,
+                onChange: props.onChange || console.log
             })
         })
     });
+};
 export { ExampleEditor };

package/dist/examples/Editor_module.css

@@ -4,7 +4,6 @@
   width: 600px;
   height: calc(100vh - 256px);
   max-height: 100vh;
-  margin: 32px auto;
   overflow: hidden;
 }
 

package/dist/index.d.ts

@@ -1,4 +1,8 @@
+export type { CustomElement, CustomText } from '../types';
+export { deserialize } from './core/deserialize';
+export { serialize } from './core/serialize';
 export { defaultValue } from './defaultValue';
 export * from './editor';
 export { ExampleEditor } from './examples/Editor';
 export * from './plugins';
+export type { EditorRef } from './types';

package/dist/index.js

@@ -1,5 +1,7 @@
+import { deserialize } from "./core/deserialize.js";
+import { serialize } from "./core/serialize.js";
 import { defaultValue } from "./defaultValue.js";
 import { ExampleEditor } from "./examples/Editor.js";
 export * from "./editor.js";
 export * from "./plugins/index.js";
-export { ExampleEditor, defaultValue };
+export { ExampleEditor, defaultValue, deserialize, serialize };

package/dist/plugins/BasicFormattingPlugin/BasicFormattingPlugin.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Editor } from "slate";
+import { jsx as external_slate_hyperscript_jsx } from "slate-hyperscript";
 class BasicFormattingPlugin {
     hotkeys = [
         [
@@ -48,6 +49,34 @@ class BasicFormattingPlugin {
                     ...attributes,
                     children: content
                 });
+            },
+            deserialize: (element, children)=>{
+                const { nodeName } = element;
+                let attrs = null;
+                switch(nodeName){
+                    case 'EM':
+                    case 'I':
+                        attrs = {
+                            italic: true
+                        };
+                        break;
+                    case 'STRONG':
+                        attrs = {
+                            bold: true
+                        };
+                        break;
+                    case 'U':
+                        attrs = {
+                            underline: true
+                        };
+                        break;
+                    case 'S':
+                        attrs = {
+                            strikethrough: true
+                        };
+                        break;
+                }
+                if (attrs) return children?.map((child)=>external_slate_hyperscript_jsx('text', attrs, child));
             }
         }
     ];

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

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

package/dist/plugins/HeadingsPlugin/HeadingsPlugin.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Editor, Element, Transforms } from "slate";
+import { jsx as external_slate_hyperscript_jsx } from "slate-hyperscript";
 class HeadingsPlugin {
     static HeadingLevel1 = 'h1';
     static HeadingLevel2 = 'h2';
@@ -10,21 +11,39 @@ class HeadingsPlugin {
             render: (props)=>/*#__PURE__*/ jsx("h1", {
                     ...props.attributes,
                     children: props.children
-                })
+                }),
+            deserialize: (element, children)=>{
+                const { nodeName } = element;
+                if ('H1' === nodeName) return external_slate_hyperscript_jsx('element', {
+                    type: HeadingsPlugin.HeadingLevel1
+                }, children);
+            }
         },
         {
             type: HeadingsPlugin.HeadingLevel2,
             render: (props)=>/*#__PURE__*/ jsx("h2", {
                     ...props.attributes,
                     children: props.children
-                })
+                }),
+            deserialize: (element, children)=>{
+                const { nodeName } = element;
+                if ('H2' === nodeName) return external_slate_hyperscript_jsx('element', {
+                    type: HeadingsPlugin.HeadingLevel2
+                }, children);
+            }
         },
         {
             type: HeadingsPlugin.HeadingLevel3,
             render: (props)=>/*#__PURE__*/ jsx("h3", {
                     ...props.attributes,
                     children: props.children
-                })
+                }),
+            deserialize: (element, children)=>{
+                const { nodeName } = element;
+                if ('H3' === nodeName) return external_slate_hyperscript_jsx('element', {
+                    type: HeadingsPlugin.HeadingLevel3
+                }, children);
+            }
         }
     ];
     static isHeading1Active(editor) {

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;
+        deserialize: (element: HTMLElement, children: any) => import("../..").CustomElement | undefined;
     }[];
     static addLink: (editor: Editor, url: string) => void;
     static removeLink: (editor: Editor) => void;

package/dist/plugins/LinksPlugin/LinksPlugin.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import is_url from "is-url";
 import { Editor, Element, Range, Transforms } from "slate";
+import { jsx as external_slate_hyperscript_jsx } from "slate-hyperscript";
 import { LINK_ELEMENT } from "./constants.js";
 import { Link } from "./Link.js";
 class LinksPlugin {
@@ -47,7 +48,16 @@ class LinksPlugin {
                     ...props,
                     element: props.element,
                     renderHint: this.options.renderHint
-                })
+                }),
+            deserialize: (element, children)=>{
+                if ('A' === element.tagName) {
+                    const url = element.getAttribute('href') || '';
+                    return external_slate_hyperscript_jsx('element', {
+                        type: LinksPlugin.LINK_TYPE,
+                        url
+                    }, children);
+                }
+            }
         }
     ];
     static addLink = (editor, url)=>{

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

@@ -1,6 +1,7 @@
 import type { KeyboardEvent } from 'react';
 import { Editor } from 'slate';
 import type { RenderElementProps } from 'slate-react';
+import type { CustomElement } from '../../../types';
 import type { IPlugin } from '../../types';
 type Options = {
     listTypes?: string[];
@@ -16,6 +17,7 @@ export declare class ListsPlugin implements IPlugin {
     blocks: {
         type: string;
         render: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;
+        deserialize: (element: HTMLElement, children: any) => CustomElement | undefined;
     }[];
     handlers: {
         onKeyDown: (event: KeyboardEvent, editor: Editor) => true | undefined;

package/dist/plugins/ListsPlugin/ListsPlugin.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Editor, Element, Node, Transforms } from "slate";
+import { jsx as external_slate_hyperscript_jsx } from "slate-hyperscript";
 import { getPrev } from "../../core/queries.js";
 import styles_module from "./styles.module.js";
 class ListsPlugin {
@@ -76,7 +77,13 @@ class ListsPlugin {
                     className: styles_module.list,
                     ...props.attributes,
                     children: props.children
-                })
+                }),
+            deserialize: (element, children)=>{
+                const { nodeName } = element;
+                if ('UL' === nodeName) return external_slate_hyperscript_jsx('element', {
+                    type: ListsPlugin.BULLETED_LIST_ELEMENT
+                }, children);
+            }
         },
         {
             type: ListsPlugin.NUMBERED_LIST_ELEMENT,
@@ -84,7 +91,13 @@ class ListsPlugin {
                     className: styles_module.list,
                     ...props.attributes,
                     children: props.children
-                })
+                }),
+            deserialize: (element, children)=>{
+                const { nodeName } = element;
+                if ('OL' === nodeName) return external_slate_hyperscript_jsx('element', {
+                    type: ListsPlugin.NUMBERED_LIST_ELEMENT
+                }, children);
+            }
         },
         {
             type: ListsPlugin.LIST_ITEM_ELEMENT,
@@ -92,7 +105,13 @@ class ListsPlugin {
                     className: styles_module.listItem,
                     ...props.attributes,
                     children: props.children
-                })
+                }),
+            deserialize: (element, children)=>{
+                const { nodeName } = element;
+                if ('LI' === nodeName) return external_slate_hyperscript_jsx('element', {
+                    type: ListsPlugin.LIST_ITEM_ELEMENT
+                }, children);
+            }
         }
     ];
     handlers = {

package/dist/types.d.ts

@@ -34,6 +34,7 @@ export type Leaf<T extends Editor, TLeaf extends CustomText = CustomText> = {
         leaf: CustomText & TLeaf;
     }, editor: T) => ReactElement | null;
     isVoid?: boolean;
+    deserialize?: Deserialize;
 };
 type Hotkey = readonly [string, (event: KeyboardEvent, editor: Editor) => void];
 export type UiParams = {
@@ -46,5 +47,5 @@ export type EditorRef = {
     deserialize: (element: HTMLElement) => (Descendant | string)[] | string | Descendant | null;
 };
 export type Serialize = (node: Node, children?: string) => string | undefined;
-export type Deserialize = (element: HTMLElement, children?: (string | Descendant)[]) => Node | 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.1",
+  "version": "0.1.2-rc.1",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"

package/src/core/deserialize.ts

@@ -1,5 +1,6 @@
 import { type Descendant, Element, type Node } from 'slate';
 import { jsx } from 'slate-hyperscript';
+import { CustomElement, CustomText } from '../../types';
 import type { IPlugin } from '../types';
 
 export const deserialize =
@@ -35,13 +36,16 @@ export const deserialize =
       return jsx('element', { type: 'paragraph' }, children);
     }
 
-    let result: Node | null = null;
+    let result: CustomElement | CustomText[] | null = null;
     for (const plugin of plugins) {
       if (plugin.blocks?.some((b) => b.deserialize)) {
         plugin.blocks.forEach((e) => {
           if (e.deserialize) {
-            // Cast children to match the expected type in Deserialize interface
-            const childrenAsDescendants = children as (string | Descendant)[];
+            const childrenAsDescendants = (result || children) as (
+              | string
+              | Descendant
+            )[];
+
             const newResult = e.deserialize(element, childrenAsDescendants);
             if (newResult) {
               result = newResult;
@@ -49,9 +53,26 @@ export const deserialize =
           }
         });
       }
-      if (result) {
-        return result;
+
+      if (plugin.leafs?.some((b) => b.deserialize)) {
+        plugin.leafs.forEach((e) => {
+          if (e.deserialize) {
+            const childrenAsDescendants = (result || children) as (
+              | string
+              | Descendant
+            )[];
+            const newResult = e.deserialize(element, childrenAsDescendants);
+            if (newResult) {
+              result = newResult;
+            }
+          }
+        });
       }
     }
+
+    if (result) {
+      return result;
+    }
+
     return children.filter((child) => child !== null);
   };

package/src/examples/Editor.module.css

@@ -3,7 +3,6 @@
   height: calc(100vh - 128px * 2);
   overflow: hidden;
   max-height: 100vh;
-  margin: 32px auto;
   border: 1px solid var(--kona-editor-border-color);
   border-radius: 8px;
 }

package/src/examples/Editor.tsx

@@ -1,22 +1,52 @@
+import { useEffect, useRef, useState } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import type { Descendant } from 'slate';
 import type { CustomElement } from '../../types';
+import { deserialize } from '../core/deserialize';
 import { KonaEditor } from '../editor';
+import type { EditorRef } from '../types';
 import styles from './Editor.module.css';
 import { getPlugins } from './getPlugins';
 import { text } from './text';
 
 const initialValue = text;
 
-export const ExampleEditor = () => {
+type Props = {
+  initialValueType?: 'kona-editor' | 'html';
+  value?: any;
+  onChange?: (value: Descendant[]) => void;
+};
+
+export const ExampleEditor = (props: Props) => {
+  const { initialValueType = 'kona-editor' } = props;
+  const [plugins] = useState(getPlugins());
+  const [value, setValue] = useState<Descendant[] | null>(null);
+
+  const ref = useRef<EditorRef>(null);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: only on init
+  useEffect(() => {
+    if (initialValueType === 'kona-editor') {
+      setValue(props.value);
+    } else {
+      const parsed = deserialize(plugins)(props.value);
+      parsed && setValue(parsed as Descendant[]);
+      console.log(parsed);
+    }
+  }, []);
+
   return (
     <DndProvider backend={HTML5Backend}>
       <div className={[styles.root].join(' ')}>
-        <KonaEditor
-          initialValue={initialValue as CustomElement[]}
-          plugins={getPlugins()}
-          onChange={console.log}
-        />
+        {value && (
+          <KonaEditor
+            ref={ref}
+            initialValue={value || (initialValue as CustomElement[])}
+            plugins={plugins}
+            onChange={props.onChange || console.log}
+          />
+        )}
       </div>
     </DndProvider>
   );

package/src/index.ts

@@ -1,4 +1,8 @@
+export type { CustomElement, CustomText } from '../types';
+export { deserialize } from './core/deserialize';
+export { serialize } from './core/serialize';
 export { defaultValue } from './defaultValue';
 export * from './editor';
 export { ExampleEditor } from './examples/Editor';
 export * from './plugins';
+export type { EditorRef } from './types';

package/src/plugins/BasicFormattingPlugin/BasicFormattingPlugin.tsx

@@ -1,4 +1,5 @@
 import { Editor } from 'slate';
+import { jsx } from 'slate-hyperscript';
 import type { CustomElement, CustomText } from '../../../types';
 import type { IPlugin } from '../../types';
 
@@ -63,6 +64,36 @@ export class BasicFormattingPlugin
 
         return <span {...attributes}>{content}</span>;
       },
+      deserialize: (element: HTMLElement, children) => {
+        const { nodeName } = element;
+
+        let attrs: Record<string, boolean> | null = null;
+        switch (nodeName) {
+          case 'EM':
+          case 'I': {
+            attrs = { italic: true };
+            break;
+          }
+          case 'STRONG': {
+            attrs = { bold: true };
+            break;
+          }
+          case 'U': {
+            attrs = { underline: true };
+            break;
+          }
+          case 'S': {
+            attrs = { strikethrough: true };
+            break;
+          }
+        }
+
+        if (attrs) {
+          return children?.map((child) => jsx('text', attrs, child));
+        }
+
+        return undefined;
+      },
     },
   ];
 

package/src/plugins/HeadingsPlugin/HeadingsPlugin.tsx

@@ -1,6 +1,7 @@
 import { Editor, Element, Transforms } from 'slate';
-import { RenderElementProps } from 'slate-react';
-import { IPlugin } from '../../types';
+import { jsx } from 'slate-hyperscript';
+import type { RenderElementProps } from 'slate-react';
+import type { IPlugin } from '../../types';
 
 export class HeadingsPlugin implements IPlugin {
   static HeadingLevel1 = 'h1';
@@ -13,18 +14,51 @@ export class HeadingsPlugin implements IPlugin {
       render: (props: RenderElementProps) => {
         return <h1 {...props.attributes}>{props.children}</h1>;
       },
+      deserialize: (element: HTMLElement, children) => {
+        const { nodeName } = element;
+
+        if (nodeName === 'H1') {
+          return jsx(
+            'element',
+            { type: HeadingsPlugin.HeadingLevel1 },
+            children,
+          );
+        }
+      },
     },
     {
       type: HeadingsPlugin.HeadingLevel2,
       render: (props: RenderElementProps) => {
         return <h2 {...props.attributes}>{props.children}</h2>;
       },
+      deserialize: (element: HTMLElement, children) => {
+        const { nodeName } = element;
+
+        if (nodeName === 'H2') {
+          return jsx(
+            'element',
+            { type: HeadingsPlugin.HeadingLevel2 },
+            children,
+          );
+        }
+      },
     },
     {
       type: HeadingsPlugin.HeadingLevel3,
       render: (props: RenderElementProps) => {
         return <h3 {...props.attributes}>{props.children}</h3>;
       },
+      deserialize: (element: HTMLElement, children) => {
+        const { nodeName } = element;
+
+        if (nodeName === 'H3') {
+          return jsx(
+            'element',
+            { type: HeadingsPlugin.HeadingLevel3 },
+            children,
+          );
+        }
+      },
     },
   ];
 

package/src/plugins/LinksPlugin/LinksPlugin.tsx

@@ -1,6 +1,8 @@
 import isUrl from 'is-url';
 import { Editor, Element, Range, Transforms } from 'slate';
+import { jsx } from 'slate-hyperscript';
 import type { RenderElementProps } from 'slate-react';
+import { deserialize } from '../../core/deserialize';
 import type { IPlugin } from '../../types';
 import { LINK_ELEMENT } from './constants';
 import { Link } from './Link';
@@ -54,6 +56,19 @@ export class LinksPlugin implements IPlugin {
           />
         );
       },
+      deserialize: (element: HTMLElement, children) => {
+        if (element.tagName === 'A') {
+          const url = element.getAttribute('href') || '';
+          return jsx(
+            'element',
+            {
+              type: LinksPlugin.LINK_TYPE,
+              url,
+            },
+            children,
+          );
+        }
+      },
     },
   ];
 

package/src/plugins/ListsPlugin/ListsPlugin.tsx

@@ -8,6 +8,7 @@ import {
   type Path,
   Transforms,
 } from 'slate';
+import { jsx } from 'slate-hyperscript';
 import type { RenderElementProps } from 'slate-react';
 import type { CustomElement } from '../../../types';
 import { getPrev } from '../../core/queries';
@@ -133,6 +134,16 @@ export class ListsPlugin implements IPlugin {
           </ul>
         );
       },
+      deserialize: (element: HTMLElement, children) => {
+        const { nodeName } = element;
+        if (nodeName === 'UL') {
+          return jsx(
+            'element',
+            { type: ListsPlugin.BULLETED_LIST_ELEMENT },
+            children,
+          );
+        }
+      },
     },
     {
       type: ListsPlugin.NUMBERED_LIST_ELEMENT,
@@ -143,6 +154,16 @@ export class ListsPlugin implements IPlugin {
           </ol>
         );
       },
+      deserialize: (element: HTMLElement, children) => {
+        const { nodeName } = element;
+        if (nodeName === 'OL') {
+          return jsx(
+            'element',
+            { type: ListsPlugin.NUMBERED_LIST_ELEMENT },
+            children,
+          );
+        }
+      },
     },
     {
       type: ListsPlugin.LIST_ITEM_ELEMENT,
@@ -153,6 +174,16 @@ export class ListsPlugin implements IPlugin {
           </li>
         );
       },
+      deserialize: (element: HTMLElement, children) => {
+        const { nodeName } = element;
+        if (nodeName === 'LI') {
+          return jsx(
+            'element',
+            { type: ListsPlugin.LIST_ITEM_ELEMENT },
+            children,
+          );
+        }
+      },
     },
   ];
 

package/src/types.ts

@@ -60,6 +60,7 @@ export type Leaf<T extends Editor, TLeaf extends CustomText = CustomText> = {
     editor: T,
   ) => ReactElement | null;
   isVoid?: boolean;
+  deserialize?: Deserialize;
 };
 
 type Hotkey = readonly [string, (event: KeyboardEvent, editor: Editor) => void];
@@ -84,4 +85,4 @@ export type Serialize = (node: Node, children?: string) => string | undefined;
 export type Deserialize = (
   element: HTMLElement,
   children?: (string | Descendant)[],
-) => Node | undefined;
+) => CustomElement | CustomText[] | undefined;