@selfcommunity/react-ui 0.7.0-alpha.33 → 0.7.0-alpha.330

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

@@ -1,48 +1,31 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
 const react_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
-const classnames_1 = __importDefault(require("classnames"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
-const nodes_1 = __importDefault(require("./nodes"));
+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 LexicalErrorBoundary_1 = tslib_1.__importDefault(require("@lexical/react/LexicalErrorBoundary"));
+const LexicalHorizontalRulePlugin_1 = require("@lexical/react/LexicalHorizontalRulePlugin");
 const plugins_1 = require("./plugins");
 const LexicalLinkPlugin_1 = require("@lexical/react/LexicalLinkPlugin");
-const ApiPlugin_1 = __importDefault(require("./plugins/ApiPlugin"));
+const ApiPlugin_1 = tslib_1.__importDefault(require("./plugins/ApiPlugin"));
+const ToolbarPlugin_1 = tslib_1.__importDefault(require("./plugins/ToolbarPlugin"));
+const LexicalListPlugin_1 = require("@lexical/react/LexicalListPlugin");
+const FloatingLinkPlugin_1 = tslib_1.__importDefault(require("./plugins/FloatingLinkPlugin"));
+const OnBlurPlugin_1 = tslib_1.__importDefault(require("./plugins/OnBlurPlugin"));
+const OnFocusPlugin_1 = tslib_1.__importDefault(require("./plugins/OnFocusPlugin"));
 const PREFIX = 'SCEditor';
 const classes = {
     root: `${PREFIX}-root`,
+    toolbar: `${PREFIX}-toolbar`,
     content: `${PREFIX}-content`,
     placeholder: `${PREFIX}-placeholder`,
     actions: `${PREFIX}-actions`
@@ -50,94 +33,49 @@ const classes = {
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    boxSizing: 'border-box',
-    padding: theme.spacing(1, 2),
-    position: 'relative',
-    cursor: 'text',
-    [`& .${classes.content}`]: {
-        position: 'relative',
-        outline: 'none',
-        minHeight: 40,
-        paddingBottom: 20,
-        '& > p': {
-            margin: 0
-        },
-        '& img': {
-            margin: 0,
-            '&.focused': {
-                outline: '2px solid rgb(60, 132, 244)',
-                userSelect: 'none'
-            }
-        },
-        ['& mention']: {
-            backgroundColor: theme.palette.primary.light
-        }
-    },
-    [`& .${classes.placeholder}`]: {
-        position: 'absolute',
-        top: theme.spacing(1),
-        left: theme.spacing(2),
-        color: theme.palette.text.disabled
-    },
-    [`& .${classes.actions}`]: {
-        position: 'absolute',
-        bottom: 0,
-        right: theme.spacing(),
-        color: theme.palette.text.primary
+    overridesResolver: (props, styles) => {
+        return [styles.root, props.className.includes(classes.toolbar) && styles.toolbar];
+    }
+})(({ theme }) => ({}));
+const editorTheme = {
+    heading: {
+        h1: `${PREFIX}-h1`,
+        h2: `${PREFIX}-h2`,
+        h3: `${PREFIX}-h3`,
+        h4: `${PREFIX}-h4`,
+        h5: `${PREFIX}-h5`,
+        h6: `${PREFIX}-h6`
     },
-    '& .image-resizer': {
-        display: 'block',
-        width: 7,
-        height: 7,
-        position: 'absolute',
-        backgroundColor: 'rgb(60, 132, 244)',
-        border: '1px solid #fff',
-        '&.image-resizer-n': {
-            top: -6,
-            left: '48%',
-            cursor: 'n-resize'
+    link: `${PREFIX}-link`,
+    list: {
+        listitem: `${PREFIX}-listItem`,
+        nested: {
+            listitem: `${PREFIX}-nestedListItem`
         },
-        '&.image-resizer-ne': {
-            top: -6,
-            right: -6,
-            cursor: 'ne-resize'
-        },
-        '&.image-resizer-e': {
-            top: '48%',
-            right: -6,
-            cursor: 'e-resize'
-        },
-        '&.image-resizer-se': {
-            bottom: -2,
-            right: -6,
-            cursor: 'se-resize'
-        },
-        '&.image-resizer-s': {
-            bottom: -2,
-            left: '48%',
-            cursor: 's-resize'
-        },
-        '&.image-resizer-sw': {
-            bottom: -2,
-            left: -6,
-            cursor: 'sw-resize'
-        },
-        '&.image-resizer-w': {
-            bottom: '48%',
-            left: -6,
-            cursor: 'w-resize'
-        },
-        '&.image-resizer-nw': {
-            top: -6,
-            left: -6,
-            cursor: 'nw-resize'
-        }
+        olDepth: [`${PREFIX}-ol1`, `${PREFIX}-ol2`, `${PREFIX}-ol3`, `${PREFIX}-ol4`, `${PREFIX}-ol5`],
+        ul: `${PREFIX}-ul`
+    },
+    ltr: `${PREFIX}-ltr`,
+    paragraph: `${PREFIX}-paragraph`,
+    image: `${PREFIX}-image`,
+    quote: `${PREFIX}-quote`,
+    rtl: `${PREFIX}-rtl`,
+    text: {
+        bold: `${PREFIX}-textBold`,
+        italic: `${PREFIX}-textItalic`,
+        strikethrough: `${PREFIX}-textStrikethrough`,
+        subscript: `${PREFIX}-textSubscript`,
+        superscript: `${PREFIX}-textSuperscript`,
+        underline: `${PREFIX}-textUnderline`,
+        underlineStrikethrough: `${PREFIX}-textUnderlineStrikethrough`
     }
-}));
+};
 /**
  * > API documentation for the Community-JS Editor component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a text editor.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Editor)
 
  #### Import
 
@@ -154,7 +92,10 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCEditor-root|Styles applied to the root element.|
+ |toolbar|.SCEditor-toolbar|Styles applied to the toolbar element.|
  |content|.SCEditor-content|Styles applied to the content element.|
+ |placeholder|.SCEditor-placeholder|Styles applied to the placeholder element.|
+ |actions|.SCEditor-actions|Styles applied to the actions section.|
 
  * @param inProps
  */
@@ -164,8 +105,10 @@ const Editor = (inProps, ref) => {
         props: inProps,
         name: PREFIX
     });
-    const { id = 'editor', className = null, defaultValue = '', editable = true, onChange = null } = props;
+    const { id = 'editor', className = null, defaultValue = '', toolbar = false, uploadImage = false, editable = true, onChange = null, onFocus = null, onBlur = null } = props;
     const apiRef = (0, react_1.useRef)();
+    // MEMO
+    const theme = (0, material_1.useTheme)();
     // HANDLERS
     const handleChange = (value) => {
         onChange && onChange(value);
@@ -187,22 +130,28 @@ const Editor = (inProps, ref) => {
         namespace: 'LexicalEditor',
         editable: editable,
         onError: handleError,
-        nodes: [...nodes_1.default]
+        nodes: [...nodes_1.default],
+        theme: editorTheme
     }), [editable]);
