@markput/react 0.5.0 → 0.7.0

package/index.css

@@ -1 +1,2 @@
-._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}
+._Container_1526r_1{min-height:1.4em}._Icon_1526r_5{background-color:currentColor;flex-shrink:0;width:14px;height:14px;display:inline-block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}._IconGrip_1526r_16{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='5' cy='3' r='1.5'/%3E%3Ccircle cx='11' cy='3' r='1.5'/%3E%3Ccircle cx='5' cy='8' r='1.5'/%3E%3Ccircle cx='11' cy='8' r='1.5'/%3E%3Ccircle cx='5' cy='13' r='1.5'/%3E%3Ccircle cx='11' cy='13' r='1.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='5' cy='3' r='1.5'/%3E%3Ccircle cx='11' cy='3' r='1.5'/%3E%3Ccircle cx='5' cy='8' r='1.5'/%3E%3Ccircle cx='11' cy='8' r='1.5'/%3E%3Ccircle cx='5' cy='13' r='1.5'/%3E%3Ccircle cx='11' cy='13' r='1.5'/%3E%3C/svg%3E")}._IconAdd_1526r_20,._IconDuplicate_1526r_21,._IconTrash_1526r_22{opacity:.75}._IconAdd_1526r_20{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a.75.75 0 0 1 .75.75v4.5h4.5a.75.75 0 0 1 0 1.5h-4.5v4.5a.75.75 0 0 1-1.5 0v-4.5h-4.5a.75.75 0 0 1 0-1.5h4.5v-4.5A.75.75 0 0 1 8 2Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a.75.75 0 0 1 .75.75v4.5h4.5a.75.75 0 0 1 0 1.5h-4.5v4.5a.75.75 0 0 1-1.5 0v-4.5h-4.5a.75.75 0 0 1 0-1.5h4.5v-4.5A.75.75 0 0 1 8 2Z'/%3E%3C/svg%3E")}._IconDuplicate_1526r_21{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 9C9.44772 9 9 9.44772 9 10V20C9 20.5523 9.44772 21 10 21H20C20.5523 21 21 20.5523 21 20V10C21 9.44772 20.5523 9 20 9H10ZM7 10C7 8.34315 8.34315 7 10 7H20C21.6569 7 23 8.34315 23 10V20C23 21.6569 21.6569 23 20 23H10C8.34315 23 7 21.6569 7 20V10Z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 3C3.45228 3 3 3.45228 3 4V14C3 14.5477 3.45228 15 4 15C4.55228 15 5 15.4477 5 16C5 16.5523 4.55228 17 4 17C2.34772 17 1 15.6523 1 14V4C1 2.34772 2.34772 1 4 1H14C15.6523 1 17 2.34772 17 4C17 4.55228 16.5523 5 16 5C15.4477 5 15 4.55228 15 4C15 3.45228 14.5477 3 14 3H4Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 9C9.44772 9 9 9.44772 9 10V20C9 20.5523 9.44772 21 10 21H20C20.5523 21 21 20.5523 21 20V10C21 9.44772 20.5523 9 20 9H10ZM7 10C7 8.34315 8.34315 7 10 7H20C21.6569 7 23 8.34315 23 10V20C23 21.6569 21.6569 23 20 23H10C8.34315 23 7 21.6569 7 20V10Z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 3C3.45228 3 3 3.45228 3 4V14C3 14.5477 3.45228 15 4 15C4.55228 15 5 15.4477 5 16C5 16.5523 4.55228 17 4 17C2.34772 17 1 15.6523 1 14V4C1 2.34772 2.34772 1 4 1H14C15.6523 1 17 2.34772 17 4C17 4.55228 16.5523 5 16 5C15.4477 5 15 4.55228 15 4C15 3.45228 14.5477 3 14 3H4Z'/%3E%3C/svg%3E")}._IconTrash_1526r_22{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 5V4C7 3.17477 7.40255 2.43324 7.91789 1.91789C8.43324 1.40255 9.17477 1 10 1H14C14.8252 1 15.5668 1.40255 16.0821 1.91789C16.5975 2.43324 17 3.17477 17 4V5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H20V20C20 20.8252 19.5975 21.5668 19.0821 22.0821C18.5668 22.5975 17.8252 23 17 23H7C6.17477 23 5.43324 22.5975 4.91789 22.0821C4.40255 21.5668 4 20.8252 4 20V7H3C2.44772 7 2 6.55228 2 6C2 5.44772 2.44772 5 3 5H7ZM9 4C9 3.82523 9.09745 3.56676 9.33211 3.33211C9.56676 3.09745 9.82523 3 10 3H14C14.1748 3 14.4332 3.09745 14.6679 3.33211C14.9025 3.56676 15 3.82523 15 4V5H9V4ZM6 7V20C6 20.1748 6.09745 20.4332 6.33211 20.6679C6.56676 20.9025 6.82523 21 7 21H17C17.1748 21 17.4332 20.9025 17.6679 20.6679C17.9025 20.4332 18 20.1748 18 20V7H6Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 5V4C7 3.17477 7.40255 2.43324 7.91789 1.91789C8.43324 1.40255 9.17477 1 10 1H14C14.8252 1 15.5668 1.40255 16.0821 1.91789C16.5975 2.43324 17 3.17477 17 4V5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H20V20C20 20.8252 19.5975 21.5668 19.0821 22.0821C18.5668 22.5975 17.8252 23 17 23H7C6.17477 23 5.43324 22.5975 4.91789 22.0821C4.40255 21.5668 4 20.8252 4 20V7H3C2.44772 7 2 6.55228 2 6C2 5.44772 2.44772 5 3 5H7ZM9 4C9 3.82523 9.09745 3.56676 9.33211 3.33211C9.56676 3.09745 9.82523 3 10 3H14C14.1748 3 14.4332 3.09745 14.6679 3.33211C14.9025 3.56676 15 3.82523 15 4V5H9V4ZM6 7V20C6 20.1748 6.09745 20.4332 6.33211 20.6679C6.56676 20.9025 6.82523 21 7 21H17C17.1748 21 17.4332 20.9025 17.6679 20.6679C17.9025 20.4332 18 20.1748 18 20V7H6Z'/%3E%3C/svg%3E")}._Container_1526r_1 span{white-space:pre-wrap;outline:none}._Suggestions_1526r_43{filter:blur();opacity:1;visibility:visible;color:#000;background:#fff;border:1px solid #ccc;border-radius:4%;width:fit-content;min-width:100px;max-height:186px;margin-top:0;margin-bottom:0;padding-left:0;transition:all 1.1s ease-out;position:fixed;overflow-y:auto;transform:scale(1);box-shadow:0 3px 6px -2px #0009}._Suggestions_1526r_43 li{padding:.5rem}._Suggestions_1526r_43 li:hover,._suggestionActive_1526r_71{color:#2589f5;cursor:pointer;background-color:#cce9ff}
+/*$vite$:1*/

package/index.d.ts

@@ -18,8 +18,6 @@ import type { OverlayTrigger } from '@markput/core';
 import type { ReactNode } from 'react';
 import type { Ref } from 'react';
 import type { RefObject } from 'react';
-import { reorderBlocks } from '@markput/core';
-import { splitTokensIntoBlocks } from '@markput/core';
 import { TextToken } from '@markput/core';
 import { Token } from '@markput/core';
 
@@ -51,13 +49,15 @@ export declare function MarkedInput<TMarkProps = MarkProps, TOverlayProps = Over
 export declare interface MarkedInputProps<TMarkProps = MarkProps, TOverlayProps = OverlayProps> {
     /** Ref to handler */
     ref?: Ref<MarkputHandler>;
-    /** Global component used for rendering markups (fallback for option.mark.slot) */
+    /** Global component used for rendering text tokens (default: built-in Span) */
+    Span?: ComponentType<MarkProps>;
+    /** Global component used for rendering markups (fallback for option.Mark) */
     Mark?: ComponentType<TMarkProps>;
-    /** Global component used for rendering overlays (fallback for option.overlay.slot) */
+    /** Global component used for rendering overlays (fallback for option.Overlay) */
     Overlay?: ComponentType<TOverlayProps>;
     /**
      * Configuration options for markups and overlays.
-     * Each option can specify its own slot component via mark.slot or overlay.slot.
+     * Each option can specify its own component via option.Mark or option.Overlay.
      * Falls back to global Mark/Overlay components when not specified.
      */
     options?: Option_2<TMarkProps, TOverlayProps>[];
@@ -88,8 +88,13 @@ export declare interface MarkedInputProps<TMarkProps = MarkProps, TOverlayProps
     onChange?: (value: string) => void;
     /** Read-only mode */
     readOnly?: boolean;
-    /** Enable Notion-like draggable blocks with drag handles for reordering */
-    block?: boolean;
+    /** Enable drag mode: each individual token (mark or text) becomes its own draggable row.
+     * One mark per row, one text fragment per row.
+     * Adjacent marks need no separator; adjacent text rows are separated by `\n\n`.
+     */
+    drag?: boolean | {
+        alwaysShowHandle: boolean;
+    };
 }
 
 export { MarkHandler }
@@ -98,14 +103,10 @@ export { MarkHandler }
  * 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;
 }
