5htp-core 0.4.8 → 0.4.9

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.4.8",
+	"version": "0.4.9",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -13,6 +13,8 @@
 		"framework"
 	],
 	"dependencies": {
+		"@excalidraw/excalidraw": "^0.17.6",
+		"@lexical/file": "^0.19.0",
 		"@lexical/headless": "^0.18.0",
 		"@lexical/html": "^0.18.0",
 		"@lexical/react": "^0.18.0",
@@ -36,6 +38,7 @@
 		"express-csp-header": "^5.0.0",
 		"express-fileupload": "^1.2.1",
 		"fast-safe-stringify": "^2.1.1",
+		"file-type": "^16.5.3",
 		"formattor": "^0.0.2",
 		"fs-extra": "^10.1.0",
 		"got": "^11.8.3",
@@ -63,6 +66,7 @@
 		"picomatch": "^2.3.1",
 		"preact": "^10.22.1",
 		"preact-render-to-string": "^6.5.5",
+		"prettier": "^3.3.3",
 		"react-datetime-picker": "^5.6.0",
 		"react-scrollbars-custom": "^4.0.27",
 		"react-slider": "^2.0.1",

package/src/client/assets/css/components/table.less

@@ -88,6 +88,8 @@ table {
         td {
 
             cursor: default;
+            max-width: 25em;
+            overflow: hidden;
 
             &.extendable > .row {
 

package/src/client/components/Form.ts

@@ -180,7 +180,7 @@ export default function useForm<TFormData extends {}>(
         fields.current = {} as FieldsAttrs<TFormData>
         for (const fieldName in schema.fields) {
 
-            const validator = schema.fields[fieldName];
+            const validator = schema.getFieldValidator(fieldName);
 
             fields.current[fieldName] = {
 

package/src/client/components/button.tsx

@@ -23,7 +23,7 @@ export type Props = {
     iconR?: ComponentChild,
 
     prefix?: ComponentChild,
-    children?: ComponentChild,
+    children?: ComponentChild | ComponentChild[],
     suffix?: ComponentChild,
     
     tag?: "a" | "button",
@@ -31,6 +31,7 @@ export type Props = {
     shape?: 'default' | 'icon' | 'tile' | 'pill',
     size?: TComponentSize,
     class?: string,
+    title?: string,
 
     state?: [string, React.StateUpdater<string>],
     active?: boolean,

package/src/client/components/containers/Popover/index.tsx

@@ -4,7 +4,7 @@
 
 // Npm
 import React from 'react';
-import { JSX, ComponentChild } from 'preact';
+import { JSX, ComponentChild, VNode } from 'preact';
 import type { StateUpdater } from 'preact/hooks';
 
 // Libs
@@ -20,7 +20,7 @@ export type Props = JSX.HTMLAttributes<HTMLDivElement> & {
     id?: string,
 
     // Display
-    content?: JSX.Element,
+    content?: ComponentChild | JSX.Element
     state?: [boolean, StateUpdater<boolean>],
     width?: number | string,
     disable?: boolean

package/src/client/components/dropdown/index.tsx

@@ -8,15 +8,16 @@ import { ComponentChild, RefObject } from 'preact';
 
 // Core
 import Button, { Props as ButtonProps } from '../button';
-import Popover from '../containers/Popover';
+import Popover, { Props as PopoverProps } from '../containers/Popover';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
 export type Props = ButtonProps & {
-    content: ComponentChild | (() => ComponentChild),
-    refDropdown?: RefObject<TDropdownControl>
+    label?: ComponentChild,
+    refDropdown?: RefObject<TDropdownControl>,
+    popover?: Partial<PopoverProps>
 }
 
 export type TDropdownControl = {
@@ -29,8 +30,10 @@ export type TDropdownControl = {
 export default (props: Props) => {
 
     let {
-        content,
+        children,
+        label,
         refDropdown,
+        popover,
         ...buttonProps
     } = props;
 
@@ -44,8 +47,15 @@ export default (props: Props) => {
         }
 
     return (
-        <Popover content={content} state={popoverState}>
-            <Button {...buttonProps} refElem={refButton} />
+        <Popover content={(
+            <div class="bg white col menu">
+                {children}
+            </div>
+        )} state={popoverState} {...(popover || {})}>
+
+            <Button {...buttonProps} iconR={<i src="chevron-down" class="s" />} 
+                refElem={refButton} children={label} />
+                
         </Popover>
     )
 }

package/src/client/components/input/Slider/index.tsx

@@ -9,8 +9,6 @@ import Slider from 'react-slider';
 
 // Core libs
 import { useInput, InputBaseProps } from '../../inputv3/base';
-import { default as Validator } from '@common/validation/validator';
-import type SchemaValidators from '@common/validation/validators';
 
 /*----------------------------------
 - TYPES

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

@@ -0,0 +1,271 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+// Lexical
+import { EditorState, createEditor } 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';
+import RichEditorUtils from './currentEditor';
+import { CharacterLimitPlugin } from '@lexical/react/LexicalCharacterLimitPlugin';
+import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
+import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
+import { ClickableLinkPlugin } from '@lexical/react/LexicalClickableLinkPlugin';
+import { CollaborationPlugin } from '@lexical/react/LexicalCollaborationPlugin';
+import { HashtagPlugin } from '@lexical/react/LexicalHashtagPlugin';
+import { HorizontalRulePlugin } from '@lexical/react/LexicalHorizontalRulePlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
+import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
+import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
+import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
+
+// Lexical plugins
+//import { CAN_USE_DOM } from 'shared/canUseDOM';
+
+import { useSettings } from './context/SettingsContext';
+import { useSharedHistoryContext } from './context/SharedHistoryContext';
+import ActionsPlugin from './plugins/ActionsPlugin';
+import AutocompletePlugin from './plugins/AutocompletePlugin';
+import AutoEmbedPlugin from './plugins/AutoEmbedPlugin';
+import AutoLinkPlugin from './plugins/AutoLinkPlugin';
+import CodeActionMenuPlugin from './plugins/CodeActionMenuPlugin';
+import CodeHighlightPlugin from './plugins/CodeHighlightPlugin';
+import CollapsiblePlugin from './plugins/CollapsiblePlugin';
+import ComponentPickerPlugin from './plugins/ComponentPickerPlugin';
+import ContextMenuPlugin from './plugins/ContextMenuPlugin';
+import DragDropPaste from './plugins/DragDropPastePlugin';
+import DraggableBlockPlugin from './plugins/DraggableBlockPlugin';
+import EmojiPickerPlugin from './plugins/EmojiPickerPlugin';
+import EmojisPlugin from './plugins/EmojisPlugin';
+import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
+import FloatingTextFormatToolbarPlugin from './plugins/FloatingTextFormatToolbarPlugin';
+import ImagesPlugin from './plugins/ImagesPlugin';
+import InlineImagePlugin from './plugins/InlineImagePlugin';
+import KeywordsPlugin from './plugins/KeywordsPlugin';
+import { LayoutPlugin } from './plugins/LayoutPlugin/LayoutPlugin';
+import LinkPlugin from './plugins/LinkPlugin';
+import ListMaxIndentLevelPlugin from './plugins/ListMaxIndentLevelPlugin';
+import MarkdownShortcutPlugin from './plugins/MarkdownShortcutPlugin';
+import { MaxLengthPlugin } from './plugins/MaxLengthPlugin';
+import MentionsPlugin from './plugins/MentionsPlugin';
+import PageBreakPlugin from './plugins/PageBreakPlugin';
+import PollPlugin from './plugins/PollPlugin';
+import SpeechToTextPlugin from './plugins/SpeechToTextPlugin';
+import TabFocusPlugin from './plugins/TabFocusPlugin';
+import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin';
+import TableCellResizer from './plugins/TableCellResizer';
+import TableHoverActionsPlugin from './plugins/TableHoverActionsPlugin';
+import TableOfContentsPlugin from './plugins/TableOfContentsPlugin';
+import TreeViewPlugin from './plugins/TreeViewPlugin';
+import TwitterPlugin from './plugins/TwitterPlugin';
+import YouTubePlugin from './plugins/YouTubePlugin';
+
+// Core libs
+import editorNodes from '@common/data/rte/nodes';
+import type { Props as TRteProps } from '.';
+
+// Special componets
+import ExampleTheme from './themes/PlaygroundEditorTheme';
+import ToolbarPlugin from './ToolbarPlugin';
+
+export 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 = {
+    preview?: boolean,
+}
+
+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 ({ value, setValue, props }: {
+    value: string,
+    setValue: (value: string) => void,
+    props: TRteProps
+}) => {
+
+    /*----------------------------------
+    - INIT
+    ----------------------------------*/
+
+    // Trigger onchange oly when finished typing
+    const refCommit = React.useRef<NodeJS.Timeout | null>(null);
+
+    const { historyState } = useSharedHistoryContext();
+    const {
+        settings: {
+            isCollab,
+            isAutocomplete,
+            isMaxLength,
+            isCharLimit,
+            hasLinkAttributes,
+            isCharLimitUtf8,
+            isRichText,
+            showTreeView,
+            showTableOfContents,
+            shouldUseLexicalContextMenu,
+            shouldPreserveNewLinesInMarkdown,
+            tableCellMerge,
+            tableCellBackgroundColor,
+        },
+    } = useSettings();
+
+    const [floatingAnchorElem, setFloatingAnchorElem] = React.useState<HTMLDivElement | null>(null);
+    const [isSmallWidthViewport, setIsSmallWidthViewport] = React.useState<boolean>(false);
+    const [isLinkEditMode, setIsLinkEditMode] = React.useState<boolean>(false);
+
+    /*----------------------------------
+    - ACTIONS
+    ----------------------------------*/
+
+    const onChange = (editorState: EditorState) => {
+        editorState.read(() => {
+
+            if (refCommit.current !== null)
+                clearTimeout(refCommit.current);
+
+            refCommit.current = setTimeout(() => {
+
+                const stateJson = JSON.stringify(editorState.toJSON());
+
+                setValue(stateJson);
+
+            }, 100);
+        });
+    };
+
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+    return (
+        <LexicalComposer initialConfig={{
+            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 setIsLinkEditMode={setIsLinkEditMode} />
+                <div className="editor-inner reading">
+                    <RichTextPlugin
+                        contentEditable={
+                            <ContentEditable
+                                className="editor-input"
+                                aria-placeholder={"Type text here ..."}
+                                placeholder={
+                                    <div className="editor-placeholder">Type text here ...</div>
+                                }
+                            />
+                        }
+                        ErrorBoundary={LexicalErrorBoundary}
+                    />
+
+                    <HistoryPlugin externalHistoryState={historyState} />
+                    <AutoFocusPlugin />
+                    <OnChangePlugin onChange={onChange} />
+                    <ValueControlPlugin props={props} value={value} />
+
+                    {isMaxLength && <MaxLengthPlugin maxLength={30} />}
+                    <DragDropPaste />
+                    <AutoFocusPlugin />
+                    <ClearEditorPlugin />
+                    <ComponentPickerPlugin />
+                    <EmojiPickerPlugin />
+                    <AutoEmbedPlugin />
+
+                    <MentionsPlugin />
+                    <EmojisPlugin />
+                    <HashtagPlugin />
+                    <KeywordsPlugin />
+                    <SpeechToTextPlugin />
+                    <AutoLinkPlugin />
+                    <CodeHighlightPlugin />
+                    <ListPlugin />
+                    <CheckListPlugin />
+                    <ListMaxIndentLevelPlugin maxDepth={7} />
+                    <TablePlugin
+                        hasCellMerge={tableCellMerge}
+                        hasCellBackgroundColor={tableCellBackgroundColor}
+                    />
+                    <TableCellResizer />
+                    <ImagesPlugin />
+                    <InlineImagePlugin />
+                    <LinkPlugin hasLinkAttributes={hasLinkAttributes} />
+                    <PollPlugin />
+                    <TwitterPlugin />
+                    <YouTubePlugin />
+                    <ClickableLinkPlugin />
+                    <HorizontalRulePlugin />
+                    {/* <EquationsPlugin /> */}
+                    {/* <ExcalidrawPlugin /> */}
+                    <TabFocusPlugin />
+                    <TabIndentationPlugin />
+                    <CollapsiblePlugin />
+                    <PageBreakPlugin />
+                    <LayoutPlugin />
+
+                    <MarkdownShortcutPlugin />
+
+                    {floatingAnchorElem && !isSmallWidthViewport && (
+                        <>
+                            <DraggableBlockPlugin anchorElem={floatingAnchorElem} />
+                            <CodeActionMenuPlugin anchorElem={floatingAnchorElem} />
+                            <FloatingLinkEditorPlugin
+                                anchorElem={floatingAnchorElem}
+                                isLinkEditMode={isLinkEditMode}
+                                setIsLinkEditMode={setIsLinkEditMode}
+                            />
+                            <TableCellActionMenuPlugin
+                                anchorElem={floatingAnchorElem}
+                                cellMerge={true}
+                            />
+                            <TableHoverActionsPlugin anchorElem={floatingAnchorElem} />
+                            <FloatingTextFormatToolbarPlugin
+                                anchorElem={floatingAnchorElem}
+                                setIsLinkEditMode={setIsLinkEditMode}
+                            />
+                        </>
+                    )}
+
+                    {(isCharLimit || isCharLimitUtf8) && (
+                        <CharacterLimitPlugin
+                            charset={isCharLimit ? 'UTF-16' : 'UTF-8'}
+                            maxLength={5}
+                        />
+                    )}
+                    {isAutocomplete && <AutocompletePlugin />}
+                </div>
+            </div>
+        </LexicalComposer>   
+    )
+}

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

@@ -0,0 +1,220 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// npm
+import React, { JSX } from 'react';
+import {
+    $createParagraphNode,
+    $getSelection,
+    $isRangeSelection,
+    LexicalEditor,
+} from 'lexical';
+
+import {
+    $setBlocksType,
+} from '@lexical/selection';
+
+import {
+    $createHeadingNode,
+    $createQuoteNode,
+    HeadingTagType,
+} from '@lexical/rich-text';
+
+import {
+    INSERT_CHECK_LIST_COMMAND,
+    INSERT_ORDERED_LIST_COMMAND,
+    INSERT_UNORDERED_LIST_COMMAND,
+} from '@lexical/list';
+
+import {
+    $createCodeNode,
+} from '@lexical/code';
+
+// Core
+import Button from '@client/components/button';
+import DropDown from '@client/components/dropdown';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+const formatParagraph = (editor: LexicalEditor) => {
+    editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            $setBlocksType(selection, () => $createParagraphNode());
+        }
+    });
+};
+
+const formatHeading = (headingSize: HeadingTagType) => (editor: LexicalEditor, blockType: typeof blockTypeNames[number]) => {
+    if (blockType !== headingSize) {
+        editor.update(() => {
+            const selection = $getSelection();
+            $setBlocksType(selection, () => $createHeadingNode(headingSize));
+        });
+    }
+};
+
+const formatBulletList = (editor: LexicalEditor, blockType: typeof blockTypeNames[number]) => {
+    if (blockType !== 'bullet') {
+        editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    } else {
+        formatParagraph(editor);
+    }
+};
+
+const formatCheckList = (editor: LexicalEditor, blockType: typeof blockTypeNames[number]) => {
+    if (blockType !== 'check') {
+        editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined);
+    } else {
+        formatParagraph(editor);
+    }
+};
+
+const formatNumberedList = (editor: LexicalEditor, blockType: typeof blockTypeNames[number]) => {
+    if (blockType !== 'number') {
+        editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    } else {
+        formatParagraph(editor);
+    }
+};
+
+const formatQuote = (editor: LexicalEditor, blockType: typeof blockTypeNames[number]) => {
+    if (blockType !== 'quote') {
+        editor.update(() => {
+            const selection = $getSelection();
+            $setBlocksType(selection, () => $createQuoteNode());
+        });
+    }
+};
+
+const formatCode = (editor: LexicalEditor, blockType: typeof blockTypeNames[number]) => {
+    if (blockType !== 'code') {
+        editor.update(() => {
+            let selection = $getSelection();
+
+            if (selection !== null) {
+                if (selection.isCollapsed()) {
+                    $setBlocksType(selection, () => $createCodeNode());
+                } else {
+                    const textContent = selection.getTextContent();
+                    const codeNode = $createCodeNode();
+                    selection.insertNodes([codeNode]);
+                    selection = $getSelection();
+                    if ($isRangeSelection(selection)) {
+                        selection.insertRawText(textContent);
+                    }
+                }
+            }
+        });
+    }
+};
+
+const blockTypes: {
+    label: string;
+    value: string;
+    icon: string;
+    onClick: (editor: LexicalEditor, blockType: string) => void;   
+}[] = [{
+    label: 'Bulleted List',
+    value: 'bullet',
+    icon: /* @icon */'list-ul',
+    onClick: formatBulletList,
+}, {
+    label: 'Check List',
+    value: 'check',
+    icon: /* @icon */'check-square',
+    onClick: formatCheckList,
+}, {
+    label: 'Code Block',
+    value: 'code',
+    icon: /* @icon */'code',
+    onClick: formatCode,
+}, {
+    label: 'Heading 1',
+    value: 'h1',
+    icon: /* @icon */'h1',
+    onClick: formatHeading('h1'),
+}, {
+    label: 'Heading 2',
+    value: 'h2',
+    icon: /* @icon */'h2',
+    onClick: formatHeading('h2'),
+}, {
+    label: 'Heading 3',
+    value: 'h3',
+    icon: /* @icon */'h3',
+    onClick: formatHeading('h3'),
+}, {
+    label: 'Heading 4',
+    value: 'h4',
+    icon: /* @icon */'h4',
+    onClick: formatHeading('h4'),
+}, {
+    label: 'Heading 5',
+    value: 'h5',
+    icon: /* @icon */'h5',
+    onClick: formatHeading('h5'),
+}, {
+    label: 'Heading 6',
+    value: 'h6',
+    icon: /* @icon */'h6',
+    onClick: formatHeading('h6'),
+}, {
+    label: 'Numbered List',
+    value: 'number',
+    icon: /* @icon */'list-ol',
+    onClick: formatNumberedList,
+    
+}, {
+    label: 'Normal',
+    value: 'paragraph',
+    icon: /* @icon */'paragraph',
+    onClick: formatParagraph,
+}, {
+    label: 'Quote',
+    value: 'quote',
+    icon: /* @icon */'quote-left',
+    onClick: formatQuote,
+}];
+
+export const blockTypeNames = blockTypes.map((type) => type.value);
+
+export const rootTypeToRootName = {
+    root: 'Root',
+    table: 'Table',
+};
+
+/*----------------------------------
+- COMPONENT
+----------------------------------*/
+export default function BlockFormatDropDown({
+    editor,
+    blockType,
+    rootType,
+    disabled = false,
+}: {
+    blockType: typeof blockTypeNames[number];
+    rootType: keyof typeof rootTypeToRootName;
+    editor: LexicalEditor;
+    disabled?: boolean;
+}): JSX.Element {
+
+    const currentBlockType = blockTypes.find((type) => type.value === blockType);
+
+    return (
+        <DropDown disabled={disabled} icon={currentBlockType ? currentBlockType.icon : 'question'} size="s"
+            label={currentBlockType ? currentBlockType.label : 'Unknown Block Type'}
+            popover={{ tag: 'li' }}
+        >
+            {blockTypes.map((block) => (
+                <Button icon={block.icon}
+                    onClick={() => block.onClick(editor, blockType)}>
+                    {block.label}
+                </Button>
+            ))}
+        </DropDown>
+    );
+}