@logora/debate 0.1.0

package/src/components/input/text_editor/plugins/AutoSavePlugin.jsx

@@ -0,0 +1,37 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import React, { useEffect } from "react";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { useDebouncedCallback } from 'use-debounce';
+import useLocalstorageState from "@rooks/use-localstorage-state";
+
+export const AutoSavePlugin = ({ storageUid, onSetContent }) => {
+    const [editor] = useLexicalComposerContext();
+    const [content, setContent, removeContent] = useLocalstorageState(`TextEditor:content_${storageUid}`, {});
+
+    useEffect(() => {
+        if (content) {
+            if(Object.keys(content).length !== 0) {
+                const editorState = editor.parseEditorState(content.editorState);
+                editor.setEditorState(editorState);
+                onSetContent?.();
+            }
+        }
+    }, []);
+
+    const onChange = useDebouncedCallback(
+        (editorState, editor) => {
+            editorState.read(() => {
+                const sessionUserContent = {
+                    editorState: JSON.stringify(editor.getEditorState()) 
+                };
+                setContent(sessionUserContent); 
+            })
+        },
+        1000,
+        false
+    );
+
+    return (
+        <OnChangePlugin onChange={onChange} ignoreSelectionChange />
+    )
+};

package/src/components/input/text_editor/plugins/FocusPlugin.jsx

@@ -0,0 +1,19 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect } from "react";
+import { useInput } from '@logora/debate/input/input_provider';
+
+export const FocusPlugin = () => {
+    const [editor] = useLexicalComposerContext();
+    const { focus } = useInput();
+    
+    useEffect(() => {
+        if (focus) {
+            editor.focus(() => {
+                const rootElement = editor.getRootElement();
+                rootElement.focus();
+            });
+        }
+    }, [focus, editor]);
+
+    return null;
+};

package/src/components/input/text_editor/plugins/MaxLengthPlugin.jsx

@@ -0,0 +1,44 @@
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$trimTextContentFromAnchor} from '@lexical/selection';
+import {$restoreEditorState} from '@lexical/utils';
+import {$getSelection, $isRangeSelection, RootNode} from 'lexical';
+import {useEffect} from 'react';
+
+export const MaxLengthPlugin = ({ maxLength = 50000 }) => {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    let lastRestoredEditorState = null;
+
+    return editor.registerNodeTransform(RootNode, (rootNode) => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+        return;
+      }
+      const prevEditorState = editor.getEditorState();
+      const prevTextContent = prevEditorState.read(() =>
+        rootNode.getTextContent(),
+      );
+      const textContent = rootNode.getTextContent();
+      if (prevTextContent !== textContent) {
+        const textLength = textContent.length;
+        const delCount = textLength - maxLength;
+        const anchor = selection.anchor;
+
+        if (delCount > 0) {
+          if (
+            prevTextContent.length === maxLength &&
+            lastRestoredEditorState !== prevEditorState
+          ) {
+            lastRestoredEditorState = prevEditorState;
+            $restoreEditorState(editor, prevEditorState);
+          } else {
+            $trimTextContentFromAnchor(editor, anchor, delCount);
+          }
+        }
+      }
+    });
+  }, [editor, maxLength]);
+
+  return null;
+};

package/src/components/input/text_editor/plugins/ResetPlugin.jsx

@@ -0,0 +1,35 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect } from "react";
+import { useInput } from "@logora/debate/input/input_provider";
+import {
+	$getRoot,
+	$createParagraphNode,
+	$addUpdateTag,
+} from "lexical";
+import useLocalstorageState from "@rooks/use-localstorage-state";
+
+export const ResetPlugin = ({ storageUid }) => {
+	const [editor] = useLexicalComposerContext();
+	const { reset, setReset } = useInput();
+	const [content, setContent, removeContent] = useLocalstorageState(
+		`TextEditor:content_${storageUid}`,
+		{},
+	);
+
+	useEffect(() => {
+		if (reset) {
+			editor.update(() => {
+				$addUpdateTag("skip-dom-selection");
+				const root = $getRoot();
+				const paragraph = $createParagraphNode();
+				root.clear();
+				root.append(paragraph);
+
+				removeContent();
+				setReset(false);
+			});
+		}
+	}, [reset]);
+
+	return null;
+};

