@use-kona/editor 0.1.3 → 0.1.4

package/dist/examples/DragHandler.js

@@ -1,44 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { HeadingsPlugin, ListsPlugin } from "../plugins/index.js";
-import DragHandler_module from "./DragHandler.module.js";
-import { DragIcon } from "./icons/drag.js";
-const DragHandler = (props)=>{
-    switch(props.element.type){
-        case ListsPlugin.LIST_ITEM_ELEMENT:
-            return /*#__PURE__*/ jsx("div", {
-                className: DragHandler_module.dragHandler,
-                children: /*#__PURE__*/ jsx(DragIcon, {
-                    size: 16
-                })
-            });
-        case HeadingsPlugin.HeadingLevel1:
-            return /*#__PURE__*/ jsx("div", {
-                className: DragHandler_module.dragHandlerHeading1,
-                children: /*#__PURE__*/ jsx(DragIcon, {
-                    size: 16
-                })
-            });
-        case HeadingsPlugin.HeadingLevel2:
-            return /*#__PURE__*/ jsx("div", {
-                className: DragHandler_module.dragHandlerHeading2,
-                children: /*#__PURE__*/ jsx(DragIcon, {
-                    size: 16
-                })
-            });
-        case HeadingsPlugin.HeadingLevel3:
-            return /*#__PURE__*/ jsx("div", {
-                className: DragHandler_module.dragHandlerHeading3,
-                children: /*#__PURE__*/ jsx(DragIcon, {
-                    size: 16
-                })
-            });
-        default:
-            return /*#__PURE__*/ jsx("div", {
-                className: DragHandler_module.dragHandler,
-                children: /*#__PURE__*/ jsx(DragIcon, {
-                    size: 16
-                })
-            });
-    }
-};
-export { DragHandler };

package/dist/examples/DragHandler.module.js

@@ -1,8 +0,0 @@
-import "./DragHandler_module.css";
-const DragHandler_module = {
-    dragHandler: "dragHandler-H8B8NE",
-    dragHandlerHeading1: "dragHandlerHeading1-MaU64L",
-    dragHandlerHeading2: "dragHandlerHeading2-e8kwqj",
-    dragHandlerHeading3: "dragHandlerHeading3-Yd2WHq"
-};
-export { DragHandler_module as default };

package/dist/examples/DragHandler_module.css

@@ -1,18 +0,0 @@
-.dragHandler-H8B8NE {
-  cursor: grab;
-  position: absolute;
-  top: 9px;
-}
-
-.dragHandlerHeading1-MaU64L {
-  top: 10px;
-}
-
-.dragHandlerHeading2-e8kwqj {
-  top: 8px;
-}
-
-.dragHandlerHeading3-Yd2WHq {
-  top: 6px;
-}
-

package/dist/examples/Editor.d.ts

@@ -1,8 +0,0 @@
-import type { Descendant } from 'slate';
-type Props = {
-    initialValueType?: 'kona-editor' | 'html';
-    value?: any;
-    onChange?: (value: Descendant[]) => void;
-};
-export declare const ExampleEditor: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
-export {};

package/dist/examples/Editor.js

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

package/dist/examples/Editor.module.js

@@ -1,12 +0,0 @@
-import "./Editor_module.css";
-const Editor_module = {
-    root: "root-zl84ra",
-    button: "button-fdBqbh",
-    active: "active-xvaPVY",
-    divider: "divider-XDKye7",
-    floating: "floating-R_uFiU",
-    hint: "hint-zEtmE0",
-    editorToolbar: "editorToolbar-FXIohe",
-    backdrop: "backdrop-TUV3we"
-};
-export { Editor_module as default };

package/dist/examples/Editor_module.css

@@ -1,127 +0,0 @@
-.root-zl84ra {
-  border: 1px solid var(--kona-editor-border-color);
-  border-radius: 8px;
-  width: 600px;
-  height: calc(100vh - 256px);
-  max-height: 100vh;
-  overflow: hidden;
-}
-
-.root-zl84ra {
-  & [role="textbox"] {
-    outline: none;
-    padding: 16px;
-  }
-
-  & h1 {
-    font-size: 24px;
-    font-weight: 600;
-  }
-
-  & h2 {
-    font-size: 20px;
-    font-weight: 600;
-  }
-
-  & h3 {
-    font-size: 18px;
-    font-weight: 600;
-  }
-
-  & ol {
-    list-style: decimal;
-  }
-
-  & ul {
-    list-style: outside;
-  }
-
-  & li {
-    list-style-position: inside;
-  }
-}
-
-.button-fdBqbh {
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  color: inherit;
-  background-color: #0000;
-  border: none;
-  border-radius: 4px;
-  outline: none;
-  justify-content: center;
-  align-items: center;
-  margin: 0;
-  padding: 0;
-  transition: background-color .25s;
-  display: inline-flex;
-}
-
-.button-fdBqbh.active-xvaPVY {
-  background-color: #eee;
-}
-
-.divider-XDKye7 {
-  background-color: #ccc;
-  width: 1px;
-  height: 24px;
-  display: inline-block;
-}
-
-.floating-R_uFiU {
-  height: 24px;
-}
-
-.hint-zEtmE0 {
-  background-color: var(--background-color);
-  color: var(--text-color);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 2px;
-}
-
-.editorToolbar-FXIohe {
-  background-color: #f9f9f9;
-  justify-content: space-between;
-  column-gap: 4px;
-  padding: 8px;
-  display: flex;
-
-  & select {
-    color: inherit;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    outline: none;
-    padding: 4px;
-  }
-
-  & button {
-    cursor: pointer;
-    color: inherit;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    outline: none;
-    align-items: center;
-    padding: 4px;
-    display: inline-flex;
-  }
-}
-
-.backdrop-TUV3we {
-  z-index: 1;
-  position: fixed;
-  inset: 0;
-}
-
-.hint-zEtmE0 {
-  color: #444;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  padding: 2px;
-  box-shadow: 0 1px 3px #0000000f;
-}
-