-    return (react_1.default.createElement(Root, { id: id, className: (0, classnames_1.default)(classes.root, className) },
+    return (react_1.default.createElement(Root, { id: id, className: (0, classnames_1.default)(classes.root, className, { [classes.toolbar]: toolbar }) },
         react_1.default.createElement(LexicalComposer_1.LexicalComposer, { initialConfig: initialConfig },
+            toolbar ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(ToolbarPlugin_1.default, { uploadImage: uploadImage }),
+                react_1.default.createElement(LexicalListPlugin_1.ListPlugin, null),
+                react_1.default.createElement(LexicalHorizontalRulePlugin_1.HorizontalRulePlugin, null))) : (react_1.default.createElement(material_1.Stack, { className: classes.actions, direction: "row" },
+                uploadImage && react_1.default.createElement(plugins_1.ImagePlugin, null),
+                react_1.default.createElement(plugins_1.EmojiPlugin, null))),
             react_1.default.createElement(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: react_1.default.createElement(LexicalContentEditable_1.ContentEditable, { className: classes.content }), placeholder: react_1.default.createElement(material_1.Box, { className: classes.placeholder, onClick: handleFocus },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" })) }),
+                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" })), ErrorBoundary: LexicalErrorBoundary_1.default }),
             react_1.default.createElement(plugins_1.DefaultHtmlValuePlugin, { defaultValue: defaultValue }),
             react_1.default.createElement(LexicalHistoryPlugin_1.HistoryPlugin, null),
             react_1.default.createElement(plugins_1.OnChangePlugin, { onChange: handleChange }),
+            react_1.default.createElement(OnBlurPlugin_1.default, { onBlur: onBlur }),
+            react_1.default.createElement(OnFocusPlugin_1.default, { onFocus: onFocus }),
             react_1.default.createElement(plugins_1.AutoLinkPlugin, null),
             react_1.default.createElement(plugins_1.MentionsPlugin, null),
             react_1.default.createElement(LexicalLinkPlugin_1.LinkPlugin, null),
-            react_1.default.createElement(material_1.Stack, { className: classes.actions, direction: "row" },
-                react_1.default.createElement(plugins_1.ImagePlugin, null),
-                react_1.default.createElement(plugins_1.EmojiPlugin, null)),
+            react_1.default.createElement(FloatingLinkPlugin_1.default, null),
             react_1.default.createElement(ApiPlugin_1.default, { ref: apiRef }))));
 };
 exports.default = (0, react_1.forwardRef)(Editor);
-//# sourceMappingURL=Editor.js.map

package/lib/cjs/components/Editor/Skeleton.d.ts

@@ -19,4 +19,3 @@
  *
  */
 export default function EditorSkeleton(): JSX.Element;
-//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -1,9 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const Skeleton_1 = require("../Skeleton");
 const styles_1 = require("@mui/material/styles");
 const PREFIX = 'SCEditorSkeleton';
@@ -39,4 +37,3 @@ function EditorSkeleton() {
     return react_1.default.createElement(Root, { className: classes.root });
 }
 exports.default = EditorSkeleton;
-//# sourceMappingURL=Skeleton.js.map

package/lib/cjs/components/Editor/index.d.ts

@@ -2,4 +2,3 @@ import Editor, { EditorProps, EditorRef } from './Editor';
 export default Editor;
 import EditorSkeleton from './Skeleton';
 export { EditorProps, EditorRef, EditorSkeleton };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditorSkeleton = void 0;
-const Editor_1 = __importDefault(require("./Editor"));
+const tslib_1 = require("tslib");
+const Editor_1 = tslib_1.__importDefault(require("./Editor"));
 exports.default = Editor_1.default;
-const Skeleton_1 = __importDefault(require("./Skeleton"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 exports.EditorSkeleton = Skeleton_1.default;
-//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,23 @@
+import { DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread, TextNode } from 'lexical';
+import { SCCategoryType } from '@selfcommunity/types';
+import { DOMConversionMap } from 'lexical/LexicalNode';
+export declare type SerializedHashtagNode = Spread<{
+    category: SCCategoryType;
+    type: 'hashtag';
+    version: 1;
+}, SerializedTextNode>;
+export declare class HashtagNode extends TextNode {
+    __category: SCCategoryType;
+    static getType(): string;
+    static clone(node: HashtagNode): HashtagNode;
+    constructor(category: SCCategoryType, text?: string, key?: NodeKey);
+    createDOM(config: any): HTMLElement;
+    updateDOM(prevNode: TextNode, dom: HTMLElement, config: EditorConfig): boolean;
+    static importDOM(): DOMConversionMap | null;
+    exportDOM(): DOMExportOutput;
+    isTextEntity(): true;
+    static importJSON(serializedNode: SerializedHashtagNode): HashtagNode;
+    exportJSON(): SerializedHashtagNode;
+}
+export declare function createHashtagNode(category: SCCategoryType): HashtagNode;
+export declare function isHashtagNode(node?: LexicalNode): boolean;

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

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isHashtagNode = exports.createHashtagNode = exports.HashtagNode = void 0;
+const lexical_1 = require("lexical");
+function convertHashtagElement(domNode) {
+    const hashtag = domNode;
+    return {
+        node: createHashtagNode({
+            id: hashtag.getAttribute('id'),
+            name: hashtag.innerText.replace('#', '')
+        })
+    };
+}
+class HashtagNode extends lexical_1.TextNode {
+    constructor(category, text, key) {
+        super(text !== null && text !== void 0 ? text : `#${category.name}`, key);
+        this.__category = category;
+    }
+    static getType() {
+        return 'hashtag';
+    }
+    static clone(node) {
+        return new HashtagNode(node.__category, node.__text, node.__key);
+    }
+    createDOM(config) {
+        const tag = 'hashtag';
+        const dom = document.createElement(tag);
+        dom.setAttribute('id', `${this.__category.id}`);
+        dom.innerText = this.__text;
+        return dom;
+    }
+    updateDOM(prevNode, dom, config) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        const inner = dom.firstChild;
+        if (inner === null) {
+            return true;
+        }
+        super.updateDOM(prevNode, inner, config);
+        return false;
+    }
+    static importDOM() {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        const dom = lexical_1.TextNode.importDOM();
+        return Object.assign({ hashtag: (node) => ({
+                conversion: convertHashtagElement,
+                priority: 0
+            }) }, dom);
+    }
+    exportDOM() {
+        const element = document.createElement('hashtag');
+        element.setAttribute('id', `${this.__category.id}`);
+        element.textContent = `#${this.__category.name}`;
+        return { element };
+    }
+    isTextEntity() {
+        return true;
+    }
+    static importJSON(serializedNode) {
+        const { category } = serializedNode;
+        const node = createHashtagNode(category);
+        return node;
+    }
+    exportJSON() {
+        return Object.assign(Object.assign({}, super.exportJSON()), { category: this.__category, type: 'hashtag', version: 1 });
+    }
+}
+exports.HashtagNode = HashtagNode;
+function createHashtagNode(category) {
+    const hashtagNode = new HashtagNode(category);
+    hashtagNode.setMode('segmented').toggleDirectionless();
+    return hashtagNode;
+}
+exports.createHashtagNode = createHashtagNode;
+function isHashtagNode(node) {
+    return node.getType() === 'hashtag';
+}
+exports.isHashtagNode = isHashtagNode;

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

@@ -1,5 +1,5 @@
 import { LegacyRef } from 'react';
-import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import { DecoratorNode, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
 export interface ImagePayload {
     altText: string;
     className?: string;
@@ -14,22 +14,18 @@ declare function convertImageElement(domNode: any): {
 };
 export declare type SerializedImageNode = Spread<{
     altText: string;
-    height?: number;
     maxWidth: number | string;
     src: string;
-    width?: number;
     type: 'image';
     version: 1;
 }, SerializedLexicalNode>;
 export declare class ImageNode extends DecoratorNode<JSX.Element> {
     __src: string;
     __altText: string;
-    __width: 'inherit' | number;
-    __height: 'inherit' | number;
     __maxWidth: number | string;
     static getType(): string;
     static clone(node: ImageNode): ImageNode;
-    constructor(src: string, altText: string, maxWidth: number | string, width?: 'inherit' | number, height?: 'inherit' | number, key?: NodeKey);
+    constructor(src: string, altText: string, maxWidth: number | string, key?: NodeKey);
     setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): false;
@@ -39,11 +35,11 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
             priority: number;
         };
     };
+    exportDOM(): DOMExportOutput;
     decorate(): JSX.Element;
     static importJSON(serializedNode: SerializedImageNode): ImageNode;
     exportJSON(): SerializedImageNode;
 }
-export declare function $createImageNode({ src, altText, maxWidth, width, height }: ImagePayload): ImageNode;
+export declare function $createImageNode({ src, altText, maxWidth }: ImagePayload): ImageNode;
 export declare function $isImageNode(node?: LexicalNode): boolean;
 export {};
-//# sourceMappingURL=ImageNode.d.ts.map