@logora/debate 0.1.0 → 0.2.0

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

@@ -1,654 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor, act } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { DefaultTextEditor, TextEditorWithSource } from './TextEditor.stories';
-import { TextEditor } from './TextEditor';
-import { ModalProvider } from '@logora/debate/dialog/modal';
-import { InputProvider, useInput } from '@logora/debate/input/input_provider';
-import { $getRoot, $createParagraphNode, $createTextNode, createEditor } from "lexical";
-import { QuoteNode, $createQuoteNode } from '@lexical/rich-text';
-import { ListItemNode, ListNode, $createListItemNode, $createListNode } from "@lexical/list";
-import { IconProvider } from '@logora/debate/icons/icon_provider';
-import * as regularIcons from '@logora/debate/icons/regular_icons';
-import { IntlProvider } from 'react-intl';
-
-vi.mock('@lexical/react/LexicalErrorBoundary', () => ({
-    LexicalErrorBoundary: ({ children }) => children,
-  }));
-
-const callback = vi.fn();
-
-describe('TextEditor', () => {
-    it('should render with placeholder', () => {
-        const editor = render(
-            <DefaultTextEditor />
-        );
-        const renderedEditor = editor.getByText(/Add an argument/i);
-        expect(renderedEditor).toBeTruthy();
-    });
-
-    it('should call callback function on submit', async () => {
-        const editor = render(
-            <IntlProvider locale="en">
-                <InputProvider>
-                    <IconProvider library={regularIcons}>
-                        <ModalProvider>
-                            <TextEditor
-                                handleChange={() => null}
-                                onSubmit={callback}
-                                onActivation={() => null}
-                                shortBar={true}
-                                uid={"34"}
-                                placeholder={"Add an argument"}
-                                sources={[{ publisher: "test.com", source_url: "http://test.com", title: "Source Test" }]}
-                            />
-                        </ModalProvider>
-                    </IconProvider>
-                </InputProvider>
-            </IntlProvider>
-        );
-
-        const onSubmit = document.querySelector('.inputSubmitActionButton');
-        await act(async () => { await userEvent.click(onSubmit) });
-
-        expect(callback).toHaveBeenCalled();
-    });
-
-    it('should call callback function and button on activation', async () => {
-        const editor = render(
-            <IntlProvider locale="en">
-                <InputProvider>
-                    <IconProvider library={regularIcons}>
-                        <ModalProvider>
-                            <TextEditor
-                                handleChange={() => null}
-                                onSubmit={() => null}
-                                onActivation={callback}
-                                shortBar={true}
-                                uid={"34"}
-                                placeholder={"Add an argument"}
-                                sources={[{ publisher: "test.com", source_url: "http://test.com", title: "Source Test" }]}
-                            />
-                        </ModalProvider>
-                    </IconProvider>
-                </InputProvider>
-            </IntlProvider>
-        );
-
-        const input = screen.getByRole("textbox");
-        let bold = screen.queryByTestId('format-bold');
-        expect(bold).toBeNull();
-
-        await act(async () => { await userEvent.click(input) });
-
-        bold = screen.queryByTestId('format-bold');
-        expect(callback).toHaveBeenCalled();
-        expect(bold).toBeTruthy();
-    });
-
-    it('should focus editor on click', async () => {
-        const container = render(
-            <DefaultTextEditor />
-        );
-
-        expect(document.activeElement.tagName).toBe("BODY");
-
-        const editor = screen.getByRole('textbox');
-        await act(async () => { await userEvent.click(editor) });
-
-        expect(document.activeElement).toBe(editor);
-        expect(document.activeElement.tagName).toBe("DIV");
-    });
-
-    it('should render with source', () => {
-        const editor = render(
-            <TextEditorWithSource />
-        );
-        expect(screen.getByText(/test.com – Source Test/)).toBeTruthy();
-
-    });
-
-    it('should render with text', () => {
-        let container = document.body;
-        const rootElement = document.createElement('div');
-        container.appendChild(rootElement);
-
-        const editor = createEditor({
-            namespace: 'MyEditor',
-            theme: {
-                text: {
-                    bold: 'editor-text-bold',
-                    italic: 'editor-text-italic',
-                    underline: 'editor-text-underline',
-                },
-            },
-        });
-
-        editor.update(() => {
-            const root = $getRoot();
-            const paragraph = $createParagraphNode();
-            const text = $createTextNode('Some text');
-            root.append(paragraph);
-            paragraph.append(text);
-        });
-
-        editor.setRootElement(rootElement);
-
-        expect(container.innerHTML).toBe(
-            '<div style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="auto"><span data-lexical-text="true">Some text</span></p></div>',
-        );
-
-        container.removeChild(rootElement);
-        container = null;
-    });
-
-    it('should render bold', () => {
-        let container = document.body;
-        const rootElement = document.createElement('div');
-        container.appendChild(rootElement);
-
-        const editor = createEditor({
-            namespace: 'MyEditor',
-            theme: {
-                text: {
-                    bold: 'editor-text-bold',
-                    italic: 'editor-text-italic',
-                    underline: 'editor-text-underline',
-                },
-            },
-        });
-
-        editor.update(() => {
-            const root = $getRoot();
-            const paragraph = $createParagraphNode();
-            const text = $createTextNode('Bold').toggleFormat('bold');
-            root.append(paragraph);
-            paragraph.append(text);
-        });
-
-        editor.setRootElement(rootElement);
-
-        expect(container.innerHTML).toBe(
-            '<div style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="auto"><strong class="editor-text-bold" data-lexical-text="true">Bold</strong></p></div>',
-        );
-
-        container.removeChild(rootElement);
-        container = null;
-    });
-
-    it('should render italic', () => {
-        let container = document.body;
-        const rootElement = document.createElement('div');
-        container.appendChild(rootElement);
-
-        const editor = createEditor({
-            namespace: 'MyEditor',
-            theme: {
-                text: {
-                    bold: 'editor-text-bold',
-                    italic: 'editor-text-italic',
-                    underline: 'editor-text-underline',
-                },
-            },
-        });
-
-        editor.update(() => {
-            const root = $getRoot();
-            const paragraph = $createParagraphNode();
-            const text = $createTextNode('Italic').toggleFormat('italic');
-            root.append(paragraph);
-            paragraph.append(text);
-        });
-
-        editor.setRootElement(rootElement);
-
-        expect(container.innerHTML).toBe(
-            '<div style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="auto"><em class="editor-text-italic" data-lexical-text="true">Italic</em></p></div>',
-        );
-
-        container.removeChild(rootElement);
-        container = null;
-    });
-
-    it('should render underline', () => {
-        let container = document.body;
-        const rootElement = document.createElement('div');
-        container.appendChild(rootElement);
-
-        const editor = createEditor({
-            namespace: 'MyEditor',
-            theme: {
-                text: {
-                    bold: 'editor-text-bold',
-                    italic: 'editor-text-italic',
-                    underline: 'editor-text-underline',
-                },
-            },
-        });
-
-        editor.update(() => {
-            const root = $getRoot();
-            const paragraph = $createParagraphNode();
-            const text = $createTextNode('Underline').toggleFormat('underline');
-            root.append(paragraph);
-            paragraph.append(text);
-        });
-
-        editor.setRootElement(rootElement);
-
-        expect(container.innerHTML).toBe(
-            '<div style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="auto"><span class="editor-text-underline" data-lexical-text="true">Underline</span></p></div>',
-        );
-
-        container.removeChild(rootElement);
-        container = null;
-    });
-
-    it('should render bold, italic and underline', () => {
-        let container = document.body;
-        const rootElement = document.createElement('div');
-        container.appendChild(rootElement);
-
-        const editor = createEditor({
-            namespace: 'MyEditor',
-            theme: {
-                text: {
-                    bold: 'editor-text-bold',
-                    italic: 'editor-text-italic',
-                    underline: 'editor-text-underline',
-                },
-            },
-        });
-
-        editor.update(() => {
-            const root = $getRoot();
-            const paragraph = $createParagraphNode();
-            const text = $createTextNode('Some text').toggleFormat('bold').toggleFormat('italic').toggleFormat('underline');
-            root.append(paragraph);
-            paragraph.append(text);
-        });
-
-        editor.setRootElement(rootElement);
-
-        expect(container.innerHTML).toBe(
-            '<div style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><p dir="auto"><strong class="editor-text-bold editor-text-italic editor-text-underline" data-lexical-text="true">Some text</strong></p></div>',
-        );
-
-        container.removeChild(rootElement);
-        container = null;
-    });
-
-    it('should render quote', () => {
-        let container = document.body;
-        const rootElement = document.createElement('div');
-        container.appendChild(rootElement);
-
-        const editor = createEditor({
-            namespace: 'MyEditor',
-            nodes: [QuoteNode],
-        });
-
-        editor.update(() => {
-            const root = $getRoot();
-            const quote = $createQuoteNode();
-            quote.append($createTextNode("My quote"));
-            root.append(quote);
-        });
-
-        editor.setRootElement(rootElement);
-
-        expect(container.innerHTML).toBe(
-            '<div style=\"user-select: text; white-space: pre-wrap; word-break: break-word;\" data-lexical-editor=\"true\"><blockquote dir=\"auto\"><span data-lexical-text=\"true\">My quote</span></blockquote></div>',
-        );
-
-        container.removeChild(rootElement);
-        container = null;
-    });
-
-    it('should render list items', () => {
-        let container = document.body;
-        const rootElement = document.createElement('div');
-        container.appendChild(rootElement);
-
-        const editor = createEditor({
-            namespace: 'MyEditor',
-            nodes: [ListNode, ListItemNode],
-        });
-
-        editor.update(() => {
-            const root = $getRoot();
-            const list = $createListNode('number');
-            list.append(
-                $createListItemNode().append($createTextNode("First item"),),
-                $createListItemNode().append($createTextNode("Second item"),),
-                $createListItemNode().append($createTextNode("Third item"),),
-                $createListItemNode().append($createTextNode("Fourth item"),),
-            );
-            root.append(list);
-        });
-
-        editor.setRootElement(rootElement);
-
-        expect(container.innerHTML).toBe(
-            '<div style=\"user-select: text; white-space: pre-wrap; word-break: break-word;\" data-lexical-editor=\"true\"><ol dir=\"auto\"><li value=\"1\"><span data-lexical-text=\"true\">First item</span></li><li value=\"2\"><span data-lexical-text=\"true\">Second item</span></li><li value=\"3\"><span data-lexical-text=\"true\">Third item</span></li><li value=\"4\"><span data-lexical-text=\"true\">Fourth item</span></li></ol></div>',
-        );
-
-        container.removeChild(rootElement);
-        container = null;
-    });
-
-    it('should focus editor when setFocus called from outside', async () => {
-        const FocusInputComponent = (props) => {
-            const { setFocus } = useInput();
-
-            const focusInput = (event) => {
-                setFocus(true);
-            }
-
-            return (
-                <div onClick={focusInput}>Click to focus</div>
-            )
-        }
-
-        const container = render(
-            <IntlProvider locale="en">
-                <InputProvider>
-
-                    <ModalProvider>
-                        <IconProvider library={regularIcons}>
-                            <FocusInputComponent />
-                            <TextEditor
-                                handleChange={() => null}
-                                onSubmit={() => null}
-                                onActivation={() => null}
-                                shortBar={true}
-                                uid={"34"}
-                                placeholder={"Add something"}
-                            />
-                        </IconProvider>
-                    </ModalProvider>
-
-                </InputProvider>
-            </IntlProvider>
-        );
-
-        expect(screen.getByText("Add something")).toBeTruthy();
-
-        const focusButton = screen.getByText("Click to focus");
-        expect(document.activeElement.tagName).toBe("BODY");
-
-        await act(async () => { await userEvent.click(focusButton) });
-
-        const editor = screen.getByRole('textbox');
-        expect(document.activeElement).toBe(editor);
-    });
-
-
-    it('should set content in editor when setContent called from outside', async () => {
-        const targetContent = { "root": { "children": [{ "children": [{ "detail": 0, "format": 1, "mode": "normal", "style": "", "text": "Integer pretium varius odio ac eleifend.", "type": "text", "version": 1 }], "direction": "auto", "format": "", "indent": 0, "type": "paragraph", "version": 1 }], "direction": "auto", "format": "", "indent": 0, "type": "root", "version": 1 } };
-
-        const SetInputContentComponent = (props) => {
-            const { setInputRichContent } = useInput();
-
-            const setRichContent = (event) => {
-                setInputRichContent(targetContent);
-            }
-
-            return (
-                <div onClick={setRichContent}>Click to set content</div>
-            )
-        }
-
-        const container = render(
-            <IntlProvider locale="en">
-                <InputProvider>
-
-                    <ModalProvider>
-                        <IconProvider library={regularIcons}>
-                            <SetInputContentComponent />
-                            <TextEditor
-                                handleChange={() => null}
-                                onSubmit={() => null}
-                                onActivation={() => null}
-                                shortBar={true}
-                                uid={"34"}
-                                placeholder={"Add something"}
-                            />
-                        </IconProvider>
-                    </ModalProvider>
-
-                </InputProvider>
-            </IntlProvider>
-        );
-
-        expect(screen.getByText("Add something")).toBeTruthy();
-
-        const setContentButton = screen.getByText("Click to set content");
-        expect(document.activeElement.tagName).toBe("BODY");
-
-        await act(async () => { await userEvent.click(setContentButton) });
-
-        expect(container.getByText("Integer pretium varius odio ac eleifend.")).toBeTruthy();
-    });
-
-    it('should display max length and update it', async () => {
-        const targetContent = { "root": { "children": [{ "children": [{ "detail": 0, "format": 1, "mode": "normal", "style": "", "text": "Integer pretium varius odio ac eleifend.", "type": "text", "version": 1 }], "direction": "auto", "format": "", "indent": 0, "type": "paragraph", "version": 1 }], "direction": "auto", "format": "", "indent": 0, "type": "root", "version": 1 } };
-
-        const SetInputContentComponent = (props) => {
-            const { setInputRichContent } = useInput();
-
-            const setRichContent = (event) => {
-                setInputRichContent(targetContent);
-            }
-
-            return (
-                <div onClick={setRichContent}>Click to set content</div>
-            )
-        }
-
-        const { getByText } = render(
-            <IntlProvider locale="en">
-                <InputProvider>
-
-                    <IconProvider library={regularIcons}>
-                        <ModalProvider>
-                            <SetInputContentComponent />
-                            <TextEditor
-                                handleChange={() => null}
-                                onSubmit={() => null}
-                                onActivation={callback}
-                                shortBar={true}
-                                uid={"34"}
-                                placeholder={"Add an argument"}
-                                maxLength={500}
-                            />
-                        </ModalProvider>
-                    </IconProvider>
-
-                </InputProvider>
-            </IntlProvider>
-        );
-
-        const input = screen.getByRole("textbox");
-        await act(async () => { await userEvent.click(input) });
-        const maxLength = getByText("remaining characters", { exact: false })
-        expect(maxLength.textContent).toEqual("500 remaining characters");
-
-        const setContentButton = screen.getByText("Click to set content");
-        await act(async () => { await userEvent.click(setContentButton) });
-        const maxLengthUpdated = getByText("remaining characters", { exact: false })
-        expect(maxLengthUpdated.textContent).toEqual("460 remaining characters");
-    });
-});
-
-// describe('ResetPlugin', () => {
-//     const sessionStorageMock = (function() {
-//         let store = {}
-
-//         return {
-//             name: "sessionStorage",
-//             getItem: function(key) {
-//                 return store[key] || null
-//             },
-//             setItem: function(key, value) {
-//                 store[key] = value.toString()
-//             },
-//             removeItem: function(key) {
-//                 delete store[key]
-//             },
-//             clear: function() {
-//                 store = {}
-//             }
-//         }
-//     })()
-
-//     Object.defineProperty(window, 'sessionStorage', {
-//         configurable: true,
-//         value: sessionStorageMock
-//     })
-
-
-//     it('should reset content in editor when setReset called from outside', async () => {
-//         const targetContent = {"root":{"children":[{"children":[{"detail":0,"format":1,"mode":"normal","style":"","text":"Integer pretium varius odio ac eleifend.","type":"text","version":1}],"direction":"auto","format":"","indent":0,"type":"paragraph","version":1}],"direction":"auto","format":"","indent":0,"type":"root","version":1}};
-
-//         const ResetContentComponent = (props) => {
-//             const { setInputRichContent, setReset } = useInput();
-
-//             const setContent = (event) => {
-//                 setInputRichContent(targetContent);
-//             }
-
-//             const resetContent = (event) => {
-//                 setReset(true);
-//             }
-
-//             return (
-//                 <>
-//                     <div onClick={setContent}>Click to set content</div>
-//                     <div onClick={resetContent}>Click to reset content</div>
-//                 </>
-//             )
-//         }
-
-//         const container = render(
-//             <IntlProvider locale="en">
-//                 <InputProvider>
-//                     
-//                         <ModalProvider>
-//                             <IconProvider library={regularIcons}>
-//                                 <ResetContentComponent />
-//                                 <TextEditor 
-//                                     handleChange={() => null}
-//                                     onSubmit={() => null}
-//                                     onActivation={() => null}
-//                                     shortBar={true}
-//                                     uid={"34"}
-//                                     placeholder={"Add something"}
-//                                 />
-//                             </IconProvider>
-//                         </ModalProvider>
-//                     
-//                 </InputProvider>
-//             </IntlProvider>
-//         );
-
-//         expect(screen.getByText("Add something")).toBeTruthy();
-
-//         const setContentButton = screen.getByText("Click to set content");
-//         const resetContentButton = screen.getByText("Click to reset content");
-//         expect(document.activeElement.tagName).toBe("BODY");
-
-//         await act(async () => { await userEvent.click(setContentButton) });
-
-//         expect(container.getByText("Integer pretium varius odio ac eleifend.")).toBeTruthy();
-
-//         await act(async () => { await userEvent.click(resetContentButton) });
-
-//         expect(container.queryByText("Integer pretium varius odio ac eleifend.")).toBeNull();
-//     });
-// });
-
-describe('AutoSavePlugin', () => {
-    const localStorageMock = (function () {
-        let store = {}
-
-        return {
-            name: "localStorage",
-            getItem: function (key) {
-                return store[key] || null
-            },
-            setItem: function (key, value) {
-                store[key] = value.toString()
-            },
-            removeItem: function (key) {
-                delete store[key]
-            },
-            clear: function () {
-                store = {}
-            }
-        }
-    })()
-
-    Object.defineProperty(window, 'localStorage', {
-        configurable: true,
-        value: localStorageMock
-    })
-
-    it('should auto save content in local storage', async () => {
-        const targetContent = { "root": { "children": [{ "children": [{ "detail": 0, "format": 1, "mode": "normal", "style": "", "text": "Integer pretium varius odio ac eleifend.", "type": "text", "version": 1 }], "direction": "auto", "format": "", "indent": 0, "type": "paragraph", "version": 1 }], "direction": "auto", "format": "", "indent": 0, "type": "root", "version": 1 } };
-        const getItemMock = vi.spyOn(window.localStorage, 'getItem');
-
-        const AutoSaveContentComponent = (props) => {
-            const { setInputRichContent } = useInput();
-
-            const setContent = (event) => {
-                setInputRichContent(targetContent);
-            }
-
-            return (
-                <>
-                    <div onClick={setContent}>Click to set content</div>
-                </>
-            )
-        }
-
-        const container = render(
-            <IntlProvider locale="en">
-                <InputProvider>
-
-                    <ModalProvider>
-                        <IconProvider library={regularIcons}>
-                            <AutoSaveContentComponent />
-                            <TextEditor
-                                handleChange={() => null}
-                                onSubmit={() => null}
-                                onActivation={() => null}
-                                shortBar={true}
-                                uid={"34"}
-                                placeholder={"Add something"}
-                            />
-                        </IconProvider>
-                    </ModalProvider>
-
-                </InputProvider>
-            </IntlProvider>
-        );
-
-        expect(screen.getByText("Add something")).toBeTruthy();
-
-        const setContentButton = screen.getByText("Click to set content");
-        expect(document.activeElement.tagName).toBe("BODY");
-
-        await act(async () => { userEvent.click(setContentButton) });
-
-        await waitFor(() => {
-            expect(container.getByText("Integer pretium varius odio ac eleifend.")).toBeTruthy();
-        });
-
-        await act(async () => { await new Promise((r) => setTimeout(r, 1500)) });
-
-        await waitFor(() => {
-            expect(getItemMock).toHaveBeenCalled();
-        });
-    });
-});

package/src/components/input/text_editor/index.js

@@ -1,2 +0,0 @@
-export { TextEditor as default } from './TextEditor';
-export { lexicalToHtml } from './lexicalToHtml';

package/src/components/input/text_editor/lexicalToHtml.js

@@ -1,23 +0,0 @@
-import { createHeadlessEditor } from "@lexical/headless";
-import { $generateHtmlFromNodes } from '@lexical/html';
-import { QuoteNode } from "@lexical/rich-text";
-import { ListItemNode, ListNode } from "@lexical/list";
-import DOMPurify from "dompurify";
-
-export const lexicalToHtml = (rawContent) => {
-    let html = null;
-    
-    const editor = createHeadlessEditor({
-        nodes: [QuoteNode, ListItemNode, ListNode],
-        onError: () => {},
-    });
-    const editorState = editor.parseEditorState(rawContent);
-    editor.setEditorState(editorState);
-    
-    editor.update(() => {
-        let htmlContent = $generateHtmlFromNodes(editor, null);
-        html = DOMPurify.sanitize(htmlContent);
-    })
-
-    return html;
-}