5htp-core 0.4.7 → 0.4.8-2

package/src/client/components/inputv3/Rte/ExampleTheme.tsx

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export default {
+    code: 'editor-code',
+    heading: {
+        h1: 'editor-heading-h1',
+        h2: 'editor-heading-h2',
+        h3: 'editor-heading-h3',
+        h4: 'editor-heading-h4',
+        h5: 'editor-heading-h5',
+    },
+    image: 'editor-image',
+    link: 'editor-link',
+    list: {
+        listitem: 'editor-listitem',
+        nested: {
+            listitem: 'editor-nested-listitem',
+        },
+        ol: 'editor-list-ol',
+        ul: 'editor-list-ul',
+    },
+    ltr: 'ltr',
+    paragraph: 'editor-paragraph',
+    placeholder: 'editor-placeholder',
+    quote: 'editor-quote',
+    rtl: 'rtl',
+    text: {
+        bold: 'editor-text-bold',
+        code: 'editor-text-code',
+        hashtag: 'editor-text-hashtag',
+        italic: 'editor-text-italic',
+        overflowed: 'editor-text-overflowed',
+        strikethrough: 'editor-text-strikethrough',
+        underline: 'editor-text-underline',
+        underlineStrikethrough: 'editor-text-underlineStrikethrough',
+    },
+};

package/src/client/components/inputv3/Rte/ToolbarPlugin.tsx

@@ -0,0 +1,167 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import {
+    $getSelection,
+    $isRangeSelection,
+    CAN_REDO_COMMAND,
+    CAN_UNDO_COMMAND,
+    FORMAT_ELEMENT_COMMAND,
+    FORMAT_TEXT_COMMAND,
+    REDO_COMMAND,
+    SELECTION_CHANGE_COMMAND,
+    UNDO_COMMAND,
+} from 'lexical';
+
+import React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const LowPriority = 1;
+
+function Divider() {
+    return <div className="divider" />;
+}
+
+export default function ToolbarPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const toolbarRef = useRef(null);
+    const [canUndo, setCanUndo] = useState(false);
+    const [canRedo, setCanRedo] = useState(false);
+    const [isBold, setIsBold] = useState(false);
+    const [isItalic, setIsItalic] = useState(false);
+    const [isUnderline, setIsUnderline] = useState(false);
+    const [isStrikethrough, setIsStrikethrough] = useState(false);
+
+    const $updateToolbar = useCallback(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            // Update text format
+            setIsBold(selection.hasFormat('bold'));
+            setIsItalic(selection.hasFormat('italic'));
+            setIsUnderline(selection.hasFormat('underline'));
+            setIsStrikethrough(selection.hasFormat('strikethrough'));
+        }
+    }, []);
+
+    useEffect(() => {
+        return mergeRegister(
+            editor.registerUpdateListener(({ editorState }) => {
+                editorState.read(() => {
+                    $updateToolbar();
+                });
+            }),
+            editor.registerCommand(
+                SELECTION_CHANGE_COMMAND,
+                (_payload, _newEditor) => {
+                    $updateToolbar();
+                    return false;
+                },
+                LowPriority,
+            ),
+            editor.registerCommand(
+                CAN_UNDO_COMMAND,
+                (payload) => {
+                    setCanUndo(payload);
+                    return false;
+                },
+                LowPriority,
+            ),
+            editor.registerCommand(
+                CAN_REDO_COMMAND,
+                (payload) => {
+                    setCanRedo(payload);
+                    return false;
+                },
+                LowPriority,
+            ),
+        );
+    }, [editor, $updateToolbar]);
+
+    return (
+        <div className="toolbar" ref={toolbarRef}>
+            <button
+                disabled={!canUndo}
+                onClick={() => {
+                    editor.dispatchCommand(UNDO_COMMAND, undefined);
+                }}
+                className="toolbar-item spaced"
+                aria-label="Undo">
+                <i className="format undo" />
+            </button>
+            <button
+                disabled={!canRedo}
+                onClick={() => {
+                    editor.dispatchCommand(REDO_COMMAND, undefined);
+                }}
+                className="toolbar-item"
+                aria-label="Redo">
+                <i className="format redo" />
+            </button>
+            <Divider />
+            <button
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+                }}
+                className={'toolbar-item spaced ' + (isBold ? 'active' : '')}
+                aria-label="Format Bold">
+                <i className="format bold" />
+            </button>
+            <button
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+                }}
+                className={'toolbar-item spaced ' + (isItalic ? 'active' : '')}
+                aria-label="Format Italics">
+                <i className="format italic" />
+            </button>
+            <button
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
+                }}
+                className={'toolbar-item spaced ' + (isUnderline ? 'active' : '')}
+                aria-label="Format Underline">
+                <i className="format underline" />
+            </button>
+            <button
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
+                }}
+                className={'toolbar-item spaced ' + (isStrikethrough ? 'active' : '')}
+                aria-label="Format Strikethrough">
+                <i className="format strikethrough" />
+            </button>
+            <Divider />
+            <button
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left');
+                }}
+                className="toolbar-item spaced"
+                aria-label="Left Align">
+                <i className="format left-align" />
+            </button>
+            <button
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center');
+                }}
+                className="toolbar-item spaced"
+                aria-label="Center Align">
+                <i className="format center-align" />
+            </button>
+            <button
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right');
+                }}
+                className="toolbar-item spaced"
+                aria-label="Right Align">
+                <i className="format right-align" />
+            </button>
+            <button
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify');
+                }}
+                className="toolbar-item"
+                aria-label="Justify Align">
+                <i className="format justify-align" />
+            </button>{' '}
+        </div>
+    );
+}

