@logora/debate 0.1.0

package/src/components/input/text_editor/TextEditor.jsx

@@ -0,0 +1,205 @@
+import React, { useState, useEffect, useId } from 'react';
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { ToolbarPlugin } from "./plugins/ToolbarPlugin";
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { EditorRefPlugin } from '@lexical/react/LexicalEditorRefPlugin'
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { QuoteNode } from "@lexical/rich-text";
+import { OverflowNode } from "@lexical/overflow";
+import { AutoSavePlugin } from "./plugins/AutoSavePlugin";
+import { SetContentPlugin } from "./plugins/SetContentPlugin";
+import { SetRichContentPlugin } from "./plugins/SetRichContentPlugin";
+import { ResetPlugin } from "./plugins/ResetPlugin";
+import { FocusPlugin } from "./plugins/FocusPlugin";
+import { MaxLengthPlugin } from "./plugins/MaxLengthPlugin";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { $getRoot } from "lexical";
+import { useModal } from '@logora/debate/dialog/modal';
+import { CharacterLimitPlugin } from '@lexical/react/LexicalCharacterLimitPlugin';
+import { SourceModal } from '@logora/debate/source/source_modal';
+import { SourceListItem } from '@logora/debate/source/source_list_item';
+import { useIntl } from 'react-intl';
+import styles from './TextEditor.module.scss';
+import EditorTheme from './EditorTheme';
+import cx from "classnames";
+import PropTypes from "prop-types";
+
+export const TextEditor = ({ placeholder, onSubmit, sources, hideSubmit = false, hideSourceAction = false, onActivation, disabled = false, handleChange, handleSourcesChange, shortBar = false, active = false, maxLength, disableRichText = false, editorRef, uid, allowedDomains = [], hideCharCount = false, disableAutoActivate = false, ...rest }) => {
+    const [isActive, setIsActive] = useState(false);
+    const [editorText, setEditorText] = useState("");
+    const [editorRichText, setEditorRichText] = useState("");
+    const [editorSources, setEditorSources] = useState([]);
+    const { showModal } = useModal();
+    const intl = useIntl();
+    const randomUid = useId();
+
+    useEffect(() => {
+        if (sources && sources.length > 0) {
+            setEditorSources(sources);
+        }
+    }, [sources]);
+
+    useEffect(() => {
+        if (handleSourcesChange && editorSources.length > 0) {
+            handleSourcesChange(editorSources);
+        }
+    }, [editorSources]);
+
+    const activate = () => {
+        if (!isActive) {
+            setIsActive(true);
+            if (onActivation) {
+                onActivation();
+            }
+        }
+    }
+
+    const editorConfig = {
+        editable: !disabled,
+        theme: EditorTheme,
+        onError(error) {
+            console.error("TextEditor error:", error)
+        },
+        nodes: [ListNode, ListItemNode, QuoteNode, OverflowNode],
+    };
+
+    const setFocus = () => {
+        activate();
+    }
+
+    const onChange = (editorState) => {
+        editorState.read(() => {
+            const text = $getRoot().getTextContent();
+            const richText = JSON.stringify(editorState);
+            setEditorText(text);
+            setEditorRichText(richText);
+            if (handleChange) {
+                handleChange(text, richText);
+            }
+        });
+    }
+
+    const handleSubmit = (event) => {
+        const textContent = editorText;
+        const richContent = editorRichText;
+        const sources = editorSources;
+        if (onSubmit) {
+            event.preventDefault();
+            onSubmit(textContent, richContent, sources);
+        }
+        setEditorSources([]);
+    }
+
+    const handleShowSourceModal = () => {
+        showModal(
+            <SourceModal
+                onAddSource={handleAddSource}
+                allowedSources={allowedDomains}
+            />
+        )
+    }
+
+    const handleAddSource = (newSource) => {
+        setEditorSources([...editorSources, newSource]);
+    }
+
+    const displaySource = (source, index) => {
+        return (
+            <SourceListItem key={index} publisher={source.publisher} url={source.source_url} title={source.title} index={index} />
+        );
+    }
+
+    const Placeholder = () => {
+        return <div className={styles.editorPlaceholder}>{placeholder}</div>;
+    }
+
+    return (
+        <>
+            <LexicalComposer initialConfig={editorConfig}>
+                <div className={styles.editorContainer} onClick={setFocus}>
+                    <div className={cx(styles.editorInner, { [styles.editorInnerInactive]: !isActive && !active })}>
+                        <RichTextPlugin
+                            contentEditable={<ContentEditable className={cx(styles.editorInput, { [styles.editorInputInactive]: !isActive })} {...rest} />}
+                            placeholder={placeholder && <Placeholder />}
+                            ErrorBoundary={LexicalErrorBoundary}
+                        />
+                        <ToolbarPlugin
+                            hideSourceAction={hideSourceAction}
+                            hideSubmit={hideSubmit}
+                            disableRichText={disableRichText}
+                            shortBar={shortBar}
+                            onSubmit={handleSubmit}
+                            onAddSource={handleShowSourceModal}
+                            isActive={isActive || active}
+                            sourceTooltip={allowedDomains?.length > 0 && intl.formatMessage({ id: "input.allowed_domains_tooltip", defaultMessage: "With the new source function, you can add links to your article." })}
+                        />
+                        {isActive && maxLength && !hideCharCount &&
+                            <div className={styles.charactersCount}>
+                                <CharacterLimitPlugin maxLength={maxLength} /> {intl.formatMessage({ id: "input.remaining_chars", defaultMessage: "remaining characters" })}
+                            </div>
+                        }
+                        <ListPlugin />
+                        <HistoryPlugin />
+                        <OnChangePlugin onChange={onChange} ignoreSelectionChange />
+                        <AutoSavePlugin
+                            onSetContent={disableAutoActivate ? () => { } : activate}
+                            storageUid={uid || randomUid}
+                        />
+                        <SetContentPlugin />
+                        <SetRichContentPlugin />
+                        <FocusPlugin />
+                        {maxLength && <MaxLengthPlugin maxLength={maxLength} />}
+                        <ResetPlugin storageUid={uid || randomUid} />
+                        <EditorRefPlugin editorRef={editorRef} />
+                    </div>
+                </div>
+            </LexicalComposer>
+            {sources && sources.length !== 0 ? (
+                <div className={styles.sourcesBox}>
+                    <div className={styles.sourceList}>
+                        {sources.map(displaySource)}
+                    </div>
+                </div>
+            ) : null}
+        </>
+    );
+}
+
+TextEditor.propTypes = {
+    /** Input placeholder */
+    placeholder: PropTypes.string,
+    /** Callback submit function */
+    onSubmit: PropTypes.func,
+    /** Array that contains sources  */
+    sources: PropTypes.array,
+    /** If true, hide submit button */
+    hideSubmit: PropTypes.bool,
+    /** If true, hide source button */
+    hideSourceAction: PropTypes.bool,
+    /** Callback for input activation */
+    onActivation: PropTypes.func,
+    /** If true, disabled input */
+    disabled: PropTypes.bool,
+    /** Update text */
+    handleChange: PropTypes.func,
+    /** Update sources */
+    handleSourcesChange: PropTypes.func,
+    /** If true, less space between icons */
+    shortBar: PropTypes.bool,
+    /** If true, show editor as active */
+    active: PropTypes.bool,
+    /** Maximum number of characters */
+    maxLength: PropTypes.number,
+    /** Show "X remaining characters" text */
+    hideCharCount: PropTypes.bool,
+    /** If true, hide rich text buttons */
+    disableRichText: PropTypes.bool,
+    /** Editor ref */
+    editorRef: PropTypes.any,
+    /** Allowed domain for sources */
+    allowedDomains: PropTypes.array
+};