package/dist/examples/Emoji.d.ts

@@ -1,5 +0,0 @@
-type Props = {
-    id: string;
-};
-export declare const Emoji: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/examples/Emoji.js

@@ -1,8 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import EmojiSelector_module from "./EmojiSelector.module.js";
-const Emoji = (props)=>/*#__PURE__*/ jsx("em-emoji", {
-        class: EmojiSelector_module.emoji,
-        id: props.id,
-        size: "16px"
-    });
-export { Emoji };

package/dist/examples/EmojiSelector.d.ts

@@ -1,16 +0,0 @@
-declare module 'react/jsx-runtime' {
-    namespace JSX {
-        interface IntrinsicElements {
-            'em-emoji': {
-                id: string;
-                size: string | number;
-                class?: string;
-            };
-        }
-    }
-}
-type Props = {
-    onConfirm: (emoji: any, query: any, editor: any) => void;
-};
-export declare const EmojiSelector: (props: Props) => import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/examples/EmojiSelector.js

@@ -1,91 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import data from "@emoji-mart/data";
-import { useStore } from "@nanostores/react";
-import clsx from "clsx";
-import { SearchIndex, init } from "emoji-mart";
-import { useEffect, useState } from "react";
-import { useSlateStatic } from "slate-react";
-import EmojiSelector_module from "./EmojiSelector.module.js";
-import { $store } from "./store.js";
-init({
-    data: data,
-    set: 'apple',
-    custom: [
-        {
-            id: 'custom',
-            name: 'Custom',
-            emojis: [
-                {
-                    id: 'kona',
-                    name: 'Kona',
-                    keywords: [
-                        'kona'
-                    ],
-                    skins: [
-                        {
-                            src: '/kona.svg'
-                        }
-                    ]
-                }
-            ]
-        }
-    ]
-});
-const EmojiSelector = (props)=>{
-    const { onConfirm } = props;
-    const editor = useSlateStatic();
-    const { emojiSearch } = useStore($store);
-    const [index, setIndex] = useState(-1);
-    const [items, setItems] = useState([]);
-    useEffect(()=>{
-        const search = async ()=>{
-            const emojis = await SearchIndex.search(emojiSearch);
-            setItems(emojis.slice(0, 10));
-            setIndex(0);
-        };
-        search();
-    }, [
-        emojiSearch
-    ]);
-    useEffect(()=>{
-        const handleKeyDown = (event)=>{
-            switch(event.key){
-                case 'ArrowRight':
-                    event.preventDefault();
-                    setIndex((index)=>(index + 1) % items.length);
-                    break;
-                case 'ArrowLeft':
-                    event.preventDefault();
-                    setIndex((index)=>(index - 1 + items.length) % items.length);
-                    break;
-                case 'Enter':
-                    event.preventDefault();
-                    onConfirm(items[index]?.id, emojiSearch, editor);
-                    break;
-            }
-        };
-        document.addEventListener('keydown', handleKeyDown, true);
-        return ()=>{
-            document.removeEventListener('keydown', handleKeyDown, true);
-        };
-    }, [
-        items,
-        index,
-        emojiSearch
-    ]);
-    if (!items.length) return null;
-    return /*#__PURE__*/ jsx("div", {
-        className: EmojiSelector_module.root,
-        children: items.map((item, idx)=>/*#__PURE__*/ jsx("span", {
-                className: clsx(EmojiSelector_module.emoji, {
-                    [EmojiSelector_module.selected]: idx === index
-                }),
-                children: /*#__PURE__*/ jsx("em-emoji", {
-                    class: EmojiSelector_module.emoji,
-                    id: item.id,
-                    size: "20px"
-                })
-            }, item.id))
-    });
-};
-export { EmojiSelector };

package/dist/examples/EmojiSelector.module.js

@@ -1,7 +0,0 @@
-import "./EmojiSelector_module.css";
-const EmojiSelector_module = {
-    root: "root-f7KjwY",
-    emoji: "emoji-kNlwVt",
-    selected: "selected-ONnfU2"
-};
-export { EmojiSelector_module as default };

package/dist/examples/EmojiSelector_module.css

@@ -1,36 +0,0 @@
-.root-f7KjwY {
-  background-color: var(--kona-editor-background-color);
-  border: 1px solid var(--kona-editor-border-color);
-  border-radius: 8px;
-  gap: 4px;
-  padding: 4px;
-  display: flex;
-}
-
-.emoji-kNlwVt {
-  cursor: pointer;
-  vertical-align: text-bottom;
-  border-radius: 4px;
-  justify-content: center;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-  display: inline-flex;
-
-  & span {
-    justify-content: center;
-    align-items: center;
-    width: 20px;
-    height: 20px;
-    display: inline-flex;
-  }
-
-  &:hover {
-    background-color: var(--kona-editor-alt-background-color);
-  }
-}
-
-.selected-ONnfU2 {
-  background-color: var(--kona-editor-alt-background-color);
-}
-

package/dist/examples/FloatingMenu.d.ts

@@ -1,19 +0,0 @@
-import type { MapStore } from 'nanostores';
-import type { Editor } from 'slate';
-type Mode = 'main' | 'link' | 'colors';
-type Props = {
-    $store: MapStore<{
-        isFloatingMenuOpen: boolean;
-        floatingMenuMode: Mode;
-        url?: string;
-    } & {
-        [key: string]: unknown;
-    }>;
-    editor: Editor;
-    commands: {
-        onClose: () => void;
-        onUpdate: () => void;
-    };
-};
-export declare const FloatingMenu: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};