@fluentui-copilot/react-editor-input 0.1.5 → 0.2.0

package/lib/utilities/useLexicalEditor.js

@@ -0,0 +1,75 @@
+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

@@ -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) {\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/EditorInput.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["EditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEditorInput_unstable } from './useEditorInput';\nimport { renderEditorInput_unstable } from './renderEditorInput';\nimport { useEditorInputStyles_unstable } from './useEditorInputStyles.styles';\nimport type { EditorInputProps } from './EditorInput.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// EditorInput component - TODO: add more docs\nexport const EditorInput: ForwardRefComponent<EditorInputProps> = React.forwardRef((props, ref) => {\n  const state = useEditorInput_unstable(props, ref);\n\n  useEditorInputStyles_unstable(state);\n  return renderEditorInput_unstable(state);\n});\n\nEditorInput.displayName = 'EditorInput';\n"],"names":["EditorInput","React","forwardRef","props","state","useEditorInput_unstable","useEditorInputStyles_unstable","renderEditorInput_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;gCACiB;mCACG;4CACG;AAKvC,MAAMA,cAAAA,WAAAA,GAAAA,OAAqDC,UAAMC,CAAU,CAACC,OAACA;UAClFC,QAAMA,IAAAA,uCAAQC,EAAAA,OAAwBF;iEAEtCG,EAAAA;WACAC,IAAAA,6CAAOA,EAAAA;AACT;AAEAP,YAAYQ,WAAW,GAAG"}
+{"version":3,"sources":["EditorInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEditorInput_unstable } from './useEditorInput';\nimport { renderEditorInput_unstable } from './renderEditorInput';\nimport { useEditorInputStyles_unstable } from './useEditorInputStyles.styles';\nimport type { EditorInputProps } from './EditorInput.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useEditorInputContextValues } from './useEditorInputContextValues';\n\nexport const EditorInput: ForwardRefComponent<EditorInputProps> = React.forwardRef((props, ref) => {\n  const state = useEditorInput_unstable(props, ref);\n  const contextValues = useEditorInputContextValues(state);\n\n  useEditorInputStyles_unstable(state);\n\n  return renderEditorInput_unstable(state, contextValues);\n});\n\nEditorInput.displayName = 'EditorInput';\n"],"names":["EditorInput","React","forwardRef","props","state","useEditorInput_unstable","contextValues","useEditorInputContextValues","useEditorInputStyles_unstable","renderEditorInput_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;gCACiB;mCACG;4CACG;6CAGF;AAErC,MAAMA,cAAAA,WAAAA,GAAAA,OAAqDC,UAAMC,CAAU,CAACC,OAACA;UAClFC,QAAMA,IAAAA,uCAAQC,EAAAA,OAAwBF;UACtCG,gBAAMA,IAAAA,wDAAgBC,EAAAA;iEAEtBC,EAAAA;WAEAC,IAAAA,6CAAOA,EAAAA,OAA2BL;AACpC;AAEAJ,YAAYU,WAAW,GAAG"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["EditorInput.types.ts"],"sourcesContent":["import type { InitialConfigType, LexicalEditor, LexicalPlainTextPlugin } from '@fluentui-copilot/react-text-editor';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type EditorInputSlots = {\n  root: NonNullable<Slot<'span'>>;\n  input: NonNullable<Slot<'span'>>;\n  placeholderValue?: Slot<'span'>;\n};\n\n/**\n * EditorInput Props\n */\nexport type EditorInputProps = Omit<\n  ComponentProps<Partial<EditorInputSlots>, 'input'>,\n  'onChange' | 'onPaste' | 'defaultValue' | 'onSubmit'\n> & {\n  disabled?: boolean;\n  /**\n   * If defaultValue is a string, it will be added to the input on first render.\n   * If defaultValue is a function, it can call lexical $ functions to imperatively set the initial content with more complex nodes.\n   */\n  defaultValue?: string | (() => void);\n  /**\n   * Callback for when the user changes the value.\n   * TODO: Add proper event type for callback\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (ev: any, data: EditorInputValueData) => void;\n  /**\n   * Callback for when content is pasted into the Editor.\n   */\n  onPaste?: (ev: ClipboardEvent) => void;\n  /**\n   * When true, the input will be cleared when only whitespace is remaining.\n   * @default false\n   */\n  trimWhiteSpace?: boolean;\n  /**\n   * Used to register any custom nodes used by plugins added. Can also be used to override the default nodes.\n   */\n  customNodes?: InitialConfigType['nodes'];\n  /**\n   * The plugin which is in charge of initializing Lexical and is given the `input` and `placeholder` slots\n   * @default LexicalPlainTextPlugin\n   */\n  textPlugin?: typeof LexicalPlainTextPlugin;\n  /**\n   * Controls whether history is tracked to provide undo and redo functionality\n   * @default true\n   */\n  history?: boolean;\n\n  editorRef?: React.RefObject<LexicalEditor>;\n};\n\n/**\n * State used in rendering EditorInput\n */\nexport type EditorInputState = ComponentState<EditorInputSlots> &\n  Required<Pick<EditorInputProps, 'disabled' | 'textPlugin' | 'history' | 'trimWhiteSpace' | 'editorRef'>> &\n  Partial<Pick<EditorInputProps, 'onPaste'>> & {\n    lexicalInitialConfig: InitialConfigType;\n    defaultValue?: string;\n    handleOnChange: (value: string) => void;\n  };\n\n/**\n * Data passed to the `onChange` callback when the chat input's value changes.\n */\nexport type EditorInputValueData = {\n  value: string;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAkEA;;CAEC"}
+{"version":3,"sources":["EditorInput.types.ts"],"sourcesContent":["import type {\n  InitialConfigType,\n  LexicalComposerContextWithEditor,\n  LexicalEditor,\n  LexicalPlainTextPlugin,\n} from '@fluentui-copilot/react-text-editor';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type EditorInputSlots = {\n  root: NonNullable<Slot<'span'>>;\n  input: NonNullable<Slot<'span'>>;\n  placeholderValue?: Slot<'span'>;\n};\n\n/**\n * EditorInput Props\n */\nexport type EditorInputProps = Omit<\n  ComponentProps<Partial<EditorInputSlots>, 'input'>,\n  'onChange' | 'onPaste' | 'defaultValue' | 'onSubmit'\n> & {\n  disabled?: boolean;\n  /**\n   * If defaultValue is a string, it will be added to the input on first render.\n   * If defaultValue is a function, it can call lexical $ functions to imperatively set the initial content with more complex nodes.\n   */\n  defaultValue?: string | (() => void);\n  /**\n   * Callback for when the user changes the value.\n   * TODO: Add proper event type for callback\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (ev: any, data: EditorInputValueData) => void;\n  /**\n   * Callback for when content is pasted into the Editor.\n   */\n  onPaste?: (ev: ClipboardEvent) => void;\n  /**\n   * When true, the input will be cleared when only whitespace is remaining.\n   * @default false\n   */\n  trimWhiteSpace?: boolean;\n  /**\n   * Used to register any custom nodes used by plugins added. Can also be used to override the default nodes.\n   */\n  customNodes?: InitialConfigType['nodes'];\n  /**\n   * The plugin which is in charge of initializing Lexical and is given the `input` and `placeholder` slots\n   * @default LexicalPlainTextPlugin\n   */\n  textPlugin?: typeof LexicalPlainTextPlugin;\n  /**\n   * Controls whether history is tracked to provide undo and redo functionality\n   * @default true\n   */\n  history?: boolean;\n\n  editorRef?: React.RefObject<LexicalEditor>;\n};\n\n/**\n * State used in rendering EditorInput\n */\nexport type EditorInputState = ComponentState<EditorInputSlots> &\n  Required<Pick<EditorInputProps, 'disabled' | 'textPlugin' | 'history' | 'trimWhiteSpace'>> &\n  Partial<Pick<EditorInputProps, 'onPaste' | 'editorRef'>> & {\n    lexicalInitialConfig: InitialConfigType;\n    handleOnChange: (value: string) => void;\n    lexicalEditor: LexicalEditor;\n  };\n\n/**\n * Data passed to the `onChange` callback when the chat input's value changes.\n */\nexport type EditorInputValueData = {\n  value: string;\n};\n\nexport type EditorInputContextValues = {\n  lexicalComposer: LexicalComposerContextWithEditor;\n};\n"],"names":[],"rangeMappings":"","mappings":""}

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

@@ -8,4 +8,5 @@ _export_star._(require("./EditorInput.types"), exports);
 _export_star._(require("./renderEditorInput"), exports);
 _export_star._(require("./useEditorInput"), exports);
 _export_star._(require("./useEditorInputStyles.styles"), exports);
+_export_star._(require("./useEditorInputContextValues"), exports);
  //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './EditorInput';\nexport * from './EditorInput.types';\nexport * from './renderEditorInput';\nexport * from './useEditorInput';\nexport * from './useEditorInputStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './EditorInput';\nexport * from './EditorInput.types';\nexport * from './renderEditorInput';\nexport * from './useEditorInput';\nexport * from './useEditorInputStyles.styles';\nexport * from './useEditorInputContextValues';\n"],"names":[],"rangeMappings":";;;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["renderEditorInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { EditorInputState, EditorInputSlots } from './EditorInput.types';\nimport {\n  LexicalComposer,\n  LexicalErrorBoundary,\n  LexicalEditorRefPlugin,\n  LexicalHistoryPlugin,\n} from '@fluentui-copilot/react-text-editor';\nimport { BasicFunctionalityPlugin } from '@fluentui-copilot/react-chat-input-plugins';\n\n/**\n * Render the final JSX of EditorInput\n */\nexport const renderEditorInput_unstable = (state: EditorInputState) => {\n  assertSlots<EditorInputSlots>(state);\n\n  return (\n    <state.root>\n      <LexicalComposer initialConfig={state.lexicalInitialConfig}>\n        <state.textPlugin\n          contentEditable={<state.input />}\n          ErrorBoundary={LexicalErrorBoundary}\n          placeholder={state.placeholderValue ? <state.placeholderValue /> : null}\n        />\n        <>\n          <BasicFunctionalityPlugin\n            onContentChange={state.handleOnChange}\n            onPaste={state.onPaste}\n            trimWhitespace={state.trimWhiteSpace}\n            defaultValue={state.defaultValue}\n          />\n          {state.history && <LexicalHistoryPlugin />}\n        </>\n        <LexicalEditorRefPlugin editorRef={state.editorRef} />\n      </LexicalComposer>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","state","_jsx","root","LexicalComposer","initialConfig","lexicalInitialConfig","textPlugin","contentEditable","ErrorBoundary","LexicalErrorBoundary","placeholder","placeholderValue","BasicFunctionalityPlugin","onContentChange","onPaste","trimWhitespace","defaultValue","editorRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBEA;;;eAAAA;;;4BAhBF;iCAE4B;iCAOrB;uCACkC;AAMvCA,MAAAA,6BAA8BC,CAAAA;oCAE9B,EAAAA;sBAEI,GAAAC,IAAAA,eAAA,EAAAD,MAAAE,IAAA,EAACC;kBAAgBC,WAAAA,GAAeJ,IAAAA,gBAAAA,EAAMK,gCAAAA,EAAAA;;;8BACpCJ,IAAAA,eAAA,EAACD,MAAMM,UAAU,EAAA;qCACfC,WAAAA,GAAAA,IAAAA,eAAAA,EAAAA,MAAAA,KAAiB,EAACP,CAAAA;mCAClBQ,qCAAeC;iCACfC,MAAAA,gBAAmBC,GAAAA,WAAgB,GAAAV,IAAAA,eAAA,EAAAD,MAAAW,gBAAUA,EAAAA,CAAAA,KAAAA;;;;mCAE/C,GAAAV,IAAAA,eAAA,EAAAW,+CAAA,EAAA;;;kDAEIC,cAAiBb;gDACjBc,YAASd;;yCACTe,WAAAA,GAAAA,IAAAA,eAAgBf,EAAAA,qCAAoB,EAAA,CAAA;qBAAA;;mDACpCgB,uCAAoBA,EAAAA;;;;;;gDAIiBC"}
+{"version":3,"sources":["renderEditorInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { EditorInputState, EditorInputSlots, EditorInputContextValues } from './EditorInput.types';\nimport {\n  LexicalErrorBoundary,\n  LexicalEditorRefPlugin,\n  LexicalHistoryPlugin,\n  LexicalComposerContext,\n} from '@fluentui-copilot/react-text-editor';\nimport { BasicFunctionalityPlugin } from '@fluentui-copilot/react-chat-input-plugins';\n\n/**\n * Render the final JSX of EditorInput\n */\nexport const renderEditorInput_unstable = (state: EditorInputState, contextValues: EditorInputContextValues) => {\n  assertSlots<EditorInputSlots>(state);\n\n  return (\n    <state.root>\n      <LexicalComposerContext.Provider value={contextValues.lexicalComposer}>\n        <state.textPlugin contentEditable={<state.input />} ErrorBoundary={LexicalErrorBoundary} />\n        <>\n          {state.placeholderValue ? <state.placeholderValue /> : null}\n          <BasicFunctionalityPlugin\n            onContentChange={state.handleOnChange}\n            onPaste={state.onPaste}\n            trimWhitespace={state.trimWhiteSpace}\n          />\n          {state.history && <LexicalHistoryPlugin />}\n          {state.editorRef && <LexicalEditorRefPlugin editorRef={state.editorRef} />}\n        </>\n      </LexicalComposerContext.Provider>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","state","_jsx","root","LexicalComposerContext","value","contextValues","lexicalComposer","Provider","textPlugin","contentEditable","ErrorBoundary","LexicalErrorBoundary","placeholderValue","BasicFunctionalityPlugin","onContentChange","editorRef","LexicalEditorRefPlugin","onPaste"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBEA;;;eAAAA;;;4BAhBF;iCAE4B;iCAOrB;uCACkC;AAMvCA,MAAAA,6BAA8BC,CAAAA,OAAAA;oCAE9B,EAAAA;sBAEI,GAAAC,IAAAA,eAAA,EAAAD,MAAAE,IAAA,EAACC;kBAAgCC,WAAOC,GAAAA,IAAAA,gBAAAA,EAAcC,uCAAe,CAAAC,QAAA,EAAA;;;8BACnEN,IAAAA,eAAA,EAACD,MAAMQ,UAAU,EAAA;qCAACC,WAAAA,GAAAA,IAAAA,eAAAA,EAAAA,MAAAA,KAAiB,EAACT,CAAAA;mCAAgBU,qCAAeC;;;;8CACnE,GAAA,WAAA,GAAAV,IAAAA,eAAA,EAAAD,MAAAY,gBAAA,EAAA,CAAA,KAAA;wBAAA,WAAA,GAAAX,IAAAA,eAAA,EAAAY,+CAAA,EAAA;;2CACGb,OAAMY;gEACNC;;yCACCC,WAAAA,GAAAA,IAAAA,eAAiBd,EAAAA,qCAAoB,EAAA,CAAA;wBAAAA,MAAAe,SAAA,IAAA,WAAA,GAAAd,IAAAA,eAAA,EAAAe,uCAAA,EAAA;sDACrCC"}

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

@@ -11,11 +11,10 @@ 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 _reactutilities = require("@fluentui/react-utilities");
+const _useLexicalContentEditable = require("../../utilities/useLexicalContentEditable");
 const useEditorInput_unstable = (props, ref)=>{
-    const { onChange, onPaste, trimWhiteSpace = false, textPlugin = _reacttexteditor.LexicalPlainTextPlugin, history = true, editorRef: userEditorRef } = props;
+    const { onChange, onPaste, trimWhiteSpace = false, textPlugin = _reacttexteditor.LexicalPlainTextPlugin, history = true, editorRef } = props;
     const { root, primary } = (0, _reactcomponents.getPartitionedNativeProps)({
         primarySlotTagName: 'span',
         props,
@@ -25,52 +24,7 @@ const useEditorInput_unstable = (props, ref)=>{
             'defaultValue'
         ]
     });
-    const editorRef = (0, _reactcomponents.useMergedRefs)(_react.useRef(null), userEditorRef);
-    // The disabled state can also be changed by lexical (e.g. by a custom plugin) so
-    // we use `useControllableState` to coordinate
-    const [disabled, setDisabled] = (0, _reactutilities.useControllableState)({
-        state: props.disabled,
-        initialState: false
-    });
-    const customNodes = props.customNodes ? [
-        ...props.customNodes,
-        _chatinputplugins.SentinelNode
-    ] : [
-        _chatinputplugins.SentinelNode
-    ];
-    const spanRef = _react.useCallback((span)=>{
-        var // 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 { canShowPlaceholder, spanRef, disabled, lexicalEditor, lexicalInitialConfig } = (0, _useLexicalContentEditable.useLexicalContentEditable)(props);
     const handleOnChange = _react.useCallback((newValue)=>{
         onChange === null || onChange === void 0 ? void 0 : onChange({}, {
             value: newValue
@@ -78,25 +32,14 @@ const useEditorInput_unstable = (props, ref)=>{
     }, [
         onChange
     ]);
-    const [defaultString, defaultValueFunction] = (()=>{
-        if (typeof props.defaultValue === 'function') {
-            return [
-                undefined,
-                props.defaultValue
-            ];
-        }
-        return [
-            props.defaultValue,
-            undefined
-        ];
-    })();
-    const placeholderValue = _reactcomponents.slot.optional(props.placeholderValue, {
+    const placeholderValue = canShowPlaceholder ? _reactcomponents.slot.optional(props.placeholderValue, {
         elementType: 'span'
-    });
+    }) : undefined;
     const placeholderId = (0, _reactcomponents.useId)('chat-input-placeholder', placeholderValue === null || placeholderValue === void 0 ? void 0 : placeholderValue.id);
     if (placeholderValue) {
         placeholderValue.id = placeholderId;
     }
+    const describedBy = primary['aria-describedby'] ? `${primary['aria-describedby']} ${placeholderId}` : placeholderId;
     return {
         components: {
             root: 'span',
@@ -119,24 +62,19 @@ const useEditorInput_unstable = (props, ref)=>{
                 disabled,
                 suppressContentEditableWarning: true,
                 ...primary,
-                'aria-describedby': primary['aria-describedby'] ? `${primary['aria-describedby']} ${placeholderId}` : placeholderId
+                'aria-describedby': canShowPlaceholder ? describedBy : undefined
             },
             elementType: 'span'
         }),
         placeholderValue,
-        lexicalInitialConfig: {
-            namespace: 'fai-EditorInput',
-            onError: console.error,
-            nodes: customNodes,
-            editorState: defaultValueFunction
-        },
+        lexicalInitialConfig,
         editorRef,
         disabled,
         textPlugin,
         onPaste,
         handleOnChange,
-        defaultValue: defaultString,
         trimWhiteSpace,
-        history
+        history,
+        lexicalEditor
     };
 }; //# 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 {\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"}
+{"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useEditorInputContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { LexicalComposerContextWithEditor } from '@fluentui-copilot/react-text-editor';\nimport { createLexicalComposerContext } from '@fluentui-copilot/react-text-editor';\nimport type { EditorInputContextValues, EditorInputState } from './EditorInput.types';\n\nexport function useEditorInputContextValues(state: EditorInputState): EditorInputContextValues {\n  const { lexicalInitialConfig, lexicalEditor } = state;\n  const { theme } = lexicalInitialConfig;\n\n  const context: LexicalComposerContextWithEditor = React.useMemo(\n    () => [lexicalEditor, createLexicalComposerContext(null, theme)],\n    [lexicalEditor, theme],\n  );\n\n  return { lexicalComposer: context };\n}\n"],"names":["useEditorInputContextValues","state","lexicalInitialConfig","lexicalEditor","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/components/EditorInput/useEditorInputStyles.styles.js

@@ -54,9 +54,14 @@ const useLexicalStyles = (0, _reactcomponents.__styles)({
         ]
     ]
 });
-const usePlaceholderClassName = (0, _reactcomponents.__resetStyles)("r1tldilo", null, [
-    ".r1tldilo{z-index:0;grid-area:1/1/1/1;color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"
-]);
+const usePlaceholderClassName = (0, _reactcomponents.__resetStyles)("r1iwc53m", null, {
+    r: [
+        ".r1iwc53m{z-index:0;grid-area:1/1/1/1;color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"
+    ],
+    s: [
+        "@media (forced-colors: active){.r1iwc53m{color:GrayText;}}"
+    ]
+});
 const useInputClassName = (0, _reactcomponents.__resetStyles)("r18fti29", null, [
     ".r18fti29{grid-area:1/1/1/1;z-index:1;width:100%;}"
 ]);
@@ -78,13 +83,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, 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\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","useInputClassName","makeResetStyles","root","input","placeholderValue","display","__resetStyles","__styles","paragraph","jrapky","margin","B6of3ja","B74szlk","color","zIndex","sj55zd","disabled","rootClassName","state","placeholderClassName","useStyles","useRootClassName","lexicalInitialConfig","className","theme","mergeClasses","inputClassName","useLexicalStyles","styles","placeholderDisabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,qBAAAA;eAAAA;;IA0CNC,6BAAMA;eAANA;;IAbLC,iBAAU;eAAVA;;IAlBAC,gBAAY;eAAZA;;IAiBWC,uBAAoBC;eAApBD;;;iCAhC+D;AAIrE,MAAMJ,wBAA0D;UACrEM;WACAC;sBACAC;AACF;AAEA;;CAEC,SAECC,mBAASC,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;AACTP,MAAAA,mBAAYQ,IAAAA,yBAAA,EAAA;IACdC,WAAA;QAEAC,QAAO;QACLD,QAAAA;gBACEE;QACFC,SAAA;QACCC,SAAA;IAEH;;OAEEd;QAAAA;YAAAA;YAAU;gBAEVe,GAAAA,CAAAA;;SACA;KAAA;AACF;AAEO,MAAMb,0BAAoBC,IAAAA,8BAAgB,EAAA,YAAA,MAAA;IAAA;CAAA;AAC/CH,MAAAA,oBAAUQ,IAAAA,8BAAA,EAAA,YAAA,MAAA;IAAA;CAAA;MACVQ,YAAQP,IAAAA,yBAAA,EAAA;yBACD;QACNQ,QAAA;IAEH;;;;KAEgD;;AAMhD,MAAOlB,gCAAMA,CAAAA;;UAIX,EACAmB,QAAMC,KACNC;UACAC,uBAAeC;UAEfF,gBAAoBG;UAEpBH,iBAAqBlB;UAErBkB,SAAMI;UACJpB,IAAGgB,CAAAA,SAAMI,GAAAA,IAAAA,6BAAoB,EAAA1B,sBAAAM,IAAA,EAAAe,eAAAC,MAAAhB,IAAA,CAAAqB,SAAA;UAC7BC,KAAAA,CAAAA,SAAO,GAAAC,IAAAA,6BAAA,EAAA7B,sBAAAO,KAAA,EAAAuB,gBAAAR,MAAAf,KAAA,CAAAoB,SAAA;8BAAKI,GAAAA;iBAAoBL,oBAASA;eAA2B;YACtE,GAAAK,kBAAA;YAEA,GAAIT,MAAMd,oBAAkB,CAAAoB,KAAA;;;QAS5BN,MAAOA,gBAAAA,EAAAA;QACPA,MAAAd,gBAAA,CAAAmB,SAAA,GAAAE,IAAAA,6BAAA,EAAA7B,sBAAAQ,gBAAA,EAAAe,sBAAAH,YAAAY,OAAAC,mBAAA,EAAAX,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  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"}

package/lib-commonjs/index.js

@@ -18,6 +18,9 @@ _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 { 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"}
+{"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"}

package/lib-commonjs/utilities/useLexicalContentEditable.js

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

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