@selfcommunity/react-ui 0.7.0-alpha.99 → 0.7.0

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

@@ -3,12 +3,13 @@ import { useIsomorphicLayoutEffect } from '@selfcommunity/react-core';
 import { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { mergeRegister } from '@lexical/utils';
-import { createPortal } from 'react-dom';
 import { createMentionNode, MentionNode } from '../nodes/MentionNode';
 import { http, Endpoints } from '@selfcommunity/api-services';
 import classNames from 'classnames';
-import { Avatar } from '@mui/material';
+import { Avatar, Portal } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import { PREFIX } from '../constants';
 const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
 const NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
 const DocumentMentionsRegex = {
@@ -37,6 +38,140 @@ const ALIAS_LENGTH_LIMIT = 50;
 const AtSignMentionsRegexAliasRegex = new RegExp('(^|\\s|\\()(' + '[' + TRIGGERS + ']' + '((?:' + VALID_CHARS + '){0,' + ALIAS_LENGTH_LIMIT + '})' + ')$');
 // At most, 5 suggestions are shown in the popup.
 const SUGGESTION_LIST_LENGTH_LIMIT = 5;
+function isTriggerVisibleInNearestScrollContainer(targetElement, containerElement) {
+    const tRect = targetElement.getBoundingClientRect();
+    const cRect = containerElement.getBoundingClientRect();
+    return tRect.top > cRect.top && tRect.top < cRect.bottom;
+}
+export function getScrollParent(element, includeHidden) {
+    let style = getComputedStyle(element);
+    const excludeStaticParent = style.position === 'absolute';
+    const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
+    if (style.position === 'fixed') {
+        return document.body;
+    }
+    for (let parent = element; (parent = parent.parentElement);) {
+        style = getComputedStyle(parent);
+        if (excludeStaticParent && style.position === 'static') {
+            continue;
+        }
+        if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) {
+            return parent;
+        }
+    }
+    return document.body;
+}
+export function useDynamicPositioning(resolution, targetElement, onReposition, onVisibilityChange) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (targetElement != null && resolution != null) {
+            const rootElement = editor.getRootElement();
+            const rootScrollParent = rootElement != null ? getScrollParent(rootElement, false) : document.body;
+            let ticking = false;
+            let previousIsInView = isTriggerVisibleInNearestScrollContainer(targetElement, rootScrollParent);
+            const handleScroll = function () {
+                if (!ticking) {
+                    window.requestAnimationFrame(function () {
+                        onReposition();
+                        ticking = false;
+                    });
+                    ticking = true;
+                }
+                const isInView = isTriggerVisibleInNearestScrollContainer(targetElement, rootScrollParent);
+                if (isInView !== previousIsInView) {
+                    previousIsInView = isInView;
+                    if (onVisibilityChange != null) {
+                        onVisibilityChange(isInView);
+                    }
+                }
+            };
+            const resizeObserver = new ResizeObserver(onReposition);
+            window.addEventListener('resize', onReposition);
+            document.addEventListener('scroll', handleScroll, {
+                capture: true,
+                passive: true
+            });
+            resizeObserver.observe(targetElement);
+            return () => {
+                resizeObserver.unobserve(targetElement);
+                window.removeEventListener('resize', onReposition);
+                document.removeEventListener('scroll', handleScroll, true);
+            };
+        }
+    }, [targetElement, editor, onVisibilityChange, onReposition, resolution]);
+}
+export function useMenuAnchorRef(resolution, setResolution, className) {
+    const [anchorElementRef, setAnchorElementRef] = useState(null);
+    const [editor] = useLexicalComposerContext();
+    //const anchorElementRef = useRef<HTMLElement>(null);
+    const positionMenu = useCallback(() => {
+        const rootElement = editor.getRootElement();
+        const containerDiv = anchorElementRef;
+        const menuEle = containerDiv.firstChild;
+        if (rootElement !== null && resolution !== null) {
+            const { left, top, width, height } = resolution.range.getBoundingClientRect();
+            containerDiv.style.top = `${top + window.scrollY}px`;
+            containerDiv.style.left = `${left + window.scrollX}px`;
+            containerDiv.style.height = `${height}px`;
+            containerDiv.style.width = `${width}px`;
+            if (menuEle !== null) {
+                const menuRect = menuEle.getBoundingClientRect();
+                const menuHeight = menuRect.height;
+                const menuWidth = menuRect.width;
+                const rootElementRect = rootElement.getBoundingClientRect();
+                if (left + menuWidth > rootElementRect.right) {
+                    containerDiv.style.left = `${rootElementRect.right - menuWidth + window.scrollX}px`;
+                }
+                const margin = 10;
+                if ((top + menuHeight > window.innerHeight || top + menuHeight > rootElementRect.bottom) && top - rootElementRect.top > menuHeight) {
+                    containerDiv.style.top = `${top - menuHeight + window.scrollY - (height + margin)}px`;
+                }
+            }
+            if (!containerDiv.isConnected) {
+                if (className != null) {
+                    containerDiv.className = className;
+                }
+                containerDiv.setAttribute('aria-label', 'Typeahead menu');
+                containerDiv.setAttribute('id', 'typeahead-menu');
+                containerDiv.setAttribute('role', 'listbox');
+                containerDiv.style.display = 'block';
+                containerDiv.style.position = 'absolute';
+                document.body.append(containerDiv);
+            }
+            setAnchorElementRef(containerDiv);
+            rootElement.setAttribute('aria-controls', 'typeahead-menu');
+        }
+    }, [anchorElementRef, editor, resolution, className]);
+    useEffect(() => {
+        if (resolution && !anchorElementRef) {
+            setAnchorElementRef(document.createElement('div'));
+        }
+    }, [resolution]);
+    useEffect(() => {
+        const rootElement = editor.getRootElement();
+        if (resolution !== null && anchorElementRef) {
+            positionMenu();
+            return () => {
+                if (rootElement !== null) {
+                    rootElement.removeAttribute('aria-controls');
+                }
+                const containerDiv = anchorElementRef;
+                if (containerDiv !== null && containerDiv.isConnected) {
+                    containerDiv.remove();
+                }
+            };
+        }
+    }, [anchorElementRef, editor, positionMenu, resolution]);
+    const onVisibilityChange = useCallback((isInView) => {
+        if (resolution !== null) {
+            if (!isInView) {
+                setResolution(null);
+            }
+        }
+    }, [resolution, setResolution]);
+    useDynamicPositioning(resolution, anchorElementRef, positionMenu, onVisibilityChange);
+    return anchorElementRef;
+}
 const mentionsCache = new Map();
 function useMentionLookupService(mentionString) {
     const [results, setResults] = useState(null);
@@ -70,34 +205,12 @@ function MentionsTypeaheadItem({ index, isHovered, isSelected, onClick, onMouseE
         " ",
         result.username));
 }
