@selfcommunity/react-ui 0.7.0-alpha.32 → 0.7.0-alpha.320

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

@@ -0,0 +1,413 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+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 { createHashtagNode, HashtagNode } from '../nodes/HashtagNode';
+import { CategoryService } from '@selfcommunity/api-services';
+import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
+const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
+const NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
+const DocumentHashtagsRegex = {
+    NAME,
+    PUNCTUATION
+};
+const CapitalizedNameHashtagsRegex = new RegExp('(^|[^#])((?:' + DocumentHashtagsRegex.NAME + '{' + 1 + ',})$)');
+const PUNC = DocumentHashtagsRegex.PUNCTUATION;
+const TRIGGERS = ['#', '\\uff20'].join('');
+// Chars we expect to see in a hashtag (non-space, non-punctuation).
+const VALID_CHARS = '[^' + TRIGGERS + PUNC + '\\s]';
+// Non-standard series of chars. Each series must be preceded and followed by
+// a valid char.
+const VALID_JOINS = '(?:' +
+    '\\.[ |$]|' + // E.g. "r. " in "Mr. Smith"
+    ' |' + // E.g. " " in "Josh Duck"
+    '[' +
+    PUNC +
+    ']|' + // E.g. "-' in "Salier-Hellendag"
+    ')';
+const LENGTH_LIMIT = 75;
+const HashSignHashtagsRegex = new RegExp('(^|\\s|\\()(' + '[' + TRIGGERS + ']' + '((?:' + VALID_CHARS + VALID_JOINS + '){0,' + LENGTH_LIMIT + '})' + ')$');
+// 50 is the longest alias length limit.
+const ALIAS_LENGTH_LIMIT = 50;
+// Regex used to match alias.
+const HashSignHashtagsRegexAliasRegex = 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;
+const hashtagsCache = new Map();
+function useHashtagLookupService(hashtagString) {
+    const [results, setResults] = useState(null);
+    useEffect(() => {
+        const cachedResults = hashtagsCache.get(hashtagString);
+        if (cachedResults === null) {
+            return;
+        }
+        else if (cachedResults !== undefined) {
+            setResults(cachedResults);
+            return;
+        }
+        hashtagsCache.set(hashtagString, null);
+        CategoryService.searchCategory({ search: hashtagString, limit: 5, active: true }).then((res) => {
+            hashtagsCache.set(hashtagString, res.results);
+            setResults(res.results);
+        });
+    }, [hashtagString]);
+    return results;
+}
+function HashtagsTypeaheadItem({ index, isHovered, isSelected, onClick, onMouseEnter, onMouseLeave, result }) {
+    const liRef = useRef(null);
+    return (React.createElement("li", { key: result.id, tabIndex: -1, className: classNames('item', { ['selected']: isSelected, ['hovered']: isHovered }), ref: liRef, role: "option", "aria-selected": isSelected, id: 'typeahead-item-' + index, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick }, result.name));
+}
+function HashtagsTypeahead({ close, editor, resolution, className = '', containerEl = null }) {
+    const divRef = useRef(null);
+    const match = resolution.match;
+    const results = useHashtagLookupService(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', 'hashtags-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) {
+            return;
+        }
+        const selectedEntry = results[index];
+        close();
+        createHashtagNodeFromSearchResult(editor, selectedEntry, match);
+    }, [close, match, editor, results, selectedIndex]);
+    const updateSelectedIndex = useCallback((index) => {
+        const rootElem = editor.getRootElement();
+        if (rootElem !== null) {
+            rootElem.setAttribute('aria-activedescendant', 'typeahead-item-' + index);
+            setSelectedIndex(index);
+        }
+    }, [editor]);
+    useEffect(() => {
+        return () => {
+            const rootElem = editor.getRootElement();
+            if (rootElem !== null) {
+                rootElem.removeAttribute('aria-activedescendant');
+            }
+        };
+    }, [editor]);
+    useIsomorphicLayoutEffect(() => {
+        if (results === null) {
+            setSelectedIndex(null);
+        }
+        else if (selectedIndex === null) {
+            updateSelectedIndex(0);
+        }
+    }, [results, selectedIndex, updateSelectedIndex]);
+    useEffect(() => {
+        return mergeRegister(editor.registerCommand(KEY_ARROW_DOWN_COMMAND, (payload) => {
+            const event = payload;
+            if (results !== null && selectedIndex !== null) {
+                if (selectedIndex < SUGGESTION_LIST_LENGTH_LIMIT - 1 && selectedIndex !== results.length - 1) {
+                    updateSelectedIndex(selectedIndex + 1);
+                }
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+            return true;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_UP_COMMAND, (payload) => {
+            const event = payload;
+            if (results !== null && selectedIndex !== null) {
+                if (selectedIndex !== 0) {
+                    updateSelectedIndex(selectedIndex - 1);
+                }
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+            return true;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, (payload) => {
+            const event = payload;
+            if (results === null || selectedIndex === null) {
+                return false;
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            close();
+            return true;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_TAB_COMMAND, (payload) => {
+            const event = payload;
+            if (results === null || selectedIndex === null) {
+                return false;
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            applyCurrentSelected();
+            return true;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ENTER_COMMAND, (event) => {
+            if (results === null || selectedIndex === null) {
+                return false;
+            }
+            if (event !== null) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+            applyCurrentSelected();
+            return true;
+        }, COMMAND_PRIORITY_LOW));
+    }, [applyCurrentSelected, close, editor, results, selectedIndex, updateSelectedIndex]);
+    if (results === null) {
+        return null;
+    }
+    return (React.createElement("div", { className: className, "aria-label": "Suggested hashtags", ref: divRef, role: "listbox" },
+        React.createElement("ul", null, results.slice(0, SUGGESTION_LIST_LENGTH_LIMIT).map((result, i) => (React.createElement(HashtagsTypeaheadItem, { index: i, isHovered: i === hoveredIndex, isSelected: i === selectedIndex, onClick: () => {
+                applyCurrentSelected(i);
+            }, onMouseEnter: () => {
+                setHoveredIndex(i);
+            }, onMouseLeave: () => {
+                setHoveredIndex(null);
+            }, key: result.id, result: result }))))));
+}
+function checkForCapitalizedNameHashtags(text, minMatchLength) {
+    const match = CapitalizedNameHashtagsRegex.exec(text);
+    if (match !== null) {
+        // The strategy ignores leading whitespace but we need to know it's
+        // length to add it to the leadOffset
+        const maybeLeadingWhitespace = match[1];
+        const matchingString = match[2];
+        if (matchingString != null && matchingString.length >= minMatchLength) {
+            return {
+                leadOffset: match.index + maybeLeadingWhitespace.length,
+                matchingString,
+                replaceableString: matchingString
+            };
+        }
+    }
+    return null;
+}
+function checkForHashSignHashtags(text, minMatchLength) {
+    let match = HashSignHashtagsRegex.exec(text);
+    if (match === null) {
+        match = HashSignHashtagsRegexAliasRegex.exec(text);
+    }
+    if (match !== null) {
+        // The strategy ignores leading whitespace but we need to know it's
+        // length to add it to the leadOffset
+        const maybeLeadingWhitespace = match[1];
+        const matchingString = match[3];
+        if (matchingString.length >= minMatchLength) {
+            return {
+                leadOffset: match.index + maybeLeadingWhitespace.length,
+                matchingString,
+                replaceableString: match[2]
+            };
+        }
+    }
+    return null;
+}
+function getPossibleHashtagMatch(text) {
+    const match = checkForHashSignHashtags(text, 1);
+    return match === null ? checkForCapitalizedNameHashtags(text, 3) : match;
+}
+function getTextUpToAnchor(selection) {
+    const anchor = selection.anchor;
+    if (anchor.type !== 'text') {
+        return null;
+    }
+    const anchorNode = anchor.getNode();
+    // We should not be attempting to extract hashtags out of nodes
+    // that are already being used for other core things. This is
+    // especially true for immutable nodes, which can't be mutated at all.
+    if (!anchorNode.isSimpleText()) {
+        return null;
+    }
+    const anchorOffset = anchor.offset;
+    return anchorNode.getTextContent().slice(0, anchorOffset);
+}
+function tryToPositionRange(match, range) {
+    const domSelection = window.getSelection();
+    if (domSelection === null || !domSelection.isCollapsed) {
+        return false;
+    }
+    const anchorNode = domSelection.anchorNode;
+    const startOffset = match.leadOffset;
+    const endOffset = domSelection.anchorOffset;
+    try {
+        range.setStart(anchorNode, startOffset);
+        range.setEnd(anchorNode, endOffset);
+    }
+    catch (error) {
+        return false;
+    }
+    return true;
+}
+function getHashtagsTextToSearch(editor) {
+    let text = null;
+    editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) {
+            return;
+        }
+        text = getTextUpToAnchor(selection);
+    });
+    return text;
+}
+/**
+ * Walk backwards along user input and forward through entity title to try
+ * and replace more of the user's text with entity.
+ *
+ * E.g. User types "Hello Sarah Smit" and we match "Smit" to "Sarah Smith".
+ * Replacing just the match would give us "Hello Sarah Sarah Smith".
+ * Instead we find the string "Sarah Smit" and replace all of it.
+ */
+function getHashtagOffset(documentText, entryText, offset) {
+    let triggerOffset = offset;
+    for (let ii = triggerOffset; ii <= entryText.length; ii++) {
+        if (documentText.substr(-ii) === entryText.substr(0, ii)) {
+            triggerOffset = ii;
+        }
+    }
+    return triggerOffset;
+}
+/**
+ * From a Typeahead Search Result, replace plain text from search offset and
+ * render a newly created HashtagNode.
+ */
+function createHashtagNodeFromSearchResult(editor, category, match) {
+    editor.update(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+            return;
+        }
+        const anchor = selection.anchor;
+        if (anchor.type !== 'text') {
+            return;
+        }
+        const anchorNode = anchor.getNode();
+        // We should not be attempting to extract hashtags out of nodes
+        // that are already being used for other core things. This is
+        // especially true for immutable nodes, which can't be mutated at all.
+        if (!anchorNode.isSimpleText()) {
+            return;
+        }
+        const selectionOffset = anchor.offset;
+        const textContent = anchorNode.getTextContent().slice(0, selectionOffset);
+        const characterOffset = match.replaceableString.length;
+        // Given a known offset for the hashtag match, look backward in the
+        // text to see if there's a longer match to replace.
+        const hashtagOffset = getHashtagOffset(textContent, category.name, characterOffset);
+        const startOffset = selectionOffset - hashtagOffset;
+        if (startOffset < 0) {
+            return;
+        }
+        let nodeToReplace;
+        if (startOffset === 0) {
+            [nodeToReplace] = anchorNode.splitText(selectionOffset);
+        }
+        else {
+            [, nodeToReplace] = anchorNode.splitText(startOffset, selectionOffset);
+        }
+        const hashtagNode = createHashtagNode(category);
+        nodeToReplace.replace(hashtagNode);
+        hashtagNode.select();
+    });
+}
+function isSelectionOnEntityBoundary(editor, offset) {
+    if (offset !== 0) {
+        return false;
+    }
+    return editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            const anchor = selection.anchor;
+            const anchorNode = anchor.getNode();
+            const prevSibling = anchorNode.getPreviousSibling();
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // @ts-ignore
+            return $isTextNode(prevSibling) && prevSibling.isTextEntity();
+        }
+        return false;
+    });
+}
+const PREFIX = 'SCEditorHashtagPlugin';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(HashtagsTypeahead, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+function useHashtags(editor, containerSelector = null) {
+    const [resolution, setResolution] = useState(null);
+    useEffect(() => {
+        if (!editor.hasNodes([HashtagNode])) {
+            throw new Error('HashtagsPlugin: HashtagNode not registered on editor');
+        }
+    }, [editor]);
+    useEffect(() => {
+        let activeRange = document.createRange();
+        let previousText = null;
+        const updateListener = ({ prevEditorState }) => {
+            if (prevEditorState.isEmpty()) {
+                return;
+            }
+            const range = activeRange;
+            const text = getHashtagsTextToSearch(editor);
+            if (text === previousText || range === null) {
+                return;
+            }
+            previousText = text;
+            if (text === null) {
+                return;
+            }
+            const match = getPossibleHashtagMatch(text);
+            if (match !== null && !isSelectionOnEntityBoundary(editor, match.leadOffset)) {
+                const isRangePositioned = tryToPositionRange(match, range);
+                if (isRangePositioned !== null) {
+                    setResolution({
+                        match,
+                        range
+                    });
+                    return;
+                }
+            }
+            setResolution(null);
+        };
+        const removeUpdateListener = editor.registerUpdateListener(updateListener);
+        return () => {
+            activeRange = null;
+            removeUpdateListener();
+        };
+    }, [editor]);
+    const closeTypeahead = useCallback(() => {
+        setResolution(null);
+    }, []);
+    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);
+}
+export default function HashtagsPlugin({ containerSelector = 'body' }) {
+    const [editor] = useLexicalComposerContext();
+    return useHashtags(editor, containerSelector);
+}

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

