@fluentui-copilot/react-editor-input 0.2.1 → 0.3.0

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

@@ -11,10 +11,11 @@ Object.defineProperty(exports, "useEditorInput_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcomponents = require("@fluentui/react-components");
+const _chatinputplugins = require("@fluentui-copilot/chat-input-plugins");
 const _reacttexteditor = require("@fluentui-copilot/react-text-editor");
-const _useLexicalContentEditable = require("../../utilities/useLexicalContentEditable");
+const _reactutilities = require("@fluentui/react-utilities");
 const useEditorInput_unstable = (props, ref)=>{
-    const { onChange, onPaste, trimWhiteSpace = false, textPlugin = _reacttexteditor.LexicalPlainTextPlugin, history = true, editorRef } = props;
+    const { onChange, onPaste, trimWhiteSpace = false, textPlugin = _reacttexteditor.LexicalPlainTextPlugin, history = true, editorRef: userEditorRef } = props;
     const { root, primary } = (0, _reactcomponents.getPartitionedNativeProps)({
         primarySlotTagName: 'span',
         props,
@@ -24,7 +25,52 @@ const useEditorInput_unstable = (props, ref)=>{
             'defaultValue'
         ]
     });
-    const { canShowPlaceholder, spanRef, disabled, lexicalEditor, lexicalInitialConfig } = (0, _useLexicalContentEditable.useLexicalContentEditable)(props);
+    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 // Register the `input` span with lexical
+        _editorRef_current;
+        (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.setRootElement(span);
+    }, [
+        editorRef
+    ]);
+    // Update lexical when disabled changes
+    (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
@@ -32,14 +78,25 @@ const useEditorInput_unstable = (props, ref)=>{
     }, [
         onChange
     ]);
-    const placeholderValue = canShowPlaceholder ? _reactcomponents.slot.optional(props.placeholderValue, {
+    const [defaultString, defaultValueFunction] = (()=>{
+        if (typeof props.defaultValue === 'function') {
+            return [
+                undefined,
+                props.defaultValue
+            ];
+        }
+        return [
+            props.defaultValue,
+            undefined
+        ];
+    })();
+    const placeholderValue = _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',
@@ -62,19 +119,24 @@ const useEditorInput_unstable = (props, ref)=>{
                 disabled,
                 suppressContentEditableWarning: true,
                 ...primary,
-                'aria-describedby': canShowPlaceholder ? describedBy : undefined
+                'aria-describedby': primary['aria-describedby'] ? `${primary['aria-describedby']} ${placeholderId}` : placeholderId
             },
             elementType: 'span'
         }),
         placeholderValue,
-        lexicalInitialConfig,
+        lexicalInitialConfig: {
+            namespace: 'fai-EditorInput',
+            onError: console.error,
+            nodes: customNodes,
+            editorState: defaultValueFunction
+        },
         editorRef,
         disabled,
         textPlugin,
         onPaste,
         handleOnChange,
+        defaultValue: defaultString,
         trimWhiteSpace,
-        history,
-        lexicalEditor
+        history
     };
 }; //# sourceMappingURL=useEditorInput.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useEditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, slot, useId, useMergedRefs } from '@fluentui/react-components';\nimport type { EditorInputProps, EditorInputState } from './EditorInput.types';\nimport { LexicalPlainTextPlugin } from '@fluentui-copilot/react-text-editor';\nimport { useLexicalContentEditable } from '../../utilities/useLexicalContentEditable';\n\n/**\n * Create the state required to render EditorInput.\n *\n * The returned state can be modified with hooks such as useEditorInputStyles_unstable,\n * before being passed to renderEditorInput_unstable.\n *\n * @param props - props from this instance of EditorInput\n * @param ref - reference to root HTMLElement of EditorInput\n */\nexport const useEditorInput_unstable = (props: EditorInputProps, ref: React.Ref<HTMLSpanElement>): EditorInputState => {\n  const {\n    onChange,\n    onPaste,\n    trimWhiteSpace = false,\n    textPlugin = LexicalPlainTextPlugin,\n    history = true,\n    editorRef,\n  } = props;\n  const { root, primary } = getPartitionedNativeProps({\n    primarySlotTagName: 'span',\n    props,\n    excludedPropNames: ['onChange', 'onPaste', 'defaultValue'],\n  });\n\n  const { canShowPlaceholder, spanRef, disabled, lexicalEditor, lexicalInitialConfig } =\n    useLexicalContentEditable(props);\n  const handleOnChange = React.useCallback(\n    (newValue: string) => {\n      onChange?.({}, { value: newValue });\n    },\n    [onChange],\n  );\n\n  const placeholderValue = canShowPlaceholder\n    ? slot.optional(props.placeholderValue, { elementType: 'span' })\n    : undefined;\n  const placeholderId = useId('chat-input-placeholder', placeholderValue?.id);\n  if (placeholderValue) {\n    placeholderValue.id = placeholderId;\n  }\n\n  const describedBy = primary['aria-describedby'] ? `${primary['aria-describedby']} ${placeholderId}` : placeholderId;\n\n  return {\n    components: {\n      root: 'span',\n      input: 'span',\n      placeholderValue: 'span',\n    },\n    root: slot.always(props.root, { defaultProps: { ...root }, elementType: 'span' }),\n    input: slot.always(props.input, {\n      defaultProps: {\n        ref: useMergedRefs(ref, spanRef),\n        role: 'textbox',\n        contentEditable: !disabled,\n        'aria-readonly': disabled ? true : undefined,\n        tabIndex: disabled ? -1 : 0,\n        disabled,\n        suppressContentEditableWarning: true,\n        ...primary,\n        'aria-describedby': canShowPlaceholder ? describedBy : undefined,\n      },\n      elementType: 'span',\n    }),\n    placeholderValue,\n    lexicalInitialConfig,\n    editorRef,\n    disabled,\n    textPlugin,\n    onPaste,\n    handleOnChange,\n    trimWhiteSpace,\n    history,\n    lexicalEditor,\n  };\n};\n"],"names":["onChange","trimWhiteSpace","primarySlotTagName","props","excludedPropNames","LexicalPlainTextPlugin","root","primary","handleOnChange","newValue","canShowPlaceholder","placeholderValue","elementType","disabled","undefined","lexicalEditor","placeholderId","lexicalInitialConfig","React","useCallback","describedBy","value","slot","optional","always","id","defaultProps","tabIndex","input","ref","useMergedRefs","spanRef","editorRef","textPlugin","onPaste"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBIA;;;eAAAA;;;;iEAjBmB;iCAC+C;iCAE/B;2CACG;AAYxC,MACEA,0BAEAC,CAAAA,OAAAA;UAKF,UACEC,SACAC,mBACAC,KAAAA,eAAoBC,uCAAA,YAAY,IAAA,WAAW;UAC7C,EAEAC,IAAA,EAEAC,OAAMC,mDAEFR,EAAAA;4BAAwBS;;QAC1BL,mBACA;YAAA;YAAA;YAAA;SAAA;;UAAU,EAGZM,kBAAMC,SACsCC,EAAoBC,QAC5DC,EACJC,aAAMC,EACNC,oBAAIN,6DACoBK,EAAAA;UACxBR,iBAAAU,OAAAC,WAAA,CAAAV,CAAAA;QAEAT,aAAMoB,QAAcb,aAAQ,KAAA,IAAA,KAAmB,IAAIP,SAAU,CAAA,GAAA;YAE7DqB,OAAOZ;;;;KAEHH;6BACOI,qBAAAY,qBAAA,CAAAC,QAAA,CAAApB,MAAAQ,gBAAA,EAAA;qBACPA;;UAEFL,gBAAWkB,IAAAA,sBAAOrB,EAAAA,0BAAYQ,qBAAA,QAAAA,qBAAA,KAAA,IAAA,KAAA,IAAAA,iBAAAc,EAAA;0BAAEC;yBAAmBpB,EAAI,GAAAU;;wBAAIJ,OAAa,CAAA,mBAAA,GAAA,CAAA,EAAAL,OAAA,CAAA,mBAAA,CAAA,CAAA,EAAAS,cAAA,CAAA,GAAAA;WAAO;oBACxEM;kBACLI;;8BAEQ;;0CAEN,CAAAvB,MAAAG,IAAA,EAAiBO;0BACjBc;;;yBAGGpB;;oCAEL,CAAAiB,MAAA,CAAArB,MAAAyB,KAAA,EAAA;0BACAhB;gBACFiB,KAAAC,IAAAA,8BAAA,EAAAD,KAAAE;gBACApB,MAAAA;gBACAM,iBAAAA,CAAAA;gBACAe,iBAAAA,WAAAA,OAAAA;gBACAnB,UAAAA,WAAAA,CAAAA,IAAAA;gBACAoB;gBACAC,gCAAAA;gBACA1B,GAAAA,OAAAA;gBACAP,oBAAAA,qBAAAA,cAAAA;;yBAEAc;QACF;QACAJ"}
