@selfcommunity/react-ui 0.10.2-courses.159 → 0.10.2-courses.161

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@selfcommunity/react-ui",
-	"version": "0.10.2-courses.159+5780ca964",
+	"version": "0.10.2-courses.161+6ee05aeb9",
 	"description": "React UI Components to integrate a Community created with SelfCommunity Platform.",
 	"author": "SelfCommunity <https://www.selfcommunity.com>",
 	"homepage": "https://www.selfcommunity.com",
@@ -97,12 +97,12 @@
 		"@rpldy/upload-drop-zone": "^1.7.1",
 		"@rpldy/upload-preview": "^1.7.1",
 		"@rpldy/uploady": "^1.7.1",
-		"@selfcommunity/api-services": "0.6.4-courses.207+5780ca964",
-		"@selfcommunity/react-core": "0.6.4-courses.161+5780ca964",
-		"@selfcommunity/react-i18n": "0.7.4-courses.161+5780ca964",
-		"@selfcommunity/react-theme-default": "0.4.2-courses.159+5780ca964",
-		"@selfcommunity/types": "0.7.4-courses.207+5780ca964",
-		"@selfcommunity/utils": "0.2.61-courses.207+5780ca964",
+		"@selfcommunity/api-services": "0.6.4-courses.209+6ee05aeb9",
+		"@selfcommunity/react-core": "0.6.4-courses.163+6ee05aeb9",
+		"@selfcommunity/react-i18n": "0.7.4-courses.163+6ee05aeb9",
+		"@selfcommunity/react-theme-default": "0.4.2-courses.161+6ee05aeb9",
+		"@selfcommunity/types": "0.7.4-courses.209+6ee05aeb9",
+		"@selfcommunity/utils": "0.2.61-courses.209+6ee05aeb9",
 		"@types/classnames": "^2.3.1",
 		"@types/sortablejs": "1",
 		"autosuggest-highlight": "^3.3.4",
@@ -197,5 +197,5 @@
 	"engines": {
 		"node": ">=20.x"
 	},
-	"gitHead": "5780ca964556d50c5fb73a0e8c888c514b525e4d"
+	"gitHead": "6ee05aeb9f43e80c5b7780e8c99e6afcd8cceb5f"
 }

package/lib/cjs/components/Editor/nodes/DocNode.d.ts

