@fluentui-copilot/react-editor-input 0.4.1 → 0.4.3
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 +36 -0
- package/CHANGELOG.md +20 -1
- package/dist/index.d.ts +7 -1
- package/lib/components/EditorInput/EditorInput.types.js.map +1 -1
- package/lib/components/EditorInput/renderEditorInput.js +2 -1
- package/lib/components/EditorInput/renderEditorInput.js.map +1 -1
- package/lib/components/EditorInput/useEditorInput.js +5 -3
- package/lib/components/EditorInput/useEditorInput.js.map +1 -1
- package/lib-commonjs/components/EditorInput/EditorInput.types.js.map +1 -1
- package/lib-commonjs/components/EditorInput/renderEditorInput.js +2 -1
- package/lib-commonjs/components/EditorInput/renderEditorInput.js.map +1 -1
- package/lib-commonjs/components/EditorInput/useEditorInput.js +4 -3
- package/lib-commonjs/components/EditorInput/useEditorInput.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.json
CHANGED
|
@@ -1,6 +1,42 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-editor-input",
|
|
3
3
|
"entries": [
|
|
4
|
+
{
|
|
5
|
+
"date": "Fri, 07 Feb 2025 02:01:25 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-editor-input_v0.4.3",
|
|
7
|
+
"version": "0.4.3",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "owcampbe@microsoft.com",
|
|
12
|
+
"package": "@fluentui-copilot/react-editor-input",
|
|
13
|
+
"commit": "7f530f0f6d24d12c634a1247655aeaa92ddb7561",
|
|
14
|
+
"comment": "feat: Allow disabling the SentinelNode."
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Wed, 29 Jan 2025 01:37:03 GMT",
|
|
21
|
+
"tag": "@fluentui-copilot/react-editor-input_v0.4.2",
|
|
22
|
+
"version": "0.4.2",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "owcampbe@microsoft.com",
|
|
27
|
+
"package": "@fluentui-copilot/react-editor-input",
|
|
28
|
+
"commit": "d91d3cd543fc098e226999505bea669836a5083c",
|
|
29
|
+
"comment": "fix: Add tabindex=0 whe not disabled."
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"author": "owcampbe@microsoft.com",
|
|
33
|
+
"package": "@fluentui-copilot/react-editor-input",
|
|
34
|
+
"commit": "e4a98db68244e4fadfb684f7ae500bfc677ed880",
|
|
35
|
+
"comment": "fix: Remove tabIndex attribute causing focus issues when disabled."
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
4
40
|
{
|
|
5
41
|
"date": "Thu, 09 Jan 2025 01:15:37 GMT",
|
|
6
42
|
"tag": "@fluentui-copilot/react-editor-input_v0.4.0",
|
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,28 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-editor-input
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 07 Feb 2025 02:01:25 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.4.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-editor-input_v0.4.3)
|
|
8
|
+
|
|
9
|
+
Fri, 07 Feb 2025 02:01:25 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-editor-input_v0.4.2..@fluentui-copilot/react-editor-input_v0.4.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- feat: Allow disabling the SentinelNode. ([PR #2567](https://github.com/microsoft/fluentai/pull/2567) by owcampbe@microsoft.com)
|
|
15
|
+
|
|
16
|
+
## [0.4.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-editor-input_v0.4.2)
|
|
17
|
+
|
|
18
|
+
Wed, 29 Jan 2025 01:37:03 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-editor-input_v0.4.0..@fluentui-copilot/react-editor-input_v0.4.2)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- fix: Add tabindex=0 whe not disabled. ([PR #2583](https://github.com/microsoft/fluentai/pull/2583) by owcampbe@microsoft.com)
|
|
24
|
+
- fix: Remove tabIndex attribute causing focus issues when disabled. ([PR #2572](https://github.com/microsoft/fluentai/pull/2572) by owcampbe@microsoft.com)
|
|
25
|
+
|
|
7
26
|
## [0.4.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-editor-input_v0.4.0)
|
|
8
27
|
|
|
9
28
|
Thu, 09 Jan 2025 01:15:37 GMT
|
package/dist/index.d.ts
CHANGED
|
@@ -57,6 +57,12 @@ export declare type EditorInputProps = Omit<ComponentProps<Partial<EditorInputSl
|
|
|
57
57
|
* Customize the default styles of elements inserted by Lexical in the editor.
|
|
58
58
|
*/
|
|
59
59
|
customTheme?: InitialConfigType['theme'];
|
|
60
|
+
/**
|
|
61
|
+
* Whether or not to enable the sentinel node. The sentinel node is a node that is inserted at the end of the editor
|
|
62
|
+
* The SentinelNode fixes a Safari bug in lexical versions below 0.20.1
|
|
63
|
+
* @default true
|
|
64
|
+
*/
|
|
65
|
+
isSentinelNodeEnabled?: boolean;
|
|
60
66
|
};
|
|
61
67
|
|
|
62
68
|
export declare type EditorInputSlots = {
|
|
@@ -68,7 +74,7 @@ export declare type EditorInputSlots = {
|
|
|
68
74
|
/**
|
|
69
75
|
* State used in rendering EditorInput
|
|
70
76
|
*/
|
|
71
|
-
export declare type EditorInputState = ComponentState<EditorInputSlots> & Required<Pick<EditorInputProps, 'disabled' | 'textPlugin' | 'history' | 'trimWhiteSpace' | 'editorRef'>> & Partial<Pick<EditorInputProps, 'onPaste'>> & {
|
|
77
|
+
export declare type EditorInputState = ComponentState<EditorInputSlots> & Required<Pick<EditorInputProps, 'disabled' | 'textPlugin' | 'history' | 'trimWhiteSpace' | 'editorRef' | 'isSentinelNodeEnabled'>> & Partial<Pick<EditorInputProps, 'onPaste'>> & {
|
|
72
78
|
lexicalInitialConfig: InitialConfigType;
|
|
73
79
|
defaultValue?: string;
|
|
74
80
|
handleOnChange: (value: string) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["EditorInput.types.ts"],"sourcesContent":["import type { InitialConfigType, LexicalEditor, LexicalPlainTextPlugin } from '@fluentui-copilot/react-text-editor';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type EditorInputSlots = {\n root: NonNullable<Slot<'span'>>;\n input: NonNullable<Slot<'span'>>;\n placeholderValue?: Slot<'span'>;\n};\n\n/**\n * EditorInput Props\n */\nexport type EditorInputProps = Omit<\n ComponentProps<Partial<EditorInputSlots>, 'input'>,\n 'onChange' | 'onPaste' | 'defaultValue' | 'onSubmit'\n> & {\n disabled?: boolean;\n /**\n * If defaultValue is a string, it will be added to the input on first render.\n * If defaultValue is a function, it can call lexical $ functions to imperatively set the initial content with more complex nodes.\n */\n defaultValue?: string | (() => void);\n /**\n * Callback for when the user changes the value.\n * TODO: Add proper event type for callback\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange?: (ev: any, data: EditorInputValueData) => void;\n /**\n * Callback for when content is pasted into the Editor.\n */\n onPaste?: (ev: ClipboardEvent) => void;\n /**\n * When true, the input will be cleared when only whitespace is remaining.\n * @default false\n */\n trimWhiteSpace?: boolean;\n /**\n * Used to register any custom nodes used by plugins added. Can also be used to override the default nodes.\n */\n customNodes?: InitialConfigType['nodes'];\n /**\n * The plugin which is in charge of initializing Lexical and is given the `input` and `placeholder` slots\n * @default LexicalPlainTextPlugin\n */\n textPlugin?: typeof LexicalPlainTextPlugin;\n /**\n * Controls whether history is tracked to provide undo and redo functionality\n * @default true\n */\n history?: boolean;\n\n editorRef?: React.RefObject<LexicalEditor>;\n\n /**\n * Customize the default styles of elements inserted by Lexical in the editor.\n */\n customTheme?: InitialConfigType['theme'];\n};\n\n/**\n * State used in rendering EditorInput\n */\nexport type EditorInputState = ComponentState<EditorInputSlots> &\n Required
|
|
1
|
+
{"version":3,"sources":["EditorInput.types.ts"],"sourcesContent":["import type { InitialConfigType, LexicalEditor, LexicalPlainTextPlugin } from '@fluentui-copilot/react-text-editor';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type EditorInputSlots = {\n root: NonNullable<Slot<'span'>>;\n input: NonNullable<Slot<'span'>>;\n placeholderValue?: Slot<'span'>;\n};\n\n/**\n * EditorInput Props\n */\nexport type EditorInputProps = Omit<\n ComponentProps<Partial<EditorInputSlots>, 'input'>,\n 'onChange' | 'onPaste' | 'defaultValue' | 'onSubmit'\n> & {\n disabled?: boolean;\n /**\n * If defaultValue is a string, it will be added to the input on first render.\n * If defaultValue is a function, it can call lexical $ functions to imperatively set the initial content with more complex nodes.\n */\n defaultValue?: string | (() => void);\n /**\n * Callback for when the user changes the value.\n * TODO: Add proper event type for callback\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange?: (ev: any, data: EditorInputValueData) => void;\n /**\n * Callback for when content is pasted into the Editor.\n */\n onPaste?: (ev: ClipboardEvent) => void;\n /**\n * When true, the input will be cleared when only whitespace is remaining.\n * @default false\n */\n trimWhiteSpace?: boolean;\n /**\n * Used to register any custom nodes used by plugins added. Can also be used to override the default nodes.\n */\n customNodes?: InitialConfigType['nodes'];\n /**\n * The plugin which is in charge of initializing Lexical and is given the `input` and `placeholder` slots\n * @default LexicalPlainTextPlugin\n */\n textPlugin?: typeof LexicalPlainTextPlugin;\n /**\n * Controls whether history is tracked to provide undo and redo functionality\n * @default true\n */\n history?: boolean;\n\n editorRef?: React.RefObject<LexicalEditor>;\n\n /**\n * Customize the default styles of elements inserted by Lexical in the editor.\n */\n customTheme?: InitialConfigType['theme'];\n\n /**\n * Whether or not to enable the sentinel node. The sentinel node is a node that is inserted at the end of the editor\n * The SentinelNode fixes a Safari bug in lexical versions below 0.20.1\n * @default true\n */\n isSentinelNodeEnabled?: boolean;\n};\n\n/**\n * State used in rendering EditorInput\n */\nexport type EditorInputState = ComponentState<EditorInputSlots> &\n Required<\n Pick<\n EditorInputProps,\n 'disabled' | 'textPlugin' | 'history' | 'trimWhiteSpace' | 'editorRef' | 'isSentinelNodeEnabled'\n >\n > &\n Partial<Pick<EditorInputProps, 'onPaste'>> & {\n lexicalInitialConfig: InitialConfigType;\n defaultValue?: string;\n handleOnChange: (value: string) => void;\n };\n\n/**\n * Data passed to the `onChange` callback when the chat input's value changes.\n */\nexport type EditorInputValueData = {\n value: string;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAmFA;;CAEC,GACD,WAEE"}
|
|
@@ -19,7 +19,8 @@ export const renderEditorInput_unstable = state => {
|
|
|
19
19
|
onContentChange: state.handleOnChange,
|
|
20
20
|
onPaste: state.onPaste,
|
|
21
21
|
trimWhitespace: state.trimWhiteSpace,
|
|
22
|
-
defaultValue: state.defaultValue
|
|
22
|
+
defaultValue: state.defaultValue,
|
|
23
|
+
isSentinelNodeEnabled: state.isSentinelNodeEnabled
|
|
23
24
|
}), state.history && /*#__PURE__*/_jsx(LexicalHistoryPlugin, {})]
|
|
24
25
|
}), /*#__PURE__*/_jsx(LexicalEditorRefPlugin, {
|
|
25
26
|
editorRef: state.editorRef
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderEditorInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { EditorInputState, EditorInputSlots } from './EditorInput.types';\nimport {\n LexicalComposer,\n LexicalErrorBoundary,\n LexicalEditorRefPlugin,\n LexicalHistoryPlugin,\n} from '@fluentui-copilot/react-text-editor';\nimport { BasicFunctionalityPlugin } from '@fluentui-copilot/react-chat-input-plugins';\n\n/**\n * Render the final JSX of EditorInput\n */\nexport const renderEditorInput_unstable = (state: EditorInputState) => {\n assertSlots<EditorInputSlots>(state);\n\n return (\n <state.root>\n <LexicalComposer initialConfig={state.lexicalInitialConfig}>\n <state.textPlugin\n contentEditable={<state.input />}\n ErrorBoundary={LexicalErrorBoundary}\n placeholder={state.placeholderValue ? <state.placeholderValue /> : null}\n />\n <>\n <BasicFunctionalityPlugin\n onContentChange={state.handleOnChange}\n onPaste={state.onPaste}\n trimWhitespace={state.trimWhiteSpace}\n defaultValue={state.defaultValue}\n />\n {state.history && <LexicalHistoryPlugin />}\n </>\n <LexicalEditorRefPlugin editorRef={state.editorRef} />\n </LexicalComposer>\n </state.root>\n );\n};\n"],"names":["assertSlots","LexicalComposer","LexicalErrorBoundary","LexicalEditorRefPlugin","LexicalHistoryPlugin","BasicFunctionalityPlugin","renderEditorInput_unstable","state","root","initialConfig","lexicalInitialConfig","textPlugin","contentEditable","input","ErrorBoundary","placeholder","placeholderValue","onContentChange","handleOnChange","onPaste","trimWhitespace","trimWhiteSpace","defaultValue","history","editorRef"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["renderEditorInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { EditorInputState, EditorInputSlots } from './EditorInput.types';\nimport {\n LexicalComposer,\n LexicalErrorBoundary,\n LexicalEditorRefPlugin,\n LexicalHistoryPlugin,\n} from '@fluentui-copilot/react-text-editor';\nimport { BasicFunctionalityPlugin } from '@fluentui-copilot/react-chat-input-plugins';\n\n/**\n * Render the final JSX of EditorInput\n */\nexport const renderEditorInput_unstable = (state: EditorInputState) => {\n assertSlots<EditorInputSlots>(state);\n\n return (\n <state.root>\n <LexicalComposer initialConfig={state.lexicalInitialConfig}>\n <state.textPlugin\n contentEditable={<state.input />}\n ErrorBoundary={LexicalErrorBoundary}\n placeholder={state.placeholderValue ? <state.placeholderValue /> : null}\n />\n <>\n <BasicFunctionalityPlugin\n onContentChange={state.handleOnChange}\n onPaste={state.onPaste}\n trimWhitespace={state.trimWhiteSpace}\n defaultValue={state.defaultValue}\n isSentinelNodeEnabled={state.isSentinelNodeEnabled}\n />\n {state.history && <LexicalHistoryPlugin />}\n </>\n <LexicalEditorRefPlugin editorRef={state.editorRef} />\n </LexicalComposer>\n </state.root>\n );\n};\n"],"names":["assertSlots","LexicalComposer","LexicalErrorBoundary","LexicalEditorRefPlugin","LexicalHistoryPlugin","BasicFunctionalityPlugin","renderEditorInput_unstable","state","root","initialConfig","lexicalInitialConfig","textPlugin","contentEditable","input","ErrorBoundary","placeholder","placeholderValue","onContentChange","handleOnChange","onPaste","trimWhitespace","trimWhiteSpace","defaultValue","isSentinelNodeEnabled","history","editorRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAEzD,SACEC,eAAe,EACfC,oBAAoB,EACpBC,sBAAsB,EACtBC,oBAAoB,QACf,sCAAsC;AAC7C,SAASC,wBAAwB,QAAQ,6CAA6C;AAEtF;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCP,YAA8BO;IAE9B,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,MAACP;YAAgBQ,eAAeF,MAAMG,oBAAoB;;8BACxD,KAACH,MAAMI,UAAU;oBACfC,+BAAiB,KAACL,MAAMM,KAAK;oBAC7BC,eAAeZ;oBACfa,aAAaR,MAAMS,gBAAgB,iBAAG,KAACT,MAAMS,gBAAgB,QAAM;;8BAErE;;sCACE,KAACX;4BACCY,iBAAiBV,MAAMW,cAAc;4BACrCC,SAASZ,MAAMY,OAAO;4BACtBC,gBAAgBb,MAAMc,cAAc;4BACpCC,cAAcf,MAAMe,YAAY;4BAChCC,uBAAuBhB,MAAMgB,qBAAqB;;wBAEnDhB,MAAMiB,OAAO,kBAAI,KAACpB;;;8BAErB,KAACD;oBAAuBsB,WAAWlB,MAAMkB,SAAS;;;;;AAI1D,EAAE"}
|
|
@@ -20,7 +20,8 @@ export const useEditorInput_unstable = (props, ref) => {
|
|
|
20
20
|
textPlugin = LexicalPlainTextPlugin,
|
|
21
21
|
history = true,
|
|
22
22
|
editorRef: userEditorRef,
|
|
23
|
-
customTheme
|
|
23
|
+
customTheme,
|
|
24
|
+
isSentinelNodeEnabled = true
|
|
24
25
|
} = props;
|
|
25
26
|
const {
|
|
26
27
|
root,
|
|
@@ -102,9 +103,9 @@ export const useEditorInput_unstable = (props, ref) => {
|
|
|
102
103
|
role: 'textbox',
|
|
103
104
|
contentEditable: !disabled,
|
|
104
105
|
'aria-readonly': disabled ? true : undefined,
|
|
105
|
-
tabIndex: disabled ? -1 : 0,
|
|
106
106
|
disabled,
|
|
107
107
|
suppressContentEditableWarning: true,
|
|
108
|
+
tabIndex: disabled ? undefined : 0,
|
|
108
109
|
...primary,
|
|
109
110
|
'aria-describedby': primary['aria-describedby'] ? `${primary['aria-describedby']} ${placeholderId}` : placeholderId
|
|
110
111
|
},
|
|
@@ -125,7 +126,8 @@ export const useEditorInput_unstable = (props, ref) => {
|
|
|
125
126
|
handleOnChange,
|
|
126
127
|
defaultValue: defaultString,
|
|
127
128
|
trimWhiteSpace,
|
|
128
|
-
history
|
|
129
|
+
history,
|
|
130
|
+
isSentinelNodeEnabled
|
|
129
131
|
};
|
|
130
132
|
};
|
|
131
133
|
//# sourceMappingURL=useEditorInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useEditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n slot,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport type { EditorInputProps, EditorInputState } from './EditorInput.types';\nimport { SentinelNode } from '@fluentui-copilot/chat-input-plugins';\nimport type { LexicalEditor } from '@fluentui-copilot/react-text-editor';\nimport { LexicalPlainTextPlugin, mergeRegister } from '@fluentui-copilot/react-text-editor';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render EditorInput.\n *\n * The returned state can be modified with hooks such as useEditorInputStyles_unstable,\n * before being passed to renderEditorInput_unstable.\n *\n * @param props - props from this instance of EditorInput\n * @param ref - reference to root HTMLElement of EditorInput\n */\nexport const useEditorInput_unstable = (props: EditorInputProps, ref: React.Ref<HTMLSpanElement>): EditorInputState => {\n const {\n onChange,\n onPaste,\n trimWhiteSpace = false,\n textPlugin = LexicalPlainTextPlugin,\n history = true,\n editorRef: userEditorRef,\n customTheme,\n } = props;\n const { root, primary } = getPartitionedNativeProps({\n primarySlotTagName: 'span',\n props,\n excludedPropNames: ['onChange', 'onPaste', 'defaultValue'],\n });\n\n const editorRef = useMergedRefs(React.useRef<LexicalEditor>(null), userEditorRef);\n // The disabled state can also be changed by lexical (e.g. by a custom plugin) so\n // we use `useControllableState` to coordinate\n const [disabled, setDisabled] = useControllableState({\n state: props.disabled,\n initialState: false,\n });\n\n const customNodes = props.customNodes ? [...props.customNodes, SentinelNode] : [SentinelNode];\n\n const spanRef = React.useCallback(\n span => {\n // Register the `input` span with lexical\n editorRef.current?.setRootElement(span);\n },\n [editorRef],\n );\n\n // Update lexical when disabled changes\n useIsomorphicLayoutEffect(() => {\n if (editorRef.current) {\n editorRef.current?.setEditable(!disabled);\n }\n }, [disabled]);\n\n useIsomorphicLayoutEffect(() => {\n if (editorRef.current) {\n return mergeRegister(\n editorRef.current.registerEditableListener(isEditable => {\n setDisabled(!isEditable);\n }),\n editorRef.current?.registerRootListener(root => {\n if (!root) {\n return;\n }\n\n // Remove lexical's inline style so we can apply our own\n // Lexical needs the whitespace style to be either `pre` or `pre-wrap` to work correctly\n root.style.whiteSpace = '';\n }),\n );\n }\n }, [editorRef]);\n\n const handleOnChange = React.useCallback(\n (newValue: string) => {\n onChange?.({}, { value: newValue });\n },\n [onChange],\n );\n\n const [defaultString, defaultValueFunction] = (() => {\n if (typeof props.defaultValue === 'function') {\n return [undefined, props.defaultValue];\n }\n return [props.defaultValue, undefined];\n })();\n\n const placeholderValue = slot.optional(props.placeholderValue, { elementType: 'span' });\n const placeholderId = useId('chat-input-placeholder', placeholderValue?.id);\n if (placeholderValue) {\n placeholderValue.id = placeholderId;\n }\n\n return {\n components: {\n root: 'span',\n input: 'span',\n placeholderValue: 'span',\n },\n root: slot.always(props.root, { defaultProps: { ...root }, elementType: 'span' }),\n input: slot.always(props.input, {\n defaultProps: {\n ref: useMergedRefs(ref, spanRef),\n role: 'textbox',\n contentEditable: !disabled,\n 'aria-readonly': disabled ? true : undefined,\n tabIndex: disabled ?
|
|
1
|
+
{"version":3,"sources":["useEditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n slot,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport type { EditorInputProps, EditorInputState } from './EditorInput.types';\nimport { SentinelNode } from '@fluentui-copilot/chat-input-plugins';\nimport type { LexicalEditor } from '@fluentui-copilot/react-text-editor';\nimport { LexicalPlainTextPlugin, mergeRegister } from '@fluentui-copilot/react-text-editor';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render EditorInput.\n *\n * The returned state can be modified with hooks such as useEditorInputStyles_unstable,\n * before being passed to renderEditorInput_unstable.\n *\n * @param props - props from this instance of EditorInput\n * @param ref - reference to root HTMLElement of EditorInput\n */\nexport const useEditorInput_unstable = (props: EditorInputProps, ref: React.Ref<HTMLSpanElement>): EditorInputState => {\n const {\n onChange,\n onPaste,\n trimWhiteSpace = false,\n textPlugin = LexicalPlainTextPlugin,\n history = true,\n editorRef: userEditorRef,\n customTheme,\n isSentinelNodeEnabled = true,\n } = props;\n const { root, primary } = getPartitionedNativeProps({\n primarySlotTagName: 'span',\n props,\n excludedPropNames: ['onChange', 'onPaste', 'defaultValue'],\n });\n\n const editorRef = useMergedRefs(React.useRef<LexicalEditor>(null), userEditorRef);\n // The disabled state can also be changed by lexical (e.g. by a custom plugin) so\n // we use `useControllableState` to coordinate\n const [disabled, setDisabled] = useControllableState({\n state: props.disabled,\n initialState: false,\n });\n\n const customNodes = props.customNodes ? [...props.customNodes, SentinelNode] : [SentinelNode];\n\n const spanRef = React.useCallback(\n span => {\n // Register the `input` span with lexical\n editorRef.current?.setRootElement(span);\n },\n [editorRef],\n );\n\n // Update lexical when disabled changes\n useIsomorphicLayoutEffect(() => {\n if (editorRef.current) {\n editorRef.current?.setEditable(!disabled);\n }\n }, [disabled]);\n\n useIsomorphicLayoutEffect(() => {\n if (editorRef.current) {\n return mergeRegister(\n editorRef.current.registerEditableListener(isEditable => {\n setDisabled(!isEditable);\n }),\n editorRef.current?.registerRootListener(root => {\n if (!root) {\n return;\n }\n\n // Remove lexical's inline style so we can apply our own\n // Lexical needs the whitespace style to be either `pre` or `pre-wrap` to work correctly\n root.style.whiteSpace = '';\n }),\n );\n }\n }, [editorRef]);\n\n const handleOnChange = React.useCallback(\n (newValue: string) => {\n onChange?.({}, { value: newValue });\n },\n [onChange],\n );\n\n const [defaultString, defaultValueFunction] = (() => {\n if (typeof props.defaultValue === 'function') {\n return [undefined, props.defaultValue];\n }\n return [props.defaultValue, undefined];\n })();\n\n const placeholderValue = slot.optional(props.placeholderValue, { elementType: 'span' });\n const placeholderId = useId('chat-input-placeholder', placeholderValue?.id);\n if (placeholderValue) {\n placeholderValue.id = placeholderId;\n }\n\n return {\n components: {\n root: 'span',\n input: 'span',\n placeholderValue: 'span',\n },\n root: slot.always(props.root, { defaultProps: { ...root }, elementType: 'span' }),\n input: slot.always(props.input, {\n defaultProps: {\n ref: useMergedRefs(ref, spanRef),\n role: 'textbox',\n contentEditable: !disabled,\n 'aria-readonly': disabled ? true : undefined,\n disabled,\n suppressContentEditableWarning: true,\n tabIndex: disabled ? undefined : 0,\n ...primary,\n 'aria-describedby': primary['aria-describedby']\n ? `${primary['aria-describedby']} ${placeholderId}`\n : placeholderId,\n },\n elementType: 'span',\n }),\n placeholderValue,\n lexicalInitialConfig: {\n namespace: 'fai-EditorInput',\n onError: console.error,\n nodes: customNodes,\n editorState: defaultValueFunction,\n theme: customTheme,\n },\n editorRef,\n disabled,\n textPlugin,\n onPaste,\n handleOnChange,\n defaultValue: defaultString,\n trimWhiteSpace,\n history,\n isSentinelNodeEnabled,\n };\n};\n"],"names":["React","getPartitionedNativeProps","slot","useId","useIsomorphicLayoutEffect","useMergedRefs","SentinelNode","LexicalPlainTextPlugin","mergeRegister","useControllableState","useEditorInput_unstable","props","ref","onChange","onPaste","trimWhiteSpace","textPlugin","history","editorRef","userEditorRef","customTheme","isSentinelNodeEnabled","root","primary","primarySlotTagName","excludedPropNames","useRef","disabled","setDisabled","state","initialState","customNodes","spanRef","useCallback","span","current","setRootElement","setEditable","registerEditableListener","isEditable","registerRootListener","style","whiteSpace","handleOnChange","newValue","value","defaultString","defaultValueFunction","defaultValue","undefined","placeholderValue","optional","elementType","placeholderId","id","components","input","always","defaultProps","role","contentEditable","suppressContentEditableWarning","tabIndex","lexicalInitialConfig","namespace","onError","console","error","nodes","editorState","theme"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["EditorInput.types.ts"],"sourcesContent":["import type { InitialConfigType, LexicalEditor, LexicalPlainTextPlugin } from '@fluentui-copilot/react-text-editor';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type EditorInputSlots = {\n root: NonNullable<Slot<'span'>>;\n input: NonNullable<Slot<'span'>>;\n placeholderValue?: Slot<'span'>;\n};\n\n/**\n * EditorInput Props\n */\nexport type EditorInputProps = Omit<\n ComponentProps<Partial<EditorInputSlots>, 'input'>,\n 'onChange' | 'onPaste' | 'defaultValue' | 'onSubmit'\n> & {\n disabled?: boolean;\n /**\n * If defaultValue is a string, it will be added to the input on first render.\n * If defaultValue is a function, it can call lexical $ functions to imperatively set the initial content with more complex nodes.\n */\n defaultValue?: string | (() => void);\n /**\n * Callback for when the user changes the value.\n * TODO: Add proper event type for callback\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange?: (ev: any, data: EditorInputValueData) => void;\n /**\n * Callback for when content is pasted into the Editor.\n */\n onPaste?: (ev: ClipboardEvent) => void;\n /**\n * When true, the input will be cleared when only whitespace is remaining.\n * @default false\n */\n trimWhiteSpace?: boolean;\n /**\n * Used to register any custom nodes used by plugins added. Can also be used to override the default nodes.\n */\n customNodes?: InitialConfigType['nodes'];\n /**\n * The plugin which is in charge of initializing Lexical and is given the `input` and `placeholder` slots\n * @default LexicalPlainTextPlugin\n */\n textPlugin?: typeof LexicalPlainTextPlugin;\n /**\n * Controls whether history is tracked to provide undo and redo functionality\n * @default true\n */\n history?: boolean;\n\n editorRef?: React.RefObject<LexicalEditor>;\n\n /**\n * Customize the default styles of elements inserted by Lexical in the editor.\n */\n customTheme?: InitialConfigType['theme'];\n};\n\n/**\n * State used in rendering EditorInput\n */\nexport type EditorInputState = ComponentState<EditorInputSlots> &\n Required
|
|
1
|
+
{"version":3,"sources":["EditorInput.types.ts"],"sourcesContent":["import type { InitialConfigType, LexicalEditor, LexicalPlainTextPlugin } from '@fluentui-copilot/react-text-editor';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type EditorInputSlots = {\n root: NonNullable<Slot<'span'>>;\n input: NonNullable<Slot<'span'>>;\n placeholderValue?: Slot<'span'>;\n};\n\n/**\n * EditorInput Props\n */\nexport type EditorInputProps = Omit<\n ComponentProps<Partial<EditorInputSlots>, 'input'>,\n 'onChange' | 'onPaste' | 'defaultValue' | 'onSubmit'\n> & {\n disabled?: boolean;\n /**\n * If defaultValue is a string, it will be added to the input on first render.\n * If defaultValue is a function, it can call lexical $ functions to imperatively set the initial content with more complex nodes.\n */\n defaultValue?: string | (() => void);\n /**\n * Callback for when the user changes the value.\n * TODO: Add proper event type for callback\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange?: (ev: any, data: EditorInputValueData) => void;\n /**\n * Callback for when content is pasted into the Editor.\n */\n onPaste?: (ev: ClipboardEvent) => void;\n /**\n * When true, the input will be cleared when only whitespace is remaining.\n * @default false\n */\n trimWhiteSpace?: boolean;\n /**\n * Used to register any custom nodes used by plugins added. Can also be used to override the default nodes.\n */\n customNodes?: InitialConfigType['nodes'];\n /**\n * The plugin which is in charge of initializing Lexical and is given the `input` and `placeholder` slots\n * @default LexicalPlainTextPlugin\n */\n textPlugin?: typeof LexicalPlainTextPlugin;\n /**\n * Controls whether history is tracked to provide undo and redo functionality\n * @default true\n */\n history?: boolean;\n\n editorRef?: React.RefObject<LexicalEditor>;\n\n /**\n * Customize the default styles of elements inserted by Lexical in the editor.\n */\n customTheme?: InitialConfigType['theme'];\n\n /**\n * Whether or not to enable the sentinel node. The sentinel node is a node that is inserted at the end of the editor\n * The SentinelNode fixes a Safari bug in lexical versions below 0.20.1\n * @default true\n */\n isSentinelNodeEnabled?: boolean;\n};\n\n/**\n * State used in rendering EditorInput\n */\nexport type EditorInputState = ComponentState<EditorInputSlots> &\n Required<\n Pick<\n EditorInputProps,\n 'disabled' | 'textPlugin' | 'history' | 'trimWhiteSpace' | 'editorRef' | 'isSentinelNodeEnabled'\n >\n > &\n Partial<Pick<EditorInputProps, 'onPaste'>> & {\n lexicalInitialConfig: InitialConfigType;\n defaultValue?: string;\n handleOnChange: (value: string) => void;\n };\n\n/**\n * Data passed to the `onChange` callback when the chat input's value changes.\n */\nexport type EditorInputValueData = {\n value: string;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAmFA;;CAEC"}
|
|
@@ -29,7 +29,8 @@ const renderEditorInput_unstable = (state)=>{
|
|
|
29
29
|
onContentChange: state.handleOnChange,
|
|
30
30
|
onPaste: state.onPaste,
|
|
31
31
|
trimWhitespace: state.trimWhiteSpace,
|
|
32
|
-
defaultValue: state.defaultValue
|
|
32
|
+
defaultValue: state.defaultValue,
|
|
33
|
+
isSentinelNodeEnabled: state.isSentinelNodeEnabled
|
|
33
34
|
}),
|
|
34
35
|
state.history && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacttexteditor.LexicalHistoryPlugin, {})
|
|
35
36
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderEditorInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { EditorInputState, EditorInputSlots } from './EditorInput.types';\nimport {\n LexicalComposer,\n LexicalErrorBoundary,\n LexicalEditorRefPlugin,\n LexicalHistoryPlugin,\n} from '@fluentui-copilot/react-text-editor';\nimport { BasicFunctionalityPlugin } from '@fluentui-copilot/react-chat-input-plugins';\n\n/**\n * Render the final JSX of EditorInput\n */\nexport const renderEditorInput_unstable = (state: EditorInputState) => {\n assertSlots<EditorInputSlots>(state);\n\n return (\n <state.root>\n <LexicalComposer initialConfig={state.lexicalInitialConfig}>\n <state.textPlugin\n contentEditable={<state.input />}\n ErrorBoundary={LexicalErrorBoundary}\n placeholder={state.placeholderValue ? <state.placeholderValue /> : null}\n />\n <>\n <BasicFunctionalityPlugin\n onContentChange={state.handleOnChange}\n onPaste={state.onPaste}\n trimWhitespace={state.trimWhiteSpace}\n defaultValue={state.defaultValue}\n />\n {state.history && <LexicalHistoryPlugin />}\n </>\n <LexicalEditorRefPlugin editorRef={state.editorRef} />\n </LexicalComposer>\n </state.root>\n );\n};\n"],"names":["assertSlots","state","_jsx","root","LexicalComposer","initialConfig","lexicalInitialConfig","textPlugin","contentEditable","ErrorBoundary","LexicalErrorBoundary","placeholder","placeholderValue","BasicFunctionalityPlugin","onContentChange","onPaste","trimWhitespace","defaultValue","editorRef"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["renderEditorInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { EditorInputState, EditorInputSlots } from './EditorInput.types';\nimport {\n LexicalComposer,\n LexicalErrorBoundary,\n LexicalEditorRefPlugin,\n LexicalHistoryPlugin,\n} from '@fluentui-copilot/react-text-editor';\nimport { BasicFunctionalityPlugin } from '@fluentui-copilot/react-chat-input-plugins';\n\n/**\n * Render the final JSX of EditorInput\n */\nexport const renderEditorInput_unstable = (state: EditorInputState) => {\n assertSlots<EditorInputSlots>(state);\n\n return (\n <state.root>\n <LexicalComposer initialConfig={state.lexicalInitialConfig}>\n <state.textPlugin\n contentEditable={<state.input />}\n ErrorBoundary={LexicalErrorBoundary}\n placeholder={state.placeholderValue ? <state.placeholderValue /> : null}\n />\n <>\n <BasicFunctionalityPlugin\n onContentChange={state.handleOnChange}\n onPaste={state.onPaste}\n trimWhitespace={state.trimWhiteSpace}\n defaultValue={state.defaultValue}\n isSentinelNodeEnabled={state.isSentinelNodeEnabled}\n />\n {state.history && <LexicalHistoryPlugin />}\n </>\n <LexicalEditorRefPlugin editorRef={state.editorRef} />\n </LexicalComposer>\n </state.root>\n );\n};\n"],"names":["assertSlots","state","_jsx","root","LexicalComposer","initialConfig","lexicalInitialConfig","textPlugin","contentEditable","ErrorBoundary","LexicalErrorBoundary","placeholder","placeholderValue","BasicFunctionalityPlugin","onContentChange","onPaste","trimWhitespace","trimWhiteSpace","defaultValue","isSentinelNodeEnabled","editorRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBEA;;;eAAAA;;;4BAhBF;iCAE4B;iCAOrB;uCACkC;AAMvCA,MAAAA,6BAA8BC,CAAAA;oCAE9B,EAAAA;sBAEI,GAAAC,IAAAA,eAAA,EAAAD,MAAAE,IAAA,EAACC;kBAAgBC,WAAAA,GAAeJ,IAAAA,gBAAAA,EAAMK,gCAAAA,EAAAA;;;8BACpCJ,IAAAA,eAAA,EAACD,MAAMM,UAAU,EAAA;qCACfC,WAAAA,GAAAA,IAAAA,eAAAA,EAAAA,MAAAA,KAAiB,EAACP,CAAAA;mCAClBQ,qCAAeC;iCACfC,MAAAA,gBAAmBC,GAAAA,WAAgB,GAAAV,IAAAA,eAAA,EAAAD,MAAAW,gBAAUA,EAAAA,CAAAA,KAAAA;;;;mCAE/C,GAAAV,IAAAA,eAAA,EAAAW,+CAAA,EAAA;;;kDAEIC,cAAiBb;gDACjBc,YAASd;mDACTe,MAAAA,qBAAsBC;;yCACtBC,WAAAA,GAAcjB,IAAAA,eAAAA,EAAAA,qCAAkB,EAAA,CAAA;qBAAA;;mDAChCkB,uCAAAA,EAAuBlB;;;;;;gDAIcmB"}
|
|
@@ -15,7 +15,7 @@ const _chatinputplugins = require("@fluentui-copilot/chat-input-plugins");
|
|
|
15
15
|
const _reacttexteditor = require("@fluentui-copilot/react-text-editor");
|
|
16
16
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
17
17
|
const useEditorInput_unstable = (props, ref)=>{
|
|
18
|
-
const { onChange, onPaste, trimWhiteSpace = false, textPlugin = _reacttexteditor.LexicalPlainTextPlugin, history = true, editorRef: userEditorRef, customTheme } = props;
|
|
18
|
+
const { onChange, onPaste, trimWhiteSpace = false, textPlugin = _reacttexteditor.LexicalPlainTextPlugin, history = true, editorRef: userEditorRef, customTheme, isSentinelNodeEnabled = true } = props;
|
|
19
19
|
const { root, primary } = (0, _reactcomponents.getPartitionedNativeProps)({
|
|
20
20
|
primarySlotTagName: 'span',
|
|
21
21
|
props,
|
|
@@ -115,9 +115,9 @@ const useEditorInput_unstable = (props, ref)=>{
|
|
|
115
115
|
role: 'textbox',
|
|
116
116
|
contentEditable: !disabled,
|
|
117
117
|
'aria-readonly': disabled ? true : undefined,
|
|
118
|
-
tabIndex: disabled ? -1 : 0,
|
|
119
118
|
disabled,
|
|
120
119
|
suppressContentEditableWarning: true,
|
|
120
|
+
tabIndex: disabled ? undefined : 0,
|
|
121
121
|
...primary,
|
|
122
122
|
'aria-describedby': primary['aria-describedby'] ? `${primary['aria-describedby']} ${placeholderId}` : placeholderId
|
|
123
123
|
},
|
|
@@ -138,6 +138,7 @@ const useEditorInput_unstable = (props, ref)=>{
|
|
|
138
138
|
handleOnChange,
|
|
139
139
|
defaultValue: defaultString,
|
|
140
140
|
trimWhiteSpace,
|
|
141
|
-
history
|
|
141
|
+
history,
|
|
142
|
+
isSentinelNodeEnabled
|
|
142
143
|
};
|
|
143
144
|
}; //# sourceMappingURL=useEditorInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useEditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n slot,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport type { EditorInputProps, EditorInputState } from './EditorInput.types';\nimport { SentinelNode } from '@fluentui-copilot/chat-input-plugins';\nimport type { LexicalEditor } from '@fluentui-copilot/react-text-editor';\nimport { LexicalPlainTextPlugin, mergeRegister } from '@fluentui-copilot/react-text-editor';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render EditorInput.\n *\n * The returned state can be modified with hooks such as useEditorInputStyles_unstable,\n * before being passed to renderEditorInput_unstable.\n *\n * @param props - props from this instance of EditorInput\n * @param ref - reference to root HTMLElement of EditorInput\n */\nexport const useEditorInput_unstable = (props: EditorInputProps, ref: React.Ref<HTMLSpanElement>): EditorInputState => {\n const {\n onChange,\n onPaste,\n trimWhiteSpace = false,\n textPlugin = LexicalPlainTextPlugin,\n history = true,\n editorRef: userEditorRef,\n customTheme,\n } = props;\n const { root, primary } = getPartitionedNativeProps({\n primarySlotTagName: 'span',\n props,\n excludedPropNames: ['onChange', 'onPaste', 'defaultValue'],\n });\n\n const editorRef = useMergedRefs(React.useRef<LexicalEditor>(null), userEditorRef);\n // The disabled state can also be changed by lexical (e.g. by a custom plugin) so\n // we use `useControllableState` to coordinate\n const [disabled, setDisabled] = useControllableState({\n state: props.disabled,\n initialState: false,\n });\n\n const customNodes = props.customNodes ? [...props.customNodes, SentinelNode] : [SentinelNode];\n\n const spanRef = React.useCallback(\n span => {\n // Register the `input` span with lexical\n editorRef.current?.setRootElement(span);\n },\n [editorRef],\n );\n\n // Update lexical when disabled changes\n useIsomorphicLayoutEffect(() => {\n if (editorRef.current) {\n editorRef.current?.setEditable(!disabled);\n }\n }, [disabled]);\n\n useIsomorphicLayoutEffect(() => {\n if (editorRef.current) {\n return mergeRegister(\n editorRef.current.registerEditableListener(isEditable => {\n setDisabled(!isEditable);\n }),\n editorRef.current?.registerRootListener(root => {\n if (!root) {\n return;\n }\n\n // Remove lexical's inline style so we can apply our own\n // Lexical needs the whitespace style to be either `pre` or `pre-wrap` to work correctly\n root.style.whiteSpace = '';\n }),\n );\n }\n }, [editorRef]);\n\n const handleOnChange = React.useCallback(\n (newValue: string) => {\n onChange?.({}, { value: newValue });\n },\n [onChange],\n );\n\n const [defaultString, defaultValueFunction] = (() => {\n if (typeof props.defaultValue === 'function') {\n return [undefined, props.defaultValue];\n }\n return [props.defaultValue, undefined];\n })();\n\n const placeholderValue = slot.optional(props.placeholderValue, { elementType: 'span' });\n const placeholderId = useId('chat-input-placeholder', placeholderValue?.id);\n if (placeholderValue) {\n placeholderValue.id = placeholderId;\n }\n\n return {\n components: {\n root: 'span',\n input: 'span',\n placeholderValue: 'span',\n },\n root: slot.always(props.root, { defaultProps: { ...root }, elementType: 'span' }),\n input: slot.always(props.input, {\n defaultProps: {\n ref: useMergedRefs(ref, spanRef),\n role: 'textbox',\n contentEditable: !disabled,\n 'aria-readonly': disabled ? true : undefined,\n tabIndex: disabled ?
|
|
1
|
+
{"version":3,"sources":["useEditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n slot,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport type { EditorInputProps, EditorInputState } from './EditorInput.types';\nimport { SentinelNode } from '@fluentui-copilot/chat-input-plugins';\nimport type { LexicalEditor } from '@fluentui-copilot/react-text-editor';\nimport { LexicalPlainTextPlugin, mergeRegister } from '@fluentui-copilot/react-text-editor';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render EditorInput.\n *\n * The returned state can be modified with hooks such as useEditorInputStyles_unstable,\n * before being passed to renderEditorInput_unstable.\n *\n * @param props - props from this instance of EditorInput\n * @param ref - reference to root HTMLElement of EditorInput\n */\nexport const useEditorInput_unstable = (props: EditorInputProps, ref: React.Ref<HTMLSpanElement>): EditorInputState => {\n const {\n onChange,\n onPaste,\n trimWhiteSpace = false,\n textPlugin = LexicalPlainTextPlugin,\n history = true,\n editorRef: userEditorRef,\n customTheme,\n isSentinelNodeEnabled = true,\n } = props;\n const { root, primary } = getPartitionedNativeProps({\n primarySlotTagName: 'span',\n props,\n excludedPropNames: ['onChange', 'onPaste', 'defaultValue'],\n });\n\n const editorRef = useMergedRefs(React.useRef<LexicalEditor>(null), userEditorRef);\n // The disabled state can also be changed by lexical (e.g. by a custom plugin) so\n // we use `useControllableState` to coordinate\n const [disabled, setDisabled] = useControllableState({\n state: props.disabled,\n initialState: false,\n });\n\n const customNodes = props.customNodes ? [...props.customNodes, SentinelNode] : [SentinelNode];\n\n const spanRef = React.useCallback(\n span => {\n // Register the `input` span with lexical\n editorRef.current?.setRootElement(span);\n },\n [editorRef],\n );\n\n // Update lexical when disabled changes\n useIsomorphicLayoutEffect(() => {\n if (editorRef.current) {\n editorRef.current?.setEditable(!disabled);\n }\n }, [disabled]);\n\n useIsomorphicLayoutEffect(() => {\n if (editorRef.current) {\n return mergeRegister(\n editorRef.current.registerEditableListener(isEditable => {\n setDisabled(!isEditable);\n }),\n editorRef.current?.registerRootListener(root => {\n if (!root) {\n return;\n }\n\n // Remove lexical's inline style so we can apply our own\n // Lexical needs the whitespace style to be either `pre` or `pre-wrap` to work correctly\n root.style.whiteSpace = '';\n }),\n );\n }\n }, [editorRef]);\n\n const handleOnChange = React.useCallback(\n (newValue: string) => {\n onChange?.({}, { value: newValue });\n },\n [onChange],\n );\n\n const [defaultString, defaultValueFunction] = (() => {\n if (typeof props.defaultValue === 'function') {\n return [undefined, props.defaultValue];\n }\n return [props.defaultValue, undefined];\n })();\n\n const placeholderValue = slot.optional(props.placeholderValue, { elementType: 'span' });\n const placeholderId = useId('chat-input-placeholder', placeholderValue?.id);\n if (placeholderValue) {\n placeholderValue.id = placeholderId;\n }\n\n return {\n components: {\n root: 'span',\n input: 'span',\n placeholderValue: 'span',\n },\n root: slot.always(props.root, { defaultProps: { ...root }, elementType: 'span' }),\n input: slot.always(props.input, {\n defaultProps: {\n ref: useMergedRefs(ref, spanRef),\n role: 'textbox',\n contentEditable: !disabled,\n 'aria-readonly': disabled ? true : undefined,\n disabled,\n suppressContentEditableWarning: true,\n tabIndex: disabled ? undefined : 0,\n ...primary,\n 'aria-describedby': primary['aria-describedby']\n ? `${primary['aria-describedby']} ${placeholderId}`\n : placeholderId,\n },\n elementType: 'span',\n }),\n placeholderValue,\n lexicalInitialConfig: {\n namespace: 'fai-EditorInput',\n onError: console.error,\n nodes: customNodes,\n editorState: defaultValueFunction,\n theme: customTheme,\n },\n editorRef,\n disabled,\n textPlugin,\n onPaste,\n handleOnChange,\n defaultValue: defaultString,\n trimWhiteSpace,\n history,\n isSentinelNodeEnabled,\n };\n};\n"],"names":["onChange","trimWhiteSpace","primarySlotTagName","props","excludedPropNames","LexicalPlainTextPlugin","userEditorRef","isSentinelNodeEnabled","root","primary","disabled","customNodes","SentinelNode","setDisabled","useControllableState","state","spanRef","React","editorRef","current","useCallback","span","_editorRef_current","useIsomorphicLayoutEffect","setRootElement","isEditable","registerRootListener","style","whiteSpace","handleOnChange","newValue","defaultString","defaultValueFunction","undefined","defaultValue","placeholderId","useId","placeholderValue","id","components","elementType","input","ref","useMergedRefs","slot","defaultProps","tabIndex","role","suppressContentEditableWarning","customTheme","nodes","textPlugin"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-editor-input",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.3",
|
|
4
4
|
"description": "a base rich editor input.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/chat-input-plugins": "^0.4.
|
|
16
|
-
"@fluentui-copilot/react-chat-input-plugins": "^0.4.
|
|
15
|
+
"@fluentui-copilot/chat-input-plugins": "^0.4.2",
|
|
16
|
+
"@fluentui-copilot/react-chat-input-plugins": "^0.4.2",
|
|
17
17
|
"@fluentui-copilot/react-text-editor": "^0.4.1",
|
|
18
18
|
"@swc/helpers": "^0.5.1"
|
|
19
19
|
},
|