@fluentui-copilot/react-editor-input 0.1.4 → 0.2.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 +65 -1
- package/CHANGELOG.md +26 -2
- package/dist/index.d.ts +14 -7
- package/lib/components/EditorInput/EditorInput.js +3 -2
- package/lib/components/EditorInput/EditorInput.js.map +1 -1
- package/lib/components/EditorInput/EditorInput.types.js +1 -3
- package/lib/components/EditorInput/EditorInput.types.js.map +1 -1
- package/lib/components/EditorInput/index.js +1 -0
- package/lib/components/EditorInput/index.js.map +1 -1
- package/lib/components/EditorInput/renderEditorInput.js +10 -12
- package/lib/components/EditorInput/renderEditorInput.js.map +1 -1
- package/lib/components/EditorInput/useEditorInput.js +18 -58
- package/lib/components/EditorInput/useEditorInput.js.map +1 -1
- package/lib/components/EditorInput/useEditorInputContextValues.js +16 -0
- package/lib/components/EditorInput/useEditorInputContextValues.js.map +1 -0
- package/lib/components/EditorInput/useEditorInputStyles.styles.js +13 -14
- package/lib/components/EditorInput/useEditorInputStyles.styles.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utilities/useLexicalContentEditable.js +68 -0
- package/lib/utilities/useLexicalContentEditable.js.map +1 -0
- package/lib/utilities/useLexicalEditor.js +75 -0
- package/lib/utilities/useLexicalEditor.js.map +1 -0
- package/lib-commonjs/components/EditorInput/EditorInput.js +3 -1
- package/lib-commonjs/components/EditorInput/EditorInput.js.map +1 -1
- package/lib-commonjs/components/EditorInput/EditorInput.types.js +1 -3
- package/lib-commonjs/components/EditorInput/EditorInput.types.js.map +1 -1
- package/lib-commonjs/components/EditorInput/index.js +1 -0
- package/lib-commonjs/components/EditorInput/index.js.map +1 -1
- package/lib-commonjs/components/EditorInput/renderEditorInput.js +10 -11
- package/lib-commonjs/components/EditorInput/renderEditorInput.js.map +1 -1
- package/lib-commonjs/components/EditorInput/useEditorInput.js +10 -72
- package/lib-commonjs/components/EditorInput/useEditorInput.js.map +1 -1
- package/lib-commonjs/components/EditorInput/useEditorInputContextValues.js +27 -0
- package/lib-commonjs/components/EditorInput/useEditorInputContextValues.js.map +1 -0
- package/lib-commonjs/components/EditorInput/useEditorInputStyles.styles.js +19 -24
- package/lib-commonjs/components/EditorInput/useEditorInputStyles.styles.js.map +1 -1
- package/lib-commonjs/index.js +3 -0
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utilities/useLexicalContentEditable.js +87 -0
- package/lib-commonjs/utilities/useLexicalContentEditable.js.map +1 -0
- package/lib-commonjs/utilities/useLexicalEditor.js +74 -0
- package/lib-commonjs/utilities/useLexicalEditor.js.map +1 -0
- package/package.json +7 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,71 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-editor-input",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Wed,
|
|
5
|
+
"date": "Wed, 04 Sep 2024 18:11:23 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-editor-input_v0.2.0",
|
|
7
|
+
"version": "0.2.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "jiangemma@microsoft.com",
|
|
12
|
+
"package": "@fluentui-copilot/react-editor-input",
|
|
13
|
+
"commit": "d77547a525f293d070289dceea4c1bebc00532d1",
|
|
14
|
+
"comment": "fix: use correct colors for placeholder text in high contrast mode"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"minor": [
|
|
18
|
+
{
|
|
19
|
+
"author": "owcampbe@microsoft.com",
|
|
20
|
+
"package": "@fluentui-copilot/react-editor-input",
|
|
21
|
+
"commit": "04f44b6099a39b821396907f0397267c4f5f0f53",
|
|
22
|
+
"comment": "feat: Initialize Lexical internally."
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"date": "Wed, 21 Aug 2024 00:26:05 GMT",
|
|
29
|
+
"tag": "@fluentui-copilot/react-editor-input_v0.1.5",
|
|
30
|
+
"version": "0.1.5",
|
|
31
|
+
"comments": {
|
|
32
|
+
"patch": [
|
|
33
|
+
{
|
|
34
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
35
|
+
"package": "@fluentui-copilot/react-editor-input",
|
|
36
|
+
"commit": "907c63c4da894b41cad4601b30e0df6d9f269056",
|
|
37
|
+
"comment": "chore: Bumping versions of @fluentui/* and @griffel/* packages to latest (corresponding to version 9.54.8 of @fluentui/react-components)."
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"author": "ololubek@microsoft.com",
|
|
41
|
+
"package": "@fluentui-copilot/react-editor-input",
|
|
42
|
+
"commit": "0a6327b6b174fc99abed7fa70ed0542e698bcf40",
|
|
43
|
+
"comment": "chore: bump react-components version to 9.54.10."
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
47
|
+
"package": "@fluentui-copilot/react-editor-input",
|
|
48
|
+
"commit": "6ce23774f5f2055977299510e8df454d86a1a313",
|
|
49
|
+
"comment": "chore: Removing shorthands' usage now that griffel supports them."
|
|
50
|
+
}
|
|
51
|
+
],
|
|
52
|
+
"none": [
|
|
53
|
+
{
|
|
54
|
+
"author": "tristan.watanabe@gmail.com",
|
|
55
|
+
"package": "@fluentui-copilot/react-editor-input",
|
|
56
|
+
"commit": "85fc7f2580c8bad8ea04e2c73960204b4ca1c116",
|
|
57
|
+
"comment": "chore: update api.md file."
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"author": "owcampbe@microsoft.com",
|
|
61
|
+
"package": "@fluentui-copilot/react-editor-input",
|
|
62
|
+
"commit": "27762790e2d38ca7090eb13352b2b9fe2d4788a6",
|
|
63
|
+
"comment": "chore: Applying package updates."
|
|
64
|
+
}
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"date": "Thu, 15 Aug 2024 00:14:10 GMT",
|
|
6
70
|
"tag": "@fluentui-copilot/react-editor-input_v0.1.4",
|
|
7
71
|
"version": "0.1.4",
|
|
8
72
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,36 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-editor-input
|
|
2
2
|
|
|
3
|
-
This log was last generated on Wed,
|
|
3
|
+
This log was last generated on Wed, 04 Sep 2024 18:11:23 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.2.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-editor-input_v0.2.0)
|
|
8
|
+
|
|
9
|
+
Wed, 04 Sep 2024 18:11:23 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-editor-input_v0.1.5..@fluentui-copilot/react-editor-input_v0.2.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: Initialize Lexical internally. ([PR #2052](https://github.com/microsoft/fluentai/pull/2052) by owcampbe@microsoft.com)
|
|
15
|
+
|
|
16
|
+
### Patches
|
|
17
|
+
|
|
18
|
+
- fix: use correct colors for placeholder text in high contrast mode ([PR #2080](https://github.com/microsoft/fluentai/pull/2080) by jiangemma@microsoft.com)
|
|
19
|
+
|
|
20
|
+
## [0.1.5](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-editor-input_v0.1.5)
|
|
21
|
+
|
|
22
|
+
Wed, 21 Aug 2024 00:26:05 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-editor-input_v0.1.4..@fluentui-copilot/react-editor-input_v0.1.5)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- chore: Bumping versions of @fluentui/* and @griffel/* packages to latest (corresponding to version 9.54.8 of @fluentui/react-components). ([PR #1993](https://github.com/microsoft/fluentai/pull/1993) by Humberto.Morimoto@microsoft.com)
|
|
28
|
+
- chore: bump react-components version to 9.54.10. ([PR #2018](https://github.com/microsoft/fluentai/pull/2018) by ololubek@microsoft.com)
|
|
29
|
+
- chore: Removing shorthands' usage now that griffel supports them. ([PR #1994](https://github.com/microsoft/fluentai/pull/1994) by Humberto.Morimoto@microsoft.com)
|
|
30
|
+
|
|
7
31
|
## [0.1.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-editor-input_v0.1.4)
|
|
8
32
|
|
|
9
|
-
|
|
33
|
+
Thu, 15 Aug 2024 00:14:10 GMT
|
|
10
34
|
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-editor-input_v0.1.1..@fluentui-copilot/react-editor-input_v0.1.4)
|
|
11
35
|
|
|
12
36
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -3,9 +3,10 @@
|
|
|
3
3
|
import type { ComponentProps } from '@fluentui/react-components';
|
|
4
4
|
import type { ComponentState } from '@fluentui/react-components';
|
|
5
5
|
import type { ForwardRefComponent } from '@fluentui/react-components';
|
|
6
|
-
import { InitialConfigType } from '@
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
6
|
+
import type { InitialConfigType } from '@fluentui-copilot/react-text-editor';
|
|
7
|
+
import type { LexicalComposerContextWithEditor } from '@fluentui-copilot/react-text-editor';
|
|
8
|
+
import type { LexicalEditor } from '@fluentui-copilot/react-text-editor';
|
|
9
|
+
import type { LexicalPlainTextPlugin } from '@fluentui-copilot/react-text-editor';
|
|
9
10
|
import * as React_2 from 'react';
|
|
10
11
|
import type { Slot } from '@fluentui/react-components';
|
|
11
12
|
import type { SlotClassNames } from '@fluentui/react-components';
|
|
@@ -14,6 +15,10 @@ export declare const EditorInput: ForwardRefComponent<EditorInputProps>;
|
|
|
14
15
|
|
|
15
16
|
export declare const editorInputClassNames: SlotClassNames<EditorInputSlots>;
|
|
16
17
|
|
|
18
|
+
export declare type EditorInputContextValues = {
|
|
19
|
+
lexicalComposer: LexicalComposerContextWithEditor;
|
|
20
|
+
};
|
|
21
|
+
|
|
17
22
|
/**
|
|
18
23
|
* EditorInput Props
|
|
19
24
|
*/
|
|
@@ -46,7 +51,7 @@ export declare type EditorInputProps = Omit<ComponentProps<Partial<EditorInputSl
|
|
|
46
51
|
* The plugin which is in charge of initializing Lexical and is given the `input` and `placeholder` slots
|
|
47
52
|
* @default LexicalPlainTextPlugin
|
|
48
53
|
*/
|
|
49
|
-
textPlugin?: typeof
|
|
54
|
+
textPlugin?: typeof LexicalPlainTextPlugin;
|
|
50
55
|
/**
|
|
51
56
|
* Controls whether history is tracked to provide undo and redo functionality
|
|
52
57
|
* @default true
|
|
@@ -64,10 +69,10 @@ export declare type EditorInputSlots = {
|
|
|
64
69
|
/**
|
|
65
70
|
* State used in rendering EditorInput
|
|
66
71
|
*/
|
|
67
|
-
export declare type EditorInputState = ComponentState<EditorInputSlots> & Required<Pick<EditorInputProps, 'disabled' | 'textPlugin' | 'history' | 'trimWhiteSpace'
|
|
72
|
+
export declare type EditorInputState = ComponentState<EditorInputSlots> & Required<Pick<EditorInputProps, 'disabled' | 'textPlugin' | 'history' | 'trimWhiteSpace'>> & Partial<Pick<EditorInputProps, 'onPaste' | 'editorRef'>> & {
|
|
68
73
|
lexicalInitialConfig: InitialConfigType;
|
|
69
|
-
defaultValue?: string;
|
|
70
74
|
handleOnChange: (value: string) => void;
|
|
75
|
+
lexicalEditor: LexicalEditor;
|
|
71
76
|
};
|
|
72
77
|
|
|
73
78
|
/**
|
|
@@ -80,7 +85,7 @@ export declare type EditorInputValueData = {
|
|
|
80
85
|
/**
|
|
81
86
|
* Render the final JSX of EditorInput
|
|
82
87
|
*/
|
|
83
|
-
export declare const renderEditorInput_unstable: (state: EditorInputState) => JSX.Element;
|
|
88
|
+
export declare const renderEditorInput_unstable: (state: EditorInputState, contextValues: EditorInputContextValues) => JSX.Element;
|
|
84
89
|
|
|
85
90
|
/**
|
|
86
91
|
* Create the state required to render EditorInput.
|
|
@@ -93,6 +98,8 @@ export declare const renderEditorInput_unstable: (state: EditorInputState) => JS
|
|
|
93
98
|
*/
|
|
94
99
|
export declare const useEditorInput_unstable: (props: EditorInputProps, ref: React_2.Ref<HTMLSpanElement>) => EditorInputState;
|
|
95
100
|
|
|
101
|
+
export declare function useEditorInputContextValues(state: EditorInputState): EditorInputContextValues;
|
|
102
|
+
|
|
96
103
|
/**
|
|
97
104
|
* Apply styling to the EditorInput slots based on the state
|
|
98
105
|
*/
|
|
@@ -2,11 +2,12 @@ import * as React from 'react';
|
|
|
2
2
|
import { useEditorInput_unstable } from './useEditorInput';
|
|
3
3
|
import { renderEditorInput_unstable } from './renderEditorInput';
|
|
4
4
|
import { useEditorInputStyles_unstable } from './useEditorInputStyles.styles';
|
|
5
|
-
|
|
5
|
+
import { useEditorInputContextValues } from './useEditorInputContextValues';
|
|
6
6
|
export const EditorInput = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
7
7
|
const state = useEditorInput_unstable(props, ref);
|
|
8
|
+
const contextValues = useEditorInputContextValues(state);
|
|
8
9
|
useEditorInputStyles_unstable(state);
|
|
9
|
-
return renderEditorInput_unstable(state);
|
|
10
|
+
return renderEditorInput_unstable(state, contextValues);
|
|
10
11
|
});
|
|
11
12
|
EditorInput.displayName = 'EditorInput';
|
|
12
13
|
//# sourceMappingURL=EditorInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["EditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEditorInput_unstable } from './useEditorInput';\nimport { renderEditorInput_unstable } from './renderEditorInput';\nimport { useEditorInputStyles_unstable } from './useEditorInputStyles.styles';\nimport type { EditorInputProps } from './EditorInput.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\
|
|
1
|
+
{"version":3,"sources":["EditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEditorInput_unstable } from './useEditorInput';\nimport { renderEditorInput_unstable } from './renderEditorInput';\nimport { useEditorInputStyles_unstable } from './useEditorInputStyles.styles';\nimport type { EditorInputProps } from './EditorInput.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useEditorInputContextValues } from './useEditorInputContextValues';\n\nexport const EditorInput: ForwardRefComponent<EditorInputProps> = React.forwardRef((props, ref) => {\n const state = useEditorInput_unstable(props, ref);\n const contextValues = useEditorInputContextValues(state);\n\n useEditorInputStyles_unstable(state);\n\n return renderEditorInput_unstable(state, contextValues);\n});\n\nEditorInput.displayName = 'EditorInput';\n"],"names":["React","useEditorInput_unstable","renderEditorInput_unstable","useEditorInputStyles_unstable","useEditorInputContextValues","EditorInput","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,gCAAgC;AAE5E,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAC7C,MAAME,gBAAgBN,4BAA4BK;IAElDN,8BAA8BM;IAE9B,OAAOP,2BAA2BO,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["EditorInput.types.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"sources":["EditorInput.types.ts"],"sourcesContent":["import type {\n InitialConfigType,\n LexicalComposerContextWithEditor,\n LexicalEditor,\n LexicalPlainTextPlugin,\n} 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/**\n * State used in rendering EditorInput\n */\nexport type EditorInputState = ComponentState<EditorInputSlots> &\n Required<Pick<EditorInputProps, 'disabled' | 'textPlugin' | 'history' | 'trimWhiteSpace'>> &\n Partial<Pick<EditorInputProps, 'onPaste' | 'editorRef'>> & {\n lexicalInitialConfig: InitialConfigType;\n handleOnChange: (value: string) => void;\n lexicalEditor: LexicalEditor;\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\nexport type EditorInputContextValues = {\n lexicalComposer: LexicalComposerContextWithEditor;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA8EA,WAEE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './EditorInput';\nexport * from './EditorInput.types';\nexport * from './renderEditorInput';\nexport * from './useEditorInput';\nexport * from './useEditorInputStyles.styles';\n"],"names":[],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './EditorInput';\nexport * from './EditorInput.types';\nexport * from './renderEditorInput';\nexport * from './useEditorInput';\nexport * from './useEditorInputStyles.styles';\nexport * from './useEditorInputContextValues';\n"],"names":[],"rangeMappings":";;;;;","mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,gCAAgC;AAC9C,cAAc,gCAAgC"}
|
|
@@ -1,28 +1,26 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
2
|
import { assertSlots } from '@fluentui/react-components';
|
|
3
|
-
import {
|
|
3
|
+
import { LexicalErrorBoundary, LexicalEditorRefPlugin, LexicalHistoryPlugin, LexicalComposerContext } from '@fluentui-copilot/react-text-editor';
|
|
4
4
|
import { BasicFunctionalityPlugin } from '@fluentui-copilot/react-chat-input-plugins';
|
|
5
5
|
/**
|
|
6
6
|
* Render the final JSX of EditorInput
|
|
7
7
|
*/
|
|
8
|
-
export const renderEditorInput_unstable = state => {
|
|
8
|
+
export const renderEditorInput_unstable = (state, contextValues) => {
|
|
9
9
|
assertSlots(state);
|
|
10
10
|
return /*#__PURE__*/_jsx(state.root, {
|
|
11
|
-
children: /*#__PURE__*/_jsxs(
|
|
12
|
-
|
|
11
|
+
children: /*#__PURE__*/_jsxs(LexicalComposerContext.Provider, {
|
|
12
|
+
value: contextValues.lexicalComposer,
|
|
13
13
|
children: [/*#__PURE__*/_jsx(state.textPlugin, {
|
|
14
14
|
contentEditable: /*#__PURE__*/_jsx(state.input, {}),
|
|
15
|
-
ErrorBoundary: LexicalErrorBoundary
|
|
16
|
-
placeholder: state.placeholderValue ? /*#__PURE__*/_jsx(state.placeholderValue, {}) : null
|
|
15
|
+
ErrorBoundary: LexicalErrorBoundary
|
|
17
16
|
}), /*#__PURE__*/_jsxs(_Fragment, {
|
|
18
|
-
children: [/*#__PURE__*/_jsx(BasicFunctionalityPlugin, {
|
|
17
|
+
children: [state.placeholderValue ? /*#__PURE__*/_jsx(state.placeholderValue, {}) : null, /*#__PURE__*/_jsx(BasicFunctionalityPlugin, {
|
|
19
18
|
onContentChange: state.handleOnChange,
|
|
20
19
|
onPaste: state.onPaste,
|
|
21
|
-
trimWhitespace: state.trimWhiteSpace
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
editorRef: state.editorRef
|
|
20
|
+
trimWhitespace: state.trimWhiteSpace
|
|
21
|
+
}), state.history && /*#__PURE__*/_jsx(LexicalHistoryPlugin, {}), state.editorRef && /*#__PURE__*/_jsx(LexicalEditorRefPlugin, {
|
|
22
|
+
editorRef: state.editorRef
|
|
23
|
+
})]
|
|
26
24
|
})]
|
|
27
25
|
})
|
|
28
26
|
});
|
|
@@ -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
|
|
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, EditorInputContextValues } from './EditorInput.types';\nimport {\n LexicalErrorBoundary,\n LexicalEditorRefPlugin,\n LexicalHistoryPlugin,\n LexicalComposerContext,\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, contextValues: EditorInputContextValues) => {\n assertSlots<EditorInputSlots>(state);\n\n return (\n <state.root>\n <LexicalComposerContext.Provider value={contextValues.lexicalComposer}>\n <state.textPlugin contentEditable={<state.input />} ErrorBoundary={LexicalErrorBoundary} />\n <>\n {state.placeholderValue ? <state.placeholderValue /> : null}\n <BasicFunctionalityPlugin\n onContentChange={state.handleOnChange}\n onPaste={state.onPaste}\n trimWhitespace={state.trimWhiteSpace}\n />\n {state.history && <LexicalHistoryPlugin />}\n {state.editorRef && <LexicalEditorRefPlugin editorRef={state.editorRef} />}\n </>\n </LexicalComposerContext.Provider>\n </state.root>\n );\n};\n"],"names":["assertSlots","LexicalErrorBoundary","LexicalEditorRefPlugin","LexicalHistoryPlugin","LexicalComposerContext","BasicFunctionalityPlugin","renderEditorInput_unstable","state","contextValues","root","Provider","value","lexicalComposer","textPlugin","contentEditable","input","ErrorBoundary","placeholderValue","onContentChange","handleOnChange","onPaste","trimWhitespace","trimWhiteSpace","history","editorRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAEzD,SACEC,oBAAoB,EACpBC,sBAAsB,EACtBC,oBAAoB,EACpBC,sBAAsB,QACjB,sCAAsC;AAC7C,SAASC,wBAAwB,QAAQ,6CAA6C;AAEtF;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,OAAyBC;IAClER,YAA8BO;IAE9B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,MAACL,uBAAuBM,QAAQ;YAACC,OAAOH,cAAcI,eAAe;;8BACnE,KAACL,MAAMM,UAAU;oBAACC,+BAAiB,KAACP,MAAMQ,KAAK;oBAAKC,eAAef;;8BACnE;;wBACGM,MAAMU,gBAAgB,iBAAG,KAACV,MAAMU,gBAAgB,QAAM;sCACvD,KAACZ;4BACCa,iBAAiBX,MAAMY,cAAc;4BACrCC,SAASb,MAAMa,OAAO;4BACtBC,gBAAgBd,MAAMe,cAAc;;wBAErCf,MAAMgB,OAAO,kBAAI,KAACpB;wBAClBI,MAAMiB,SAAS,kBAAI,KAACtB;4BAAuBsB,WAAWjB,MAAMiB,SAAS;;;;;;;AAKhF,EAAE"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { getPartitionedNativeProps, slot, useId,
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { useControllableState } from '@fluentui/react-utilities';
|
|
2
|
+
import { getPartitionedNativeProps, slot, useId, useMergedRefs } from '@fluentui/react-components';
|
|
3
|
+
import { LexicalPlainTextPlugin } from '@fluentui-copilot/react-text-editor';
|
|
4
|
+
import { useLexicalContentEditable } from '../../utilities/useLexicalContentEditable';
|
|
6
5
|
/**
|
|
7
6
|
* Create the state required to render EditorInput.
|
|
8
7
|
*
|
|
@@ -19,7 +18,7 @@ export const useEditorInput_unstable = (props, ref) => {
|
|
|
19
18
|
trimWhiteSpace = false,
|
|
20
19
|
textPlugin = LexicalPlainTextPlugin,
|
|
21
20
|
history = true,
|
|
22
|
-
editorRef
|
|
21
|
+
editorRef
|
|
23
22
|
} = props;
|
|
24
23
|
const {
|
|
25
24
|
root,
|
|
@@ -29,60 +28,26 @@ export const useEditorInput_unstable = (props, ref) => {
|
|
|
29
28
|
props,
|
|
30
29
|
excludedPropNames: ['onChange', 'onPaste', 'defaultValue']
|
|
31
30
|
});
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
});
|
|
39
|
-
const customNodes = props.customNodes ? [...props.customNodes, SentinelNode] : [SentinelNode];
|
|
40
|
-
const spanRef = React.useCallback(span => {
|
|
41
|
-
var
|
|
42
|
-
// Register the `input` span with lexical
|
|
43
|
-
_editorRef_current;
|
|
44
|
-
(_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.setRootElement(span);
|
|
45
|
-
}, [editorRef]);
|
|
46
|
-
// Update lexical when disabled changes
|
|
47
|
-
useIsomorphicLayoutEffect(() => {
|
|
48
|
-
if (editorRef.current) {
|
|
49
|
-
var _editorRef_current;
|
|
50
|
-
(_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.setEditable(!disabled);
|
|
51
|
-
}
|
|
52
|
-
}, [disabled]);
|
|
53
|
-
useIsomorphicLayoutEffect(() => {
|
|
54
|
-
if (editorRef.current) {
|
|
55
|
-
var _editorRef_current;
|
|
56
|
-
return mergeRegister(editorRef.current.registerEditableListener(isEditable => {
|
|
57
|
-
setDisabled(!isEditable);
|
|
58
|
-
}), (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.registerRootListener(root => {
|
|
59
|
-
if (!root) {
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
// Remove lexical's inline style so we can apply our own
|
|
63
|
-
// Lexical needs the whitespace style to be either `pre` or `pre-wrap` to work correctly
|
|
64
|
-
root.style.whiteSpace = '';
|
|
65
|
-
}));
|
|
66
|
-
}
|
|
67
|
-
}, [editorRef]);
|
|
31
|
+
const {
|
|
32
|
+
canShowPlaceholder,
|
|
33
|
+
spanRef,
|
|
34
|
+
disabled,
|
|
35
|
+
lexicalEditor,
|
|
36
|
+
lexicalInitialConfig
|
|
37
|
+
} = useLexicalContentEditable(props);
|
|
68
38
|
const handleOnChange = React.useCallback(newValue => {
|
|
69
39
|
onChange === null || onChange === void 0 ? void 0 : onChange({}, {
|
|
70
40
|
value: newValue
|
|
71
41
|
});
|
|
72
42
|
}, [onChange]);
|
|
73
|
-
const
|
|
74
|
-
if (typeof props.defaultValue === 'function') {
|
|
75
|
-
return [undefined, props.defaultValue];
|
|
76
|
-
}
|
|
77
|
-
return [props.defaultValue, undefined];
|
|
78
|
-
})();
|
|
79
|
-
const placeholderValue = slot.optional(props.placeholderValue, {
|
|
43
|
+
const placeholderValue = canShowPlaceholder ? slot.optional(props.placeholderValue, {
|
|
80
44
|
elementType: 'span'
|
|
81
|
-
});
|
|
45
|
+
}) : undefined;
|
|
82
46
|
const placeholderId = useId('chat-input-placeholder', placeholderValue === null || placeholderValue === void 0 ? void 0 : placeholderValue.id);
|
|
83
47
|
if (placeholderValue) {
|
|
84
48
|
placeholderValue.id = placeholderId;
|
|
85
49
|
}
|
|
50
|
+
const describedBy = primary['aria-describedby'] ? `${primary['aria-describedby']} ${placeholderId}` : placeholderId;
|
|
86
51
|
return {
|
|
87
52
|
components: {
|
|
88
53
|
root: 'span',
|
|
@@ -105,25 +70,20 @@ export const useEditorInput_unstable = (props, ref) => {
|
|
|
105
70
|
disabled,
|
|
106
71
|
suppressContentEditableWarning: true,
|
|
107
72
|
...primary,
|
|
108
|
-
'aria-describedby':
|
|
73
|
+
'aria-describedby': canShowPlaceholder ? describedBy : undefined
|
|
109
74
|
},
|
|
110
75
|
elementType: 'span'
|
|
111
76
|
}),
|
|
112
77
|
placeholderValue,
|
|
113
|
-
lexicalInitialConfig
|
|
114
|
-
namespace: 'fai-EditorInput',
|
|
115
|
-
onError: console.error,
|
|
116
|
-
nodes: customNodes,
|
|
117
|
-
editorState: defaultValueFunction
|
|
118
|
-
},
|
|
78
|
+
lexicalInitialConfig,
|
|
119
79
|
editorRef,
|
|
120
80
|
disabled,
|
|
121
81
|
textPlugin,
|
|
122
82
|
onPaste,
|
|
123
83
|
handleOnChange,
|
|
124
|
-
defaultValue: defaultString,
|
|
125
84
|
trimWhiteSpace,
|
|
126
|
-
history
|
|
85
|
+
history,
|
|
86
|
+
lexicalEditor
|
|
127
87
|
};
|
|
128
88
|
};
|
|
129
89
|
//# sourceMappingURL=useEditorInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useEditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useEditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, slot, useId, useMergedRefs } from '@fluentui/react-components';\nimport type { EditorInputProps, EditorInputState } from './EditorInput.types';\nimport { LexicalPlainTextPlugin } from '@fluentui-copilot/react-text-editor';\nimport { useLexicalContentEditable } from '../../utilities/useLexicalContentEditable';\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,\n } = props;\n const { root, primary } = getPartitionedNativeProps({\n primarySlotTagName: 'span',\n props,\n excludedPropNames: ['onChange', 'onPaste', 'defaultValue'],\n });\n\n const { canShowPlaceholder, spanRef, disabled, lexicalEditor, lexicalInitialConfig } =\n useLexicalContentEditable(props);\n const handleOnChange = React.useCallback(\n (newValue: string) => {\n onChange?.({}, { value: newValue });\n },\n [onChange],\n );\n\n const placeholderValue = canShowPlaceholder\n ? slot.optional(props.placeholderValue, { elementType: 'span' })\n : undefined;\n const placeholderId = useId('chat-input-placeholder', placeholderValue?.id);\n if (placeholderValue) {\n placeholderValue.id = placeholderId;\n }\n\n const describedBy = primary['aria-describedby'] ? `${primary['aria-describedby']} ${placeholderId}` : placeholderId;\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 : 0,\n disabled,\n suppressContentEditableWarning: true,\n ...primary,\n 'aria-describedby': canShowPlaceholder ? describedBy : undefined,\n },\n elementType: 'span',\n }),\n placeholderValue,\n lexicalInitialConfig,\n editorRef,\n disabled,\n textPlugin,\n onPaste,\n handleOnChange,\n trimWhiteSpace,\n history,\n lexicalEditor,\n };\n};\n"],"names":["React","getPartitionedNativeProps","slot","useId","useMergedRefs","LexicalPlainTextPlugin","useLexicalContentEditable","useEditorInput_unstable","props","ref","onChange","onPaste","trimWhiteSpace","textPlugin","history","editorRef","root","primary","primarySlotTagName","excludedPropNames","canShowPlaceholder","spanRef","disabled","lexicalEditor","lexicalInitialConfig","handleOnChange","useCallback","newValue","value","placeholderValue","optional","elementType","undefined","placeholderId","id","describedBy","components","input","always","defaultProps","role","contentEditable","tabIndex","suppressContentEditableWarning"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,EAAEC,IAAI,EAAEC,KAAK,EAAEC,aAAa,QAAQ,6BAA6B;AAEnG,SAASC,sBAAsB,QAAQ,sCAAsC;AAC7E,SAASC,yBAAyB,QAAQ,4CAA4C;AAEtF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EACJC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,KAAK,EACtBC,aAAaR,sBAAsB,EACnCS,UAAU,IAAI,EACdC,SAAS,EACV,GAAGP;IACJ,MAAM,EAAEQ,IAAI,EAAEC,OAAO,EAAE,GAAGhB,0BAA0B;QAClDiB,oBAAoB;QACpBV;QACAW,mBAAmB;YAAC;YAAY;YAAW;SAAe;IAC5D;IAEA,MAAM,EAAEC,kBAAkB,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,oBAAoB,EAAE,GAClFlB,0BAA0BE;IAC5B,MAAMiB,iBAAiBzB,MAAM0B,WAAW,CACtC,CAACC;QACCjB,qBAAAA,+BAAAA,SAAW,CAAC,GAAG;YAAEkB,OAAOD;QAAS;IACnC,GACA;QAACjB;KAAS;IAGZ,MAAMmB,mBAAmBT,qBACrBlB,KAAK4B,QAAQ,CAACtB,MAAMqB,gBAAgB,EAAE;QAAEE,aAAa;IAAO,KAC5DC;IACJ,MAAMC,gBAAgB9B,MAAM,0BAA0B0B,6BAAAA,uCAAAA,iBAAkBK,EAAE;IAC1E,IAAIL,kBAAkB;QACpBA,iBAAiBK,EAAE,GAAGD;IACxB;IAEA,MAAME,cAAclB,OAAO,CAAC,mBAAmB,GAAG,CAAC,EAAEA,OAAO,CAAC,mBAAmB,CAAC,CAAC,EAAEgB,cAAc,CAAC,GAAGA;IAEtG,OAAO;QACLG,YAAY;YACVpB,MAAM;YACNqB,OAAO;YACPR,kBAAkB;QACpB;QACAb,MAAMd,KAAKoC,MAAM,CAAC9B,MAAMQ,IAAI,EAAE;YAAEuB,cAAc;gBAAE,GAAGvB,IAAI;YAAC;YAAGe,aAAa;QAAO;QAC/EM,OAAOnC,KAAKoC,MAAM,CAAC9B,MAAM6B,KAAK,EAAE;YAC9BE,cAAc;gBACZ9B,KAAKL,cAAcK,KAAKY;gBACxBmB,MAAM;gBACNC,iBAAiB,CAACnB;gBAClB,iBAAiBA,WAAW,OAAOU;gBACnCU,UAAUpB,WAAW,CAAC,IAAI;gBAC1BA;gBACAqB,gCAAgC;gBAChC,GAAG1B,OAAO;gBACV,oBAAoBG,qBAAqBe,cAAcH;YACzD;YACAD,aAAa;QACf;QACAF;QACAL;QACAT;QACAO;QACAT;QACAF;QACAc;QACAb;QACAE;QACAS;IACF;AACF,EAAE"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { createLexicalComposerContext } from '@fluentui-copilot/react-text-editor';
|
|
3
|
+
export function useEditorInputContextValues(state) {
|
|
4
|
+
const {
|
|
5
|
+
lexicalInitialConfig,
|
|
6
|
+
lexicalEditor
|
|
7
|
+
} = state;
|
|
8
|
+
const {
|
|
9
|
+
theme
|
|
10
|
+
} = lexicalInitialConfig;
|
|
11
|
+
const context = React.useMemo(() => [lexicalEditor, createLexicalComposerContext(null, theme)], [lexicalEditor, theme]);
|
|
12
|
+
return {
|
|
13
|
+
lexicalComposer: context
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
//# sourceMappingURL=useEditorInputContextValues.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useEditorInputContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { LexicalComposerContextWithEditor } from '@fluentui-copilot/react-text-editor';\nimport { createLexicalComposerContext } from '@fluentui-copilot/react-text-editor';\nimport type { EditorInputContextValues, EditorInputState } from './EditorInput.types';\n\nexport function useEditorInputContextValues(state: EditorInputState): EditorInputContextValues {\n const { lexicalInitialConfig, lexicalEditor } = state;\n const { theme } = lexicalInitialConfig;\n\n const context: LexicalComposerContextWithEditor = React.useMemo(\n () => [lexicalEditor, createLexicalComposerContext(null, theme)],\n [lexicalEditor, theme],\n );\n\n return { lexicalComposer: context };\n}\n"],"names":["React","createLexicalComposerContext","useEditorInputContextValues","state","lexicalInitialConfig","lexicalEditor","theme","context","useMemo","lexicalComposer"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4BAA4B,QAAQ,sCAAsC;AAGnF,OAAO,SAASC,4BAA4BC,KAAuB;IACjE,MAAM,EAAEC,oBAAoB,EAAEC,aAAa,EAAE,GAAGF;IAChD,MAAM,EAAEG,KAAK,EAAE,GAAGF;IAElB,MAAMG,UAA4CP,MAAMQ,OAAO,CAC7D,IAAM;YAACH;YAAeJ,6BAA6B,MAAMK;SAAO,EAChE;QAACD;QAAeC;KAAM;IAGxB,OAAO;QAAEG,iBAAiBF;IAAQ;AACpC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __resetStyles, __styles, mergeClasses,
|
|
1
|
+
import { __resetStyles, __styles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';
|
|
2
2
|
export const editorInputClassNames = {
|
|
3
3
|
root: 'fai-EditorInput',
|
|
4
4
|
input: 'fai-EditorInput__input',
|
|
@@ -10,15 +10,21 @@ export const editorInputClassNames = {
|
|
|
10
10
|
const useRootClassName = __resetStyles("r1x54j0a", null, [".r1x54j0a{display:inline-grid;white-space:pre-wrap;}"]);
|
|
11
11
|
export const useLexicalStyles = __styles({
|
|
12
12
|
paragraph: {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
jrapky: 0,
|
|
14
|
+
Frg6f3: 0,
|
|
15
|
+
t21cq0: 0,
|
|
16
|
+
B6of3ja: 0,
|
|
17
|
+
B74szlk: "f1s184ao"
|
|
17
18
|
}
|
|
18
19
|
}, {
|
|
19
|
-
d: [".
|
|
20
|
+
d: [[".f1s184ao{margin:0;}", {
|
|
21
|
+
p: -1
|
|
22
|
+
}]]
|
|
23
|
+
});
|
|
24
|
+
export const usePlaceholderClassName = __resetStyles("r1iwc53m", null, {
|
|
25
|
+
r: [".r1iwc53m{z-index:0;grid-area:1/1/1/1;color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"],
|
|
26
|
+
s: ["@media (forced-colors: active){.r1iwc53m{color:GrayText;}}"]
|
|
20
27
|
});
|
|
21
|
-
export const usePlaceholderClassName = __resetStyles("r1tldilo", null, [".r1tldilo{z-index:0;grid-area:1/1/1/1;color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"]);
|
|
22
28
|
export const useInputClassName = __resetStyles("r18fti29", null, [".r18fti29{grid-area:1/1/1/1;z-index:1;width:100%;}"]);
|
|
23
29
|
const useStyles = __styles({
|
|
24
30
|
placeholderDisabled: {
|
|
@@ -42,13 +48,6 @@ export const useEditorInputStyles_unstable = state => {
|
|
|
42
48
|
const styles = useStyles();
|
|
43
49
|
state.root.className = mergeClasses(editorInputClassNames.root, rootClassName, state.root.className);
|
|
44
50
|
state.input.className = mergeClasses(editorInputClassNames.input, inputClassName, state.input.className);
|
|
45
|
-
state.lexicalInitialConfig = {
|
|
46
|
-
...state.lexicalInitialConfig,
|
|
47
|
-
theme: {
|
|
48
|
-
...useLexicalStyles(),
|
|
49
|
-
...state.lexicalInitialConfig.theme
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
51
|
if (state.placeholderValue) {
|
|
53
52
|
state.placeholderValue.className = mergeClasses(editorInputClassNames.placeholderValue, placeholderClassName, disabled && styles.placeholderDisabled, state.placeholderValue.className);
|
|
54
53
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useEditorInputStyles.styles.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["useEditorInputStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { SlotClassNames } from '@fluentui/react-components';\nimport type { EditorInputSlots, EditorInputState } from './EditorInput.types';\n\nexport const editorInputClassNames: SlotClassNames<EditorInputSlots> = {\n root: 'fai-EditorInput',\n input: 'fai-EditorInput__input',\n placeholderValue: 'fai-EditorInput__placeholderValue',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n display: 'inline-grid',\n whiteSpace: 'pre-wrap',\n});\n\nexport const useLexicalStyles = makeStyles({\n paragraph: {\n margin: 0,\n },\n});\n\nexport const usePlaceholderClassName = makeResetStyles({\n zIndex: 0,\n gridArea: '1 / 1 / 1 / 1',\n\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.body1,\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n});\n\nexport const useInputClassName = makeResetStyles({\n gridArea: '1 / 1 / 1 / 1',\n zIndex: 1,\n width: '100%',\n});\n\nconst useStyles = makeStyles({\n placeholderDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n/**\n * Apply styling to the EditorInput slots based on the state\n */\nexport const useEditorInputStyles_unstable = (state: EditorInputState): EditorInputState => {\n 'use no memo';\n\n const { disabled } = state;\n const placeholderClassName = usePlaceholderClassName();\n const rootClassName = useRootClassName();\n const inputClassName = useInputClassName();\n const styles = useStyles();\n\n state.root.className = mergeClasses(editorInputClassNames.root, rootClassName, state.root.className);\n\n state.input.className = mergeClasses(editorInputClassNames.input, inputClassName, state.input.className);\n\n if (state.placeholderValue) {\n state.placeholderValue.className = mergeClasses(\n editorInputClassNames.placeholderValue,\n placeholderClassName,\n disabled && styles.placeholderDisabled,\n state.placeholderValue.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","editorInputClassNames","root","input","placeholderValue","useRootClassName","display","whiteSpace","useLexicalStyles","paragraph","margin","usePlaceholderClassName","zIndex","gridArea","color","colorNeutralForeground3","body1","useInputClassName","width","useStyles","placeholderDisabled","colorNeutralForegroundDisabled","useEditorInputStyles_unstable","state","disabled","placeholderClassName","rootClassName","inputClassName","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAIjH,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACpB,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmBT,gBAAgB;IACvCU,SAAS;IACTC,YAAY;AACd;AAEA,OAAO,MAAMC,mBAAmBX,WAAW;IACzCY,WAAW;QACTC,QAAQ;IACV;AACF,GAAG;AAEH,OAAO,MAAMC,0BAA0Bf,gBAAgB;IACrDgB,QAAQ;IACRC,UAAU;IAEVC,OAAOf,OAAOgB,uBAAuB;IACrC,GAAGf,iBAAiBgB,KAAK;IAEzB,kCAAkC;QAChCF,OAAO;IACT;AACF,GAAG;AAEH,OAAO,MAAMG,oBAAoBrB,gBAAgB;IAC/CiB,UAAU;IACVD,QAAQ;IACRM,OAAO;AACT,GAAG;AAEH,MAAMC,YAAYtB,WAAW;IAC3BuB,qBAAqB;QACnBN,OAAOf,OAAOsB,8BAA8B;IAC9C;AACF;AACA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,uBAAuBd;IAC7B,MAAMe,gBAAgBrB;IACtB,MAAMsB,iBAAiBV;IACvB,MAAMW,SAAST;IAEfI,MAAMrB,IAAI,CAAC2B,SAAS,GAAG/B,aAAaG,sBAAsBC,IAAI,EAAEwB,eAAeH,MAAMrB,IAAI,CAAC2B,SAAS;IAEnGN,MAAMpB,KAAK,CAAC0B,SAAS,GAAG/B,aAAaG,sBAAsBE,KAAK,EAAEwB,gBAAgBJ,MAAMpB,KAAK,CAAC0B,SAAS;IAEvG,IAAIN,MAAMnB,gBAAgB,EAAE;QAC1BmB,MAAMnB,gBAAgB,CAACyB,SAAS,GAAG/B,aACjCG,sBAAsBG,gBAAgB,EACtCqB,sBACAD,YAAYI,OAAOR,mBAAmB,EACtCG,MAAMnB,gBAAgB,CAACyB,SAAS;IAEpC;IAEA,OAAON;AACT,EAAE"}
|
package/lib/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { EditorInput, editorInputClassNames, renderEditorInput_unstable, useEditorInputStyles_unstable, useEditorInput_unstable } from './EditorInput';
|
|
1
|
+
export { EditorInput, editorInputClassNames, renderEditorInput_unstable, useEditorInputStyles_unstable, useEditorInput_unstable, useEditorInputContextValues } from './EditorInput';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export type {
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export type {\n EditorInputProps,\n EditorInputSlots,\n EditorInputState,\n EditorInputValueData,\n EditorInputContextValues,\n} from './EditorInput';\nexport {\n EditorInput,\n editorInputClassNames,\n renderEditorInput_unstable,\n useEditorInputStyles_unstable,\n useEditorInput_unstable,\n useEditorInputContextValues,\n} from './EditorInput';\n"],"names":["EditorInput","editorInputClassNames","renderEditorInput_unstable","useEditorInputStyles_unstable","useEditorInput_unstable","useEditorInputContextValues"],"rangeMappings":"","mappings":"AAOA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,2BAA2B,QACtB,gBAAgB"}
|