package/src/components/input/text_editor/TextEditor.module.scss

@@ -0,0 +1,140 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.ltr {
+    text-align: left;
+}
+
+.editorContainer {
+    color: theme.$text-primary;
+    line-height: theme.$line-height-normal;
+    font-weight: theme.$font-weight-normal;
+    text-align: left;
+}
+
+.editorInner {
+    background: theme.$background-color-primary;
+    position: relative;
+    &.editorInnerInactive {
+        display: flex !important;
+        justify-content: space-between !important;
+    }
+}
+
+.editorPlaceholder {
+    color: theme.$text-primary;
+    overflow: hidden;
+    position: absolute;
+    text-overflow: ellipsis;
+    top: 15px;
+    font-size: theme.$font-size-normal;
+    user-select: none;
+    display: inline-block;
+    pointer-events: none;
+}
+
+.editorInput {
+    min-height: 25px;
+    resize: none;
+    font-size: theme.$font-size-normal;
+    position: relative;
+    tab-size: 1;
+    outline: 0;
+    @include spacing.py(3, xs);
+    caret-color: theme.$text-primary;
+    &.editorInputInactive {
+        min-width: 180px;
+        width: 100%;
+    }
+}
+
+.editorTextBold {
+    font-weight: theme.$font-weight-bold;
+}
+
+.editorTextItalic {
+    font-style: italic;
+}
+
+.editorTextUnderline {
+    text-decoration: underline;
+}
+
+.editorTextStrikethrough {
+    text-decoration: line-through;
+}
+
+.editorTextUnderlineStrikethrough {
+    text-decoration: underline line-through;
+}
+
+.editorParagraph {
+    @include spacing.m(0, xs);
+    @include spacing.mb(1, xs);
+    position: relative;
+}
+
+.editorParagraph:last-child {
+    @include spacing.mb(0, xs);
+}
+
+.editorQuote {
+    @include spacing.m(0, xs);
+    @include spacing.pl(3, xs);
+    font-size: theme.$font-size-normal;
+    color: theme.$text-secondary;
+    border-left-color: rgb(206, 208, 212);
+    border-left-width: 4px;
+    border-left-style: solid;
+}
+
+.editorListOl {
+    @include spacing.m(0, xs);
+    @include spacing.ml(2, xs);
+    @include spacing.p(1, xs);
+    list-style-type: decimal !important;
+}
+
+.editorListItem {
+    @include spacing.mx(3, xs);
+    @include spacing.my(2, xs);
+}
+
+.editorNestedListItem {
+    list-style-type: none;
+}
+
+pre::-webkit-scrollbar {
+    background: transparent;
+    width: 10px;
+}
+
+pre::-webkit-scrollbar-thumb {
+    background: theme.$text-secondary;
+}
+
+.sourcesBox {
+    display: flex !important;
+    justify-content: flex-start !important;
+    align-items: center !important;
+    @include spacing.mt(2, xs);
+    @include spacing.px(0, xs);
+    @include spacing.py(2, xs);
+}
+
+.sourceList {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: flex-start !important;
+    align-items: flex-start !important;
+    @include spacing.px(0, xs);
+    @include spacing.py(0, xs);
+}
+
+.charactersCount {
+    align-self: center;
+    font-size: theme.$font-size-small;
+    color: theme.$text-secondary;
+    white-space: nowrap;
+    @include spacing.mt(2, xs);
+}

