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

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"}

package/lib-commonjs/index.js

@@ -33,11 +33,23 @@ _export(exports, {
     useAnimatedPlaceholder_unstable: function() {
         return _AnimatedPlaceholder.useAnimatedPlaceholder_unstable;
     },
+    useEditorInputContextValues: function() {
+        return _EditorInput.useEditorInputContextValues;
+    },
     useEditorInputStyles_unstable: function() {
         return _EditorInput.useEditorInputStyles_unstable;
     },
     useEditorInput_unstable: function() {
         return _EditorInput.useEditorInput_unstable;
+    },
+    useInputClassName: function() {
+        return _EditorInput.useInputClassName;
+    },
+    useLexicalStyles: function() {
+        return _EditorInput.useLexicalStyles;
+    },
+    usePlaceholderClassName: function() {
+        return _EditorInput.usePlaceholderClassName;
     }
 });
 const _EditorInput = require("./EditorInput");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export type { EditorInputProps, EditorInputSlots, EditorInputState, EditorInputValueData } from './EditorInput';\nexport {\n  EditorInput,\n  editorInputClassNames,\n  renderEditorInput_unstable,\n  useEditorInputStyles_unstable,\n  useEditorInput_unstable,\n} from './EditorInput';\n\nexport {\n  AnimatedPlaceholder,\n  renderAnimatedPlaceholder_unstable,\n  useAnimatedPlaceholder_unstable,\n  animatedPlaceholderClassNames,\n  useAnimatedPlaceholderStyles_unstable,\n} from './AnimatedPlaceholder';\nexport type {\n  AnimatedPlaceholderProps,\n  AnimatedPlaceholderSlots,\n  AnimatedPlaceholderState,\n} from './AnimatedPlaceholder';\n"],"names":["AnimatedPlaceholder","EditorInput","animatedPlaceholderClassNames","editorInputClassNames","renderAnimatedPlaceholder_unstable","renderEditorInput_unstable","useAnimatedPlaceholderStyles_unstable","useAnimatedPlaceholder_unstable","useEditorInputStyles_unstable","useEditorInput_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAUEA,mBAAmB;eAAnBA,wCAAmB;;IARnBC,WAAW;eAAXA,wBAAW;;IAWXC,6BAA6B;eAA7BA,kDAA6B;;IAV7BC,qBAAqB;eAArBA,kCAAqB;;IAQrBC,kCAAkC;eAAlCA,uDAAkC;;IAPlCC,0BAA0B;eAA1BA,uCAA0B;;IAU1BC,qCAAqC;eAArCA,0DAAqC;;IAFrCC,+BAA+B;eAA/BA,oDAA+B;;IAP/BC,6BAA6B;eAA7BA,0CAA6B;;IAC7BC,uBAAuB;eAAvBA,oCAAuB;;;6BAClB;qCAQA"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export type {\n  EditorInputContextValues,\n  EditorInputProps,\n  EditorInputSlots,\n  EditorInputState,\n  EditorInputValueData,\n} from './EditorInput';\nexport {\n  EditorInput,\n  editorInputClassNames,\n  renderEditorInput_unstable,\n  useEditorInputContextValues,\n  useEditorInputStyles_unstable,\n  useEditorInput_unstable,\n  useInputClassName,\n  useLexicalStyles,\n  usePlaceholderClassName,\n} from './EditorInput';\n\nexport {\n  AnimatedPlaceholder,\n  renderAnimatedPlaceholder_unstable,\n  useAnimatedPlaceholder_unstable,\n  animatedPlaceholderClassNames,\n  useAnimatedPlaceholderStyles_unstable,\n} from './AnimatedPlaceholder';\nexport type {\n  AnimatedPlaceholderProps,\n  AnimatedPlaceholderSlots,\n  AnimatedPlaceholderState,\n} from './AnimatedPlaceholder';\n"],"names":["AnimatedPlaceholder","EditorInput","animatedPlaceholderClassNames","editorInputClassNames","renderAnimatedPlaceholder_unstable","renderEditorInput_unstable","useAnimatedPlaceholderStyles_unstable","useAnimatedPlaceholder_unstable","useEditorInputContextValues","useEditorInputStyles_unstable","useEditorInput_unstable","useInputClassName","useLexicalStyles","usePlaceholderClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAoBEA,mBAAmB;eAAnBA,wCAAmB;;IAZnBC,WAAW;eAAXA,wBAAW;;IAeXC,6BAA6B;eAA7BA,kDAA6B;;IAd7BC,qBAAqB;eAArBA,kCAAqB;;IAYrBC,kCAAkC;eAAlCA,uDAAkC;;IAXlCC,0BAA0B;eAA1BA,uCAA0B;;IAc1BC,qCAAqC;eAArCA,0DAAqC;;IAFrCC,+BAA+B;eAA/BA,oDAA+B;;IAX/BC,2BAA2B;eAA3BA,wCAA2B;;IAC3BC,6BAA6B;eAA7BA,0CAA6B;;IAC7BC,uBAAuB;eAAvBA,oCAAuB;;IACvBC,iBAAiB;eAAjBA,8BAAiB;;IACjBC,gBAAgB;eAAhBA,6BAAgB;;IAChBC,uBAAuB;eAAvBA,oCAAuB;;;6BAClB;qCAQA"}

