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

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

package/lib-commonjs/utilities/useLexicalEditor.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useLexicalEditor", {
+    enumerable: true,
+    get: function() {
+        return useLexicalEditor;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _reacttexteditor = require("@fluentui-copilot/react-text-editor");
+const _reactutilities = require("@fluentui/react-utilities");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+// Merge initial state with history
+const UPDATE_OPTIONS = {
+    tag: 'history-merge'
+};
+function setInitialState(editor, initialState) {
+    if (initialState === null) {
+        return;
+    } else if (initialState === undefined) {
+        editor.update(()=>{
+            const root = (0, _reacttexteditor.$getRoot)();
+            if (root.isEmpty()) {
+                root.append((0, _reacttexteditor.$createParagraphNode)());
+            }
+        }, UPDATE_OPTIONS);
+    } else {
+        switch(typeof initialState){
+            case 'string':
+                {
+                    const parsedState = editor.parseEditorState(initialState);
+                    editor.setEditorState(parsedState, UPDATE_OPTIONS);
+                    break;
+                }
+            case 'object':
+                {
+                    editor.setEditorState(initialState, UPDATE_OPTIONS);
+                    break;
+                }
+            case 'function':
+                {
+                    editor.update(()=>{
+                        if ((0, _reacttexteditor.$getRoot)().isEmpty()) {
+                            initialState(editor);
+                        }
+                    }, UPDATE_OPTIONS);
+                }
+        }
+    }
+}
+function useLexicalEditor(initialConfig) {
+    const { theme, namespace, nodes, onError, editorState: initialEditorState, html, editable = true } = initialConfig;
+    const lexicalEditor = _react.useMemo(()=>{
+        const lexicalEditor = (0, _reacttexteditor.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
+    []);
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        const isEditable = initialConfig.editable;
+        lexicalEditor.setEditable(isEditable !== undefined ? isEditable : true);
+    }, []);
+    return lexicalEditor;
+} //# sourceMappingURL=useLexicalEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useLexicalEditor.ts"],"sourcesContent":["import type { InitialConfigType, LexicalEditor } from '@fluentui-copilot/react-text-editor';\nimport { $createParagraphNode } from '@fluentui-copilot/react-text-editor';\nimport { $getRoot } from '@fluentui-copilot/react-text-editor';\nimport { createEditor } from '@fluentui-copilot/react-text-editor';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n// Merge initial state with history\nconst UPDATE_OPTIONS = { tag: 'history-merge' };\n\nfunction setInitialState(editor: LexicalEditor, initialState: InitialConfigType['editorState']) {\n  if (initialState === null) {\n    return;\n  } else if (initialState === undefined) {\n    editor.update(() => {\n      const root = $getRoot();\n      if (root.isEmpty()) {\n        root.append($createParagraphNode());\n      }\n    }, UPDATE_OPTIONS);\n  } else {\n    switch (typeof initialState) {\n      case 'string': {\n        const parsedState = editor.parseEditorState(initialState);\n        editor.setEditorState(parsedState, UPDATE_OPTIONS);\n        break;\n      }\n      case 'object': {\n        editor.setEditorState(initialState, UPDATE_OPTIONS);\n        break;\n      }\n      case 'function': {\n        editor.update(() => {\n          if ($getRoot().isEmpty()) {\n            initialState(editor);\n          }\n        }, UPDATE_OPTIONS);\n      }\n    }\n  }\n}\n\nexport function useLexicalEditor(initialConfig: InitialConfigType) {\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":["useLexicalEditor","UPDATE_OPTIONS","tag","setInitialState","editor","initialState","undefined","update","root","$getRoot","isEmpty","$createParagraphNode","parsedState","parseEditorState","setEditorState","initialConfig","theme","namespace","onError","lexicalEditor","React","useMemo","initialEditorState","html","nodes","useIsomorphicLayoutEffect","error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA0CgBA;;;eAAAA;;;;iCAzCqB;gCAGK;iEACnB;AAEvB,mCAAmC;AACnC,MAAMC,iBAAiB;SAAEC;AAAqB;AAE9C,SAASC,gBAAgBC,MAAqB,EAAEC,YAA8C;QAC5FA,iBAAIA,MAAiB;;WAErB,IAAOA,iBAAIA,WAAiBC;eAC1BF,MAAOG,CAAAA;kBACLC,OAAMA,IAAAA,yBAAOC;qBACbC,OAASA,IAAAA;2BACPF,CAAAA,IAAAA,qCAAYG;;;WAGlB;eACE,OAAQN;;;wCAEEO,OAAAA,gBAAqBC,CAAAA;yCACpBC,CAAAA,aAAeF;;;;;yCAIfE,CAAAA,cAAeT;;;;;iCAItBD,CAAAA;yDACE,IAAAM,OAAID,IAAAA;;;;;;;AAOd;AAEO,SAAST,iBAAiBe,aAAgC;UAC/D,EAEAC,KAAA,WAEI,+BAGEC,kBAAAA,mBAEAC,IAAAA;UAEFC,gBAAAC,OAAAC,OAAA,CAAA;cAEAlB,gBAAgBgB,IAAAA,6BAAAA,EAAeG;;YAGjCC;YAEAN;YACEO;YAGJC,SAAAA,CAAAA,QAAAA,QAA0BC,OAAAP;;;QAG1BhB,gBAAKgB,eAAAG;QAEL,OAAOH;IACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-editor-input",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "a base rich editor input.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,15 +12,15 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/chat-input-plugins": "^0.1.4",
-    "@fluentui-copilot/react-chat-input-plugins": "^0.1.4",
-    "@fluentui-copilot/react-text-editor": "^0.1.8",
+    "@fluentui-copilot/chat-input-plugins": "^0.2.0",
+    "@fluentui-copilot/react-chat-input-plugins": "^0.2.0",
+    "@fluentui-copilot/react-text-editor": "^0.2.0",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@fluentui/react-components": ">=9.54.4 <10.0.0",
-    "@fluentui/react-jsx-runtime": ">=9.0.40 <10.0.0",
-    "@fluentui/react-utilities": ">=9.18.11 <10.0.0",
+    "@fluentui/react-components": ">=9.54.10 <10.0.0",
+    "@fluentui/react-jsx-runtime": ">=9.0.42 <10.0.0",
+    "@fluentui/react-utilities": ">=9.18.13 <10.0.0",
     "@types/react": ">=16.14.0 <19.0.0",
     "@types/react-dom": ">=16.9.8 <19.0.0",
     "react": ">=16.14.0 <19.0.0",