@use-kona/editor 0.1.3 → 0.1.4

package/dist/examples/ui/Menu/MenuHotkey.js

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import styles_module from "./styles.module.js";
-const MenuHotkey = (props)=>{
-    const { children, className, ...rest } = props;
-    return /*#__PURE__*/ jsx("span", {
-        className: clsx(styles_module.menuHotkey, className),
-        ...rest,
-        children: children
-    });
-};
-export { MenuHotkey };

package/dist/examples/ui/Menu/MenuIcon.d.ts

@@ -1,6 +0,0 @@
-type MenuIconProps = {
-    children?: React.ReactNode;
-    className?: string;
-} & React.HTMLAttributes<HTMLSpanElement>;
-export declare const MenuIcon: (props: MenuIconProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/examples/ui/Menu/MenuIcon.js

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import styles_module from "./styles.module.js";
-const MenuIcon = (props)=>{
-    const { children, className, ...rest } = props;
-    return /*#__PURE__*/ jsx("span", {
-        className: clsx(styles_module.menuIcon, className),
-        ...rest,
-        children: children
-    });
-};
-export { MenuIcon };

package/dist/examples/ui/Menu/MenuItem.d.ts

@@ -1,6 +0,0 @@
-export declare const MenuItem: import("react").ForwardRefExoticComponent<{
-    children: React.ReactNode;
-    selectable?: boolean;
-    isSelected?: boolean;
-    danger?: boolean;
-} & import("react").HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;

package/dist/examples/ui/Menu/MenuItem.js

@@ -1,17 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { forwardRef } from "react";
-import styles_module from "./styles.module.js";
-const MenuItem = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { children, selectable = true, isSelected, danger, className, ...rest } = props;
-    return /*#__PURE__*/ jsx("li", {
-        ref: ref,
-        className: clsx(styles_module.menuItemRoot, !selectable && styles_module.menuItemRootNonSelectable, className),
-        ...rest,
-        children: /*#__PURE__*/ jsx("div", {
-            className: clsx(styles_module.menuItemContent, isSelected && styles_module.menuItemContentSelected, danger && styles_module.menuItemContentDanger),
-            children: children
-        })
-    });
-});
-export { MenuItem };

package/dist/examples/ui/Menu/MenuTitle.d.ts

