@baseline-ui/core 0.62.0 → 1.0.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/Acknowledgements.md +0 -53886
- package/dist/index.css +1 -1
- package/dist/index.d.ts +663 -95
- package/dist/index.js +25 -11
- package/dist/index.mjs +25 -11
- package/package.json +11 -22
- package/sbom.json +806 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import React__default, { ReactNode, AriaAttributes, DOMAttributes as DOMAttributes$1, AriaRole, CSSProperties, HTMLAttributeAnchorTarget, HTMLAttributeReferrerPolicy, ClipboardEventHandler, CompositionEventHandler, ReactEventHandler, FormEventHandler, MouseEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, TransitionEventHandler, ReactElement, MouseEvent, FocusEvent, SyntheticEvent, KeyboardEvent as KeyboardEvent$2, JSX, HTMLAttributes, RefObject as RefObject$1, LabelHTMLAttributes, ElementType, JSXElementConstructor, ButtonHTMLAttributes, AnchorHTMLAttributes, InputHTMLAttributes, SVGProps, MutableRefObject, Key as Key$1, Dispatch, SetStateAction
|
|
2
|
+
import React__default, { ReactNode, AriaAttributes, DOMAttributes as DOMAttributes$1, AriaRole, CSSProperties, HTMLAttributeAnchorTarget, HTMLAttributeReferrerPolicy, ClipboardEventHandler, CompositionEventHandler, ReactEventHandler, FormEventHandler, MouseEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, TransitionEventHandler, ReactElement, MouseEvent, FocusEvent, SyntheticEvent, KeyboardEvent as KeyboardEvent$2, JSX, HTMLAttributes, RefObject as RefObject$1, LabelHTMLAttributes, ElementType, JSXElementConstructor, ButtonHTMLAttributes, AnchorHTMLAttributes, InputHTMLAttributes, SVGProps, MutableRefObject, Key as Key$1, Ref, KeyboardEventHandler, Dispatch, SetStateAction } from 'react';
|
|
3
3
|
import { Theme, Sprinkles } from '@baseline-ui/tokens';
|
|
4
4
|
import { PanelImperativeHandle, PanelProps as PanelProps$1, SeparatorProps as SeparatorProps$2 } from 'react-resizable-panels';
|
|
5
5
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
@@ -5669,6 +5669,11 @@ type ListItem = ListOption | ListSection;
|
|
|
5669
5669
|
|
|
5670
5670
|
interface BlockProps {
|
|
5671
5671
|
/**
|
|
5672
|
+
* @deprecated Do not use in new components. This is a legacy block
|
|
5673
|
+
* identifier; new components should exclude it via
|
|
5674
|
+
* `Omit<StylingProps, keyof BlockProps>` (see `StatusCard` / `Code`).
|
|
5675
|
+
* Retained on existing components for backward compatibility.
|
|
5676
|
+
*
|
|
5672
5677
|
* The unique identifier for the block. This is used to identify the block in
|
|
5673
5678
|
* the DOM and in the block map. It is added as a data attribute
|
|
5674
5679
|
* `data-block-id` to the root element of the block if a DOM node is
|
|
@@ -5676,6 +5681,11 @@ interface BlockProps {
|
|
|
5676
5681
|
*/
|
|
5677
5682
|
"data-block-id"?: string;
|
|
5678
5683
|
/**
|
|
5684
|
+
* @deprecated Do not use in new components. This is a legacy block group
|
|
5685
|
+
* marker; new components should exclude it via
|
|
5686
|
+
* `Omit<StylingProps, keyof BlockProps>` (see `StatusCard` / `Code`).
|
|
5687
|
+
* Retained on existing components for backward compatibility.
|
|
5688
|
+
*
|
|
5679
5689
|
* Represents a data block group. This is similar to `data-block-id` but it
|
|
5680
5690
|
* doesn't have to be unique just like `class`. This is used to group blocks
|
|
5681
5691
|
* together in the DOM and in the block map. It is added as a data attribute
|
|
@@ -5755,10 +5765,6 @@ declare function classNames(...args: any[]): string;
|
|
|
5755
5765
|
/**
|
|
5756
5766
|
* Returns the HTMLElement from a string selector, HTMLElement, or React
|
|
5757
5767
|
* RefObject.
|
|
5758
|
-
*
|
|
5759
|
-
* @param element - A string selector, HTMLElement, or React RefObject.
|
|
5760
|
-
* @param ownerDocument - The document to use for the querySelector call.
|
|
5761
|
-
* @returns The HTMLElement or null if not found.
|
|
5762
5768
|
*/
|
|
5763
5769
|
declare function getHTMLElement(element: string | HTMLElement | React__default.RefObject<HTMLElement> | null | undefined, ownerDocument: Document): HTMLElement | null | undefined;
|
|
5764
5770
|
interface FontProperties {
|
|
@@ -5781,17 +5787,13 @@ interface FontProperties {
|
|
|
5781
5787
|
* });
|
|
5782
5788
|
* ```
|
|
5783
5789
|
*
|
|
5784
|
-
* @param options -
|
|
5785
|
-
*
|
|
5786
|
-
*
|
|
5787
|
-
* @param options.fontFamily - The font family. Defaults to 'Arial'.
|
|
5788
|
-
* @param options.fontWeight - The font weight. Defaults to 'normal'.
|
|
5789
|
-
* @param options.fontStyle - The font style. Defaults to 'normal'.
|
|
5790
|
-
* @param options.font - The full font string. Overrides fontSize, fontFamily,
|
|
5791
|
-
* fontWeight, and fontStyle.
|
|
5790
|
+
* @param options.element - A reference element whose owner document is used to
|
|
5791
|
+
* create the measuring canvas (required for correct results inside iframes).
|
|
5792
|
+
* Falls back to the global document when omitted.
|
|
5792
5793
|
*/
|
|
5793
|
-
declare function getTextDimensions({ text, fontSize, fontFamily, fontWeight, fontStyle, font, }: {
|
|
5794
|
+
declare function getTextDimensions({ text, fontSize, fontFamily, fontWeight, fontStyle, font, element, }: {
|
|
5794
5795
|
text: string;
|
|
5796
|
+
element?: Element | null;
|
|
5795
5797
|
} & FontProperties): {
|
|
5796
5798
|
width: number;
|
|
5797
5799
|
height: number;
|
|
@@ -5811,51 +5813,32 @@ declare function getTextDimensions({ text, fontSize, fontFamily, fontWeight, fon
|
|
|
5811
5813
|
* fontStyle: "normal",
|
|
5812
5814
|
* });
|
|
5813
5815
|
*
|
|
5814
|
-
* @param options -
|
|
5815
|
-
*
|
|
5816
|
-
*
|
|
5817
|
-
* @param options.initialFontSize - The starting font size to use for
|
|
5818
|
-
* calculations. Defaults to 50.
|
|
5819
|
-
* @param options.fontFamily - The font family to use. Defaults to 'Arial'.
|
|
5820
|
-
* @param options.fontWeight - The font weight to use. Defaults to 'normal'.
|
|
5821
|
-
* @param options.fontStyle - The font style to use. Defaults to 'normal'.
|
|
5822
|
-
* @returns The calculated font size that fits the text within the given width.
|
|
5816
|
+
* @param options.element - A reference element whose owner document is used to
|
|
5817
|
+
* create the measuring canvas. Falls back to the global document when
|
|
5818
|
+
* omitted.
|
|
5823
5819
|
*/
|
|
5824
|
-
declare function calculateFontSizeToFitWidth({ text, maxWidth, initialFontSize, fontFamily, fontWeight, fontStyle, }: {
|
|
5820
|
+
declare function calculateFontSizeToFitWidth({ text, maxWidth, initialFontSize, fontFamily, fontWeight, fontStyle, element, }: {
|
|
5825
5821
|
text: string;
|
|
5826
5822
|
maxWidth: number;
|
|
5827
5823
|
initialFontSize: number;
|
|
5824
|
+
element?: Element | null;
|
|
5828
5825
|
} & Omit<FontProperties, "fontSize">): number;
|
|
5829
|
-
/**
|
|
5830
|
-
* Returns true if the element is focusable.
|
|
5831
|
-
*
|
|
5832
|
-
* @param element - The element to check.
|
|
5833
|
-
*/
|
|
5834
5826
|
declare function isFocusableElement(element: HTMLElement): boolean;
|
|
5835
5827
|
declare function findFocusableElements(element: HTMLElement): NodeListOf<Element>;
|
|
5836
5828
|
/**
|
|
5837
|
-
* Returns the active element of the given node
|
|
5838
|
-
*
|
|
5839
|
-
* active element of the document will be returned.
|
|
5840
|
-
*
|
|
5841
|
-
* @param node - The node to get the active element from.
|
|
5842
|
-
* @returns The active element of the given node.
|
|
5829
|
+
* Returns the active element of the given node, resolving through a shadow root
|
|
5830
|
+
* when the node lives in one.
|
|
5843
5831
|
*/
|
|
5844
5832
|
declare function getActiveElement(node?: Node): Element | null;
|
|
5845
5833
|
/**
|
|
5846
5834
|
* Returns true if the target is an input that will cause the software keyboard
|
|
5847
5835
|
* to appear.
|
|
5848
|
-
*
|
|
5849
|
-
* @param target Element - The element to check.
|
|
5850
5836
|
*/
|
|
5851
5837
|
declare function isInputThatOpensKeyboard(target: Element): boolean;
|
|
5852
5838
|
/**
|
|
5853
5839
|
* Returns the absolute bounds of the element. If the element is within a shadow
|
|
5854
5840
|
* root, the bounds will be relative to the host element. If the element is not
|
|
5855
5841
|
* within a shadow root, the bounds will be relative to the document.
|
|
5856
|
-
*
|
|
5857
|
-
* @param element - The element to get the absolute bounds of.
|
|
5858
|
-
* @returns The absolute bounds of the element.
|
|
5859
5842
|
*/
|
|
5860
5843
|
declare function getAbsoluteBounds(element: HTMLElement): {
|
|
5861
5844
|
x: number;
|
|
@@ -5868,10 +5851,6 @@ declare function getAbsoluteBounds(element: HTMLElement): {
|
|
|
5868
5851
|
* position: fixed. If the element is within a shadow root, the position will be
|
|
5869
5852
|
* relative to the host element so that the element can be positioned correctly
|
|
5870
5853
|
* within the shadow root.
|
|
5871
|
-
*
|
|
5872
|
-
* @param element - The element to get the absolute position of.
|
|
5873
|
-
* @param coordinates - The coordinates of the element.
|
|
5874
|
-
* @returns The absolute position of the element.
|
|
5875
5854
|
*/
|
|
5876
5855
|
declare function getAbsolutePosition(element: HTMLElement, coordinates?: {
|
|
5877
5856
|
x: number;
|
|
@@ -5926,11 +5905,19 @@ declare function booleanOrObjectToConfig<T extends Record<string, unknown>>(valu
|
|
|
5926
5905
|
* ```ts
|
|
5927
5906
|
* lightenColor("#000000", 10); // #1a1a1a
|
|
5928
5907
|
* ```
|
|
5929
|
-
*
|
|
5930
|
-
* @param color
|
|
5931
|
-
* @param percent
|
|
5932
5908
|
*/
|
|
5933
5909
|
declare function lightenColor(color: string, percent: number): string;
|
|
5910
|
+
/**
|
|
5911
|
+
* Compare two (possibly undefined) CSS color strings by value rather than by
|
|
5912
|
+
* serialized form. Browsers normalize colors when they round-trip through the
|
|
5913
|
+
* DOM — `#ac0000` reads back as `rgb(172, 0, 0)`, `rgba(255, 0, 0, 1)` as
|
|
5914
|
+
* `rgb(255, 0, 0)` — so a raw-string compare would treat the same color as
|
|
5915
|
+
* different. Both sides are canonicalized via React Aria's {@link Color}; a
|
|
5916
|
+
* value React Aria cannot parse (a CSS named color, or an invalid value) is
|
|
5917
|
+
* compared by exact string instead — so it matches only an identical string
|
|
5918
|
+
* and never a real, parseable color.
|
|
5919
|
+
*/
|
|
5920
|
+
declare function areColorsEqual(a: string | undefined, b: string | undefined): boolean;
|
|
5934
5921
|
|
|
5935
5922
|
/**
|
|
5936
5923
|
* Checks whether the given value is a valid URL.
|
|
@@ -6210,6 +6197,20 @@ type LocalizedStrings = {
|
|
|
6210
6197
|
};
|
|
6211
6198
|
};
|
|
6212
6199
|
|
|
6200
|
+
/**
|
|
6201
|
+
* Resolves the `File` objects from a React Aria drop/paste event's items,
|
|
6202
|
+
* skipping non-file entries (e.g. dropped text or directories) and any file
|
|
6203
|
+
* whose read rejects — so one unreadable item (a folder dropped alongside
|
|
6204
|
+
* files, a transient I/O failure) can't discard the rest of the batch.
|
|
6205
|
+
*
|
|
6206
|
+
* When `accept` is provided, files that don't match it are dropped, so the
|
|
6207
|
+
* drop/paste path enforces the same type restriction as the native picker.
|
|
6208
|
+
*/
|
|
6209
|
+
declare function onDropOrPaste({ items, accept, }: {
|
|
6210
|
+
items: DropItem[];
|
|
6211
|
+
accept?: string;
|
|
6212
|
+
}): Promise<File[]>;
|
|
6213
|
+
|
|
6213
6214
|
declare let _Item: <T>(props: ItemProps$1<T>) => JSX.Element;
|
|
6214
6215
|
|
|
6215
6216
|
type DragAndDropProps = Omit<DraggableCollectionStateOptions & DroppableCollectionOptions & DroppableCollectionStateOptions, "keyboardDelegate" | "dropTargetDelegate" | "shouldAcceptItemDrop" | "onDropEnter" | "onDropActivate" | "onDropExit" | "getDropOperation" | "collection" | "selectionManager" | "onRootDrop" | "onInsert" | "getAllowedDropOperations" | "getItems" | "onItemDrop"> & Partial<Pick<DraggableCollectionStateOptions, "getItems">> & {
|
|
@@ -7192,44 +7193,6 @@ interface LinkProps extends AriaLinkOptions, StylingProps {
|
|
|
7192
7193
|
|
|
7193
7194
|
declare const Link: React__default.ForwardRefExoticComponent<LinkProps & React__default.RefAttributes<HTMLElement>>;
|
|
7194
7195
|
|
|
7195
|
-
interface SharedFileUploadProps extends StylingProps {
|
|
7196
|
-
/** Whether the component is inlined. */
|
|
7197
|
-
variant?: "default" | "inline";
|
|
7198
|
-
/** Whether the component is disabled. */
|
|
7199
|
-
isDisabled?: boolean;
|
|
7200
|
-
/** The label to display. */
|
|
7201
|
-
label: string;
|
|
7202
|
-
/** The description to display. */
|
|
7203
|
-
description?: string;
|
|
7204
|
-
/**
|
|
7205
|
-
* The pattern to match the file name against. This is a regular expression,
|
|
7206
|
-
* and will be matched against the entire file name.
|
|
7207
|
-
*/
|
|
7208
|
-
accept?: string;
|
|
7209
|
-
/** The name of the input. */
|
|
7210
|
-
name?: string;
|
|
7211
|
-
/** The callback function that is fired when the value changes. */
|
|
7212
|
-
onChange?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
|
|
7213
|
-
/**
|
|
7214
|
-
* The callback function that is fired when the value changes and the value is
|
|
7215
|
-
* valid.
|
|
7216
|
-
*/
|
|
7217
|
-
onValueChange?: (files: File[]) => void;
|
|
7218
|
-
/**
|
|
7219
|
-
* Identifies the element (or elements) that provide a detailed, extended
|
|
7220
|
-
* description for the object.
|
|
7221
|
-
*/
|
|
7222
|
-
"aria-describedby"?: string;
|
|
7223
|
-
}
|
|
7224
|
-
interface FileUploadProps extends SharedFileUploadProps {
|
|
7225
|
-
/** The Icon to display. */
|
|
7226
|
-
icon?: React__default.FC<IconProps>;
|
|
7227
|
-
/** Whether to allow multiple files to be uploaded. */
|
|
7228
|
-
multiple?: boolean;
|
|
7229
|
-
}
|
|
7230
|
-
|
|
7231
|
-
declare const FileUpload: React__default.ForwardRefExoticComponent<FileUploadProps & React__default.RefAttributes<HTMLLabelElement>>;
|
|
7232
|
-
|
|
7233
7196
|
interface SharedInputProps extends StylingProps, Pick<AriaTextFieldProps, "isReadOnly" | "isDisabled"> {
|
|
7234
7197
|
/** The state of the input. */
|
|
7235
7198
|
validationState?: "valid" | "error" | "warning";
|
|
@@ -7260,6 +7223,14 @@ interface SharedInputProps extends StylingProps, Pick<AriaTextFieldProps, "isRea
|
|
|
7260
7223
|
wrapperRef?: React__default.Ref<HTMLDivElement>;
|
|
7261
7224
|
wrapperClassName?: string;
|
|
7262
7225
|
isInvalid?: boolean;
|
|
7226
|
+
/**
|
|
7227
|
+
* Whether the input renders as a resizable multi-line `<textarea>` instead of
|
|
7228
|
+
* a single-line `<input>`. Relaxes the fixed single-line height and top-aligns
|
|
7229
|
+
* the status icon.
|
|
7230
|
+
*
|
|
7231
|
+
* @default false
|
|
7232
|
+
*/
|
|
7233
|
+
isMultiLine?: boolean;
|
|
7263
7234
|
}
|
|
7264
7235
|
|
|
7265
7236
|
interface InputMessage {
|
|
@@ -7270,11 +7241,16 @@ interface InputMessage {
|
|
|
7270
7241
|
/** The warning message to display when the input is in a warning state. */
|
|
7271
7242
|
warningMessage?: string;
|
|
7272
7243
|
}
|
|
7273
|
-
interface TextInputProps extends Omit<AriaTextFieldProps, "validationState" | "isInvalid" | "description" | "errorMessage">, StylingProps, InputMessage, Pick<SharedInputProps, "validationState" | "variant" | "labelPosition"> {
|
|
7244
|
+
interface TextInputProps extends Omit<AriaTextFieldProps, "validationState" | "isInvalid" | "description" | "errorMessage">, StylingProps, InputMessage, Pick<SharedInputProps, "validationState" | "variant" | "labelPosition" | "isMultiLine"> {
|
|
7274
7245
|
/** The style object to apply to the input element */
|
|
7275
7246
|
inputStyle?: React__default.CSSProperties;
|
|
7276
7247
|
/** The class name to apply to the input element */
|
|
7277
7248
|
inputClassName?: string;
|
|
7249
|
+
/**
|
|
7250
|
+
* The number of visible text rows for the multi-line input. Only applies when
|
|
7251
|
+
* `isMultiLine` is set.
|
|
7252
|
+
*/
|
|
7253
|
+
rows?: number;
|
|
7278
7254
|
}
|
|
7279
7255
|
|
|
7280
7256
|
interface FileInputProps extends InputMessage, FileTriggerProps, Pick<SharedInputProps, "validationState" | "labelPosition"> {
|
|
@@ -8131,7 +8107,33 @@ type TextProps<T extends keyof React__default.JSX.IntrinsicElements = "span"> =
|
|
|
8131
8107
|
|
|
8132
8108
|
declare const Text: React__default.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React__default.RefAttributes<HTMLSpanElement>>;
|
|
8133
8109
|
|
|
8134
|
-
interface
|
|
8110
|
+
interface SharedFileUploadProps extends StylingProps {
|
|
8111
|
+
/** Whether the component is disabled. */
|
|
8112
|
+
isDisabled?: boolean;
|
|
8113
|
+
/** The description to display. */
|
|
8114
|
+
description?: string;
|
|
8115
|
+
/**
|
|
8116
|
+
* The accepted file types, passed through to the underlying
|
|
8117
|
+
* `<input type="file">` `accept` attribute — a comma-separated list of MIME
|
|
8118
|
+
* types and/or extensions (e.g. `"image/png,image/jpeg"` or `"image/*"`).
|
|
8119
|
+
*/
|
|
8120
|
+
accept?: string;
|
|
8121
|
+
/** The name of the input. */
|
|
8122
|
+
name?: string;
|
|
8123
|
+
/** The callback function that is fired when the value changes. */
|
|
8124
|
+
onChange?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
|
|
8125
|
+
/**
|
|
8126
|
+
* The callback function that is fired when the value changes and the value is
|
|
8127
|
+
* valid.
|
|
8128
|
+
*/
|
|
8129
|
+
onValueChange?: (files: File[]) => void;
|
|
8130
|
+
/**
|
|
8131
|
+
* Identifies the element (or elements) that provide a detailed, extended
|
|
8132
|
+
* description for the object.
|
|
8133
|
+
*/
|
|
8134
|
+
"aria-describedby"?: string;
|
|
8135
|
+
}
|
|
8136
|
+
interface ImageDropZoneProps extends SharedFileUploadProps, Omit<DropOptions, "ref" | "getDropOperation" | "hasDropButton" | "getDropOperationForPoint">, Omit<ClipboardProps, "getItems" | "onCut" | "onCopy">, Pick<FreehandCanvasProps, "footerClassName" | "footerStyle" | "placeholder" | "clearLabel">, AriaLabelingProps {
|
|
8135
8137
|
/**
|
|
8136
8138
|
* The initial image to display. This will be used as the `src` attribute of
|
|
8137
8139
|
* the `<img>` element. You will be able to choose a new image.
|
|
@@ -8175,6 +8177,11 @@ interface ImageDropZoneProps extends Omit<SharedFileUploadProps, "label" | "vari
|
|
|
8175
8177
|
maxFileSize?: number;
|
|
8176
8178
|
/** Callback fired when a dropped/pasted/selected file exceeds `maxFileSize`. */
|
|
8177
8179
|
onFileSizeError?: (file: File) => void;
|
|
8180
|
+
/**
|
|
8181
|
+
* Callback fired when a dropped/pasted/selected file's type does not match
|
|
8182
|
+
* `accept`.
|
|
8183
|
+
*/
|
|
8184
|
+
onFileTypeError?: (file: File) => void;
|
|
8178
8185
|
}
|
|
8179
8186
|
|
|
8180
8187
|
declare const ImageDropZone: React__default.ForwardRefExoticComponent<ImageDropZoneProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
@@ -8441,9 +8448,19 @@ interface EditorProps extends StylingProps, AriaLabelingProps {
|
|
|
8441
8448
|
* the Cancel button will not be rendered.
|
|
8442
8449
|
*/
|
|
8443
8450
|
onCancel?: () => void;
|
|
8444
|
-
/**
|
|
8451
|
+
/**
|
|
8452
|
+
* The initial value of the editor (uncontrolled). The editor manages its
|
|
8453
|
+
* own state afterwards; later changes to this prop are ignored.
|
|
8454
|
+
*/
|
|
8445
8455
|
defaultValue?: string;
|
|
8446
|
-
/**
|
|
8456
|
+
/**
|
|
8457
|
+
* The value of the editor (controlled). Provide together with `onChange`;
|
|
8458
|
+
* later changes to this prop update the editor content.
|
|
8459
|
+
*
|
|
8460
|
+
* Backwards compatibility: in rich text mode, `value` without `onChange`
|
|
8461
|
+
* behaves like `defaultValue` (initial content only), matching the
|
|
8462
|
+
* behavior of earlier versions.
|
|
8463
|
+
*/
|
|
8447
8464
|
value?: string;
|
|
8448
8465
|
/**
|
|
8449
8466
|
* The function to be called when the value of the editor changes.
|
|
@@ -8570,10 +8587,495 @@ interface EditorProps extends StylingProps, AriaLabelingProps {
|
|
|
8570
8587
|
* @default false
|
|
8571
8588
|
*/
|
|
8572
8589
|
saveOnEnter?: boolean;
|
|
8590
|
+
/**
|
|
8591
|
+
* Whether URL-shaped text is automatically converted into links: typing a
|
|
8592
|
+
* space or Enter after a URL, pasting text that contains URLs, and pasting a
|
|
8593
|
+
* lone URL over a selection (wraps the selection as a link). Only applies
|
|
8594
|
+
* when `enableRichText` is `true`.
|
|
8595
|
+
*
|
|
8596
|
+
* @default true
|
|
8597
|
+
*/
|
|
8598
|
+
autoLink?: boolean;
|
|
8573
8599
|
}
|
|
8574
8600
|
|
|
8575
8601
|
declare const Editor: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<EditorProps & React__default.RefAttributes<HTMLDivElement>>>;
|
|
8576
8602
|
|
|
8603
|
+
declare const PARAGRAPH: "p";
|
|
8604
|
+
declare const LINK: "a";
|
|
8605
|
+
declare const MENTION: "mention";
|
|
8606
|
+
declare const MENTION_INPUT: "mention_input";
|
|
8607
|
+
interface RichTextEditorText {
|
|
8608
|
+
text: string;
|
|
8609
|
+
bold?: boolean;
|
|
8610
|
+
italic?: boolean;
|
|
8611
|
+
underline?: boolean;
|
|
8612
|
+
color?: string;
|
|
8613
|
+
backgroundColor?: string;
|
|
8614
|
+
}
|
|
8615
|
+
interface RichTextEditorLink {
|
|
8616
|
+
type: typeof LINK;
|
|
8617
|
+
url: string;
|
|
8618
|
+
children: RichTextEditorText[];
|
|
8619
|
+
}
|
|
8620
|
+
interface RichTextEditorMention {
|
|
8621
|
+
type: typeof MENTION;
|
|
8622
|
+
value: string;
|
|
8623
|
+
displayName: string;
|
|
8624
|
+
children: [RichTextEditorText];
|
|
8625
|
+
}
|
|
8626
|
+
interface RichTextEditorMentionInput {
|
|
8627
|
+
type: typeof MENTION_INPUT;
|
|
8628
|
+
children: [RichTextEditorText];
|
|
8629
|
+
}
|
|
8630
|
+
type RichTextEditorInline = RichTextEditorText | RichTextEditorLink | RichTextEditorMention | RichTextEditorMentionInput;
|
|
8631
|
+
interface RichTextEditorParagraph {
|
|
8632
|
+
type: typeof PARAGRAPH;
|
|
8633
|
+
children: RichTextEditorInline[];
|
|
8634
|
+
}
|
|
8635
|
+
type RichTextEditorDoc = RichTextEditorParagraph[];
|
|
8636
|
+
|
|
8637
|
+
interface ModelPoint {
|
|
8638
|
+
/** [paragraphIndex, inlineIndex within paragraph.children] */
|
|
8639
|
+
path: [number, number];
|
|
8640
|
+
/** Character offset within that inline node's text. */
|
|
8641
|
+
offset: number;
|
|
8642
|
+
}
|
|
8643
|
+
interface ModelRange {
|
|
8644
|
+
anchor: ModelPoint;
|
|
8645
|
+
focus: ModelPoint;
|
|
8646
|
+
}
|
|
8647
|
+
|
|
8648
|
+
type MarkName = "bold" | "italic" | "underline";
|
|
8649
|
+
/** Marks shared by all text content covered by a range. */
|
|
8650
|
+
interface ActiveMarks {
|
|
8651
|
+
bold?: true;
|
|
8652
|
+
italic?: true;
|
|
8653
|
+
underline?: true;
|
|
8654
|
+
color?: string;
|
|
8655
|
+
backgroundColor?: string;
|
|
8656
|
+
}
|
|
8657
|
+
|
|
8658
|
+
/**
|
|
8659
|
+
* EditorCore.ts — framework-free orchestrator for the rich-text editor.
|
|
8660
|
+
*
|
|
8661
|
+
* Wires DOM events on a contenteditable host element to the pure command/model
|
|
8662
|
+
* modules. React is responsible for rendering the host element and toolbar;
|
|
8663
|
+
* EditorCore owns the document state.
|
|
8664
|
+
*
|
|
8665
|
+
* Design notes
|
|
8666
|
+
* ─────────────
|
|
8667
|
+
* - setValue() does NOT record history — external controlled updates are not
|
|
8668
|
+
* user edits.
|
|
8669
|
+
* - No global `document` or `window` access; everything goes through
|
|
8670
|
+
* `el.ownerDocument` / `el.getRootNode()`.
|
|
8671
|
+
* - renderDoc() during edits/sync is guarded against running mid-IME-composition
|
|
8672
|
+
* (the one-time attach-time render predates any composition, so it is exempt).
|
|
8673
|
+
* - Identity-diffing: commands that return the same `doc` reference are no-ops.
|
|
8674
|
+
*/
|
|
8675
|
+
|
|
8676
|
+
interface SelectionState {
|
|
8677
|
+
/** Active marks at the current selection (merged with pendingMarks). */
|
|
8678
|
+
marks: ActiveMarks;
|
|
8679
|
+
/** Link covering (or touching) the current selection range, if any. */
|
|
8680
|
+
link: {
|
|
8681
|
+
url: string;
|
|
8682
|
+
range: ModelRange;
|
|
8683
|
+
} | null;
|
|
8684
|
+
/** Current model selection range. */
|
|
8685
|
+
range: ModelRange | null;
|
|
8686
|
+
}
|
|
8687
|
+
interface EditorCoreOptions {
|
|
8688
|
+
/** Called after each user-visible document change; receives serialized HTML. */
|
|
8689
|
+
onChange?: (html: string) => void;
|
|
8690
|
+
/** Called when the selection changes. */
|
|
8691
|
+
onSelectionChange?: (state: SelectionState) => void;
|
|
8692
|
+
/**
|
|
8693
|
+
* Called when "@" at an appropriate position creates a mention_input.
|
|
8694
|
+
* The React layer is expected to open its mention dropdown in response.
|
|
8695
|
+
*/
|
|
8696
|
+
onMentionTrigger?: () => void;
|
|
8697
|
+
/**
|
|
8698
|
+
* Called when a doc replacement (a controlled `setValue`) removes an open
|
|
8699
|
+
* mention_input without going through the normal cancel/confirm path. The
|
|
8700
|
+
* React layer must close its dropdown — the orphaned anchor fires no blur.
|
|
8701
|
+
*/
|
|
8702
|
+
onMentionInputRemoved?: () => void;
|
|
8703
|
+
/**
|
|
8704
|
+
* When this returns false, typing "@" does not start the mention flow and
|
|
8705
|
+
* the character is inserted natively (e.g. no mentionable users configured).
|
|
8706
|
+
*/
|
|
8707
|
+
canStartMention?: () => boolean;
|
|
8708
|
+
/**
|
|
8709
|
+
* When this returns false, URL-shaped text is NOT auto-converted into links
|
|
8710
|
+
* (typing a delimiter after a URL, pasting URLs, smart-pasting a URL over a
|
|
8711
|
+
* selection). Defaults to enabled.
|
|
8712
|
+
*/
|
|
8713
|
+
autoLink?: () => boolean;
|
|
8714
|
+
/** When this returns true all mutation inputs are blocked (preventDefault'd). */
|
|
8715
|
+
isReadOnly?: () => boolean;
|
|
8716
|
+
/**
|
|
8717
|
+
* Whether the built-in formatting (bold/italic/underline) and history
|
|
8718
|
+
* (undo/redo) shortcuts are active. When this returns false, the matching
|
|
8719
|
+
* native `beforeinput` intents (`formatBold`, `historyUndo`, …) are still
|
|
8720
|
+
* blocked from mutating the DOM but no longer toggle marks or move history —
|
|
8721
|
+
* leaving a consumer free to wire their own. Defaults to enabled.
|
|
8722
|
+
*/
|
|
8723
|
+
areKeyboardShortcutsEnabled?: () => boolean;
|
|
8724
|
+
}
|
|
8725
|
+
/** Names of commands that EditorCore can dispatch via exec(). */
|
|
8726
|
+
type CommandName = "toggleMark" | "setMarkValue" | "wrapLink" | "updateLinkUrl" | "unwrapLink" | "deleteRange" | "insertText" | "insertFragment" | "insertSoftBreak" | "insertMentionInput" | "confirmMention" | "removeMentionInput";
|
|
8727
|
+
/** Argument tuple for each command (beyond doc + range which are implicit). */
|
|
8728
|
+
interface CommandArgs {
|
|
8729
|
+
toggleMark: [mark: MarkName];
|
|
8730
|
+
setMarkValue: [key: "color" | "backgroundColor", value?: string];
|
|
8731
|
+
wrapLink: [url: string];
|
|
8732
|
+
updateLinkUrl: [url: string];
|
|
8733
|
+
unwrapLink: [];
|
|
8734
|
+
deleteRange: [];
|
|
8735
|
+
insertText: [text: string];
|
|
8736
|
+
insertFragment: [fragment: RichTextEditorDoc];
|
|
8737
|
+
insertSoftBreak: [];
|
|
8738
|
+
insertMentionInput: [];
|
|
8739
|
+
confirmMention: [user: {
|
|
8740
|
+
id: string;
|
|
8741
|
+
displayName: string;
|
|
8742
|
+
}];
|
|
8743
|
+
removeMentionInput: [restoreText: string];
|
|
8744
|
+
}
|
|
8745
|
+
declare class EditorCore {
|
|
8746
|
+
private doc;
|
|
8747
|
+
/** The last serialized HTML known to us (including setValue calls). */
|
|
8748
|
+
private lastKnownHtml;
|
|
8749
|
+
private cachedRange;
|
|
8750
|
+
private composing;
|
|
8751
|
+
private pending;
|
|
8752
|
+
/**
|
|
8753
|
+
* Number of upcoming selectionchange events that must NOT clear pending marks.
|
|
8754
|
+
*
|
|
8755
|
+
* handleSelectionChange normally clears pending the moment the caret leaves
|
|
8756
|
+
* pending.caretOffset. But a single user keystroke (and insertSoftBreak)
|
|
8757
|
+
* triggers our own writeSelection, which the browser reports back as one or
|
|
8758
|
+
* more selectionchange events — and in shadow DOM (notably Chromium and
|
|
8759
|
+
* Firefox) one of those can arrive with the post-keystroke caret offset before
|
|
8760
|
+
* syncFromDom has updated pending.caretOffset to match. Without this guard,
|
|
8761
|
+
* that transient mismatch clears pending mid-typing, the toolbar flips off,
|
|
8762
|
+
* and the next character is no longer colored. We absorb a small burst of
|
|
8763
|
+
* these self-inflicted events (a single boolean is not enough — shadow DOM can
|
|
8764
|
+
* emit several per action) and re-sync caretOffset to the real caret as they
|
|
8765
|
+
* arrive, so a genuine later caret move still clears pending correctly.
|
|
8766
|
+
*
|
|
8767
|
+
* Confirmed load-bearing: removing it makes the shadow-DOM "color buttons stay
|
|
8768
|
+
* active while typing" CT flake/time out in Chromium.
|
|
8769
|
+
*/
|
|
8770
|
+
private preservePendingSelectionChanges;
|
|
8771
|
+
private history;
|
|
8772
|
+
private opts;
|
|
8773
|
+
private el;
|
|
8774
|
+
private pendingExternalRender;
|
|
8775
|
+
private keyboardShortcutsOverride;
|
|
8776
|
+
constructor(opts?: EditorCoreOptions);
|
|
8777
|
+
/**
|
|
8778
|
+
* Sets a per-element keyboard-shortcut override. `undefined` clears it and
|
|
8779
|
+
* restores the editor-level {@link EditorCoreOptions.areKeyboardShortcutsEnabled}.
|
|
8780
|
+
*/
|
|
8781
|
+
setKeyboardShortcutsEnabled(enabled: boolean | undefined): void;
|
|
8782
|
+
/**
|
|
8783
|
+
* Renders the current doc into `el`, attaches event listeners and returns a
|
|
8784
|
+
* cleanup function that removes them. Calling attach() a second time without
|
|
8785
|
+
* first calling the returned cleanup is undefined behaviour.
|
|
8786
|
+
*/
|
|
8787
|
+
attach(el: HTMLElement): () => void;
|
|
8788
|
+
private readonly handleBeforeInputBound;
|
|
8789
|
+
private readonly handleInputBound;
|
|
8790
|
+
private readonly handlePasteBound;
|
|
8791
|
+
private readonly handlePointerDownBound;
|
|
8792
|
+
private readonly handleCompositionStartBound;
|
|
8793
|
+
private readonly handleCompositionEndBound;
|
|
8794
|
+
private readonly handleSelectionChangeBound;
|
|
8795
|
+
/**
|
|
8796
|
+
* Synchronously refreshes cachedRange from the live DOM selection when that
|
|
8797
|
+
* selection is inside the editor. Leaves cachedRange untouched when the
|
|
8798
|
+
* selection is elsewhere (dialogs, toolbar popovers) or unreadable.
|
|
8799
|
+
*/
|
|
8800
|
+
private refreshSelectionFromDom;
|
|
8801
|
+
getDoc(): RichTextEditorDoc;
|
|
8802
|
+
getValue(): string;
|
|
8803
|
+
/**
|
|
8804
|
+
* Sets the document from an HTML string (controlled entry point).
|
|
8805
|
+
*
|
|
8806
|
+
* SKIPS (no-op) when `html` matches the last known serialized value to
|
|
8807
|
+
* break controlled-value loops. Never emits onChange unless `emit: true`.
|
|
8808
|
+
*
|
|
8809
|
+
* NOTE: Does not record history — see module-level design notes.
|
|
8810
|
+
*/
|
|
8811
|
+
setValue(html: string, opts?: {
|
|
8812
|
+
emit?: boolean;
|
|
8813
|
+
}): void;
|
|
8814
|
+
private static docHasMentionInput;
|
|
8815
|
+
/**
|
|
8816
|
+
* Dispatches a named command at the current selection.
|
|
8817
|
+
*
|
|
8818
|
+
* Identity-diff: if the command returns the same `doc` reference (no-op),
|
|
8819
|
+
* nothing changes — except for `toggleMark` on a collapsed selection, which
|
|
8820
|
+
* sets pendingMarks and emits onSelectionChange.
|
|
8821
|
+
*/
|
|
8822
|
+
exec<K extends CommandName>(name: K, ...args: CommandArgs[K]): void;
|
|
8823
|
+
undo(): void;
|
|
8824
|
+
redo(): void;
|
|
8825
|
+
canUndo(): boolean;
|
|
8826
|
+
canRedo(): boolean;
|
|
8827
|
+
focus(): void;
|
|
8828
|
+
setCaretPosition(absoluteOffset: number): void;
|
|
8829
|
+
/**
|
|
8830
|
+
* Restores a model selection: focuses the editor and writes the range to
|
|
8831
|
+
* both the DOM and cachedRange. Used by toolbar popovers (e.g. the color
|
|
8832
|
+
* picker) that captured the selection before taking focus — on Firefox,
|
|
8833
|
+
* refocusing a contenteditable collapses its DOM selection, so the range
|
|
8834
|
+
* must be re-applied explicitly before dispatching a command.
|
|
8835
|
+
*/
|
|
8836
|
+
select(range: ModelRange): void;
|
|
8837
|
+
selectStart(): void;
|
|
8838
|
+
selectEnd(): void;
|
|
8839
|
+
getSelectionState(): SelectionState;
|
|
8840
|
+
private buildSelectionState;
|
|
8841
|
+
private mergePendingMarks;
|
|
8842
|
+
/**
|
|
8843
|
+
* Toggle a pending boolean mark for the collapsed-caret case.
|
|
8844
|
+
*
|
|
8845
|
+
* We store the FULL effective marks snapshot (base + toggle) so that
|
|
8846
|
+
* applyPendingMarks can apply them directly to the just-typed range.
|
|
8847
|
+
* Toggling the same mark a second time returns to the base state.
|
|
8848
|
+
*/
|
|
8849
|
+
private setPendingMark;
|
|
8850
|
+
/**
|
|
8851
|
+
* Set or clear a pending color/backgroundColor mark for the collapsed-caret case.
|
|
8852
|
+
* `value === undefined` removes that key from the pending snapshot.
|
|
8853
|
+
*/
|
|
8854
|
+
private setPendingColorMark;
|
|
8855
|
+
private emitSelectionChange;
|
|
8856
|
+
/**
|
|
8857
|
+
* Applies a doc+range change, re-renders if attached, emits events.
|
|
8858
|
+
*/
|
|
8859
|
+
private applyDocChange;
|
|
8860
|
+
private handleBeforeInput;
|
|
8861
|
+
/**
|
|
8862
|
+
* Returns true when the current caret position is preceded by a word boundary
|
|
8863
|
+
* (or is at the start of a paragraph), matching the pattern /^$|^[\s"']$/.
|
|
8864
|
+
*/
|
|
8865
|
+
private shouldTriggerMention;
|
|
8866
|
+
private lastCharOf;
|
|
8867
|
+
private autoLinkEnabled;
|
|
8868
|
+
/**
|
|
8869
|
+
* Gates {@link findAutoLinkBeforeCaret} on the feature being enabled and no
|
|
8870
|
+
* active IME composition — the shared entry point for the typing and
|
|
8871
|
+
* soft-break paths.
|
|
8872
|
+
*/
|
|
8873
|
+
private detectAutoLinkBeforeCaret;
|
|
8874
|
+
/**
|
|
8875
|
+
* Finds the plain-text URL token ending at the (collapsed) caret and returns
|
|
8876
|
+
* the absolute-offset span that should be linked plus its href, or null. The
|
|
8877
|
+
* backward scan collects contiguous plain-text characters within the current
|
|
8878
|
+
* paragraph and stops at whitespace, the paragraph start, or any non-text
|
|
8879
|
+
* inline (link/mention) boundary — so it never re-links text already inside a
|
|
8880
|
+
* link or text adjacent to an atomic.
|
|
8881
|
+
*/
|
|
8882
|
+
private findAutoLinkBeforeCaret;
|
|
8883
|
+
/**
|
|
8884
|
+
* Wraps a previously-detected token span (absolute offsets in the CURRENT
|
|
8885
|
+
* doc) in a link, recording its own history entry and leaving the caret where
|
|
8886
|
+
* it is (wrapLink is length-preserving). Called right after the delimiter that
|
|
8887
|
+
* triggered the conversion has been inserted.
|
|
8888
|
+
*/
|
|
8889
|
+
private applyAutoLink;
|
|
8890
|
+
private handlePasteInput;
|
|
8891
|
+
private insertPastedData;
|
|
8892
|
+
/**
|
|
8893
|
+
* Called after an `input` event (or compositionend). Reads the current DOM
|
|
8894
|
+
* back into a model doc and reconciles with internal state.
|
|
8895
|
+
*/
|
|
8896
|
+
private syncFromDom;
|
|
8897
|
+
/**
|
|
8898
|
+
* Apply pending marks to the text that was just typed.
|
|
8899
|
+
*
|
|
8900
|
+
* The just-typed range is determined by diffing the pre-input caret absolute
|
|
8901
|
+
* offset against the post-input caret absolute offset.
|
|
8902
|
+
*/
|
|
8903
|
+
private applyPendingMarks;
|
|
8904
|
+
/**
|
|
8905
|
+
* Applies the pending mark snapshot to the [preOffset, postOffset] range,
|
|
8906
|
+
* re-deriving the range from absolute offsets before each command (commands
|
|
8907
|
+
* may split nodes and stale a ModelRange). Returns the resulting doc by
|
|
8908
|
+
* identity when no mark changed.
|
|
8909
|
+
*/
|
|
8910
|
+
private applyPendingMarkSnapshot;
|
|
8911
|
+
private handleSelectionChange;
|
|
8912
|
+
private dispatchCommand;
|
|
8913
|
+
private collapsedAtDocEnd;
|
|
8914
|
+
private rangesEqual;
|
|
8915
|
+
}
|
|
8916
|
+
|
|
8917
|
+
/**
|
|
8918
|
+
* Public types for the headless editor binding layer.
|
|
8919
|
+
*
|
|
8920
|
+
* The `EditorState` handle is the entire API: all reading (selection, value)
|
|
8921
|
+
* and acting (focus, commands, marks) happens on it. Hooks and the provider
|
|
8922
|
+
* only create the handle or deliver it to a component — they never wrap what
|
|
8923
|
+
* the handle can already do.
|
|
8924
|
+
*/
|
|
8925
|
+
|
|
8926
|
+
/**
|
|
8927
|
+
* A live handle to one editor instance. Reactive fields (`selectionState`,
|
|
8928
|
+
* `value`, `isEmpty`, `canUndo`, `canRedo`, `isDisabled`) update across renders;
|
|
8929
|
+
* the methods are stable passthroughs to the underlying {@link EditorCore}.
|
|
8930
|
+
*/
|
|
8931
|
+
interface EditorState {
|
|
8932
|
+
/** The underlying framework-free engine (escape hatch). */
|
|
8933
|
+
core: EditorCore;
|
|
8934
|
+
/** Active marks, link, and range at the current selection. */
|
|
8935
|
+
selectionState: SelectionState;
|
|
8936
|
+
/**
|
|
8937
|
+
* Current value as a string. In controlled mode this mirrors the consumer's
|
|
8938
|
+
* (possibly unnormalized) `value` prop; for the engine's own normalized
|
|
8939
|
+
* serialization use {@link getValue}.
|
|
8940
|
+
*/
|
|
8941
|
+
value: string;
|
|
8942
|
+
/** Whether the document is empty (drives placeholder visibility). */
|
|
8943
|
+
isEmpty: boolean;
|
|
8944
|
+
/** Whether the editor is read-only. */
|
|
8945
|
+
isDisabled: boolean;
|
|
8946
|
+
/** Whether built-in formatting/history keyboard shortcuts are enabled. */
|
|
8947
|
+
keyboardShortcuts: boolean;
|
|
8948
|
+
canUndo: boolean;
|
|
8949
|
+
canRedo: boolean;
|
|
8950
|
+
focus: EditorCore["focus"];
|
|
8951
|
+
selectStart: EditorCore["selectStart"];
|
|
8952
|
+
selectEnd: EditorCore["selectEnd"];
|
|
8953
|
+
setCaretPosition: EditorCore["setCaretPosition"];
|
|
8954
|
+
undo: EditorCore["undo"];
|
|
8955
|
+
redo: EditorCore["redo"];
|
|
8956
|
+
getValue: EditorCore["getValue"];
|
|
8957
|
+
setValue: EditorCore["setValue"];
|
|
8958
|
+
exec: EditorCore["exec"];
|
|
8959
|
+
/** Whether `mark` is active at the current selection. */
|
|
8960
|
+
isMarkActive: (mark: MarkName) => boolean;
|
|
8961
|
+
/** Toggle a boolean mark (bold/italic/underline). */
|
|
8962
|
+
toggleMark: (mark: MarkName) => void;
|
|
8963
|
+
/** Set or clear a color mark; omit `value` to clear. */
|
|
8964
|
+
setMark: (key: "color" | "backgroundColor", value?: string) => void;
|
|
8965
|
+
}
|
|
8966
|
+
/**
|
|
8967
|
+
* Options for {@link useEditor}. Combines the engine callbacks with the
|
|
8968
|
+
* React-managed props the hook owns the lifecycle for.
|
|
8969
|
+
*/
|
|
8970
|
+
interface UseEditorOptions extends Pick<EditorCoreOptions, "onChange" | "onSelectionChange" | "onMentionTrigger" | "onMentionInputRemoved" | "canStartMention" | "isReadOnly"> {
|
|
8971
|
+
/** Controlled value (provide with `onChange`). */
|
|
8972
|
+
value?: string;
|
|
8973
|
+
/** Initial value for uncontrolled use (applied once on mount). */
|
|
8974
|
+
defaultValue?: string;
|
|
8975
|
+
/** When true, the editor is read-only and selection is cleared. */
|
|
8976
|
+
isDisabled?: boolean;
|
|
8977
|
+
/**
|
|
8978
|
+
* Whether the built-in formatting (bold/italic/underline) and history
|
|
8979
|
+
* (undo/redo) keyboard shortcuts are active. Disable to wire your own.
|
|
8980
|
+
*
|
|
8981
|
+
* @default true
|
|
8982
|
+
*/
|
|
8983
|
+
keyboardShortcuts?: boolean;
|
|
8984
|
+
/**
|
|
8985
|
+
* Whether URL-shaped text is automatically converted into links (typing a
|
|
8986
|
+
* delimiter after a URL, pasting URLs, smart-pasting a URL over a selection).
|
|
8987
|
+
*
|
|
8988
|
+
* @default true
|
|
8989
|
+
*/
|
|
8990
|
+
autoLink?: boolean;
|
|
8991
|
+
}
|
|
8992
|
+
|
|
8993
|
+
/**
|
|
8994
|
+
* Creates and owns a single editor engine, wiring its React lifecycle:
|
|
8995
|
+
* controlled `value` sync, one-time `defaultValue` init, `isDisabled`
|
|
8996
|
+
* read-only handling, and reactive selection/value state. Returns the stable
|
|
8997
|
+
* {@link EditorState} handle — the entire editor API.
|
|
8998
|
+
*
|
|
8999
|
+
* The handle does not attach to the DOM; pass it to {@link useEditable} on the
|
|
9000
|
+
* element you want to make editable.
|
|
9001
|
+
*/
|
|
9002
|
+
declare function useEditor(options?: UseEditorOptions): EditorState;
|
|
9003
|
+
|
|
9004
|
+
interface UseEditableOptions {
|
|
9005
|
+
/** A ref to merge with the internal element ref (e.g. for measuring/querying). */
|
|
9006
|
+
ref?: Ref<HTMLDivElement>;
|
|
9007
|
+
/**
|
|
9008
|
+
* Focus the element on mount, optionally positioning the caret at the
|
|
9009
|
+
* start/end. Runs after the engine attaches.
|
|
9010
|
+
*/
|
|
9011
|
+
autoFocus?: boolean | "start" | "end";
|
|
9012
|
+
/**
|
|
9013
|
+
* App-specific key handling, invoked before the built-in shortcuts
|
|
9014
|
+
* (bold/italic/underline, undo/redo). Return `true` if the event was handled
|
|
9015
|
+
* to skip the built-ins.
|
|
9016
|
+
*/
|
|
9017
|
+
onKeyDown?: (event: KeyboardEvent$1) => boolean | undefined;
|
|
9018
|
+
/**
|
|
9019
|
+
* Whether the built-in formatting/history shortcuts are active. Overrides the
|
|
9020
|
+
* editor's `keyboardShortcuts` setting for this element. Defaults to the
|
|
9021
|
+
* editor's setting (which itself defaults to enabled).
|
|
9022
|
+
*/
|
|
9023
|
+
keyboardShortcuts?: boolean;
|
|
9024
|
+
}
|
|
9025
|
+
interface EditableProps {
|
|
9026
|
+
id: string;
|
|
9027
|
+
ref: Ref<HTMLDivElement>;
|
|
9028
|
+
contentEditable: boolean;
|
|
9029
|
+
suppressContentEditableWarning: true;
|
|
9030
|
+
role: "textbox";
|
|
9031
|
+
"aria-multiline": true;
|
|
9032
|
+
onKeyDown?: KeyboardEventHandler;
|
|
9033
|
+
onKeyUp?: KeyboardEventHandler;
|
|
9034
|
+
}
|
|
9035
|
+
/**
|
|
9036
|
+
* Applies the built-in formatting (Ctrl/Cmd+B/I/U) and history (Ctrl/Cmd+Z,
|
|
9037
|
+
* Shift+Z, Ctrl+Y) shortcuts to `editor`. Returns `true` (and calls
|
|
9038
|
+
* `preventDefault`) when the event matched a shortcut, so the caller can stop
|
|
9039
|
+
* further handling. Exported for direct use by custom keydown handlers.
|
|
9040
|
+
*/
|
|
9041
|
+
declare function handleEditorShortcut(event: KeyboardEvent$1, editor: EditorState): boolean;
|
|
9042
|
+
/**
|
|
9043
|
+
* Returns `{ editableProps }` to spread on the HTML element you want to make
|
|
9044
|
+
* editable. Owns the element ref, the engine `attach()` lifecycle, the generic
|
|
9045
|
+
* formatting shortcuts (Ctrl/Cmd+B/I/U, undo/redo), and `autoFocus`.
|
|
9046
|
+
*
|
|
9047
|
+
* Pass the editor handle explicitly, or omit it to resolve the nearest
|
|
9048
|
+
* {@link EditorProvider}.
|
|
9049
|
+
*/
|
|
9050
|
+
declare function useEditable(editor?: EditorState, options?: UseEditableOptions): {
|
|
9051
|
+
editableProps: EditableProps;
|
|
9052
|
+
};
|
|
9053
|
+
|
|
9054
|
+
interface EditorProviderProps {
|
|
9055
|
+
/** The editor handle returned by `useEditor`. */
|
|
9056
|
+
editor: EditorState;
|
|
9057
|
+
children: React__default.ReactNode;
|
|
9058
|
+
}
|
|
9059
|
+
/**
|
|
9060
|
+
* Shares one editor handle with its subtree. Wrap each editor's UI in its own
|
|
9061
|
+
* `EditorProvider`; hooks inside (`useEditable`, `useEditorContext`) resolve to
|
|
9062
|
+
* this editor via the nearest provider.
|
|
9063
|
+
*/
|
|
9064
|
+
declare const EditorProvider: React__default.FC<EditorProviderProps>;
|
|
9065
|
+
|
|
9066
|
+
/**
|
|
9067
|
+
* EditorContext — shares one {@link EditorState} handle with a subtree so a
|
|
9068
|
+
* co-located toolbar can reach the editor without prop-drilling. One provider
|
|
9069
|
+
* per editor; nearest-wins resolution keeps multiple editors isolated.
|
|
9070
|
+
*/
|
|
9071
|
+
|
|
9072
|
+
/**
|
|
9073
|
+
* Returns the {@link EditorState} from the nearest {@link EditorProvider}.
|
|
9074
|
+
* Throws if called outside a provider.
|
|
9075
|
+
*/
|
|
9076
|
+
declare function useEditorContext(): EditorState;
|
|
9077
|
+
declare const EMPTY_SELECTION_STATE: SelectionState;
|
|
9078
|
+
|
|
8577
9079
|
interface ScrollControlButtonProps extends StylingProps, Pick<ActionButtonProps, "label"> {
|
|
8578
9080
|
/**
|
|
8579
9081
|
* The ref to the scrollable element.
|
|
@@ -9161,7 +9663,7 @@ interface ColorSwatchPickerProps extends StylingProps, Pick<RadioGroupProps, "op
|
|
|
9161
9663
|
|
|
9162
9664
|
declare const ColorSwatchPicker: React__default.ForwardRefExoticComponent<ColorSwatchPickerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
9163
9665
|
|
|
9164
|
-
declare const TimeField: React__default.ForwardRefExoticComponent<StylingProps & Omit<Omit<TimeFieldStateOptions<TimeValue>, "locale"> & AriaTimeFieldProps<TimeValue>, "
|
|
9666
|
+
declare const TimeField: React__default.ForwardRefExoticComponent<StylingProps & Omit<Omit<TimeFieldStateOptions<TimeValue>, "locale"> & AriaTimeFieldProps<TimeValue>, "isRequired" | "validate" | "validationState" | "isInvalid"> & Pick<SharedInputProps, "label" | "variant" | "validationState" | "labelPosition"> & InputMessage & React__default.RefAttributes<HTMLDivElement>>;
|
|
9165
9667
|
|
|
9166
9668
|
type TimeFieldProps = StylingProps & Omit<Omit<TimeFieldStateOptions, "locale"> & AriaTimeFieldProps<TimeValue>, "validationState" | "isInvalid" | "isRequired" | "validate"> & Pick<SharedInputProps, "variant" | "labelPosition" | "validationState" | "label"> & InputMessage;
|
|
9167
9669
|
|
|
@@ -9412,7 +9914,7 @@ type DateFieldProps = StylingProps & Omit<Omit<DateFieldStateOptions, "locale">
|
|
|
9412
9914
|
pickerType?: DateFieldPickerType;
|
|
9413
9915
|
};
|
|
9414
9916
|
|
|
9415
|
-
declare const DateField: React__default.ForwardRefExoticComponent<StylingProps & Omit<Omit<DateFieldStateOptions<DateValue>, "locale"> & AriaDateFieldProps<DateValue>, "
|
|
9917
|
+
declare const DateField: React__default.ForwardRefExoticComponent<StylingProps & Omit<Omit<DateFieldStateOptions<DateValue>, "locale"> & AriaDateFieldProps<DateValue>, "isRequired" | "validate" | "validationState" | "isInvalid" | "createCalendar"> & Pick<SharedInputProps, "label" | "variant" | "validationState" | "labelPosition"> & InputMessage & {
|
|
9416
9918
|
pickerType?: DateFieldPickerType;
|
|
9417
9919
|
} & React__default.RefAttributes<HTMLDivElement>>;
|
|
9418
9920
|
|
|
@@ -9923,6 +10425,71 @@ interface FileListProps extends AriaLabelingProps {
|
|
|
9923
10425
|
|
|
9924
10426
|
declare const FileList$1: React__default.ForwardRefExoticComponent<FileListProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
9925
10427
|
|
|
10428
|
+
interface FileUploaderProps extends Omit<StylingProps, keyof BlockProps> {
|
|
10429
|
+
/**
|
|
10430
|
+
* The visual variant.
|
|
10431
|
+
*
|
|
10432
|
+
* - `dropzone` (default): renders a drop area that accepts dragged and
|
|
10433
|
+
* pasted files. Clicking anywhere in the area opens the file picker.
|
|
10434
|
+
* - `button`: renders an `ActionButton` that opens the file picker. No
|
|
10435
|
+
* drop target is rendered.
|
|
10436
|
+
*
|
|
10437
|
+
* @default "dropzone"
|
|
10438
|
+
*/
|
|
10439
|
+
variant?: "dropzone" | "button";
|
|
10440
|
+
/**
|
|
10441
|
+
* Whether the `dropzone` drop area is rendered inline — outlined with a
|
|
10442
|
+
* dashed border and rounded corners — instead of as a plain filled box.
|
|
10443
|
+
* Has no effect on the `button` variant.
|
|
10444
|
+
*
|
|
10445
|
+
* @default false
|
|
10446
|
+
*/
|
|
10447
|
+
isInline?: boolean;
|
|
10448
|
+
/** Optional label rendered above the trigger. */
|
|
10449
|
+
label?: React__default.ReactNode;
|
|
10450
|
+
/** Optional description rendered below the label. */
|
|
10451
|
+
description?: React__default.ReactNode;
|
|
10452
|
+
/** Called when the user selects or drops new files. */
|
|
10453
|
+
onAdd?: (files: File[]) => void;
|
|
10454
|
+
/**
|
|
10455
|
+
* The file types the uploader accepts, as a comma-separated list of file
|
|
10456
|
+
* extensions (`.png`), MIME types (`image/png`), or wildcard MIME types
|
|
10457
|
+
* (`image/*`). Passed through to the underlying `<input type="file">`
|
|
10458
|
+
* `accept` attribute, and also used to filter dropped and pasted files so
|
|
10459
|
+
* the drop/paste path enforces the same restriction as the native picker.
|
|
10460
|
+
*/
|
|
10461
|
+
accept?: string;
|
|
10462
|
+
/**
|
|
10463
|
+
* Whether multiple files can be selected at once.
|
|
10464
|
+
*
|
|
10465
|
+
* @default true
|
|
10466
|
+
*/
|
|
10467
|
+
allowsMultiple?: boolean;
|
|
10468
|
+
/** Whether the entire uploader is disabled. */
|
|
10469
|
+
isDisabled?: boolean;
|
|
10470
|
+
/**
|
|
10471
|
+
* Top-level error message. When provided, the dropzone is rendered with
|
|
10472
|
+
* the error border and the message is wired to the trigger via
|
|
10473
|
+
* `aria-describedby`, so it must be plain text.
|
|
10474
|
+
*/
|
|
10475
|
+
errorMessage?: string;
|
|
10476
|
+
/**
|
|
10477
|
+
* The label of the button rendered in the `button` variant.
|
|
10478
|
+
*
|
|
10479
|
+
* @default "Upload"
|
|
10480
|
+
*/
|
|
10481
|
+
buttonLabel?: string;
|
|
10482
|
+
/**
|
|
10483
|
+
* The text rendered inside the clickable drop area in the `dropzone`
|
|
10484
|
+
* variant.
|
|
10485
|
+
*
|
|
10486
|
+
* @default "Drop files here or click to upload"
|
|
10487
|
+
*/
|
|
10488
|
+
dropzoneLabel?: string;
|
|
10489
|
+
}
|
|
10490
|
+
|
|
10491
|
+
declare const FileUploader: React__default.ForwardRefExoticComponent<FileUploaderProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
10492
|
+
|
|
9926
10493
|
/**
|
|
9927
10494
|
* A hook that creates an IntersectionObserver and observes a target element.
|
|
9928
10495
|
*
|
|
@@ -10240,8 +10807,9 @@ interface TextSelectionProps {
|
|
|
10240
10807
|
* }
|
|
10241
10808
|
* ```
|
|
10242
10809
|
*
|
|
10243
|
-
* @param element -
|
|
10244
|
-
*
|
|
10810
|
+
* @param element - Optional element whose owner window is used for breakpoint
|
|
10811
|
+
* detection (e.g. an element inside an iframe or shadow root). When omitted,
|
|
10812
|
+
* the global window is used.
|
|
10245
10813
|
*/
|
|
10246
10814
|
declare function useDevice(element?: Element | null): "mobile" | "tablet" | "desktop";
|
|
10247
10815
|
type Device = ReturnType<typeof useDevice>;
|
|
@@ -10365,5 +10933,5 @@ declare namespace reactStately {
|
|
|
10365
10933
|
export type { reactStately_Color as Color, reactStately_ListData as ListData, reactStately_TreeData as TreeData };
|
|
10366
10934
|
}
|
|
10367
10935
|
|
|
10368
|
-
export { Accordion, AccordionItem, ActionButton, ActionGroup, ActionGroupItem, ActionIconButton, Actionable, AlertDialog, AudioPlayer, Autocomplete, Avatar, Box, ButtonSelect, Calendar, Cell, Checkbox, Code, ColorInput, ColorSwatch, ColorSwatchPicker, Column, ComboBox, DateField, DateFormat, DefaultListOption, DeviceProvider, DeviceProviderContext, Dialog, DialogTitle, Disclosure, DomNodeRenderer, Drawer, Editor, FileInput, FileList$1 as FileList,
|
|
10369
|
-
export type { AccordionItemProps, AccordionProps, ActionButtonProps, ActionGroupProps, ActionIconButtonProps, ActionableProps, AlertDialogProps, AudioPlayerProps, AutocompleteProps, AvatarProps, BlockProps, BoundaryAxis, BoxProps, ButtonSelectProps, CalendarHeaderVariant, CalendarProps, CalendarSize, CellProps, CheckboxProps, CodeProps, ColorInputProps, ColorPreset, ColorSwatchPickerProps, ColorSwatchProps, ColumnProps, ComboBoxProps, DateFieldPickerType, DateFieldProps, DateFormatProps, Device, DeviceProviderProps, DialogProps, DialogTitleProps, DisclosureProps, DomNodeRendererProps, DrawerProps, EditorHandle, EditorProps, FileInputProps, FileListItem, FileListProps,
|
|
10936
|
+
export { Accordion, AccordionItem, ActionButton, ActionGroup, ActionGroupItem, ActionIconButton, Actionable, AlertDialog, AudioPlayer, Autocomplete, Avatar, Box, ButtonSelect, Calendar, Cell, Checkbox, Code, ColorInput, ColorSwatch, ColorSwatchPicker, Column, ComboBox, DateField, DateFormat, DefaultListOption, DeviceProvider, DeviceProviderContext, Dialog, DialogTitle, Disclosure, DomNodeRenderer, Drawer, EMPTY_SELECTION_STATE, Editor, EditorCore, EditorProvider, FileInput, FileList$1 as FileList, FileUploader, FocusScope, Focusable, FrameProvider, FreehandCanvas, GlobalToastRegion, GridLayout, GridList, Group, I18nProvider, Icon, IconColorInput, IconColorInputButton, IconSelect, IconSlider, ImageDropZone, ImageGallery, InlineAlert, Kbd, Link, ListBox, ListLayout, LocaleAwareGridLayout, Markdown, Menu, MessageFormat, Modal, ModalClose, ModalContent, ModalTrigger, NumberFormat, NumberInput, Pagination, Panel, PanelGroup, PanelResizeHandle, PointPicker, PointPickerContent, PointPickerDisplay, Popover, PopoverContent, PopoverTrigger, Portal, PortalContainerProvider, Pressable, Preview, ProgressBar, ProgressSpinner, REACT_ARIA_INCOMPATIBLE_KEYS, RadioGroup, RangeCalendar, Reaction, Row, ScrollControlButton, SearchInput, Select, Separator, Size, Skeleton, Slider, StatusCard, Stepper, Switch, TabItem, Table, TableBody, TableHeader, TableLayout, Tabs, Tag, TagGroup, TaggedPagination, Text, TextInput, ThemeProvider, TimeField, ToastQueue, ToggleButton, ToggleIconButton, Toolbar, Tooltip, TreeView, UNSAFE_ListBox, reactAria as UNSAFE_aria, reactStately as UNSAFE_stately, VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS, Virtualizer, VisuallyHidden, WaterfallLayout, announce, areColorsEqual, booleanOrObjectToConfig, calculateFontSizeToFitWidth, capitalize, clamp, classNames, cleanKeyFromGlobImport, clearAnnouncer, defineMessages, destroyAnnouncer, devWarnOnce, directionVar, disableAnimations, enableAnimations, filterDOMProps, filterTruthyValues, findFocusableElements, getAbsoluteBounds, getAbsolutePosition, getActiveElement, getHTMLElement, getOsSpecificKeyboardShortcutLabel, getOwnerDocument, getPlainText, getSvgPathFromStroke, getTextDimensions, handleEditorShortcut, iconMap, invariant, isFocusableElement, isInIframe, isInShadowDOM, isInputThatOpensKeyboard, isInsideOverlayContent, isRect, isUrl, lightenColor, mergeProps, mergeRefs, onDropOrPaste, parseColor, safeSpreadProps, useCollator, useDateFormatter, useDevice, useDragAndDrop, useEditable, useEditor, useEditorContext, useFilter, useFocusRing, useFocusVisible, useFrameDimensions, useI18n, useId, useImage, useInteractionModality, useIntersectionObserver, useIsFirstRender, useKeyboard, useListData, useLiveInteractionModality, useLocalStorage, useLocale, useMutationObserver, useNumberFormatter, useObjectRef, usePointProximity, usePortalContainer, usePreventFocus, useResizeObserver, useTableDragAndDrop, useTextSelection, useUndoRedo, useUserPreferences };
|
|
10937
|
+
export type { AccordionItemProps, AccordionProps, ActionButtonProps, ActionGroupProps, ActionIconButtonProps, ActionableProps, ActiveMarks, AlertDialogProps, AudioPlayerProps, AutocompleteProps, AvatarProps, BlockProps, BoundaryAxis, BoxProps, ButtonSelectProps, CalendarHeaderVariant, CalendarProps, CalendarSize, CellProps, CheckboxProps, CodeProps, ColorInputProps, ColorPreset, ColorSwatchPickerProps, ColorSwatchProps, ColumnProps, ComboBoxProps, CommandArgs, CommandName, DateFieldPickerType, DateFieldProps, DateFormatProps, Device, DeviceProviderProps, DialogProps, DialogTitleProps, DisclosureProps, DomNodeRendererProps, DrawerProps, EditableProps, EditorCoreOptions, EditorHandle, EditorProps, EditorProviderProps, EditorState, FileInputProps, FileListItem, FileListProps, FileUploaderProps, FocusableProps, FrameProviderProps, FreehandCanvasProps, GridListProps, GroupProps, HorizontalBoundaryBehavior, I18nProviderProps, I18nResult, IconColorInputProps, IconComponentProps$1 as IconComponentProps, IconProps, IconSelectProps, IconSliderProps, ImageDropZoneProps, ImageGalleryProps, ImperativePanelGroupHandle, ImperativePanelHandle, InlineAlertProps, IntersectionObserverOptions, KbdProps, Key, LinkProps, ListBoxProps, ListHandle$1 as ListHandle, ListOption, MarkName, MarkdownProps, MenuItem, MenuProps, MessageDescriptor, MessageFormatProps, MessageFormatter, ModalContentProps, ModalProps, ModelPoint, ModelRange, NumberFormatProps, NumberInputProps, PaginationProps, PanelGroupProps, PanelProps, PanelResizeHandleProps, PointPickerContentProps, PointPickerDisplayProps, PointPickerProps, PopoverContentHandle, PopoverContentProps, PopoverProps, PopoverTriggerProps, PortalProps, PressEvent, PreviewProps, ProgressBarProps, ProgressSpinnerProps, RadioGroupProps, RangeCalendarProps, ReactAriaIncompatibleKey, ReactionProps, Rect, ResizeObserverOptions, RichTextEditorDoc, RichTextEditorInline, RichTextEditorLink, RichTextEditorMention, RichTextEditorMentionInput, RichTextEditorParagraph, RichTextEditorText, RowProps, SVGRProps, SafeDOMAttributes, ScrollControlButtonProps, SearchInputProps, SelectProps, SelectionState, SeparatorProps, SetValue, SkeletonProps, SliderProps, StatusCardProps, StepperItem, StepperProps, StylingProps, SwitchProps, TabItemProps, TableBodyProps, TableHeaderProps, TableProps, TabsProps, TagGroupProps, TagProps, TagVariant, TaggedPaginationProps, TextInputProps, TextProps, TextSelectionProps, ThemeProviderProps, TimeFieldProps, ToastProps, ToggleButtonProps, ToggleIconButtonProps, ToolbarProps, TooltipProps, TreeListItem, TreeViewProps, UNSAFE_ListBoxProps, UseEditableOptions, UseEditorOptions, UseTableDragAndDropOptions, VirtualizerProps };
|