5htp-core 0.4.7 → 0.4.8-2

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

@@ -8,7 +8,7 @@ import { VNode, JSX } from 'preact';
 import TextareaAutosize from 'react-textarea-autosize';
 
 // Core libs
-import { useInput, InputBaseProps } from './base';
+import { useInput, InputBaseProps, InputWrapper } from './base';
 import { default as Validator } from '../../../common/validation/validator';
 import type SchemaValidators from '@common/validation/validators';
 
@@ -47,17 +47,18 @@ type TInputElementProps = Omit<(
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
-export default ({ 
-    // Decoration
-    icon, prefix, suffix, iconR, required, size, className = '',
-    // State
-    inputRef, errors,
-    // Behavior
-    type, choice, validator,
-    // Actions
-    onPressEnter,
-    ...props 
-}: Props & InputBaseProps<string> & TInputElementProps) => {
+export default (props: Props & InputBaseProps<string> & TInputElementProps) => {
+
+    let {
+        // Decoration
+        icon, prefix, suffix, iconR, placeholder, size, className = '',
+        // State
+        inputRef, errors,
+        // Behavior
+        type, validator,
+        // Actions
+        onPressEnter
+    } = props;
 
     /*----------------------------------
     - INIT
@@ -128,7 +129,7 @@ export default ({
 
     } else if (type === 'longtext') {
 
-        prefix = prefix || <i src="text" />;
+        // No icon because not good looking ane we want as much space as possible
         Tag = 'textarea';
         className += ' multiline';
 
@@ -170,43 +171,43 @@ export default ({
     /*----------------------------------
     - RENDER
     ----------------------------------*/
-    return <>
-        <div class={className} onClick={() => refInput.current?.focus()}>
+    return (
+        <InputWrapper {...props}>
+            <div class={className} onClick={() => refInput.current?.focus()}>
 
-            {prefix}
+                {prefix}
 
-            <div class="contValue">
+                <div class="contValue">
 
-                <Tag {...fieldProps}
-                    // @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)}
+                    <Tag {...fieldProps}
 
-                    onKeyDown={(e: KeyboardEvent) => {
+                        placeholder={placeholder || props.title}
 
-                        if (onPressEnter && e.key === 'Enter' && value !== undefined) {
-                            commitValue();
-                            onPressEnter(value)
-                        }
-                    }}
-                />
+                        // @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) => {
 
-                <label>{props.title}{required && (
-                    <span class="fg error">&nbsp;*</span>
-                )}</label>
-            </div>
+                            if (onPressEnter && e.key === 'Enter' && value !== undefined) {
+                                commitValue();
+                                onPressEnter(value)
+                            }
+                        }}
+                    />
+                </div>
 
-            {suffix}
+                {suffix}
+                    
+                {errors?.length && (
+                    <div class="bubble bg error bottom">
+                        {errors.join('. ')}
+                    </div>
+                )}
                 
-            {errors?.length && (
-                <div class="bubble bg error bottom">
-                    {errors.join('. ')}
-                </div>
-            )}
-            
-        </div>
-    </>
+            </div>
+        </InputWrapper>
+    )
 }

package/src/common/data/rte/index.ts

@@ -0,0 +1,66 @@
+import { createHeadlessEditor } from '@lexical/headless';
+import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html'; 
+import { $getRoot } from 'lexical';
+
+import { JSDOM } from 'jsdom';
+
+import editorNodes from './nodes';
+
+export const htmlToJson = async (htmlString: string) => {
+
+    const editor = createHeadlessEditor({ 
+        nodes: editorNodes 
+    });
+    
+    await editor.update(() => {
+
+        const root = $getRoot();
+
+        // In a headless environment you can use a package such as JSDom to parse the HTML string.
+        const dom = new JSDOM(htmlString);
+
+        // Once you have the DOM instance it's easy to generate LexicalNodes.
+        const lexicalNodes = $generateNodesFromDOM(editor, dom.window.document);
+
+        lexicalNodes.forEach((node) => root.append(node));
+    });
+
+    const state = editor.getEditorState();
+    return state.toJSON();
+};
+
+export const jsonToHtml = async (jsonString: string) => {
+    
+
+    const dom = new JSDOM(`<!DOCTYPE html><body></body>`);
+    global.window = dom.window;
+    global.document = dom.window.document;
+    global.DOMParser = dom.window.DOMParser;
+    global.MutationObserver = dom.window.MutationObserver;
+    
+    // Create a headless Lexical editor instance
+    const editor = createHeadlessEditor({
+        namespace: 'headless',
+        editable: false,
+    });
+
+    // Set the editor state from JSON
+    const state = editor.parseEditorState(jsonString);
+    if (state.isEmpty())
+        return null;
+
+    editor.setEditorState( state );
+
+    // Generate HTML from the Lexical nodes
+    const html = await editor.getEditorState().read(() => {
+        return $generateHtmlFromNodes(editor);
+    });  
+    
+    // Clean up global variables set for JSDOM to avoid memory leaks
+    delete global.window;
+    delete global.document;
+    delete global.DOMParser;
+    delete global.MutationObserver;
+
+    return html;
+}