@@ -1,39 +0,0 @@
-import { DecoratorNode, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
-export interface DocPayload {
-    name: string;
-    src: string;
-    type: string;
-    className?: string;
-}
-declare function convertDocElement(domNode: HTMLElement): {
-    node: DocNode;
-};
-export declare type SerializedDocNode = Spread<{
-    src: string;
-    name: string;
-    type: 'doc';
-    version: 1;
-}, SerializedLexicalNode>;
-export declare class DocNode extends DecoratorNode<JSX.Element> {
-    __src: string;
-    __name: string;
-    __type: string;
-    static getType(): string;
-    static clone(node: DocNode): DocNode;
-    constructor(src: string, name: string, type?: string, key?: NodeKey);
-    createDOM(config: EditorConfig): HTMLElement;
-    updateDOM(): false;
-    static importDOM(): {
-        div: (node: HTMLElement) => {
-            conversion: typeof convertDocElement;
-            priority: number;
-        };
-    };
-    exportDOM(): DOMExportOutput;
-    decorate(): JSX.Element;
-    static importJSON(serializedNode: SerializedDocNode): DocNode;
-    exportJSON(): SerializedDocNode;
-}
-export declare function $createDocNode({ src, name, type }: DocPayload): DocNode;
-export declare function $isDocNode(node?: LexicalNode): boolean;
-export {};

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

@@ -1,181 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.$isDocNode = exports.$createDocNode = exports.DocNode = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const lexical_1 = require("lexical");
-const thumbnailCoverter_1 = require("../../../utils/thumbnailCoverter");
-const useLexicalNodeSelection_1 = require("@lexical/react/useLexicalNodeSelection");
-const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
-const material_1 = require("@mui/material");
-const utils_1 = require("@lexical/utils");
-function DocComponent({ src, name, nodeKey }) {
-    const ref = (0, react_1.useRef)(null);
-    const buttonRef = (0, react_1.useRef)(null);
-    const [isSelected, setSelected, clearSelection] = (0, useLexicalNodeSelection_1.useLexicalNodeSelection)(nodeKey);
-    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
-    const activeEditorRef = (0, react_1.useRef)(null);
-    const onDelete = (0, react_1.useCallback)((payload) => {
-        if (isSelected && (0, lexical_1.$isNodeSelection)((0, lexical_1.$getSelection)())) {
-            const event = payload;
-            event.preventDefault();
-            const node = (0, lexical_1.$getNodeByKey)(nodeKey);
-            if ($isDocNode(node)) {
-                node.remove();
-            }
-            setSelected(false);
-        }
-        return false;
-    }, [isSelected, nodeKey, setSelected]);
-    const onEnter = (0, react_1.useCallback)((event) => {
-        const latestSelection = (0, lexical_1.$getSelection)();
-        const buttonElem = buttonRef.current;
-        if (isSelected && (0, lexical_1.$isNodeSelection)(latestSelection) && latestSelection.getNodes().length === 1) {
-            if (buttonElem !== null && buttonElem !== document.activeElement) {
-                event.preventDefault();
-                buttonElem.focus();
-                return true;
-            }
-        }
-        return false;
-    }, [isSelected]);
-    const onEscape = (0, react_1.useCallback)((event) => {
-        if (buttonRef.current === event.target) {
-            (0, lexical_1.$setSelection)(null);
-            editor.update(() => {
-                setSelected(true);
-                const parentRootElement = editor.getRootElement();
-                if (parentRootElement !== null) {
-                    parentRootElement.focus();
-                }
-            });
-            return true;
-        }
-        return false;
-    }, [editor, setSelected]);
-    (0, react_1.useEffect)(() => {
-        const unregister = (0, utils_1.mergeRegister)(editor.registerCommand(lexical_1.SELECTION_CHANGE_COMMAND, (_, activeEditor) => {
-            activeEditorRef.current = activeEditor;
-            return false;
-        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.CLICK_COMMAND, (payload) => {
-            const event = payload;
-            if (event.target === ref.current) {
-                if (event.shiftKey) {
-                    setSelected(!isSelected);
-                }
-                else {
-                    clearSelection();
-                    setSelected(true);
-                }
-                return true;
-            }
-            return false;
-        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_DELETE_COMMAND, onDelete, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_BACKSPACE_COMMAND, onDelete, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_ENTER_COMMAND, onEnter, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_ESCAPE_COMMAND, onEscape, lexical_1.COMMAND_PRIORITY_LOW));
-        return () => {
-            unregister();
-        };
-    }, [clearSelection, editor, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
-    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, Object.assign({ fallback: null }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ ref: ref, className: isSelected ? `selected` : null }, { children: (0, jsx_runtime_1.jsxs)(material_1.Link, Object.assign({ href: src, target: "_blank", rel: "noopener noreferrer", underline: "none" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: thumbnailCoverter_1.documentPlaceholder, alt: name }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", color: 'text.primary' }, { children: name }))] })) })) })));
-}
-function convertDocElement(domNode) {
-    if (domNode instanceof HTMLDivElement && domNode.getAttribute('src')) {
-        const src = domNode.getAttribute('src');
-        const name = domNode.getAttribute('alt') || 'Untitled Document';
-        return { node: $createDocNode({ src, name, type: 'doc' }) };
-    }
-    return null;
-}
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-// @ts-ignore
-class DocNode extends lexical_1.DecoratorNode {
-    constructor(src, name, type, key) {
-        super(key);
-        this.__src = src;
-        this.__name = name;
-        this.__type = type;
-    }
-    static getType() {
-        return 'doc';
-    }
-    static clone(node) {
-        return new DocNode(node.__src, node.__name, node.__type, node.__key);
-    }
-    createDOM(config) {
-        const div = document.createElement('div');
-        const theme = config.theme;
-        const className = theme.document;
-        if (className !== undefined) {
-            div.className = className;
-        }
-        return div;
-    }
-    updateDOM() {
-        return false;
-    }
-    static importDOM() {
-        return {
-            div: (node) => {
-                if (node.hasAttribute('src')) {
-                    return {
-                        conversion: convertDocElement,
-                        priority: 1
-                    };
-                }
-                return null;
-            }
-        };
-    }
-    exportDOM() {
-        const element = document.createElement('div');
-        element.setAttribute('src', this.__src);
-        element.setAttribute('alt', this.__name);
-        element.className = 'SCEditor-document';
-        const link = document.createElement('a');
-        link.href = this.__src;
-        link.target = '_blank';
-        link.rel = 'noopener noreferrer';
-        link.title = this.__name;
-        link.style.textDecoration = 'none';
-        // Add an Image
-        const img = document.createElement('img');
-        img.src = thumbnailCoverter_1.documentPlaceholder;
-        img.alt = this.__name;
-        img.style.marginRight = '8px';
-        // Add a Typography-like Text Node
-        const text = document.createElement('span');
-        text.textContent = this.__name;
-        // Append elements
-        link.append(img, text);
-        element.appendChild(link);
-        return { element };
-    }
-    decorate() {
-        return (0, jsx_runtime_1.jsx)(DocComponent, { src: this.__src, name: this.__name, nodeKey: this.getKey() });
-    }
-    static importJSON(serializedNode) {
-        const { src, name, type } = serializedNode;
-        const node = $createDocNode({
-            src,
-            name,
-            type
-        });
-        return node;
-    }
-    exportJSON() {
-        return {
-            src: this.__src,
-            name: this.__name,
-            type: 'doc',
-            version: 1
-        };
-    }
-}
-exports.DocNode = DocNode;
-function $createDocNode({ src, name, type }) {
-    return new DocNode(src, name, type);
-}
-exports.$createDocNode = $createDocNode;
-function $isDocNode(node) {
-    return node.getType() === 'doc';
-}
-exports.$isDocNode = $isDocNode;

package/lib/esm/components/Editor/nodes/DocNode.d.ts

@@ -1,39 +0,0 @@
-import { DecoratorNode, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
-export interface DocPayload {
-    name: string;
-    src: string;
-    type: string;
-    className?: string;
-}
-declare function convertDocElement(domNode: HTMLElement): {
-    node: DocNode;
-};
-export declare type SerializedDocNode = Spread<{
-    src: string;
-    name: string;
-    type: 'doc';
-    version: 1;
-}, SerializedLexicalNode>;
-export declare class DocNode extends DecoratorNode<JSX.Element> {
-    __src: string;
-    __name: string;
-    __type: string;
-    static getType(): string;
-    static clone(node: DocNode): DocNode;
-    constructor(src: string, name: string, type?: string, key?: NodeKey);
-    createDOM(config: EditorConfig): HTMLElement;
-    updateDOM(): false;
-    static importDOM(): {
-        div: (node: HTMLElement) => {
-            conversion: typeof convertDocElement;
-            priority: number;
-        };
-    };
-    exportDOM(): DOMExportOutput;
-    decorate(): JSX.Element;
-    static importJSON(serializedNode: SerializedDocNode): DocNode;
-    exportJSON(): SerializedDocNode;
-}
-export declare function $createDocNode({ src, name, type }: DocPayload): DocNode;
-export declare function $isDocNode(node?: LexicalNode): boolean;
-export {};

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

@@ -1,175 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, useCallback, useEffect, useRef } from 'react';
-import { $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DecoratorNode, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND } from 'lexical';
-import { documentPlaceholder } from '../../../utils/thumbnailCoverter';
-import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { Box, Link, Typography } from '@mui/material';
-import { mergeRegister } from '@lexical/utils';
-function DocComponent({ src, name, nodeKey }) {
-    const ref = useRef(null);
-    const buttonRef = useRef(null);
-    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
-    const [editor] = useLexicalComposerContext();
-    const activeEditorRef = useRef(null);
-    const onDelete = useCallback((payload) => {
-        if (isSelected && $isNodeSelection($getSelection())) {
-            const event = payload;
-            event.preventDefault();
-            const node = $getNodeByKey(nodeKey);
-            if ($isDocNode(node)) {
-                node.remove();
-            }
-            setSelected(false);
-        }
-        return false;
-    }, [isSelected, nodeKey, setSelected]);
-    const onEnter = useCallback((event) => {
-        const latestSelection = $getSelection();
-        const buttonElem = buttonRef.current;
-        if (isSelected && $isNodeSelection(latestSelection) && latestSelection.getNodes().length === 1) {
-            if (buttonElem !== null && buttonElem !== document.activeElement) {
-                event.preventDefault();
-                buttonElem.focus();
-                return true;
-            }
-        }
-        return false;
-    }, [isSelected]);
-    const onEscape = useCallback((event) => {
-        if (buttonRef.current === event.target) {
-            $setSelection(null);
-            editor.update(() => {
-                setSelected(true);
-                const parentRootElement = editor.getRootElement();
-                if (parentRootElement !== null) {
-                    parentRootElement.focus();
-                }
-            });
-            return true;
-        }
-        return false;
-    }, [editor, setSelected]);
-    useEffect(() => {
-        const unregister = mergeRegister(editor.registerCommand(SELECTION_CHANGE_COMMAND, (_, activeEditor) => {
-            activeEditorRef.current = activeEditor;
-            return false;
-        }, COMMAND_PRIORITY_LOW), editor.registerCommand(CLICK_COMMAND, (payload) => {
-            const event = payload;
-            if (event.target === ref.current) {
-                if (event.shiftKey) {
-                    setSelected(!isSelected);
-                }
-                else {
-                    clearSelection();
-                    setSelected(true);
-                }
-                return true;
-            }
-            return false;
-        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW));
-        return () => {
-            unregister();
-        };
-    }, [clearSelection, editor, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
-    return (_jsx(Suspense, Object.assign({ fallback: null }, { children: _jsx(Box, Object.assign({ ref: ref, className: isSelected ? `selected` : null }, { children: _jsxs(Link, Object.assign({ href: src, target: "_blank", rel: "noopener noreferrer", underline: "none" }, { children: [_jsx("img", { src: documentPlaceholder, alt: name }), _jsx(Typography, Object.assign({ variant: "body1", color: 'text.primary' }, { children: name }))] })) })) })));
-}
-function convertDocElement(domNode) {
-    if (domNode instanceof HTMLDivElement && domNode.getAttribute('src')) {
-        const src = domNode.getAttribute('src');
-        const name = domNode.getAttribute('alt') || 'Untitled Document';
-        return { node: $createDocNode({ src, name, type: 'doc' }) };
-    }
-    return null;
-}
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-// @ts-ignore
-export class DocNode extends DecoratorNode {
-    constructor(src, name, type, key) {
-        super(key);
-        this.__src = src;
-        this.__name = name;
-        this.__type = type;
-    }
-    static getType() {
-        return 'doc';
-    }
-    static clone(node) {
-        return new DocNode(node.__src, node.__name, node.__type, node.__key);
-    }
-    createDOM(config) {
-        const div = document.createElement('div');
-        const theme = config.theme;
-        const className = theme.document;
-        if (className !== undefined) {
-            div.className = className;
-        }
-        return div;
-    }
-    updateDOM() {
-        return false;
-    }
-    static importDOM() {
-        return {
-            div: (node) => {
-                if (node.hasAttribute('src')) {
-                    return {
-                        conversion: convertDocElement,
-                        priority: 1
-                    };
-                }
-                return null;
-            }
-        };
-    }
-    exportDOM() {
-        const element = document.createElement('div');
-        element.setAttribute('src', this.__src);
-        element.setAttribute('alt', this.__name);
-        element.className = 'SCEditor-document';
-        const link = document.createElement('a');
-        link.href = this.__src;
-        link.target = '_blank';
-        link.rel = 'noopener noreferrer';
-        link.title = this.__name;
-        link.style.textDecoration = 'none';
-        // Add an Image
-        const img = document.createElement('img');
-        img.src = documentPlaceholder;
-        img.alt = this.__name;
-        img.style.marginRight = '8px';
-        // Add a Typography-like Text Node
-        const text = document.createElement('span');
-        text.textContent = this.__name;
-        // Append elements
-        link.append(img, text);
-        element.appendChild(link);
-        return { element };
-    }
-    decorate() {
-        return _jsx(DocComponent, { src: this.__src, name: this.__name, nodeKey: this.getKey() });
-    }
-    static importJSON(serializedNode) {
-        const { src, name, type } = serializedNode;
-        const node = $createDocNode({
-            src,
-            name,
-            type
-        });
-        return node;
-    }
-    exportJSON() {
-        return {
-            src: this.__src,
-            name: this.__name,
-            type: 'doc',
-            version: 1
-        };
-    }
-}
-export function $createDocNode({ src, name, type }) {
-    return new DocNode(src, name, type);
-}
-export function $isDocNode(node) {
-    return node.getType() === 'doc';
-}