@@ -129,11 +130,15 @@ export { Markup }
  * }
  */
 declare interface Option_2<TMarkProps = MarkProps, TOverlayProps = OverlayProps> extends CoreOption {
+    /** Per-option component for rendering this mark */
+    Mark?: ComponentType<TMarkProps>;
     /**
      * Props for the mark component.
      * Can be a static object or a function that transforms MarkProps.
      */
     mark?: TMarkProps | ((props: MarkProps) => TMarkProps);
+    /** Per-option component for rendering this overlay */
+    Overlay?: ComponentType<TOverlayProps>;
     /**
      * Props for the overlay component.
      */
@@ -159,19 +164,14 @@ export declare interface OverlayHandler {
  * 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[];
 }
 
-export { reorderBlocks }
-
 declare interface SlotProps {
     container?: HTMLAttributes<HTMLDivElement> & DataAttributes;
-    span?: HTMLAttributes<HTMLSpanElement> & DataAttributes;
 }
 
 /**
@@ -180,11 +180,9 @@ declare interface SlotProps {
 declare interface Slots {
     /** Root container component */
     container?: ElementType<HTMLAttributes<HTMLDivElement>>;
-    /** Text span component for rendering text tokens */
-    span?: ElementType<HTMLAttributes<HTMLSpanElement>>;
 }
 
-export { splitTokensIntoBlocks }
+export declare const Span: (_props: MarkProps) => JSX.Element;
 
 export { TextToken }