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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.2-rc.3",
+  "version": "0.1.2-rc.5",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"
@@ -35,6 +35,7 @@
     "@storybook/test": "^9.0.0-alpha.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
+    "@types/escape-html": "^1.0.4",
     "@types/is-url": "^1.2.32",
     "@types/react": "^19.1.8",
     "@types/react-dom": "18",
@@ -57,15 +58,15 @@
   },
   "dependencies": {
     "@nanostores/react": "^1.0.0",
+    "clsx": "^2.1.1",
     "escape-html": "^1.0.3",
     "is-hotkey": "^0.2.0",
+    "is-url": "^1.2.4",
     "nanostores": "^1.0.1",
     "prismjs": "^1.30.0",
     "slate": "^0.117.2",
     "slate-history": "^0.113.1",
     "slate-hyperscript": "^0.100.0",
-    "slate-react": "^0.117.3",
-    "clsx": "^2.1.1",
-    "is-url": "^1.2.4"
+    "slate-react": "^0.117.3"
   }
 }

package/src/core/serialize.ts

@@ -5,11 +5,14 @@ import type { IPlugin } from '../types';
 
 export const serialize =
   (plugins: IPlugin[]) =>
-  (
-    node: CustomElement | CustomElement[] | CustomText | CustomText[],
-  ): string => {
+  (node: CustomElement | CustomText): string => {
     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)) {
@@ -21,11 +24,11 @@ export const serialize =
         return current?.(node) || prev;
       }, escapeHtml(node.text));
     } else {
-      const children: string = node.children
+      const children: string = node?.children
         ?.map((n) => serialize(plugins)(n))
         .join('');
 
-      if (node.type === 'paragraph') {
+      if (node?.type === 'paragraph') {
         return `<p>${children}</p>`;
       }
 

package/src/examples/{LanguageSelector.module.css → CodeBlock.module.css}

@@ -1,9 +1,9 @@
 .root {
   display: flex;
-  justify-content: space-between;
-  column-gap: 8px;
+  flex-direction: column;
+  background-color: var(--kona-editor-alt-background-color);
+  border-radius: 8px;
   padding: 4px;
-  border-bottom: 1px solid var(--kona-editor-border-color);
 }
 
 .button {
@@ -24,6 +24,19 @@
   }
 }
 
+.menu {
+  display: flex;
+  justify-content: space-between;
+  column-gap: 4px;
+  padding: 4px 0;
+}
+
+.content {
+  background-color: var(--kona-editor-background-color);
+  border-radius: 6px;
+  padding: 8px 4px;
+}
+
 .customMenu {
   max-height: 250px;
   width: 200px;

package/src/examples/{LanguageSelector.tsx → CodeBlock.tsx}

@@ -1,21 +1,13 @@
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, type ReactNode, useMemo } from 'react';
 import { Node } from 'slate';
 import type { CustomElement } from '../../types';
+import styles from './CodeBlock.module.css';
 import { CheckIcon } from './icons/check';
 import { CopyIcon } from './icons/copy';
-import styles from './LanguageSelector.module.css';
 import { Button } from './ui/Button';
 import { Dropdown } from './ui/Dropdown';
 import { Menu as MenuBase, type MenuConfig } from './ui/Menu';
 
-type Props = {
-  value: string;
-  onChange: (value: string) => void;
-  params: {
-    element: CustomElement;
-  };
-};
-
 const languages = [
   { value: 'javascript', label: 'JavaScript' },
   { value: 'typescript', label: 'TypeScript' },
@@ -40,11 +32,24 @@ const languages = [
   { value: 'plaintext', label: 'Plain Text' },
 ];
 
-export const LanguageSelector = (props: Props) => {
-  const { value: language, onChange, params } = props;
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+  params: {
+    element: CustomElement;
+    Content: () => ReactNode;
+  };
+};
+
+export const CodeBlock = (props: Props) => {
+  const {
+    value: language,
+    onChange,
+    params: { element, Content },
+  } = props;
 
   const handleCopyClick = () => {
-    const text = Array.from(Node.texts(params.element))
+    const text = Array.from(Node.texts(element))
       .map((nodeEntry) => nodeEntry[0].text)
       .join('\n');
 
@@ -72,28 +77,33 @@ export const LanguageSelector = (props: Props) => {
   );
   return (
     <div className={styles.root}>
-      <Dropdown
-        config={menuConfig}
-        Menu={forwardRef<HTMLDivElement, { className: string }>(
-          (props, ref) => (
-            <div
-              {...props}
-              ref={ref}
-              className={[styles.customMenu, props.className].join(' ')}
-            />
-          ),
-        )}
-      >
-        {({ ref, onClick }) => (
-          <Button ref={ref} size="sm" onClick={onClick}>
-            {languages.find((l) => l.value === language)?.label ||
-              'Select language'}
-          </Button>
-        )}
-      </Dropdown>
-      <Button size="sm" type="button" onClick={handleCopyClick}>
-        <CopyIcon size={16} />
-      </Button>
+      <div className={styles.menu}>
+        <Dropdown
+          config={menuConfig}
+          Menu={forwardRef<HTMLDivElement, { className: string }>(
+            (props, ref) => (
+              <div
+                {...props}
+                ref={ref}
+                className={[styles.customMenu, props.className].join(' ')}
+              />
+            ),
+          )}
+        >
+          {({ ref, onClick }) => (
+            <Button ref={ref} size="sm" onClick={onClick}>
+              {languages.find((l) => l.value === language)?.label ||
+                'Select language'}
+            </Button>
+          )}
+        </Dropdown>
+        <Button size="sm" type="button" onClick={handleCopyClick}>
+          <CopyIcon size={16} />
+        </Button>
+      </div>
+      <div className={styles.content}>
+        <Content />
+      </div>
     </div>
   );
 };

package/src/examples/Editor.tsx

@@ -1,9 +1,16 @@
-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 type { Descendant } from 'slate';
 import type { CustomElement } from '../../types';
 import { deserialize } from '../core/deserialize';
+import { serialize } from '../core/serialize';
 import { KonaEditor } from '../editor';
 import type { EditorRef } from '../types';
 import styles from './Editor.module.css';
@@ -18,21 +25,29 @@ type Props = {
   onChange?: (value: Descendant[]) => void;
 };
 
-export const ExampleEditor = (props: Props) => {
-  const { initialValueType = 'kona-editor' } = props;
+export const ExampleEditor = forwardRef((props: Props, ref) => {
+  const { value: defaultValue = text, initialValueType = 'kona-editor' } =
+    props;
   const [plugins] = useState(getPlugins());
   const [value, setValue] = useState<Descendant[] | null>(null);
 
-  const ref = useRef<EditorRef>(null);
+  const editorRef = useRef<EditorRef>(null);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      serialize: serialize(plugins),
+    }),
+    [plugins],
+  );
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: only on init
   useEffect(() => {
     if (initialValueType === 'kona-editor') {
-      setValue(props.value);
+      setValue(defaultValue);
     } else {
-      const parsed = deserialize(plugins)(props.value);
+      const parsed = deserialize(plugins)(defaultValue);
       parsed && setValue(parsed as Descendant[]);
-      console.log(parsed);
     }
   }, []);
 
@@ -41,7 +56,7 @@ export const ExampleEditor = (props: Props) => {
       <div className={[styles.root].join(' ')}>
         {value && (
           <KonaEditor
-            ref={ref}
+            ref={editorRef}
             initialValue={value || (initialValue as CustomElement[])}
             plugins={plugins}
             onChange={props.onChange || console.log}
@@ -50,4 +65,4 @@ export const ExampleEditor = (props: Props) => {
       </div>
     </DndProvider>
   );
-};
+});

package/src/examples/getPlugins.tsx

@@ -19,12 +19,12 @@ import {
 } from '../plugins';
 import type { CodeElement } from '../plugins/CodeBlockPlugin/types';
 import { Backdrop } from './Backdrop';
+import { CodeBlock } from './CodeBlock';
 import { colors } from './colors';
 import { DragBlock } from './DragBlock';
 import { FloatingMenu } from './FloatingMenu';
 import { getCommands } from './getCommands';
 import { getShortcuts } from './getShortcuts';
-import { LanguageSelector } from './LanguageSelector';
 import { LinksHint } from './LinksHint';
 import { Menu } from './Menu';
 import { $store } from './store';
@@ -126,9 +126,9 @@ export const getPlugins = () => {
     }),
     new ListsPlugin({}),
     new CodeBlockPlugin({
-      renderLanguageSelector: (value, onChange, params) => {
+      renderCodeBlock: (value, onChange, params) => {
         return (
-          <LanguageSelector
+          <CodeBlock
             value={value}
             onChange={onChange}
             params={{

package/src/examples/text.tsx

@@ -40,7 +40,7 @@ export const text = (
         Kona Editor
       </htext>{' '}
       is a text editor based on Slate.js that I use in{' '}
-      <hlink url="https://kona.to">Kona application</hlink> for notes and event
+      <hlink url="https://kona.to">Kona calendar</hlink> for notes and event
       descriptions. I decided to open-source the editor for a few reasons:
     </paragraph>
     <numberedList>

package/src/plugins/BasicFormattingPlugin/BasicFormattingPlugin.tsx

@@ -1,4 +1,5 @@
-import { Editor } from 'slate';
+import escapeHtml from 'escape-html';
+import { Editor, Text } from 'slate';
 import { jsx } from 'slate-hyperscript';
 import type { CustomElement, CustomText } from '../../../types';
 import type { IPlugin } from '../../types';
@@ -64,6 +65,26 @@ export class BasicFormattingPlugin
 
         return <span {...attributes}>{content}</span>;
       },
+      serialize: (node: CustomElement | CustomLeaf) => {
+        if (Text.isText(node)) {
+          let text = escapeHtml(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: HTMLElement, children) => {
         const { nodeName } = element;
 

package/src/plugins/CodeBlockPlugin/CodeBlock.tsx

@@ -1,19 +1,14 @@
-import type { ReactNode } from 'react';
 import type { RenderElementProps } from 'slate-react';
 import styles from './styles.module.css';
 import type { CodeElement } from './types';
 
 type Props = RenderElementProps & {
   element: CodeElement;
-  renderLanguageSelector: (element: CodeElement) => ReactNode;
 };
 
 export const CodeBlock = (props: Props) => {
   return (
     <div {...props.attributes} className={styles.root} spellCheck={false}>
-      <div contentEditable={false}>
-        {props.renderLanguageSelector(props.element)}
-      </div>
       <div className={styles.content}>
         <div className={styles.code}>{props.children}</div>
       </div>

package/src/plugins/CodeBlockPlugin/CodeBlockPlugin.tsx

@@ -1,5 +1,5 @@
 import Prism from 'prismjs';
-import type { KeyboardEvent } from 'react';
+import type { KeyboardEvent, ReactNode } from 'react';
 import {
   type DecoratedRange,
   Editor,
@@ -44,10 +44,11 @@ import 'prismjs/components/prism-yaml';
 import 'prismjs/components/prism-markdown';
 
 type Options = {
-  renderLanguageSelector: (
-    value: string,
-    onChange: (value: string) => void,
+  renderCodeBlock: (
+    language: string,
+    onChange: (language: string) => void,
     params: {
+      Content: () => ReactNode;
       element: CodeElement;
     },
   ) => React.ReactNode;
@@ -189,25 +190,25 @@ export class CodeBlockPlugin implements IPlugin {
     {
       type: CodeBlockPlugin.CODE_ELEMENT,
       render: (props: RenderElementProps, editor: Editor) => {
+        const { language } = props.element as CodeElement;
         const onChange = (language: string) => {
           const path = ReactEditor.findPath(editor, props.element);
           Transforms.setNodes<CodeElement>(editor, { language }, { at: path });
         };
 
+        const Content = (): ReactNode => {
+          return (
+            <CodeBlock {...props} element={props.element as CodeElement} />
+          );
+        };
+
         return (
-          <CodeBlock
-            {...props}
-            element={props.element as CodeElement}
-            renderLanguageSelector={(element) =>
-              this.options.renderLanguageSelector(
-                (props.element as CodeElement).language,
-                onChange,
-                {
-                  element: element as CodeElement,
-                },
-              )
-            }
-          />
+          <>
+            {this.options.renderCodeBlock(language, onChange, {
+              element: props.element as CodeElement,
+              Content,
+            })}
+          </>
         );
       },
     },

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

@@ -1,6 +1,4 @@
 .root {
-  border: 1px solid var(--kona-editor-border-color, #eee);
-  border-radius: 4px;
   overflow: hidden;
   font-family: monospace;
   display: flex;
@@ -9,7 +7,6 @@
 
 .content {
   display: flex;
-  background-color: var(--kona-editor-background-color, #fff);
 }
 
 .line {

package/src/plugins/CommandsPlugin/Menu.tsx

@@ -111,7 +111,6 @@ export const Menu = (props: Props) => {
         case 'Escape': {
           event.stopPropagation();
           $store.setKey('isOpen', false);
-          close();
           break;
         }
       }
@@ -166,7 +165,14 @@ export const Menu = (props: Props) => {
   return createPortal(
     renderMenu(
       <>
-        {store.isOpen && <div className={styles.backdrop} onClick={close} />}
+        {store.isOpen && (
+          <div
+            className={styles.backdrop}
+            onClick={() => {
+              $store.setKey('isOpen', false);
+            }}
+          />
+        )}
         <div
           ref={handleMenuLayout}
           style={style}

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

@@ -1,22 +1,15 @@
-:root {
-  --menu-background-color: #fff;
-  --menu-background-color-hover: #f9f9f9;
-  --menu-text-color: #444;
-  --menu-border-color: #ddd;
-}
-
 .menu {
   position: absolute;
-  color: var(--menu-text-color, #444);
+  color: var(--kona-editor-text-color);
   z-index: 31;
   top: -100000px;
   left: -100000px;
   opacity: 0;
   transform: scale(0.9);
   margin-top: -6px;
-  background-color: var(--menu-background-color, #fff);
+  background-color: var(--kona-editor-background-color, #fff);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.025);
-  border: 1px solid var(--menu-border-color, #ddd);
+  border: 1px solid var(--kona-editor-border-color, #ddd);
   border-radius: 4px;
   transition: transform 0.25s;
   display: flex;
@@ -24,6 +17,19 @@
   max-height: 200px;
   overflow-y: auto;
   font-size: 12px;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
+  }
 }
 
 .button {
@@ -36,15 +42,15 @@
   height: 40px;
   box-sizing: border-box;
   cursor: pointer;
-  color: var(--menu-text-color, #444);
+  color: var(--kona-editor-text-color, #444);
 }
 
 .button:hover {
-  background-color: var(--menu-background-color-hover, #f9f9f9);
+  background-color: var(--kona-editor-alt-background-color, #f9f9f9);
 }
 
 .active {
-  background-color: var(--menu-background-color-hover, #f9f9f9);
+  background-color: var(--kona-editor-alt-background-color, #f9f9f9);
 }
 
 .icon {
@@ -53,8 +59,8 @@
   opacity: 0.5;
   padding: 2px;
   font-size: 12px;
-  background: var(--menu-background-color-hover, #f9f9f9);
-  color: var(--menu-text-color, #444);
+  background: var(--kona-editor-alt-background-color, #f9f9f9);
+  color: var(--kona-editor-text-color, #444);
   border-radius: 4px;
   display: inline-flex;
   align-items: center;

package/src/plugins/HeadingsPlugin/HeadingsPlugin.tsx

@@ -1,4 +1,4 @@
-import { Editor, Element, Transforms } from 'slate';
+import { Descendant, Editor, Element, Transforms } from 'slate';
 import { jsx } from 'slate-hyperscript';
 import type { RenderElementProps } from 'slate-react';
 import type { IPlugin } from '../../types';
@@ -25,6 +25,14 @@ export class HeadingsPlugin implements IPlugin {
           );
         }
       },
+      serialize: (node: Descendant, children) => {
+        if (
+          Element.isElement(node) &&
+          node.type === HeadingsPlugin.HeadingLevel1
+        ) {
+          return `<h1>${children}</h1>`;
+        }
+      },
     },
     {
       type: HeadingsPlugin.HeadingLevel2,
@@ -42,6 +50,14 @@ export class HeadingsPlugin implements IPlugin {
           );
         }
       },
+      serialize: (node: Descendant, children) => {
+        if (
+          Element.isElement(node) &&
+          node.type === HeadingsPlugin.HeadingLevel2
+        ) {
+          return `<h2>${children}</h2>`;
+        }
+      },
     },
     {
       type: HeadingsPlugin.HeadingLevel3,
@@ -59,6 +75,14 @@ export class HeadingsPlugin implements IPlugin {
           );
         }
       },
+      serialize: (node: Descendant, children) => {
+        if (
+          Element.isElement(node) &&
+          node.type === HeadingsPlugin.HeadingLevel3
+        ) {
+          return `<h3>${children}</h3>`;
+        }
+      },
     },
   ];
 

package/src/plugins/LinksPlugin/LinksPlugin.tsx

@@ -56,6 +56,14 @@ export class LinksPlugin implements IPlugin {
           />
         );
       },
+      serialize: (element, children) => {
+        if (
+          Element.isElement(element) &&
+          element.type === LinksPlugin.LINK_TYPE
+        ) {
+          return `<a href="${(element as LinkElement).url}">${children}</a>`;
+        }
+      },
       deserialize: (element: HTMLElement, children) => {
         if (element.tagName === 'A') {
           const url = element.getAttribute('href') || '';

package/src/plugins/ListsPlugin/ListsPlugin.tsx

@@ -134,6 +134,11 @@ export class ListsPlugin implements IPlugin {
           </ul>
         );
       },
+      serialize: (element, children) => {
+        if (element.type === ListsPlugin.BULLETED_LIST_ELEMENT) {
+          return `<ul>${children}</ul>`;
+        }
+      },
       deserialize: (element: HTMLElement, children) => {
         const { nodeName } = element;
         if (nodeName === 'UL') {
@@ -154,6 +159,11 @@ export class ListsPlugin implements IPlugin {
           </ol>
         );
       },
+      serialize: (element, children) => {
+        if (element.type === ListsPlugin.NUMBERED_LIST_ELEMENT) {
+          return `<ol>${children}</ol>`;
+        }
+      },
       deserialize: (element: HTMLElement, children) => {
         const { nodeName } = element;
         if (nodeName === 'OL') {
@@ -174,6 +184,11 @@ export class ListsPlugin implements IPlugin {
           </li>
         );
       },
+      serialize: (element, children) => {
+        if (element.type === ListsPlugin.BULLETED_LIST_ELEMENT) {
+          return `<li>${children}</li>`;
+        }
+      },
       deserialize: (element: HTMLElement, children) => {
         const { nodeName } = element;
         if (nodeName === 'LI') {

package/src/types.ts

@@ -1,11 +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';
 
@@ -60,6 +54,7 @@ export type Leaf<T extends Editor, TLeaf extends CustomText = CustomText> = {
     editor: T,
   ) => ReactElement | null;
   isVoid?: boolean;
+  serialize?: Serialize;
   deserialize?: Deserialize;
 };
 
@@ -72,15 +67,16 @@ export type UiParams = {
 };
 
 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,