@selfcommunity/react-ui 0.7.5-alpha.2 → 0.7.5-alpha.4

package/lib/cjs/components/Composer/Composer.js

@@ -172,6 +172,7 @@ function Composer(inProps) {
     // REFS
     const dialogRef = (0, react_1.useRef)();
     const unloadRef = (0, react_1.useRef)(false);
+    const pointerStartY = (0, react_1.useRef)(null);
     // Create a ref for medias because of state update error on chunk upload
     const mediasRef = (0, react_1.useRef)({ medias });
     mediasRef.current = { medias };
@@ -224,15 +225,44 @@ function Composer(inProps) {
             window.onbeforeunload = null;
         }
     }, [state, canSubmit]);
+    /**
+     * On iOS, since it is not possible to anchor meadiaObject actions
+     * to the bottom of the viewport, detect 'pan' gesture to close the
+     * soft keyboard on device and show actions
+     */
     (0, react_1.useEffect)(() => {
         if (!dialogRef.current || !isIOS) {
             return;
         }
-        const handleBlur = () => {
-            dialogRef.current.focus();
+        /**
+         * On touchStart event save the initial Y
+         * @param event
+         */
+        const handleTouchStart = (event) => {
+            pointerStartY.current = event.touches[0].clientY;
+        };
+        /**
+         * Perform blur only if gesture is a pan (bottom direction)
+         * @param event
+         */
+        const handleTouchmove = (event) => {
+            const currentY = event.touches[0].clientY;
+            const deltaY = currentY - pointerStartY.current;
+            pointerStartY.current = currentY;
+            if (deltaY > 0) {
+                dialogRef.current.focus();
+            }
+        };
+        /**
+         * Attach touchstart, touchmove necessary to detect the pan gesture
+         */
+        dialogRef.current.addEventListener('touchstart', handleTouchStart);
+        dialogRef.current.addEventListener('touchmove', handleTouchmove);
+        return () => {
+            var _a, _b;
+            (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', handleTouchStart);
+            (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchmove', handleTouchmove);
         };
-        dialogRef.current.addEventListener('touchstart', handleBlur);
-        return () => { var _a; return (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', handleBlur); };
     }, [dialogRef.current, isIOS]);
     /* Handlers */
     const handleAddLayer = (0, react_1.useCallback)((layer) => setLayer(layer), []);

package/lib/cjs/components/Editor/Editor.js

@@ -11,7 +11,7 @@ const nodes_1 = tslib_1.__importDefault(require("./nodes"));
 const LexicalComposer_1 = require("@lexical/react/LexicalComposer");
 const LexicalContentEditable_1 = require("@lexical/react/LexicalContentEditable");
 const LexicalHistoryPlugin_1 = require("@lexical/react/LexicalHistoryPlugin");
-const LexicalRichTextPlugin_1 = require("@lexical/react/LexicalRichTextPlugin");
+const LexicalRichTextPlugin_1 = require("./plugins/LexicalRichTextPlugin");
 const LexicalErrorBoundary_1 = tslib_1.__importDefault(require("@lexical/react/LexicalErrorBoundary"));
 const LexicalHorizontalRulePlugin_1 = require("@lexical/react/LexicalHorizontalRulePlugin");
 const plugins_1 = require("./plugins");

package/lib/cjs/components/Editor/plugins/LexicalRichTextPlugin.d.ts

@@ -0,0 +1,6 @@
+import { ErrorBoundaryType } from '../shared/useDecorators';
+export declare function RichTextPlugin({ contentEditable, placeholder, ErrorBoundary }: {
+    contentEditable: JSX.Element;
+    placeholder: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
+    ErrorBoundary: ErrorBoundaryType;
+}): JSX.Element;

package/lib/cjs/components/Editor/plugins/LexicalRichTextPlugin.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextPlugin = void 0;
+const tslib_1 = require("tslib");
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+const React = tslib_1.__importStar(require("react"));
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const useLexicalEditable_1 = tslib_1.__importDefault(require("@lexical/react/useLexicalEditable"));
+const useDecorators_1 = require("../shared/useDecorators");
+const useEditorFocus_1 = require("../shared/useEditorFocus");
+const useCanShowPlaceholder_1 = require("../shared/useCanShowPlaceholder");
+const useRichTextSetup_1 = require("../shared/useRichTextSetup");
+function RichTextPlugin({ contentEditable, placeholder, ErrorBoundary }) {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    const decorators = (0, useDecorators_1.useDecorators)(editor, ErrorBoundary);
+    (0, useRichTextSetup_1.useRichTextSetup)(editor);
+    return (React.createElement(React.Fragment, null,
+        contentEditable,
+        React.createElement(Placeholder, { content: placeholder }),
+        decorators));
+}
+exports.RichTextPlugin = RichTextPlugin;
+function Placeholder({ content }) {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    const showPlaceholder = (0, useCanShowPlaceholder_1.useCanShowPlaceholder)(editor);
+    const editable = (0, useLexicalEditable_1.default)();
+    const hasFocus = (0, useEditorFocus_1.useEditorFocus)();
+    if (!showPlaceholder || hasFocus) {
+        return null;
+    }
+    if (typeof content === 'function') {
+        return content(editable);
+    }
+    else {
+        return content;
+    }
+}

package/lib/cjs/components/Editor/shared/useCanShowPlaceholder.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+export declare function useCanShowPlaceholder(editor: LexicalEditor): boolean;

package/lib/cjs/components/Editor/shared/useCanShowPlaceholder.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCanShowPlaceholder = void 0;
+const text_1 = require("@lexical/text");
+const utils_1 = require("@lexical/utils");
+const react_1 = require("react");
+const react_core_1 = require("@selfcommunity/react-core");
+function canShowPlaceholderFromCurrentEditorState(editor) {
+    return editor.getEditorState().read((0, text_1.$canShowPlaceholderCurry)(editor.isComposing()));
+}
+function useCanShowPlaceholder(editor) {
+    const [canShowPlaceholder, setCanShowPlaceholder] = (0, react_1.useState)(() => canShowPlaceholderFromCurrentEditorState(editor));
+    (0, react_core_1.useIsomorphicLayoutEffect)(() => {
+        function resetCanShowPlaceholder() {
+            const currentCanShowPlaceholder = canShowPlaceholderFromCurrentEditorState(editor);
+            setCanShowPlaceholder(currentCanShowPlaceholder);
+        }
+        resetCanShowPlaceholder();
+        return (0, utils_1.mergeRegister)(editor.registerUpdateListener(() => {
+            resetCanShowPlaceholder();
+        }), editor.registerEditableListener(() => {
+            resetCanShowPlaceholder();
+        }));
+    }, [editor]);
+    return canShowPlaceholder;
+}
+exports.useCanShowPlaceholder = useCanShowPlaceholder;

package/lib/cjs/components/Editor/shared/useDecorators.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+import * as React from 'react';
+declare type ErrorBoundaryProps = {
+    children: JSX.Element;
+    onError: (error: Error) => void;
+};
+export declare type ErrorBoundaryType = React.ComponentClass<ErrorBoundaryProps> | React.FC<ErrorBoundaryProps>;
+export declare function useDecorators(editor: LexicalEditor, ErrorBoundary: ErrorBoundaryType): Array<JSX.Element>;
+export {};

package/lib/cjs/components/Editor/shared/useDecorators.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDecorators = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const React = tslib_1.__importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const react_core_1 = require("@selfcommunity/react-core");
+function useDecorators(editor, ErrorBoundary) {
+    const [decorators, setDecorators] = (0, react_1.useState)(() => editor.getDecorators());
+    // Subscribe to changes
+    (0, react_core_1.useIsomorphicLayoutEffect)(() => {
+        return editor.registerDecoratorListener((nextDecorators) => {
+            (0, react_dom_1.flushSync)(() => {
+                setDecorators(nextDecorators);
+            });
+        });
+    }, [editor]);
+    (0, react_1.useEffect)(() => {
+        // If the content editable mounts before the subscription is added, then
+        // nothing will be rendered on initial pass. We can get around that by
+        // ensuring that we set the value.
+        setDecorators(editor.getDecorators());
+    }, [editor]);
+    // Return decorators defined as React Portals
+    return (0, react_1.useMemo)(() => {
+        const decoratedPortals = [];
+        const decoratorKeys = Object.keys(decorators);
+        for (let i = 0; i < decoratorKeys.length; i++) {
+            const nodeKey = decoratorKeys[i];
+            const reactDecorator = (React.createElement(ErrorBoundary, { onError: (e) => editor._onError(e) },
+                React.createElement(react_1.Suspense, { fallback: null }, decorators[nodeKey])));
+            const element = editor.getElementByKey(nodeKey);
+            if (element !== null) {
+                decoratedPortals.push((0, react_dom_1.createPortal)(reactDecorator, element, nodeKey));
+            }
+        }
+        return decoratedPortals;
+    }, [ErrorBoundary, decorators, editor]);
+}
+exports.useDecorators = useDecorators;

package/lib/cjs/components/Editor/shared/useEditorFocus.d.ts

@@ -0,0 +1,2 @@
+declare const useEditorFocus: () => boolean;
+export { useEditorFocus };

package/lib/cjs/components/Editor/shared/useEditorFocus.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditorFocus = void 0;
+const react_1 = require("react");
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const lexical_1 = require("lexical");
+const useEditorFocus = () => {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    const [hasFocus, setFocus] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => editor.registerCommand(lexical_1.BLUR_COMMAND, () => {
+        setFocus(false);
+        return false;
+    }, lexical_1.COMMAND_PRIORITY_LOW), []);
+    (0, react_1.useEffect)(() => editor.registerCommand(lexical_1.FOCUS_COMMAND, () => {
+        setFocus(true);
+        return false;
+    }, lexical_1.COMMAND_PRIORITY_LOW), []);
+    return hasFocus;
+};
+exports.useEditorFocus = useEditorFocus;

package/lib/cjs/components/Editor/shared/useRichTextSetup.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+export declare function useRichTextSetup(editor: LexicalEditor): void;

package/lib/cjs/components/Editor/shared/useRichTextSetup.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRichTextSetup = void 0;
+const dragon_1 = require("@lexical/dragon");
+const rich_text_1 = require("@lexical/rich-text");
+const utils_1 = require("@lexical/utils");
+const react_core_1 = require("@selfcommunity/react-core");
+function useRichTextSetup(editor) {
+    (0, react_core_1.useIsomorphicLayoutEffect)(() => {
+        return (0, utils_1.mergeRegister)((0, rich_text_1.registerRichText)(editor), (0, dragon_1.registerDragonSupport)(editor));
+    }, [editor]);
+}
+exports.useRichTextSetup = useRichTextSetup;

package/lib/cjs/components/UserProfileHeader/UserProfileHeader.js

@@ -11,6 +11,7 @@ const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const constants_1 = require("./constants");
+const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     cover: `${constants_1.PREFIX}-cover`,
@@ -108,9 +109,12 @@ function UserProfileHeader(inProps) {
         ? { background: `url('${scUser.cover}') center / cover` }
         : { background: `url('${scPreferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
     const realName = (isMe && scUserContext.user.real_name) || scUser.real_name;
+    const hasBadge = scUser && scUser.community_badge;
     return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest),
         react_1.default.createElement(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } },
-            react_1.default.createElement("img", { src: scUser.avatar ? scUser.avatar : '', className: classes.avatar }),
+            react_1.default.createElement(material_1.Box, { className: classes.avatar },
+                react_1.default.createElement(UserAvatar_1.default, { hide: !hasBadge },
+                    react_1.default.createElement("img", { src: scUser.avatar ? scUser.avatar : '' }))),
             isMe && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(ChangePicture_1.default, Object.assign({ iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)),
                 react_1.default.createElement("div", { className: classes.changeCover },

package/lib/esm/components/Composer/Composer.js

@@ -170,6 +170,7 @@ export default function Composer(inProps) {
     // REFS
     const dialogRef = useRef();
     const unloadRef = useRef(false);
+    const pointerStartY = useRef(null);
     // Create a ref for medias because of state update error on chunk upload
     const mediasRef = useRef({ medias });
     mediasRef.current = { medias };
@@ -222,15 +223,44 @@ export default function Composer(inProps) {
             window.onbeforeunload = null;
         }
     }, [state, canSubmit]);
+    /**
+     * On iOS, since it is not possible to anchor meadiaObject actions
+     * to the bottom of the viewport, detect 'pan' gesture to close the
+     * soft keyboard on device and show actions
+     */
     useEffect(() => {
         if (!dialogRef.current || !isIOS) {
             return;
         }
-        const handleBlur = () => {
-            dialogRef.current.focus();
+        /**
+         * On touchStart event save the initial Y
+         * @param event
+         */
+        const handleTouchStart = (event) => {
+            pointerStartY.current = event.touches[0].clientY;
+        };
+        /**
+         * Perform blur only if gesture is a pan (bottom direction)
+         * @param event
+         */
+        const handleTouchmove = (event) => {
+            const currentY = event.touches[0].clientY;
+            const deltaY = currentY - pointerStartY.current;
+            pointerStartY.current = currentY;
+            if (deltaY > 0) {
+                dialogRef.current.focus();
+            }
+        };
+        /**
+         * Attach touchstart, touchmove necessary to detect the pan gesture
+         */
+        dialogRef.current.addEventListener('touchstart', handleTouchStart);
+        dialogRef.current.addEventListener('touchmove', handleTouchmove);
+        return () => {
+            var _a, _b;
+            (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', handleTouchStart);
+            (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchmove', handleTouchmove);
         };
-        dialogRef.current.addEventListener('touchstart', handleBlur);
-        return () => { var _a; return (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', handleBlur); };
     }, [dialogRef.current, isIOS]);
     /* Handlers */
     const handleAddLayer = useCallback((layer) => setLayer(layer), []);

package/lib/esm/components/Editor/Editor.js

@@ -8,7 +8,7 @@ import nodes from './nodes';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { RichTextPlugin } from './plugins/LexicalRichTextPlugin';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
 import { HorizontalRulePlugin } from '@lexical/react/LexicalHorizontalRulePlugin';
 import { AutoLinkPlugin, DefaultHtmlValuePlugin, EmojiPlugin, ImagePlugin, MentionsPlugin, OnChangePlugin } from './plugins';

package/lib/esm/components/Editor/plugins/LexicalRichTextPlugin.d.ts

@@ -0,0 +1,6 @@
+import { ErrorBoundaryType } from '../shared/useDecorators';
+export declare function RichTextPlugin({ contentEditable, placeholder, ErrorBoundary }: {
+    contentEditable: JSX.Element;
+    placeholder: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
+    ErrorBoundary: ErrorBoundaryType;
+}): JSX.Element;

package/lib/esm/components/Editor/plugins/LexicalRichTextPlugin.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import * as React from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import useLexicalEditable from '@lexical/react/useLexicalEditable';
+import { useDecorators } from '../shared/useDecorators';
+import { useEditorFocus } from '../shared/useEditorFocus';
+import { useCanShowPlaceholder } from '../shared/useCanShowPlaceholder';
+import { useRichTextSetup } from '../shared/useRichTextSetup';
+export function RichTextPlugin({ contentEditable, placeholder, ErrorBoundary }) {
+    const [editor] = useLexicalComposerContext();
+    const decorators = useDecorators(editor, ErrorBoundary);
+    useRichTextSetup(editor);
+    return (React.createElement(React.Fragment, null,
+        contentEditable,
+        React.createElement(Placeholder, { content: placeholder }),
+        decorators));
+}
+function Placeholder({ content }) {
+    const [editor] = useLexicalComposerContext();
+    const showPlaceholder = useCanShowPlaceholder(editor);
+    const editable = useLexicalEditable();
+    const hasFocus = useEditorFocus();
+    if (!showPlaceholder || hasFocus) {
+        return null;
+    }
+    if (typeof content === 'function') {
+        return content(editable);
+    }
+    else {
+        return content;
+    }
+}

package/lib/esm/components/Editor/shared/useCanShowPlaceholder.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+export declare function useCanShowPlaceholder(editor: LexicalEditor): boolean;

package/lib/esm/components/Editor/shared/useCanShowPlaceholder.js

@@ -0,0 +1,23 @@
+import { $canShowPlaceholderCurry } from '@lexical/text';
+import { mergeRegister } from '@lexical/utils';
+import { useState } from 'react';
+import { useIsomorphicLayoutEffect } from '@selfcommunity/react-core';
+function canShowPlaceholderFromCurrentEditorState(editor) {
+    return editor.getEditorState().read($canShowPlaceholderCurry(editor.isComposing()));
+}
+export function useCanShowPlaceholder(editor) {
+    const [canShowPlaceholder, setCanShowPlaceholder] = useState(() => canShowPlaceholderFromCurrentEditorState(editor));
+    useIsomorphicLayoutEffect(() => {
+        function resetCanShowPlaceholder() {
+            const currentCanShowPlaceholder = canShowPlaceholderFromCurrentEditorState(editor);
+            setCanShowPlaceholder(currentCanShowPlaceholder);
+        }
+        resetCanShowPlaceholder();
+        return mergeRegister(editor.registerUpdateListener(() => {
+            resetCanShowPlaceholder();
+        }), editor.registerEditableListener(() => {
+            resetCanShowPlaceholder();
+        }));
+    }, [editor]);
+    return canShowPlaceholder;
+}

package/lib/esm/components/Editor/shared/useDecorators.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+import * as React from 'react';
+declare type ErrorBoundaryProps = {
+    children: JSX.Element;
+    onError: (error: Error) => void;
+};
+export declare type ErrorBoundaryType = React.ComponentClass<ErrorBoundaryProps> | React.FC<ErrorBoundaryProps>;
+export declare function useDecorators(editor: LexicalEditor, ErrorBoundary: ErrorBoundaryType): Array<JSX.Element>;
+export {};

package/lib/esm/components/Editor/shared/useDecorators.js

@@ -0,0 +1,36 @@
+import { Suspense, useEffect, useMemo, useState } from 'react';
+import * as React from 'react';
+import { createPortal, flushSync } from 'react-dom';
+import { useIsomorphicLayoutEffect } from '@selfcommunity/react-core';
+export function useDecorators(editor, ErrorBoundary) {
+    const [decorators, setDecorators] = useState(() => editor.getDecorators());
+    // Subscribe to changes
+    useIsomorphicLayoutEffect(() => {
+        return editor.registerDecoratorListener((nextDecorators) => {
+            flushSync(() => {
+                setDecorators(nextDecorators);
+            });
+        });
+    }, [editor]);
+    useEffect(() => {
+        // If the content editable mounts before the subscription is added, then
+        // nothing will be rendered on initial pass. We can get around that by
+        // ensuring that we set the value.
+        setDecorators(editor.getDecorators());
+    }, [editor]);
+    // Return decorators defined as React Portals
+    return useMemo(() => {
+        const decoratedPortals = [];
+        const decoratorKeys = Object.keys(decorators);
+        for (let i = 0; i < decoratorKeys.length; i++) {
+            const nodeKey = decoratorKeys[i];
+            const reactDecorator = (React.createElement(ErrorBoundary, { onError: (e) => editor._onError(e) },
+                React.createElement(Suspense, { fallback: null }, decorators[nodeKey])));
+            const element = editor.getElementByKey(nodeKey);
+            if (element !== null) {
+                decoratedPortals.push(createPortal(reactDecorator, element, nodeKey));
+            }
+        }
+        return decoratedPortals;
+    }, [ErrorBoundary, decorators, editor]);
+}

package/lib/esm/components/Editor/shared/useEditorFocus.d.ts

@@ -0,0 +1,2 @@
+declare const useEditorFocus: () => boolean;
+export { useEditorFocus };

package/lib/esm/components/Editor/shared/useEditorFocus.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { BLUR_COMMAND, COMMAND_PRIORITY_LOW, FOCUS_COMMAND } from 'lexical';
+const useEditorFocus = () => {
+    const [editor] = useLexicalComposerContext();
+    const [hasFocus, setFocus] = useState(false);
+    useEffect(() => editor.registerCommand(BLUR_COMMAND, () => {
+        setFocus(false);
+        return false;
+    }, COMMAND_PRIORITY_LOW), []);
+    useEffect(() => editor.registerCommand(FOCUS_COMMAND, () => {
+        setFocus(true);
+        return false;
+    }, COMMAND_PRIORITY_LOW), []);
+    return hasFocus;
+};
+export { useEditorFocus };

package/lib/esm/components/Editor/shared/useRichTextSetup.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { LexicalEditor } from 'lexical';
+export declare function useRichTextSetup(editor: LexicalEditor): void;

package/lib/esm/components/Editor/shared/useRichTextSetup.js

@@ -0,0 +1,9 @@
+import { registerDragonSupport } from '@lexical/dragon';
+import { registerRichText } from '@lexical/rich-text';
+import { mergeRegister } from '@lexical/utils';
+import { useIsomorphicLayoutEffect } from '@selfcommunity/react-core';
+export function useRichTextSetup(editor) {
+    useIsomorphicLayoutEffect(() => {
+        return mergeRegister(registerRichText(editor), registerDragonSupport(editor));
+    }, [editor]);
+}

package/lib/esm/components/UserProfileHeader/UserProfileHeader.js

@@ -9,6 +9,7 @@ import UserProfileHeaderSkeleton from './Skeleton';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { PREFIX } from './constants';
+import UserAvatar from '../../shared/UserAvatar';
 const classes = {
     root: `${PREFIX}-root`,
     cover: `${PREFIX}-cover`,
@@ -106,9 +107,12 @@ export default function UserProfileHeader(inProps) {
         ? { background: `url('${scUser.cover}') center / cover` }
         : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
     const realName = (isMe && scUserContext.user.real_name) || scUser.real_name;
+    const hasBadge = scUser && scUser.community_badge;
     return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
         React.createElement(Paper, { style: _backgroundCover, classes: { root: classes.cover } },
-            React.createElement("img", { src: scUser.avatar ? scUser.avatar : '', className: classes.avatar }),
+            React.createElement(Box, { className: classes.avatar },
+                React.createElement(UserAvatar, { hide: !hasBadge },
+                    React.createElement("img", { src: scUser.avatar ? scUser.avatar : '' }))),
             isMe && (React.createElement(React.Fragment, null,
                 React.createElement(ChangePicture, Object.assign({ iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)),
                 React.createElement("div", { className: classes.changeCover },