@fluentui-copilot/react-editor-input 0.5.7 → 0.6.0

package/lib/utilities/useLexicalContentEditable.js

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { SentinelNode } from '@fluentui-copilot/chat-input-plugins';
+import { mergeRegister } from '@fluentui-copilot/react-text-editor';
+import { useControllableState, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { useLexicalStyles } from '../EditorInput';
+import { useLexicalEditor } from './useLexicalEditor';
+import { useCanShowPlaceholder } from './useCanShowPlaceholder';
+import { mergeClasses } from '@fluentui/react-components';
+export function useLexicalContentEditable(props) {
+    const { defaultValue, customTheme } = props;
+    const customNodes = props.customNodes ? [
+        ...props.customNodes,
+        SentinelNode
+    ] : [
+        SentinelNode
+    ];
+    // 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 lexicalStyles = useLexicalStyles();
+    const paragraphClassName = mergeClasses(lexicalStyles.paragraph, customTheme === null || customTheme === void 0 ? void 0 : customTheme.paragraph);
+    const lexicalInitialConfig = {
+        namespace: 'fai-EditorInput',
+        onError: console.log,
+        nodes: customNodes,
+        editorState: defaultValue,
+        editable: !disabled,
+        theme: {
+            ...customTheme,
+            paragraph: paragraphClassName.trim() === '' ? undefined : paragraphClassName
+        }
+    };
+    const lexicalEditor = useLexicalEditor(lexicalInitialConfig);
+    const canShowPlaceholder = useCanShowPlaceholder(lexicalEditor);
+    const spanRef = React.useCallback((span)=>{
+        // Register the `input` span with lexical
+        lexicalEditor.setRootElement(span);
+    }, [
+        lexicalEditor
+    ]);
+    // Update lexical when disabled changes
+    useIsomorphicLayoutEffect(()=>{
+        lexicalEditor.setEditable(!disabled);
+    }, [
+        lexicalEditor
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        return mergeRegister(lexicalEditor.registerEditableListener((isEditable)=>{
+            setDisabled(!isEditable);
+        }), lexicalEditor.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 = '';
+        }));
+    }, []);
+    return {
+        canShowPlaceholder,
+        disabled,
+        spanRef,
+        lexicalEditor,
+        lexicalInitialConfig
+    };
+}