+{"version":3,"sources":["useEditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  slot,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport type { EditorInputProps, EditorInputState } from './EditorInput.types';\nimport { SentinelNode } from '@fluentui-copilot/chat-input-plugins';\nimport type { LexicalEditor } from '@fluentui-copilot/react-text-editor';\nimport { LexicalPlainTextPlugin, mergeRegister } from '@fluentui-copilot/react-text-editor';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render EditorInput.\n *\n * The returned state can be modified with hooks such as useEditorInputStyles_unstable,\n * before being passed to renderEditorInput_unstable.\n *\n * @param props - props from this instance of EditorInput\n * @param ref - reference to root HTMLElement of EditorInput\n */\nexport const useEditorInput_unstable = (props: EditorInputProps, ref: React.Ref<HTMLSpanElement>): EditorInputState => {\n  const {\n    onChange,\n    onPaste,\n    trimWhiteSpace = false,\n    textPlugin = LexicalPlainTextPlugin,\n    history = true,\n    editorRef: userEditorRef,\n  } = props;\n  const { root, primary } = getPartitionedNativeProps({\n    primarySlotTagName: 'span',\n    props,\n    excludedPropNames: ['onChange', 'onPaste', 'defaultValue'],\n  });\n\n  const editorRef = useMergedRefs(React.useRef<LexicalEditor>(null), userEditorRef);\n  // The disabled state can also be changed by lexical (e.g. by a custom plugin) so\n  // we use `useControllableState` to coordinate\n  const [disabled, setDisabled] = useControllableState({\n    state: props.disabled,\n    initialState: false,\n  });\n\n  const customNodes = props.customNodes ? [...props.customNodes, SentinelNode] : [SentinelNode];\n\n  const spanRef = React.useCallback(\n    span => {\n      // Register the `input` span with lexical\n      editorRef.current?.setRootElement(span);\n    },\n    [editorRef],\n  );\n\n  // Update lexical when disabled changes\n  useIsomorphicLayoutEffect(() => {\n    if (editorRef.current) {\n      editorRef.current?.setEditable(!disabled);\n    }\n  }, [disabled]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (editorRef.current) {\n      return mergeRegister(\n        editorRef.current.registerEditableListener(isEditable => {\n          setDisabled(!isEditable);\n        }),\n        editorRef.current?.registerRootListener(root => {\n          if (!root) {\n            return;\n          }\n\n          // Remove lexical's inline style so we can apply our own\n          // Lexical needs the whitespace style to be either `pre` or `pre-wrap` to work correctly\n          root.style.whiteSpace = '';\n        }),\n      );\n    }\n  }, [editorRef]);\n\n  const handleOnChange = React.useCallback(\n    (newValue: string) => {\n      onChange?.({}, { value: newValue });\n    },\n    [onChange],\n  );\n\n  const [defaultString, defaultValueFunction] = (() => {\n    if (typeof props.defaultValue === 'function') {\n      return [undefined, props.defaultValue];\n    }\n    return [props.defaultValue, undefined];\n  })();\n\n  const placeholderValue = slot.optional(props.placeholderValue, { elementType: 'span' });\n  const placeholderId = useId('chat-input-placeholder', placeholderValue?.id);\n  if (placeholderValue) {\n    placeholderValue.id = placeholderId;\n  }\n\n  return {\n    components: {\n      root: 'span',\n      input: 'span',\n      placeholderValue: 'span',\n    },\n    root: slot.always(props.root, { defaultProps: { ...root }, elementType: 'span' }),\n    input: slot.always(props.input, {\n      defaultProps: {\n        ref: useMergedRefs(ref, spanRef),\n        role: 'textbox',\n        contentEditable: !disabled,\n        'aria-readonly': disabled ? true : undefined,\n        tabIndex: disabled ? -1 : 0,\n        disabled,\n        suppressContentEditableWarning: true,\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    },\n    editorRef,\n    disabled,\n    textPlugin,\n    onPaste,\n    handleOnChange,\n    defaultValue: defaultString,\n    trimWhiteSpace,\n    history,\n  };\n};\n"],"names":["onChange","trimWhiteSpace","primarySlotTagName","props","excludedPropNames","LexicalPlainTextPlugin","userEditorRef","root","primary","getPartitionedNativeProps","setDisabled","editorRef","customNodes","SentinelNode","disabled","useControllableState","_editorRef_current","current","setRootElement","span","setEditable","useIsomorphicLayoutEffect","mergeRegister","isEditable","whiteSpace","handleOnChange","React","useCallback","newValue","value","defaultValue","undefined","placeholderValue","id","placeholderId","input","slot","always","defaultProps","elementType","components","ref","spanRef","contentEditable","tabIndex","suppressContentEditableWarning","lexicalInitialConfig"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBIA;;;eAAAA;;;;iEAzBmB;iCAOhB;kCAEsB;iCAEyB;gCACjB;AAYnC,MACEA,0BAEAC,CAAAA,OAAAA;UAKF,UACEC,SACAC,mBACAC,KAAAA,eAAoBC,uCAAA,YAAY,IAAA,aAAWC,aAAA;UAC7C,EAEAC,IAAA,EACAC,OAAA,KACAC,IAAAA,0CAAA,EAAA;QACAP,oBAAiBQ;;2BAED;YAAA;YAAA;YAAA;SAAA;;UAGhBC,YAAMC,IAAAA,8BAAoBA,EAAAA,OAAAA,MAAc,CAAA,OAAAN;qFAAqB;kDAAEO;UAAgB,CAAAC,UAAAJ,YAAA,GAAAK,IAAAA,oCAAA,EAAA;eAACF,MAAAA,QAAAA;sBAAa;;wBAIzFV,MAAAS,WAAA,GAAA;WAAAT,MAAAS,WAAyC;QAAAC,8BAAA;KAAA,GAAA;QAAAA,8BAAA;KAAA;UACzCF,UAAAA,OAAAA,WAAAA,CAAAA,CAAAA;YACF,yCACA;;QAAWK,CAAAA,qBAAAL,UAAAM,OAAA,MAAA,QAAAD,uBAAA,KAAA,IAAA,KAAA,IAAAA,mBAAAE,cAAA,CAAAC;OAGb;QAAAR;KAAA;2CAC0B;kDACVM,EAAAA;sBACZN,OAAAA,EAAAA;;kCACFA,UAAAM,OAAA,MAAA,QAAAD,uBAAA,KAAA,IAAA,KAAA,IAAAA,mBAAAI,WAAA,CAAA,CAAAN;QACF;;;KAAIA;kDAAS,EAAA;QAEbO,IAAAA,UAAAA,OAAAA,EAAAA;gBACEL;qDAKIL,EAAAA,UAAAA,OAAAA,CAAAA,wBAAAA,CAAAA,CAAAA;4BAJKW,CAAAA;sCAEUC,UAAAA,OAAAA,MAAAA,QAAAA,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAAA,oBAAAA,CAAAA,CAAAA;oBACf,CAAAhB,MACAI;;;wEAGE;wGAEwD;0BACxD,CAAAa,UAAA,GAAA;;;;;KAIN;UACCC,iBAAAC,OAAAC,WAAA,CAAAC,CAAAA;qBAACjB,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAAA,CAAAA,GAAAA;YAAUkB,OAAAD;QAEd;;;KAEI5B;0BAAwB4B,qBAAAA,GAAAA,CAAAA;YAAS,OAAAzB,MAAA2B,YAAA,KAAA,YAAA;YACnC,OACA;gBAAAC;gBAAA5B,MAAA2B,YAAA;aAAA;;eAAU;YAAA3B,MAAA2B,YAAA;YAAAC;SAAA;;UAIVC,mBAAiBF,qBAAAA,CAAAA,QAAY,CAAA3B,MAAK6B,gBAAY,EAAA;qBAC5C;;0BAAyBF,IAAAA,sBAAAA,EAAAA,0BAAYE,qBAAA,QAAAA,qBAAA,KAAA,IAAA,KAAA,IAAAA,iBAAAC,EAAA;0BAAC;yBACxCA,EAAA,GAAAC;;;oBAC4BH;kBAAU;YACxCI,OAAA;YAEAH,kBAAMA;;QAA+EzB,MAAA6B,qBAAA,CAAAC,MAAA,CAAAlC,MAAAI,IAAA,EAAA;YACrF+B,cAAMJ;gBACFF,GAAAA,IAAAA;;YAEJO,aAAA;QAEA;eACEC,qBAAAA,CAAAA,MAAY,CAAArC,MAAAgC,KAAA,EAAA;0BACJ;qBACNA,IAAAA,8BAAO,EAAAM,KAAAC;sBACPV;gBACFW,iBAAA,CAAA7B;gBACAP,iBAAiBO,WAAW,OAAEiB;0BAAEO,WAAc,CAAA,IAAA;;gDAAU;0BAAGC;gBAAoB,oBAAA/B,OAAA,CAAA,mBAAA,GAAA,CAAA,EAAAA,OAAA,CAAA,mBAAA,CAAA,CAAA,EAAA0B,cAAA,CAAA,GAAAA;;yBAE7EI;;;8BAGEK;uBACA;6BACAC,KAAU9B;;yBAEV+B;;;;;;;sBASJC;;;;6CAKA"}

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

@@ -83,6 +83,13 @@ 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, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { SlotClassNames } from '@fluentui/react-components';\nimport type { EditorInputSlots, EditorInputState } from './EditorInput.types';\n\nexport const editorInputClassNames: SlotClassNames<EditorInputSlots> = {\n  root: 'fai-EditorInput',\n  input: 'fai-EditorInput__input',\n  placeholderValue: 'fai-EditorInput__placeholderValue',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n  display: 'inline-grid',\n  whiteSpace: 'pre-wrap',\n});\n\nexport const useLexicalStyles = makeStyles({\n  paragraph: {\n    margin: 0,\n  },\n});\n\nexport const usePlaceholderClassName = makeResetStyles({\n  zIndex: 0,\n  gridArea: '1 / 1 / 1 / 1',\n\n  color: tokens.colorNeutralForeground3,\n  ...typographyStyles.body1,\n\n  '@media (forced-colors: active)': {\n    color: 'GrayText',\n  },\n});\n\nexport const useInputClassName = makeResetStyles({\n  gridArea: '1 / 1 / 1 / 1',\n  zIndex: 1,\n  width: '100%',\n});\n\nconst useStyles = makeStyles({\n  placeholderDisabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n/**\n * Apply styling to the EditorInput slots based on the state\n */\nexport const useEditorInputStyles_unstable = (state: EditorInputState): EditorInputState => {\n  'use no memo';\n\n  const { disabled } = state;\n  const placeholderClassName = usePlaceholderClassName();\n  const rootClassName = useRootClassName();\n  const inputClassName = useInputClassName();\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(editorInputClassNames.root, rootClassName, state.root.className);\n\n  state.input.className = mergeClasses(editorInputClassNames.input, inputClassName, state.input.className);\n\n  if (state.placeholderValue) {\n    state.placeholderValue.className = mergeClasses(\n      editorInputClassNames.placeholderValue,\n      placeholderClassName,\n      disabled && styles.placeholderDisabled,\n      state.placeholderValue.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["editorInputClassNames","useEditorInputStyles_unstable","gridArea","whiteSpace","color","root","input","placeholderValue","display","__resetStyles","__styles","paragraph","jrapky","margin","B6of3ja","B74szlk","s","zIndex","sj55zd","disabled","rootClassName","state","placeholderClassName","useStyles","useRootClassName","useInputClassName","className","mergeClasses","inputClassName","styles","placeholderDisabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,qBAAAA;eAAAA;;IA8CNC,6BAAMA;eAANA;;IAbLC,iBAAU;eAAVA;;IAtBAC,gBAAY;eAAZA;;IAiBEC,uBAAO;eAAPA;;;iCAhCwE;AAIrE,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;QACFC,SAAA;QACCC,SAAA;IAEH;;OAEEb;QAAAA;YAAAA;YAAU;gBAEVE,GAAAA,CAAAA;;SACA;KAAA;;MAGEA,0BAAOK,IAAAA,8BAAA,EAAA,YAAA,MAAA;OACT;QAAA;KAAA;IACFO,GAAG;QAAA;KAAA;AAEH;AACEd,MAAAA,oBAAUO,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MACVQ,YAAQP,IAAAA,yBAAA,EAAA;yBACD;QACNQ,QAAA;IAEH;;;;KAEgD;;AAMhD,MAAOjB,gCAAMA,CAAAA;;UAIX,EACAkB,QAAMC,KACNC;UACAC,uBAAeC;UAEfF,gBAAoBG;UAEpBH,iBAAqBI;UAEjBJ,SAAMd;UACRc,IAAAA,CAAAA,SAAMd,GAAAA,IAAAA,6BAAiBmB,EAAAA,sBACrB1B,IAAAA,EAAAA,eAAsBO,MAAAA,IAAAA,CAAAA,SACtBe;UAIJhB,KAAA,CAAAoB,SAAA,GAAAC,IAAAA,6BAAA,EAAA3B,sBAAAM,KAAA,EAAAsB,gBAAAP,MAAAf,KAAA,CAAAoB,SAAA;QAEAL,MAAOA,gBAAAA,EAAAA;QACPA,MAAAd,gBAAA,CAAAmB,SAAA,GAAAC,IAAAA,6BAAA,EAAA3B,sBAAAO,gBAAA,EAAAe,sBAAAH,YAAAU,OAAAC,mBAAA,EAAAT,MAAAd,gBAAA,CAAAmB,SAAA"}
+{"version":3,"sources":["useEditorInputStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { SlotClassNames } from '@fluentui/react-components';\nimport type { EditorInputSlots, EditorInputState } from './EditorInput.types';\n\nexport const editorInputClassNames: SlotClassNames<EditorInputSlots> = {\n  root: 'fai-EditorInput',\n  input: 'fai-EditorInput__input',\n  placeholderValue: 'fai-EditorInput__placeholderValue',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n  display: 'inline-grid',\n  whiteSpace: 'pre-wrap',\n});\n\nexport const useLexicalStyles = makeStyles({\n  paragraph: {\n    margin: 0,\n  },\n});\n\nexport const usePlaceholderClassName = makeResetStyles({\n  zIndex: 0,\n  gridArea: '1 / 1 / 1 / 1',\n\n  color: tokens.colorNeutralForeground3,\n  ...typographyStyles.body1,\n\n  '@media (forced-colors: active)': {\n    color: 'GrayText',\n  },\n});\n\nexport const useInputClassName = makeResetStyles({\n  gridArea: '1 / 1 / 1 / 1',\n  zIndex: 1,\n  width: '100%',\n});\n\nconst useStyles = makeStyles({\n  placeholderDisabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n/**\n * Apply styling to the EditorInput slots based on the state\n */\nexport const useEditorInputStyles_unstable = (state: EditorInputState): EditorInputState => {\n  'use no memo';\n\n  const { disabled } = state;\n  const placeholderClassName = usePlaceholderClassName();\n  const rootClassName = useRootClassName();\n  const inputClassName = useInputClassName();\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(editorInputClassNames.root, rootClassName, state.root.className);\n\n  state.input.className = mergeClasses(editorInputClassNames.input, inputClassName, state.input.className);\n\n  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","B6of3ja","B74szlk","s","zIndex","sj55zd","disabled","rootClassName","state","placeholderClassName","useStyles","useRootClassName","useInputClassName","lexicalInitialConfig","className","theme","mergeClasses","inputClassName","useLexicalStyles","styles","placeholderDisabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,qBAAAA;eAAAA;;IA8CNC,6BAAMA;eAANA;;IAbLC,iBAAU;eAAVA;;IAtBAC,gBAAY;eAAZA;;IAiBEC,uBAAO;eAAPA;;;iCAhCwE;AAIrE,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;QACFC,SAAA;QACCC,SAAA;IAEH;;OAEEb;QAAAA;YAAAA;YAAU;gBAEVE,GAAAA,CAAAA;;SACA;KAAA;;MAGEA,0BAAOK,IAAAA,8BAAA,EAAA,YAAA,MAAA;OACT;QAAA;KAAA;IACFO,GAAG;QAAA;KAAA;AAEH;AACEd,MAAAA,oBAAUO,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MACVQ,YAAQP,IAAAA,yBAAA,EAAA;yBACD;QACNQ,QAAA;IAEH;;;;KAEgD;;AAMhD,MAAOjB,gCAAMA,CAAAA;;UAIX,EACAkB,QAAMC,KACNC;UACAC,uBAAeC;UAEfF,gBAAoBG;UAEpBH,iBAAqBI;UAErBJ,SAAMK;UACJrB,IAAGgB,CAAAA,SAAMK,GAAAA,IAAAA,6BAAoB,EAAA1B,sBAAAK,IAAA,EAAAe,eAAAC,MAAAhB,IAAA,CAAAsB,SAAA;UAC7BC,KAAAA,CAAAA,SAAO,GAAAC,IAAAA,6BAAA,EAAA7B,sBAAAM,KAAA,EAAAwB,gBAAAT,MAAAf,KAAA,CAAAqB,SAAA;8BAAKI,GAAAA;iBAAoBL,oBAASA;eAA2B;YACtE,GAAAK,kBAAA;YAEA,GAAIV,MAAMd,oBAAkB,CAAAqB,KAAA;;;QAS5BP,MAAOA,gBAAAA,EAAAA;QACPA,MAAAd,gBAAA,CAAAoB,SAAA,GAAAE,IAAAA,6BAAA,EAAA7B,sBAAAO,gBAAA,EAAAe,sBAAAH,YAAAa,OAAAC,mBAAA,EAAAZ,MAAAd,gBAAA,CAAAoB,SAAA"}

package/lib-commonjs/index.js

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

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export type {\n  EditorInputProps,\n  EditorInputSlots,\n  EditorInputState,\n  EditorInputValueData,\n  EditorInputContextValues,\n} from './EditorInput';\nexport {\n  EditorInput,\n  editorInputClassNames,\n  renderEditorInput_unstable,\n  useEditorInputStyles_unstable,\n  useEditorInput_unstable,\n  useEditorInputContextValues,\n} from './EditorInput';\n"],"names":["EditorInput","editorInputClassNames","renderEditorInput_unstable","useEditorInputContextValues","useEditorInputStyles_unstable","useEditorInput_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQEA,WAAW;eAAXA,wBAAW;;IACXC,qBAAqB;eAArBA,kCAAqB;;IACrBC,0BAA0B;eAA1BA,uCAA0B;;IAG1BC,2BAA2B;eAA3BA,wCAA2B;;IAF3BC,6BAA6B;eAA7BA,0CAA6B;;IAC7BC,uBAAuB;eAAvBA,oCAAuB;;;6BAElB"}
+{"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"],"names":["EditorInput","editorInputClassNames","renderEditorInput_unstable","useEditorInputStyles_unstable","useEditorInput_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,WAAW;eAAXA,wBAAW;;IACXC,qBAAqB;eAArBA,kCAAqB;;IACrBC,0BAA0B;eAA1BA,uCAA0B;;IAC1BC,6BAA6B;eAA7BA,0CAA6B;;IAC7BC,uBAAuB;eAAvBA,oCAAuB;;;6BAClB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-editor-input",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "a base rich editor input.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,9 +12,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/chat-input-plugins": "^0.2.1",
-    "@fluentui-copilot/react-chat-input-plugins": "^0.2.1",
-    "@fluentui-copilot/react-text-editor": "^0.2.0",
+    "@fluentui-copilot/chat-input-plugins": "^0.3.0",
+    "@fluentui-copilot/react-chat-input-plugins": "^0.3.0",
+    "@fluentui-copilot/react-text-editor": "^0.3.0",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {

package/lib/components/EditorInput/useEditorInputContextValues.js

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

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

@@ -1 +0,0 @@
-{"version":3,"sources":["useEditorInputContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { LexicalComposerContextWithEditor } from '@fluentui-copilot/react-text-editor';\nimport { createLexicalComposerContext } from '@fluentui-copilot/react-text-editor';\nimport type { EditorInputContextValues, EditorInputState } from './EditorInput.types';\n\nexport function useEditorInputContextValues(state: EditorInputState): EditorInputContextValues {\n  const { lexicalInitialConfig, lexicalEditor } = state;\n  const { theme } = lexicalInitialConfig;\n\n  const context: LexicalComposerContextWithEditor = React.useMemo(\n    () => [lexicalEditor, createLexicalComposerContext(null, theme)],\n    [lexicalEditor, theme],\n  );\n\n  return { lexicalComposer: context };\n}\n"],"names":["React","createLexicalComposerContext","useEditorInputContextValues","state","lexicalInitialConfig","lexicalEditor","theme","context","useMemo","lexicalComposer"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4BAA4B,QAAQ,sCAAsC;AAGnF,OAAO,SAASC,4BAA4BC,KAAuB;IACjE,MAAM,EAAEC,oBAAoB,EAAEC,aAAa,EAAE,GAAGF;IAChD,MAAM,EAAEG,KAAK,EAAE,GAAGF;IAElB,MAAMG,UAA4CP,MAAMQ,OAAO,CAC7D,IAAM;YAACH;YAAeJ,6BAA6B,MAAMK;SAAO,EAChE;QAACD;QAAeC;KAAM;IAGxB,OAAO;QAAEG,iBAAiBF;IAAQ;AACpC"}

package/lib/utilities/useLexicalContentEditable.js

@@ -1,68 +0,0 @@
-import * as React from 'react';
-import { SentinelNode } from '@fluentui-copilot/chat-input-plugins';
-import { useCanShowPlaceholder, mergeRegister, $insertNodes, $createParagraphNode, $createTextNode } from '@fluentui-copilot/react-text-editor';
-import { useControllableState, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
-import { useLexicalStyles } from '../EditorInput';
-import { useLexicalEditor } from './useLexicalEditor';
-function $insertString(text) {
-  const paragraphNode = $createParagraphNode();
-  const textNode = $createTextNode(text);
-  paragraphNode.append(textNode);
-  $insertNodes([paragraphNode]);
-}
-export function useLexicalContentEditable(props) {
-  const {
-    defaultValue
-  } = 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 editorState = typeof defaultValue === 'string' ? () => {
-    $insertString(defaultValue);
-  } : defaultValue;
-  const lexicalStyles = useLexicalStyles();
-  const lexicalInitialConfig = {
-    namespace: 'fai-EditorInput',
-    onError: console.error,
-    nodes: customNodes,
-    editorState,
-    editable: !disabled,
-    theme: {
-      paragraph: lexicalStyles.paragraph
-    }
-  };
-  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
-  };
-}
-//# sourceMappingURL=useLexicalContentEditable.js.map

package/lib/utilities/useLexicalContentEditable.js.map

@@ -1 +0,0 @@
-{"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 {\n  useCanShowPlaceholder,\n  mergeRegister,\n  $insertNodes,\n  $createParagraphNode,\n  $createTextNode,\n} from '@fluentui-copilot/react-text-editor';\nimport { useControllableState, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useLexicalStyles } from '../EditorInput';\nimport { useLexicalEditor } from './useLexicalEditor';\n\nexport type UseLexicalContentEditableProps = {\n  customNodes?: InitialConfigType['nodes'];\n  defaultValue?: string | (() => void);\n  disabled?: boolean;\n};\nexport type UseLexicalContentEditableResult = {\n  canShowPlaceholder: boolean;\n  disabled: boolean;\n  spanRef: React.RefCallback<HTMLSpanElement>;\n  lexicalEditor: LexicalEditor;\n  lexicalInitialConfig: InitialConfigType;\n};\n\nfunction $insertString(text: string) {\n  const paragraphNode = $createParagraphNode();\n  const textNode = $createTextNode(text);\n  paragraphNode.append(textNode);\n  $insertNodes([paragraphNode]);\n}\n\nexport function useLexicalContentEditable(props: UseLexicalContentEditableProps): UseLexicalContentEditableResult {\n  const { defaultValue } = 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 editorState =\n    typeof defaultValue === 'string'\n      ? () => {\n          $insertString(defaultValue);\n        }\n      : defaultValue;\n\n  const lexicalStyles = useLexicalStyles();\n  const lexicalInitialConfig = {\n    namespace: 'fai-EditorInput',\n    onError: console.error,\n    nodes: customNodes,\n    editorState,\n    editable: !disabled,\n    theme: { paragraph: lexicalStyles.paragraph },\n  };\n  const lexicalEditor = useLexicalEditor(lexicalInitialConfig);\n\n  const canShowPlaceholder = useCanShowPlaceholder(lexicalEditor);\n\n  const spanRef = React.useCallback(\n    span => {\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","useCanShowPlaceholder","mergeRegister","$insertNodes","$createParagraphNode","$createTextNode","useControllableState","useIsomorphicLayoutEffect","useLexicalStyles","useLexicalEditor","$insertString","text","paragraphNode","textNode","append","useLexicalContentEditable","props","defaultValue","customNodes","disabled","setDisabled","state","initialState","editorState","lexicalStyles","lexicalInitialConfig","namespace","onError","console","error","nodes","editable","theme","paragraph","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,SACEC,qBAAqB,EACrBC,aAAa,EACbC,YAAY,EACZC,oBAAoB,EACpBC,eAAe,QACV,sCAAsC;AAC7C,SAASC,oBAAoB,EAAEC,yBAAyB,QAAQ,4BAA4B;AAC5F,SAASC,gBAAgB,QAAQ,iBAAiB;AAClD,SAASC,gBAAgB,QAAQ,qBAAqB;AAetD,SAASC,cAAcC,IAAY;IACjC,MAAMC,gBAAgBR;IACtB,MAAMS,WAAWR,gBAAgBM;IACjCC,cAAcE,MAAM,CAACD;IACrBV,aAAa;QAACS;KAAc;AAC9B;AAEA,OAAO,SAASG,0BAA0BC,KAAqC;IAC7E,MAAM,EAAEC,YAAY,EAAE,GAAGD;IAEzB,MAAME,cAAcF,MAAME,WAAW,GAAG;WAAIF,MAAME,WAAW;QAAElB;KAAa,GAAG;QAACA;KAAa;IAE7F,iFAAiF;IACjF,8CAA8C;IAC9C,MAAM,CAACmB,UAAUC,YAAY,GAAGd,qBAAqB;QACnDe,OAAOL,MAAMG,QAAQ;QACrBG,cAAc;IAChB;IAEA,MAAMC,cACJ,OAAON,iBAAiB,WACpB;QACEP,cAAcO;IAChB,IACAA;IAEN,MAAMO,gBAAgBhB;IACtB,MAAMiB,uBAAuB;QAC3BC,WAAW;QACXC,SAASC,QAAQC,KAAK;QACtBC,OAAOZ;QACPK;QACAQ,UAAU,CAACZ;QACXa,OAAO;YAAEC,WAAWT,cAAcS,SAAS;QAAC;IAC9C;IACA,MAAMC,gBAAgBzB,iBAAiBgB;IAEvC,MAAMU,qBAAqBlC,sBAAsBiC;IAEjD,MAAME,UAAUrC,MAAMsC,WAAW,CAC/BC,CAAAA;QACE,yCAAyC;QACzCJ,cAAcK,cAAc,CAACD;IAC/B,GACA;QAACJ;KAAc;IAGjB,uCAAuC;IACvC3B,0BAA0B;QACxB2B,cAAcM,WAAW,CAAC,CAACrB;IAC7B,GAAG;QAACe;KAAc;IAElB3B,0BAA0B;QACxB,OAAOL,cACLgC,cAAcO,wBAAwB,CAACC,CAAAA;YACrCtB,YAAY,CAACsB;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;QAAoBhB;QAAUiB;QAASF;QAAeT;IAAqB;AACtF"}

package/lib/utilities/useLexicalEditor.js

@@ -1,75 +0,0 @@
-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.useMemo(() => {
-    const lexicalEditor = createEditor({
-      editable,
-      html,
-      namespace,
-      nodes,
-      onError: error => onError(error, lexicalEditor),
-      theme
-    });
-    setInitialState(lexicalEditor, initialEditorState);
-    return lexicalEditor;
-  },
-  // eslint-disable-next-line react-compiler/react-compiler -- This is a valid breakage of the rules of hooks
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to create this context once
-  []);
-  useIsomorphicLayoutEffect(() => {
-    const isEditable = initialConfig.editable;
-    lexicalEditor.setEditable(isEditable !== undefined ? isEditable : true);
-  }, []);
-  return lexicalEditor;
-}
-//# sourceMappingURL=useLexicalEditor.js.map

package/lib/utilities/useLexicalEditor.js.map

@@ -1 +0,0 @@
-{"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) {\n  const { theme, namespace, nodes, onError, editorState: initialEditorState, html, editable = true } = initialConfig;\n\n  const lexicalEditor = React.useMemo(\n    () => {\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    // eslint-disable-next-line react-compiler/react-compiler -- This is a valid breakage of the rules of hooks\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to create this context once\n    [],\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","useMemo","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,MAAMS,gBAAgBxB,MAAMyB,OAAO,CACjC;QACE,MAAMD,gBAAgB1B,aAAa;YACjCyB;YACAD;YACAL;YACAC;YACAC,SAASO,CAAAA,QAASP,QAAQO,OAAOF;YACjCR;QACF;QAEAb,gBAAgBqB,eAAeH;QAE/B,OAAOG;IACT,GACA,2GAA2G;IAC3G,mGAAmG;IACnG,EAAE;IAGJzB,0BAA0B;QACxB,MAAM4B,aAAaZ,cAAcQ,QAAQ;QACzCC,cAAcI,WAAW,CAACD,eAAerB,YAAYqB,aAAa;IACpE,GAAG,EAAE;IAEL,OAAOH;AACT"}

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

@@ -1,27 +0,0 @@
-"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
-    };
-} //# sourceMappingURL=useEditorInputContextValues.js.map

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

@@ -1 +0,0 @@
-{"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","context","theme","lexicalComposer"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;iCAEsB;AAGtC,SAASA,4BAA4BC,KAAuB;UACjE,EACAC,oBAAkBA,EAElBC,aAAMC;iBAC4D;UAChDC,UAAAA,OAAAA,OAAAA,CAAAA,IAAAA;YAAAA;YAAAA,IAAAA,6CAAAA,EAAAA,MAAAA;SAAAA,EAAAA;QAAAA;QAAAA;KAAAA;WAAM;QAGxBC,iBAAOF;;EACT,uDAAA"}

package/lib-commonjs/utilities/useLexicalContentEditable.js

@@ -1,87 +0,0 @@
-"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");
-function $insertString(text) {
-    const paragraphNode = (0, _reacttexteditor.$createParagraphNode)();
-    const textNode = (0, _reacttexteditor.$createTextNode)(text);
-    paragraphNode.append(textNode);
-    (0, _reacttexteditor.$insertNodes)([
-        paragraphNode
-    ]);
-}
-function useLexicalContentEditable(props) {
-    const { defaultValue } = 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 editorState = typeof defaultValue === 'string' ? ()=>{
-        $insertString(defaultValue);
-    } : defaultValue;
-    const lexicalStyles = (0, _EditorInput.useLexicalStyles)();
-    const lexicalInitialConfig = {
-        namespace: 'fai-EditorInput',
-        onError: console.error,
-        nodes: customNodes,
-        editorState,
-        editable: !disabled,
-        theme: {
-            paragraph: lexicalStyles.paragraph
-        }
-    };
-    const lexicalEditor = (0, _useLexicalEditor.useLexicalEditor)(lexicalInitialConfig);
-    const canShowPlaceholder = (0, _reacttexteditor.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
-    };
-} //# sourceMappingURL=useLexicalContentEditable.js.map

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

@@ -1 +0,0 @@
-{"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 {\n  useCanShowPlaceholder,\n  mergeRegister,\n  $insertNodes,\n  $createParagraphNode,\n  $createTextNode,\n} from '@fluentui-copilot/react-text-editor';\nimport { useControllableState, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useLexicalStyles } from '../EditorInput';\nimport { useLexicalEditor } from './useLexicalEditor';\n\nexport type UseLexicalContentEditableProps = {\n  customNodes?: InitialConfigType['nodes'];\n  defaultValue?: string | (() => void);\n  disabled?: boolean;\n};\nexport type UseLexicalContentEditableResult = {\n  canShowPlaceholder: boolean;\n  disabled: boolean;\n  spanRef: React.RefCallback<HTMLSpanElement>;\n  lexicalEditor: LexicalEditor;\n  lexicalInitialConfig: InitialConfigType;\n};\n\nfunction $insertString(text: string) {\n  const paragraphNode = $createParagraphNode();\n  const textNode = $createTextNode(text);\n  paragraphNode.append(textNode);\n  $insertNodes([paragraphNode]);\n}\n\nexport function useLexicalContentEditable(props: UseLexicalContentEditableProps): UseLexicalContentEditableResult {\n  const { defaultValue } = 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 editorState =\n    typeof defaultValue === 'string'\n      ? () => {\n          $insertString(defaultValue);\n        }\n      : defaultValue;\n\n  const lexicalStyles = useLexicalStyles();\n  const lexicalInitialConfig = {\n    namespace: 'fai-EditorInput',\n    onError: console.error,\n    nodes: customNodes,\n    editorState,\n    editable: !disabled,\n    theme: { paragraph: lexicalStyles.paragraph },\n  };\n  const lexicalEditor = useLexicalEditor(lexicalInitialConfig);\n\n  const canShowPlaceholder = useCanShowPlaceholder(lexicalEditor);\n\n  const spanRef = React.useCallback(\n    span => {\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","$insertString","text","paragraphNode","$createParagraphNode","textNode","$createTextNode","append","$insertNodes","props","defaultValue","customNodes","SentinelNode","disabled","setDisabled","useControllableState","editorState","initialState","useLexicalStyles","lexicalInitialConfig","namespace","nodes","editable","console","paragraph","theme","useCanShowPlaceholder","lexicalEditor","lexicalStyles","setRootElement","span","useCallback","setEditable","isEditable","registerRootListener","root","useIsomorphicLayoutEffect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA+B8BA;;;eAAAA;;;;iEA/BP;kCACM;iCAQtB;gCACyD;6BAC/B;kCACA;AAejC,SAASC,cAAcC,IAAY;UACjCC,gBAAMA,IAAAA,qCAAgBC;UACtBC,WAAMA,IAAAA,gCAAWC,EAAAA;kBACjBH,MAAcI,CAAAA;qCACdC,EAAAA;QAAAA;KAAa;;AAAe,SAAAR,0BAAAS,KAAA;IAC9B,MAAA,EAEAC,YAAgBV,KACdS;UAEAE,cAAMA,MAAcF,WAAME,GAAW;WAAGF,MAAAE,WAAA;QAAAC,8BAAA;KAAA,GAAA;QAAAA,8BAAA;KAAA;qFAAqB;kDAAEA;UAAgB,CAAAC,UAAAC,YAAA,GAAAC,IAAAA,oCAAA,EAAA;eAACH,MAAAA,QAAAA;sBAAa;;UAG7FI,cAAA,OAAAN,iBAAA,WAA8C;QAC9CT,cAAOY;;UAELI,gBAAcC,IAAAA,6BAAA;UAChBC,uBAAA;QAEAC,WAAMJ;iBAGEf,QAAAA,KAAcS;QAChBW,OACAX;QAENM;QACAM,UAAMH,CAAAA;eACJC;uBACSG,cAAaC,SAAA;;;UAGtBF,gBAAWT,IAAAA,kCAAAA,EAAAA;UACXY,qBAAOC,IAAAA,sCAAA,EAAAC;oBAAEH,OAAWI,WAAAA,CAAAA,CAAAA;iDAAwB;QAC9CD,cAAAE,cAAA,CAAAC;OACA;QAAAH;KAAMA;2CAEqBD;iDAELK,EAAAA;sBAElBC,WAAA,CAAA,CAAAnB;;;KACAc;iDAEF,EAAA;eAACA,IAAAA,8BAAAA,EAAAA,cAAAA,wBAAAA,CAAAA,CAAAA;YAAcb,YAAA,CAAAmB;QAGjB,IAAAN,cAAAO,oBAAA,CAAuCC,CAAAA;YACvCC,IAAAA,CAAAA,MAAAA;gBACET;YACF;oEAAIA;YAAc,wFAAA;YAElBS,KAAAA,KAAAA,CAAAA,UAAAA,GAA0B;;;WAItB;;;;;;;uDAWC"}