package/lib-commonjs/utilities/useCanShowPlaceholder.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCanShowPlaceholder", {
+    enumerable: true,
+    get: function() {
+        return useCanShowPlaceholder;
+    }
+});
+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");
+const _reactcomponents = require("@fluentui/react-components");
+function getCanShowPlaceholder(editor) {
+    return editor.getEditorState().read(()=>(0, _reacttexteditor.$canShowPlaceholder)(editor.isComposing()));
+}
+function useCanShowPlaceholder(editor) {
+    const [canShowPlaceholder, setCanShowPlaceholder] = _react.useState(()=>getCanShowPlaceholder(editor));
+    (0, _reactcomponents.useIsomorphicLayoutEffect)(()=>{
+        function updateCanShowPlaceholder() {
+            setCanShowPlaceholder(getCanShowPlaceholder(editor));
+        }
+        return (0, _reacttexteditor.mergeRegister)(editor.registerUpdateListener(updateCanShowPlaceholder), editor.registerEditableListener(updateCanShowPlaceholder));
+    }, [
+        editor
+    ]);
+    return canShowPlaceholder;
+}

package/lib-commonjs/utilities/useCanShowPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useCanShowPlaceholder.ts"],"sourcesContent":["import * as React from 'react';\nimport type { LexicalEditor } from '@fluentui-copilot/react-text-editor';\nimport { $canShowPlaceholder, mergeRegister } from '@fluentui-copilot/react-text-editor';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-components';\n\nfunction getCanShowPlaceholder(editor: LexicalEditor): boolean {\n  return editor.getEditorState().read(() => $canShowPlaceholder(editor.isComposing()));\n}\n\nexport function useCanShowPlaceholder(editor: LexicalEditor): boolean {\n  const [canShowPlaceholder, setCanShowPlaceholder] = React.useState(() => getCanShowPlaceholder(editor));\n\n  useIsomorphicLayoutEffect(() => {\n    function updateCanShowPlaceholder() {\n      setCanShowPlaceholder(getCanShowPlaceholder(editor));\n    }\n\n    return mergeRegister(\n      editor.registerUpdateListener(updateCanShowPlaceholder),\n      editor.registerEditableListener(updateCanShowPlaceholder),\n    );\n  }, [editor]);\n\n  return canShowPlaceholder;\n}\n"],"names":["useCanShowPlaceholder","getCanShowPlaceholder","editor","getEditorState","read","$canShowPlaceholder","isComposing","canShowPlaceholder","setCanShowPlaceholder","React","useState","useIsomorphicLayoutEffect","updateCanShowPlaceholder","mergeRegister","registerUpdateListener","registerEditableListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASgBA;;;eAAAA;;;;iEATO;iCAE4B;iCACT;AAE1C,SAASC,sBAAsBC,MAAqB;IAClD,OAAOA,OAAOC,cAAc,GAAGC,IAAI,CAAC,IAAMC,IAAAA,oCAAAA,EAAoBH,OAAOI,WAAW;AAClF;AAEO,SAASN,sBAAsBE,MAAqB;IACzD,MAAM,CAACK,oBAAoBC,sBAAsB,GAAGC,OAAMC,QAAQ,CAAC,IAAMT,sBAAsBC;IAE/FS,IAAAA,0CAAAA,EAA0B;QACxB,SAASC;YACPJ,sBAAsBP,sBAAsBC;QAC9C;QAEA,OAAOW,IAAAA,8BAAAA,EACLX,OAAOY,sBAAsB,CAACF,2BAC9BV,OAAOa,wBAAwB,CAACH;IAEpC,GAAG;QAACV;KAAO;IAEX,OAAOK;AACT"}