package/lib/utilities/useLexicalContentEditable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useLexicalContentEditable.ts"],"sourcesContent":["import * as React from 'react';\nimport { SentinelNode } from '@fluentui-copilot/chat-input-plugins';\nimport type { InitialConfigType, LexicalEditor } from '@fluentui-copilot/react-text-editor';\nimport { mergeRegister } from '@fluentui-copilot/react-text-editor';\nimport { useControllableState, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport type { EditorInputProps } from '../EditorInput';\nimport { useLexicalStyles } from '../EditorInput';\nimport { useLexicalEditor } from './useLexicalEditor';\nimport { useCanShowPlaceholder } from './useCanShowPlaceholder';\nimport { mergeClasses } from '@fluentui/react-components';\n\nexport type UseLexicalContentEditableProps = Pick<EditorInputProps, 'customNodes' | 'disabled' | 'customTheme'> & {\n  defaultValue?: () => void;\n};\nexport type UseLexicalContentEditableResult = {\n  canShowPlaceholder: boolean;\n  disabled: boolean;\n  spanRef: React.Ref<HTMLSpanElement>;\n  lexicalEditor: LexicalEditor;\n  lexicalInitialConfig: InitialConfigType;\n};\n\nexport function useLexicalContentEditable(props: UseLexicalContentEditableProps): UseLexicalContentEditableResult {\n  const { defaultValue, customTheme } = props;\n\n  const customNodes = props.customNodes ? [...props.customNodes, SentinelNode] : [SentinelNode];\n\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 lexicalStyles = useLexicalStyles();\n  const paragraphClassName = mergeClasses(lexicalStyles.paragraph, customTheme?.paragraph);\n\n  const lexicalInitialConfig = {\n    namespace: 'fai-EditorInput',\n    onError: console.log,\n    nodes: customNodes,\n    editorState: defaultValue,\n    editable: !disabled,\n    theme: { ...customTheme, paragraph: paragraphClassName.trim() === '' ? undefined : paragraphClassName },\n  };\n  const lexicalEditor = useLexicalEditor(lexicalInitialConfig);\n\n  const canShowPlaceholder = useCanShowPlaceholder(lexicalEditor);\n\n  const spanRef = React.useCallback(\n    (span: HTMLSpanElement | null) => {\n      // Register the `input` span with lexical\n      lexicalEditor.setRootElement(span);\n    },\n    [lexicalEditor],\n  );\n\n  // Update lexical when disabled changes\n  useIsomorphicLayoutEffect(() => {\n    lexicalEditor.setEditable(!disabled);\n  }, [lexicalEditor]);\n\n  useIsomorphicLayoutEffect(() => {\n    return mergeRegister(\n      lexicalEditor.registerEditableListener(isEditable => {\n        setDisabled(!isEditable);\n      }),\n      lexicalEditor.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\n  return { canShowPlaceholder, disabled, spanRef, lexicalEditor, lexicalInitialConfig };\n}\n"],"names":["React","SentinelNode","mergeRegister","useControllableState","useIsomorphicLayoutEffect","useLexicalStyles","useLexicalEditor","useCanShowPlaceholder","mergeClasses","useLexicalContentEditable","props","defaultValue","customTheme","customNodes","disabled","setDisabled","state","initialState","lexicalStyles","paragraphClassName","paragraph","lexicalInitialConfig","namespace","onError","console","log","nodes","editorState","editable","theme","trim","undefined","lexicalEditor","canShowPlaceholder","spanRef","useCallback","span","setRootElement","setEditable","registerEditableListener","isEditable","registerRootListener","root","style","whiteSpace"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,uCAAuC;AAEpE,SAASC,aAAa,QAAQ,sCAAsC;AACpE,SAASC,oBAAoB,EAAEC,yBAAyB,QAAQ,4BAA4B;AAE5F,SAASC,gBAAgB,QAAQ,iBAAiB;AAClD,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAASC,YAAY,QAAQ,6BAA6B;AAa1D,OAAO,SAASC,0BAA0BC,KAAqC;IAC7E,MAAM,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGF;IAEtC,MAAMG,cAAcH,MAAMG,WAAW,GAAG;WAAIH,MAAMG,WAAW;QAAEZ;KAAa,GAAG;QAACA;KAAa;IAE7F,iFAAiF;IACjF,8CAA8C;IAC9C,MAAM,CAACa,UAAUC,YAAY,GAAGZ,qBAAqB;QACnDa,OAAON,MAAMI,QAAQ;QACrBG,cAAc;IAChB;IAEA,MAAMC,gBAAgBb;IACtB,MAAMc,qBAAqBX,aAAaU,cAAcE,SAAS,EAAER,wBAAAA,kCAAAA,YAAaQ,SAAS;IAEvF,MAAMC,uBAAuB;QAC3BC,WAAW;QACXC,SAASC,QAAQC,GAAG;QACpBC,OAAOb;QACPc,aAAahB;QACbiB,UAAU,CAACd;QACXe,OAAO;YAAE,GAAGjB,WAAW;YAAEQ,WAAWD,mBAAmBW,IAAI,OAAO,KAAKC,YAAYZ;QAAmB;IACxG;IACA,MAAMa,gBAAgB1B,iBAAiBe;IAEvC,MAAMY,qBAAqB1B,sBAAsByB;IAEjD,MAAME,UAAUlC,MAAMmC,WAAW,CAC/B,CAACC;QACC,yCAAyC;QACzCJ,cAAcK,cAAc,CAACD;IAC/B,GACA;QAACJ;KAAc;IAGjB,uCAAuC;IACvC5B,0BAA0B;QACxB4B,cAAcM,WAAW,CAAC,CAACxB;IAC7B,GAAG;QAACkB;KAAc;IAElB5B,0BAA0B;QACxB,OAAOF,cACL8B,cAAcO,wBAAwB,CAACC,CAAAA;YACrCzB,YAAY,CAACyB;QACf,IACAR,cAAcS,oBAAoB,CAACC,CAAAA;YACjC,IAAI,CAACA,MAAM;gBACT;YACF;YAEA,wDAAwD;YACxD,wFAAwF;YACxFA,KAAKC,KAAK,CAACC,UAAU,GAAG;QAC1B;IAEJ,GAAG,EAAE;IAEL,OAAO;QAAEX;QAAoBnB;QAAUoB;QAASF;QAAeX;IAAqB;AACtF"}

package/lib/utilities/useLexicalEditor.js

@@ -0,0 +1,63 @@
+import { $createParagraphNode } from '@fluentui-copilot/react-text-editor';
+import { $getRoot } from '@fluentui-copilot/react-text-editor';
+import { createEditor } from '@fluentui-copilot/react-text-editor';
+import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import * as React from 'react';
+// Merge initial state with history
+const UPDATE_OPTIONS = {
+    tag: 'history-merge'
+};
+function setInitialState(editor, initialState) {
+    if (initialState === null) {
+        return;
+    } else if (initialState === undefined) {
+        editor.update(()=>{
+            const root = $getRoot();
+            if (root.isEmpty()) {
+                root.append($createParagraphNode());
+            }
+        }, UPDATE_OPTIONS);
+    } else {
+        switch(typeof initialState){
+            case 'string':
+                {
+                    const parsedState = editor.parseEditorState(initialState);
+                    editor.setEditorState(parsedState, UPDATE_OPTIONS);
+                    break;
+                }
+            case 'object':
+                {
+                    editor.setEditorState(initialState, UPDATE_OPTIONS);
+                    break;
+                }
+            case 'function':
+                {
+                    editor.update(()=>{
+                        if ($getRoot().isEmpty()) {
+                            initialState(editor);
+                        }
+                    }, UPDATE_OPTIONS);
+                }
+        }
+    }
+}
+export function useLexicalEditor(initialConfig) {
+    const { theme, namespace, nodes, onError, editorState: initialEditorState, html, editable = true } = initialConfig;
+    const [lexicalEditor] = React.useState(()=>{
+        const lexicalEditor = createEditor({
+            editable,
+            html,
+            namespace,
+            nodes,
+            onError: (error)=>onError(error, lexicalEditor),
+            theme
+        });
+        setInitialState(lexicalEditor, initialEditorState);
+        return lexicalEditor;
+    });
+    useIsomorphicLayoutEffect(()=>{
+        const isEditable = initialConfig.editable;
+        lexicalEditor.setEditable(isEditable !== undefined ? isEditable : true);
+    }, []);
+    return lexicalEditor;
+}

package/lib/utilities/useLexicalEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useLexicalEditor.ts"],"sourcesContent":["import type { InitialConfigType, LexicalEditor } from '@fluentui-copilot/react-text-editor';\nimport { $createParagraphNode } from '@fluentui-copilot/react-text-editor';\nimport { $getRoot } from '@fluentui-copilot/react-text-editor';\nimport { createEditor } from '@fluentui-copilot/react-text-editor';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n// Merge initial state with history\nconst UPDATE_OPTIONS = { tag: 'history-merge' };\n\nfunction setInitialState(editor: LexicalEditor, initialState: InitialConfigType['editorState']) {\n  if (initialState === null) {\n    return;\n  } else if (initialState === undefined) {\n    editor.update(() => {\n      const root = $getRoot();\n      if (root.isEmpty()) {\n        root.append($createParagraphNode());\n      }\n    }, UPDATE_OPTIONS);\n  } else {\n    switch (typeof initialState) {\n      case 'string': {\n        const parsedState = editor.parseEditorState(initialState);\n        editor.setEditorState(parsedState, UPDATE_OPTIONS);\n        break;\n      }\n      case 'object': {\n        editor.setEditorState(initialState, UPDATE_OPTIONS);\n        break;\n      }\n      case 'function': {\n        editor.update(() => {\n          if ($getRoot().isEmpty()) {\n            initialState(editor);\n          }\n        }, UPDATE_OPTIONS);\n      }\n    }\n  }\n}\n\nexport function useLexicalEditor(initialConfig: InitialConfigType): LexicalEditor {\n  const { theme, namespace, nodes, onError, editorState: initialEditorState, html, editable = true } = initialConfig;\n\n  const [lexicalEditor] = React.useState(() => {\n    const lexicalEditor = createEditor({\n      editable,\n      html,\n      namespace,\n      nodes,\n      onError: error => onError(error, lexicalEditor),\n      theme,\n    });\n\n    setInitialState(lexicalEditor, initialEditorState);\n\n    return lexicalEditor;\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    const isEditable = initialConfig.editable;\n    lexicalEditor.setEditable(isEditable !== undefined ? isEditable : true);\n  }, []);\n\n  return lexicalEditor;\n}\n"],"names":["$createParagraphNode","$getRoot","createEditor","useIsomorphicLayoutEffect","React","UPDATE_OPTIONS","tag","setInitialState","editor","initialState","undefined","update","root","isEmpty","append","parsedState","parseEditorState","setEditorState","useLexicalEditor","initialConfig","theme","namespace","nodes","onError","editorState","initialEditorState","html","editable","lexicalEditor","useState","error","isEditable","setEditable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,oBAAoB,QAAQ,sCAAsC;AAC3E,SAASC,QAAQ,QAAQ,sCAAsC;AAC/D,SAASC,YAAY,QAAQ,sCAAsC;AACnE,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,YAAYC,WAAW,QAAQ;AAE/B,mCAAmC;AACnC,MAAMC,iBAAiB;IAAEC,KAAK;AAAgB;AAE9C,SAASC,gBAAgBC,MAAqB,EAAEC,YAA8C;IAC5F,IAAIA,iBAAiB,MAAM;QACzB;IACF,OAAO,IAAIA,iBAAiBC,WAAW;QACrCF,OAAOG,MAAM,CAAC;YACZ,MAAMC,OAAOX;YACb,IAAIW,KAAKC,OAAO,IAAI;gBAClBD,KAAKE,MAAM,CAACd;YACd;QACF,GAAGK;IACL,OAAO;QACL,OAAQ,OAAOI;YACb,KAAK;gBAAU;oBACb,MAAMM,cAAcP,OAAOQ,gBAAgB,CAACP;oBAC5CD,OAAOS,cAAc,CAACF,aAAaV;oBACnC;gBACF;YACA,KAAK;gBAAU;oBACbG,OAAOS,cAAc,CAACR,cAAcJ;oBACpC;gBACF;YACA,KAAK;gBAAY;oBACfG,OAAOG,MAAM,CAAC;wBACZ,IAAIV,WAAWY,OAAO,IAAI;4BACxBJ,aAAaD;wBACf;oBACF,GAAGH;gBACL;QACF;IACF;AACF;AAEA,OAAO,SAASa,iBAAiBC,aAAgC;IAC/D,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,KAAK,EAAEC,OAAO,EAAEC,aAAaC,kBAAkB,EAAEC,IAAI,EAAEC,WAAW,IAAI,EAAE,GAAGR;IAErG,MAAM,CAACS,cAAc,GAAGxB,MAAMyB,QAAQ,CAAC;QACrC,MAAMD,gBAAgB1B,aAAa;YACjCyB;YACAD;YACAL;YACAC;YACAC,SAASO,CAAAA,QAASP,QAAQO,OAAOF;YACjCR;QACF;QAEAb,gBAAgBqB,eAAeH;QAE/B,OAAOG;IACT;IAEAzB,0BAA0B;QACxB,MAAM4B,aAAaZ,cAAcQ,QAAQ;QACzCC,cAAcI,WAAW,CAACD,eAAerB,YAAYqB,aAAa;IACpE,GAAG,EAAE;IAEL,OAAOH;AACT"}

package/lib-commonjs/EditorInput.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderEditorInput_unstable: function() {
         return _index.renderEditorInput_unstable;
     },
+    useEditorInputContextValues: function() {
+        return _index.useEditorInputContextValues;
+    },
     useEditorInputStyles_unstable: function() {
         return _index.useEditorInputStyles_unstable;
     },

package/lib-commonjs/EditorInput.js.map

@@ -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":";;;;;;;;;;;IACSA,WAAW;eAAXA,kBAAW;;IAAEC,qBAAqB;eAArBA,4BAAqB;;IAAEC,0BAA0B;eAA1BA,iCAA0B;;IAAEC,6BAA6B;eAA7BA,oCAA6B;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IAAEC,gBAAgB;eAAhBA,uBAAgB;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;;uBAAQ"}
+{"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":";;;;;;;;;;;IACEA,WAAW;eAAXA,kBAAW;;IACXC,qBAAqB;eAArBA,4BAAqB;;IACrBC,0BAA0B;eAA1BA,iCAA0B;;IAC1BC,2BAA2B;eAA3BA,kCAA2B;;IAC3BC,6BAA6B;eAA7BA,oCAA6B;;IAC7BC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,iBAAiB;eAAjBA,wBAAiB;;IACjBC,gBAAgB;eAAhBA,uBAAgB;;IAChBC,uBAAuB;eAAvBA,8BAAuB;;;uBAClB"}

package/lib-commonjs/components/EditorInput/EditorInput.js

@@ -13,9 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useEditorInput = require("./useEditorInput");
 const _renderEditorInput = require("./renderEditorInput");
 const _useEditorInputStylesstyles = require("./useEditorInputStyles.styles");
+const _useEditorInputContextValues = require("./useEditorInputContextValues");
 const EditorInput = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useEditorInput.useEditorInput_unstable)(props, ref);
+    const contextValues = (0, _useEditorInputContextValues.useEditorInputContextValues)(state);
     (0, _useEditorInputStylesstyles.useEditorInputStyles_unstable)(state);
-    return (0, _renderEditorInput.renderEditorInput_unstable)(state);
+    return (0, _renderEditorInput.renderEditorInput_unstable)(state, contextValues);
 });
 EditorInput.displayName = 'EditorInput';

package/lib-commonjs/components/EditorInput/EditorInput.js.map

@@ -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":["EditorInput","React","forwardRef","props","ref","state","useEditorInput_unstable","useEditorInputStyles_unstable","renderEditorInput_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;gCACiB;mCACG;4CACG;AAKvC,MAAMA,cAAAA,WAAAA,GAAqDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBH,OAAOC;IAE7CG,IAAAA,yDAAAA,EAA8BF;IAC9B,OAAOG,IAAAA,6CAAAA,EAA2BH;AACpC;AAEAL,YAAYS,WAAW,GAAG"}
+{"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":["EditorInput","React","forwardRef","props","ref","state","useEditorInput_unstable","contextValues","useEditorInputContextValues","useEditorInputStyles_unstable","renderEditorInput_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;gCACiB;mCACG;4CACG;6CAGF;AAGrC,MAAMA,cAAAA,WAAAA,GAAqDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBH,OAAOC;IAC7C,MAAMG,gBAAgBC,IAAAA,wDAAAA,EAA4BH;IAElDI,IAAAA,yDAAAA,EAA8BJ;IAC9B,OAAOK,IAAAA,6CAAAA,EAA2BL,OAAOE;AAC3C;AAEAP,YAAYW,WAAW,GAAG"}

package/lib-commonjs/components/EditorInput/EditorInput.types.js

@@ -1,6 +1,4 @@
-/**
- * Data passed to the `onChange` callback when the chat input's value changes.
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

package/lib-commonjs/components/EditorInput/EditorInput.types.js.map

@@ -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 | 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<\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"}
+{"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":""}

package/lib-commonjs/components/EditorInput/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderEditorInput_unstable: function() {
         return _renderEditorInput.renderEditorInput_unstable;
     },
+    useEditorInputContextValues: function() {
+        return _useEditorInputContextValues.useEditorInputContextValues;
+    },
     useEditorInputStyles_unstable: function() {
         return _useEditorInputStylesstyles.useEditorInputStyles_unstable;
     },
@@ -38,3 +41,4 @@ const _EditorInput = require("./EditorInput");
 const _renderEditorInput = require("./renderEditorInput");
 const _useEditorInput = require("./useEditorInput");
 const _useEditorInputStylesstyles = require("./useEditorInputStyles.styles");
+const _useEditorInputContextValues = require("./useEditorInputContextValues");

package/lib-commonjs/components/EditorInput/index.js.map

@@ -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","editorInputClassNames","renderEditorInput_unstable","useEditorInputStyles_unstable","useEditorInput_unstable","useInputClassName","useLexicalStyles","usePlaceholderClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,WAAW;eAAXA,wBAAW;;IAIXC,qBAAqB;eAArBA,iDAAqB;;IAFrBC,0BAA0B;eAA1BA,6CAA0B;;IAEHC,6BAA6B;eAA7BA,yDAA6B;;IADpDC,uBAAuB;eAAvBA,uCAAuB;;IAC+BC,iBAAiB;eAAjBA,6CAAiB;;IAAEC,gBAAgB;eAAhBA,4CAAgB;;IAAEC,uBAAuB;eAAvBA,mDAAuB;;;6BAJ/F;mCAEe;gCACH;4CAC2F"}
+{"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","editorInputClassNames","renderEditorInput_unstable","useEditorInputContextValues","useEditorInputStyles_unstable","useEditorInput_unstable","useInputClassName","useLexicalStyles","usePlaceholderClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,WAAW;eAAXA,wBAAW;;IAWlBC,qBAAqB;eAArBA,iDAAqB;;IAHdC,0BAA0B;eAA1BA,6CAA0B;;IAS1BC,2BAA2B;eAA3BA,wDAA2B;;IALlCC,6BAA6B;eAA7BA,yDAA6B;;IAHtBC,uBAAuB;eAAvBA,uCAAuB;;IAI9BC,iBAAiB;eAAjBA,6CAAiB;;IACjBC,gBAAgB;eAAhBA,4CAAgB;;IAChBC,uBAAuB;eAAvBA,mDAAuB;;;6BAfG;mCAQe;gCACH;4CAOjC;6CACqC"}

package/lib-commonjs/components/EditorInput/renderEditorInput.js

@@ -12,30 +12,31 @@ const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactcomponents = require("@fluentui/react-components");
 const _reacttexteditor = require("@fluentui-copilot/react-text-editor");
 const _reactchatinputplugins = require("@fluentui-copilot/react-chat-input-plugins");
-const renderEditorInput_unstable = (state)=>{
+const renderEditorInput_unstable = (state, contextValues)=>{
     (0, _reactcomponents.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacttexteditor.LexicalComposer, {
-            initialConfig: state.lexicalInitialConfig,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacttexteditor.LexicalComposerContext.Provider, {
+            value: contextValues.lexicalComposer,
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(state.textPlugin, {
                     contentEditable: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
                     ErrorBoundary: _reacttexteditor.LexicalErrorBoundary,
-                    placeholder: state.placeholderValue ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.placeholderValue, {}) : null
+                    placeholder: null
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                     children: [
+                        state.placeholderValue ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.placeholderValue, {}) : null,
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactchatinputplugins.BasicFunctionalityPlugin, {
                             onContentChange: state.handleOnChange,
                             onPaste: state.onPaste,
                             trimWhitespace: state.trimWhiteSpace,
                             isSentinelNodeEnabled: state.isSentinelNodeEnabled
                         }),
-                        state.history && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacttexteditor.LexicalHistoryPlugin, {})
+                        state.history && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacttexteditor.LexicalHistoryPlugin, {}),
+                        state.editorRef && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacttexteditor.LexicalEditorRefPlugin, {
+                            editorRef: state.editorRef
+                        })
                     ]
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacttexteditor.LexicalEditorRefPlugin, {
-                    editorRef: state.editorRef
                 })
             ]
         })

package/lib-commonjs/components/EditorInput/renderEditorInput.js.map

@@ -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 { JSXElement } 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): JSXElement => {\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":["renderEditorInput_unstable","state","assertSlots","_jsx","root","_jsxs","LexicalComposer","initialConfig","lexicalInitialConfig","textPlugin","contentEditable","input","ErrorBoundary","LexicalErrorBoundary","placeholder","placeholderValue","_Fragment","BasicFunctionalityPlugin","onContentChange","handleOnChange","onPaste","trimWhitespace","trimWhiteSpace","isSentinelNodeEnabled","history","LexicalHistoryPlugin","LexicalEditorRefPlugin","editorRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;4BAhBb;iCAE4B;iCAQrB;uCACkC;AAKlC,MAAMA,6BAA6B,CAACC;IACzCC,IAAAA,4BAAAA,EAA8BD;IAE9B,OAAA,WAAA,GACEE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA;kBACT,WAAA,GAAAC,IAAAA,gBAAA,EAACC,gCAAAA,EAAAA;YAAgBC,eAAeN,MAAMO,oBAAoB;;8BACxDL,IAAAA,eAAA,EAACF,MAAMQ,UAAU,EAAA;oBACfC,iBAAAA,WAAAA,GAAiBP,IAAAA,eAAA,EAACF,MAAMU,KAAK,EAAA,CAAA;oBAC7BC,eAAeC,qCAAAA;oBACfC,aAAab,MAAMc,gBAAgB,GAAA,WAAA,GAAGZ,IAAAA,eAAA,EAACF,MAAMc,gBAAgB,EAAA,CAAA,KAAM;;8BAErEV,IAAAA,gBAAA,EAAAW,oBAAA,EAAA;;sCACEb,IAAAA,eAAA,EAACc,+CAAAA,EAAAA;4BACCC,iBAAiBjB,MAAMkB,cAAc;4BACrCC,SAASnB,MAAMmB,OAAO;4BACtBC,gBAAgBpB,MAAMqB,cAAc;4BACpCC,uBAAuBtB,MAAMsB,qBAAqB;;wBAEnDtB,MAAMuB,OAAO,IAAA,WAAA,GAAIrB,IAAAA,eAAA,EAACsB,qCAAAA,EAAAA,CAAAA;;;8BAErBtB,IAAAA,eAAA,EAACuB,uCAAAA,EAAAA;oBAAuBC,WAAW1B,MAAM0B,SAAS;;;;;AAI1D"}
+{"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":["renderEditorInput_unstable","state","contextValues","assertSlots","_jsx","root","_jsxs","LexicalComposerContext","Provider","value","lexicalComposer","textPlugin","contentEditable","input","ErrorBoundary","LexicalErrorBoundary","placeholder","_Fragment","placeholderValue","BasicFunctionalityPlugin","onContentChange","handleOnChange","onPaste","trimWhitespace","trimWhiteSpace","isSentinelNodeEnabled","history","LexicalHistoryPlugin","editorRef","LexicalEditorRefPlugin"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;4BAhBb;iCAE4B;iCAOrB;uCACkC;AAMlC,MAAMA,6BAA6B,CACxCC,OACAC;IAEAC,IAAAA,4BAAAA,EAA8BF;IAE9B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;kBACT,WAAA,GAAAC,IAAAA,gBAAA,EAACC,uCAAAA,CAAuBC,QAAQ,EAAA;YAACC,OAAOP,cAAcQ,eAAe;;8BACnEN,IAAAA,eAAA,EAACH,MAAMU,UAAU,EAAA;oBAACC,iBAAAA,WAAAA,GAAiBR,IAAAA,eAAA,EAACH,MAAMY,KAAK,EAAA,CAAA;oBAAKC,eAAeC,qCAAAA;oBAAsBC,aAAa;;8BACtGV,IAAAA,gBAAA,EAAAW,oBAAA,EAAA;;wBACGhB,MAAMiB,gBAAgB,GAAA,WAAA,GAAGd,IAAAA,eAAA,EAACH,MAAMiB,gBAAgB,EAAA,CAAA,KAAM;sCACvDd,IAAAA,eAAA,EAACe,+CAAAA,EAAAA;4BACCC,iBAAiBnB,MAAMoB,cAAc;4BACrCC,SAASrB,MAAMqB,OAAO;4BACtBC,gBAAgBtB,MAAMuB,cAAc;4BACpCC,uBAAuBxB,MAAMwB,qBAAqB;;wBAEnDxB,MAAMyB,OAAO,IAAA,WAAA,GAAItB,IAAAA,eAAA,EAACuB,qCAAAA,EAAAA,CAAAA;wBAClB1B,MAAM2B,SAAS,IAAA,WAAA,GAAIxB,IAAAA,eAAA,EAACyB,uCAAAA,EAAAA;4BAAuBD,WAAW3B,MAAM2B,SAAS;;;;;;;AAKhF"}

package/lib-commonjs/components/EditorInput/useEditorInput.js

@@ -14,8 +14,9 @@ const _reactcomponents = require("@fluentui/react-components");
 const _chatinputplugins = require("@fluentui-copilot/chat-input-plugins");
 const _reacttexteditor = require("@fluentui-copilot/react-text-editor");
 const _reactutilities = require("@fluentui/react-utilities");
+const _useLexicalContentEditable = require("../../utilities/useLexicalContentEditable");
 const useEditorInput_unstable = (props, ref)=>{
-    const { onChange, onPaste, trimWhiteSpace = false, textPlugin = _reacttexteditor.LexicalPlainTextPlugin, history = true, editorRef: userEditorRef, customTheme, isSentinelNodeEnabled = true } = props;
+    const { onChange, onPaste, trimWhiteSpace = false, textPlugin = _reacttexteditor.LexicalPlainTextPlugin, history = true, editorRef, isSentinelNodeEnabled = true } = props;
     const { root, primary } = (0, _reactcomponents.getPartitionedNativeProps)({
         primarySlotTagName: 'span',
         props,
@@ -25,51 +26,6 @@ const useEditorInput_unstable = (props, ref)=>{
             'defaultValue'
         ]
     });
-    const editorRef = (0, _reactcomponents.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] = (0, _reactutilities.useControllableState)({
-        state: props.disabled,
-        initialState: false
-    });
-    const customNodes = props.customNodes ? [
-        ...props.customNodes,
-        _chatinputplugins.SentinelNode
-    ] : [
-        _chatinputplugins.SentinelNode
-    ];
-    const spanRef = _react.useCallback((span)=>{
-        var _editorRef_current;
-        (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.setRootElement(span);
-    }, [
-        editorRef
-    ]);
-    // Update lexical when disabled changes
-    (0, _reactcomponents.useIsomorphicLayoutEffect)(()=>{
-        if (editorRef.current) {
-            var _editorRef_current;
-            (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.setEditable(!disabled);
-        }
-    }, [
-        disabled
-    ]);
-    (0, _reactcomponents.useIsomorphicLayoutEffect)(()=>{
-        if (editorRef.current) {
-            var _editorRef_current;
-            return (0, _reacttexteditor.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 +33,19 @@ const useEditorInput_unstable = (props, ref)=>{
     }, [
         onChange
     ]);
-    const defaultValueFunction = useDefaultValueFunction(props);
-    const placeholderValue = _reactcomponents.slot.optional(props.placeholderValue, {
-        elementType: 'span'
+    const { canShowPlaceholder, spanRef, disabled, lexicalEditor, lexicalInitialConfig } = (0, _useLexicalContentEditable.useLexicalContentEditable)({
+        customNodes: props.customNodes,
+        defaultValue: useDefaultValueFunction(props),
+        disabled: props.disabled
     });
+    const placeholderValue = canShowPlaceholder ? _reactcomponents.slot.optional(props.placeholderValue, {
+        elementType: 'span'
+    }) : undefined;
     const placeholderId = (0, _reactcomponents.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 +68,12 @@ const useEditorInput_unstable = (props, ref)=>{
                 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 +81,8 @@ const useEditorInput_unstable = (props, ref)=>{
         handleOnChange,
         trimWhiteSpace,
         history,
-        isSentinelNodeEnabled
+        isSentinelNodeEnabled,
+        lexicalEditor
     };
 };
 function useDefaultValueFunction(props) {

package/lib-commonjs/components/EditorInput/useEditorInput.js.map

@@ -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":["useEditorInput_unstable","props","ref","onChange","onPaste","trimWhiteSpace","textPlugin","LexicalPlainTextPlugin","history","editorRef","userEditorRef","customTheme","isSentinelNodeEnabled","root","primary","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","useMergedRefs","React","useRef","disabled","setDisabled","useControllableState","state","initialState","customNodes","SentinelNode","spanRef","useCallback","span","current","setRootElement","useIsomorphicLayoutEffect","setEditable","mergeRegister","registerEditableListener","isEditable","registerRootListener","style","whiteSpace","handleOnChange","newValue","value","defaultValueFunction","useDefaultValueFunction","placeholderValue","slot","optional","elementType","placeholderId","useId","id","components","input","always","defaultProps","role","contentEditable","undefined","suppressContentEditableWarning","tabIndex","lexicalInitialConfig","namespace","onError","console","error","nodes","editorState","theme","targetDocument","useFluent","requestAnimationFrame","defaultView","useState","defaultValue","onDefaultValueSet","insertDefaultValueFunction","$insertNodes","$createTextNode","readDefaultValueFunction","text","$getRoot","getTextContent","replace","SENTINEL_VALUE","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"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":["useEditorInput_unstable","props","ref","onChange","onPaste","trimWhiteSpace","textPlugin","LexicalPlainTextPlugin","history","editorRef","isSentinelNodeEnabled","root","primary","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","handleOnChange","React","useCallback","newValue","value","canShowPlaceholder","spanRef","disabled","lexicalEditor","lexicalInitialConfig","useLexicalContentEditable","customNodes","defaultValue","useDefaultValueFunction","placeholderValue","slot","optional","elementType","undefined","placeholderId","useId","id","describedBy","components","input","always","defaultProps","useMergedRefs","role","contentEditable","suppressContentEditableWarning","tabIndex","targetDocument","useFluent","requestAnimationFrame","defaultView","defaultValueFunction","useState","onDefaultValueSet","insertDefaultValueFunction","$insertNodes","$createTextNode","readDefaultValueFunction","text","$getRoot","getTextContent","replace","SENTINEL_VALUE","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/EditorInput/useEditorInputContextValues.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useEditorInputContextValues", {
+    enumerable: true,
+    get: function() {
+        return useEditorInputContextValues;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reacttexteditor = require("@fluentui-copilot/react-text-editor");
+function useEditorInputContextValues(state) {
+    const { lexicalInitialConfig, lexicalEditor } = state;
+    const { theme } = lexicalInitialConfig;
+    const context = _react.useMemo(()=>[
+            lexicalEditor,
+            (0, _reacttexteditor.createLexicalComposerContext)(null, theme)
+        ], [
+        lexicalEditor,
+        theme
+    ]);
+    return {
+        lexicalComposer: context
+    };
+}

package/lib-commonjs/components/EditorInput/useEditorInputContextValues.js.map

@@ -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":["useEditorInputContextValues","state","lexicalInitialConfig","lexicalEditor","theme","context","React","useMemo","createLexicalComposerContext","lexicalComposer"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;iCAEsB;AAGtC,SAASA,4BAA4BC,KAAuB;IACjE,MAAM,EAAEC,oBAAoB,EAAEC,aAAa,EAAE,GAAGF;IAChD,MAAM,EAAEG,KAAK,EAAE,GAAGF;IAElB,MAAMG,UAA4CC,OAAMC,OAAO,CAC7D,IAAM;YAACJ;YAAeK,IAAAA,6CAAAA,EAA6B,MAAMJ;SAAO,EAChE;QAACD;QAAeC;KAAM;IAGxB,OAAO;QAAEK,iBAAiBJ;IAAQ;AACpC"}

package/lib-commonjs/components/EditorInput/useEditorInputStyles.styles.js

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

package/lib-commonjs/components/EditorInput/useEditorInputStyles.styles.js.map

@@ -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":["editorInputClassNames","useEditorInputStyles_unstable","gridArea","whiteSpace","color","root","input","placeholderValue","display","__resetStyles","__styles","paragraph","jrapky","margin","textAlign","B74szlk","fsow6f","s","zIndex","sj55zd","disabled","rootClassName","state","placeholderClassName","useStyles","useRootClassName","useInputClassName","lexicalInitialConfig","className","theme","mergeClasses","inputClassName","useLexicalStyles","styles","placeholderDisabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,qBAAAA;eAAAA;;IA+CNC,6BAAMA;eAANA;;IAbLC,iBAAU;eAAVA;;IAvBAC,gBAAY;eAAZA;;IAkBEC,uBAAO;eAAPA;;;iCAlC8C;AAK3C,MAAMJ,wBAA0D;UACrEK;WACAC;sBACAC;AACF;AAEA;;CAEC,SAECC,mBAASC,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;AACTN,MAAAA,mBAAYO,IAAAA,yBAAA,EAAA;IACdC,WAAA;QAEAC,QAAO;QACLD,QAAAA;gBACEE;iBACAC;QACFC,SAAA;QACCC,QAAA;IAEH;;OAEEd;QAAAA;YAAAA;YAAU;gBAEVE,GAAAA,CAAAA;;SACA;QAAA;KAAyB;;MAGvBA,0BAAOK,IAAAA,8BAAA,EAAA,WAAA,MAAA;OACT;QAAA;KAAA;IACFQ,GAAG;QAAA;KAAA;AAEH;AACEf,MAAAA,oBAAUO,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MACVS,YAAQR,IAAAA,yBAAA,EAAA;yBACD;QACNS,QAAA;IAEH;;;;KAEgD;;AAMhD,MAAOlB,gCAAMA,CAAAA;;UAIX,EACAmB,QAAMC,KACNC;UACAC,uBAAeC;UAEfF,gBAAoBG;UAEpBH,iBAAqBI;UAErBJ,SAAMK;UACJtB,IAAGiB,CAAAA,SAAMK,GAAAA,IAAAA,6BAAoB,EAAA3B,sBAAAK,IAAA,EAAAgB,eAAAC,MAAAjB,IAAA,CAAAuB,SAAA;UAC7BC,KAAAA,CAAAA,SAAO,GAAAC,IAAAA,6BAAA,EAAA9B,sBAAAM,KAAA,EAAAyB,gBAAAT,MAAAhB,KAAA,CAAAsB,SAAA;8BAAKI,GAAAA;iBAAoBL,oBAASA;eAA2B;YACtE,GAAAK,kBAAA;YAEA,GAAIV,MAAMf,oBAAkB,CAAAsB,KAAA;;;QAS5BP,MAAOA,gBAAAA,EAAAA;QACPA,MAAAf,gBAAA,CAAAqB,SAAA,GAAAE,IAAAA,6BAAA,EAAA9B,sBAAAO,gBAAA,EAAAgB,sBAAAH,YAAAa,OAAAC,mBAAA,EAAAZ,MAAAf,gBAAA,CAAAqB,SAAA"}
+{"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":["editorInputClassNames","useEditorInputStyles_unstable","gridArea","whiteSpace","color","root","input","placeholderValue","display","__resetStyles","__styles","paragraph","jrapky","margin","textAlign","B74szlk","fsow6f","s","zIndex","sj55zd","disabled","rootClassName","state","placeholderClassName","useStyles","useRootClassName","useInputClassName","className","mergeClasses","inputClassName","styles","placeholderDisabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,qBAAAA;eAAAA;;IA+CNC,6BAAMA;eAANA;;IAbLC,iBAAU;eAAVA;;IAvBAC,gBAAY;eAAZA;;IAkBEC,uBAAO;eAAPA;;;iCAlC8C;AAK3C,MAAMJ,wBAA0D;UACrEK;WACAC;sBACAC;AACF;AAEA;;CAEC,SAECC,mBAASC,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;AACTN,MAAAA,mBAAYO,IAAAA,yBAAA,EAAA;IACdC,WAAA;QAEAC,QAAO;QACLD,QAAAA;gBACEE;iBACAC;QACFC,SAAA;QACCC,QAAA;IAEH;;OAEEd;QAAAA;YAAAA;YAAU;gBAEVE,GAAAA,CAAAA;;SACA;QAAA;KAAyB;;MAGvBA,0BAAOK,IAAAA,8BAAA,EAAA,WAAA,MAAA;OACT;QAAA;KAAA;IACFQ,GAAG;QAAA;KAAA;AAEH;AACEf,MAAAA,oBAAUO,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MACVS,YAAQR,IAAAA,yBAAA,EAAA;yBACD;QACNS,QAAA;IAEH;;;;KAEgD;;AAMhD,MAAOlB,gCAAMA,CAAAA;;UAIX,EACAmB,QAAMC,KACNC;UACAC,uBAAeC;UAEfF,gBAAoBG;UAEpBH,iBAAqBI;UAEjBJ,SAAMf;UACRe,IAAAA,CAAAA,SAAMf,GAAAA,IAAAA,6BAAiBoB,EAAAA,sBACrB3B,IAAAA,EAAAA,eAAsBO,MAAAA,IAAAA,CAAAA,SACtBgB;UAIJjB,KAAA,CAAAqB,SAAA,GAAAC,IAAAA,6BAAA,EAAA5B,sBAAAM,KAAA,EAAAuB,gBAAAP,MAAAhB,KAAA,CAAAqB,SAAA;QAEAL,MAAOA,gBAAAA,EAAAA;QACPA,MAAAf,gBAAA,CAAAoB,SAAA,GAAAC,IAAAA,6BAAA,EAAA5B,sBAAAO,gBAAA,EAAAgB,sBAAAH,YAAAU,OAAAC,mBAAA,EAAAT,MAAAf,gBAAA,CAAAoB,SAAA"}

package/lib-commonjs/components/EditorInput/useEditorInputStyles.styles.raw.js

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

package/lib-commonjs/components/EditorInput/useEditorInputStyles.styles.raw.js.map

@@ -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":["editorInputClassNames","useEditorInputStyles_unstable","useInputClassName","useLexicalStyles","usePlaceholderClassName","root","input","placeholderValue","useRootClassName","makeResetStyles","display","whiteSpace","makeStyles","paragraph","margin","textAlign","zIndex","gridArea","color","tokens","colorNeutralForeground4","typographyStyles","body1","width","useStyles","placeholderDisabled","colorNeutralForegroundDisabled","state","disabled","placeholderClassName","rootClassName","inputClassName","styles","className","mergeClasses","lexicalInitialConfig","theme"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,qBAAAA;eAAAA;;IA+CAC,6BAAAA;eAAAA;;IAdAC,iBAAAA;eAAAA;;IAnBAC,gBAAAA;eAAAA;;IAOAC,uBAAAA;eAAAA;;;iCA1B6C;wBACjB;AAIlC,MAAMJ,wBAA0D;IACrEK,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACpB;AAEA;;CAEC,GACD,MAAMC,mBAAmBC,IAAAA,gCAAAA,EAAgB;IACvCC,SAAS;IACTC,YAAY;AACd;AAEO,MAAMR,mBAAmBS,IAAAA,2BAAAA,EAAW;IACzCC,WAAW;QACTC,QAAQ;QACRC,WAAW;IACb;AACF;AAEO,MAAMX,0BAA0BK,IAAAA,gCAAAA,EAAgB;IACrDO,QAAQ;IACRC,UAAU;IAEVC,OAAOC,cAAAA,CAAOC,uBAAuB;IACrC,GAAGC,wBAAAA,CAAiBC,KAAK;IAEzB,kCAAkC;QAChCJ,OAAO;IACT;AACF;AAEO,MAAMhB,oBAAoBO,IAAAA,gCAAAA,EAAgB;IAC/CQ,UAAU;IACVD,QAAQ;IACRO,OAAO;AACT;AAEA,MAAMC,YAAYZ,IAAAA,2BAAAA,EAAW;IAC3Ba,qBAAqB;QACnBP,OAAOC,cAAAA,CAAOO,8BAA8B;IAC9C;AACF;AAIO,MAAMzB,gCAAgC,CAAC0B;IAC5C;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,uBAAuBzB;IAC7B,MAAM0B,gBAAgBtB;IACtB,MAAMuB,iBAAiB7B;IACvB,MAAM8B,SAASR;IAEfG,MAAMtB,IAAI,CAAC4B,SAAS,GAAGC,IAAAA,6BAAAA,EAAalC,sBAAsBK,IAAI,EAAEyB,eAAeH,MAAMtB,IAAI,CAAC4B,SAAS;IAEnGN,MAAMrB,KAAK,CAAC2B,SAAS,GAAGC,IAAAA,6BAAAA,EAAalC,sBAAsBM,KAAK,EAAEyB,gBAAgBJ,MAAMrB,KAAK,CAAC2B,SAAS;IAEvGN,MAAMQ,oBAAoB,GAAG;QAC3B,GAAGR,MAAMQ,oBAAoB;QAC7BC,OAAO;YAAE,GAAGjC,kBAAkB;YAAE,GAAGwB,MAAMQ,oBAAoB,CAACC,KAAK;QAAC;IACtE;IAEA,IAAIT,MAAMpB,gBAAgB,EAAE;QAC1BoB,MAAMpB,gBAAgB,CAAC0B,SAAS,GAAGC,IAAAA,6BAAAA,EACjClC,sBAAsBO,gBAAgB,EACtCsB,sBACAD,YAAYI,OAAOP,mBAAmB,EACtCE,MAAMpB,gBAAgB,CAAC0B,SAAS;IAEpC;IAEA,OAAON;AACT"}
+{"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":["editorInputClassNames","useEditorInputStyles_unstable","useInputClassName","useLexicalStyles","usePlaceholderClassName","root","input","placeholderValue","useRootClassName","makeResetStyles","display","whiteSpace","makeStyles","paragraph","margin","textAlign","zIndex","gridArea","color","tokens","colorNeutralForeground4","typographyStyles","body1","width","useStyles","placeholderDisabled","colorNeutralForegroundDisabled","state","disabled","placeholderClassName","rootClassName","inputClassName","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,qBAAAA;eAAAA;;IA+CAC,6BAAAA;eAAAA;;IAdAC,iBAAAA;eAAAA;;IAnBAC,gBAAAA;eAAAA;;IAOAC,uBAAAA;eAAAA;;;iCA1B6C;wBACjB;AAIlC,MAAMJ,wBAA0D;IACrEK,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACpB;AAEA;;CAEC,GACD,MAAMC,mBAAmBC,IAAAA,gCAAAA,EAAgB;IACvCC,SAAS;IACTC,YAAY;AACd;AAEO,MAAMR,mBAAmBS,IAAAA,2BAAAA,EAAW;IACzCC,WAAW;QACTC,QAAQ;QACRC,WAAW;IACb;AACF;AAEO,MAAMX,0BAA0BK,IAAAA,gCAAAA,EAAgB;IACrDO,QAAQ;IACRC,UAAU;IAEVC,OAAOC,cAAAA,CAAOC,uBAAuB;IACrC,GAAGC,wBAAAA,CAAiBC,KAAK;IAEzB,kCAAkC;QAChCJ,OAAO;IACT;AACF;AAEO,MAAMhB,oBAAoBO,IAAAA,gCAAAA,EAAgB;IAC/CQ,UAAU;IACVD,QAAQ;IACRO,OAAO;AACT;AAEA,MAAMC,YAAYZ,IAAAA,2BAAAA,EAAW;IAC3Ba,qBAAqB;QACnBP,OAAOC,cAAAA,CAAOO,8BAA8B;IAC9C;AACF;AAIO,MAAMzB,gCAAgC,CAAC0B;IAC5C;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,uBAAuBzB;IAC7B,MAAM0B,gBAAgBtB;IACtB,MAAMuB,iBAAiB7B;IACvB,MAAM8B,SAASR;IAEfG,MAAMtB,IAAI,CAAC4B,SAAS,GAAGC,IAAAA,6BAAAA,EAAalC,sBAAsBK,IAAI,EAAEyB,eAAeH,MAAMtB,IAAI,CAAC4B,SAAS;IAEnGN,MAAMrB,KAAK,CAAC2B,SAAS,GAAGC,IAAAA,6BAAAA,EAAalC,sBAAsBM,KAAK,EAAEyB,gBAAgBJ,MAAMrB,KAAK,CAAC2B,SAAS;IAEvG,IAAIN,MAAMpB,gBAAgB,EAAE;QAC1BoB,MAAMpB,gBAAgB,CAAC0B,SAAS,GAAGC,IAAAA,6BAAAA,EACjClC,sBAAsBO,gBAAgB,EACtCsB,sBACAD,YAAYI,OAAOP,mBAAmB,EACtCE,MAAMpB,gBAAgB,CAAC0B,SAAS;IAEpC;IAEA,OAAON;AACT"}