@markput/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Ruslan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+# [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)
+
+<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.
+
+**[Documentation](https://markput.vercel.app)** **[Storybook](https://marked-input.vercel.app)**
+
+## Feature
+
+- Powerful annotations tool: add, edit, remove, visualize
+- Nested marks support
+- Support for custom syntax patterns (e.g., HTML, markdown)
+- TypeScript
+- Support for any components
+- Flexible and customizable
+- Two ways to configure
+- Helpers for processing text
+- Hooks for advanced components
+- Button handling (Left, Right, Delete, Backspace, Esc)
+- Overlay with the suggestions component by default
+- Zero dependencies
+- Cross selection
+
+## Installation
+
+You can install the package via npm:
+
+```
+npm install @markput/react
+```
+
+## Contributing
+
+If you want to contribute, you are welcome! Create an issue or start a discussion.

package/index.css

@@ -0,0 +1 @@
+._Container_1lmfr_1{min-height:1.4em}._Container_1lmfr_1 span{outline:none;white-space:pre-wrap}._Suggestions_1lmfr_10{border:1px solid #ccc;max-height:186px;overflow-y:auto;padding-left:0;position:fixed;background:#fff;width:fit-content;min-width:100px;margin-top:0;margin-bottom:0;transition:1.1s ease-out;filter:blur(0);transform:scale(1);opacity:1;visibility:visible;color:#000;border-radius:4%;box-shadow:0 3px 6px -2px #0009}._Suggestions_1lmfr_10 li{padding:.5rem}._Suggestions_1lmfr_10 li:hover,._suggestionActive_1lmfr_38{background-color:#cce9ff;color:#2589f5;cursor:pointer}

package/index.d.ts

@@ -0,0 +1,261 @@
+import { annotate } 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 { 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 { RefObject } from 'react';
+import type { Store } from '@markput/core';
+import { TextToken } from '@markput/core';
+import { Token } from '@markput/core';
+
+export { annotate }
+
+/**
+ * Data attributes with automatic camelCase to kebab-case conversion
+ */
+declare type DataAttributes = Record<`data${Capitalize<string>}`, string | number | boolean | undefined>;
+
+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;
+}
+
+/**
+ * Props for MarkedInput component.
+ *
+ * @template TMarkProps - Type of props for the global Mark component
+ * @template TOverlayProps - Type of props for the global Overlay component
+ *
+ * @example
+ * ```typescript
+ * <MarkedInput<ChipProps>
+ *   Mark={Chip}
+ *   options={[{
+ *     markup: '@[__value__]',
+ *     mark: { label: 'Click me' }
+ *   }]}
+ * />
+ * ```
+ */
+export declare interface MarkedInputProps<TMarkProps = MarkProps, TOverlayProps = OverlayProps> extends CoreMarkputProps {
+    /** Ref to handler */
+    ref?: ForwardedRef<MarkedInputHandler>;
+    /** 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) */
+    Overlay?: ComponentType<TOverlayProps>;
+    /**
+     * Configuration options for markups and overlays.
+     * Each option can specify its own slot component via mark.slot or overlay.slot.
+     * Falls back to global Mark/Overlay components when not specified.
+     */
+    options?: Option_2<TMarkProps, TOverlayProps>[];
+    /** Additional classes */
+    className?: string;
+    /** Additional style */
+    style?: CSSProperties;
+    /**
+     * Override internal components using slots
+     * @example
+     * slots={{ container: 'div', span: 'span' }}
+     */
+    slots?: Slots;
+    /**
+     * Props to pass to slot components
+     * @example
+     * slotProps={{ container: { onKeyDown: handler }, span: { className: 'custom' } }}
+     */
+    slotProps?: SlotProps;
+    /**
+     * Events that trigger overlay display
+     * @default 'change'
+     */
+    showOverlayOn?: OverlayTrigger;
+}
+
+export declare class MarkHandler<T extends HTMLElement = HTMLElement> {
+    #private;
+    readonly ref: RefObject<T>;
+    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;
+}
+
+declare interface MarkOptions {
+    /**
+     * @default false
+     */
+    controlled?: boolean;
+}
+
+/**
+ * Props passed to Mark components.
+ */
+export declare interface MarkProps {
+    /** Custom component to render this mark */
+    slot?: ComponentType<MarkProps>;
+    /** Main content value of the mark */
+    value?: string;
+    /** Additional metadata for the mark */
+    meta?: string;
+    /** Nested content as string (raw, unparsed) */
+    nested?: string;
+    /** Rendered children content (ReactNode) for nested marks */
+    children?: ReactNode;
+}
+
+export { MarkToken }
+
+export { Markup }
+
+/**
+ * React-specific markup option for defining mark behavior and styling.
+ *
+ * @template TMarkProps - Type of props for the mark component
+ * @template TOverlayProps - Type of props for the overlay component
+ *
+ * @example
+ * const option: Option<ChipProps> = {
+ *   markup: '@[__value__]',
+ *   mark: { slot: Chip, label: 'Click' }
+ * }
+ */
+declare interface Option_2<TMarkProps = MarkProps, TOverlayProps = OverlayProps> extends CoreOption {
+    /**
+     * Props for the mark component.
+     * Can be a static object or a function that transforms MarkProps.
+     */
+    mark?: TMarkProps | ((props: MarkProps) => TMarkProps);
+    /**
+     * Props for the overlay component.
+     */
+    overlay?: TOverlayProps;
+}
+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>;
+}
+
+/**
+ * Props for Overlay components.
+ */
+export declare interface OverlayProps {
+    /** Custom component to render this overlay */
+    slot?: ComponentType<OverlayProps>;
+    /** Trigger character(s) that activate the overlay */
+    trigger?: string;
+    /** Data array for suggestions/autocomplete */
+    data?: string[];
+}
+
+/**
+ * Props for each slot component
+ */
+declare interface SlotProps {
+    /** Props to pass to the container slot */
+    container?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+    /** Props to pass to the span slot */
+    span?: HTMLAttributes<HTMLSpanElement> & DataAttributes;
+}
+
+/**
+ * Available slots for customizing MarkedInput internal components
+ */
+declare interface Slots {
+    /** Root container component */
+    container?: ElementType<HTMLAttributes<HTMLDivElement>>;
+    /** Text span component for rendering text tokens */
+    span?: ElementType<HTMLAttributes<HTMLSpanElement>>;
+}
+
+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;
+
+export { }