@use-kona/editor 0.1.2 → 0.1.4

package/src/examples/icons/heading3.tsx

@@ -1,27 +0,0 @@
-import { IconProps } from './types';
-
-export const Heading3Icon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-h-3"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M19 14a2 2 0 1 0 -2 -2" />
-    <path d="M17 16a2 2 0 1 0 2 -2" />
-    <path d="M4 6v12" />
-    <path d="M12 6v12" />
-    <path d="M11 18h2" />
-    <path d="M3 18h2" />
-    <path d="M4 12h8" />
-    <path d="M3 6h2" />
-    <path d="M11 6h2" />
-  </svg>
-);

package/src/examples/icons/italic.tsx

@@ -1,21 +0,0 @@
-import { IconProps } from './types';
-
-export const ItalicIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-italic"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M11 5l6 0" />
-    <path d="M7 19l6 0" />
-    <path d="M14 5l-4 14" />
-  </svg>
-);

package/src/examples/icons/link.tsx

@@ -1,21 +0,0 @@
-import { IconProps } from './types';
-
-export const LinkIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-link"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M9 15l6 -6" />
-    <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-    <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-  </svg>
-);

package/src/examples/icons/ol.tsx

@@ -1,23 +0,0 @@
-import type { IconProps } from './types';
-
-export const OlIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-list-numbers"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M11 6h9" />
-    <path d="M11 12h9" />
-    <path d="M12 18h8" />
-    <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4" />
-    <path d="M6 10v-6l-2 2" />
-  </svg>
-);

package/src/examples/icons/strikethrough.tsx

@@ -1,20 +0,0 @@
-import { IconProps } from './types';
-
-export const StrikethroughIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-strikethrough"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M5 12l14 0" />
-    <path d="M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1 -4 -1.5" />
-  </svg>
-);

package/src/examples/icons/text.tsx

@@ -1,18 +0,0 @@
-import type { IconProps } from './types';
-
-export const TextIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    fill="none"
-    stroke="currentColor"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth={1.25}
-    viewBox="0 0 24 24"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" />
-    <path d="M4 6h16M4 12h10M4 18h14" />
-  </svg>
-);

package/src/examples/icons/types.ts

@@ -1,3 +0,0 @@
-export type IconProps = {
-  size?: number;
-};

package/src/examples/icons/ul.tsx

@@ -1,24 +0,0 @@
-import { IconProps } from './types';
-
-export const UlIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-list"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M9 6l11 0" />
-    <path d="M9 12l11 0" />
-    <path d="M9 18l11 0" />
-    <path d="M5 6l0 .01" />
-    <path d="M5 12l0 .01" />
-    <path d="M5 18l0 .01" />
-  </svg>
-);

package/src/examples/icons/underline.tsx

@@ -1,20 +0,0 @@
-import { IconProps } from './types';
-
-export const UnderlineIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-underline"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M7 5v5a5 5 0 0 0 10 0v-5" />
-    <path d="M5 19h14" />
-  </svg>
-);

package/src/examples/store.ts

@@ -1,14 +0,0 @@
-import { map } from 'nanostores';
-
-type FloatingMenuMode = 'main' | 'link' | 'colors';
-
-type Store = {
-  isFloatingMenuOpen: boolean;
-  floatingMenuMode: FloatingMenuMode;
-  url?: string;
-};
-
-export const $store = map<Store>({
-  isFloatingMenuOpen: false,
-  floatingMenuMode: 'main',
-});

package/src/examples/styles.module.css

@@ -1,77 +0,0 @@
-body {
-  --background-color: #fff;
-  --kona-editor-background-color: #fff;
-  --text-color: #444;
-  --kona-editor-text-color: #444;
-  --border-color: #ddd;
-  --kona-editor-border-color: #ddd;
-}
-
-:global(body.dark-theme) {
-  background-color: #222;
-  color: #eee;
-  --background-color: #222;
-  --text-color: #eee;
-  --border-color: #000;
-}
-
-.root {
-  width: 600px;
-  height: calc(100vh - 128px * 2);
-  overflow: hidden;
-  max-height: 100vh;
-  margin: 32px auto;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-
-  [role="textbox"] {
-    outline: none;
-  }
-}
-
-.menu {
-  padding: 8px;
-  display: flex;
-  column-gap: 4px;
-}
-
-.button {
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
-  outline: none;
-  background-color: transparent;
-  border: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: inherit;
-  transition: background-color 0.25s;
-}
-
-.button.active {
-  background-color: #eee;
-}
-
-.divider {
-  display: inline-block;
-  background-color: #ccc;
-  width: 1px;
-  height: 24px;
-}
-
-.floating {
-  height: 24px;
-}
-
-.hint {
-  background-color: #fff;
-  color: #444;
-  padding: 2px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
-}