package/lib-commonjs/utilities/useLexicalContentEditable.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useLexicalContentEditable", {
+    enumerable: true,
+    get: function() {
+        return useLexicalContentEditable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _chatinputplugins = require("@fluentui-copilot/chat-input-plugins");
+const _reacttexteditor = require("@fluentui-copilot/react-text-editor");
+const _reactutilities = require("@fluentui/react-utilities");
+const _EditorInput = require("../EditorInput");
+const _useLexicalEditor = require("./useLexicalEditor");
+const _useCanShowPlaceholder = require("./useCanShowPlaceholder");
+const _reactcomponents = require("@fluentui/react-components");
+function useLexicalContentEditable(props) {
+    const { defaultValue, customTheme } = props;
+    const customNodes = props.customNodes ? [
+        ...props.customNodes,
+        _chatinputplugins.SentinelNode
+    ] : [
+        _chatinputplugins.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] = (0, _reactutilities.useControllableState)({
+        state: props.disabled,
+        initialState: false
+    });
+    const lexicalStyles = (0, _EditorInput.useLexicalStyles)();
+    const paragraphClassName = (0, _reactcomponents.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 = (0, _useLexicalEditor.useLexicalEditor)(lexicalInitialConfig);
+    const canShowPlaceholder = (0, _useCanShowPlaceholder.useCanShowPlaceholder)(lexicalEditor);
+    const spanRef = _react.useCallback((span)=>{
+        // Register the `input` span with lexical
+        lexicalEditor.setRootElement(span);
+    }, [
+        lexicalEditor
+    ]);
+    // Update lexical when disabled changes
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        lexicalEditor.setEditable(!disabled);
+    }, [
+        lexicalEditor
+    ]);
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        return (0, _reacttexteditor.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-commonjs/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":["useLexicalContentEditable","props","defaultValue","customTheme","customNodes","SentinelNode","disabled","setDisabled","useControllableState","state","initialState","lexicalStyles","useLexicalStyles","paragraphClassName","mergeClasses","paragraph","lexicalInitialConfig","namespace","onError","console","log","nodes","editorState","editable","theme","trim","undefined","lexicalEditor","useLexicalEditor","canShowPlaceholder","useCanShowPlaceholder","spanRef","React","useCallback","span","setRootElement","useIsomorphicLayoutEffect","setEditable","mergeRegister","registerEditableListener","isEditable","registerRootListener","root","style","whiteSpace"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAsBgBA;;;eAAAA;;;;iEAtBO;kCACM;iCAEC;gCACkC;6BAE/B;kCACA;uCACK;iCACT;AAatB,SAASA,0BAA0BC,KAAqC;IAC7E,MAAM,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGF;IAEtC,MAAMG,cAAcH,MAAMG,WAAW,GAAG;WAAIH,MAAMG,WAAW;QAAEC,8BAAAA;KAAa,GAAG;QAACA,8BAAAA;KAAa;IAE7F,iFAAiF;IACjF,8CAA8C;IAC9C,MAAM,CAACC,UAAUC,YAAY,GAAGC,IAAAA,oCAAAA,EAAqB;QACnDC,OAAOR,MAAMK,QAAQ;QACrBI,cAAc;IAChB;IAEA,MAAMC,gBAAgBC,IAAAA,6BAAAA;IACtB,MAAMC,qBAAqBC,IAAAA,6BAAAA,EAAaH,cAAcI,SAAS,EAAEZ,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAaY,SAAS;IAEvF,MAAMC,uBAAuB;QAC3BC,WAAW;QACXC,SAASC,QAAQC,GAAG;QACpBC,OAAOjB;QACPkB,aAAapB;QACbqB,UAAU,CAACjB;QACXkB,OAAO;YAAE,GAAGrB,WAAW;YAAEY,WAAWF,mBAAmBY,IAAI,OAAO,KAAKC,YAAYb;QAAmB;IACxG;IACA,MAAMc,gBAAgBC,IAAAA,kCAAAA,EAAiBZ;IAEvC,MAAMa,qBAAqBC,IAAAA,4CAAAA,EAAsBH;IAEjD,MAAMI,UAAUC,OAAMC,WAAW,CAC/B,CAACC;QACC,yCAAyC;QACzCP,cAAcQ,cAAc,CAACD;IAC/B,GACA;QAACP;KAAc;IAGjB,uCAAuC;IACvCS,IAAAA,yCAAAA,EAA0B;QACxBT,cAAcU,WAAW,CAAC,CAAC/B;IAC7B,GAAG;QAACqB;KAAc;IAElBS,IAAAA,yCAAAA,EAA0B;QACxB,OAAOE,IAAAA,8BAAAA,EACLX,cAAcY,wBAAwB,CAACC,CAAAA;YACrCjC,YAAY,CAACiC;QACf,IACAb,cAAcc,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;QAAEf;QAAoBvB;QAAUyB;QAASJ;QAAeX;IAAqB;AACtF"}

package/lib-commonjs/utilities/useLexicalEditor.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useLexicalEditor", {
+    enumerable: true,
+    get: function() {
+        return useLexicalEditor;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _reacttexteditor = require("@fluentui-copilot/react-text-editor");
+const _reactutilities = require("@fluentui/react-utilities");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("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 = (0, _reacttexteditor.$getRoot)();
+            if (root.isEmpty()) {
+                root.append((0, _reacttexteditor.$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 ((0, _reacttexteditor.$getRoot)().isEmpty()) {
+                            initialState(editor);
+                        }
+                    }, UPDATE_OPTIONS);
+                }
+        }
+    }
+}
+function useLexicalEditor(initialConfig) {
+    const { theme, namespace, nodes, onError, editorState: initialEditorState, html, editable = true } = initialConfig;
+    const [lexicalEditor] = _react.useState(()=>{
+        const lexicalEditor = (0, _reacttexteditor.createEditor)({
+            editable,
+            html,
+            namespace,
+            nodes,
+            onError: (error)=>onError(error, lexicalEditor),
+            theme
+        });
+        setInitialState(lexicalEditor, initialEditorState);
+        return lexicalEditor;
+    });
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        const isEditable = initialConfig.editable;
+        lexicalEditor.setEditable(isEditable !== undefined ? isEditable : true);
+    }, []);
+    return lexicalEditor;
+}