package/src/common/data/rte/nodes.ts

@@ -0,0 +1,20 @@
+
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+
+export default [
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    CodeNode,
+    CodeHighlightNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+    AutoLinkNode,
+    LinkNode
+]

package/src/common/validation/validators.ts

@@ -139,7 +139,7 @@ export default class SchemaValidators {
             return undefined;
 
         // Normalize for verifications
-        const choicesValues = choices?.map(v => v.value)
+        const choicesValues = choices?.map(v => typeof v === 'object' ? v.value : v)
 
         const checkChoice = ( choice: any ) => {
 
@@ -350,6 +350,51 @@ export default class SchemaValidators {
         ...opts,
     })
 
+    public richText = (opts: TValidator<string> & {
+        
+    } = {}) => new Validator<string>('richText', (val, options, path) => {
+
+        // Check that the root exists and has a valid type
+        if (!val || typeof val !== 'object' || typeof val.root !== 'object' || val.root.type !== 'root')
+            throw new InputError("Invalid rich text value (1).");
+
+        // Check if root has children array
+        if (!Array.isArray(val.root.children))
+            throw new InputError("Invalid rich text value (2).");
+
+        // Recursive function to validate each node
+        function validateNode(node) {
+            // Each node should be an object with a `type` property
+            if (typeof node !== 'object' || !node.type || typeof node.type !== 'string')
+                throw new InputError("Invalid rich text value (3).");
+
+            // Validate text nodes
+            if (node.type === 'text') {
+                if (typeof node.text !== 'string') 
+                    throw new InputError("Invalid rich text value (4).");
+            }
+
+            // Validate paragraph, heading, or other structural nodes that may contain children
+            if (['paragraph', 'heading', 'list', 'listitem'].includes(node.type))
+                if (!Array.isArray(node.children) || !node.children.every(validateNode)) {
+                    throw new InputError("Invalid rich text value (5).");
+            }
+
+            return true;
+        }
+
+        // Validate each child node in root
+        for (const child of val.root.children) {
+            validateNode(child);
+        }
+
+        return val;
+
+    }, {
+        //defaut: new Date,
+        ...opts,
+    })
+
     /*----------------------------------
     - FICHIER
     ----------------------------------*/
@@ -357,14 +402,14 @@ export default class SchemaValidators {
 
     } = {}) => new Validator<FileToUpload>('file', (val, options, path) => {
 
-        if (!(val instanceof FileToUpload))
-            throw new InputError(`Must be a File (${typeof val} received)`);
-
         // Chaine = url ancien fichier = exclusion de la valeur pour conserver l'ancien fichier
         // NOTE: Si la valeur est présente mais undefined, alors on supprimera le fichier
         if (typeof val === 'string')
             return EXCLUDE_VALUE;
 
+        if (!(val instanceof FileToUpload))
+            throw new InputError(`Must be a File (${typeof val} received)`);
+
         // MIME
         if (type !== undefined) {
 

package/src/server/services/auth/index.ts

@@ -225,8 +225,6 @@ export default abstract class AuthService<
 
         this.config.debug && console.warn(LogPrefix, `Check auth, role = ${role}. Current user =`, user?.name);
 
-        console.log({ entity, role, motivation });
-
         if (user === undefined) {
 
             throw new Error(`request.user has not been decoded.`);

package/src/server/services/database/index.ts

@@ -256,7 +256,7 @@ export default class SQL extends Service<Config, Hooks, Application, Services> {
     }
 
     public equalities = (data: TObjetDonnees, keys = Object.keys(data)) => 
-        keys.map(k => '' + k + ' = ' + mysql.escape( data[k] ))
+        keys.map(k => '' + k + ' = ' + this.esc( data[k] ))
 
     /*----------------------------------
     - OPERATIONS: LOW LEVELf

package/src/client/components/input/Rte/index.less

@@ -1,13 +0,0 @@
-.contChamp.rte {
-    .corpsChamp {
-        height: auto !important;
-        line-height: auto !important;
-    }
-
-    #toolbar {
-        position: absolute;
-        background: red;
-        height: 30px;
-        width: 15rem;
-    }
-}

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

@@ -1,143 +0,0 @@
-
-// INSPIRATION: 
-// https://github.com/sstur/react-rte
-// https://drupalgutenberg.org/demo
-
-/*----------------------------------
-- DEPENDANCES
-----------------------------------*/
-
-// Npm
-import React from 'react';
-import {
-
-    Editor, 
-    EditorState,
-
-    SelectionState,
-
-    convertToRaw,
-    KeyBindingUtil,
-    RawDraftContentState,
-
-    ContentBlock,
-    EditorBlock
-} from 'draft-js';
-
-// Libs
-import Champ from '../Base';
-import { getSelection, getSelectionRect } from './selection';
-
-/*----------------------------------
-- TYPES
-----------------------------------*/
-type TValeur = EditorState
-const valeurDefaut = '' as string;
-type TValeurDefaut = EditorState;
-type TValeurOut = string;
-
-export type Props = {
-    valeur: TValeur,
-}
-
-/*----------------------------------
-- COMPOSANT
-----------------------------------*/
-import './index.less';
-export default Champ<Props, TValeurDefaut, TValeurOut>('rte', {
-    valeurDefaut, 
-    saisieManuelle: true
-}, ({
-    // Spread TOUTES les props dont on a besoin pour éviter les problèmes de référence avec props
-    placeholder, attrsChamp
-}, { valeur, state, setState, commitCurrentValue }, rendre) => {
-
-    /*----------------------------------
-    - CONSTRUCTION CHAMP
-    ----------------------------------*/
-
-    const refEditeur = React.useRef<Editor>(null);
-   
-    // Init state
-    if (!valeur)
-        valeur = EditorState.createEmpty();
-
-    /*const updateToolbar = (selection: SelectionState) => {
-
-        if (selection.isCollapsed()) {
-            return;
-        }
-        // eslint-disable-next-line no-undef
-        const nativeSelection = getSelection(window);
-        if (!nativeSelection.rangeCount) {
-            return;
-        }
-        const selectionBoundary = getSelectionRect(nativeSelection);
-
-        console.log('selectionBoundary', selectionBoundary);
-
-        const toolbarNode = document.getElementById('toolbar');
-        if (!toolbarNode) return;
-        const toolbarBoundary = toolbarNode.getBoundingClientRect();
-
-        // parent = conteneur éditeur draft
-        const parent = document.getElementById('toolbar');
-        if (!parent) return;
-        const parentBoundary = parent.getBoundingClientRect();
-
-        toolbarNode.style.top =
-            `${(selectionBoundary.top - parentBoundary.top - toolbarBoundary.height - 5)}px`;
-        toolbarNode.style.width = `${toolbarBoundary.width}px`;
-
-        // The left side of the tooltip should be:
-        // center of selection relative to parent - half width of toolbar
-        const selectionCenter = (selectionBoundary.left + (selectionBoundary.width / 2)) - parentBoundary.left;
-        let left = selectionCenter - (toolbarBoundary.width / 2);
-        const screenLeft = parentBoundary.left + left;
-        if (screenLeft < 0) {
-            // If the toolbar would be off-screen
-            // move it as far left as it can without going off-screen
-            left = -parentBoundary.left;
-        }
-        toolbarNode.style.left = `${left}px`;
-        
-
-    }*/
-
-    const onChange = (state: EditorState) => {
-
-        /*const selection = state.getSelection();
-        updateToolbar(selection);*/
-
-        // Détection changement de contenu
-        /*const currentContentState = valeur.getCurrentContent()
-        const newContentState = state.getCurrentContent()
-        if (currentContentState === newContentState)*/
-
-        setState({ valeur: state });
-
-    }
-
-    /*----------------------------------
-    - RENDU DU CHAMP
-    ----------------------------------*/
-    return rendre((
-        <div className="champ typographie" onClick={() => refEditeur.current?.focus()}>
-            <Editor
-                ref={refEditeur}
-                editorState={valeur}
-
-                onChange={onChange}
-                onBlur={() => commitCurrentValue()}
-
-                placeholder={placeholder}
-                textAlignment="left"
-                textDirectionality="LTR"
-
-            />
-
-            {/* <div id="toolbar">coucou</div> */}
-        </div>
-    // Les propétés modifiées sont passées ici
-    ), {  });
-})

package/src/client/components/input/Rte/selection.ts

@@ -1,34 +0,0 @@
-// https://github.com/brijeshb42/medium-draft/blob/c5350bb76489fd4f2f90f1dc69db92224138d20a/src/util/index.js
-
-/*
-Returns the `boundingClientRect` of the passed selection.
-*/
-export const getSelectionRect = (selected): DOMRect => {
-    const _rect = selected.getRangeAt(0).getBoundingClientRect();
-    // selected.getRangeAt(0).getBoundingClientRect()
-    let rect = _rect && _rect.top ? _rect : selected.getRangeAt(0).getClientRects()[0];
-    if (!rect) {
-        if (selected.anchorNode && selected.anchorNode.getBoundingClientRect) {
-            rect = selected.anchorNode.getBoundingClientRect();
-            rect.isEmptyline = true;
-        } else {
-            return null;
-        }
-    }
-    return rect;
-};
-
-/*
-Returns the native selection node.
-*/
-export const getSelection = (root) => {
-    let t = null;
-    if (root.getSelection) {
-        t = root.getSelection();
-    } else if (root.document.getSelection) {
-        t = root.document.getSelection();
-    } else if (root.document.selection) {
-        t = root.document.selection.createRange().text;
-    }
-    return t;
-};

package/src/common/data/rte.tsx

@@ -1,11 +0,0 @@
-import mediumDraftExporter from '@client/components/Rte/exporter';
-import { convertFromRaw } from 'draft-js';
-export { convertFromRaw } from 'draft-js';
-
-export const convertir = (
-    state: any,
-    amp?: boolean
-) => mediumDraftExporter(convertFromRaw( state ), amp);
-
-export const versHtml = (state: any): string => convertir(state);
-export const versAmp = (state: any): string => convertir(state, true);