@markput/react 0.1.0 → 0.3.0

package/README.md

@@ -1,8 +1,15 @@
-# [Marked Input](https://marked-input.vercel.app) · [![npm version](https://img.shields.io/npm/v/@markput/react.svg?style=flat)](https://www.npmjs.com/package/@markput/react) [![min zipped size](https://img.shields.io/bundlephobia/minzip/@markput/react)](https://bundlephobia.com/package/@markput/react) [![Storybook](https://gw.alipayobjects.com/mdn/ob_info/afts/img/A*CQXNTZfK1vwAAAAAAAAAAABjAQAAAQ/original)](https://marked-input.vercel.app)
+# [Marked Input](https://marked-input.vercel.app)
+
+[![npm version](https://img.shields.io/npm/v/@markput/react.svg?style=flat&label=react)](https://www.npmjs.com/package/@markput/react) [![npm version](https://img.shields.io/npm/v/@markput/vue.svg?style=flat&label=vue)](https://www.npmjs.com/package/@markput/vue) [![min zipped size](https://img.shields.io/bundlephobia/minzip/@markput/react?label=react+gzip)](https://bundlephobia.com/package/@markput/react) [![min zipped size](https://img.shields.io/bundlephobia/minzip/@markput/vue?label=vue+gzip)](https://bundlephobia.com/package/@markput/vue) [![Storybook](https://gw.alipayobjects.com/mdn/ob_info/afts/img/A*CQXNTZfK1vwAAAAAAAAAAABjAQAAAQ/original)](https://marked-input.vercel.app)
 
 <img width="521" alt="image" src="https://user-images.githubusercontent.com/37639183/182974441-49e4b247-449a-47ba-a090-2cb3aab7ce44.png">
 
-A React component that lets you combine editable text with any component using annotated text.
+A set of framework adapters that let you combine editable text with custom components using annotated text.
+
+Currently supported packages:
+
+- `@markput/react`
+- `@markput/vue`
 
 **[Documentation](https://markput.vercel.app)** **[Storybook](https://marked-input.vercel.app)**
 
@@ -24,10 +31,12 @@ A React component that lets you combine editable text with any component using a
 
 ## Installation
 
-You can install the package via npm:
+Install the package for your framework:
 
 ```
-npm install @markput/react
+pnpm add @markput/react
+# or
+pnpm add @markput/vue
 ```
 
 ## Contributing

package/index.d.ts

@@ -1,27 +1,30 @@
 import { annotate } from '@markput/core';
+import { Block } from '@markput/core';
 import type { ComponentType } from 'react';
-import type { CoreMarkputProps } from '@markput/core';
 import type { CoreOption } from '@markput/core';
 import type { CSSProperties } from 'react';
 import { denote } from '@markput/core';
-import type { DependencyList } from 'react';
 import type { ElementType } from 'react';
-import type { EventKey } from '@markput/core';
-import type { ForwardedRef } from 'react';
 import type { HTMLAttributes } from 'react';
-import type { Listener } from '@markput/core';
+import { JSX } from 'react/jsx-runtime';
+import { MarkHandler } from '@markput/core';
+import { MarkputHandler } from '@markput/core';
 import { MarkToken } from '@markput/core';
 import { Markup } from '@markput/core';
 import type { OverlayMatch } from '@markput/core';
 import type { OverlayTrigger } from '@markput/core';
 import type { ReactNode } from 'react';
+import type { Ref } from 'react';
 import type { RefObject } from 'react';
-import type { Store } from '@markput/core';
+import { reorderBlocks } from '@markput/core';
+import { splitTokensIntoBlocks } from '@markput/core';
 import { TextToken } from '@markput/core';
 import { Token } from '@markput/core';
 
 export { annotate }
 
+export { Block }
+
 /**
  * Data attributes with automatic camelCase to kebab-case conversion
  */
@@ -29,23 +32,7 @@ declare type DataAttributes = Record<`data${Capitalize<string>}`, string | numbe
 
 export { denote }
 
-/**
- * @function
- */
-export declare const MarkedInput: MarkedInputComponent;
-
-export declare interface MarkedInputComponent {
-    <TMarkProps = MarkProps, TOverlayProps = OverlayProps>(props: MarkedInputProps<TMarkProps, TOverlayProps>): JSX.Element | null;
-    displayName?: string;
-}
-
-export declare interface MarkedInputHandler {
-    /** Container element */
-    readonly container: HTMLDivElement | null;
-    /** Overlay element if exists */
-    readonly overlay: HTMLElement | null;
-    focus(): void;
-}
+export declare function MarkedInput<TMarkProps = MarkProps, TOverlayProps = OverlayProps>(props: MarkedInputProps<TMarkProps, TOverlayProps>): JSX.Element;
 
 /**
  * Props for MarkedInput component.
@@ -54,7 +41,7 @@ export declare interface MarkedInputHandler {
  * @template TOverlayProps - Type of props for the global Overlay component
  *
  * @example
- * ```typescript
+ * ```tsx
  * <MarkedInput<ChipProps>
  *   Mark={Chip}
  *   options={[{
@@ -64,9 +51,9 @@ export declare interface MarkedInputHandler {
  * />
  * ```
  */
-export declare interface MarkedInputProps<TMarkProps = MarkProps, TOverlayProps = OverlayProps> extends CoreMarkputProps {
+export declare interface MarkedInputProps<TMarkProps = MarkProps, TOverlayProps = OverlayProps> {
     /** Ref to handler */
-    ref?: ForwardedRef<MarkedInputHandler>;
+    ref?: Ref<MarkputHandler>;
     /** Global component used for rendering markups (fallback for option.mark.slot) */
     Mark?: ComponentType<TMarkProps>;
     /** Global component used for rendering overlays (fallback for option.overlay.slot) */
@@ -83,14 +70,12 @@ export declare interface MarkedInputProps<TMarkProps = MarkProps, TOverlayProps
     style?: CSSProperties;
     /**
      * Override internal components using slots
-     * @example
-     * slots={{ container: 'div', span: 'span' }}
+     * @example slots={{ container: 'div', span: 'span' }}
      */
     slots?: Slots;
     /**
      * Props to pass to slot components
-     * @example
-     * slotProps={{ container: { onKeyDown: handler }, span: { className: 'custom' } }}
+     * @example slotProps={{ container: { onKeyDown: handler }, span: { className: 'custom' } }}
      */
     slotProps?: SlotProps;
     /**
@@ -98,48 +83,21 @@ export declare interface MarkedInputProps<TMarkProps = MarkProps, TOverlayProps
      * @default 'change'
      */
     showOverlayOn?: OverlayTrigger;
-}
-
-export declare class MarkHandler<T extends HTMLElement = HTMLElement> {
-    #private;
-    readonly ref: RefObject<T>;
+    /** Annotated text with markups */
+    value?: string;
+    /** Initial value for uncontrolled mode */
+    defaultValue?: string;
+    /** Change event handler */
+    onChange?: (value: string) => void;
+    /** Read-only mode */
     readOnly?: boolean;
-    constructor(param: {
-        ref: RefObject<T>;
-        store: Store;
-        token: MarkToken;
-    });
-    /** Displayed text of the mark */
-    get content(): string;
-    set content(value: string);
-    /** Data value associated with the mark */
-    get value(): string | undefined;
-    set value(value: string | undefined);
-    /** Optional metadata for the mark */
-    get meta(): string | undefined;
-    set meta(value: string | undefined);
-    /** Nesting depth (0 for root-level marks) */
-    get depth(): number;
-    /** Whether this mark has nested children */
-    get hasChildren(): boolean;
-    /** Parent mark token (undefined for root-level marks) */
-    get parent(): MarkToken | undefined;
-    /** Child tokens of this mark */
-    get tokens(): Token[];
-    /** Update multiple properties in a single operation */
-    change: (props: {
-        content: string;
-        value?: string;
-        meta?: string;
-    }) => void;
-    /** Delete this mark from the editor */
-    remove: () => void;
+    /** Enable Notion-like draggable blocks with drag handles for reordering */
+    block?: boolean;
 }
 
+export { MarkHandler }
+
 declare interface MarkOptions {
-    /**
-     * @default false
-     */
     controlled?: boolean;
 }
 
@@ -159,6 +117,8 @@ export declare interface MarkProps {
     children?: ReactNode;
 }
 
+export { MarkputHandler }
+
 export { MarkToken }
 
 export { Markup }
@@ -189,27 +149,15 @@ declare interface Option_2<TMarkProps = MarkProps, TOverlayProps = OverlayProps>
 export { Option_2 as Option }
 
 export declare interface OverlayHandler {
-    /**
-     * Style with caret absolute position. Used for placing an overlay.
-     */
     style: {
         left: number;
         top: number;
     };
-    /**
-     * Used for close overlay.
-     */
     close: () => void;
-    /**
-     * Used for insert an annotation instead a triggered value.
-     */
     select: (value: {
         value: string;
         meta?: string;
     }) => void;
-    /**
-     * Overlay match details
-     */
     match: OverlayMatch<Option_2>;
     ref: RefObject<HTMLElement>;
 }
@@ -226,6 +174,8 @@ export declare interface OverlayProps {
     data?: string[];
 }
 
+export { reorderBlocks }
+
 /**
  * Props for each slot component
  */
@@ -246,14 +196,12 @@ declare interface Slots {
     span?: ElementType<HTMLAttributes<HTMLSpanElement>>;
 }
 
+export { splitTokensIntoBlocks }
+
 export { TextToken }
 
 export { Token }
 
-export declare function useListener<T>(key: EventKey<T>, listener: Listener<T>, deps?: DependencyList): void;
-
-export declare function useListener<K extends keyof HTMLElementEventMap>(key: K, listener: Listener<HTMLElementEventMap[K]>, deps?: DependencyList): void;
-
 export declare const useMark: <T extends HTMLElement = HTMLElement>(options?: MarkOptions) => MarkHandler<T>;
 
 export declare function useOverlay(): OverlayHandler;