package/src/components/input/text_editor/plugins/SetContentPlugin.jsx

@@ -0,0 +1,24 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect } from "react";
+import { useInput } from '@logora/debate/input/input_provider';
+import { $getRoot, $createParagraphNode, $createTextNode } from "lexical";
+
+export const SetContentPlugin = () => {
+    const [editor] = useLexicalComposerContext();
+    const { inputContent, setInputContent } = useInput();
+
+    useEffect(() => {
+        if (inputContent) {
+            editor.update(() => {
+                const root = $getRoot();
+                root.clear();
+                const p = $createParagraphNode();
+                p.append($createTextNode(inputContent));
+                root.append(p);
+                setInputContent(null);
+            });
+        }
+    }, [inputContent]);
+
+    return null;
+};

package/src/components/input/text_editor/plugins/SetRichContentPlugin.jsx

@@ -0,0 +1,20 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect } from "react";
+import { useInput } from '@logora/debate/input/input_provider';
+
+export const SetRichContentPlugin = () => {
+    const [editor] = useLexicalComposerContext();
+    const { inputRichContent, setInputRichContent } = useInput();
+
+    useEffect(() => {
+        if (inputRichContent) {
+            editor.update(() => {
+                const editorState = editor.parseEditorState(inputRichContent);
+                editor.setEditorState(editorState);
+                setInputRichContent(null);
+            });
+        }
+    }, [inputRichContent]);
+
+    return null;
+};

package/src/components/input/text_editor/plugins/ToolbarPlugin.jsx

