@use-kona/editor 0.1.0-rc.5 → 0.1.2-rc.0

package/dist/plugins/CodeBlockPlugin/CodeBlock.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import styles_module from "./styles.module.js";
 const CodeBlock = (props)=>/*#__PURE__*/ jsxs("div", {
         ...props.attributes,
-        className: styles_module.code,
+        className: styles_module.root,
         spellCheck: false,
         children: [
             /*#__PURE__*/ jsx("div", {
@@ -11,7 +11,10 @@ const CodeBlock = (props)=>/*#__PURE__*/ jsxs("div", {
             }),
             /*#__PURE__*/ jsx("div", {
                 className: styles_module.content,
-                children: props.children
+                children: /*#__PURE__*/ jsx("div", {
+                    className: styles_module.code,
+                    children: props.children
+                })
             })
         ]
     });

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

@@ -1,2 +1,2 @@
-import { RenderElementProps } from 'slate-react';
+import type { RenderElementProps } from 'slate-react';
 export declare const CodeBlockLine: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;

package/dist/plugins/CodeBlockPlugin/CodeBlockLine.js

@@ -1,9 +1,11 @@
 import { jsx } from "react/jsx-runtime";
+import styles_module from "./styles.module.js";
 const CodeBlockLine = (props)=>/*#__PURE__*/ jsx("div", {
         ...props.attributes,
         style: {
             position: 'relative'
         },
+        className: styles_module.line,
         children: props.children
     });
 export { CodeBlockLine };

package/dist/plugins/CodeBlockPlugin/styles.module.js

@@ -1,6 +1,7 @@
 import "./styles_module.css";
 const styles_module = {
-    code: "code-j4FgXP",
-    content: "content-HIkMJO"
+    root: "root-aY1XCj",
+    content: "content-HIkMJO",
+    line: "line-dwbtZS"
 };
 export { styles_module as default };

package/dist/plugins/CodeBlockPlugin/styles_module.css

@@ -1,12 +1,31 @@
-.code-j4FgXP {
+.root-aY1XCj {
   border: 1px solid var(--kona-editor-border-color, #eee);
   border-radius: 4px;
+  flex-direction: column;
   font-family: monospace;
+  display: flex;
   overflow: hidden;
 }
 
 .content-HIkMJO {
   background-color: var(--kona-editor-background-color, #fff);
-  padding: 8px;
+  display: flex;
+}
+
+.line-dwbtZS {
+  counter-increment: line;
+  padding-left: 50px;
+
+  &:before {
+    content: counter(line);
+    text-align: left;
+    width: max-content;
+    color: var(--kona-editor-text-color, #444);
+    opacity: .65;
+    padding-left: 16px;
+    display: inline-block;
+    position: absolute;
+    left: 0;
+  }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.0-rc.5",
+  "version": "0.1.2-rc.0",
   "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,3 +1,5 @@
+export { deserialize } from './core/deserialize';
+export { serialize } from './core/serialize';
 export { defaultValue } from './defaultValue';
 export * from './editor';
 export { ExampleEditor } from './examples/Editor';

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/CodeBlockPlugin/CodeBlock.tsx

@@ -10,11 +10,13 @@ type Props = RenderElementProps & {
 
 export const CodeBlock = (props: Props) => {
   return (
-    <div {...props.attributes} className={styles.code} spellCheck={false}>
+    <div {...props.attributes} className={styles.root} spellCheck={false}>
       <div contentEditable={false}>
         {props.renderLanguageSelector(props.element)}
       </div>
-      <div className={styles.content}>{props.children}</div>
+      <div className={styles.content}>
+        <div className={styles.code}>{props.children}</div>
+      </div>
     </div>
   );
 };

package/src/plugins/CodeBlockPlugin/CodeBlockLine.tsx

@@ -1,7 +1,12 @@
-import { RenderElementProps } from 'slate-react';
+import type { RenderElementProps } from 'slate-react';
+import styles from './styles.module.css';
 
 export const CodeBlockLine = (props: RenderElementProps) => (
-  <div {...props.attributes} style={{ position: 'relative' }}>
+  <div
+    {...props.attributes}
+    style={{ position: 'relative' }}
+    className={styles.line}
+  >
     {props.children}
   </div>
 );

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

@@ -1,11 +1,30 @@
-.code {
+.root {
   border: 1px solid var(--kona-editor-border-color, #eee);
   border-radius: 4px;
   overflow: hidden;
   font-family: monospace;
+  display: flex;
+  flex-direction: column;
 }
 
 .content {
-  padding: 8px;
+  display: flex;
   background-color: var(--kona-editor-background-color, #fff);
 }
+
+.line {
+  counter-increment: line;
+  padding-left: 50px;
+
+  &::before {
+    left: 0;
+    position: absolute;
+    content: counter(line);
+    display: inline-block;
+    width: max-content;
+    text-align: left;
+    padding-left: 16px;
+    color: var(--kona-editor-text-color, #444);
+    opacity: 0.65;
+  }
+}

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;