@fluentui-copilot/react-prompt-listbox 0.0.3 → 0.1.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/CHANGELOG.json +95 -1
- package/CHANGELOG.md +22 -2
- package/dist/index.d.ts +1 -61
- package/lib/components/PromptListbox/usePromptListboxStyles.styles.js +9 -6
- package/lib/components/PromptListbox/usePromptListboxStyles.styles.js.map +1 -1
- package/lib/components/PromptOption/usePromptOption.js +0 -5
- package/lib/components/PromptOption/usePromptOption.js.map +1 -1
- package/lib/components/PromptOption/usePromptOptionStyles.styles.js +22 -13
- package/lib/components/PromptOption/usePromptOptionStyles.styles.js.map +1 -1
- package/lib/components/utils/dropdownKeyActions.js +5 -5
- package/lib/components/utils/dropdownKeyActions.js.map +1 -1
- package/lib/components/utils/useComboboxPositioning.js +1 -0
- package/lib/components/utils/useComboboxPositioning.js.map +1 -1
- package/lib/components/utils/usePromptListboxFunctionality.js +10 -8
- package/lib/components/utils/usePromptListboxFunctionality.js.map +1 -1
- package/lib/components/utils/useTriggerKeyDown.js +2 -2
- package/lib/components/utils/useTriggerKeyDown.js.map +1 -1
- package/lib/index.js +0 -1
- package/lib/index.js.map +1 -1
- package/lib/plugins/CursorPositionPlugin.js +42 -0
- package/lib/plugins/CursorPositionPlugin.js.map +1 -0
- package/lib-commonjs/components/PromptListbox/usePromptListboxStyles.styles.js +11 -20
- package/lib-commonjs/components/PromptListbox/usePromptListboxStyles.styles.js.map +1 -1
- package/lib-commonjs/components/PromptOption/usePromptOption.js +0 -3
- package/lib-commonjs/components/PromptOption/usePromptOption.js.map +1 -1
- package/lib-commonjs/components/PromptOption/usePromptOptionStyles.styles.js +33 -54
- package/lib-commonjs/components/PromptOption/usePromptOptionStyles.styles.js.map +1 -1
- package/lib-commonjs/components/utils/dropdownKeyActions.js +5 -5
- package/lib-commonjs/components/utils/dropdownKeyActions.js.map +1 -1
- package/lib-commonjs/components/utils/useComboboxPositioning.js +1 -0
- package/lib-commonjs/components/utils/useComboboxPositioning.js.map +1 -1
- package/lib-commonjs/components/utils/usePromptListboxFunctionality.js +9 -7
- package/lib-commonjs/components/utils/usePromptListboxFunctionality.js.map +1 -1
- package/lib-commonjs/components/utils/useTriggerKeyDown.js +2 -2
- package/lib-commonjs/components/utils/useTriggerKeyDown.js.map +1 -1
- package/lib-commonjs/index.js +0 -4
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/plugins/CursorPositionPlugin.js +53 -0
- package/lib-commonjs/plugins/CursorPositionPlugin.js.map +1 -0
- package/package.json +16 -17
- package/lib/plugins/TextCursorPositionPlugin.js +0 -44
- package/lib/plugins/TextCursorPositionPlugin.js.map +0 -1
- package/lib-commonjs/plugins/TextCursorPositionPlugin.js +0 -52
- package/lib-commonjs/plugins/TextCursorPositionPlugin.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptListboxFunctionality.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { mergeCallbacks, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from './dropdownKeyActions';\nimport {
|
|
1
|
+
{"version":3,"sources":["usePromptListboxFunctionality.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { mergeCallbacks, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from './dropdownKeyActions';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { useComboboxPositioning } from './useComboboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type {\n UsePromptListboxFunctionalityParams,\n UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\nexport function usePromptListboxFunctionality(\n params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n const { positioning, onOpenChange, onSelectionModeChange, listboxProps, fluid = false } = params;\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller: activeDescendantController,\n } = useActiveDescendant<HTMLSpanElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(promptOptionClassNames.root),\n });\n // useMergedRefs to normalize the ref into a React.RefObject type\n const triggerRef = useMergedRefs(activeParentRef);\n const selectionState = useSelection(listboxProps ?? {});\n const { selectOption } = selectionState;\n const optionCollection = useOptionCollection();\n const { getOptionById } = optionCollection;\n const [cursorPosition, setCursorPosition] = React.useState<CursorPosition>('end');\n const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n const [open, setOpen] = useControllableState({\n state: params.open,\n defaultState: params.defaultOpen,\n initialState: false,\n });\n\n const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n setOpen(false);\n onOpenChange?.(event, { event, type: 'focus', open: false });\n activeDescendantController.blur();\n setHideActiveDescendant(true);\n };\n\n const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n if (event.target === event.currentTarget) {\n setOpen(true);\n onOpenChange?.(event, { event, type: 'focus', open: true });\n }\n };\n\n const cursorPositionPlugin = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n\n const onListboxBlur = React.useCallback(() => {\n setIsInSelectionMode(false);\n onSelectionModeChange?.(false);\n }, [onSelectionModeChange]);\n\n // handle combobox keyboard interaction\n const onKeyDown = useTriggerKeydown({\n ...optionCollection,\n activeDescendantController,\n getOptionById,\n onBlur: onListboxBlur,\n selectOption,\n cursorPosition,\n open,\n multiselect: false,\n });\n\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n /**\n * Freeform combobox should not select\n */\n const onInputTriggerKeyDown: EditorInputProps['onKeyDown'] = useEventCallback(event => {\n // update typing state to true if the user is typing\n const action = getDropdownActionFromKey(event, { open, multiselect: false, cursorPosition });\n if (event.key === ArrowLeft || event.key === ArrowRight || action === 'Type') {\n activeDescendantController.blur();\n setHideActiveDescendant(true);\n setIsInSelectionMode(false);\n onSelectionModeChange?.(false);\n } else if (\n action === 'Next' ||\n action === 'Previous' ||\n action === 'First' ||\n action === 'Last' ||\n action === 'PageUp' ||\n action === 'PageDown'\n ) {\n setHideActiveDescendant(false);\n setIsInSelectionMode(true);\n onSelectionModeChange?.(true);\n }\n });\n\n React.useEffect(() => {\n if (hideActiveDescendant) {\n triggerRef.current?.removeAttribute('aria-activedescendant');\n }\n // We only want to run this when the hideActiveDescendant changes, if the triggerRef\n // is undefined, there's no need to remove theAttribute and we shouldn't be adding\n // refs as dependencies since it can blow up the number of runs.\n // eslint-disable-next-line react-compiler/react-compiler\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hideActiveDescendant]);\n\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning({ positioning, fluid });\n\n const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n const listbox = React.useMemo(() => {\n return (\n <PromptListbox\n open={open}\n {...listboxProps}\n {...optionCollection}\n {...selectionState}\n ref={listboxMergedRef}\n activeDescendantController={activeDescendantController}\n />\n );\n }, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);\n\n return {\n promptListbox: listbox,\n triggerProps: {\n ref: triggerRef,\n onBlur,\n onFocus,\n onKeyDown: useEventCallback(mergeCallbacks(onKeyDown, onInputTriggerKeyDown)),\n isInSelectionMode,\n },\n containerRef: comboboxTargetRef,\n cursorPositionPlugin,\n };\n}\n"],"names":["usePromptListboxFunctionality","params","positioning","listboxRef","matchOption","onSelectionModeChange","listboxProps","fluid","triggerRef","optionCollection","useOptionCollection","activeParentRef","getOptionById","controller","cursorPosition","setCursorPosition","useActiveDescendant","isInSelectionMode","setOpen","classList","useControllableState","root","initialState","selectionState","useSelection","event","open","activeDescendantController","React","useState","setHideActiveDescendant","state","onFocus","target","defaultOpen","currentTarget","onOpenChange","setIsInSelectionMode","type","onKeyDown","onBlur","onListboxBlur","selectOption","useTriggerKeydown","hideActiveDescendant","onInputTriggerKeyDown","multiselect","action","useEffect","comboboxPopupRef","_triggerRef_current","current","removeAttribute","PromptListbox","listboxMergedRef","ref","listbox","cursorPositionPlugin"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -18,7 +18,7 @@ const _reacttabster = require("@fluentui/react-tabster");
|
|
|
18
18
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
19
19
|
const _dropdownKeyActions = require("./dropdownKeyActions");
|
|
20
20
|
function useTriggerKeydown(options) {
|
|
21
|
-
const { activeDescendantController, getOptionById, selectOption, multiselect, open,
|
|
21
|
+
const { activeDescendantController, getOptionById, selectOption, multiselect, open, cursorPosition, onBlur } = options;
|
|
22
22
|
const getActiveOption = _react.useCallback(()=>{
|
|
23
23
|
const activeOptionId = activeDescendantController.active();
|
|
24
24
|
return activeOptionId ? getOptionById(activeOptionId) : undefined;
|
|
@@ -65,7 +65,7 @@ function useTriggerKeydown(options) {
|
|
|
65
65
|
const action = (0, _dropdownKeyActions.getDropdownActionFromKey)(e, {
|
|
66
66
|
open,
|
|
67
67
|
multiselect,
|
|
68
|
-
|
|
68
|
+
cursorPosition
|
|
69
69
|
});
|
|
70
70
|
const activeOption = getActiveOption();
|
|
71
71
|
const firstOption = activeDescendantController.first({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTriggerKeyDown.ts"],"sourcesContent":["/**\n * Note, this is mainly brought from Fluent UI, only removed the closing and\n * opening logic since that's not needed for this use case and added the bluring\n * functionality.\n */\n\nimport * as React from 'react';\nimport { useSetKeyboardNavigation } from '@fluentui/react-tabster';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from './dropdownKeyActions';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\nimport type { SelectionProps, SelectionState } from './Selection.types';\n\nexport function useTriggerKeydown(\n options: {\n activeDescendantController: ActiveDescendantImperativeRef;\n
|
|
1
|
+
{"version":3,"sources":["useTriggerKeyDown.ts"],"sourcesContent":["/**\n * Note, this is mainly brought from Fluent UI, only removed the closing and\n * opening logic since that's not needed for this use case and added the bluring\n * functionality.\n */\n\nimport * as React from 'react';\nimport { useSetKeyboardNavigation } from '@fluentui/react-tabster';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from './dropdownKeyActions';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\nimport type { SelectionProps, SelectionState } from './Selection.types';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\n\nexport function useTriggerKeydown(\n options: {\n activeDescendantController: ActiveDescendantImperativeRef;\n cursorPosition: CursorPosition;\n open: boolean;\n onBlur: () => void;\n } & OptionCollectionState &\n Pick<SelectionProps, 'multiselect'> &\n Pick<SelectionState, 'selectOption'>,\n) {\n const { activeDescendantController, getOptionById, selectOption, multiselect, open, cursorPosition, onBlur } =\n options;\n\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n const first = () => {\n activeDescendantController.first();\n };\n\n const last = () => {\n activeDescendantController.last();\n };\n\n const blur = () => {\n activeDescendantController.blur();\n onBlur();\n };\n\n const next = (activeOption: OptionValue | undefined) => {\n if (activeOption) {\n activeDescendantController.next();\n } else {\n activeDescendantController.first();\n }\n };\n\n const previous = (activeOption: OptionValue | undefined) => {\n if (activeOption) {\n activeDescendantController.prev();\n } else {\n activeDescendantController.first();\n }\n };\n\n const pageUp = () => {\n for (let i = 0; i < 10; i++) {\n activeDescendantController.prev();\n }\n };\n\n const pageDown = () => {\n for (let i = 0; i < 10; i++) {\n activeDescendantController.next();\n }\n };\n\n const setKeyboardNavigation = useSetKeyboardNavigation();\n return useEventCallback((e: React.KeyboardEvent<HTMLSpanElement>) => {\n const action = getDropdownActionFromKey(e, { open, multiselect, cursorPosition });\n const activeOption = getActiveOption();\n const firstOption = activeDescendantController.first({ passive: true });\n\n switch (action) {\n case 'Last':\n case 'First':\n case 'PageDown':\n case 'PageUp':\n case 'CloseSelect':\n case 'Select':\n e.preventDefault();\n break;\n case 'Previous':\n // when active option is the first option and the action was \"Previous\",\n // this means we were in the first option and we are \"leaving\" the listbox\n if (activeOption?.id === firstOption) {\n blur();\n e.preventDefault();\n } else if (activeOption) {\n e.preventDefault();\n }\n break;\n case 'Next':\n e.preventDefault();\n break;\n }\n\n setKeyboardNavigation(true);\n\n switch (action) {\n case 'First':\n first();\n break;\n case 'Last':\n last();\n break;\n case 'Next':\n next(activeOption);\n break;\n case 'Previous':\n if (activeOption && activeOption.id !== firstOption) {\n previous(activeOption);\n } else {\n blur();\n }\n break;\n case 'PageDown':\n pageDown();\n break;\n case 'PageUp':\n pageUp();\n break;\n case 'CloseSelect':\n if (!multiselect && !activeOption?.disabled) {\n blur();\n }\n // fallthrough\n case 'Select':\n activeOption && selectOption(e, activeOption);\n break;\n case 'Tab':\n !multiselect && activeOption && selectOption(e, activeOption);\n break;\n }\n });\n}\n"],"names":["useTriggerKeydown","React","options","activeDescendantController","activeOptionId","multiselect","getOptionById","active","last","undefined","first","onBlur","blur","activeOption","next","previous","prev","pageUp","pageDown","i","setKeyboardNavigation","useEventCallback","e","getDropdownActionFromKey","cursorPosition","action","getActiveOption","id","firstOption","preventDefault","selectOption"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;CAIC;;;;+BAWeA;;;eAAAA;;;;iEATJC;8BAC6B;gCACR;oCACQ;AAMlC,SAASD,kBACdE,OAOsC;UAEtC,EAGAC,0BAAwBF,eAChBG,cACCA,EACTC,WAAG,MAACF,gBAA4BG,QAAc,KAE9CJ;UACEC,kBAAAA,OAAAA,WAAgC,CAAA;QAClC,MAAAC,iBAAAD,2BAAAI,MAAA;QAEA,OAAMC,iBAAOF,cAAAF,kBAAAK;;;QACXN;KAA+B;UACjCO,QAAA;QAEAP,2BAAaO,KAAA;;UAEXC,OAAAA;QACFR,2BAAAK,IAAA;;UAGEI,OAAIC;mCACFV,IAAAA;;;UAGFW,OAAAD,CAAAA;QACF,IAAAA,cAAA;YAEAV,2BAAkBU,IAAAA;eAChB;uCACEV,KAAAA;;;UAGFY,WAAAF,CAAAA;QACF,IAAAA,cAAA;YAEAV,2BAAea,IAAA;eACb;uCACEb,KAAAA;;;UAIJc,SAAMC;YACJ,IAAKC,IAAIA,GAAIA,IAAGA,IAAIA,IAAIA;uCACtBhB,IAAAA;;;UAIJe,WAAME;QACN,IAAA,IAAOC,IAAAA,GAAAA,IAAAA,IAAiBF,IAACG;uCACRC,IAAAA;;;kCAAiDC,IAAAA,sCAAAA;WAAeH,IAAAA,gCAAA,EAAAC,CAAAA;cAC/EG,SAAMZ,IAAAA,4CAAea,EAAAA,GAAAA;;;;;6BAIdA;4BACAvB,2BAAAO,KAAA,CAAA;qBACL;;eAEAe;;;;;;;gCAOMZ;;;wFAGqB;0FACP;sCAClB,QAAAA,iBAAA,KAAA,IAAA,KAAA,IAAAA,aAAAc,EAAA,MAAAC,aAAA;;sBAEFC,cAAK;2BACDA,cAAc;oCAChB;gBACJ;gBAEAT;iBAEA;gCACO;;;8BAGA;;;;;;;;;;;;oCAYHP,aAAAc,EAAA,KAAAC,aAAA;6BACGf;;;;;;;;;;;;oCAYHA,CAAAA,CAAAA,iBAA6BS,QAAGT,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAAA,QAAAA,GAAAA;;;0BAG/BR;;gBAELQ,gBAAAiB,aAAAR,GAAAT;gBACF;YACF,KAAA"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -15,9 +15,6 @@ _export(exports, {
|
|
|
15
15
|
PromptOption: function() {
|
|
16
16
|
return _PromptOption.PromptOption;
|
|
17
17
|
},
|
|
18
|
-
TextCursorPositionPlugin: function() {
|
|
19
|
-
return _TextCursorPositionPlugin.TextCursorPositionPlugin;
|
|
20
|
-
},
|
|
21
18
|
promptListboxClassNames: function() {
|
|
22
19
|
return _PromptListbox.promptListboxClassNames;
|
|
23
20
|
},
|
|
@@ -48,6 +45,5 @@ _export(exports, {
|
|
|
48
45
|
});
|
|
49
46
|
const _PromptListbox = require("./PromptListbox");
|
|
50
47
|
const _usePromptListboxFunctionality = require("./components/utils/usePromptListboxFunctionality");
|
|
51
|
-
const _TextCursorPositionPlugin = require("./plugins/TextCursorPositionPlugin");
|
|
52
48
|
const _PromptOption = require("./PromptOption");
|
|
53
49
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptListboxProps, PromptListboxSlots, PromptListboxState } from './PromptListbox';\nexport {\n PromptListbox,\n promptListboxClassNames,\n renderPromptListbox_unstable,\n usePromptListboxStyles_unstable,\n usePromptListbox_unstable,\n} from './PromptListbox';\n\nexport { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionality';\nexport type {\n OnOpenChangeData,\n ProcessedPromptListboxProps,\n UsePromptListboxFunctionality,\n UsePromptListboxFunctionalityParams,\n} from './components/utils/PromptListboxFunctionality.types';\n\nexport type {
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptListboxProps, PromptListboxSlots, PromptListboxState } from './PromptListbox';\nexport {\n PromptListbox,\n promptListboxClassNames,\n renderPromptListbox_unstable,\n usePromptListboxStyles_unstable,\n usePromptListbox_unstable,\n} from './PromptListbox';\n\nexport { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionality';\nexport type {\n OnOpenChangeData,\n ProcessedPromptListboxProps,\n UsePromptListboxFunctionality,\n UsePromptListboxFunctionalityParams,\n} from './components/utils/PromptListboxFunctionality.types';\n\nexport type { PromptOptionProps, PromptOptionSlots, PromptOptionState } from './PromptOption';\nexport {\n PromptOption,\n promptOptionClassNames,\n renderPromptOption_unstable,\n usePromptOptionStyles_unstable,\n usePromptOption_unstable,\n} from './PromptOption';\n"],"names":["PromptListbox","PromptOption","promptListboxClassNames","promptOptionClassNames","renderPromptListbox_unstable","renderPromptOption_unstable","usePromptListboxFunctionality","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,aAAa;eAAbA,4BAAa;;IAiBbC,YAAY;eAAZA,0BAAY;;IAhBZC,uBAAuB;eAAvBA,sCAAuB;;IAiBvBC,sBAAsB;eAAtBA,oCAAsB;;IAhBtBC,4BAA4B;eAA5BA,2CAA4B;;IAiB5BC,2BAA2B;eAA3BA,yCAA2B;;IAZpBC,6BAA6B;eAA7BA,4DAA6B;;IAJpCC,+BAA+B;eAA/BA,8CAA+B;;IAC/BC,yBAAyB;eAAzBA,wCAAyB;;IAgBzBC,8BAA8B;eAA9BA,4CAA8B;;IAC9BC,wBAAwB;eAAxBA,sCAAwB;;;+BAhBnB;+CAEuC;8BAevC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "CursorPositionPlugin", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return CursorPositionPlugin;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _chatinputplugins = require("@fluentui-copilot/chat-input-plugins");
|
|
13
|
+
const _reacttexteditor = require("@fluentui-copilot/react-text-editor");
|
|
14
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
15
|
+
const CursorPositionPlugin = ({ setCursorPosition })=>{
|
|
16
|
+
const [editor] = (0, _reacttexteditor.useLexicalComposerContext)();
|
|
17
|
+
_react.useEffect(()=>{
|
|
18
|
+
const $selectionChangeHandler = ()=>{
|
|
19
|
+
const selection = (0, _reacttexteditor.$getSelection)();
|
|
20
|
+
// If selection is null, the cursor is not active in the editor and we should just noop
|
|
21
|
+
if (selection === null || !(0, _reacttexteditor.$isRangeSelection)(selection) || !selection.isCollapsed()) {
|
|
22
|
+
setCursorPosition('between-text');
|
|
23
|
+
return false;
|
|
24
|
+
}
|
|
25
|
+
// Should only be one node in the selection because the selection is collapsed
|
|
26
|
+
const selectedNode = selection.getNodes().at(0);
|
|
27
|
+
// If there's no selected node, focus isn't in the editor
|
|
28
|
+
if (!selectedNode) {
|
|
29
|
+
return false;
|
|
30
|
+
}
|
|
31
|
+
// If there are no leaf nodes, the paragraph node will be selected
|
|
32
|
+
if ((0, _reacttexteditor.$isElementNode)(selectedNode)) {
|
|
33
|
+
setCursorPosition('end');
|
|
34
|
+
return false;
|
|
35
|
+
}
|
|
36
|
+
// if the selection node is a sentinel and it matches the sentinel at the end
|
|
37
|
+
if ((0, _chatinputplugins.$isSentinelNode)(selectedNode) && !selectedNode.getNextSibling()) {
|
|
38
|
+
setCursorPosition('end');
|
|
39
|
+
return false;
|
|
40
|
+
} else if ((0, _chatinputplugins.$isSentinelNode)(selectedNode.getNextSibling()) && selection.focus.offset === selectedNode.getTextContentSize()) {
|
|
41
|
+
setCursorPosition('end');
|
|
42
|
+
return false;
|
|
43
|
+
}
|
|
44
|
+
setCursorPosition('between-text');
|
|
45
|
+
return false;
|
|
46
|
+
};
|
|
47
|
+
return editor.registerCommand(_reacttexteditor.SELECTION_CHANGE_COMMAND, $selectionChangeHandler, _reacttexteditor.COMMAND_PRIORITY_HIGH);
|
|
48
|
+
}, [
|
|
49
|
+
editor,
|
|
50
|
+
setCursorPosition
|
|
51
|
+
]);
|
|
52
|
+
return null;
|
|
53
|
+
}; //# sourceMappingURL=CursorPositionPlugin.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["CursorPositionPlugin.ts"],"sourcesContent":["import { $isSentinelNode } from '@fluentui-copilot/chat-input-plugins';\nimport {\n SELECTION_CHANGE_COMMAND,\n $getSelection,\n useLexicalComposerContext,\n $isRangeSelection,\n $isElementNode,\n COMMAND_PRIORITY_HIGH,\n} from '@fluentui-copilot/react-text-editor';\nimport * as React from 'react';\n\n/**\n * Position the cursor is in based on it's content. The goal\n * is to track whether the cursor is at the end of the input\n * or between text.\n */\nexport type CursorPosition = 'end' | 'between-text';\n\nexport type CursorPositionPluginProps = {\n setCursorPosition: (position: CursorPosition) => void;\n};\n\nexport const CursorPositionPlugin: React.FunctionComponent<CursorPositionPluginProps> = ({ setCursorPosition }) => {\n const [editor] = useLexicalComposerContext();\n\n React.useEffect(() => {\n const $selectionChangeHandler = () => {\n const selection = $getSelection();\n // If selection is null, the cursor is not active in the editor and we should just noop\n if (selection === null || !$isRangeSelection(selection) || !selection.isCollapsed()) {\n setCursorPosition('between-text');\n return false;\n }\n\n // Should only be one node in the selection because the selection is collapsed\n const selectedNode = selection.getNodes().at(0);\n // If there's no selected node, focus isn't in the editor\n if (!selectedNode) {\n return false;\n }\n\n // If there are no leaf nodes, the paragraph node will be selected\n if ($isElementNode(selectedNode)) {\n setCursorPosition('end');\n return false;\n }\n\n // if the selection node is a sentinel and it matches the sentinel at the end\n if ($isSentinelNode(selectedNode) && !selectedNode.getNextSibling()) {\n setCursorPosition('end');\n return false;\n }\n\n // else if the selection node is not a sentinel, check that the next sibling node is a sentinel\n // and check if the focus offset is in the last position of the node.\n else if (\n $isSentinelNode(selectedNode.getNextSibling()) &&\n selection.focus.offset === selectedNode.getTextContentSize()\n ) {\n setCursorPosition('end');\n return false;\n }\n\n setCursorPosition('between-text');\n return false;\n };\n\n return editor.registerCommand(SELECTION_CHANGE_COMMAND, $selectionChangeHandler, COMMAND_PRIORITY_HIGH);\n }, [editor, setCursorPosition]);\n\n return null;\n};\n"],"names":["CursorPositionPlugin","editor","$selectionChangeHandler","selection","$isRangeSelection","isCollapsed","selectedNode","getNodes","at","getNextSibling","$isSentinelNode","focus","offset","getTextContentSize","setCursorPosition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAsBaA;;;eAAAA;;;;kCAtBmB;iCAQzB;iEACgB;AAahB,MAAMA,uBAA2E,CAAC,mBACzE;UAGZ,CAAAC,OAAMC,GAAAA,IAAAA,0CAA0B;oBAC9B,CAAMC;wCACN;kBACAA,YAAIA,IAAAA,8BAAc;mGACE;8BACX,QAAA,CAAAC,IAAAA,kCAAA,EAAAD,cAAA,CAAAA,UAAAE,WAAA,IAAA;kCACT;uBAEA;;0FAEyD;kBACzDC,eAAKA,UAAcC,QAAA,GAAAC,EAAA,CAAA;qEACV;+BACT;uBAEA;;8EAEoB;mDACX,EAAAF,eAAA;kCACT;uBAEA;;yFAEoB;qDACX,EAAAA,iBAAA,CAAAA,aAAAG,cAAA,IAAA;kCAMPC;;uBAIAA,IAAAA,iCAAO,EAAAJ,aAAAG,cAAA,OAAAN,UAAAQ,KAAA,CAAAC,MAAA,KAAAN,aAAAO,kBAAA,IAAA;kCACT;uBAEAC;;8BAEF;mBAEA;QACF;eAAIb,OAAAA,eAAAA,CAAAA,yCAAAA,EAAAA,yBAAAA,sCAAAA;;;QAAQa;KAAAA;WAAkB;GAGhC,gDAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-prompt-listbox",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "PromptListbox for input components using EditorInput.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,26 +12,26 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/chat-input-plugins": "^0.1.
|
|
16
|
-
"@fluentui-copilot/react-chat-input-plugins": "^0.1.
|
|
17
|
-
"@fluentui-copilot/react-editor-input": "^0.1.
|
|
18
|
-
"@fluentui-copilot/react-prompt-input": "^0.
|
|
19
|
-
"@fluentui-copilot/react-provider": "^0.
|
|
20
|
-
"@fluentui-copilot/react-text-editor": "^0.1.
|
|
15
|
+
"@fluentui-copilot/chat-input-plugins": "^0.1.4",
|
|
16
|
+
"@fluentui-copilot/react-chat-input-plugins": "^0.1.5",
|
|
17
|
+
"@fluentui-copilot/react-editor-input": "^0.1.5",
|
|
18
|
+
"@fluentui-copilot/react-prompt-input": "^0.2.0",
|
|
19
|
+
"@fluentui-copilot/react-provider": "^0.9.0",
|
|
20
|
+
"@fluentui-copilot/react-text-editor": "^0.1.9",
|
|
21
21
|
"@fluentui-copilot/text-editor": "^0.0.6",
|
|
22
22
|
"@swc/helpers": "^0.5.1"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@fluentui/keyboard-keys": ">=9.0.7 <10.0.0",
|
|
26
|
-
"@fluentui/react-aria": ">=9.13.
|
|
27
|
-
"@fluentui/react-combobox": ">=9.13.
|
|
28
|
-
"@fluentui/react-components": ">=9.54.
|
|
26
|
+
"@fluentui/react-aria": ">=9.13.2 <10.0.0",
|
|
27
|
+
"@fluentui/react-combobox": ">=9.13.3 <10.0.0",
|
|
28
|
+
"@fluentui/react-components": ">=9.54.10 <10.0.0",
|
|
29
29
|
"@fluentui/react-icons": ">=2.0.247 <3.0.0",
|
|
30
|
-
"@fluentui/react-jsx-runtime": ">=9.0.
|
|
31
|
-
"@fluentui/react-positioning": ">=9.15.
|
|
32
|
-
"@fluentui/react-shared-contexts": ">=9.
|
|
33
|
-
"@fluentui/react-tabster": ">=9.22.
|
|
34
|
-
"@fluentui/react-utilities": ">=9.18.
|
|
30
|
+
"@fluentui/react-jsx-runtime": ">=9.0.42 <10.0.0",
|
|
31
|
+
"@fluentui/react-positioning": ">=9.15.7 <10.0.0",
|
|
32
|
+
"@fluentui/react-shared-contexts": ">=9.20.0 <10.0.0",
|
|
33
|
+
"@fluentui/react-tabster": ">=9.22.3 <10.0.0",
|
|
34
|
+
"@fluentui/react-utilities": ">=9.18.13 <10.0.0",
|
|
35
35
|
"@types/react": ">=16.14.0 <19.0.0",
|
|
36
36
|
"@types/react-dom": ">=16.9.8 <19.0.0",
|
|
37
37
|
"react": ">=16.14.0 <19.0.0",
|
|
@@ -39,8 +39,7 @@
|
|
|
39
39
|
},
|
|
40
40
|
"beachball": {
|
|
41
41
|
"disallowedChangeTypes": [
|
|
42
|
-
"major"
|
|
43
|
-
"minor"
|
|
42
|
+
"major"
|
|
44
43
|
]
|
|
45
44
|
},
|
|
46
45
|
"exports": {
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { $isSentinelNode } from '@fluentui-copilot/chat-input-plugins';
|
|
2
|
-
import { COMMAND_PRIORITY_CRITICAL, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, $getSelection, useLexicalComposerContext, $getLeafNodes, $getRoot, $isRangeSelection, mergeRegister } from '@fluentui-copilot/react-text-editor';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
export const TextCursorPositionPlugin = ({
|
|
5
|
-
setIsInLastPosition
|
|
6
|
-
}) => {
|
|
7
|
-
const [editor] = useLexicalComposerContext();
|
|
8
|
-
const keypressHandler = _ev => {
|
|
9
|
-
const root = $getRoot();
|
|
10
|
-
const leafNodes = $getLeafNodes(root);
|
|
11
|
-
const lastLeafNode = leafNodes.length === 0 ? undefined : leafNodes[leafNodes.length - 1];
|
|
12
|
-
const selection = $getSelection();
|
|
13
|
-
if (selection === null || !$isRangeSelection(selection) || !selection.isCollapsed()) {
|
|
14
|
-
setIsInLastPosition(false);
|
|
15
|
-
return false;
|
|
16
|
-
}
|
|
17
|
-
const selectionNodes = selection.getNodes();
|
|
18
|
-
// if we don't have a lead node, then we don't have any nodes, so we are in the last position
|
|
19
|
-
if (selectionNodes.length === 0 || !lastLeafNode) {
|
|
20
|
-
setIsInLastPosition(true);
|
|
21
|
-
return false;
|
|
22
|
-
}
|
|
23
|
-
const lastSelectionNode = selectionNodes[selectionNodes.length - 1];
|
|
24
|
-
// if the selection node is a sentinel and it matches the sentinel at the end
|
|
25
|
-
if ($isSentinelNode(lastSelectionNode) && lastSelectionNode.is(lastLeafNode)) {
|
|
26
|
-
setIsInLastPosition(true);
|
|
27
|
-
return false;
|
|
28
|
-
} else if ($isSentinelNode(lastSelectionNode.getNextSibling()) && selection.focus.offset === lastSelectionNode.getTextContentSize()) {
|
|
29
|
-
setIsInLastPosition(true);
|
|
30
|
-
return false;
|
|
31
|
-
}
|
|
32
|
-
setIsInLastPosition(false);
|
|
33
|
-
return false;
|
|
34
|
-
};
|
|
35
|
-
React.useEffect(() => {
|
|
36
|
-
return mergeRegister(editor.registerCommand(KEY_ARROW_DOWN_COMMAND, keypressHandler, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(KEY_ARROW_UP_COMMAND, keypressHandler, COMMAND_PRIORITY_CRITICAL));
|
|
37
|
-
// We are disabling exhaustive-deps because we only want to register the command once on mount and the
|
|
38
|
-
// the teardown function when unmounting
|
|
39
|
-
// eslint-disable-next-line react-compiler/react-compiler
|
|
40
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
41
|
-
}, []);
|
|
42
|
-
return null;
|
|
43
|
-
};
|
|
44
|
-
//# sourceMappingURL=TextCursorPositionPlugin.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["TextCursorPositionPlugin.ts"],"sourcesContent":["import { $isSentinelNode } from '@fluentui-copilot/chat-input-plugins';\nimport {\n COMMAND_PRIORITY_CRITICAL,\n KEY_ARROW_DOWN_COMMAND,\n KEY_ARROW_UP_COMMAND,\n $getSelection,\n useLexicalComposerContext,\n $getLeafNodes,\n $getRoot,\n $isRangeSelection,\n mergeRegister,\n} from '@fluentui-copilot/react-text-editor';\nimport * as React from 'react';\n\nexport type TextCursorPositionPluginProps = {\n setIsInLastPosition: (isInLastPosition: boolean) => void;\n};\n\nexport const TextCursorPositionPlugin: React.FunctionComponent<TextCursorPositionPluginProps> = ({\n setIsInLastPosition,\n}) => {\n const [editor] = useLexicalComposerContext();\n\n const keypressHandler = (_ev: KeyboardEvent) => {\n const root = $getRoot();\n const leafNodes = $getLeafNodes(root);\n const lastLeafNode = leafNodes.length === 0 ? undefined : leafNodes[leafNodes.length - 1];\n const selection = $getSelection();\n if (selection === null || !$isRangeSelection(selection) || !selection.isCollapsed()) {\n setIsInLastPosition(false);\n return false;\n }\n\n const selectionNodes = selection.getNodes();\n // if we don't have a lead node, then we don't have any nodes, so we are in the last position\n if (selectionNodes.length === 0 || !lastLeafNode) {\n setIsInLastPosition(true);\n return false;\n }\n const lastSelectionNode = selectionNodes[selectionNodes.length - 1];\n\n // if the selection node is a sentinel and it matches the sentinel at the end\n if ($isSentinelNode(lastSelectionNode) && lastSelectionNode.is(lastLeafNode)) {\n setIsInLastPosition(true);\n return false;\n }\n // else if the selection node is not a sentinel, check that the next sibling node is a sentinel\n // and check if the focus offset is in the last position of the node.\n else if (\n $isSentinelNode(lastSelectionNode.getNextSibling()) &&\n selection.focus.offset === lastSelectionNode.getTextContentSize()\n ) {\n setIsInLastPosition(true);\n return false;\n }\n\n setIsInLastPosition(false);\n return false;\n };\n\n React.useEffect(() => {\n return mergeRegister(\n editor.registerCommand(KEY_ARROW_DOWN_COMMAND, keypressHandler, COMMAND_PRIORITY_CRITICAL),\n editor.registerCommand(KEY_ARROW_UP_COMMAND, keypressHandler, COMMAND_PRIORITY_CRITICAL),\n );\n // We are disabling exhaustive-deps because we only want to register the command once on mount and the\n // the teardown function when unmounting\n // eslint-disable-next-line react-compiler/react-compiler\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return null;\n};\n"],"names":["$isSentinelNode","COMMAND_PRIORITY_CRITICAL","KEY_ARROW_DOWN_COMMAND","KEY_ARROW_UP_COMMAND","$getSelection","useLexicalComposerContext","$getLeafNodes","$getRoot","$isRangeSelection","mergeRegister","React","TextCursorPositionPlugin","setIsInLastPosition","editor","keypressHandler","_ev","root","leafNodes","lastLeafNode","length","undefined","selection","isCollapsed","selectionNodes","getNodes","lastSelectionNode","is","getNextSibling","focus","offset","getTextContentSize","useEffect","registerCommand"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,QAAQ,uCAAuC;AACvE,SACEC,yBAAyB,EACzBC,sBAAsB,EACtBC,oBAAoB,EACpBC,aAAa,EACbC,yBAAyB,EACzBC,aAAa,EACbC,QAAQ,EACRC,iBAAiB,EACjBC,aAAa,QACR,sCAAsC;AAC7C,YAAYC,WAAW,QAAQ;AAM/B,OAAO,MAAMC,2BAAmF,CAAC,EAC/FC,mBAAmB,EACpB;IACC,MAAM,CAACC,OAAO,GAAGR;IAEjB,MAAMS,kBAAkB,CAACC;QACvB,MAAMC,OAAOT;QACb,MAAMU,YAAYX,cAAcU;QAChC,MAAME,eAAeD,UAAUE,MAAM,KAAK,IAAIC,YAAYH,SAAS,CAACA,UAAUE,MAAM,GAAG,EAAE;QACzF,MAAME,YAAYjB;QAClB,IAAIiB,cAAc,QAAQ,CAACb,kBAAkBa,cAAc,CAACA,UAAUC,WAAW,IAAI;YACnFV,oBAAoB;YACpB,OAAO;QACT;QAEA,MAAMW,iBAAiBF,UAAUG,QAAQ;QACzC,6FAA6F;QAC7F,IAAID,eAAeJ,MAAM,KAAK,KAAK,CAACD,cAAc;YAChDN,oBAAoB;YACpB,OAAO;QACT;QACA,MAAMa,oBAAoBF,cAAc,CAACA,eAAeJ,MAAM,GAAG,EAAE;QAEnE,6EAA6E;QAC7E,IAAInB,gBAAgByB,sBAAsBA,kBAAkBC,EAAE,CAACR,eAAe;YAC5EN,oBAAoB;YACpB,OAAO;QACT,OAGK,IACHZ,gBAAgByB,kBAAkBE,cAAc,OAChDN,UAAUO,KAAK,CAACC,MAAM,KAAKJ,kBAAkBK,kBAAkB,IAC/D;YACAlB,oBAAoB;YACpB,OAAO;QACT;QAEAA,oBAAoB;QACpB,OAAO;IACT;IAEAF,MAAMqB,SAAS,CAAC;QACd,OAAOtB,cACLI,OAAOmB,eAAe,CAAC9B,wBAAwBY,iBAAiBb,4BAChEY,OAAOmB,eAAe,CAAC7B,sBAAsBW,iBAAiBb;IAEhE,sGAAsG;IACtG,wCAAwC;IACxC,yDAAyD;IACzD,uDAAuD;IACzD,GAAG,EAAE;IAEL,OAAO;AACT,EAAE"}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "TextCursorPositionPlugin", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return TextCursorPositionPlugin;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
-
const _chatinputplugins = require("@fluentui-copilot/chat-input-plugins");
|
|
13
|
-
const _reacttexteditor = require("@fluentui-copilot/react-text-editor");
|
|
14
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
15
|
-
const TextCursorPositionPlugin = ({ setIsInLastPosition })=>{
|
|
16
|
-
const [editor] = (0, _reacttexteditor.useLexicalComposerContext)();
|
|
17
|
-
const keypressHandler = (_ev)=>{
|
|
18
|
-
const root = (0, _reacttexteditor.$getRoot)();
|
|
19
|
-
const leafNodes = (0, _reacttexteditor.$getLeafNodes)(root);
|
|
20
|
-
const lastLeafNode = leafNodes.length === 0 ? undefined : leafNodes[leafNodes.length - 1];
|
|
21
|
-
const selection = (0, _reacttexteditor.$getSelection)();
|
|
22
|
-
if (selection === null || !(0, _reacttexteditor.$isRangeSelection)(selection) || !selection.isCollapsed()) {
|
|
23
|
-
setIsInLastPosition(false);
|
|
24
|
-
return false;
|
|
25
|
-
}
|
|
26
|
-
const selectionNodes = selection.getNodes();
|
|
27
|
-
// if we don't have a lead node, then we don't have any nodes, so we are in the last position
|
|
28
|
-
if (selectionNodes.length === 0 || !lastLeafNode) {
|
|
29
|
-
setIsInLastPosition(true);
|
|
30
|
-
return false;
|
|
31
|
-
}
|
|
32
|
-
const lastSelectionNode = selectionNodes[selectionNodes.length - 1];
|
|
33
|
-
// if the selection node is a sentinel and it matches the sentinel at the end
|
|
34
|
-
if ((0, _chatinputplugins.$isSentinelNode)(lastSelectionNode) && lastSelectionNode.is(lastLeafNode)) {
|
|
35
|
-
setIsInLastPosition(true);
|
|
36
|
-
return false;
|
|
37
|
-
} else if ((0, _chatinputplugins.$isSentinelNode)(lastSelectionNode.getNextSibling()) && selection.focus.offset === lastSelectionNode.getTextContentSize()) {
|
|
38
|
-
setIsInLastPosition(true);
|
|
39
|
-
return false;
|
|
40
|
-
}
|
|
41
|
-
setIsInLastPosition(false);
|
|
42
|
-
return false;
|
|
43
|
-
};
|
|
44
|
-
_react.useEffect(()=>{
|
|
45
|
-
return (0, _reacttexteditor.mergeRegister)(editor.registerCommand(_reacttexteditor.KEY_ARROW_DOWN_COMMAND, keypressHandler, _reacttexteditor.COMMAND_PRIORITY_CRITICAL), editor.registerCommand(_reacttexteditor.KEY_ARROW_UP_COMMAND, keypressHandler, _reacttexteditor.COMMAND_PRIORITY_CRITICAL));
|
|
46
|
-
// We are disabling exhaustive-deps because we only want to register the command once on mount and the
|
|
47
|
-
// the teardown function when unmounting
|
|
48
|
-
// eslint-disable-next-line react-compiler/react-compiler
|
|
49
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
50
|
-
}, []);
|
|
51
|
-
return null;
|
|
52
|
-
}; //# sourceMappingURL=TextCursorPositionPlugin.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["TextCursorPositionPlugin.ts"],"sourcesContent":["import { $isSentinelNode } from '@fluentui-copilot/chat-input-plugins';\nimport {\n COMMAND_PRIORITY_CRITICAL,\n KEY_ARROW_DOWN_COMMAND,\n KEY_ARROW_UP_COMMAND,\n $getSelection,\n useLexicalComposerContext,\n $getLeafNodes,\n $getRoot,\n $isRangeSelection,\n mergeRegister,\n} from '@fluentui-copilot/react-text-editor';\nimport * as React from 'react';\n\nexport type TextCursorPositionPluginProps = {\n setIsInLastPosition: (isInLastPosition: boolean) => void;\n};\n\nexport const TextCursorPositionPlugin: React.FunctionComponent<TextCursorPositionPluginProps> = ({\n setIsInLastPosition,\n}) => {\n const [editor] = useLexicalComposerContext();\n\n const keypressHandler = (_ev: KeyboardEvent) => {\n const root = $getRoot();\n const leafNodes = $getLeafNodes(root);\n const lastLeafNode = leafNodes.length === 0 ? undefined : leafNodes[leafNodes.length - 1];\n const selection = $getSelection();\n if (selection === null || !$isRangeSelection(selection) || !selection.isCollapsed()) {\n setIsInLastPosition(false);\n return false;\n }\n\n const selectionNodes = selection.getNodes();\n // if we don't have a lead node, then we don't have any nodes, so we are in the last position\n if (selectionNodes.length === 0 || !lastLeafNode) {\n setIsInLastPosition(true);\n return false;\n }\n const lastSelectionNode = selectionNodes[selectionNodes.length - 1];\n\n // if the selection node is a sentinel and it matches the sentinel at the end\n if ($isSentinelNode(lastSelectionNode) && lastSelectionNode.is(lastLeafNode)) {\n setIsInLastPosition(true);\n return false;\n }\n // else if the selection node is not a sentinel, check that the next sibling node is a sentinel\n // and check if the focus offset is in the last position of the node.\n else if (\n $isSentinelNode(lastSelectionNode.getNextSibling()) &&\n selection.focus.offset === lastSelectionNode.getTextContentSize()\n ) {\n setIsInLastPosition(true);\n return false;\n }\n\n setIsInLastPosition(false);\n return false;\n };\n\n React.useEffect(() => {\n return mergeRegister(\n editor.registerCommand(KEY_ARROW_DOWN_COMMAND, keypressHandler, COMMAND_PRIORITY_CRITICAL),\n editor.registerCommand(KEY_ARROW_UP_COMMAND, keypressHandler, COMMAND_PRIORITY_CRITICAL),\n );\n // We are disabling exhaustive-deps because we only want to register the command once on mount and the\n // the teardown function when unmounting\n // eslint-disable-next-line react-compiler/react-compiler\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return null;\n};\n"],"names":["TextCursorPositionPlugin","useLexicalComposerContext","editor","root","$getRoot","keypressHandler","$getLeafNodes","lastLeafNode","leafNodes","selection","$getSelection","$isRangeSelection","isCollapsed","setIsInLastPosition","selectionNodes","length","getNodes","lastSelectionNode","is","$isSentinelNode","getNextSibling","focus","offset","getTextContentSize","React","useEffect","mergeRegister","registerCommand","KEY_ARROW_DOWN_COMMAND","COMMAND_PRIORITY_CRITICAL","KEY_ARROW_UP_COMMAND"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkBaA;;;eAAAA;;;;kCAlBmB;iCAWzB;iEACgB;AAMhB,MAAMA,2BAAmF,CAAC,qBAG9EC;UAGf,CAAAC,OAAMC,GAAAA,IAAAA,0CAAOC;UACbC,kBAAkBC,CAAAA;cAClBH,OAAMI,IAAAA,yBAAAA;cACNC,YAAMC,IAAAA,8BAAYC,EAAAA;cAClBH,eAAIE,UAAuBE,MAAAA,KAAAA,IAAAA,YAAkBF,SAAeA,CAAAA,UAAUG,MAAAA,GAAW,EAAI;0BACnFC,IAAAA,8BAAoB;0BACb,QAAA,CAAAF,IAAAA,kCAAA,EAAAF,cAAA,CAAAA,UAAAG,WAAA,IAAA;gCACT;mBAEA;;cAEAE,iBAAmBC,UAAMC,QAAWT;qGACd;2BACbQ,MAAA,KAAA,KAAA,CAAAR,cAAA;gCACT;mBACA;;cAGAU,oBAAoBA,cAAAA,CAAAA,eAAsBA,MAAAA,GAAkBC,EAAGX;qFACzC;iDACb,EAAAU,sBAAAA,kBAAAC,EAAA,CAAAX,eAAA;gCAKPY;mBAGAN;mBACAM,IAAAA,iCAAO,EAAAF,kBAAAG,cAAA,OAAAX,UAAAY,KAAA,CAAAC,MAAA,KAAAL,kBAAAM,kBAAA,IAAA;gCACT;mBAEAV;;QAEFA,oBAAA;QAEAW,OAAMC;;WAKJA,SAAA,CAAA;QACA,OAAAC,IAAAA,8BAAA,EAAAxB,OAAAyB,eAAwC,CAAAC,uCAAA,EAAAvB,iBAAAwB,0CAAA,GAAA3B,OAAAyB,eAAA,CAAAG,qCAAA,EAAAzB,iBAAAwB,0CAAA;IACxC,sGAAyD;IACzD,wCAAA;IACF,yDAAK;IAEL,uDAAO;IACP,GAAA,EAAA"}
|