@@ -7,4 +7,3 @@ export interface InsertImagePayload {
 }
 export declare const INSERT_IMAGE_COMMAND: LexicalCommand<InsertImagePayload>;
 export default function ImagePlugin(): JSX.Element;
-//# sourceMappingURL=ImagePlugin.d.ts.map

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

@@ -1,7 +1,8 @@
+import { __rest } from "tslib";
 import React, { forwardRef, useEffect, useState } from 'react';
-import { $getSelection, $isRangeSelection, $isRootNode, COMMAND_PRIORITY_EDITOR, createCommand, INSERT_PARAGRAPH_COMMAND, } from 'lexical';
+import { $getSelection, $isRangeSelection, $isRootNode, COMMAND_PRIORITY_EDITOR, createCommand, INSERT_PARAGRAPH_COMMAND } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { Icon, IconButton } from '@mui/material';
+import { CircularProgress, Icon, IconButton } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import ChunkedUploady from '@rpldy/chunked-uploady';
 import { Endpoints } from '@selfcommunity/api-services';
@@ -11,8 +12,10 @@ import { asUploadButton } from '@rpldy/upload-button';
 import { useSnackbar } from 'notistack';
 import { $createImageNode, ImageNode } from '../nodes/ImageNode';
 export const INSERT_IMAGE_COMMAND = createCommand();
