5htp-core 0.6.0-83 → 0.6.0-85

package/client/assets/css/components/button.less

@@ -21,7 +21,7 @@
     min-height: @sizeComponent;
 
     // Shape
-    border-radius: @radius;
+    border-radius: @sizeComponent / 2; // Default = pill
     border: none;
 
     // Text
@@ -208,8 +208,11 @@
         }
     }
 
-    &.pill {
-        border-radius: @sizeComponent / 2;
+    &.rect,
+    &.col,
+    .col.menu > &,
+    .col.menu > li > & {
+        border-radius: @radius;
     }
 
     &.link {
@@ -242,7 +245,6 @@
 
     // Give less imortance to buttons which are in lists
     color: var(--cTxtBase);  
-    padding: 0 1em; // Row display = more condensed
 
     &.active,
     &:hover {
@@ -290,6 +292,13 @@
     }
 }
 
+.row {
+    &.menu > .btn:not(.col), 
+    &.menu > li > .btn:not(.col) {
+        padding: 0 1em; // Row display = more condensed
+    }
+}
+
 .submenu.card {
     animation: aff-submenu 0.1s ease;
     @keyframes aff-submenu {

package/client/assets/css/text/icons.less

@@ -39,7 +39,7 @@ i {
     &.solid {
         color: var(--cTxtAccent2);
         background: var(--cBg);
-        border-radius: @radius;
+        border-radius: 50%;
 
         // Normla size must fit inside a normal fit element
         width: @sizeComponent * 0.75;

package/client/components/Button.tsx

@@ -28,7 +28,7 @@ export type Props = {
     
     tag?: "a" | "button",
     type?: 'guide' | 'primary' | 'secondary' | 'link',
-    shape?: 'default' | 'icon' | 'tile' | 'pill',
+    shape?: 'default' | 'icon' | 'tile' | 'pill' | 'custom',
     size?: TComponentSize,
     class?: string,
 
@@ -273,11 +273,14 @@ export default ({
             }       
         }}>
             {prefix}
-            {children && (
-                <span class={"label"}>
-                    {children}
-                </span>
-            )}
+            {children === undefined 
+                ? null 
+                : shape === 'custom' 
+                ? children : (
+                    <span class={"label"}>
+                        {children}
+                    </span>
+                )}
             {suffix}
         </Tag>
     )

package/client/components/DropDown.tsx

@@ -17,18 +17,19 @@ import { useMantineInput, InputBaseProps } from './utils';
 ----------------------------------*/
 export type Props = ButtonProps & {
     menuProps?: MenuProps,
-  label: ComponentChild,
+    label: ComponentChild,
+    popover?: PopoverProps,
 }
 
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
 export default ({ 
-    label, children, 
+    label, children, popover = {},
     menuProps = {}, size, icon, ...btnProps 
 }: Props) => {
     return (
-        <Popover content={(
+        <Popover {...popover} content={(
             <div class="card bg white col menu">
                 {children}
             </div>
@@ -36,8 +37,8 @@ export default ({
             <Button {...btnProps} 
                 size={size}
                 suffix={<i src="angle-down" />}
+                icon={icon}
             >
-                {icon && <i src={icon} />}
                 {label}
             </Button>
         </Popover>

package/client/components/Rte/Editor.tsx

@@ -73,6 +73,7 @@ import YouTubePlugin from './plugins/YouTubePlugin';
 // Core libs
 import editorNodes from '@common/data/rte/nodes';
 import type { Props as TRteProps } from '.';
+import type { LexicalState } from '@common/utils/rte';
 
 // Special componets
 import ExampleTheme from './themes/PlaygroundEditorTheme';
@@ -112,6 +113,7 @@ export default ({ value, setValue, props }: {
         // Decoration
         title,
         toolbar,
+        decorateText = true,
         // Actions
         preview = true
     } = props;
@@ -146,7 +148,7 @@ export default ({ value, setValue, props }: {
         }
     }, [isPreview]);
 
-    const renderPreview = async (value: {} | undefined) => {
+    const renderPreview = async (value: LexicalState | undefined) => {
 
         if (!value)
             return '';
@@ -166,7 +168,7 @@ export default ({ value, setValue, props }: {
                     <i src="spin" />
                 </div>
             ) : (
-                <div class="preview reading h-1-4 scrollable col clickable" 
+                <div class={"preview h-1-4 scrollable clickable" + (decorateText ? ' reading col' : '')} 
                     onClick={() => setIsPreview(false)}
                     dangerouslySetInnerHTML={{ __html: html }} />
             )
@@ -247,7 +249,7 @@ export default ({ value, setValue, props }: {
                         contentEditable={
                             <div className="editor" ref={onRef}>
                                 <ContentEditable
-                                    className="editor-input reading col"
+                                    className={"editor-input" + (decorateText ? ' reading col' : '')}
                                     aria-placeholder={"Type text here ..."}
                                     placeholder={
                                         <div className="editor-placeholder">Type text here ...</div>
@@ -278,7 +280,15 @@ export default ({ value, setValue, props }: {
                     <SpeechToTextPlugin />
                     <AutoLinkPlugin />
                     <CodeHighlightPlugin />
-                    <ListPlugin />
+
+                    {toolbar?.insert !== false && <>
+
+                        {(toolbar?.insert === true || toolbar?.insert?.list !== false) && (
+                            <ListPlugin />
+                        )}
+                    
+                    </>}
+
                     <CheckListPlugin />
                     <ListMaxIndentLevelPlugin maxDepth={7} />
                     <TablePlugin
@@ -318,10 +328,13 @@ export default ({ value, setValue, props }: {
                                 cellMerge={true}
                             />
                             <TableHoverActionsPlugin anchorElem={floatingAnchorElem} />
-                            <FloatingTextFormatToolbarPlugin
-                                anchorElem={floatingAnchorElem}
-                                setIsLinkEditMode={setIsLinkEditMode}
-                            />
+
+                            {toolbar?.formatting !== false && (
+                                <FloatingTextFormatToolbarPlugin
+                                    anchorElem={floatingAnchorElem}
+                                    setIsLinkEditMode={setIsLinkEditMode}
+                                />
+                            )}
                         </>
                     )}
 

package/client/components/Rte/ToolbarPlugin/index.tsx

@@ -117,6 +117,7 @@ export type TToolbarDisplay = {
         image?: boolean,
         inlineImage?: boolean,
         table?: boolean,
+        list?: boolean,
         poll?: boolean,
         columns?: boolean,
         stickyNote?: boolean,
@@ -514,7 +515,7 @@ export default function ToolbarPlugin({
     const canViewerSeeInsertCodeButton = !isImageCaption;
 
     return (
-        <div className="row menu al-left" style={{ 
+        <div className="row menu al-left pdb-05" style={{ 
             position: 'sticky', 
             top: 0, 
             background: 'white', 
@@ -614,223 +615,223 @@ export default function ToolbarPlugin({
                             title="Insert link"
                         />
                     )}
+                </>
+            )}
 
-                    {/* <DropdownColorPicker
-                        disabled={!isEditable}
-                        buttonClassName="toolbar-item color-picker"
-                        buttonAriaLabel="Formatting text color"
-                        buttonIconClassName="icon font-color"
-                        color={fontColor}
-                        onChange={onFontColorSelect}
-                        title="text color"
-                    />
-                    <DropdownColorPicker
-                        disabled={!isEditable}
-                        buttonClassName="toolbar-item color-picker"
-                        buttonAriaLabel="Formatting background color"
-                        buttonIconClassName="icon bg-color"
-                        color={bgColor}
-                        onChange={onBgColorSelect}
-                        title="bg color"
-                    /> */}
-
-                    {display?.styles !== false && (
-                        <DropDown popover={{ tag: 'li' }} icon="font" size="s"
-                            disabled={!isEditable}
-                            hint="Formatting options for additional text styles"
+
+            {/* <DropdownColorPicker
+                disabled={!isEditable}
+                buttonClassName="toolbar-item color-picker"
+                buttonAriaLabel="Formatting text color"
+                buttonIconClassName="icon font-color"
+                color={fontColor}
+                onChange={onFontColorSelect}
+                title="text color"
+            />
+            <DropdownColorPicker
+                disabled={!isEditable}
+                buttonClassName="toolbar-item color-picker"
+                buttonAriaLabel="Formatting background color"
+                buttonIconClassName="icon bg-color"
+                color={bgColor}
+                onChange={onBgColorSelect}
+                title="bg color"
+            /> */}
+
+            {display?.styles !== false && (
+                <DropDown popover={{ tag: 'li' }} icon="font" size="s"
+                    disabled={!isEditable}
+                    hint="Formatting options for additional text styles"
+                >
+
+                    {display?.styles === true || display?.styles?.strikethrough !== false && (
+                        <Button icon="strikethrough" size="s"
+                            onClick={() => {
+                                activeEditor.dispatchCommand( FORMAT_TEXT_COMMAND, 'strikethrough');
+                            }}
+                            active={isStrikethrough}
+                            title="Format text with a strikethrough"
                         >
+                            Strikethrough
+                        </Button>
+                    )}
 
-                            {display?.styles === true || display?.styles?.strikethrough !== false && (
-                                <Button icon="strikethrough" size="s"
-                                    onClick={() => {
-                                        activeEditor.dispatchCommand( FORMAT_TEXT_COMMAND, 'strikethrough');
-                                    }}
-                                    active={isStrikethrough}
-                                    title="Format text with a strikethrough"
-                                >
-                                    Strikethrough
-                                </Button>
-                            )}
-
-                            {display?.styles === true || display?.styles?.subscript !== false && (
-                                <Button icon="subscript" size="s"
-                                    onClick={() => {
-                                        activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
-                                    }}
-                                    active={isSubscript}
-                                    title="Format text with a subscript"
-                                >
-                                    Subscript
-                                </Button>
-                            )}
-
-                            {display?.styles === true || display?.styles?.superscript !== false && (
-                                <Button icon="superscript" size="s"
-                                    onClick={() => {
-                                        activeEditor.dispatchCommand(
-                                            FORMAT_TEXT_COMMAND,
-                                            'superscript',
-                                        );
-                                    }}
-                                    active={isSuperscript}
-                                    title="Format text with a superscript">
-                                    Superscript
-                                </Button>
-                            )}
-
-                            {display?.styles === true || display?.styles?.clear !== false && (
-                                <Button icon="empty-set" size="s"
-                                    onClick={clearFormatting}
-                                    title="Clear all text formatting">
-                                    Clear Formatting
-                                </Button>
-                            )}
-
-                        </DropDown>
+                    {display?.styles === true || display?.styles?.subscript !== false && (
+                        <Button icon="subscript" size="s"
+                            onClick={() => {
+                                activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
+                            }}
+                            active={isSubscript}
+                            title="Format text with a subscript"
+                        >
+                            Subscript
+                        </Button>
+                    )}
+
+                    {display?.styles === true || display?.styles?.superscript !== false && (
+                        <Button icon="superscript" size="s"
+                            onClick={() => {
+                                activeEditor.dispatchCommand(
+                                    FORMAT_TEXT_COMMAND,
+                                    'superscript',
+                                );
+                            }}
+                            active={isSuperscript}
+                            title="Format text with a superscript">
+                            Superscript
+                        </Button>
+                    )}
+
+                    {display?.styles === true || display?.styles?.clear !== false && (
+                        <Button icon="empty-set" size="s"
+                            onClick={clearFormatting}
+                            title="Clear all text formatting">
+                            Clear Formatting
+                        </Button>
                     )}
 
-                    {(canViewerSeeInsertDropdown && display?.insert !== false) && (
-                        <>
-                            <Divider />
-                            <DropDown popover={{ tag: 'li' }}
+                </DropDown>
+            )}
+
+            {(canViewerSeeInsertDropdown && display?.insert !== false) && (
+                <>
+                    <DropDown popover={{ tag: 'li' }}
+                        disabled={!isEditable}
+                        size="s"
+                        icon="plus-circle"
+                        hint="Insert specialized editor node"
+                    >
+
+                        {display?.insert === true || display?.insert?.horizontalRule !== false && (
+                            <Button icon="horizontal-rule" size="s" onClick={() => {
+                                activeEditor.dispatchCommand( INSERT_HORIZONTAL_RULE_COMMAND, undefined, );
+                            }}>
+                                Horizontal Rule
+                            </Button>
+                        )}
+
+                        {display?.insert === true || display?.insert?.pageBreak !== false && (
+                            <Button icon="page-break" size="s" onClick={() => {
+                                activeEditor.dispatchCommand(INSERT_PAGE_BREAK, undefined);
+                            }}>
+                                Page Break
+                            </Button>
+                        )}
+
+                        {(canViewerSeeInsertCodeButton && (display?.insert === true || display?.insert?.code !== false)) && (
+                            <Button icon="code" size="s"
                                 disabled={!isEditable}
-                                size="s"
-                                icon="plus-circle"
-                                hint="Insert specialized editor node"
-                            >
+                                onClick={() => {
+                                    activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
+                                }}
+                                active={isCode}
+                                title="Insert code block"
+                            />
+                        )}
+
+                        {display?.insert === true || display?.insert?.image !== false && (
+                            <Button icon="image" size="s" onClick={() => {
+                                modal.show('Insert Image', InsertImageDialog, { editor: activeEditor });
+                            }}>
+                                Image
+                            </Button>
+                        )}
+
+                        {display?.insert === true || display?.insert?.inlineImage !== false && (
+                            <Button icon="image" size="s" onClick={() => {
+                                modal.show('Insert Inline Image', InsertInlineImageDialog, { editor: activeEditor });
+                            }}>
+                                Inline Image
+                            </Button>
+                        )}
+
+                        {/* <Button
+                            onClick={() => {
+                                activeEditor.dispatchCommand(
+                                    INSERT_EXCALIDRAW_COMMAND,
+                                    undefined,
+                                );
+                            }}
+                            className="item">
+                            <i className="icon diagram-2" />
+                            <span className="text">Excalidraw</span>
+                        </Button> */}
+
+                        {display?.insert === true || display?.insert?.table !== false && (
+                            <Button icon="table" size="s" onClick={() => {
+                                modal.show('Insert Table', InsertTableDialog, { editor: activeEditor });
+                            }}>
+                                Table
+                            </Button>
+                        )}
+
+                        {display?.insert === true || display?.insert?.poll !== false && (
+                            <Button icon="poll" size="s" onClick={() => {
+                                modal.show('Insert Poll', InsertPollDialog, { editor: activeEditor });
+                            }}>
+                                Poll
+                            </Button>
+                        )}
+
+                        {display?.insert === true || display?.insert?.columns !== false && (
+                            <Button icon="columns" size="s" onClick={() => {
+                                modal.show('Insert Columns Layout', InsertLayoutDialog, { editor: activeEditor });
+                            }} >
+                                Columns Layout
+                            </Button>
+                        )}
 
-                                {display?.insert === true || display?.insert?.horizontalRule !== false && (
-                                    <Button icon="horizontal-rule" size="s" onClick={() => {
-                                        activeEditor.dispatchCommand( INSERT_HORIZONTAL_RULE_COMMAND, undefined, );
-                                    }}>
-                                        Horizontal Rule
-                                    </Button>
-                                )}
-
-                                {display?.insert === true || display?.insert?.pageBreak !== false && (
-                                    <Button icon="page-break" size="s" onClick={() => {
-                                        activeEditor.dispatchCommand(INSERT_PAGE_BREAK, undefined);
-                                    }}>
-                                        Page Break
-                                    </Button>
-                                )}
-
-                                {(canViewerSeeInsertCodeButton && (display?.insert === true || display?.insert?.code !== false)) && (
-                                    <Button icon="code" size="s"
-                                        disabled={!isEditable}
-                                        onClick={() => {
-                                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
-                                        }}
-                                        active={isCode}
-                                        title="Insert code block"
+                        {/* <Button
+                            onClick={() => {
+                                modal.show('Insert Equation', (onClose) => (
+                                    <InsertEquationDialog
+                                        activeEditor={activeEditor}
+                                        onClose={onClose}
                                     />
-                                )}
-
-                                {display?.insert === true || display?.insert?.image !== false && (
-                                    <Button icon="image" size="s" onClick={() => {
-                                        modal.show('Insert Image', InsertImageDialog, { editor: activeEditor });
-                                    }}>
-                                        Image
-                                    </Button>
-                                )}
-
-                                {display?.insert === true || display?.insert?.inlineImage !== false && (
-                                    <Button icon="image" size="s" onClick={() => {
-                                        modal.show('Insert Inline Image', InsertInlineImageDialog, { editor: activeEditor });
-                                    }}>
-                                        Inline Image
-                                    </Button>
-                                )}
-
-                                {/* <Button
-                                    onClick={() => {
-                                        activeEditor.dispatchCommand(
-                                            INSERT_EXCALIDRAW_COMMAND,
-                                            undefined,
-                                        );
-                                    }}
-                                    className="item">
-                                    <i className="icon diagram-2" />
-                                    <span className="text">Excalidraw</span>
-                                </Button> */}
-
-                                {display?.insert === true || display?.insert?.table !== false && (
-                                    <Button icon="table" size="s" onClick={() => {
-                                        modal.show('Insert Table', InsertTableDialog, { editor: activeEditor });
-                                    }}>
-                                        Table
-                                    </Button>
-                                )}
-
-                                {display?.insert === true || display?.insert?.poll !== false && (
-                                    <Button icon="poll" size="s" onClick={() => {
-                                        modal.show('Insert Poll', InsertPollDialog, { editor: activeEditor });
-                                    }}>
-                                        Poll
-                                    </Button>
-                                )}
-
-                                {display?.insert === true || display?.insert?.columns !== false && (
-                                    <Button icon="columns" size="s" onClick={() => {
-                                        modal.show('Insert Columns Layout', InsertLayoutDialog, { editor: activeEditor });
-                                    }} >
-                                        Columns Layout
-                                    </Button>
-                                )}
-        
-                                {/* <Button
-                                    onClick={() => {
-                                        modal.show('Insert Equation', (onClose) => (
-                                            <InsertEquationDialog
-                                                activeEditor={activeEditor}
-                                                onClose={onClose}
-                                            />
-                                        ));
-                                    }}
-                                    className="item">
-                                    <i className="icon equation" />
-                                    <span className="text">Equation</span>
-                                </Button> */}
-
-                                {display?.insert === true || display?.insert?.stickyNote !== false && (
-                                    <Button icon="sticky-note" size="s" onClick={() => {
-                                        editor.update(() => {
-                                            const root = $getRoot();
-                                            const stickyNode = $createStickyNode(0, 0);
-                                            root.append(stickyNode);
-                                        });
-                                    }}>
-                                        Sticky Note
-                                    </Button>
-                                )}
-
-                                {display?.insert === true || display?.insert?.collapsibleContainer !== false && (
-                                    <Button icon="caret-right" size="s" onClick={() => {
-                                        editor.dispatchCommand(
-                                            INSERT_COLLAPSIBLE_COMMAND,
-                                            undefined,
-                                        );
-                                    }}>
-                                        Collapsible container
-                                    </Button>
-                                )}
-
-                                {/*EmbedConfigs.map((embedConfig) => (
-                                    <Button
-                                        key={embedConfig.type}
-                                        onClick={() => {
-                                            activeEditor.dispatchCommand(
-                                                INSERT_EMBED_COMMAND,
-                                                embedConfig.type,
-                                            );
-                                        }}>
-                                        {embedConfig.icon}
-                                        <span className="text">{embedConfig.contentName}</span>
-                                    </Button>
-                                ))*/}
-                            </DropDown>
-                        </>
-                    )}
+                                ));
+                            }}
+                            className="item">
+                            <i className="icon equation" />
+                            <span className="text">Equation</span>
+                        </Button> */}
+
+                        {display?.insert === true || display?.insert?.stickyNote !== false && (
+                            <Button icon="sticky-note" size="s" onClick={() => {
+                                editor.update(() => {
+                                    const root = $getRoot();
+                                    const stickyNode = $createStickyNode(0, 0);
+                                    root.append(stickyNode);
+                                });
+                            }}>
+                                Sticky Note
+                            </Button>
+                        )}
+
+                        {display?.insert === true || display?.insert?.collapsibleContainer !== false && (
+                            <Button icon="caret-right" size="s" onClick={() => {
+                                editor.dispatchCommand(
+                                    INSERT_COLLAPSIBLE_COMMAND,
+                                    undefined,
+                                );
+                            }}>
+                                Collapsible container
+                            </Button>
+                        )}
+
+                        {/*EmbedConfigs.map((embedConfig) => (
+                            <Button
+                                key={embedConfig.type}
+                                onClick={() => {
+                                    activeEditor.dispatchCommand(
+                                        INSERT_EMBED_COMMAND,
+                                        embedConfig.type,
+                                    );
+                                }}>
+                                {embedConfig.icon}
+                                <span className="text">{embedConfig.contentName}</span>
+                            </Button>
+                        ))*/}
+                    </DropDown>
                 </>
             )}
 

package/client/components/Rte/currentEditor.ts

@@ -3,7 +3,16 @@ import { $generateHtmlFromNodes } from '@lexical/html';
 import editorNodes from '@common/data/rte/nodes';
 import ExampleTheme from '@client/components/Rte/themes/PlaygroundEditorTheme';
 
-class RichEditorUtils {
+import { 
+    default as RteUtils, 
+    LexicalNode, 
+    LexicalState, 
+    TRenderOptions,
+    TContentAssets
+} from '@common/utils/rte';
+
+
+class RichEditorUtils extends RteUtils {
 
     public active: {
         title: string,
@@ -12,7 +21,7 @@ class RichEditorUtils {
 
     private virtualEditor: LexicalEditor | null = null;
 
-    public async jsonToHtml( value: {} ): Promise<string | null> {
+    public async jsonToHtml( value: LexicalState, options: TRenderOptions = {} ): Promise<string | null> {
 
         if (!this.virtualEditor) {
             // Create a headless Lexical editor instance
@@ -37,6 +46,26 @@ class RichEditorUtils {
         return html;
     }
 
+    protected async processContent( 
+        node: LexicalNode, 
+        parent: LexicalNode | null, 
+        callback: (node: LexicalNode, parent: LexicalNode | null) => Promise<LexicalNode>
+    ): Promise<LexicalNode> {
+        return node;
+    }
+
+    protected async transformNode( node: LexicalNode, parent: LexicalNode | null, assets: TContentAssets, options: TRenderOptions ): Promise<LexicalNode> {
+        return node;
+    }
+
+    protected async deleteUnusedFile( 
+        node: LexicalNode, 
+        assets: TContentAssets, 
+        options: NonNullable<TRenderOptions["attachements"]>
+    ): Promise<LexicalNode> {
+        return node;
+    }
+
 }
 
 export default new RichEditorUtils();

package/client/components/Rte/index.tsx

@@ -20,7 +20,8 @@ import './style.less';
 export type Props = {
     preview?: boolean,
     title: string,
-    toolbar?: TToolbarDisplay
+    toolbar?: TToolbarDisplay,
+    decorateText?: boolean
 } 
 
 /*----------------------------------

package/client/components/Rte/plugins/FloatingTextFormatToolbarPlugin/index.tsx

@@ -180,7 +180,10 @@ function TextFormatFloatingToolbar({
     }, [editor, $updateTextFormatFloatingToolbar]);
 
     return (
-        <div ref={popupCharStylesEditorRef} className="floating-text-format-popup card pd-05 row menu">
+        <div ref={popupCharStylesEditorRef} className="floating-text-format-popup card pdv-0 pdh-05 row menu" style={{
+            borderRadius: '2rem',
+            height: '4rem'
+        }}>
             {editor.isEditable() && (
                 <>
                     <Button size="s" icon="bold" active={isBold} onClick={() => {

package/common/utils/rte.ts

@@ -0,0 +1,183 @@
+
+import type Driver from '@server/services/disks/driver';
+import { Anomaly } from '@common/errors';
+
+export type LexicalNode = {
+    version: number,
+    type: string,
+    children?: LexicalNode[],
+    // Attachement
+    src?: string;
+    // Headhing
+    text?: string;
+    anchor?: string;
+    tag?: string;
+}
+
+export type LexicalState = {
+    root: LexicalNode
+}
+
+export type TRenderOptions = {
+
+    format?: 'html' | 'text', // Default = html
+    transform?: RteUtils["transformNode"],
+
+    render?: (
+        node: LexicalNode, 
+        parent: LexicalNode | null, 
+        options: TRenderOptions
+    ) => Promise<LexicalNode>,
+
+    attachements?: {
+        disk: Driver,
+        directory: string,
+        prevVersion?: string | LexicalState | null,
+    }
+}
+
+export type TSkeleton = { 
+    id: string,
+    title: string, 
+    level: number, 
+    childrens: TSkeleton 
+}[];
+
+export type TContentAssets = {
+    attachements: string[],
+    skeleton: TSkeleton
+}
+
+export default abstract class RteUtils {
+
+    public async render( 
+        content: string | LexicalState, 
+        options: TRenderOptions = {}
+    ): Promise<TContentAssets & {
+        html: string | null,
+        json: string | LexicalState,
+    }> {
+
+        // Transform content
+        const assets: TContentAssets = {
+            attachements: [],
+            skeleton: []
+        }
+
+        // Parse content if string
+        let json = this.parseState(content);
+        if (json === false)
+            return { html: '', json: content, ...assets }
+
+        // Parse prev version if string
+        if (typeof options?.attachements?.prevVersion === 'string') {
+            try {
+                options.attachements.prevVersion = JSON.parse(options.attachements.prevVersion) as LexicalState;
+            } catch (error) {
+                throw new Anomaly("Invalid JSON format for the given JSON RTE prev version.");
+            }
+        }
+
+        const root = await this.processContent(json.root, null, async (node, parent) => {
+            return await this.transformNode(node, parent, assets, options);
+        });
+
+        json = { ...json, root };
+
+        // Delete unused attachements
+        const attachementOptions = options?.attachements;
+        if (attachementOptions && attachementOptions.prevVersion !== undefined) {
+
+            await this.processContent(root, null, async (node) => {
+                return await this.deleteUnusedFile(node, assets, attachementOptions);
+            });
+        }
+
+        // Convert json to HTML
+        let html: string | null;
+        if (options.format === 'text')
+            html = await this.jsonToText( json.root );
+        else
+            html = await this.jsonToHtml( json, options );
+
+        return { html, json: content, ...assets };
+    }
+
+    private parseState( content: string | LexicalState ): LexicalState | false {
+
+        if (typeof content === 'string' && content.trim().startsWith('{')) {
+            try {
+                return JSON.parse(content) as LexicalState;
+            } catch (error) { 
+                throw new Anomaly("Invalid JSON format for the given JSON RTE content.");
+            }
+        } else if (content && typeof content === 'object' && content.root)
+            return content;
+        else
+            return false;
+        
+    }
+
+    protected jsonToText(root: LexicalNode): string {
+        let result = '';
+
+        function traverse(node: LexicalNode) {
+            switch (node.type) {
+                case 'text':
+                    // Leaf text node
+                    result += node.text ?? '';
+                    break;
+                case 'linebreak':
+                    // Explicit line break node
+                    result += '\n';
+                    break;
+                default:
+                    // Container or block node: dive into children if any
+                    if (node.children) {
+                        node.children.forEach(traverse);
+                    }
+                    // After finishing a block-level node, append newline
+                    if (isBlockNode(node.type)) {
+                        result += '\n';
+                    }
+                    break;
+            }
+        }
+
+        // Heuristic: treat these as blocks
+        function isBlockNode(type: string): boolean {
+            return [
+                'root',
+                'paragraph',
+                'heading',
+                'listitem',
+                'unorderedlist',
+                'orderedlist',
+                'quote',
+                'codeblock',
+                'table',
+            ].includes(type);
+        }
+
+        traverse(root);
+
+        // Trim trailing whitespace/newlines
+        return result.replace(/\s+$/, '');
+    }
+    
+    public abstract jsonToHtml( json: LexicalState, options: TRenderOptions ): Promise<string | null>;
+
+    protected abstract processContent( 
+        node: LexicalNode, 
+        parent: LexicalNode | null, 
+        callback: (node: LexicalNode, parent: LexicalNode | null) => Promise<LexicalNode>
+    ): Promise<LexicalNode>;
+
+    protected abstract transformNode( node: LexicalNode, parent: LexicalNode | null, assets: TContentAssets, options: TRenderOptions ): Promise<LexicalNode>;
+
+    protected abstract deleteUnusedFile( 
+        node: LexicalNode, 
+        assets: TContentAssets, 
+        options: NonNullable<TRenderOptions["attachements"]>
+    ): Promise<LexicalNode>;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.6.0-83",
+	"version": "0.6.0-85",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",

package/server/app/container/index.ts

@@ -2,6 +2,9 @@
 - DEPENDANCES
 ----------------------------------*/
 
+// Set timezone
+process.env.TZ = 'UTC';
+
 // Npm
 import path from 'path';
 

package/server/services/prisma/index.ts

@@ -37,6 +37,12 @@ export type Services = {
 export default class ModelsManager extends Service<Config, Hooks, Application> {
 
     public client = new PrismaClient();
+
+    public async ready() {
+
+        await this.client.$executeRaw`SET time_zone = '+00:00'`;
+
+    }
   
     public async shutdown() {
         await this.client.$disconnect()

package/server/utils/rte.ts

@@ -9,143 +9,39 @@ import path from 'path';
 import md5 from 'md5';
 import { fromBuffer } from 'file-type';
 import { JSDOM } from 'jsdom';
-// Lexical
-import { $getRoot } from 'lexical';
-import { createHeadlessEditor } from '@lexical/headless';
-import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 
 // Core
-import { Anomaly } from '@common/errors';
 import editorNodes from '@common/data/rte/nodes';
 import ExampleTheme from '@client/components/Rte/themes/PlaygroundEditorTheme';
-import type Driver from '@server/services/disks/driver';
 import Slug from '@server/utils/slug';
 
+// Lexical
+import { $getRoot, SerializedEditorState, SerializedLexicalNode } from 'lexical';
+import { createHeadlessEditor } from '@lexical/headless';
+import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
+
+// Specifc
+import { 
+    default as BaseRteUtils, 
+    LexicalNode, 
+    LexicalState, 
+    TRenderOptions,
+    TContentAssets,
+    TSkeleton
+} from '@common/utils/rte';
+
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
-type LexicalState = {
-    root: LexicalNode
-}
-
-export type LexicalNode = {
-    version: number,
-    type: string,
-    children?: LexicalNode[],
-    // Attachement
-    src?: string;
-    // Headhing
-    text?: string;
-    anchor?: string;
-    tag?: string;
-}
-
-type TRenderOptions = {
-
-    format?: 'html' | 'text', // Default = html
-    transform?: RteUtils["transformNode"],
-
-    render?: (
-        node: LexicalNode, 
-        parent: LexicalNode | null, 
-        options: TRenderOptions
-    ) => Promise<LexicalNode>,
-
-    attachements?: {
-        disk: Driver,
-        directory: string,
-        prevVersion?: string | LexicalState | null,
-    }
-}
-
-type TSkeleton = { 
-    id: string,
-    title: string, 
-    level: number, 
-    childrens: TSkeleton 
-}[];
-
-type TContentAssets = {
-    attachements: string[],
-    skeleton: TSkeleton
-}
 
 /*----------------------------------
 - FUNCTIONS
 ----------------------------------*/
 
-export class RteUtils {
+export class RteUtils extends BaseRteUtils {
 
-    public async render( 
-        content: string | LexicalState, 
-        options: TRenderOptions = {}
-    ): Promise<TContentAssets & {
-        html: string,
-        json: string | LexicalState,
-    }> {
-
-        // Transform content
-        const assets: TContentAssets = {
-            attachements: [],
-            skeleton: []
-        }
-
-        // Parse content if string
-        let json = this.parseState(content);
-        if (json === false)
-            return { html: '', json: content, ...assets }
-
-        // Parse prev version if string
-        if (typeof options?.attachements?.prevVersion === 'string') {
-            try {
-                options.attachements.prevVersion = JSON.parse(options.attachements.prevVersion) as LexicalState;
-            } catch (error) {
-                throw new Anomaly("Invalid JSON format for the given JSON RTE prev version.");
-            }
-        }
-
-        const root = await this.processContent(json.root, null, async (node, parent) => {
-            return await this.transformNode(node, parent, assets, options);
-        });
-
-        json = { ...json, root };
-
-        // Delete unused attachements
-        const attachementOptions = options?.attachements;
-        if (attachementOptions && attachementOptions.prevVersion !== undefined) {
-
-            await this.processContent(root, null, async (node) => {
-                return await this.deleteUnusedFile(node, assets, attachementOptions);
-            });
-        }
-
-        // Convert json to HTML
-        let html: string;
-        if (options.format === 'text')
-            html = await this.jsonToText( json.root );
-        else
-            html = await this.jsonToHtml( json, options );
-
-        return { html, json: content, ...assets };
-    }
-
-    private parseState( content: string | LexicalState ): LexicalState | false {
-
-        if (typeof content === 'string' && content.trim().startsWith('{')) {
-            try {
-                return JSON.parse(content) as LexicalState;
-            } catch (error) { 
-                throw new Anomaly("Invalid JSON format for the given JSON RTE content.");
-            }
-        } else if (content && typeof content === 'object' && content.root)
-            return content;
-        else
-            return false;
-        
-    }
-
-    private async processContent( 
+    protected async processContent( 
         node: LexicalNode, 
         parent: LexicalNode | null,
         callback: (node: LexicalNode, parent: LexicalNode | null) => Promise<LexicalNode>
@@ -165,7 +61,7 @@ export class RteUtils {
         return node;
     }
 
-    private async transformNode(
+    protected async transformNode(
         node: LexicalNode, 
         parent: LexicalNode | null, 
         assets: TContentAssets, 
@@ -266,7 +162,7 @@ export class RteUtils {
         });
     }
 
-    private async deleteUnusedFile( 
+    protected async deleteUnusedFile( 
         node: LexicalNode, 
         assets: TContentAssets,
         options: NonNullable<TRenderOptions["attachements"]>
@@ -294,7 +190,7 @@ export class RteUtils {
         return node;
     }
 
-    public async jsonToHtml( json: LexicalState, options: TRenderOptions = {} ) {
+    public async jsonToHtml( json: LexicalState, options: TRenderOptions = {} ): Promise<string | null> {
 
         // Transform before rendering
         const renderTransform = options.render;
@@ -322,7 +218,7 @@ export class RteUtils {
         });
 
         // Set the editor state from JSON
-        const state = editor.parseEditorState(json);
+        const state = editor.parseEditorState(json as SerializedEditorState<SerializedLexicalNode>);
         if (state.isEmpty())
             return '';
 
@@ -346,53 +242,6 @@ export class RteUtils {
         return html;
     }
 
-    private jsonToText(root: LexicalNode): string {
-        let result = '';
-      
-        function traverse(node: LexicalNode) {
-          switch (node.type) {
-            case 'text':
-              // Leaf text node
-              result += node.text ?? '';
-              break;
-            case 'linebreak':
-              // Explicit line break node
-              result += '\n';
-              break;
-            default:
-              // Container or block node: dive into children if any
-              if (node.children) {
-                node.children.forEach(traverse);
-              }
-              // After finishing a block-level node, append newline
-              if (isBlockNode(node.type)) {
-                result += '\n';
-              }
-              break;
-          }
-        }
-      
-        // Heuristic: treat these as blocks
-        function isBlockNode(type: string): boolean {
-          return [
-            'root',
-            'paragraph',
-            'heading',
-            'listitem',
-            'unorderedlist',
-            'orderedlist',
-            'quote',
-            'codeblock',
-            'table',
-          ].includes(type);
-        }
-      
-        traverse(root);
-      
-        // Trim trailing whitespace/newlines
-        return result.replace(/\s+$/, '');
-      }
-
     public async htmlToJson(htmlString: string): Promise<LexicalState> {
 
         const editor = createHeadlessEditor({

package/types/icons.d.ts

@@ -1 +1 @@
-export type TIcones = "times"|"solid/spinner-third"|"long-arrow-right"|"sack-dollar"|"bell"|"bullseye"|"project-diagram"|"user-friends"|"eye"|"lock"|"comments"|"phone"|"chalkboard-teacher"|"rocket"|"chart-bar"|"user-circle"|"crosshairs"|"user-shield"|"shield-alt"|"chart-line"|"money-bill-wave"|"star"|"link"|"file-alt"|"long-arrow-left"|"arrow-right"|"plus-circle"|"comments-alt"|"key"|"user"|"at"|"user-plus"|"mouse-pointer"|"thumbs-up"|"dollar-sign"|"magnet"|"paper-plane"|"plus"|"binoculars"|"brands/linkedin"|"clock"|"cog"|"trash"|"ellipsis-h"|"times-circle"|"search"|"lightbulb"|"calendar-alt"|"angle-up"|"angle-down"|"solid/crown"|"brands/discord"|"pen"|"file"|"envelope"|"coins"|"download"|"check"|"meh-rolling-eyes"|"arrow-left"|"info-circle"|"check-circle"|"exclamation-circle"|"bars"|"solid/star"|"solid/star-half-alt"|"regular/star"|"chevron-left"|"power-off"|"plane-departure"|"brands/whatsapp"|"wind"|"play"|"minus-circle"|"broom"|"exclamation-triangle"|"external-link"|"solid/check-circle"|"solid/exclamation-triangle"|"solid/times-circle"|"question-circle"|"minus"|"comment-alt"|"map-marker-alt"|"arrow-to-bottom"|"solid/magic"|"users"|"industry"|"map-marker"|"calendar"|"briefcase"|"fire"|"globe"|"magic"|"bug"|"building"|"graduation-cap"|"coin"|"unlink"|"bold"|"italic"|"underline"|"strikethrough"|"subscript"|"superscript"|"code"|"font"|"empty-set"|"horizontal-rule"|"page-break"|"image"|"table"|"poll"|"columns"|"sticky-note"|"caret-right"|"align-left"|"align-center"|"align-right"|"align-justify"|"indent"|"outdent"|"list-ul"|"check-square"|"h1"|"h2"|"h3"|"h4"|"list-ol"|"paragraph"|"quote-left"
+export type TIcones = "long-arrow-right"|"times"|"solid/spinner-third"|"sack-dollar"|"bell"|"bullseye"|"project-diagram"|"user-friends"|"eye"|"lock"|"comments"|"phone"|"chalkboard-teacher"|"rocket"|"user-circle"|"plus-circle"|"comments-alt"|"crosshairs"|"arrow-right"|"chart-bar"|"user-shield"|"shield-alt"|"chart-line"|"money-bill-wave"|"star"|"link"|"file-alt"|"long-arrow-left"|"at"|"calendar-alt"|"paper-plane"|"search"|"lightbulb"|"magnet"|"brands/linkedin"|"user-plus"|"mouse-pointer"|"thumbs-up"|"dollar-sign"|"key"|"user"|"plus"|"clock"|"cog"|"trash"|"ellipsis-h"|"sync"|"times-circle"|"binoculars"|"solid/crown"|"brands/discord"|"pen"|"file"|"envelope"|"angle-up"|"angle-down"|"coins"|"download"|"check"|"info-circle"|"check-circle"|"exclamation-circle"|"arrow-left"|"meh-rolling-eyes"|"bars"|"solid/star"|"solid/star-half-alt"|"regular/star"|"chevron-left"|"power-off"|"play"|"minus-circle"|"external-link"|"question-circle"|"users"|"bug"|"plane-departure"|"brands/whatsapp"|"wind"|"solid/check-circle"|"solid/exclamation-triangle"|"solid/times-circle"|"broom"|"minus"|"coin"|"exclamation-triangle"|"comment-alt"|"arrow-to-bottom"|"map-marker-alt"|"briefcase"|"map-marker"|"fire"|"solid/magic"|"industry"|"calendar"|"globe"|"magic"|"building"|"graduation-cap"|"bold"|"italic"|"underline"|"strikethrough"|"subscript"|"superscript"|"code"|"unlink"|"font"|"empty-set"|"horizontal-rule"|"page-break"|"image"|"table"|"poll"|"columns"|"sticky-note"|"caret-right"|"list-ul"|"check-square"|"h1"|"h2"|"h3"|"h4"|"list-ol"|"paragraph"|"quote-left"|"align-left"|"align-center"|"align-right"|"align-justify"|"indent"|"outdent"|"shield-check"|"regular/shield-check"