package/src/client/components/inputv3/Rte/icons/LICENSE.md

@@ -0,0 +1,5 @@
+Bootstrap Icons
+https://icons.getbootstrap.com
+
+Licensed under MIT license
+https://github.com/twbs/icons/blob/main/LICENSE.md

package/src/client/components/inputv3/Rte/icons/arrow-clockwise.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/arrow-counterclockwise.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/journal-text.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-text" viewBox="0 0 16 16">
+  <path d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
+  <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
+  <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/justify.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-justify" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/text-center.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-center" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/text-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-left" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/text-paragraph.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-paragraph" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/text-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/type-bold.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
+  <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/type-italic.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16">
+  <path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/type-strikethrough.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-strikethrough" viewBox="0 0 16 16">
+  <path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.776 2.776 0 0 1-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/type-underline.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-underline" viewBox="0 0 16 16">
+  <path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"/>
+</svg>

package/src/client/components/inputv3/Rte/index.tsx

@@ -0,0 +1,163 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+import { EditorState, $getRoot } from 'lexical';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+
+// Core libs
+import { useInput, InputBaseProps, InputWrapper } from '../base';
+import editorNodes from '@common/data/rte/nodes';
+
+// Special componets
+import ExampleTheme from './ExampleTheme';
+import ToolbarPlugin from './ToolbarPlugin';
+import './style.less';
+
+const EMPTY_STATE = '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+export type Props = {
+    onPressEnter?: (value: string) => void,
+} 
+
+const ValueControlPlugin = ({ props, value }) => {
+
+    const [editor] = useLexicalComposerContext();
+
+    React.useEffect(() => {
+        if (props.value && props.value !== value) {
+
+            const initialEditorState = editor.parseEditorState(props.value)
+            editor.setEditorState(initialEditorState);
+        }
+    }, [props.value]);
+
+    return null;
+}
+
+/*----------------------------------
+- COMPOSANT
+----------------------------------*/
+export default (props: Props & InputBaseProps<{}>) => {
+
+    let {
+        // Decoration
+        required, size, title, className = '',
+        // State
+        inputRef, errors,
+        // Actions
+        onPressEnter
+    } = props;
+
+    /*----------------------------------
+    - INIT
+    ----------------------------------*/
+
+    const [{ value }, setValue] = useInput(props, EMPTY_STATE, true);
+
+    // Trigger onchange oly when finished typing
+    const refCommit = React.useRef<NodeJS.Timeout | null>(null);
+
+    className += ' input rte';
+
+    /*----------------------------------
+    - ACTIONS
+    ----------------------------------*/
+
+    const onChange = (editorState: EditorState) => {
+        editorState.read(() => {
+
+            const stateJson = editorState.toJSON();
+
+            if (refCommit.current !== null)
+                clearTimeout(refCommit.current);
+    
+            refCommit.current = setTimeout(() => {
+                setValue(stateJson);
+            }, 100);
+        });
+    };
+
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+    return (
+        <InputWrapper {...props}>
+            <div class={className}>
+
+                {typeof window !== 'undefined' && (
+                    <LexicalComposer initialConfig={{
+                        namespace: 'React.js Demo',
+                        editorState: value || EMPTY_STATE,
+                        nodes: editorNodes,
+                        // Handling of errors during update
+                        onError(error: Error) { throw error; },
+                        // The editor theme
+                        theme: ExampleTheme,
+                    }}>
+                        <div className="editor-container">
+                            <ToolbarPlugin />
+                            <div className="editor-inner">
+                                <RichTextPlugin
+                                    contentEditable={
+                                        <ContentEditable
+                                            className="editor-input"
+                                            aria-placeholder={"Type text here ..."}
+                                            placeholder={
+                                                <div className="editor-placeholder">Type text here ...</div>
+                                            }
+                                        />
+                                    }
+                                    ErrorBoundary={LexicalErrorBoundary}
+                                />
+                                <HistoryPlugin />
+                                {/* <AutoFocusPlugin /> */}
+                                <OnChangePlugin onChange={onChange} />
+                                <ValueControlPlugin props={props} value={value} />
+                            </div>
+                        </div>
+                    </LexicalComposer>   
+                )}
+
+                {/* <Tag {...fieldProps}
+
+                    placeholder={props.title}
+
+                    // @ts-ignore: Property 'ref' does not exist on type 'IntrinsicAttributes'
+                    ref={refInput}
+                    value={value}
+                    onFocus={() => setState({ focus: true })}
+                    onBlur={() => setState({ focus: false })}
+                    onChange={(e) => updateValue(e.target.value)}
+                    onKeyDown={(e: KeyboardEvent) => {
+
+                        if (onPressEnter && e.key === 'Enter' && value !== undefined) {
+                            commitValue();
+                            onPressEnter(value)
+                        }
+                    }}
+                /> */}
+
+                {errors?.length && (
+                    <div class="bubble bg error bottom">
+                        {errors.join('. ')}
+                    </div>
+                )}
+            </div>
+        </InputWrapper>
+    )
+}