package/src/examples/text.tsx

@@ -1,133 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-
-import {
-  createHyperscript,
-  createText,
-  type HyperscriptShorthands,
-} from 'slate-hyperscript';
-import {
-  CodeBlockPlugin,
-  HeadingsPlugin,
-  LinksPlugin,
-  ListsPlugin,
-} from '../plugins';
-
-const elements: HyperscriptShorthands = {
-  paragraph: { type: 'paragraph' },
-  heading1: { type: HeadingsPlugin.HeadingLevel1 },
-  heading2: { type: HeadingsPlugin.HeadingLevel2 },
-  heading3: { type: HeadingsPlugin.HeadingLevel3 },
-  numberedList: { type: ListsPlugin.NUMBERED_LIST_ELEMENT },
-  bulletedList: { type: ListsPlugin.BULLETED_LIST_ELEMENT },
-  listItem: { type: ListsPlugin.LIST_ITEM_ELEMENT },
-  codeBlock: { type: CodeBlockPlugin.CODE_ELEMENT },
-  codeBlockLine: { type: CodeBlockPlugin.CODE_LINE_ELEMENT },
-  hlink: { type: LinksPlugin.LINK_TYPE },
-};
-
-const creators = {
-  htext: createText,
-};
-
-const jsx = createHyperscript({ elements, creators });
-
-export const text = (
-  <fragment>
-    <heading1>About</heading1>
-    <paragraph>
-      <htext bold italic>
-        Kona Editor
-      </htext>{' '}
-      is a text editor based on Slate.js that I use in{' '}
-      <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>
-      <listItem>
-        I had a lot of <htext strikethrough>difficulties</htext> fun while
-        building this editor and there were always not enough examples of how to
-        do it right. I wanted to make a little contribution to the community, so
-        others could use my code as a reference.
-      </listItem>
-      <listItem>
-        I have always wanted to try to build something open-sourced, but there
-        have not been enough good ideas on what to build. I think that an editor
-        is a pretty decent starting point.
-      </listItem>
-    </numberedList>
-    <heading2>Usage</heading2>
-    <codeBlock language="tsx">
-      <codeBlockLine>{`import { KonaEditor } from '@use-kona/editor';`}</codeBlockLine>
-      <codeBlockLine> </codeBlockLine>
-      <codeBlockLine>{`const App = () => {`}</codeBlockLine>
-      <codeBlockLine>{`  return (`}</codeBlockLine>
-      <codeBlockLine>{`    <KonaEditor`}</codeBlockLine>
-      <codeBlockLine>{`      initialValue={initialValue}`}</codeBlockLine>
-      <codeBlockLine>{`      plugins={plugins}`}</codeBlockLine>
-      <codeBlockLine>{`      onChange={handleChange}`}</codeBlockLine>
-      <codeBlockLine>{`     />`}</codeBlockLine>
-      <codeBlockLine>{`  )`}</codeBlockLine>
-      <codeBlockLine>{`}`}</codeBlockLine>
-    </codeBlock>
-    <paragraph>
-      Defining the list of plugins might be a little tricky, but I've tried to
-      cover everything you'll need in docs.
-    </paragraph>
-    <heading2>List of plugins</heading2>
-    <heading3>BasicFormattingPlugin</heading3>
-    <paragraph>
-      Allows to use <htext bold>bold</htext>, <htext italic>italic</htext>,{' '}
-      <htext underline>underlined</htext> and{' '}
-      <htext strikethrough>strikethrough</htext> text
-    </paragraph>
-
-    <heading3>BreaksPlugin</heading3>
-    <paragraph>
-      Overrides default Slate behavior by breaking custom block types when user
-      presses Enter.
-    </paragraph>
-
-    <heading3>CodeBlockPlugin</heading3>
-    <paragraph>Adds support for code blocks.</paragraph>
-
-    <heading3>CommandsPlugin</heading3>
-    <paragraph>Adds Notion-style menu with custom list of commands</paragraph>
-
-    <heading3>DnDPlugin</heading3>
-    <paragraph>Allows reordering blocks by drag'n'dropping them</paragraph>
-
-    <heading3>FloatingMenuPlugin</heading3>
-    <paragraph>Adds menu which is shown when user selects a text</paragraph>
-
-    <heading3>HeadingsPlugin</heading3>
-    <paragraph>Adds three levels of headings</paragraph>
-
-    <heading3>HighlightsPlugin</heading3>
-    <paragraph>Allows highlighting selected text with a custom color</paragraph>
-
-    <heading3>LinksPlugin</heading3>
-    <paragraph>
-      Gives user ability to convert the selected text into a link
-    </paragraph>
-
-    <heading3>MenuPlugin</heading3>
-    <paragraph>Adds pinned to the top menu with custom commands</paragraph>
-
-    <heading3>NodeIdPlugin</heading3>
-    <paragraph>Assigns a unique id to each block</paragraph>
-
-    <heading3>PlaceholderPlugin</heading3>
-    <paragraph>
-      Allows to setup a custom placeholder for the selected line
-    </paragraph>
-
-    <heading3>ShortcutsPlugin</heading3>
-    <paragraph>
-      Converts some popular markdown shortcuts to a custom node
-    </paragraph>
-
-    <heading3>TableOfContentsPlugin</heading3>
-    <paragraph>Shows a quick map of headings inside the document</paragraph>
-  </fragment>
-);