@@ -1,6 +0,0 @@
-type MenuTitleProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-export declare const MenuTitle: (props: MenuTitleProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/examples/ui/Menu/MenuTitle.js

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import styles_module from "./styles.module.js";
-const MenuTitle = (props)=>{
-    const { children, className, ...rest } = props;
-    return /*#__PURE__*/ jsx("span", {
-        className: clsx(styles_module.menuTitle, className),
-        ...rest,
-        children: children
-    });
-};
-export { MenuTitle };

package/dist/examples/ui/Menu/SafeSpace.d.ts

@@ -1,6 +0,0 @@
-type Props = {
-    debug?: boolean;
-    rect?: DOMRect;
-};
-export declare const SafeSpace: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/examples/ui/Menu/SafeSpace.js

@@ -1,65 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-const SafeSpace = (props)=>{
-    const { rect, debug } = props;
-    const { x = 0, y = 0, height: h = 0, width: w = 0 } = rect || {};
-    const [mouseX, mouseY] = useMousePosition();
-    const isReversed = mouseX > x + w;
-    const width = isReversed ? mouseX - x - w : x - mouseX;
-    const height = h;
-    const style = {
-        width,
-        height: h,
-        top: y,
-        left: isReversed ? x + w : mouseX
-    };
-    const points = isReversed ? `0,0 ${width + 10},${mouseY - y} 0,${height}` : `0,${mouseY - y} ${width},0 ${width},${height}`;
-    return /*#__PURE__*/ jsx("svg", {
-        style: {
-            ...style,
-            pointerEvents: 'none',
-            zIndex: 20,
-            position: 'fixed'
-        },
-        children: /*#__PURE__*/ jsx("polygon", {
-            points: points,
-            fill: debug ? 'rgba(0,0,0,0.25)' : 'transparent',
-            pointerEvents: "all"
-        })
-    });
-};
-const useMousePosition = ()=>{
-    const [mousePosition, setMousePosition] = useState([
-        0,
-        0
-    ]);
-    useEffect(()=>{
-        const updateMousePosition = (ev)=>{
-            setMousePosition([
-                ev.clientX,
-                ev.clientY
-            ]);
-        };
-        const throttledUpdateMousePosition = throttle(updateMousePosition, 500);
-        document.addEventListener('mousemove', updateMousePosition, {
-            once: true
-        });
-        document.addEventListener('mousemove', throttledUpdateMousePosition);
-        return ()=>{
-            document.removeEventListener('mousemove', updateMousePosition);
-            document.removeEventListener('mousemove', throttledUpdateMousePosition);
-        };
-    }, []);
-    return mousePosition;
-};
-function throttle(callback, delay) {
-    let previousCall = Date.now();
-    return function(...args) {
-        const time = Date.now();
-        if (time - previousCall >= delay) {
-            previousCall = time;
-            callback.apply(this, args);
-        }
-    };
-}
-export { SafeSpace };

package/dist/examples/ui/Menu/index.d.ts

@@ -1,2 +0,0 @@
-export { Menu } from './Menu';
-export type { MenuConfig, MenuItem } from './types';

package/dist/examples/ui/Menu/index.js

@@ -1,2 +0,0 @@
-import { Menu } from "./Menu.js";
-export { Menu };

package/dist/examples/ui/Menu/styles.module.js

@@ -1,21 +0,0 @@
-import "./styles_module.css";
-const styles_module = {
-    delimiter: "delimiter-H74PdN",
-    menuItemRoot: "menuItemRoot-vjsxDP",
-    menuItemRootNonSelectable: "menuItemRootNonSelectable-mdpDzB",
-    menuItemContent: "menuItemContent-OQOO0C",
-    menuItemContentSelected: "menuItemContentSelected-NnTeYh",
-    menuItemContentDanger: "menuItemContentDanger-B4Xgia",
-    menuIcon: "menuIcon-mKDuXY",
-    menuTitle: "menuTitle-SCvohZ",
-    menuHotkey: "menuHotkey-iRqoZq",
-    menu: "menu-akaoJ1",
-    menuVisible: "menuVisible-LTECvx",
-    menuBody: "menuBody-AZ5eff",
-    menuScrollable: "menuScrollable-jCi9hq",
-    menuBackdrop: "menuBackdrop-Vz5Iiy",
-    menuEnterAnimation: "menuEnterAnimation-dOe8fd",
-    menuEnter: "menuEnter-q1aEn4",
-    menuExit: "menuExit-H1NPpL"
-};
-export { styles_module as default };

package/dist/examples/ui/Menu/styles_module.css

@@ -1,140 +0,0 @@
-.delimiter-H74PdN {
-  border-style: solid;
-  border-width: 1px 0 0;
-  border-color: var(--kona-editor-border-color);
-  width: 100%;
-  height: 1px;
-  margin: 0;
-}
-
-.menuItemRoot-vjsxDP {
-  cursor: pointer;
-  border-radius: 4px;
-  margin: 0;
-  padding: 0 4px;
-  list-style: none;
-}
-
-.menuItemRootNonSelectable-mdpDzB {
-  cursor: default;
-}
-
-.menuItemContent-OQOO0C {
-  user-select: none;
-  color: var(--kona-editor-text-color);
-  background-color: #0000;
-  border-radius: 4px;
-  align-items: center;
-  gap: 4px;
-  padding: 8px;
-  display: flex;
-}
-
-.menuItemContentSelected-NnTeYh {
-  color: #06c;
-  background-color: #e6f0ff;
-}
-
-.menuItemContentDanger-B4Xgia {
-  color: #c00;
-}
-
-.menuIcon-mKDuXY {
-  width: 16px;
-  height: 16px;
-  color: inherit;
-  justify-content: center;
-  align-items: center;
-  display: inline-flex;
-}
-
-.menuTitle-SCvohZ {
-  min-width: 70px;
-  color: inherit;
-  flex-grow: 1;
-}
-
-.menuHotkey-iRqoZq {
-  background-color: #0000000d;
-  border-radius: 4px;
-  justify-content: center;
-  align-items: center;
-  padding: 0 4px;
-  display: inline-flex;
-}
-
-.menu-akaoJ1 {
-  z-index: 13;
-  background-color: var(--kona-editor-background-color);
-  border: 1px solid var(--kona-editor-border-color);
-  box-sizing: border-box;
-  border-radius: 8px;
-  margin: 0;
-  padding: 4px 0;
-  position: absolute;
-  overflow: hidden;
-  box-shadow: 0 2px 8px #00000026;
-}
-
-.menuVisible-LTECvx {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.menuBody-AZ5eff {
-  flex-direction: column;
-  height: 100%;
-  display: flex;
-}
-
-.menuScrollable-jCi9hq {
-  flex-grow: 1;
-  overflow: hidden auto;
-}
-
-.menuScrollable-jCi9hq::-webkit-scrollbar {
-  background: #f5f5f5;
-  border-radius: 8px;
-  width: 6px;
-}
-
-.menuScrollable-jCi9hq::-webkit-scrollbar-thumb {
-  background: #ccc;
-  border-radius: 8px;
-}
-
-.menuBackdrop-Vz5Iiy {
-  z-index: 20;
-  background-color: #00000006;
-  position: fixed;
-  inset: 0;
-}
-
-.menuEnterAnimation-dOe8fd {
-  animation: .2s ease-in forwards menuEnter-q1aEn4;
-}
-
-@keyframes menuEnter-q1aEn4 {
-  from {
-    opacity: 0;
-    transform: scale(.95);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes menuExit-H1NPpL {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  to {
-    opacity: 0;
-    transform: scale(.95);
-  }
-}
-

package/dist/examples/ui/Menu/types.d.ts

@@ -1,16 +0,0 @@
-import { ReactNode } from 'react';
-export type MenuConfig = {
-    items?: MenuItem[];
-    header?: () => ReactNode;
-    footer?: () => ReactNode;
-    onOpen?: () => void;
-    onFocus?: () => void;
-};
-export type MenuItem = {
-    render: () => ReactNode;
-    selectable?: boolean;
-    autoClose?: boolean;
-    config?: MenuConfig;
-    danger?: boolean;
-    onSelect?: () => void;
-};

package/dist/examples/ui/useMenuPosition.d.ts

@@ -1,18 +0,0 @@
-export type Coords = [number, number];
-type Point = {
-    x: number;
-    y: number;
-};
-declare class Context {
-    private readonly p;
-    private rect;
-    constructor(p: Point, rect: DOMRect);
-    get point(): Point;
-    helpers: {
-        isWithinWindow: () => [boolean, boolean];
-    };
-    flip: ([horizontal, vertical]: [boolean, boolean]) => this;
-    move: (x: number, y: number) => this;
-}
-export declare const useMenuPosition: (point: Point, transform: (context: Context) => Point) => readonly [(element: HTMLElement) => void, Point];
-export {};

package/dist/examples/ui/useMenuPosition.js

@@ -1,51 +0,0 @@
-import { useCallback, useState } from "react";
-class Context {
-    p;
-    rect;
-    constructor(p, rect){
-        this.p = {
-            x: p.x,
-            y: p.y
-        };
-        this.rect = rect;
-    }
-    get point() {
-        return this.p;
-    }
-    helpers = {
-        isWithinWindow: ()=>{
-            const left = this.p.x + this.rect.width;
-            return [
-                left < document.documentElement.clientWidth,
-                this.p.y + this.rect.height < document.documentElement.clientHeight
-            ];
-        }
-    };
-    flip = ([horizontal, vertical])=>{
-        if (horizontal) this.p.x -= this.rect.width;
-        if (vertical) this.p.y -= this.rect.height;
-        return this;
-    };
-    move = (x, y)=>{
-        this.p.x += x;
-        this.p.y += y;
-        return this;
-    };
-}
-const useMenuPosition = (point, transform)=>{
-    const [coords, setCoords] = useState(point);
-    const ref = useCallback((element)=>{
-        if (!element) return;
-        const rect = element.getBoundingClientRect();
-        const newCoords = transform(new Context(point, rect));
-        if (coords.x !== newCoords.x || coords.y !== newCoords.y) setCoords(newCoords);
-    }, [
-        point.x,
-        point.y
-    ]);
-    return [
-        ref,
-        coords
-    ];
-};
-export { useMenuPosition };

package/dist/examples/ui/useMergeRefs.d.ts

@@ -1,23 +0,0 @@
-/**
- * Merges multiple React refs into a single ref callback.
- *
- * @template T The type of the ref value
- * @param {React.Ref<T>[]} refs Array of refs to merge (can be both callback refs and object refs)
- * @returns {React.RefCallback<T> | null} A merged ref callback or null if all input refs are null
- *
- * @example
- * function Component() {
- *   const firstRef = useRef<HTMLDivElement>(null)
- *   const secondRef = useRef<HTMLDivElement>(null)
- *   const forwardedRef = useForwardedRef<HTMLDivElement>(null)
- *
- *   const mergedRef = useMergeRefs([firstRef, secondRef, forwardedRef])
- *
- *   return (
- *     <div ref={mergedRef}>
- *       This div will be referenced by all three refs
- *     </div>
- *   )
- * }
- */
-export declare const useMergeRefs: <T>(refs: React.Ref<T>[]) => ((refValue: T) => void) | null;

package/dist/examples/ui/useMergeRefs.js

@@ -1,11 +0,0 @@
-import { useMemo } from "react";
-const useMergeRefs = (refs)=>useMemo(()=>{
-        if (refs.every((ref)=>null == ref)) return null;
-        return (refValue)=>{
-            refs.forEach((ref)=>{
-                if ('function' == typeof ref) ref(refValue);
-                else if (null != ref) ref.current = refValue;
-            });
-        };
-    }, []);
-export { useMergeRefs };

package/src/examples/Backdrop.module.css

@@ -1,8 +0,0 @@
-.root {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-}

package/src/examples/Backdrop.tsx

@@ -1,16 +0,0 @@
-import { useStore } from '@nanostores/react';
-import styles from './Backdrop.module.css';
-import { $store } from './store';
-
-type Props = {
-  onClose: () => void;
-};
-
-export const Backdrop = (props: Props) => {
-  const { isFloatingMenuOpen } = useStore($store);
-  const { onClose } = props;
-
-  return isFloatingMenuOpen ? (
-    <div className={styles.root} onClick={onClose} />
-  ) : null;
-};

package/src/examples/CodeBlock.module.css

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

package/src/examples/CodeBlock.tsx

@@ -1,109 +0,0 @@
-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 { Button } from './ui/Button';
-import { Dropdown } from './ui/Dropdown';
-import { Menu as MenuBase, type MenuConfig } from './ui/Menu';
-
-const languages = [
-  { value: 'javascript', label: 'JavaScript' },
-  { value: 'typescript', label: 'TypeScript' },
-  { value: 'jsx', label: 'JSX' },
-  { value: 'tsx', label: 'TSX' },
-  { value: 'html', label: 'HTML' },
-  { value: 'css', label: 'CSS' },
-  { value: 'json', label: 'JSON' },
-  { value: 'python', label: 'Python' },
-  { value: 'java', label: 'Java' },
-  { value: 'c', label: 'C' },
-  { value: 'cpp', label: 'C++' },
-  { value: 'csharp', label: 'C#' },
-  { value: 'go', label: 'Go' },
-  { value: 'rust', label: 'Rust' },
-  { value: 'ruby', label: 'Ruby' },
-  { value: 'php', label: 'PHP' },
-  { value: 'bash', label: 'Bash' },
-  { value: 'sql', label: 'SQL' },
-  { value: 'markdown', label: 'Markdown' },
-  { value: 'yaml', label: 'YAML' },
-  { value: 'plaintext', label: 'Plain Text' },
-];
-
-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(element))
-      .map((nodeEntry) => nodeEntry[0].text)
-      .join('\n');
-
-    navigator.clipboard.writeText(text);
-  };
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: we don't care about other deps
-  const menuConfig: MenuConfig = useMemo(
-    () => ({
-      items: languages.map(({ label, value }) => ({
-        render: () => (
-          <>
-            <MenuBase.Icon>
-              {value === language && <CheckIcon size={16} />}
-            </MenuBase.Icon>
-            <MenuBase.Title>{label}</MenuBase.Title>
-          </>
-        ),
-        onSelect: () => {
-          onChange(value);
-        },
-      })),
-    }),
-    [language],
-  );
-  return (
-    <div className={styles.root}>
-      <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>
-  );
-};