@use-kona/editor 0.1.2 → 0.1.4

package/dist/examples/CodeBlock.module.js

@@ -1,9 +0,0 @@
-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/CodeBlock_module.css

@@ -1,66 +0,0 @@
-.root-qalHKY {
-  background-color: var(--kona-editor-alt-background-color);
-  border-radius: 8px;
-  flex-direction: column;
-  padding: 4px;
-  display: flex;
-}
-
-.button-NFVN8i {
-  cursor: pointer;
-  background-color: #0000;
-  border-radius: 4px;
-  outline: none;
-  justify-content: center;
-  align-items: center;
-  width: 20px;
-  height: 20px;
-  margin: 0;
-  padding: 0;
-  display: inline-flex;
-
-  &:active {
-    transform: scale(.9);
-  }
-}
-
-.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;
-  font-size: 14px;
-}
-
-.customMenu-PLCVVP {
-  background-color: var(--kona-editor-background-color);
-  border: 1px solid var(--kona-editor-border-color);
-  z-index: 21;
-  border-radius: 8px;
-  width: 200px;
-  max-height: 250px;
-  font-size: 12px;
-  position: absolute;
-  overflow-y: auto;
-  box-shadow: 0 1px 3px #00000006;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: none;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #00000040;
-    border-radius: 10px;
-  }
-}
-

package/dist/examples/DragBlock.d.ts

@@ -1,11 +0,0 @@
-import type { ConnectDragPreview, ConnectDragSource, ConnectDropTarget } from 'react-dnd';
-import type { RenderElementProps } from 'slate-react';
-type Props = {
-    props: RenderElementProps;
-    dragRef: ConnectDragSource;
-    dropRef: ConnectDropTarget;
-    previewRef: ConnectDragPreview;
-    position: 'top' | 'bottom' | null;
-};
-export declare const DragBlock: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/examples/DragBlock.js

@@ -1,38 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import DragBlock_module from "./DragBlock.module.js";
-import { DragHandler } from "./DragHandler.js";
-const DragBlock = (props)=>{
-    const { props: { attributes, element, children }, dragRef: drag, dropRef: drop, previewRef: preview, position } = props;
-    return /*#__PURE__*/ jsx("div", {
-        className: clsx(DragBlock_module.root, {
-            [DragBlock_module.top]: 'top' === position,
-            [DragBlock_module.bottom]: 'bottom' === position
-        }),
-        ...attributes,
-        children: /*#__PURE__*/ jsxs("div", {
-            className: DragBlock_module.block,
-            ref: (e)=>{
-                drop(preview(e));
-            },
-            children: [
-                /*#__PURE__*/ jsx("div", {
-                    className: DragBlock_module.drag,
-                    ref: (element)=>{
-                        drag(element);
-                    },
-                    contentEditable: false,
-                    children: /*#__PURE__*/ jsx(DragHandler, {
-                        attributes: attributes,
-                        element: element,
-                        children: children
-                    })
-                }),
-                /*#__PURE__*/ jsx("div", {
-                    children: children
-                })
-            ]
-        })
-    });
-};
-export { DragBlock };

package/dist/examples/DragBlock.module.js

@@ -1,9 +0,0 @@
-import "./DragBlock_module.css";
-const DragBlock_module = {
-    root: "root-QYAUnT",
-    top: "top-qIwygJ",
-    bottom: "bottom-K22AI8",
-    drag: "drag-v0MSZ1",
-    block: "block-y_k_tl"
-};
-export { DragBlock_module as default };

package/dist/examples/DragBlock_module.css

@@ -1,43 +0,0 @@
-.root-QYAUnT {
-  border-top: 2px solid #0000;
-  border-bottom: 2px solid #0000;
-  position: relative;
-}
-
-.top-qIwygJ {
-  border-top: 2px solid #3498db;
-}
-
-.bottom-K22AI8 {
-  border-bottom: 2px solid #3498db;
-}
-
-.drag-v0MSZ1 {
-  vertical-align: baseline;
-  cursor: move;
-  opacity: 0;
-  width: 16px;
-  line-height: 1.2;
-  transition: opacity .25s;
-  display: inline-block;
-}
-
-.block-y_k_tl {
-  border-radius: 4px;
-  grid-template-columns: 16px 1fr;
-  align-items: start;
-  column-gap: 8px;
-  padding: 4px 8px;
-  transition: background-color .25s;
-  display: grid;
-  position: relative;
-
-  &:hover {
-    background-color: #00000004;
-  }
-
-  &:hover .drag-v0MSZ1 {
-    opacity: 1;
-  }
-}
-

package/dist/examples/DragHandler.d.ts

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

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/FloatingMenu.d.ts

@@ -1,17 +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;
-    }>;
-    editor: Editor;
-    commands: {
-        onClose: () => void;
-        onUpdate: () => void;
-    };
-};
-export declare const FloatingMenu: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};