package/src/components/input/text_editor/TextEditor.stories.jsx

@@ -0,0 +1,227 @@
+export default {
+    title: 'Input/Text Editor',
+    component: TextEditor,
+    args: {
+        placeholder: 'Add an argument',
+        shortBar: true,
+        active: false,
+        hideSourceAction: false,
+        hideSubmit: false,
+        disableRichText: false,
+        maxLength: undefined
+    },
+    argTypes: {
+        placeholder: { control: 'text' },
+        shortBar: { control: 'boolean' },
+        active: { control: 'boolean' },
+        hideSourceAction: { control: 'boolean' },
+        hideSubmit: { control: 'boolean' },
+        disableRichText: { control: 'boolean' },
+        maxLength: { control: 'number' }
+    }
+};
+
+import React from 'react';
+import { TextEditor } from './TextEditor';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { IntlProvider } from 'react-intl';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { InputProvider, useInput } from '@logora/debate/input/input_provider';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+const httpClient = {
+    get: () => null,
+    post: () => null,
+    patch: () => null
+};
+
+const data = dataProvider(httpClient, "https://mock.example.api");
+
+const handleSubmit = (textContent, richContent, sources) => {
+    console.log(textContent)
+    console.log(richContent)
+}
+
+const CustomTextEditor = () => {
+    const { setReset } = useInput();
+    return (
+        < TextEditor
+            placeholder={"Add an argument"}
+            onSubmit={() => setReset(true)}
+            onActivation={() => null}
+            shortBar={true}
+        />
+    )
+}
+
+export const DefaultTextEditor = () => {
+    return (
+        <IntlProvider locale="en">
+            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                <ModalProvider>
+                    <IconProvider library={regularIcons}>
+                        <InputProvider>
+                            <CustomTextEditor />
+                        </InputProvider>
+                    </IconProvider>
+                </ModalProvider>
+            </DataProviderContext.Provider>
+        </IntlProvider>
+    );
+};
+
+export const TextEditorWithSource = () => {
+    return (
+        <IntlProvider locale="en">
+            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                <ModalProvider>
+                    <IconProvider library={regularIcons}>
+                        <InputProvider>
+                            <TextEditor
+                                placeholder={"Add an argument"}
+                                onSubmit={handleSubmit}
+                                onActivation={() => null}
+                                shortBar={true}
+                                sources={[{ publisher: "test.com", source_url: "http://test.com", title: "Source Test" }]}
+                            />
+                        </InputProvider>
+                    </IconProvider>
+                </ModalProvider>
+            </DataProviderContext.Provider>
+        </IntlProvider>
+    );
+};
+
+export const TextEditorWithMaxLength = () => {
+    return (
+        <IntlProvider locale="en">
+            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                <ModalProvider>
+                    <IconProvider library={regularIcons}>
+                        <InputProvider>
+                            <TextEditor
+                                placeholder={"Add an argument"}
+                                onSubmit={handleSubmit}
+                                onActivation={() => null}
+                                shortBar={true}
+                                maxLength={500}
+                            />
+                        </InputProvider>
+                    </IconProvider>
+                </ModalProvider>
+            </DataProviderContext.Provider>
+        </IntlProvider>
+    );
+};
+
+export const TextEditorHideSourceAction = () => {
+    return (
+        <IntlProvider locale="en">
+            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                <ModalProvider>
+                    <IconProvider library={regularIcons}>
+                        <InputProvider>
+                            <TextEditor
+                                placeholder={"Add an argument"}
+                                onSubmit={handleSubmit}
+                                onActivation={() => null}
+                                shortBar={true}
+                                hideSourceAction
+                            />
+                        </InputProvider>
+                    </IconProvider>
+                </ModalProvider>
+            </DataProviderContext.Provider>
+        </IntlProvider>
+    );
+};
+
+export const TextEditorHideSubmit = () => {
+    return (
+        <IntlProvider locale="en">
+            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                <ModalProvider>
+                    <IconProvider library={regularIcons}>
+                        <InputProvider>
+                            <TextEditor
+                                placeholder={"Add an argument"}
+                                onSubmit={handleSubmit}
+                                onActivation={() => null}
+                                shortBar={true}
+                                hideSubmit
+                            />
+                        </InputProvider>
+                    </IconProvider>
+                </ModalProvider>
+            </DataProviderContext.Provider>
+        </IntlProvider>
+    );
+};
+
+export const TextEditorDisableRichText = () => {
+    return (
+        <IntlProvider locale="en">
+            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                <ModalProvider>
+                    <IconProvider library={regularIcons}>
+                        <InputProvider>
+                            <TextEditor
+                                placeholder={"Add an argument"}
+                                onSubmit={handleSubmit}
+                                onActivation={() => null}
+                                shortBar={true}
+                                disableRichText
+                            />
+                        </InputProvider>
+                    </IconProvider>
+                </ModalProvider>
+            </DataProviderContext.Provider>
+        </IntlProvider>
+    );
+};
+
+export const ActiveTextEditor = () => {
+    return (
+        <IntlProvider locale="en">
+            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                <ModalProvider>
+                    <IconProvider library={regularIcons}>
+                        <InputProvider>
+                            <TextEditor
+                                placeholder={"Add an argument"}
+                                onSubmit={handleSubmit}
+                                onActivation={() => null}
+                                shortBar={true}
+                                active
+                            />
+                        </InputProvider>
+                    </IconProvider>
+                </ModalProvider>
+            </DataProviderContext.Provider>
+        </IntlProvider>
+    );
+};
+
+export const TextEditorWithSourceAndMaxLenght = () => {
+    return (
+        <IntlProvider locale="en">
+            <DataProviderContext.Provider value={{ dataProvider: data }}>
+                <ModalProvider>
+                    <IconProvider library={regularIcons}>
+                        <InputProvider>
+                            <TextEditor
+                                placeholder={"Add an argument"}
+                                onSubmit={handleSubmit}
+                                onActivation={() => null}
+                                shortBar={true}
+                                sources={[{ publisher: "test.com", source_url: "http://test.com", title: "Source Test" }]}
+                                maxLength={500}
+                            />
+                        </InputProvider>
+                    </IconProvider>
+                </ModalProvider>
+            </DataProviderContext.Provider>
+        </IntlProvider>
+    );
+};