5htp-core 0.4.8 → 0.4.9-2

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-2",
 	"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

@@ -32,6 +32,7 @@ table {
     th {
         font-weight: 500;
         color: var(--cTxtDesc);
+        white-space: break-spaces;
     }
 
     td, th {
@@ -88,6 +89,8 @@ table {
         td {
 
             cursor: default;
+            max-width: 25em;
+            overflow: hidden;
 
             &.extendable > .row {
 

package/src/client/components/Form.ts

@@ -135,11 +135,7 @@ export default function useForm<TFormData extends {}>(
         // Validation
         const validated = validate(allData);
         if (validated.errorsCount !== 0) {
-            context.app.handleError(
-                new InputErrorSchema(validated.erreurs)
-            );
-            console.log("validated", validated.erreurs);
-            return;
+            throw new InputErrorSchema(validated.erreurs);
         }
 
         // Callback
@@ -180,7 +176,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/Table/index.tsx

@@ -29,7 +29,8 @@ export type Props<TRow> = {
     empty?: ComponentChild | false,
     className?: string,
 
-    actions?: TAction<TRow>[]
+    selection?: [TRow[], React.SetStateAction<TRow[]>],
+    maxSelection?: number,
 }
 
 export type TColumn = JSX.HTMLAttributes<HTMLElement> & {
@@ -39,24 +40,26 @@ export type TColumn = JSX.HTMLAttributes<HTMLElement> & {
     stick?: boolean,
 }
 
-export type TAction<TRow> = Omit<TButtonProps, 'onClick'> & {
-    onClick: (row: TRow) => void,
-    label: ComponentChild,
-    multi?: boolean,
-    default?: boolean,
-}
-
 /*----------------------------------
 - COMPOSANTS
 ----------------------------------*/
 export default function Liste<TRow extends TDonneeInconnue>({
     stickyHeader,
     data: rows, setData, empty,
-    columns, actions, ...props
+    selection: selectionState, maxSelection,
+    columns, ...props
 }: Props<TRow>) {
 
     const { modal } = useContext();
 
+    // Selection
+    const selection = selectionState ? {
+        current: selectionState[0],
+        set: selectionState[1],
+        isMultiple: maxSelection === undefined || maxSelection > 1
+    } : undefined;
+
+    // Empty data
     if (rows.length === 0)
         return empty === false ? null : (
             <div class={"pd-2 col al-center " + (props.className || '')}>
@@ -67,32 +70,28 @@ export default function Liste<TRow extends TDonneeInconnue>({
             </div>
         );
 
-    const [selection, setSelection] = React.useState<number[]>([]);
-    const selectionMultiple = actions && actions.some((action) => action.multi);
-
-    const defaultAction = actions && actions.find((action) => action.default);
-
     /*----------------------------------
     - RENDU COLONNES / LIGNES
     ----------------------------------*/
     let renduColonnes: ComponentChild[] = [];
     
     const renduLignes = rows.map((row: TRow, iDonnee: number) => (
-        <tr {...defaultAction ? {
-            onClick: () => defaultAction.onClick(row),
+        <tr {...(maxSelection === 1 && selection) ? {
+            onClick: () => selection.set([row]),
             class: 'clickable'
         } : {}}>
-            {selectionMultiple && (
+
+            {selection?.isMultiple && (
                 <td>
                     <Checkbox
                         id={"selectionner" + iDonnee}
-                        value={selection.includes(row.id)}
-                        onChange={(selectionner: boolean) => {
-                            setSelection(current => selectionner
+                        value={selection.current.some(s => s.id === row.id)}
+                        onChange={(isSelected: boolean) => {
+                            selection.set(current => isSelected
                                 // Ajoute
-                                ? [...current, row.id]
+                                ? [...current, row]
                                 // Retire
-                                : current.filter((currentId, i) => currentId !== row.id))
+                                : current.filter((currentElem) => currentElem.id !== row.id))
                         }}
                     />
                 </td>
@@ -164,27 +163,6 @@ export default function Liste<TRow extends TDonneeInconnue>({
                     </td>
                 )
             })}
-
-            {actions !== undefined && (
-                <td class="stickyColumn">
-                    <Popover content={(
-                        <ul class="col menu card bg white">
-                            {actions.map(({ label, onClick, ...props }: TAction<TRow>) => (
-                                <li>
-                                    <Button {...props}
-                                        onClick={() => onClick && onClick(row)}
-                                        
-                                    >
-                                        {label}
-                                    </Button>
-                                </li>
-                            ))}
-                        </ul>
-                    )}>
-                        <Button size="s" icon="solid/ellipsis-h" />
-                    </Popover>
-                </td>
-            )}
         </tr>
     ));
 
@@ -202,57 +180,24 @@ export default function Liste<TRow extends TDonneeInconnue>({
             <table>
                 <thead className={stickyHeader ? 'stickyHeader' : undefined}>
                     <tr>
-                        {selectionMultiple && (
+                        {selection?.isMultiple && (
                             <th>
                                 <Checkbox
-                                    value={selection.length >= rows.length}
+                                    value={selection.current.length >= rows.length}
                                     onChange={(status: boolean) => {
-                                        setSelection(status ? rows.map(r => r.id) : []);
+                                        selection.set(status ? rows : []);
                                     }}
                                 />
                             </th>
                         )}
 
                         {renduColonnes}
-
-                        {actions !== undefined && (
-                            <th>Actions</th>
-                        )}
                     </tr>
                 </thead>
                 <tbody>
                     {renduLignes}
                 </tbody>
             </table>
-
-            {(selection.length !== 0 && actions) && (
-                <footer>
-                    <div className="card pdv-05 row inline pos_bottom">
-                        <strong>{selection.length} selected items</strong>
-
-                        {actions.map(({ label, multi, onClick, ...props }: TAction<TRow>) => {
-
-                            if (!multi)
-                                return;
-
-                            const selectedRows = selection.map((index: number) => rows[index]);
-
-                            return (
-                                <Button
-                                    {...props}
-                                    onClick={() => onClick && onClick(selectedRows)}
-                                >
-                                    {label}
-                                </Button>
-                            )
-                        })}
-
-                        <Button onClick={() => setSelection([])}>
-                            Cancel
-                        </Button>
-                    </div>
-                </footer>
-            )}
         </div>
     </>
 }

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>   
+    )
+}