@markput/react 0.6.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.css +1 -1
- package/index.d.ts +14 -17
- package/index.js +1257 -1049
- package/package.json +1 -1
package/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.
|
|
1
|
+
._Container_5gsai_1{min-height:1.4em}._Icon_5gsai_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_5gsai_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_5gsai_20,._IconDuplicate_5gsai_21,._IconTrash_5gsai_22{opacity:.75}._IconAdd_5gsai_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_5gsai_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_5gsai_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")}._Block_5gsai_38{background:0 0;border-radius:3px;outline:none;min-height:1.2em;margin-left:0;transition:opacity .2s;position:relative}._SidePanel_5gsai_48{opacity:0;align-items:center;width:24px;transition:opacity .15s;display:flex;position:absolute;top:0;bottom:0;left:-24px}._SidePanelVisible_5gsai_60{opacity:1;pointer-events:auto}._SidePanelAlways_5gsai_65{opacity:1;pointer-events:auto;transition:none}._GripButton_5gsai_71{color:#9ca3af;width:24px;height:24px;font:inherit;-webkit-user-select:none;user-select:none;cursor:grab;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;line-height:1;display:flex}._GripButtonDragging_5gsai_90{cursor:grabbing}._BlockMenu_5gsai_94{z-index:9999;background:#fff;border:1px solid #37352f29;border-radius:6px;min-width:160px;padding:4px;font-size:14px;position:fixed;box-shadow:0 4px 16px #0f0f0f1f}._BlockMenuItem_5gsai_106{cursor:pointer;color:#37352fd9;-webkit-user-select:none;user-select:none;border-radius:4px;align-items:center;gap:8px;padding:6px 10px;line-height:1;transition:background .1s;display:flex}._BlockMenuItem_5gsai_106:hover{background:#37352f0f}._BlockMenuItemDelete_5gsai_123{color:#eb5757}._BlockMenuItemDelete_5gsai_123:hover{background:#eb57570f}._BlockMenuSeparator_5gsai_131{background:#37352f17;height:1px;margin:4px 0}._DropIndicator_5gsai_137{pointer-events:none;z-index:10;background-color:#3b82f6;border-radius:1px;height:2px;position:absolute;left:0;right:0}._Container_5gsai_1 span{white-space:pre-wrap;outline:none}._Suggestions_5gsai_153{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_5gsai_153 li{padding:.5rem}._Suggestions_5gsai_153 li:hover,._suggestionActive_5gsai_181{color:#2589f5;cursor:pointer;background-color:#cce9ff}
|
|
2
2
|
/*$vite$:1*/
|
package/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { annotate } from '@markput/core';
|
|
2
|
-
import { Block } from '@markput/core';
|
|
3
2
|
import type { ComponentType } from 'react';
|
|
4
3
|
import type { CoreOption } from '@markput/core';
|
|
4
|
+
import type { CoreSlots } from '@markput/core';
|
|
5
5
|
import type { CSSProperties } from 'react';
|
|
6
6
|
import type { DataAttributes } from '@markput/core';
|
|
7
7
|
import { denote } from '@markput/core';
|
|
@@ -23,8 +23,6 @@ import { Token } from '@markput/core';
|
|
|
23
23
|
|
|
24
24
|
export { annotate }
|
|
25
25
|
|
|
26
|
-
export { Block }
|
|
27
|
-
|
|
28
26
|
export { denote }
|
|
29
27
|
|
|
30
28
|
export declare function MarkedInput<TMarkProps = MarkProps, TOverlayProps = OverlayProps>(props: MarkedInputProps<TMarkProps, TOverlayProps>): JSX.Element;
|
|
@@ -49,13 +47,15 @@ export declare function MarkedInput<TMarkProps = MarkProps, TOverlayProps = Over
|
|
|
49
47
|
export declare interface MarkedInputProps<TMarkProps = MarkProps, TOverlayProps = OverlayProps> {
|
|
50
48
|
/** Ref to handler */
|
|
51
49
|
ref?: Ref<MarkputHandler>;
|
|
52
|
-
/** Global component used for rendering
|
|
50
|
+
/** Global component used for rendering text tokens (default: built-in Span) */
|
|
51
|
+
Span?: ComponentType<MarkProps>;
|
|
52
|
+
/** Global component used for rendering markups (fallback for option.Mark) */
|
|
53
53
|
Mark?: ComponentType<TMarkProps>;
|
|
54
|
-
/** Global component used for rendering overlays (fallback for option.
|
|
54
|
+
/** Global component used for rendering overlays (fallback for option.Overlay) */
|
|
55
55
|
Overlay?: ComponentType<TOverlayProps>;
|
|
56
56
|
/**
|
|
57
57
|
* Configuration options for markups and overlays.
|
|
58
|
-
* Each option can specify its own
|
|
58
|
+
* Each option can specify its own component via option.Mark or option.Overlay.
|
|
59
59
|
* Falls back to global Mark/Overlay components when not specified.
|
|
60
60
|
*/
|
|
61
61
|
options?: Option_2<TMarkProps, TOverlayProps>[];
|
|
@@ -101,14 +101,10 @@ export { MarkHandler }
|
|
|
101
101
|
* Props passed to Mark components.
|
|
102
102
|
*/
|
|
103
103
|
export declare interface MarkProps {
|
|
104
|
-
/** Custom component to render this mark */
|
|
105
|
-
slot?: ComponentType<MarkProps>;
|
|
106
104
|
/** Main content value of the mark */
|
|
107
105
|
value?: string;
|
|
108
106
|
/** Additional metadata for the mark */
|
|
109
107
|
meta?: string;
|
|
110
|
-
/** Nested content as string (raw, unparsed) */
|
|
111
|
-
nested?: string;
|
|
112
108
|
/** Rendered children content (ReactNode) for nested marks */
|
|
113
109
|
children?: ReactNode;
|
|
114
110
|
}
|
|
@@ -132,11 +128,15 @@ export { Markup }
|
|
|
132
128
|
* }
|
|
133
129
|
*/
|
|
134
130
|
declare interface Option_2<TMarkProps = MarkProps, TOverlayProps = OverlayProps> extends CoreOption {
|
|
131
|
+
/** Per-option component for rendering this mark */
|
|
132
|
+
Mark?: ComponentType<TMarkProps>;
|
|
135
133
|
/**
|
|
136
134
|
* Props for the mark component.
|
|
137
135
|
* Can be a static object or a function that transforms MarkProps.
|
|
138
136
|
*/
|
|
139
137
|
mark?: TMarkProps | ((props: MarkProps) => TMarkProps);
|
|
138
|
+
/** Per-option component for rendering this overlay */
|
|
139
|
+
Overlay?: ComponentType<TOverlayProps>;
|
|
140
140
|
/**
|
|
141
141
|
* Props for the overlay component.
|
|
142
142
|
*/
|
|
@@ -155,15 +155,13 @@ export declare interface OverlayHandler {
|
|
|
155
155
|
meta?: string;
|
|
156
156
|
}) => void;
|
|
157
157
|
match: OverlayMatch<Option_2>;
|
|
158
|
-
ref: RefObject<HTMLElement>;
|
|
158
|
+
ref: RefObject<HTMLElement | null>;
|
|
159
159
|
}
|
|
160
160
|
|
|
161
161
|
/**
|
|
162
162
|
* Props for Overlay components.
|
|
163
163
|
*/
|
|
164
164
|
export declare interface OverlayProps {
|
|
165
|
-
/** Custom component to render this overlay */
|
|
166
|
-
slot?: ComponentType<OverlayProps>;
|
|
167
165
|
/** Trigger character(s) that activate the overlay */
|
|
168
166
|
trigger?: string;
|
|
169
167
|
/** Data array for suggestions/autocomplete */
|
|
@@ -172,19 +170,18 @@ export declare interface OverlayProps {
|
|
|
172
170
|
|
|
173
171
|
declare interface SlotProps {
|
|
174
172
|
container?: HTMLAttributes<HTMLDivElement> & DataAttributes;
|
|
175
|
-
span?: HTMLAttributes<HTMLSpanElement> & DataAttributes;
|
|
176
173
|
}
|
|
177
174
|
|
|
178
175
|
/**
|
|
179
176
|
* Available slots for customizing MarkedInput internal components
|
|
180
177
|
*/
|
|
181
|
-
declare interface Slots {
|
|
178
|
+
declare interface Slots extends CoreSlots {
|
|
182
179
|
/** Root container component */
|
|
183
180
|
container?: ElementType<HTMLAttributes<HTMLDivElement>>;
|
|
184
|
-
/** Text span component for rendering text tokens */
|
|
185
|
-
span?: ElementType<HTMLAttributes<HTMLSpanElement>>;
|
|
186
181
|
}
|
|
187
182
|
|
|
183
|
+
export declare const Span: (_props: MarkProps) => JSX.Element;
|
|
184
|
+
|
|
188
185
|
export { TextToken }
|
|
189
186
|
|
|
190
187
|
export { Token }
|