@prosekit/react 0.8.0-beta.13 → 0.8.0-beta.15
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/dist/autocomplete.d.ts
CHANGED
|
@@ -169,6 +169,16 @@ interface AutocompleteRootProps {
|
|
|
169
169
|
* @default defaultItemFilter
|
|
170
170
|
*/
|
|
171
171
|
filter?: AutocompleteRootProps$1['filter'];
|
|
172
|
+
/**
|
|
173
|
+
* Builds the query string from the regex match found before the cursor. The
|
|
174
|
+
* query is exposed via the `queryChange` event and used by the built-in item
|
|
175
|
+
* filter. The default builder lowercases the match and strips punctuation.
|
|
176
|
+
* Provide a custom builder to control the query, for example to preserve the
|
|
177
|
+
* casing and punctuation the user typed.
|
|
178
|
+
*
|
|
179
|
+
* @default defaultQueryBuilder
|
|
180
|
+
*/
|
|
181
|
+
queryBuilder?: AutocompleteRootProps$1['queryBuilder'];
|
|
172
182
|
/**
|
|
173
183
|
* The reference to position the popup against. This can be a DOM element, a
|
|
174
184
|
* Floating UI virtual element, or a function that returns either of them.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.d.ts","names":[],"sources":["../src/components/autocomplete/autocomplete-empty.gen.ts","../src/components/autocomplete/autocomplete-item.gen.ts","../src/components/autocomplete/autocomplete-popup.gen.ts","../src/components/autocomplete/autocomplete-positioner.gen.ts","../src/components/autocomplete/autocomplete-root.gen.ts"],"mappings":";;;UAMiB,sBAAA;;cAyBJ,iBAAA,EAAmB,yBAAA,CAA0B,sBAAA,GAAyB,cAAA,CAAe,wBAAA,IAA4B,aAAA,CAAc,wBAAA;;UCzB3H,qBAAA;EDAsB;;;AAAA;AAyBvC;;;ECjBE,KAAA,GAAQ,uBAAA;EDiBwF;;;;;ECXhG,QAAA,GAAW,uBAAA;EDW4C;ECTvD,QAAA,IAAY,KAAA,EAAO,sBAAA;AAAA;;cAkDR,gBAAA,EAAkB,yBAAA,CAA0B,qBAAA,GAAwB,IAAA,CAAK,cAAA,CAAe,uBAAA,iBAAwC,aAAA,CAAc,uBAAA;;UClE1I,sBAAA;EFAsB;;;AAAA;EEKrC,aAAA,IAAiB,KAAA,EAAO,uBAAA;EFoBqM;;;;EEf7N,cAAA,IAAkB,KAAA,EAAO,uBAAuB;AAAA;;cAiDrC,iBAAA,EAAmB,yBAAA,CAA0B,sBAAA,GAAyB,cAAA,CAAe,wBAAA,IAA4B,aAAA,CAAc,wBAAA;;UC3D3H,2BAAA;EHAsB;;;AAAA;AAyBvC;EGnBE,SAAA,GAAY,6BAAA;;;;;;EAMZ,MAAA,GAAS,6BAAA;EHaqB;;;;;;EGN9B,IAAA,GAAO,6BAAA;EHMqH;EGJ5H,MAAA,GAAS,6BAAA;EHIyJ;EGFlK,KAAA,GAAQ,6BAAA;;EAER,WAAA,GAAc,6BAAA;EFzBsB;EE2BpC,QAAA,GAAW,6BAAA;EFnBH;EEqBR,eAAA,GAAkB,6BAAA;EFbC;;;;;EEmBnB,QAAA,GAAW,6BAAA;EFrBA;;;;;AAEwC;AAkDrD;EEvBE,UAAA,GAAa,6BAAA;;;;;;;;;EASb,IAAA,GAAO,6BAAA;EFc+C;;;;;EERtD,KAAA,GAAQ,6BAAA;EFQmI;;;AAAqC;;AClElL;ECiEE,OAAA,GAAU,6BAAA;;;;;;;EAOV,SAAA,GAAY,6BAAA;ED9DM;;AAA8C;AAiDlE;;;ECoBE,UAAA,GAAa,6BAAA;EDpBmF;;;;;;EC2BhG,YAAA,GAAe,6BAAA;ED3Be;;;;;;;ECmC9B,cAAA,GAAiB,6BAAA;;AA9FnB;;;;;;EAsGE,WAAA,GAAc,6BAAA;AAAA;;cAgCH,sBAAA,EAAwB,yBAAA,CAA0B,2BAAA,GAA8B,cAAA,CAAe,6BAAA,IAAiC,aAAA,CAAc,6BAAA;;UCpI1I,qBAAA;EJFsB;;;AAAA;AAyBvC;;EIhBE,MAAA,GAAS,uBAAA;EJgB+C;;;;;EIVxD,KAAA,GAAQ,uBAAA;EJU+C;;;;;;EIHvD,MAAA,GAAS,uBAAA;EJGiI;;AAAwB;;ACzBpK
|
|
1
|
+
{"version":3,"file":"autocomplete.d.ts","names":[],"sources":["../src/components/autocomplete/autocomplete-empty.gen.ts","../src/components/autocomplete/autocomplete-item.gen.ts","../src/components/autocomplete/autocomplete-popup.gen.ts","../src/components/autocomplete/autocomplete-positioner.gen.ts","../src/components/autocomplete/autocomplete-root.gen.ts"],"mappings":";;;UAMiB,sBAAA;;cAyBJ,iBAAA,EAAmB,yBAAA,CAA0B,sBAAA,GAAyB,cAAA,CAAe,wBAAA,IAA4B,aAAA,CAAc,wBAAA;;UCzB3H,qBAAA;EDAsB;;;AAAA;AAyBvC;;;ECjBE,KAAA,GAAQ,uBAAA;EDiBwF;;;;;ECXhG,QAAA,GAAW,uBAAA;EDW4C;ECTvD,QAAA,IAAY,KAAA,EAAO,sBAAA;AAAA;;cAkDR,gBAAA,EAAkB,yBAAA,CAA0B,qBAAA,GAAwB,IAAA,CAAK,cAAA,CAAe,uBAAA,iBAAwC,aAAA,CAAc,uBAAA;;UClE1I,sBAAA;EFAsB;;;AAAA;EEKrC,aAAA,IAAiB,KAAA,EAAO,uBAAA;EFoBqM;;;;EEf7N,cAAA,IAAkB,KAAA,EAAO,uBAAuB;AAAA;;cAiDrC,iBAAA,EAAmB,yBAAA,CAA0B,sBAAA,GAAyB,cAAA,CAAe,wBAAA,IAA4B,aAAA,CAAc,wBAAA;;UC3D3H,2BAAA;EHAsB;;;AAAA;AAyBvC;EGnBE,SAAA,GAAY,6BAAA;;;;;;EAMZ,MAAA,GAAS,6BAAA;EHaqB;;;;;;EGN9B,IAAA,GAAO,6BAAA;EHMqH;EGJ5H,MAAA,GAAS,6BAAA;EHIyJ;EGFlK,KAAA,GAAQ,6BAAA;;EAER,WAAA,GAAc,6BAAA;EFzBsB;EE2BpC,QAAA,GAAW,6BAAA;EFnBH;EEqBR,eAAA,GAAkB,6BAAA;EFbC;;;;;EEmBnB,QAAA,GAAW,6BAAA;EFrBA;;;;;AAEwC;AAkDrD;EEvBE,UAAA,GAAa,6BAAA;;;;;;;;;EASb,IAAA,GAAO,6BAAA;EFc+C;;;;;EERtD,KAAA,GAAQ,6BAAA;EFQmI;;;AAAqC;;AClElL;ECiEE,OAAA,GAAU,6BAAA;;;;;;;EAOV,SAAA,GAAY,6BAAA;ED9DM;;AAA8C;AAiDlE;;;ECoBE,UAAA,GAAa,6BAAA;EDpBmF;;;;;;EC2BhG,YAAA,GAAe,6BAAA;ED3Be;;;;;;;ECmC9B,cAAA,GAAiB,6BAAA;;AA9FnB;;;;;;EAsGE,WAAA,GAAc,6BAAA;AAAA;;cAgCH,sBAAA,EAAwB,yBAAA,CAA0B,2BAAA,GAA8B,cAAA,CAAe,6BAAA,IAAiC,aAAA,CAAc,6BAAA;;UCpI1I,qBAAA;EJFsB;;;AAAA;AAyBvC;;EIhBE,MAAA,GAAS,uBAAA;EJgB+C;;;;;EIVxD,KAAA,GAAQ,uBAAA;EJU+C;;;;;;EIHvD,MAAA,GAAS,uBAAA;EJGiI;;AAAwB;;ACzBpK;;;;;EGgCE,YAAA,GAAe,uBAAA;EHhB0B;;;;;;;;EGyBzC,MAAA,GAAS,uBAAA;EHzB0C;EG2BnD,YAAA,IAAgB,KAAA,EAAO,sBAAA;EHuBZ;EGrBX,aAAA,IAAiB,KAAA,EAAO,sBAAA;;;;;EAKxB,aAAA,IAAiB,KAAA,EAAO,sBAAA;EHgBiI;;;;EGXzJ,cAAA,IAAkB,KAAA,EAAO,sBAAA;AAAA;;cAoDd,gBAAA,EAAkB,yBAAA,CAA0B,qBAAA,GAAwB,cAAA,CAAe,uBAAA,IAA2B,aAAA,CAAc,uBAAA"}
|
package/dist/autocomplete.js
CHANGED
|
@@ -132,7 +132,7 @@ function AutocompleteRootComponent(props, forwardedRef) {
|
|
|
132
132
|
const elementRef = useRef(null);
|
|
133
133
|
const handlersRef = useRef([]);
|
|
134
134
|
const p1Fallback = useEditorContext();
|
|
135
|
-
const { anchor: p0, editor: p1, filter: p2,
|
|
135
|
+
const { anchor: p0, editor: p1, filter: p2, queryBuilder: p3, regex: p4, onOpenChange: e0, onQueryChange: e1, onValueChange: e2, onValuesChange: e3, ...restProps } = props;
|
|
136
136
|
useLayoutEffect(() => {
|
|
137
137
|
const element = elementRef.current;
|
|
138
138
|
if (!element) return;
|
|
@@ -140,7 +140,8 @@ function AutocompleteRootComponent(props, forwardedRef) {
|
|
|
140
140
|
anchor: p0,
|
|
141
141
|
editor: p1 ?? p1Fallback,
|
|
142
142
|
filter: p2,
|
|
143
|
-
|
|
143
|
+
queryBuilder: p3,
|
|
144
|
+
regex: p4
|
|
144
145
|
});
|
|
145
146
|
handlersRef.current = [
|
|
146
147
|
e0,
|
package/dist/autocomplete.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.js","names":[],"sources":["../src/components/autocomplete/autocomplete-empty.gen.ts","../src/components/autocomplete/autocomplete-item.gen.ts","../src/components/autocomplete/autocomplete-popup.gen.ts","../src/components/autocomplete/autocomplete-positioner.gen.ts","../src/components/autocomplete/autocomplete-root.gen.ts","../src/components/autocomplete/index.ts"],"sourcesContent":["// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerAutocompleteEmptyElement, type AutocompleteEmptyElement } from '@prosekit/web/autocomplete';\nimport { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes } from 'react';\n\n/** Props for the {@link AutocompleteEmpty} React component. */\nexport interface AutocompleteEmptyProps {}\n\nfunction AutocompleteEmptyComponent(props: AutocompleteEmptyProps, forwardedRef: ForwardedRef<AutocompleteEmptyElement>) {\n registerAutocompleteEmptyElement();\n\n const elementRef = useRef<AutocompleteEmptyElement>(null);\n\n const { ...restProps } = props;\n\n const mergedRef = useCallback(\n (element: AutocompleteEmptyElement | null) => {\n elementRef.current = element;\n if (typeof forwardedRef === 'function') {\n forwardedRef(element);\n } else if (forwardedRef) {\n forwardedRef.current = element;\n }\n },\n [forwardedRef],\n );\n\n return createElement('prosekit-autocomplete-empty', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });\n}\n\n/** A React component that renders an `prosekit-autocomplete-empty` custom element. */\nexport const AutocompleteEmpty: ForwardRefExoticComponent<AutocompleteEmptyProps & HTMLAttributes<AutocompleteEmptyElement> & RefAttributes<AutocompleteEmptyElement>> = /* @__PURE__ */ forwardRef(AutocompleteEmptyComponent);\n","// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerAutocompleteItemElement, type AutocompleteItemElement, type AutocompleteItemProps as AutocompleteItemElementProps, type AutocompleteItemEvents } from '@prosekit/web/autocomplete';\nimport { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';\n\n/** Props for the {@link AutocompleteItem} React component. */\nexport interface AutocompleteItemProps {\n /**\n * The value of the item, which will be matched against the query.\n *\n * If not provided, the value is the item's text content.\n *\n * @default \"\"\n */\n value?: AutocompleteItemElementProps['value'];\n /**\n * Whether this option is disabled.\n *\n * @default false\n */\n disabled?: AutocompleteItemElementProps['disabled'];\n /** Emitted when the the item is selected. */\n onSelect?: (event: AutocompleteItemEvents['select']) => void;\n}\n\nfunction AutocompleteItemComponent(props: AutocompleteItemProps, forwardedRef: ForwardedRef<AutocompleteItemElement>) {\n registerAutocompleteItemElement();\n\n const elementRef = useRef<AutocompleteItemElement>(null);\n const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);\n\n const { disabled: p0, value: p1, onSelect: e0, ...restProps } = props;\n\n useLayoutEffect(() => {\n const element = elementRef.current as Record<string, unknown> | null;\n if (!element) return;\n Object.assign(element, { disabled: p0, value: p1 });\n handlersRef.current = [e0] as Array<((event: Event) => void) | undefined>;\n });\n\n useLayoutEffect(() => {\n const element = elementRef.current;\n if (!element) return;\n const ac = new AbortController();\n for (const [index, eventName] of ['select'].entries()) {\n element.addEventListener(\n eventName,\n (event: Event) => {\n handlersRef.current[index]?.(event);\n },\n { signal: ac.signal },\n );\n }\n return () => ac.abort();\n }, []);\n\n const mergedRef = useCallback(\n (element: AutocompleteItemElement | null) => {\n elementRef.current = element;\n if (typeof forwardedRef === 'function') {\n forwardedRef(element);\n } else if (forwardedRef) {\n forwardedRef.current = element;\n }\n },\n [forwardedRef],\n );\n\n return createElement('prosekit-autocomplete-item', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });\n}\n\n/** A React component that renders an `prosekit-autocomplete-item` custom element. */\nexport const AutocompleteItem: ForwardRefExoticComponent<AutocompleteItemProps & Omit<HTMLAttributes<AutocompleteItemElement>, 'onSelect'> & RefAttributes<AutocompleteItemElement>> = /* @__PURE__ */ forwardRef(AutocompleteItemComponent);\n","// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerAutocompletePopupElement, type AutocompletePopupElement, type AutocompletePopupEvents } from '@prosekit/web/autocomplete';\nimport { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';\n\n/** Props for the {@link AutocompletePopup} React component. */\nexport interface AutocompletePopupProps {\n /**\n * Emitted when the selected value changes. Only available when multiple is\n * false.\n */\n onValueChange?: (event: AutocompletePopupEvents['valueChange']) => void;\n /**\n * Emitted when the selected values change. Only available when multiple is\n * true.\n */\n onValuesChange?: (event: AutocompletePopupEvents['valuesChange']) => void;\n}\n\nfunction AutocompletePopupComponent(props: AutocompletePopupProps, forwardedRef: ForwardedRef<AutocompletePopupElement>) {\n registerAutocompletePopupElement();\n\n const elementRef = useRef<AutocompletePopupElement>(null);\n const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);\n\n const { onValueChange: e0, onValuesChange: e1, ...restProps } = props;\n\n useLayoutEffect(() => {\n const element = elementRef.current as Record<string, unknown> | null;\n if (!element) return;\n handlersRef.current = [e0, e1] as Array<((event: Event) => void) | undefined>;\n });\n\n useLayoutEffect(() => {\n const element = elementRef.current;\n if (!element) return;\n const ac = new AbortController();\n for (const [index, eventName] of ['valueChange', 'valuesChange'].entries()) {\n element.addEventListener(\n eventName,\n (event: Event) => {\n handlersRef.current[index]?.(event);\n },\n { signal: ac.signal },\n );\n }\n return () => ac.abort();\n }, []);\n\n const mergedRef = useCallback(\n (element: AutocompletePopupElement | null) => {\n elementRef.current = element;\n if (typeof forwardedRef === 'function') {\n forwardedRef(element);\n } else if (forwardedRef) {\n forwardedRef.current = element;\n }\n },\n [forwardedRef],\n );\n\n return createElement('prosekit-autocomplete-popup', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });\n}\n\n/** A React component that renders an `prosekit-autocomplete-popup` custom element. */\nexport const AutocompletePopup: ForwardRefExoticComponent<AutocompletePopupProps & HTMLAttributes<AutocompletePopupElement> & RefAttributes<AutocompletePopupElement>> = /* @__PURE__ */ forwardRef(AutocompletePopupComponent);\n","// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerAutocompletePositionerElement, type AutocompletePositionerElement, type AutocompletePositionerProps as AutocompletePositionerElementProps } from '@prosekit/web/autocomplete';\nimport { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';\n\n/** Props for the {@link AutocompletePositioner} React component. */\nexport interface AutocompletePositionerProps {\n /**\n * The placement of the popover, relative to the text cursor.\n *\n * @default \"bottom-start\"\n */\n placement?: AutocompletePositionerElementProps['placement'];\n /**\n * The distance between the popover and the text selection.\n *\n * @default { mainAxis: 8, crossAxis: -4 }\n */\n offset?: AutocompletePositionerElementProps['offset'];\n /**\n * Whether to hide the floating element when the reference element or the\n * floating element is fully clipped.\n *\n * @default true\n */\n hide?: AutocompletePositionerElementProps['hide'];\n /** @default true */\n inline?: AutocompletePositionerElementProps['inline'];\n /** @default true */\n hoist?: AutocompletePositionerElementProps['hoist'];\n /** @default true */\n fitViewport?: AutocompletePositionerElementProps['fitViewport'];\n /** @default \"The body element\" */\n boundary?: AutocompletePositionerElementProps['boundary'];\n /** @default 8 */\n overflowPadding?: AutocompletePositionerElementProps['overflowPadding'];\n /**\n * The strategy to use for positioning\n *\n * @default \"absolute\"\n */\n strategy?: AutocompletePositionerElementProps['strategy'];\n /**\n * Options to activate auto-update listeners\n *\n * @see https://floating-ui.com/docs/autoUpdate\n *\n * @default true\n */\n autoUpdate?: AutocompletePositionerElementProps['autoUpdate'];\n /**\n * Whether to flip the `placement` in order to keep it in view when the\n * preferred placement(s) will overflow the clipping boundary. You can also\n * provide an array of placements to try sequentially if the preferred\n * `placement` does not fit.\n *\n * @default true\n */\n flip?: AutocompletePositionerElementProps['flip'];\n /**\n * Whether the floating element should shift to keep it in view.\n *\n * @default true\n */\n shift?: AutocompletePositionerElementProps['shift'];\n /**\n * Whether the floating element can overlap the reference element to keep it\n * in view.\n *\n * @default false\n */\n overlap?: AutocompletePositionerElementProps['overlap'];\n /**\n * Whether to constrain the floating element's width so that it matches the\n * reference element.\n *\n * @default false\n */\n sameWidth?: AutocompletePositionerElementProps['sameWidth'];\n /**\n * Whether to constrain the floating element's height so that it matches the\n * reference element.\n *\n * @default false\n */\n sameHeight?: AutocompletePositionerElementProps['sameHeight'];\n /**\n * Describes the root boundary that the element will be checked for overflow relative to.\n * Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.\n *\n * @default 'viewport'\n */\n rootBoundary?: AutocompletePositionerElementProps['rootBoundary'];\n /**\n * The element that will be used to check for overflow. Please see\n * https://floating-ui.com/docs/detectoverflow#elementcontext for more\n * information.\n *\n * @default 'floating'\n */\n elementContext?: AutocompletePositionerElementProps['elementContext'];\n /**\n * Whether to check the alternate elementContext's boundary. Please see\n * https://floating-ui.com/docs/detectoverflow#altboundary for more\n * information.\n *\n * @default false\n */\n altBoundary?: AutocompletePositionerElementProps['altBoundary'];\n}\n\nfunction AutocompletePositionerComponent(props: AutocompletePositionerProps, forwardedRef: ForwardedRef<AutocompletePositionerElement>) {\n registerAutocompletePositionerElement();\n\n const elementRef = useRef<AutocompletePositionerElement>(null);\n\n const { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17, ...restProps } = props;\n\n useLayoutEffect(() => {\n const element = elementRef.current as Record<string, unknown> | null;\n if (!element) return;\n Object.assign(element, { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17 });\n });\n\n const mergedRef = useCallback(\n (element: AutocompletePositionerElement | null) => {\n elementRef.current = element;\n if (typeof forwardedRef === 'function') {\n forwardedRef(element);\n } else if (forwardedRef) {\n forwardedRef.current = element;\n }\n },\n [forwardedRef],\n );\n\n return createElement('prosekit-autocomplete-positioner', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });\n}\n\n/** A React component that renders an `prosekit-autocomplete-positioner` custom element. */\nexport const AutocompletePositioner: ForwardRefExoticComponent<AutocompletePositionerProps & HTMLAttributes<AutocompletePositionerElement> & RefAttributes<AutocompletePositionerElement>> = /* @__PURE__ */ forwardRef(AutocompletePositionerComponent);\n","// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerAutocompleteRootElement, type AutocompleteRootElement, type AutocompleteRootProps as AutocompleteRootElementProps, type AutocompleteRootEvents } from '@prosekit/web/autocomplete';\nimport { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';\n\nimport { useEditorContext } from '../../contexts/editor-context.ts';\n\n/** Props for the {@link AutocompleteRoot} React component. */\nexport interface AutocompleteRootProps {\n /**\n * The ProseKit editor instance.\n *\n * @default null\n * @hidden\n */\n editor?: AutocompleteRootElementProps['editor'];\n /**\n * The regular expression to match the query text to autocomplete.\n *\n * @default null\n */\n regex?: AutocompleteRootElementProps['regex'];\n /**\n * The filter function to determine if an item should be shown in the\n * listbox.\n *\n * @default defaultItemFilter\n */\n filter?: AutocompleteRootElementProps['filter'];\n /**\n * The reference to position the popup against. This can be a DOM element, a\n * Floating UI virtual element, or a function that returns either of them.\n * By default, the popup will be positioned against the text content that\n * triggers the autocomplete.\n *\n * @default null\n */\n anchor?: AutocompleteRootElementProps['anchor'];\n /** Fired when the open state changes. */\n onOpenChange?: (event: AutocompleteRootEvents['openChange']) => void;\n /** Fired when the query changes. */\n onQueryChange?: (event: AutocompleteRootEvents['queryChange']) => void;\n /**\n * Emitted when the selected value changes. Only available when multiple is\n * false.\n */\n onValueChange?: (event: AutocompleteRootEvents['valueChange']) => void;\n /**\n * Emitted when the selected values change. Only available when multiple is\n * true.\n */\n onValuesChange?: (event: AutocompleteRootEvents['valuesChange']) => void;\n}\n\nfunction AutocompleteRootComponent(props: AutocompleteRootProps, forwardedRef: ForwardedRef<AutocompleteRootElement>) {\n registerAutocompleteRootElement();\n\n const elementRef = useRef<AutocompleteRootElement>(null);\n const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);\n\n const p1Fallback = useEditorContext();\n\n const { anchor: p0, editor: p1, filter: p2, regex: p3, onOpenChange: e0, onQueryChange: e1, onValueChange: e2, onValuesChange: e3, ...restProps } = props;\n\n useLayoutEffect(() => {\n const element = elementRef.current as Record<string, unknown> | null;\n if (!element) return;\n Object.assign(element, { anchor: p0, editor: p1 ?? p1Fallback, filter: p2, regex: p3 });\n handlersRef.current = [e0, e1, e2, e3] as Array<((event: Event) => void) | undefined>;\n });\n\n useLayoutEffect(() => {\n const element = elementRef.current;\n if (!element) return;\n const ac = new AbortController();\n for (const [index, eventName] of ['openChange', 'queryChange', 'valueChange', 'valuesChange'].entries()) {\n element.addEventListener(\n eventName,\n (event: Event) => {\n handlersRef.current[index]?.(event);\n },\n { signal: ac.signal },\n );\n }\n return () => ac.abort();\n }, []);\n\n const mergedRef = useCallback(\n (element: AutocompleteRootElement | null) => {\n elementRef.current = element;\n if (typeof forwardedRef === 'function') {\n forwardedRef(element);\n } else if (forwardedRef) {\n forwardedRef.current = element;\n }\n },\n [forwardedRef],\n );\n\n return createElement('prosekit-autocomplete-root', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });\n}\n\n/** A React component that renders an `prosekit-autocomplete-root` custom element. */\nexport const AutocompleteRoot: ForwardRefExoticComponent<AutocompleteRootProps & HTMLAttributes<AutocompleteRootElement> & RefAttributes<AutocompleteRootElement>> = /* @__PURE__ */ forwardRef(AutocompleteRootComponent);\n","/**\n\n@module\n\n## Anatomy\n\n```jsx\nimport {\n AutocompleteEmpty,\n AutocompleteItem,\n AutocompletePopup,\n AutocompletePositioner,\n AutocompleteRoot,\n} from 'prosekit/react/autocomplete'\n\n<AutocompleteRoot>\n <AutocompletePositioner>\n <AutocompletePopup>\n <AutocompleteItem>...</AutocompleteItem>\n <AutocompleteEmpty>...</AutocompleteEmpty>\n </AutocompletePopup>\n </AutocompletePositioner>\n</AutocompleteRoot>\n```\n*/\n\n'use client'\n\nexport * from './index.gen.ts'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"autocomplete.js","names":[],"sources":["../src/components/autocomplete/autocomplete-empty.gen.ts","../src/components/autocomplete/autocomplete-item.gen.ts","../src/components/autocomplete/autocomplete-popup.gen.ts","../src/components/autocomplete/autocomplete-positioner.gen.ts","../src/components/autocomplete/autocomplete-root.gen.ts","../src/components/autocomplete/index.ts"],"sourcesContent":["// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerAutocompleteEmptyElement, type AutocompleteEmptyElement } from '@prosekit/web/autocomplete';\nimport { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes } from 'react';\n\n/** Props for the {@link AutocompleteEmpty} React component. */\nexport interface AutocompleteEmptyProps {}\n\nfunction AutocompleteEmptyComponent(props: AutocompleteEmptyProps, forwardedRef: ForwardedRef<AutocompleteEmptyElement>) {\n registerAutocompleteEmptyElement();\n\n const elementRef = useRef<AutocompleteEmptyElement>(null);\n\n const { ...restProps } = props;\n\n const mergedRef = useCallback(\n (element: AutocompleteEmptyElement | null) => {\n elementRef.current = element;\n if (typeof forwardedRef === 'function') {\n forwardedRef(element);\n } else if (forwardedRef) {\n forwardedRef.current = element;\n }\n },\n [forwardedRef],\n );\n\n return createElement('prosekit-autocomplete-empty', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });\n}\n\n/** A React component that renders an `prosekit-autocomplete-empty` custom element. */\nexport const AutocompleteEmpty: ForwardRefExoticComponent<AutocompleteEmptyProps & HTMLAttributes<AutocompleteEmptyElement> & RefAttributes<AutocompleteEmptyElement>> = /* @__PURE__ */ forwardRef(AutocompleteEmptyComponent);\n","// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerAutocompleteItemElement, type AutocompleteItemElement, type AutocompleteItemProps as AutocompleteItemElementProps, type AutocompleteItemEvents } from '@prosekit/web/autocomplete';\nimport { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';\n\n/** Props for the {@link AutocompleteItem} React component. */\nexport interface AutocompleteItemProps {\n /**\n * The value of the item, which will be matched against the query.\n *\n * If not provided, the value is the item's text content.\n *\n * @default \"\"\n */\n value?: AutocompleteItemElementProps['value'];\n /**\n * Whether this option is disabled.\n *\n * @default false\n */\n disabled?: AutocompleteItemElementProps['disabled'];\n /** Emitted when the the item is selected. */\n onSelect?: (event: AutocompleteItemEvents['select']) => void;\n}\n\nfunction AutocompleteItemComponent(props: AutocompleteItemProps, forwardedRef: ForwardedRef<AutocompleteItemElement>) {\n registerAutocompleteItemElement();\n\n const elementRef = useRef<AutocompleteItemElement>(null);\n const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);\n\n const { disabled: p0, value: p1, onSelect: e0, ...restProps } = props;\n\n useLayoutEffect(() => {\n const element = elementRef.current as Record<string, unknown> | null;\n if (!element) return;\n Object.assign(element, { disabled: p0, value: p1 });\n handlersRef.current = [e0] as Array<((event: Event) => void) | undefined>;\n });\n\n useLayoutEffect(() => {\n const element = elementRef.current;\n if (!element) return;\n const ac = new AbortController();\n for (const [index, eventName] of ['select'].entries()) {\n element.addEventListener(\n eventName,\n (event: Event) => {\n handlersRef.current[index]?.(event);\n },\n { signal: ac.signal },\n );\n }\n return () => ac.abort();\n }, []);\n\n const mergedRef = useCallback(\n (element: AutocompleteItemElement | null) => {\n elementRef.current = element;\n if (typeof forwardedRef === 'function') {\n forwardedRef(element);\n } else if (forwardedRef) {\n forwardedRef.current = element;\n }\n },\n [forwardedRef],\n );\n\n return createElement('prosekit-autocomplete-item', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });\n}\n\n/** A React component that renders an `prosekit-autocomplete-item` custom element. */\nexport const AutocompleteItem: ForwardRefExoticComponent<AutocompleteItemProps & Omit<HTMLAttributes<AutocompleteItemElement>, 'onSelect'> & RefAttributes<AutocompleteItemElement>> = /* @__PURE__ */ forwardRef(AutocompleteItemComponent);\n","// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerAutocompletePopupElement, type AutocompletePopupElement, type AutocompletePopupEvents } from '@prosekit/web/autocomplete';\nimport { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';\n\n/** Props for the {@link AutocompletePopup} React component. */\nexport interface AutocompletePopupProps {\n /**\n * Emitted when the selected value changes. Only available when multiple is\n * false.\n */\n onValueChange?: (event: AutocompletePopupEvents['valueChange']) => void;\n /**\n * Emitted when the selected values change. Only available when multiple is\n * true.\n */\n onValuesChange?: (event: AutocompletePopupEvents['valuesChange']) => void;\n}\n\nfunction AutocompletePopupComponent(props: AutocompletePopupProps, forwardedRef: ForwardedRef<AutocompletePopupElement>) {\n registerAutocompletePopupElement();\n\n const elementRef = useRef<AutocompletePopupElement>(null);\n const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);\n\n const { onValueChange: e0, onValuesChange: e1, ...restProps } = props;\n\n useLayoutEffect(() => {\n const element = elementRef.current as Record<string, unknown> | null;\n if (!element) return;\n handlersRef.current = [e0, e1] as Array<((event: Event) => void) | undefined>;\n });\n\n useLayoutEffect(() => {\n const element = elementRef.current;\n if (!element) return;\n const ac = new AbortController();\n for (const [index, eventName] of ['valueChange', 'valuesChange'].entries()) {\n element.addEventListener(\n eventName,\n (event: Event) => {\n handlersRef.current[index]?.(event);\n },\n { signal: ac.signal },\n );\n }\n return () => ac.abort();\n }, []);\n\n const mergedRef = useCallback(\n (element: AutocompletePopupElement | null) => {\n elementRef.current = element;\n if (typeof forwardedRef === 'function') {\n forwardedRef(element);\n } else if (forwardedRef) {\n forwardedRef.current = element;\n }\n },\n [forwardedRef],\n );\n\n return createElement('prosekit-autocomplete-popup', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });\n}\n\n/** A React component that renders an `prosekit-autocomplete-popup` custom element. */\nexport const AutocompletePopup: ForwardRefExoticComponent<AutocompletePopupProps & HTMLAttributes<AutocompletePopupElement> & RefAttributes<AutocompletePopupElement>> = /* @__PURE__ */ forwardRef(AutocompletePopupComponent);\n","// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerAutocompletePositionerElement, type AutocompletePositionerElement, type AutocompletePositionerProps as AutocompletePositionerElementProps } from '@prosekit/web/autocomplete';\nimport { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';\n\n/** Props for the {@link AutocompletePositioner} React component. */\nexport interface AutocompletePositionerProps {\n /**\n * The placement of the popover, relative to the text cursor.\n *\n * @default \"bottom-start\"\n */\n placement?: AutocompletePositionerElementProps['placement'];\n /**\n * The distance between the popover and the text selection.\n *\n * @default { mainAxis: 8, crossAxis: -4 }\n */\n offset?: AutocompletePositionerElementProps['offset'];\n /**\n * Whether to hide the floating element when the reference element or the\n * floating element is fully clipped.\n *\n * @default true\n */\n hide?: AutocompletePositionerElementProps['hide'];\n /** @default true */\n inline?: AutocompletePositionerElementProps['inline'];\n /** @default true */\n hoist?: AutocompletePositionerElementProps['hoist'];\n /** @default true */\n fitViewport?: AutocompletePositionerElementProps['fitViewport'];\n /** @default \"The body element\" */\n boundary?: AutocompletePositionerElementProps['boundary'];\n /** @default 8 */\n overflowPadding?: AutocompletePositionerElementProps['overflowPadding'];\n /**\n * The strategy to use for positioning\n *\n * @default \"absolute\"\n */\n strategy?: AutocompletePositionerElementProps['strategy'];\n /**\n * Options to activate auto-update listeners\n *\n * @see https://floating-ui.com/docs/autoUpdate\n *\n * @default true\n */\n autoUpdate?: AutocompletePositionerElementProps['autoUpdate'];\n /**\n * Whether to flip the `placement` in order to keep it in view when the\n * preferred placement(s) will overflow the clipping boundary. You can also\n * provide an array of placements to try sequentially if the preferred\n * `placement` does not fit.\n *\n * @default true\n */\n flip?: AutocompletePositionerElementProps['flip'];\n /**\n * Whether the floating element should shift to keep it in view.\n *\n * @default true\n */\n shift?: AutocompletePositionerElementProps['shift'];\n /**\n * Whether the floating element can overlap the reference element to keep it\n * in view.\n *\n * @default false\n */\n overlap?: AutocompletePositionerElementProps['overlap'];\n /**\n * Whether to constrain the floating element's width so that it matches the\n * reference element.\n *\n * @default false\n */\n sameWidth?: AutocompletePositionerElementProps['sameWidth'];\n /**\n * Whether to constrain the floating element's height so that it matches the\n * reference element.\n *\n * @default false\n */\n sameHeight?: AutocompletePositionerElementProps['sameHeight'];\n /**\n * Describes the root boundary that the element will be checked for overflow relative to.\n * Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.\n *\n * @default 'viewport'\n */\n rootBoundary?: AutocompletePositionerElementProps['rootBoundary'];\n /**\n * The element that will be used to check for overflow. Please see\n * https://floating-ui.com/docs/detectoverflow#elementcontext for more\n * information.\n *\n * @default 'floating'\n */\n elementContext?: AutocompletePositionerElementProps['elementContext'];\n /**\n * Whether to check the alternate elementContext's boundary. Please see\n * https://floating-ui.com/docs/detectoverflow#altboundary for more\n * information.\n *\n * @default false\n */\n altBoundary?: AutocompletePositionerElementProps['altBoundary'];\n}\n\nfunction AutocompletePositionerComponent(props: AutocompletePositionerProps, forwardedRef: ForwardedRef<AutocompletePositionerElement>) {\n registerAutocompletePositionerElement();\n\n const elementRef = useRef<AutocompletePositionerElement>(null);\n\n const { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17, ...restProps } = props;\n\n useLayoutEffect(() => {\n const element = elementRef.current as Record<string, unknown> | null;\n if (!element) return;\n Object.assign(element, { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17 });\n });\n\n const mergedRef = useCallback(\n (element: AutocompletePositionerElement | null) => {\n elementRef.current = element;\n if (typeof forwardedRef === 'function') {\n forwardedRef(element);\n } else if (forwardedRef) {\n forwardedRef.current = element;\n }\n },\n [forwardedRef],\n );\n\n return createElement('prosekit-autocomplete-positioner', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });\n}\n\n/** A React component that renders an `prosekit-autocomplete-positioner` custom element. */\nexport const AutocompletePositioner: ForwardRefExoticComponent<AutocompletePositionerProps & HTMLAttributes<AutocompletePositionerElement> & RefAttributes<AutocompletePositionerElement>> = /* @__PURE__ */ forwardRef(AutocompletePositionerComponent);\n","// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerAutocompleteRootElement, type AutocompleteRootElement, type AutocompleteRootProps as AutocompleteRootElementProps, type AutocompleteRootEvents } from '@prosekit/web/autocomplete';\nimport { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';\n\nimport { useEditorContext } from '../../contexts/editor-context.ts';\n\n/** Props for the {@link AutocompleteRoot} React component. */\nexport interface AutocompleteRootProps {\n /**\n * The ProseKit editor instance.\n *\n * @default null\n * @hidden\n */\n editor?: AutocompleteRootElementProps['editor'];\n /**\n * The regular expression to match the query text to autocomplete.\n *\n * @default null\n */\n regex?: AutocompleteRootElementProps['regex'];\n /**\n * The filter function to determine if an item should be shown in the\n * listbox.\n *\n * @default defaultItemFilter\n */\n filter?: AutocompleteRootElementProps['filter'];\n /**\n * Builds the query string from the regex match found before the cursor. The\n * query is exposed via the `queryChange` event and used by the built-in item\n * filter. The default builder lowercases the match and strips punctuation.\n * Provide a custom builder to control the query, for example to preserve the\n * casing and punctuation the user typed.\n *\n * @default defaultQueryBuilder\n */\n queryBuilder?: AutocompleteRootElementProps['queryBuilder'];\n /**\n * The reference to position the popup against. This can be a DOM element, a\n * Floating UI virtual element, or a function that returns either of them.\n * By default, the popup will be positioned against the text content that\n * triggers the autocomplete.\n *\n * @default null\n */\n anchor?: AutocompleteRootElementProps['anchor'];\n /** Fired when the open state changes. */\n onOpenChange?: (event: AutocompleteRootEvents['openChange']) => void;\n /** Fired when the query changes. */\n onQueryChange?: (event: AutocompleteRootEvents['queryChange']) => void;\n /**\n * Emitted when the selected value changes. Only available when multiple is\n * false.\n */\n onValueChange?: (event: AutocompleteRootEvents['valueChange']) => void;\n /**\n * Emitted when the selected values change. Only available when multiple is\n * true.\n */\n onValuesChange?: (event: AutocompleteRootEvents['valuesChange']) => void;\n}\n\nfunction AutocompleteRootComponent(props: AutocompleteRootProps, forwardedRef: ForwardedRef<AutocompleteRootElement>) {\n registerAutocompleteRootElement();\n\n const elementRef = useRef<AutocompleteRootElement>(null);\n const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);\n\n const p1Fallback = useEditorContext();\n\n const { anchor: p0, editor: p1, filter: p2, queryBuilder: p3, regex: p4, onOpenChange: e0, onQueryChange: e1, onValueChange: e2, onValuesChange: e3, ...restProps } = props;\n\n useLayoutEffect(() => {\n const element = elementRef.current as Record<string, unknown> | null;\n if (!element) return;\n Object.assign(element, { anchor: p0, editor: p1 ?? p1Fallback, filter: p2, queryBuilder: p3, regex: p4 });\n handlersRef.current = [e0, e1, e2, e3] as Array<((event: Event) => void) | undefined>;\n });\n\n useLayoutEffect(() => {\n const element = elementRef.current;\n if (!element) return;\n const ac = new AbortController();\n for (const [index, eventName] of ['openChange', 'queryChange', 'valueChange', 'valuesChange'].entries()) {\n element.addEventListener(\n eventName,\n (event: Event) => {\n handlersRef.current[index]?.(event);\n },\n { signal: ac.signal },\n );\n }\n return () => ac.abort();\n }, []);\n\n const mergedRef = useCallback(\n (element: AutocompleteRootElement | null) => {\n elementRef.current = element;\n if (typeof forwardedRef === 'function') {\n forwardedRef(element);\n } else if (forwardedRef) {\n forwardedRef.current = element;\n }\n },\n [forwardedRef],\n );\n\n return createElement('prosekit-autocomplete-root', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });\n}\n\n/** A React component that renders an `prosekit-autocomplete-root` custom element. */\nexport const AutocompleteRoot: ForwardRefExoticComponent<AutocompleteRootProps & HTMLAttributes<AutocompleteRootElement> & RefAttributes<AutocompleteRootElement>> = /* @__PURE__ */ forwardRef(AutocompleteRootComponent);\n","/**\n\n@module\n\n## Anatomy\n\n```jsx\nimport {\n AutocompleteEmpty,\n AutocompleteItem,\n AutocompletePopup,\n AutocompletePositioner,\n AutocompleteRoot,\n} from 'prosekit/react/autocomplete'\n\n<AutocompleteRoot>\n <AutocompletePositioner>\n <AutocompletePopup>\n <AutocompleteItem>...</AutocompleteItem>\n <AutocompleteEmpty>...</AutocompleteEmpty>\n </AutocompletePopup>\n </AutocompletePositioner>\n</AutocompleteRoot>\n```\n*/\n\n'use client'\n\nexport * from './index.gen.ts'\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prosekit/react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.8.0-beta.
|
|
4
|
+
"version": "0.8.0-beta.15",
|
|
5
5
|
"private": false,
|
|
6
6
|
"description": "React components and utilities for ProseKit",
|
|
7
7
|
"author": {
|
|
@@ -74,9 +74,9 @@
|
|
|
74
74
|
"dependencies": {
|
|
75
75
|
"@prosemirror-adapter/core": "^0.5.3",
|
|
76
76
|
"@prosemirror-adapter/react": "^0.5.3",
|
|
77
|
-
"@prosekit/
|
|
78
|
-
"@prosekit/web": "^0.9.0-beta.
|
|
79
|
-
"@prosekit/
|
|
77
|
+
"@prosekit/core": "^0.13.0-beta.4",
|
|
78
|
+
"@prosekit/web": "^0.9.0-beta.15",
|
|
79
|
+
"@prosekit/pm": "^0.1.19-beta.1"
|
|
80
80
|
},
|
|
81
81
|
"peerDependencies": {
|
|
82
82
|
"react": ">= 18.2.0",
|
|
@@ -101,8 +101,8 @@
|
|
|
101
101
|
"vitest-browser-react": "^2.2.0",
|
|
102
102
|
"@prosekit/config-ts": "0.0.0",
|
|
103
103
|
"@prosekit/config-tsdown": "0.0.0",
|
|
104
|
-
"@prosekit/
|
|
105
|
-
"@prosekit/
|
|
104
|
+
"@prosekit/testing": "0.0.0",
|
|
105
|
+
"@prosekit/config-vitest": "0.0.0"
|
|
106
106
|
},
|
|
107
107
|
"scripts": {
|
|
108
108
|
"build:tsc": "tsc -b tsconfig.json",
|
|
@@ -27,6 +27,16 @@ export interface AutocompleteRootProps {
|
|
|
27
27
|
* @default defaultItemFilter
|
|
28
28
|
*/
|
|
29
29
|
filter?: AutocompleteRootElementProps['filter'];
|
|
30
|
+
/**
|
|
31
|
+
* Builds the query string from the regex match found before the cursor. The
|
|
32
|
+
* query is exposed via the `queryChange` event and used by the built-in item
|
|
33
|
+
* filter. The default builder lowercases the match and strips punctuation.
|
|
34
|
+
* Provide a custom builder to control the query, for example to preserve the
|
|
35
|
+
* casing and punctuation the user typed.
|
|
36
|
+
*
|
|
37
|
+
* @default defaultQueryBuilder
|
|
38
|
+
*/
|
|
39
|
+
queryBuilder?: AutocompleteRootElementProps['queryBuilder'];
|
|
30
40
|
/**
|
|
31
41
|
* The reference to position the popup against. This can be a DOM element, a
|
|
32
42
|
* Floating UI virtual element, or a function that returns either of them.
|
|
@@ -60,12 +70,12 @@ function AutocompleteRootComponent(props: AutocompleteRootProps, forwardedRef: F
|
|
|
60
70
|
|
|
61
71
|
const p1Fallback = useEditorContext();
|
|
62
72
|
|
|
63
|
-
const { anchor: p0, editor: p1, filter: p2,
|
|
73
|
+
const { anchor: p0, editor: p1, filter: p2, queryBuilder: p3, regex: p4, onOpenChange: e0, onQueryChange: e1, onValueChange: e2, onValuesChange: e3, ...restProps } = props;
|
|
64
74
|
|
|
65
75
|
useLayoutEffect(() => {
|
|
66
76
|
const element = elementRef.current as Record<string, unknown> | null;
|
|
67
77
|
if (!element) return;
|
|
68
|
-
Object.assign(element, { anchor: p0, editor: p1 ?? p1Fallback, filter: p2,
|
|
78
|
+
Object.assign(element, { anchor: p0, editor: p1 ?? p1Fallback, filter: p2, queryBuilder: p3, regex: p4 });
|
|
69
79
|
handlersRef.current = [e0, e1, e2, e3] as Array<((event: Event) => void) | undefined>;
|
|
70
80
|
});
|
|
71
81
|
|