-function MentionsTypeahead({ close, editor, resolution, className = '', containerEl = null }) {
+function MentionsTypeahead({ close, editor, resolution, className = '' }) {
     const divRef = useRef(null);
     const match = resolution.match;
     const results = useMentionLookupService(match.matchingString);
     const [selectedIndex, setSelectedIndex] = useState(null);
     const [hoveredIndex, setHoveredIndex] = useState(null);
-    useEffect(() => {
-        const div = divRef.current;
-        const rootElement = editor.getRootElement();
-        const parentContainerElement = containerEl ? containerEl : rootElement.parentElement;
-        if (results !== null && div !== null && rootElement !== null) {
-            const range = resolution.range;
-            // Re-calc, relative to the parent container, prevent scroll problems
-            const parentRootPos = parentContainerElement.getBoundingClientRect();
-            const { left, right, top, height } = range.getBoundingClientRect();
-            let relativePosTop = top - parentRootPos.top;
-            let relativePosLeft = right - parentRootPos.left;
-            div.style.position = 'absolute';
-            div.style.top = `${relativePosTop + height + 7}px`;
-            div.style.left = `${relativePosLeft - 14}px`;
-            div.style.display = 'block';
-            rootElement.setAttribute('aria-controls', 'mentions-typeahead');
-            return () => {
-                div.style.display = 'none';
-                rootElement.removeAttribute('aria-controls');
-            };
-        }
-    }, [editor, resolution, results]);
     const applyCurrentSelected = useCallback((index) => {
         index = index || selectedIndex;
         if (results === null || index === null) {
@@ -136,9 +249,9 @@ function MentionsTypeahead({ close, editor, resolution, className = '', containe
             if (results !== null && selectedIndex !== null) {
                 if (selectedIndex < SUGGESTION_LIST_LENGTH_LIMIT - 1 && selectedIndex !== results.length - 1) {
                     updateSelectedIndex(selectedIndex + 1);
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
                 }
-                event.preventDefault();
-                event.stopImmediatePropagation();
             }
             return true;
         }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_UP_COMMAND, (payload) => {
@@ -146,9 +259,9 @@ function MentionsTypeahead({ close, editor, resolution, className = '', containe
             if (results !== null && selectedIndex !== null) {
                 if (selectedIndex !== 0) {
                     updateSelectedIndex(selectedIndex - 1);
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
                 }
-                event.preventDefault();
-                event.stopImmediatePropagation();
             }
             return true;
         }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, (payload) => {
@@ -257,6 +370,9 @@ function tryToPositionRange(match, range) {
     const anchorNode = domSelection.anchorNode;
     const startOffset = match.leadOffset;
     const endOffset = domSelection.anchorOffset;
+    if (anchorNode == null || endOffset == null) {
+        return false;
+    }
     try {
         range.setStart(anchorNode, startOffset);
         range.setEnd(anchorNode, endOffset);
@@ -354,52 +470,16 @@ function isSelectionOnEntityBoundary(editor, offset) {
         return false;
     });
 }
-const PREFIX = 'SCEditorMentionPlugin';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-mention-plugin-root`
 };
 const Root = styled(MentionsTypeahead, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    position: 'absolute',
-    background: '#fff',
-    boxShadow: '0px 5px 10px rgba(0, 0, 0, 0.3)',
-    borderEadius: 8,
-    zIndex: 3000,
-    '& ul': {
-        padding: 0,
-        listStyle: 'none',
-        margin: 0,
-        borderRadius: 10,
-        '& li': {
-            padding: theme.spacing(1),
-            margin: 0,
-            minWidth: 180,
-            fontSize: theme.typography.body2.fontSize,
-            outline: 'none',
-            cursor: 'pointer',
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'left',
-            alignItems: 'center',
-            '&.selected': {
-                background: theme.palette.action.selected
-            },
-            '&.hovered': {
-                background: theme.palette.action.hover
-            },
-            '& .MuiAvatar-root': {
-                width: 20,
-                height: 20,
-                marginRight: theme.spacing()
-            }
-        }
-    }
-}));
-function useMentions(editor, containerSelector = null) {
+    slot: 'MentionPluginRoot'
+})(() => ({}));
+function useMentions(editor, anchorClassName = null) {
     const [resolution, setResolution] = useState(null);
+    const anchorElementRef = useMenuAnchorRef(resolution, setResolution, anchorClassName);
     useEffect(() => {
         if (!editor.hasNodes([MentionNode])) {
             throw new Error('MentionsPlugin: MentionNode not registered on editor');
@@ -442,18 +522,18 @@ function useMentions(editor, containerSelector = null) {
     }, [editor]);
     const closeTypeahead = useCallback(() => {
         setResolution(null);
-    }, []);
+    }, [resolution]);
     if (resolution === null || editor === null) {
         return null;
     }
-    // Set portal container
-    const portalContainer = containerSelector
-        ? editor.getRootElement().parentElement.closest(containerSelector)
-        : editor.getRootElement().parentElement;
-    return createPortal(React.createElement(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root, containerEl: portalContainer }), portalContainer);
+    if (!anchorElementRef) {
+        return null;
+    }
+    return (React.createElement(ClickAwayListener, { onClickAway: closeTypeahead },
+        React.createElement(Portal, { container: anchorElementRef },
+            React.createElement(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root }))));
 }
-export default function MentionsPlugin({ containerSelector = 'body' }) {
+export default function MentionsPlugin() {
     const [editor] = useLexicalComposerContext();
-    return useMentions(editor, containerSelector);
+    return useMentions(editor);
 }
-//# sourceMappingURL=MentionsPlugin.js.map

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

@@ -0,0 +1,5 @@
+interface OnBlurPluginProps {
+    onBlur?: (event: FocusEvent) => void;
+}
+declare const OnBlurPlugin: ({ onBlur }: OnBlurPluginProps) => any;
+export default OnBlurPlugin;

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

@@ -0,0 +1,14 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+import { BLUR_COMMAND, COMMAND_PRIORITY_EDITOR } from 'lexical';
+const OnBlurPlugin = ({ onBlur }) => {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerCommand(BLUR_COMMAND, (event) => {
+            onBlur && onBlur(event);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, []);
+    return null;
+};
+export default OnBlurPlugin;

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

@@ -1,3 +1,2 @@
 declare const OnChangePlugin: (props: any) => JSX.Element;
 export default OnChangePlugin;
-//# sourceMappingURL=OnChangePlugin.d.ts.map

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

@@ -1,69 +1,15 @@
 import React from 'react';
 import { OnChangePlugin as LexicalOnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
-import { $getRoot } from 'lexical';
-import { ImageNode } from '../nodes/ImageNode';
-import { MentionNode } from '../nodes/MentionNode';
-import { HeadingNode, QuoteNode } from '@lexical/rich-text';
-import { AutoLinkNode, LinkNode } from '@lexical/link';
-import { CodeNode } from '@lexical/code';
-const IS_BOLD = 1;
-const IS_ITALIC = 2;
-const convertText = (node) => {
-    if (node.getFormat() === IS_BOLD) {
-        return `<strong>${node.__text}</strong>`;
-    }
-    else if (node.getFormat() === IS_ITALIC) {
-        return `<em>${node.__text}</em>`;
-    }
-    return `<span>${node.__text}</span>`;
-};
-const convertNode = (node, children) => {
-    switch (node.getType()) {
-        case ImageNode.getType():
-            return `<img src="${node.__src}" alt="${node.__altText}" width="${node.__width}" height="${node.__height}" style="max-width: ${node.__maxWidth}px;" />`;
-        case MentionNode.getType():
-            return `<mention id="${node.__user.id}" ext-id="${node.__user.ext_id}">@${node.__user.username}</mention>`;
-        case AutoLinkNode.getType():
-        case LinkNode.getType():
-            return `<a href="${node.__url}">${node.__url}</a>`;
-        case 'list':
-            return `<${node.__tag}>${children}</${node.__tag}>`;
-        case 'listitem':
-            return `<li>${node.__value}</li>`;
-        case QuoteNode.getType():
-            return `<blockquote>${children}</blockquote>`;
-        case CodeNode.getType():
-            return `<pre>${children}</pre>`;
-        case 'linebreak':
-            return `<br/>`;
-        case 'text':
-            return convertText(node);
-        case HeadingNode.getType():
-            return `<${node.__tag}>${children}</${node.__tag}>`;
-        case 'paragraph':
-            return `<p>${children ? children : '<br/>'}</p>`;
-        case 'root':
-            return children;
-        default:
-            return '';
-    }
-};
-const $toHtml = (node) => {
-    let html = '';
-    // Create html for child nodes
-    node.getChildren && node.getChildren().map((child) => (html += $toHtml(child)));
-    // Return new html
-    return convertNode(node, html);
-};
+import { $generateHtmlFromNodes } from '@lexical/html';
 const OnChangePlugin = (props) => {
     // PROPS
     const { onChange } = props;
     const handleChange = (editorState, editor) => {
         editorState.read(() => {
-            onChange($toHtml($getRoot()));
+            const htmlString = $generateHtmlFromNodes(editor);
+            onChange(htmlString);
         });
     };
     return React.createElement(LexicalOnChangePlugin, { onChange: handleChange });
 };
 export default OnChangePlugin;
-//# sourceMappingURL=OnChangePlugin.js.map

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

@@ -0,0 +1,5 @@
+interface OnFocusPluginProps {
+    onFocus?: (event: FocusEvent) => void;
+}
+declare const OnFocusPlugin: ({ onFocus }: OnFocusPluginProps) => any;
+export default OnFocusPlugin;

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

@@ -0,0 +1,14 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+import { COMMAND_PRIORITY_EDITOR, FOCUS_COMMAND } from 'lexical';
+const OnFocusPlugin = ({ onFocus }) => {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerCommand(FOCUS_COMMAND, (event) => {
+            onFocus && onFocus(event);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, []);
+    return null;
+};
+export default OnFocusPlugin;

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

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ */
+export interface ToolbarPluginProps {
+    uploadImage: boolean;
+}
+export default function ToolbarPlugin(inProps: ToolbarPluginProps): JSX.Element;