package/lib-commonjs/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":["useLexicalEditor","UPDATE_OPTIONS","tag","setInitialState","editor","initialState","undefined","update","root","$getRoot","isEmpty","append","$createParagraphNode","parsedState","parseEditorState","setEditorState","initialConfig","theme","namespace","nodes","onError","editorState","initialEditorState","html","editable","lexicalEditor","React","useState","createEditor","error","useIsomorphicLayoutEffect","isEditable","setEditable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA0CgBA;;;eAAAA;;;;iCAzCqB;gCAGK;iEACnB;AAEvB,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,OAAOC,IAAAA,yBAAAA;YACb,IAAID,KAAKE,OAAO,IAAI;gBAClBF,KAAKG,MAAM,CAACC,IAAAA,qCAAAA;YACd;QACF,GAAGX;IACL,OAAO;QACL,OAAQ,OAAOI;YACb,KAAK;gBAAU;oBACb,MAAMQ,cAAcT,OAAOU,gBAAgB,CAACT;oBAC5CD,OAAOW,cAAc,CAACF,aAAaZ;oBACnC;gBACF;YACA,KAAK;gBAAU;oBACbG,OAAOW,cAAc,CAACV,cAAcJ;oBACpC;gBACF;YACA,KAAK;gBAAY;oBACfG,OAAOG,MAAM,CAAC;wBACZ,IAAIE,IAAAA,yBAAAA,IAAWC,OAAO,IAAI;4BACxBL,aAAaD;wBACf;oBACF,GAAGH;gBACL;QACF;IACF;AACF;AAEO,SAASD,iBAAiBgB,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,GAAGC,OAAMC,QAAQ,CAAC;QACrC,MAAMF,gBAAgBG,IAAAA,6BAAAA,EAAa;YACjCJ;YACAD;YACAL;YACAC;YACAC,SAASS,CAAAA,QAAST,QAAQS,OAAOJ;YACjCR;QACF;QAEAd,gBAAgBsB,eAAeH;QAE/B,OAAOG;IACT;IAEAK,IAAAA,yCAAAA,EAA0B;QACxB,MAAMC,aAAaf,cAAcQ,QAAQ;QACzCC,cAAcO,WAAW,CAACD,eAAezB,YAAYyB,aAAa;IACpE,GAAG,EAAE;IAEL,OAAON;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-editor-input",
-  "version": "0.5.6",
+  "version": "0.6.0",
   "description": "a base rich editor input.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,21 +12,21 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/chat-input-plugins": "^0.5.1",
-    "@fluentui-copilot/react-chat-input-plugins": "^0.5.5",
-    "@fluentui-copilot/react-text-editor": "^0.4.2",
-    "@fluentui-copilot/tokens": "^0.3.14",
+    "@fluentui-copilot/chat-input-plugins": "^0.5.3",
+    "@fluentui-copilot/react-chat-input-plugins": "^0.5.7",
+    "@fluentui-copilot/react-text-editor": "^0.4.3",
+    "@fluentui-copilot/tokens": "^0.3.15",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@fluentui/react-components": ">=9.66.0 <10.0.0",
-    "@fluentui/react-jsx-runtime": ">=9.1.1 <10.0.0",
-    "@fluentui/react-motion": ">=9.8.1 <10.0.0",
-    "@fluentui/react-utilities": ">=9.21.1 <10.0.0",
-    "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.9.8 <19.0.0",
-    "react": ">=16.14.0 <19.0.0",
-    "react-dom": ">=16.14.0 <19.0.0"
+    "@fluentui/react-components": ">=9.70.0 <10.0.0",
+    "@fluentui/react-jsx-runtime": ">=9.2.0 <10.0.0",
+    "@fluentui/react-motion": ">=9.10.4 <10.0.0",
+    "@fluentui/react-utilities": ">=9.24.1 <10.0.0",
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.8 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [