@fluentui-copilot/react-editor-input 0.4.0 → 0.4.2
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 +22 -1
- package/CHANGELOG.md +12 -2
- package/lib/components/EditorInput/useEditorInput.js +1 -1
- package/lib/components/EditorInput/useEditorInput.js.map +1 -1
- package/lib-commonjs/components/EditorInput/useEditorInput.js +1 -1
- package/lib-commonjs/components/EditorInput/useEditorInput.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,28 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-editor-input",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 29 Jan 2025 01:36:32 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-editor-input_v0.4.2",
|
|
7
|
+
"version": "0.4.2",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "owcampbe@microsoft.com",
|
|
12
|
+
"package": "@fluentui-copilot/react-editor-input",
|
|
13
|
+
"commit": "d91d3cd543fc098e226999505bea669836a5083c",
|
|
14
|
+
"comment": "fix: Add tabindex=0 whe not disabled."
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "owcampbe@microsoft.com",
|
|
18
|
+
"package": "@fluentui-copilot/react-editor-input",
|
|
19
|
+
"commit": "e4a98db68244e4fadfb684f7ae500bfc677ed880",
|
|
20
|
+
"comment": "fix: Remove tabIndex attribute causing focus issues when disabled."
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Thu, 09 Jan 2025 01:15:37 GMT",
|
|
6
27
|
"tag": "@fluentui-copilot/react-editor-input_v0.4.0",
|
|
7
28
|
"version": "0.4.0",
|
|
8
29
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
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 Wed, 29 Jan 2025 01:36:32 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.4.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-editor-input_v0.4.2)
|
|
8
|
+
|
|
9
|
+
Wed, 29 Jan 2025 01:36:32 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-editor-input_v0.4.0..@fluentui-copilot/react-editor-input_v0.4.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: Add tabindex=0 whe not disabled. ([PR #2583](https://github.com/microsoft/fluentai/pull/2583) by owcampbe@microsoft.com)
|
|
15
|
+
- fix: Remove tabIndex attribute causing focus issues when disabled. ([PR #2572](https://github.com/microsoft/fluentai/pull/2572) by owcampbe@microsoft.com)
|
|
16
|
+
|
|
7
17
|
## [0.4.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-editor-input_v0.4.0)
|
|
8
18
|
|
|
9
|
-
Thu, 09 Jan 2025 01:
|
|
19
|
+
Thu, 09 Jan 2025 01:15:37 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-editor-input_v0.3.4..@fluentui-copilot/react-editor-input_v0.4.0)
|
|
11
21
|
|
|
12
22
|
### Patches
|
|
@@ -102,9 +102,9 @@ export const useEditorInput_unstable = (props, ref) => {
|
|
|
102
102
|
role: 'textbox',
|
|
103
103
|
contentEditable: !disabled,
|
|
104
104
|
'aria-readonly': disabled ? true : undefined,
|
|
105
|
-
tabIndex: disabled ? -1 : 0,
|
|
106
105
|
disabled,
|
|
107
106
|
suppressContentEditableWarning: true,
|
|
107
|
+
tabIndex: disabled ? undefined : 0,
|
|
108
108
|
...primary,
|
|
109
109
|
'aria-describedby': primary['aria-describedby'] ? `${primary['aria-describedby']} ${placeholderId}` : placeholderId
|
|
110
110
|
},
|
|
@@ -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 } = 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 };\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","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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"}
|
|
@@ -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
|
},
|
|
@@ -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 } = 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 };\n};\n"],"names":["onChange","trimWhiteSpace","primarySlotTagName","props","excludedPropNames","LexicalPlainTextPlugin","userEditorRef","root","primary","getPartitionedNativeProps","setDisabled","disabled","customNodes","React","useRef","SentinelNode","initialState","spanRef","editorRef","_editorRef_current","current","setRootElement","span","useIsomorphicLayoutEffect","setEditable","mergeRegister","registerEditableListener","registerRootListener","whiteSpace","value","handleOnChange","defaultString","defaultValueFunction","defaultValue","slot","optional","placeholderValue","undefined","useId","id","placeholderId","input","defaultProps","elementType","role","ref","suppressContentEditableWarning","onError"],"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.2",
|
|
4
4
|
"description": "a base rich editor input.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,9 +12,9 @@
|
|
|
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.
|
|
17
|
-
"@fluentui-copilot/react-text-editor": "^0.4.
|
|
15
|
+
"@fluentui-copilot/chat-input-plugins": "^0.4.1",
|
|
16
|
+
"@fluentui-copilot/react-chat-input-plugins": "^0.4.1",
|
|
17
|
+
"@fluentui-copilot/react-text-editor": "^0.4.1",
|
|
18
18
|
"@swc/helpers": "^0.5.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|