-const UploadButton = asUploadButton(forwardRef((props, ref) => (React.createElement(IconButton, Object.assign({}, props, { "aria-label": "upload image", ref: ref, color: "inherit" }),
-    React.createElement(Icon, { color: "inherit" }, "image")))));
+const UploadButton = asUploadButton(forwardRef((_a, ref) => {
+    var { progress = null } = _a, rest = __rest(_a, ["progress"]);
+    return (React.createElement(IconButton, Object.assign({}, rest, { "aria-label": "upload image", ref: ref }), progress ? React.createElement(CircularProgress, { variant: "determinate", value: progress, size: "1rem" }) : React.createElement(Icon, { color: "inherit" }, "image")));
+}));
 function Image({ editor, className = '' }) {
     // CONTEXT
     const scContext = useSCContext();
@@ -26,11 +29,18 @@ function Image({ editor, className = '' }) {
         return file.type.startsWith('image/');
     };
     const handleUploadSuccess = (media) => {
+        const image = media.image_thumbnail
+            ? media.image_thumbnail
+            : {
+                url: media.image,
+                width: media.image_width,
+                height: media.image_height
+            };
         const data = {
             altText: media.title,
-            src: media.image,
-            width: media.image_width,
-            height: media.image_height
+            src: image.url,
+            width: image.width,
+            height: image.height
         };
         editor.focus();
         editor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
@@ -57,7 +67,10 @@ function Image({ editor, className = '' }) {
             method: Endpoints.ComposerChunkUploadMedia.method
         }, chunkSize: 204800, multiple: true, accept: "image/*", fileFilter: handleFileUploadFilter },
         React.createElement(MediaChunkUploader, { type: "eimage", onSuccess: handleUploadSuccess, onProgress: handleUploadProgress, onError: handleUploadError }),
-        React.createElement(UploadButton, { className: className, extraProps: { disabled: Object.keys(uploading).length !== 0 } })));
+        React.createElement(UploadButton, { className: className, extraProps: {
+                disabled: Object.keys(uploading).length !== 0,
+                progress: Object.keys(uploading).length !== 0 ? Object.values(uploading)[0].completed : null
+            } })));
 }
 const PREFIX = 'SCEditorImagePlugin';
 const classes = {
@@ -80,7 +93,7 @@ export default function ImagePlugin() {
                 if ($isRootNode(selection.anchor.getNode())) {
                     selection.insertParagraph();
                 }
-                const imageNode = $createImageNode({ src: payload.src, altText: payload.altText, maxWidth: '100%' });
+                const imageNode = $createImageNode({ src: payload.src, altText: payload.altText, width: payload.width, height: payload.height });
                 selection.insertNodes([imageNode]);
             }
             return true;
@@ -91,4 +104,3 @@ export default function ImagePlugin() {
     }
     return React.createElement(Root, { editor: editor, className: classes.root });
 }
-//# sourceMappingURL=ImagePlugin.js.map

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

@@ -1,4 +1,3 @@
 export default function MentionsPlugin({ containerSelector }: {
     containerSelector?: string;
 }): JSX.Element;
-//# sourceMappingURL=MentionsPlugin.d.ts.map

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

@@ -362,42 +362,7 @@ 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()
-            }
-        }
-    }
-}));
+})(({ theme }) => ({}));
 function useMentions(editor, containerSelector = null) {
     const [resolution, setResolution] = useState(null);
     useEffect(() => {
@@ -456,4 +421,3 @@ export default function MentionsPlugin({ containerSelector = 'body' }) {
     const [editor] = useLexicalComposerContext();
     return useMentions(editor, containerSelector);
 }
-//# 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,11 +1,11 @@
 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';
+import { $generateHtmlFromNodes } from '@lexical/html';
 const IS_BOLD = 1;
 const IS_ITALIC = 2;
 const convertText = (node) => {
@@ -60,10 +60,10 @@ const OnChangePlugin = (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;