package/src/examples/ui/Button/Button.tsx

@@ -1,34 +0,0 @@
-import { forwardRef, type ReactNode } from 'react';
-import { ButtonWrapper } from './ButtonWrapper';
-
-type ButtonProps = {
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  size?: 'sm' | 'md' | 'lg';
-  variant?: 'primary' | 'secondary' | 'danger' | 'transparent';
-  children: ReactNode;
-  disabled?: boolean;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'>;
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const {
-      size = 'md',
-      variant = 'secondary',
-      onClick = () => {},
-      children,
-      ...rest
-    } = props;
-
-    return (
-      <ButtonWrapper
-        ref={ref}
-        size={size}
-        onClick={onClick}
-        variant={variant}
-        {...rest}
-      >
-        {children}
-      </ButtonWrapper>
-    );
-  },
-);

package/src/examples/ui/Button/ButtonWrapper.tsx

@@ -1,22 +0,0 @@
-import { forwardRef } from 'react';
-import styles from './styles.module.css';
-
-type ButtonWrapperProps = {
-  size: 'sm' | 'md' | 'lg';
-  variant?: 'primary' | 'secondary' | 'transparent' | 'danger';
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-export const ButtonWrapper = forwardRef<HTMLButtonElement, ButtonWrapperProps>((props, ref) => {
-  const { size, variant = 'secondary', className, ...rest } = props;
-
-  const sizeClass = styles[`size${size.charAt(0).toUpperCase()}${size.slice(1)}`];
-  const variantClass = styles[variant];
-
-  return (
-    <button
-      ref={ref}
-      className={`${styles.button} ${sizeClass} ${variantClass} ${className || ''}`}
-      {...rest}
-    />
-  );
-});

package/src/examples/ui/Button/index.ts

@@ -1,2 +0,0 @@
-export { Button } from './Button';
-export { ButtonWrapper } from './ButtonWrapper';

package/src/examples/ui/Button/styles.module.css

@@ -1,75 +0,0 @@
-.button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  column-gap: 4px;
-  font-size: 12px;
-  user-select: none;
-  outline: none;
-  border-width: 1px;
-  border-style: solid;
-  transition:
-    background-color,
-    border 0.1s ease-in-out;
-  border-radius: 4px;
-}
-
-/* Size variants */
-.sizeSm {
-  height: 28px;
-  padding: 4px 4px;
-}
-
-.sizeMd {
-  height: 32px;
-  padding: 4px 8px;
-}
-
-.sizeLg {
-  height: 36px;
-  padding: 4px 12px;
-}
-
-.secondary {
-  color: var(--kona-editor-text-color, #444);
-  background-color: var(--kona-editor-background-color, #fff);
-  border-color: var(--kona-editor-border-color, #ddd);
-}
-
-.secondary:disabled {
-  color: #999999;
-  background-color: #f0f0f0;
-}
-
-.secondary:focus {
-  outline: 1px solid #0066cc;
-  border-color: transparent;
-}
-
-.secondary:hover:not(:disabled) {
-  background-color: var(--kona-editor-background-color, #f0f0f0);
-}
-
-.transparent {
-  color: #333333;
-  background-color: transparent;
-  border-color: transparent;
-}
-
-.transparent:disabled {
-  color: #999999;
-}
-
-.transparent:focus {
-  outline: 1px solid #0066cc;
-  border-color: transparent;
-}
-
-.transparent:hover:not(:disabled) {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-
-/* Active state for all buttons */
-.button:active:not(:disabled) {
-  transform: scale(0.95);
-}

package/src/examples/ui/Button/types.ts

@@ -1 +0,0 @@
-export type ButtonVariant = 'primary' | 'secondary' | 'transparent'

package/src/examples/ui/Dropdown/Dropdown.tsx

@@ -1,101 +0,0 @@
-import {
-  type JSX,
-  type RefObject,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-import { Menu, type MenuConfig } from '../Menu';
-import { useMenuPosition } from '../useMenuPosition';
-
-type ChildrenProps = { ref: RefObject<any>; onClick: () => void };
-
-type DropdownProps = {
-  config: MenuConfig;
-  children: (props: ChildrenProps) => React.ReactNode;
-  target?: HTMLElement;
-  Menu?: JSX.ElementType;
-  MenuBody?: JSX.ElementType;
-  onClose?: () => void;
-};
-
-export const Dropdown = (props: DropdownProps) => {
-  const {
-    config,
-    target,
-    children,
-    onClose = () => {},
-    Menu: MenuComponent,
-    MenuBody,
-  } = props;
-  const [rect, setRect] = useState<DOMRect>();
-  const [isOpen, setOpen] = useState(false);
-
-  const ref = useRef<HTMLElement>(null);
-  const menuRef = useRef<HTMLMenuElement>(null);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: we care only about isOpen
-  useLayoutEffect(() => {
-    if (ref.current) {
-      const rect = ref.current.getBoundingClientRect();
-      setRect(rect);
-    }
-  }, [isOpen]);
-
-  const coords = {
-    x: rect?.left ?? 0,
-    y: (rect?.top ?? 0) + (rect?.height ?? 0),
-  };
-
-  const [transform, newCoords] = useMenuPosition(coords, (context) => {
-    const [horizontal, vertical] = context.helpers.isWithinWindow();
-
-    if (!vertical) {
-      context.flip([false, true]).move(0, -(rect?.height ?? 0));
-    }
-
-    if (!horizontal) {
-      context.flip([true, false]).move(rect?.width ?? 0, 0);
-    }
-
-    return context.point;
-  });
-
-  const changeOpen = (value: boolean) => {
-    setOpen(value);
-    if (!value) {
-      onClose();
-    }
-  };
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: we don't care about all the deps
-  useLayoutEffect(() => {
-    if (menuRef.current) {
-      transform(menuRef.current);
-    }
-  }, [isOpen, rect?.left, rect?.top, config]);
-
-  const handleClick = () => {
-    changeOpen(!isOpen);
-  };
-
-  const handleToggle = (value?: boolean) => {
-    changeOpen(value === undefined ? !isOpen : value);
-  };
-
-  return (
-    <>
-      {children({ ref, onClick: handleClick })}
-      <Menu
-        target={target}
-        ref={menuRef}
-        Menu={MenuComponent}
-        MenuBody={MenuBody}
-        coords={[newCoords.x, newCoords.y]}
-        isOpen={isOpen}
-        config={config}
-        onToggle={handleToggle}
-      />
-    </>
-  );
-};

package/src/examples/ui/Dropdown/index.ts

@@ -1 +0,0 @@
-export { Dropdown } from './Dropdown';