@logora/debate 0.1.0 → 0.2.0

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

@@ -1,205 +0,0 @@
-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

@@ -1,140 +0,0 @@
-@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

@@ -1,227 +0,0 @@
-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>
-    );
-};