npm - @fluentui-copilot/react-editor-input - Versions diffs - 0.5.6 → 0.6.0 - Mend

@fluentui-copilot/react-editor-input 0.5.6 → 0.6.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.

Files changed (58) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,63 @@
   "name": "@fluentui-copilot/react-editor-input",
   "entries": [
     {
-      "date": "Mon, 29 Sep 2025 20:25:10 GMT",
+      "date": "Wed, 22 Oct 2025 17:50:54 GMT",
+      "tag": "@fluentui-copilot/react-editor-input_v0.6.0",
+      "version": "0.6.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "owcampbe@microsoft.com",
+            "package": "@fluentui-copilot/react-editor-input",
+            "commit": "299198d77b3c35a345d0eec00495557dddd45d00",
+            "comment": "feat: Initialize lexical and render placeholder internally."
+          }
+        ],
+        "none": [
+          {
+            "author": "hochelmartin@gmail.com",
+            "package": "@fluentui-copilot/react-editor-input",
+            "commit": "85efb411485b778327290c03aacb479fc9779dab",
+            "comment": "chore: migrate to dts generation against public api instead of internal path aliases tsc resolution"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 14 Oct 2025 00:04:49 GMT",
+      "tag": "@fluentui-copilot/react-editor-input_v0.5.7",
+      "version": "0.5.7",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-editor-input",
+            "commit": "ced6fa3a284cc90eae5ca16357e15b349f720ca0",
+            "comment": "fix: migrate to React 19 compatible JSX and Ref types."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-editor-input",
+            "commit": "74cfcbd7c8afdc8fe3f4b512a9a421613fa32841",
+            "comment": "chore: update react peer deps to support React 19."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-editor-input",
+            "commit": "9a3bf49a3c6302529b2c9b6bc3fc63f549aaf88f",
+            "comment": "chore: enforce explicit return types."
+          },
+          {
+            "author": "twatanabe@microsoft.com",
+            "package": "@fluentui-copilot/react-editor-input",
+            "commit": "068a3c71be5da80beeab05640fe768ef631b0c00",
+            "comment": "chore: bump @fluentui/react-components peer dep minbar to ^9.70.0."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 29 Sep 2025 20:26:50 GMT",
       "tag": "@fluentui-copilot/react-editor-input_v0.5.6",
       "version": "0.5.6",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,33 @@
 # Change Log - @fluentui-copilot/react-editor-input
-This log was last generated on Mon, 29 Sep 2025 20:25:10 GMT and should not be manually modified.
+This log was last generated on Wed, 22 Oct 2025 17:50:54 GMT and should not be manually modified.
 <!-- Start content -->
+## [0.6.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-editor-input_v0.6.0)
+Wed, 22 Oct 2025 17:50:54 GMT
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-editor-input_v0.5.7..@fluentui-copilot/react-editor-input_v0.6.0)
+### Minor changes
+- feat: Initialize lexical and render placeholder internally. ([PR #3085](https://github.com/microsoft/fluentai/pull/3085) by owcampbe@microsoft.com)
+## [0.5.7](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-editor-input_v0.5.7)
+Tue, 14 Oct 2025 00:04:49 GMT
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-editor-input_v0.5.6..@fluentui-copilot/react-editor-input_v0.5.7)
+### Patches
+- fix: migrate to React 19 compatible JSX and Ref types. ([PR #3355](https://github.com/microsoft/fluentai/pull/3355) by tristan.watanabe@gmail.com)
+- chore: update react peer deps to support React 19. ([PR #3361](https://github.com/microsoft/fluentai/pull/3361) by tristan.watanabe@gmail.com)
+- chore: enforce explicit return types. ([PR #3360](https://github.com/microsoft/fluentai/pull/3360) by tristan.watanabe@gmail.com)
+- chore: bump @fluentui/react-components peer dep minbar to ^9.70.0. ([PR #3344](https://github.com/microsoft/fluentai/pull/3344) by twatanabe@microsoft.com)
 ## [0.5.6](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-editor-input_v0.5.6)
-Mon, 29 Sep 2025 20:25:10 GMT
+Mon, 29 Sep 2025 20:26:50 GMT
 [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-editor-input_v0.5.5..@fluentui-copilot/react-editor-input_v0.5.6)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -4,6 +4,8 @@ import type { ComponentProps } from '@fluentui/react-components';
 import type { ComponentState } from '@fluentui/react-components';
 import type { ForwardRefComponent } from '@fluentui/react-components';
 import type { InitialConfigType } from '@fluentui-copilot/react-text-editor';
+import type { JSXElement } from '@fluentui/react-components';
+import type { LexicalComposerContextWithEditor } from '@fluentui-copilot/react-text-editor';
 import type { LexicalEditor } from '@fluentui-copilot/react-text-editor';
 import type { LexicalPlainTextPlugin } from '@fluentui-copilot/react-text-editor';
 import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
@@ -40,6 +42,10 @@ export declare const EditorInput: ForwardRefComponent<EditorInputProps>;
 export declare const editorInputClassNames: SlotClassNames<EditorInputSlots>;
+export declare type EditorInputContextValues = {
+    lexicalComposer: LexicalComposerContextWithEditor;
+};
 /**
  * EditorInput Props
  */
@@ -85,7 +91,7 @@ export declare type EditorInputProps = Omit<ComponentProps<Partial<EditorInputSl
      * @default true
      */
     history?: boolean;
-    editorRef?: React.RefObject<LexicalEditor>;
+    editorRef?: React.RefObject<LexicalEditor | null>;
     /**
      * Customize the default styles of elements inserted by Lexical in the editor.
      */
@@ -107,9 +113,10 @@ export declare type EditorInputSlots = {
 /**
  * State used in rendering EditorInput
  */
-export declare type EditorInputState = ComponentState<EditorInputSlots> & Required<Pick<EditorInputProps, 'disabled' | 'textPlugin' | 'history' | 'trimWhiteSpace' | 'editorRef' | 'isSentinelNodeEnabled'>> & Partial<Pick<EditorInputProps, 'onPaste'>> & {
-    lexicalInitialConfig: InitialConfigType;
+export declare type EditorInputState = ComponentState<EditorInputSlots> & Required<Pick<EditorInputProps, 'disabled' | 'textPlugin' | 'history' | 'trimWhiteSpace' | 'isSentinelNodeEnabled'>> & Partial<Pick<EditorInputProps, 'editorRef' | 'onPaste'>> & {
     handleOnChange: (value: string) => void;
+    lexicalEditor: LexicalEditor;
+    lexicalInitialConfig: InitialConfigType;
 };
 /**
@@ -122,12 +129,12 @@ export declare type EditorInputValueData = {
 /**
  * Render the final JSX of AnimatedPlaceholder
  */
-export declare const renderAnimatedPlaceholder_unstable: (state: AnimatedPlaceholderState) => JSX.Element;
+export declare const renderAnimatedPlaceholder_unstable: (state: AnimatedPlaceholderState) => JSXElement;
 /**
  * Render the final JSX of EditorInput
  */
-export declare const renderEditorInput_unstable: (state: EditorInputState) => JSX.Element;
+export declare const renderEditorInput_unstable: (state: EditorInputState, contextValues: EditorInputContextValues) => JSXElement;
 /**
  * Create the state required to render AnimatedPlaceholder.
@@ -156,9 +163,17 @@ export declare const useAnimatedPlaceholderStyles_unstable: (state: AnimatedPlac
  */
 export declare const useEditorInput_unstable: (props: EditorInputProps, ref: React_2.Ref<HTMLSpanElement>) => EditorInputState;
+export declare function useEditorInputContextValues(state: EditorInputState): EditorInputContextValues;
 /**
  * Apply styling to the EditorInput slots based on the state
  */
 export declare const useEditorInputStyles_unstable: (state: EditorInputState) => EditorInputState;
+export declare const useInputClassName: () => string;
+export declare const useLexicalStyles: () => Record<"paragraph", string>;
+export declare const usePlaceholderClassName: () => string;
 export { }

package/lib/EditorInput.js CHANGED Viewed

	@@ -1 +1 @@
1	- export { EditorInput, editorInputClassNames, renderEditorInput_unstable, useEditorInputStyles_unstable, useEditorInput_unstable, useInputClassName, useLexicalStyles, usePlaceholderClassName } from './components/EditorInput/index';
1	+ export { EditorInput, editorInputClassNames, renderEditorInput_unstable, useEditorInputContextValues, useEditorInputStyles_unstable, useEditorInput_unstable, useInputClassName, useLexicalStyles, usePlaceholderClassName } from './components/EditorInput/index';

package/lib/EditorInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["EditorInput.ts"],"sourcesContent":["export ~~type~~ { ~~EditorInputProps, EditorInputSlots, EditorInputState, EditorInputValueData~~ } from './components/EditorInput/index';\nexport { ~~EditorInput, editorInputClassNames, renderEditorInput_unstable, useEditorInputStyles_unstable, useEditorInput_unstable, useInputClassName, useLexicalStyles, usePlaceholderClassName~~ } from './components/EditorInput/index';\n"],"names":["EditorInput","editorInputClassNames","renderEditorInput_unstable","useEditorInputStyles_unstable","useEditorInput_unstable","useInputClassName","useLexicalStyles","usePlaceholderClassName"],"rangeMappings":"","mappings":"~~AACA~~,~~SAASA~~,WAAW,~~EAAEC~~,qBAAqB,~~EAAEC~~,0BAA0B,~~EAAEC~~,6BAA6B,~~EAAEC~~,uBAAuB,~~EAAEC~~,iBAAiB,~~EAAEC~~,gBAAgB,~~EAAEC~~,uBAAuB,~~QAAQ~~,iCAAiC"}
1	+ {"version":3,"sources":["EditorInput.ts"],"sourcesContent":["export {\n EditorInput,\n editorInputClassNames,\n renderEditorInput_unstable,\n useEditorInputContextValues,\n useEditorInputStyles_unstable,\n useEditorInput_unstable,\n useInputClassName,\n useLexicalStyles,\n usePlaceholderClassName,\n} from './components/EditorInput/index';\nexport type {\n EditorInputContextValues,\n EditorInputProps,\n EditorInputSlots,\n EditorInputState,\n EditorInputValueData,\n} from './components/EditorInput/index';\n"],"names":["EditorInput","editorInputClassNames","renderEditorInput_unstable","useEditorInputContextValues","useEditorInputStyles_unstable","useEditorInput_unstable","useInputClassName","useLexicalStyles","usePlaceholderClassName"],"rangeMappings":"","mappings":"AAAA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,2BAA2B,EAC3BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,iBAAiB,EACjBC,gBAAgB,EAChBC,uBAAuB,QAClB,iCAAiC"}

package/lib/components/AnimatedPlaceholder/renderAnimatedPlaceholder.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["renderAnimatedPlaceholder.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { AnimatedPlaceholderState, AnimatedPlaceholderSlots } from './AnimatedPlaceholder.types';\n\n/\n Render the final JSX of AnimatedPlaceholder\n */\nexport const renderAnimatedPlaceholder_unstable = (state: AnimatedPlaceholderState) => {\n assertSlots<AnimatedPlaceholderSlots>(state);\n\n return (\n <state.root>\n <state.motion>\n <state.placeholder />\n </state.motion>\n </state.root>\n );\n};\n"],"names":["assertSlots","renderAnimatedPlaceholder_unstable","state","root","motion","placeholder"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;~~AAGzD~~;;CAEC,GACD,OAAO,MAAMC,qCAAqC,CAACC;IACjDF,YAAsCE;IAEtC,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACD,MAAME,MAAM;sBACX,cAAA,KAACF,MAAMG,WAAW;;;AAI1B,EAAE"}
1	+ {"version":3,"sources":["renderAnimatedPlaceholder.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { JSXElement } from '@fluentui/react-components';\nimport type { AnimatedPlaceholderState, AnimatedPlaceholderSlots } from './AnimatedPlaceholder.types';\n\n/\n Render the final JSX of AnimatedPlaceholder\n */\nexport const renderAnimatedPlaceholder_unstable = (state: AnimatedPlaceholderState): JSXElement => {\n assertSlots<AnimatedPlaceholderSlots>(state);\n\n return (\n <state.root>\n <state.motion>\n <state.placeholder />\n </state.motion>\n </state.root>\n );\n};\n"],"names":["assertSlots","renderAnimatedPlaceholder_unstable","state","root","motion","placeholder"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAIzD;;CAEC,GACD,OAAO,MAAMC,qCAAqC,CAACC;IACjDF,YAAsCE;IAEtC,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACD,MAAME,MAAM;sBACX,cAAA,KAACF,MAAMG,WAAW;;;AAI1B,EAAE"}

package/lib/components/EditorInput/EditorInput.js CHANGED Viewed

@@ -2,10 +2,12 @@ import * as React from 'react';
 import { useEditorInput_unstable } from './useEditorInput';
 import { renderEditorInput_unstable } from './renderEditorInput';
 import { useEditorInputStyles_unstable } from './useEditorInputStyles.styles';
+import { useEditorInputContextValues } from './useEditorInputContextValues';
 // EditorInput component - TODO: add more docs
 export const EditorInput = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useEditorInput_unstable(props, ref);
+    const contextValues = useEditorInputContextValues(state);
     useEditorInputStyles_unstable(state);
-    return renderEditorInput_unstable(state);
+    return renderEditorInput_unstable(state, contextValues);
 });
 EditorInput.displayName = 'EditorInput';

package/lib/components/EditorInput/EditorInput.js.map CHANGED Viewed

	@@ -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';\n\n// EditorInput component - TODO: add more docs\nexport const EditorInput: ForwardRefComponent<EditorInputProps> = React.forwardRef((props, ref) => {\n const state = useEditorInput_unstable(props, ref);\n\n useEditorInputStyles_unstable(state);\n return renderEditorInput_unstable(state);\n});\n\nEditorInput.displayName = 'EditorInput';\n"],"names":["React","useEditorInput_unstable","renderEditorInput_unstable","useEditorInputStyles_unstable","EditorInput","forwardRef","props","ref","state","displayName"],"rangeMappings":"~~;;;;;;;;;;~~","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;~~AAI9E~~,8CAA8C;AAC9C,OAAO,MAAMC,~~4BAAqDJ~~,~~MAAMK~~,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,~~QAAQP~~,~~wBAAwBK~~,OAAOC;~~IAE7CJ~~,~~8BAA8BK~~;IAC9B,~~OAAON~~,~~2BAA2BM~~;~~AACpC~~,GAAG;~~AAEHJ~~,~~YAAYK~~,WAAW,GAAG"}
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\n// EditorInput component - TODO: add more docs\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 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,8CAA8C;AAC9C,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAC7C,MAAME,gBAAgBN,4BAA4BK;IAElDN,8BAA8BM;IAC9B,OAAOP,2BAA2BO,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}

package/lib/components/EditorInput/EditorInput.types.js CHANGED Viewed

@@ -1,3 +1 @@
-/**
- * Data passed to the `onChange` callback when the chat input's value changes.
- */ export { };
+export { };

package/lib/components/EditorInput/EditorInput.types.js.map CHANGED Viewed

	@@ -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 Called when the default value is given to the editor.\n * If `defaultValue` was a function, this will be called with the state of the editor after\n * calling that function.\n * If `defaultValue` was a string, this will be called with the same string.\n /\n onDefaultValueSet?: (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~~ 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":"~~AAyFA;;CAEC~~,~~GACD,~~WAEE"}
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 Called when the default value is given to the editor.\n * If `defaultValue` was a function, this will be called with the state of the editor after\n * calling that function.\n * If `defaultValue` was a string, this will be called with the same string.\n /\n onDefaultValueSet?: (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 \| null>;\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<Pick<EditorInputProps, 'disabled' \| 'textPlugin' \| 'history' \| 'trimWhiteSpace' \| 'isSentinelNodeEnabled'>> &\n Partial<Pick<EditorInputProps, 'editorRef' \| 'onPaste'>> & {\n handleOnChange: (value: string) => void;\n lexicalEditor: LexicalEditor;\n lexicalInitialConfig: InitialConfigType;\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":"AAiGA,WAEE"}

package/lib/components/EditorInput/index.js CHANGED Viewed

@@ -2,3 +2,4 @@ export { EditorInput } from './EditorInput';
 export { renderEditorInput_unstable } from './renderEditorInput';
 export { useEditorInput_unstable } from './useEditorInput';
 export { editorInputClassNames, useEditorInputStyles_unstable, useInputClassName, useLexicalStyles, usePlaceholderClassName } from './useEditorInputStyles.styles';
+export { useEditorInputContextValues } from './useEditorInputContextValues';

package/lib/components/EditorInput/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["index.ts"],"sourcesContent":["export { EditorInput } from './EditorInput';\nexport type { EditorInputProps, EditorInputSlots, EditorInputState, EditorInputValueData } from './EditorInput.types';\nexport { renderEditorInput_unstable } from './renderEditorInput';\nexport { useEditorInput_unstable } from './useEditorInput';\nexport { editorInputClassNames, useEditorInputStyles_unstable, useInputClassName, useLexicalStyles, usePlaceholderClassName } from './useEditorInputStyles.styles';\n"],"names":["EditorInput","renderEditorInput_unstable","useEditorInput_unstable","editorInputClassNames","useEditorInputStyles_unstable","useInputClassName","useLexicalStyles","usePlaceholderClassName"],"rangeMappings":"~~;;;~~","mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;~~AAE5C~~,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,~~SAASC~~,qBAAqB,~~EAAEC~~,6BAA6B,~~EAAEC~~,iBAAiB,~~EAAEC~~,gBAAgB,~~EAAEC~~,uBAAuB,QAAQ,gCAAgC"}
1	+ {"version":3,"sources":["index.ts"],"sourcesContent":["export { EditorInput } from './EditorInput';\nexport type {\n EditorInputProps,\n EditorInputSlots,\n EditorInputState,\n EditorInputValueData,\n EditorInputContextValues,\n} from './EditorInput.types';\nexport { renderEditorInput_unstable } from './renderEditorInput';\nexport { useEditorInput_unstable } from './useEditorInput';\nexport {\n editorInputClassNames,\n useEditorInputStyles_unstable,\n useInputClassName,\n useLexicalStyles,\n usePlaceholderClassName,\n} from './useEditorInputStyles.styles';\nexport { useEditorInputContextValues } from './useEditorInputContextValues';\n"],"names":["EditorInput","renderEditorInput_unstable","useEditorInput_unstable","editorInputClassNames","useEditorInputStyles_unstable","useInputClassName","useLexicalStyles","usePlaceholderClassName","useEditorInputContextValues"],"rangeMappings":";;;;","mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAQ5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SACEC,qBAAqB,EACrBC,6BAA6B,EAC7BC,iBAAiB,EACjBC,gBAAgB,EAChBC,uBAAuB,QAClB,gCAAgC;AACvC,SAASC,2BAA2B,QAAQ,gCAAgC"}

package/lib/components/EditorInput/renderEditorInput.js CHANGED Viewed

@@ -1,33 +1,34 @@
   import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-components';
-import { LexicalComposer, LexicalErrorBoundary, LexicalEditorRefPlugin, LexicalHistoryPlugin } from '@fluentui-copilot/react-text-editor';
+import { LexicalErrorBoundary, LexicalEditorRefPlugin, LexicalHistoryPlugin, LexicalComposerContext } from '@fluentui-copilot/react-text-editor';
 import { BasicFunctionalityPlugin } from '@fluentui-copilot/react-chat-input-plugins';
 /**
  * Render the final JSX of EditorInput
- */ export const renderEditorInput_unstable = (state)=>{
+ */ export const renderEditorInput_unstable = (state, contextValues)=>{
     assertSlots(state);
     return /*#__PURE__*/ _jsx(state.root, {
-        children: /*#__PURE__*/ _jsxs(LexicalComposer, {
-            initialConfig: state.lexicalInitialConfig,
+        children: /*#__PURE__*/ _jsxs(LexicalComposerContext.Provider, {
+            value: contextValues.lexicalComposer,
             children: [
                 /*#__PURE__*/ _jsx(state.textPlugin, {
                     contentEditable: /*#__PURE__*/ _jsx(state.input, {}),
                     ErrorBoundary: LexicalErrorBoundary,
-                    placeholder: state.placeholderValue ? /*#__PURE__*/ _jsx(state.placeholderValue, {}) : null
+                    placeholder: null
                 }),
                 /*#__PURE__*/ _jsxs(_Fragment, {
                     children: [
+                        state.placeholderValue ? /*#__PURE__*/ _jsx(state.placeholderValue, {}) : null,
                         /*#__PURE__*/ _jsx(BasicFunctionalityPlugin, {
                             onContentChange: state.handleOnChange,
                             onPaste: state.onPaste,
                             trimWhitespace: state.trimWhiteSpace,
                             isSentinelNodeEnabled: state.isSentinelNodeEnabled
                         }),
-                        state.history && /*#__PURE__*/ _jsx(LexicalHistoryPlugin, {})
+                        state.history && /*#__PURE__*/ _jsx(LexicalHistoryPlugin, {}),
+                        state.editorRef && /*#__PURE__*/ _jsx(LexicalEditorRefPlugin, {
+                            editorRef: state.editorRef
+                        })
                     ]
-                }),
-                /*#__PURE__*/ _jsx(LexicalEditorRefPlugin, {
-                    editorRef: state.editorRef
                 })
             ]
         })

package/lib/components/EditorInput/renderEditorInput.js.map CHANGED Viewed

	@@ -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 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","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,~~uBAAuBf~~,~~MAAMe~~,qBAAqB;;~~wBAEnDf~~,~~MAAMgB~~,OAAO,kBAAI,~~KAACnB;;;8BAErB~~,~~KAACD~~;~~oBAAuBqB~~,~~WAAWjB~~,~~MAAMiB~~,SAAS~~;;;;;AAI1D~~,EAAE"}
1	+ {"version":3,"sources":["renderEditorInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { JSXElement } from '@fluentui/react-components';\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';\nimport type { EditorInputState, EditorInputContextValues, EditorInputSlots } from './EditorInput.types';\n\n/\n Render the final JSX of EditorInput\n */\nexport const renderEditorInput_unstable = (\n state: EditorInputState,\n contextValues: EditorInputContextValues,\n): JSXElement => {\n assertSlots<EditorInputSlots>(state);\n\n return (\n <state.root>\n <LexicalComposerContext.Provider value={contextValues.lexicalComposer}>\n <state.textPlugin contentEditable={<state.input />} ErrorBoundary={LexicalErrorBoundary} placeholder={null} />\n <>\n {state.placeholderValue ? <state.placeholderValue /> : null}\n <BasicFunctionalityPlugin\n onContentChange={state.handleOnChange}\n onPaste={state.onPaste}\n trimWhitespace={state.trimWhiteSpace}\n isSentinelNodeEnabled={state.isSentinelNodeEnabled}\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","placeholder","placeholderValue","onContentChange","handleOnChange","onPaste","trimWhitespace","trimWhiteSpace","isSentinelNodeEnabled","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;AAGtF;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEAR,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;oBAAsBgB,aAAa;;8BACtG;;wBACGV,MAAMW,gBAAgB,iBAAG,KAACX,MAAMW,gBAAgB,QAAM;sCACvD,KAACb;4BACCc,iBAAiBZ,MAAMa,cAAc;4BACrCC,SAASd,MAAMc,OAAO;4BACtBC,gBAAgBf,MAAMgB,cAAc;4BACpCC,uBAAuBjB,MAAMiB,qBAAqB;;wBAEnDjB,MAAMkB,OAAO,kBAAI,KAACtB;wBAClBI,MAAMmB,SAAS,kBAAI,KAACxB;4BAAuBwB,WAAWnB,MAAMmB,SAAS;;;;;;;AAKhF,EAAE"}

package/lib/components/EditorInput/useEditorInput.js CHANGED Viewed

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { getPartitionedNativeProps, slot, useFluent, useId, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-components';
-import { SentinelNode, SENTINEL_VALUE } from '@fluentui-copilot/chat-input-plugins';
+import { getPartitionedNativeProps, slot, useFluent, useId, useMergedRefs } from '@fluentui/react-components';
+import { SENTINEL_VALUE } from '@fluentui-copilot/chat-input-plugins';
 import { $createTextNode, $insertNodes } from '@fluentui-copilot/react-text-editor';
 import { $getRoot } from '@fluentui-copilot/react-text-editor';
-import { LexicalPlainTextPlugin, mergeRegister } from '@fluentui-copilot/react-text-editor';
-import { mergeCallbacks, useControllableState } from '@fluentui/react-utilities';
+import { LexicalPlainTextPlugin } from '@fluentui-copilot/react-text-editor';
+import { mergeCallbacks } from '@fluentui/react-utilities';
+import { useLexicalContentEditable } from '../../utilities/useLexicalContentEditable';
 /**
  * Create the state required to render EditorInput.
  *
@@ -14,7 +15,7 @@ import { mergeCallbacks, useControllableState } from '@fluentui/react-utilities'
  * @param props - props from this instance of EditorInput
  * @param ref - reference to root HTMLElement of EditorInput
  */ export const useEditorInput_unstable = (props, ref)=>{
-    const { onChange, onPaste, trimWhiteSpace = false, textPlugin = LexicalPlainTextPlugin, history = true, editorRef: userEditorRef, customTheme, isSentinelNodeEnabled = true } = props;
+    const { onChange, onPaste, trimWhiteSpace = false, textPlugin = LexicalPlainTextPlugin, history = true, editorRef, isSentinelNodeEnabled = true } = props;
     const { root, primary } = getPartitionedNativeProps({
         primarySlotTagName: 'span',
         props,
@@ -24,52 +25,6 @@ import { mergeCallbacks, useControllableState } from '@fluentui/react-utilities'
             'defaultValue'
         ]
     });
-    const editorRef = useMergedRefs(React.useRef(null), userEditorRef);
-    // The disabled state can also be changed by lexical (e.g. by a custom plugin) so
-    // we use `useControllableState` to coordinate
-    const [disabled, setDisabled] = useControllableState({
-        state: props.disabled,
-        initialState: false
-    });
-    const customNodes = props.customNodes ? [
-        ...props.customNodes,
-        SentinelNode
-    ] : [
-        SentinelNode
-    ];
-    const spanRef = React.useCallback((span)=>{
-        var // Register the `input` span with lexical
-        _editorRef_current;
-        (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.setRootElement(span);
-    }, [
-        editorRef
-    ]);
-    // Update lexical when disabled changes
-    useIsomorphicLayoutEffect(()=>{
-        if (editorRef.current) {
-            var _editorRef_current;
-            (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.setEditable(!disabled);
-        }
-    }, [
-        disabled
-    ]);
-    useIsomorphicLayoutEffect(()=>{
-        if (editorRef.current) {
-            var _editorRef_current;
-            return mergeRegister(editorRef.current.registerEditableListener((isEditable)=>{
-                setDisabled(!isEditable);
-            }), (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.registerRootListener((root)=>{
-                if (!root) {
-                    return;
-                }
-                // Remove lexical's inline style so we can apply our own
-                // Lexical needs the whitespace style to be either `pre` or `pre-wrap` to work correctly
-                root.style.whiteSpace = '';
-            }));
-        }
-    }, [
-        editorRef
-    ]);
     const handleOnChange = React.useCallback((newValue)=>{
         onChange === null || onChange === void 0 ? void 0 : onChange({}, {
             value: newValue
@@ -77,14 +32,19 @@ import { mergeCallbacks, useControllableState } from '@fluentui/react-utilities'
     }, [
         onChange
     ]);
-    const defaultValueFunction = useDefaultValueFunction(props);
-    const placeholderValue = slot.optional(props.placeholderValue, {
-        elementType: 'span'
+    const { canShowPlaceholder, spanRef, disabled, lexicalEditor, lexicalInitialConfig } = useLexicalContentEditable({
+        customNodes: props.customNodes,
+        defaultValue: useDefaultValueFunction(props),
+        disabled: props.disabled
     });
+    const placeholderValue = canShowPlaceholder ? slot.optional(props.placeholderValue, {
+        elementType: 'span'
+    }) : undefined;
     const placeholderId = useId('chat-input-placeholder', placeholderValue === null || placeholderValue === void 0 ? void 0 : placeholderValue.id);
     if (placeholderValue) {
         placeholderValue.id = placeholderId;
     }
+    const describedBy = primary['aria-describedby'] ? `${primary['aria-describedby']} ${placeholderId}` : placeholderId;
     return {
         components: {
             root: 'span',
@@ -107,18 +67,12 @@ import { mergeCallbacks, useControllableState } from '@fluentui/react-utilities'
                 suppressContentEditableWarning: true,
                 tabIndex: disabled ? undefined : 0,
                 ...primary,
-                'aria-describedby': primary['aria-describedby'] ? `${primary['aria-describedby']} ${placeholderId}` : placeholderId
+                'aria-describedby': describedBy
             },
             elementType: 'span'
         }),
         placeholderValue,
-        lexicalInitialConfig: {
-            namespace: 'fai-EditorInput',
-            onError: console.error,
-            nodes: customNodes,
-            editorState: defaultValueFunction,
-            theme: customTheme
-        },
+        lexicalInitialConfig,
         editorRef,
         disabled,
         textPlugin,
@@ -126,7 +80,8 @@ import { mergeCallbacks, useControllableState } from '@fluentui/react-utilities'
         handleOnChange,
         trimWhiteSpace,
         history,
-        isSentinelNodeEnabled
+        isSentinelNodeEnabled,
+        lexicalEditor
     };
 };
 function useDefaultValueFunction(props) {

package/lib/components/EditorInput/useEditorInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useEditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n slot,\n useFluent,\n useId,\n useIsomorphicLayoutEffect,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport type { EditorInputProps, EditorInputState } from './EditorInput.types';\nimport { SentinelNode, SENTINEL_VALUE } from '@fluentui-copilot/chat-input-plugins';\nimport type { LexicalEditor } from '@fluentui-copilot/react-text-editor';\nimport { $createTextNode, $insertNodes } from '@fluentui-copilot/react-text-editor';\nimport { $getRoot } from '@fluentui-copilot/react-text-editor';\nimport { LexicalPlainTextPlugin, mergeRegister } from '@fluentui-copilot/react-text-editor';\nimport { mergeCallbacks, 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: HTMLSpanElement \| null) => {\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 defaultValueFunction = useDefaultValueFunction(props);\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 trimWhiteSpace,\n history,\n isSentinelNodeEnabled,\n };\n};\n\nfunction useDefaultValueFunction(props: EditorInputProps) {\n const { targetDocument } = useFluent();\n const requestAnimationFrame = targetDocument?.defaultView?.requestAnimationFrame;\n\n const [defaultValueFunction] = React.useState(() => {\n const { defaultValue, onDefaultValueSet } = props;\n if (defaultValue === undefined) {\n return undefined;\n }\n\n const insertDefaultValueFunction =\n typeof defaultValue === 'function'\n ? defaultValue\n : () => {\n $insertNodes([$createTextNode(defaultValue)]);\n };\n\n // After the defaultValue function has run, read back the result and give\n // it to the onDefaultValueSet callback.\n const readDefaultValueFunction = onDefaultValueSet\n ? () => {\n const text = $getRoot().getTextContent().replace(SENTINEL_VALUE, '');\n\n // This runs while rendering `LexicalComposer` so delay calling back into the parent\n // until after finished rendering `LexicalComposer`\n requestAnimationFrame?.(() => {\n onDefaultValueSet?.(text);\n });\n }\n : undefined;\n\n return mergeCallbacks(insertDefaultValueFunction, readDefaultValueFunction);\n });\n\n return defaultValueFunction;\n}\n"],"names":["React","getPartitionedNativeProps","slot","useFluent","useId","useIsomorphicLayoutEffect","useMergedRefs","SentinelNode","SENTINEL_VALUE","$createTextNode","$insertNodes","$getRoot","LexicalPlainTextPlugin","mergeRegister","mergeCallbacks","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","defaultValueFunction","useDefaultValueFunction","placeholderValue","optional","elementType","placeholderId","id","components","input","always","defaultProps","role","contentEditable","undefined","suppressContentEditableWarning","tabIndex","lexicalInitialConfig","namespace","onError","console","error","nodes","editorState","theme","targetDocument","requestAnimationFrame","defaultView","useState","defaultValue","onDefaultValueSet","insertDefaultValueFunction","readDefaultValueFunction","text","getTextContent","replace"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["useEditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, slot, useFluent, useId, useMergedRefs } from '@fluentui/react-components';\nimport type { EditorInputProps, EditorInputState } from './EditorInput.types';\nimport { SENTINEL_VALUE } from '@fluentui-copilot/chat-input-plugins';\nimport { $createTextNode, $insertNodes } from '@fluentui-copilot/react-text-editor';\nimport { $getRoot } from '@fluentui-copilot/react-text-editor';\nimport { LexicalPlainTextPlugin } from '@fluentui-copilot/react-text-editor';\nimport { mergeCallbacks } from '@fluentui/react-utilities';\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 isSentinelNodeEnabled = true,\n } = props;\n const { root, primary } = getPartitionedNativeProps({\n primarySlotTagName: 'span',\n props,\n excludedPropNames: ['onChange', 'onPaste', 'defaultValue'],\n });\n\n const handleOnChange = React.useCallback(\n (newValue: string) => {\n onChange?.({}, { value: newValue });\n },\n [onChange],\n );\n\n const { canShowPlaceholder, spanRef, disabled, lexicalEditor, lexicalInitialConfig } = useLexicalContentEditable({\n customNodes: props.customNodes,\n defaultValue: useDefaultValueFunction(props),\n disabled: props.disabled,\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 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 disabled,\n suppressContentEditableWarning: true,\n tabIndex: disabled ? undefined : 0,\n ...primary,\n 'aria-describedby': describedBy,\n },\n elementType: 'span',\n }),\n placeholderValue,\n lexicalInitialConfig,\n editorRef,\n disabled,\n textPlugin,\n onPaste,\n handleOnChange,\n trimWhiteSpace,\n history,\n isSentinelNodeEnabled,\n lexicalEditor,\n };\n};\n\nfunction useDefaultValueFunction(props: EditorInputProps) {\n const { targetDocument } = useFluent();\n const requestAnimationFrame = targetDocument?.defaultView?.requestAnimationFrame;\n\n const [defaultValueFunction] = React.useState(() => {\n const { defaultValue, onDefaultValueSet } = props;\n if (defaultValue === undefined) {\n return undefined;\n }\n\n const insertDefaultValueFunction =\n typeof defaultValue === 'function'\n ? defaultValue\n : () => {\n $insertNodes([$createTextNode(defaultValue)]);\n };\n\n // After the defaultValue function has run, read back the result and give\n // it to the onDefaultValueSet callback.\n const readDefaultValueFunction = onDefaultValueSet\n ? () => {\n const text = $getRoot().getTextContent().replace(SENTINEL_VALUE, '');\n\n // This runs while rendering `LexicalComposer` so delay calling back into the parent\n // until after finished rendering `LexicalComposer`\n requestAnimationFrame?.(() => {\n onDefaultValueSet?.(text);\n });\n }\n : undefined;\n\n return mergeCallbacks(insertDefaultValueFunction, readDefaultValueFunction);\n });\n\n return defaultValueFunction;\n}\n"],"names":["React","getPartitionedNativeProps","slot","useFluent","useId","useMergedRefs","SENTINEL_VALUE","$createTextNode","$insertNodes","$getRoot","LexicalPlainTextPlugin","mergeCallbacks","useLexicalContentEditable","useEditorInput_unstable","props","ref","onChange","onPaste","trimWhiteSpace","textPlugin","history","editorRef","isSentinelNodeEnabled","root","primary","primarySlotTagName","excludedPropNames","handleOnChange","useCallback","newValue","value","canShowPlaceholder","spanRef","disabled","lexicalEditor","lexicalInitialConfig","customNodes","defaultValue","useDefaultValueFunction","placeholderValue","optional","elementType","undefined","placeholderId","id","describedBy","components","input","always","defaultProps","role","contentEditable","suppressContentEditableWarning","tabIndex","targetDocument","requestAnimationFrame","defaultView","defaultValueFunction","useState","onDefaultValueSet","insertDefaultValueFunction","readDefaultValueFunction","text","getTextContent","replace"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/EditorInput/useEditorInputContextValues.js ADDED Viewed

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { createLexicalComposerContext } from '@fluentui-copilot/react-text-editor';
+export function useEditorInputContextValues(state) {
+    const { lexicalInitialConfig, lexicalEditor } = state;
+    const { theme } = lexicalInitialConfig;
+    const context = React.useMemo(()=>[
+            lexicalEditor,
+            createLexicalComposerContext(null, theme)
+        ], [
+        lexicalEditor,
+        theme
+    ]);
+    return {
+        lexicalComposer: context
+    };
+}

package/lib/components/EditorInput/useEditorInputContextValues.js.map ADDED Viewed

@@ -0,0 +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"}

package/lib/components/EditorInput/useEditorInputStyles.styles.js CHANGED Viewed

@@ -50,13 +50,6 @@ export const useEditorInputStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(editorInputClassNames.root, rootClassName, state.root.className);
   state.input.className = mergeClasses(editorInputClassNames.input, inputClassName, state.input.className);
-  state.lexicalInitialConfig = {
-    ...state.lexicalInitialConfig,
-    theme: {
-      ...useLexicalStyles(),
-      ...state.lexicalInitialConfig.theme
-    }
-  };
   if (state.placeholderValue) {
     state.placeholderValue.className = mergeClasses(editorInputClassNames.placeholderValue, placeholderClassName, disabled && styles.placeholderDisabled, state.placeholderValue.className);
   }

package/lib/components/EditorInput/useEditorInputStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useEditorInputStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\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 textAlign: 'start',\n },\n});\n\nexport const usePlaceholderClassName = makeResetStyles({\n zIndex: 0,\n gridArea: '1 / 1 / 1 / 1',\n\n color: tokens.colorNeutralForeground4,\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 ~~state.lexicalInitialConfig = {\n ...state.lexicalInitialConfig,\n theme: { ...useLexicalStyles(), ...state.lexicalInitialConfig.theme },\n };\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","textAlign","usePlaceholderClassName","zIndex","gridArea","color","colorNeutralForeground4","body1","useInputClassName","width","useStyles","placeholderDisabled","colorNeutralForegroundDisabled","useEditorInputStyles_unstable","state","disabled","placeholderClassName","rootClassName","inputClassName","styles","className"~~,"lexicalInitialConfig","theme"~~],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AACvF,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,2BAA2B;AAIpE,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;QACRC,WAAW;IACb;AACF,GAAG;AAEH,OAAO,MAAMC,0BAA0BhB,gBAAgB;IACrDiB,QAAQ;IACRC,UAAU;IAEVC,OAAOhB,OAAOiB,uBAAuB;IACrC,GAAGhB,iBAAiBiB,KAAK;IAEzB,kCAAkC;QAChCF,OAAO;IACT;AACF,GAAG;AAEH,OAAO,MAAMG,oBAAoBtB,gBAAgB;IAC/CkB,UAAU;IACVD,QAAQ;IACRM,OAAO;AACT,GAAG;AAEH,MAAMC,YAAYvB,WAAW;IAC3BwB,qBAAqB;QACnBN,OAAOhB,OAAOuB,8BAA8B;IAC9C;AACF;AACA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,uBAAuBd;IAC7B,MAAMe,gBAAgBtB;IACtB,MAAMuB,iBAAiBV;IACvB,MAAMW,SAAST;IAEfI,MAAMtB,IAAI,CAAC4B,SAAS,GAAGhC,aAAaG,sBAAsBC,IAAI,EAAEyB,eAAeH,MAAMtB,IAAI,CAAC4B,SAAS;IAEnGN,MAAMrB,KAAK,CAAC2B,SAAS,GAAGhC,aAAaG,sBAAsBE,KAAK,EAAEyB,gBAAgBJ,MAAMrB,KAAK,CAAC2B,SAAS;~~IAEvGN~~,~~MAAMO~~,~~oBAAoB,GAAG;QAC3B,GAAGP,MAAMO,oBAAoB;QAC7BC,OAAO;YAAE,GAAGxB,kBAAkB;YAAE,GAAGgB,MAAMO,oBAAoB,CAACC,KAAK;QAAC;IACtE;IAEA,IAAIR,~~MAAMpB,gBAAgB,EAAE;QAC1BoB,MAAMpB,gBAAgB,CAAC0B,SAAS,GAAGhC,aACjCG,sBAAsBG,gBAAgB,EACtCsB,sBACAD,YAAYI,OAAOR,mBAAmB,EACtCG,MAAMpB,gBAAgB,CAAC0B,SAAS;IAEpC;IAEA,OAAON;AACT,EAAE"}
1	+ {"version":3,"sources":["useEditorInputStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\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 textAlign: 'start',\n },\n});\n\nexport const usePlaceholderClassName = makeResetStyles({\n zIndex: 0,\n gridArea: '1 / 1 / 1 / 1',\n\n color: tokens.colorNeutralForeground4,\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","textAlign","usePlaceholderClassName","zIndex","gridArea","color","colorNeutralForeground4","body1","useInputClassName","width","useStyles","placeholderDisabled","colorNeutralForegroundDisabled","useEditorInputStyles_unstable","state","disabled","placeholderClassName","rootClassName","inputClassName","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AACvF,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,2BAA2B;AAIpE,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;QACRC,WAAW;IACb;AACF,GAAG;AAEH,OAAO,MAAMC,0BAA0BhB,gBAAgB;IACrDiB,QAAQ;IACRC,UAAU;IAEVC,OAAOhB,OAAOiB,uBAAuB;IACrC,GAAGhB,iBAAiBiB,KAAK;IAEzB,kCAAkC;QAChCF,OAAO;IACT;AACF,GAAG;AAEH,OAAO,MAAMG,oBAAoBtB,gBAAgB;IAC/CkB,UAAU;IACVD,QAAQ;IACRM,OAAO;AACT,GAAG;AAEH,MAAMC,YAAYvB,WAAW;IAC3BwB,qBAAqB;QACnBN,OAAOhB,OAAOuB,8BAA8B;IAC9C;AACF;AACA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,uBAAuBd;IAC7B,MAAMe,gBAAgBtB;IACtB,MAAMuB,iBAAiBV;IACvB,MAAMW,SAAST;IAEfI,MAAMtB,IAAI,CAAC4B,SAAS,GAAGhC,aAAaG,sBAAsBC,IAAI,EAAEyB,eAAeH,MAAMtB,IAAI,CAAC4B,SAAS;IAEnGN,MAAMrB,KAAK,CAAC2B,SAAS,GAAGhC,aAAaG,sBAAsBE,KAAK,EAAEyB,gBAAgBJ,MAAMrB,KAAK,CAAC2B,SAAS;IAEvG,IAAIN,MAAMpB,gBAAgB,EAAE;QAC1BoB,MAAMpB,gBAAgB,CAAC0B,SAAS,GAAGhC,aACjCG,sBAAsBG,gBAAgB,EACtCsB,sBACAD,YAAYI,OAAOR,mBAAmB,EACtCG,MAAMpB,gBAAgB,CAAC0B,SAAS;IAEpC;IAEA,OAAON;AACT,EAAE"}

package/lib/components/EditorInput/useEditorInputStyles.styles.raw.js CHANGED Viewed

@@ -47,13 +47,6 @@ const useStyles = makeStyles({
     const styles = useStyles();
     state.root.className = mergeClasses(editorInputClassNames.root, rootClassName, state.root.className);
     state.input.className = mergeClasses(editorInputClassNames.input, inputClassName, state.input.className);
-    state.lexicalInitialConfig = {
-        ...state.lexicalInitialConfig,
-        theme: {
-            ...useLexicalStyles(),
-            ...state.lexicalInitialConfig.theme
-        }
-    };
     if (state.placeholderValue) {
         state.placeholderValue.className = mergeClasses(editorInputClassNames.placeholderValue, placeholderClassName, disabled && styles.placeholderDisabled, state.placeholderValue.className);
     }