@@ -0,0 +1,233 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useIntl } from 'react-intl';
+import {
+	SELECTION_CHANGE_COMMAND,
+	FORMAT_TEXT_COMMAND,
+	$getSelection,
+	$isRangeSelection,
+} from "lexical";
+import { $setBlocksType } from "@lexical/selection";
+import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
+import {
+	INSERT_ORDERED_LIST_COMMAND,
+	$isListNode,
+	ListNode,
+} from "@lexical/list";
+import { $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
+import styles from "./ToolbarPlugin.module.scss";
+import cx from "classnames";
+import { Icon } from "@logora/debate/icons/icon";
+import { Button } from "@logora/debate/action/button";
+
+export const ToolbarPlugin = (props) => {
+	const intl = useIntl();
+	const LowPriority = 1;
+	const [editor] = useLexicalComposerContext();
+	const toolbarRef = useRef(null);
+	const [blockType, setBlockType] = useState("paragraph");
+	const [selectedElementKey, setSelectedElementKey] = useState(null);
+	const [isBold, setIsBold] = useState(false);
+	const [isItalic, setIsItalic] = useState(false);
+	const [isUnderline, setIsUnderline] = useState(false);
+	const isDisabled =
+		props.hideSubmit && props.hideSourceAction && props.disableRichText;
+
+	const updateToolbar = useCallback(() => {
+		const selection = $getSelection();
+		if ($isRangeSelection(selection)) {
+			const anchorNode = selection.anchor.getNode();
+			const element =
+				anchorNode.getKey() === "root"
+					? anchorNode
+					: anchorNode.getTopLevelElementOrThrow();
+			const elementKey = element.getKey();
+			const elementDOM = editor.getElementByKey(elementKey);
+			if (elementDOM !== null) {
+				setSelectedElementKey(elementKey);
+				if ($isListNode(element)) {
+					const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+					const type = parentList ? parentList.getTag() : element.getTag();
+					setBlockType(type);
+				} else {
+					const type = $isHeadingNode(element)
+						? element.getTag()
+						: element.getType();
+					setBlockType(type);
+				}
+			}
+			// Update text format
+			setIsBold(selection.hasFormat("bold"));
+			setIsItalic(selection.hasFormat("italic"));
+			setIsUnderline(selection.hasFormat("underline"));
+		}
+	}, [editor]);
+
+	useEffect(() => {
+		return mergeRegister(
+			editor.registerUpdateListener(({ editorState }) => {
+				editorState.read(() => {
+					updateToolbar();
+				});
+			}),
+			editor.registerCommand(
+				SELECTION_CHANGE_COMMAND,
+				(_payload, newEditor) => {
+					updateToolbar();
+					return false;
+				},
+				LowPriority,
+			),
+		);
+	}, [editor, updateToolbar]);
+
+	const formatParagraph = () => {
+		editor.update(() => {
+			const selection = $getSelection();
+			if ($isRangeSelection(selection)) {
+				$setBlocksType(selection, () => $createParagraphNode());
+			}
+		});
+	};
+
+	const formatNumberedList = () => {
+		if (blockType !== "number") {
+			editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
+		} else {
+			formatParagraph(editor);
+		}
+	};
+
+	const formatQuote = () => {
+		if (blockType !== "quote") {
+			editor.update(() => {
+				const selection = $getSelection();
+				$setBlocksType(selection, () => $createQuoteNode());
+			});
+		}
+	};
+
+	return !isDisabled ? (
+		<div
+			className={cx(styles.toolbar, {
+				[styles.toolbarIsActive]: isDisabled ? false : props.isActive,
+			})}
+			ref={toolbarRef}
+		>
+			{props.isActive
+				? !props.disableRichText && (
+						<div
+							className={cx(styles.iconToolbar, {
+								[styles.shortBar]: props.shortBar,
+							})}
+						>
+							<button
+								onClick={() => {
+									editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+								}}
+								type={"button"}
+								className={cx(styles.toolbarItem, { [styles.active]: isBold })}
+								data-testid="format-bold"
+								aria-label={intl.formatMessage({ id: "input.text_editor.plugins.toolbar_plugin.bold.aria_label", defaultMessage: "Make text bold" })}
+							>
+								<Icon
+									name="bold"
+									width={24}
+									height={24}
+									className={cx(styles.format, styles.bold)}
+								/>
+							</button>
+							<button
+								onClick={() => {
+									editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+								}}
+								type={"button"}
+								className={cx(styles.toolbarItem, {
+									[styles.active]: isItalic,
+								})}
+								aria-label={intl.formatMessage({ id: "input.text_editor.plugins.toolbar_plugin.italic.aria_label", defaultMessage: "Make text italic" })}
+							>
+								<Icon
+									name="italic"
+									width={24}
+									height={24}
+									className={cx(styles.format, styles.italic)}
+								/>
+							</button>
+							<button
+								onClick={() => {
+									editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
+								}}
+								type={"button"}
+								className={cx(styles.toolbarItem, {
+									[styles.active]: isUnderline,
+								})}
+								aria-label={intl.formatMessage({ id: "input.text_editor.plugins.toolbar_plugin.underline.aria_label", defaultMessage: "Underline text" })}
+							>
+								<Icon
+									name="underline"
+									width={24}
+									height={24}
+									className={cx(styles.format, styles.underline)}
+								/>
+							</button>
+							<button
+								onClick={() => formatQuote()}
+								type={"button"}
+								className={styles.toolbarItem}
+								aria-label={intl.formatMessage({ id: "input.text_editor.plugins.toolbar_plugin.blockquote.aria_label", defaultMessage: "Add a blockquote" })}
+							>
+								<Icon
+									name="blockquote"
+									width={24}
+									height={24}
+									className={cx(styles.format, styles.quote)}
+								/>
+							</button>
+							<button
+								onClick={() => formatNumberedList()}
+								type={"button"}
+								className={styles.toolbarItem}
+								aria-label={intl.formatMessage({ id: "input.text_editor.plugins.toolbar_plugin.numbered_list.aria_label", defaultMessage: "Insert a numbered list" })}
+							>
+								<Icon
+									name="orderedList"
+									width={24}
+									height={24}
+									className={cx(styles.format, styles.numberedList)}
+								/>
+							</button>
+							{!props.hideSourceAction && (
+								<button
+									onClick={props.onAddSource}
+									type={"button"}
+									className={styles.toolbarItem}
+									aria-label={intl.formatMessage({ id: "input.text_editor.plugins.toolbar_plugin.add_link.aria_label", defaultMessage: "Add hyperlink" })}
+								>
+									<Icon
+										name="link"
+										width={20}
+										height={20}
+										className={cx(styles.format, styles.link)}
+									/>
+								</button>
+							)}
+						</div>
+					)
+				: null}
+			<div className={styles.actionButton}>
+				{props.hideSubmit ? null : (
+					<Button
+						type="button"
+						data-testid="submit-button"
+						handleClick={props.onSubmit}
+						className={cx(styles.inputSubmitActionButton, styles.submitAction)}
+						aria-label={intl.formatMessage({ id: "input.text_editor.plugins.toolbar_plugin.submit_button.aria_label", defaultMessage: "Send message" })}
+					>
+						<Icon name="send" width={20} height={20} />
+					</Button>
+				)}
+			</div>
+		</div>
+	) : null;
+};

package/src/components/input/text_editor/plugins/ToolbarPlugin.module.scss

@@ -0,0 +1,77 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+.toolbar {
+    display: flex !important;
+    justify-content: space-between !important;
+    flex-wrap: wrap;
+    background: theme.$background-color-primary;
+    @include spacing.pt(2.5, xs);
+    vertical-align: middle;
+    align-items: flex-start;
+    gap: spacing.$spacer;
+    &.toolbarIsActive {
+        border-top: 1px solid theme.$text-tertiary;
+    }
+}
+
+.iconToolbar {
+    display: flex !important;
+    gap: spacing.$spacer-lg;
+    &.shortBar {
+        gap: spacing.$spacer-md;
+    }
+}
+
+.toolbarItem {
+    border: 0;
+    background: none;
+    @include spacing.p(0, xs);
+    cursor: pointer;
+    vertical-align: middle;
+    &.disabled {
+        cursor: not-allowed;
+    }
+    &.active {
+        background-color: rgba(186, 186, 186, 0.4);
+        border-radius: 50%;
+    }
+    .format {
+        background-size: contain;
+        display: inline-block;
+        vertical-align: -0.25em;
+        display: flex !important;
+    }
+}
+
+.actionButton {
+    display: flex !important;
+    gap: spacing.$spacer;
+    margin-left: auto;
+}
+
+.inputSubmitActionButton {
+    width: 100%;
+    height: 35px;
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    background-color: theme.$call-primary !important;
+    &.submitAction svg {
+        fill: theme.$text-light !important;
+    }
+    .inputSourceText {
+        display: none !important;
+        @include spacing.ml(2, xs);
+        font-size: theme.$font-size-small;
+        @include display.media-breakpoint-up(sm) {
+            display: block !important;
+        }
+    }
+}
+
+.tooltip {
+    width: 230px !important;
+    margin-left: -117px !important;
+}

package/src/components/input/text_input/TextInput.docs.mdx

@@ -0,0 +1,73 @@
+---
+labels: ['react', 'typescript', 'input', 'text-area']
+description: 'Text input component.'
+---
+
+import { useState } from 'react';
+import { TextInput } from './TextInput';
+
+### Usages
+
+TextInput component with error and success props.  
+Supports all props from native html input.  
+Size support with em, the container of the component can use `font-size` to change the size of the component.
+
+TextInput example:
+
+```js
+import { TextInput } from '@logora/debate.input.text_input';
+```
+
+```js live
+() => {
+  const [value, setValue] = useState('');
+  return (
+    <TextInput error={value === 'error'} placeholder="placeholder" success={value === 'success'} onChange={(e) => setValue(e.target.value)} />
+  );
+};
+```
+
+TextInput with icon on the right side:
+
+```js live
+<TextInput
+  placeholder="search..."
+  iconRight={
+    <img
+      src="https://static.bit.dev/bit-icons/filter.svg"
+      style={{ cursor: 'pointer' }}
+      onClick={() => alert('on icon click')}
+    />
+  }
+/>
+```
+
+TextInput with icon on the left side:
+
+```js live
+<TextInput
+  placeholder="search..."
+  iconLeft={
+    <img
+      src="https://static.bit.dev/bit-icons/filter.svg"
+      style={{ cursor: 'pointer' }}
+      onClick={() => alert('on icon click')}
+    />
+  }
+/>
+```
+
+### Properties
+| **Name**      | **Type** | **Required** | **Default** | **Description** |
+| ----------- | ----------- | :-----------: | ----------- | ----------- |
+| <font color='#4646c6'>className</font> | <font color="#397300">string</font> | &cross; | - | <font color="grey">*input container class name*</font> |
+| <font color='#4646c6'>inputClass</font> | <font color="#397300">string</font> | &cross; | - | <font color="grey">*input class name*</font> |
+| <font color='#4646c6'>messageClass</font> | <font color="#397300">string</font> | &cross; | - | <font color="grey">*message class name*</font> |
+| <font color='#4646c6'>placeholder</font> | <font color="#397300">string</font> | &cross; | - | <font color="grey">*input placeholder*</font> |
+| <font color='#4646c6'>iconRight</font> | <font color="#397300">React element</font> | &cross; | - | <font color="grey">*right-side icon*</font> |
+| <font color='#4646c6'>iconLeft</font> | <font color="#397300">React element</font> | &cross; | - | <font color="grey">*left-side icon*</font> |
+| <font color='#4646c6'>error</font> | <font color="#397300">boolean</font> | &cross; | false | <font color="grey">*if true, will show input with error style*</font> |
+| <font color='#4646c6'>success</font> | <font color="#397300">boolean</font> | &cross; | false | <font color="grey">*if true, will show input with success style*</font> |
+| <font color='#4646c6'>filled</font> | <font color="#397300">boolean</font> | &cross; | false | <font color="grey">*if true, will make input filled*</font> |
+| <font color='#4646c6'>message</font> | <font color="#397300">string</font> | &cross; | - | <font color="grey">*helper text*</font> |
+| <font color='#4646c6'>activeLabel</font> | <font color="#397300">boolean</font> | &cross; | true | <font color="grey">*whether to show placeholder as label when input is in focus*</font> |

package/src/components/input/text_input/TextInput.jsx

@@ -0,0 +1,46 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { useForm } from '@logora/debate/forms/form';
+import { getAccent } from './color-accent';
+import { Message } from './message';
+import styles from './TextInput.module.scss';
+
+export const TextInput = forwardRef(function TextInputWithRef(
+  {
+    className,
+    style,
+    error,
+    success,
+    filled,
+    iconRight,
+    iconLeft,
+    placeholder,
+    inputClass,
+    messageClass,
+    message,
+    activeLabel = true,
+    ...rest
+  },
+  ref
+) {
+  const accent = getAccent({ error, success });
+  const { onChange } = useForm();
+
+  return (
+    <>
+      <div className={classNames(styles.container, iconRight && styles.textInputWithRightIcon, iconLeft && styles.textInputWithLeftIcon, className)} style={style}>
+        {iconLeft}
+        <input
+          ref={ref}
+          className={classNames(styles.textInput, filled && styles.filled, accent, inputClass)}
+          {...rest}
+          placeholder={activeLabel ? " " : placeholder}
+          onChange={onChange || rest.onChange}
+        />
+        {activeLabel && <label>{placeholder}</label>}
+        {iconRight}
+      </div>
+      <Message message={message} className={messageClass} />
+    </>
+  );
+});