5htp-core 0.4.8-2 → 0.4.8-3

package/package.json

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

package/src/client/components/inputv3/Rte/currentEditor.ts

@@ -0,0 +1,40 @@
+import { createEditor, LexicalEditor } from 'lexical';
+import { $generateHtmlFromNodes } from '@lexical/html';
+import editorNodes from '@common/data/rte/nodes';
+
+class RichEditorUtils {
+
+    public active: {
+        title: string,
+        close: () => void
+    } | null = null;
+
+    private virtualEditor: LexicalEditor | null = null;
+
+    public async jsonToHtml( value: {} ): Promise<string | null> {
+
+        if (!this.virtualEditor) {
+            // Create a headless Lexical editor instance
+            this.virtualEditor = createEditor({
+                nodes: editorNodes
+            });
+        }
+
+        // Set the editor state from JSON
+        const state = this.virtualEditor.parseEditorState(value);
+        if (state.isEmpty())
+            return null;
+
+        this.virtualEditor.setEditorState(state);
+
+        // Generate HTML from the Lexical nodes
+        const html = await this.virtualEditor.getEditorState().read(() => {
+            return $generateHtmlFromNodes(this.virtualEditor);
+        });
+
+        return html;
+    }
+
+}
+
+export default new RichEditorUtils();

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

@@ -5,7 +5,8 @@
 // Npm
 import React from 'react';
 
-import { EditorState, $getRoot } from 'lexical';
+import { EditorState, createEditor } from 'lexical';
+import { $generateHtmlFromNodes } from '@lexical/html';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
@@ -14,6 +15,7 @@ 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';
 
 // Core libs
 import { useInput, InputBaseProps, InputWrapper } from '../base';
@@ -31,7 +33,7 @@ const EMPTY_STATE = '{"root":{"children":[{"children":[],"direction":null,"forma
 ----------------------------------*/
 
 export type Props = {
-    onPressEnter?: (value: string) => void,
+    preview?: boolean,
 } 
 
 const ValueControlPlugin = ({ props, value }) => {
@@ -52,21 +54,25 @@ const ValueControlPlugin = ({ props, value }) => {
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
-export default (props: Props & InputBaseProps<{}>) => {
+export default (props: Props & InputBaseProps<string>) => {
 
     let {
         // Decoration
         required, size, title, className = '',
         // State
-        inputRef, errors,
+        errors,
         // Actions
-        onPressEnter
+        preview = true
     } = props;
 
     /*----------------------------------
     - INIT
     ----------------------------------*/
 
+    const [isPreview, setIsPreview] = React.useState(preview);
+
+    const [html, setHTML] = React.useState();
+
     const [{ value }, setValue] = useInput(props, EMPTY_STATE, true);
 
     // Trigger onchange oly when finished typing
@@ -78,16 +84,52 @@ export default (props: Props & InputBaseProps<{}>) => {
     - ACTIONS
     ----------------------------------*/
 
+    React.useEffect(async () => {
+
+        if (isPreview)
+            renderPreview(value);
+        
+    }, [value, isPreview]);
+
+    // When isPreview changes, close the active editor
+    React.useEffect(() => {
+        if (!isPreview) {
+
+            // Close active editor
+            if (RichEditorUtils.active && RichEditorUtils.active?.title !== title)
+                RichEditorUtils.active.close();
+
+            // Set active editor
+            RichEditorUtils.active = {
+                title,
+                close: () => setIsPreview(true)
+            }
+
+        }
+    }, [isPreview]);
+
+    const renderPreview = async (value: {}) => {
+
+        if (typeof document === 'undefined')
+            throw new Error("HTML preview disabled in server side.");
+
+        const html = await RichEditorUtils.jsonToHtml(value);
+
+        setHTML(html);
+    }
+
     const onChange = (editorState: EditorState) => {
         editorState.read(() => {
 
-            const stateJson = editorState.toJSON();
-
             if (refCommit.current !== null)
                 clearTimeout(refCommit.current);
     
             refCommit.current = setTimeout(() => {
+
+                const stateJson = JSON.stringify(editorState.toJSON());
+
                 setValue(stateJson);
+
             }, 100);
         });
     };
@@ -99,9 +141,20 @@ export default (props: Props & InputBaseProps<{}>) => {
         <InputWrapper {...props}>
             <div class={className}>
 
-                {typeof window !== 'undefined' && (
+                {isPreview ? (
+
+                    !html ? (
+                        <div class="col al-center h-4">
+                            <i src="spin" />
+                        </div>
+                    ) : (
+                        <div class="h-4 scrollable col clickable" 
+                            onClick={() => setIsPreview(false)}
+                            dangerouslySetInnerHTML={{ __html: html }} />
+                    )
+
+                ) : typeof window !== 'undefined' && (
                     <LexicalComposer initialConfig={{
-                        namespace: 'React.js Demo',
                         editorState: value || EMPTY_STATE,
                         nodes: editorNodes,
                         // Handling of errors during update
@@ -125,7 +178,7 @@ export default (props: Props & InputBaseProps<{}>) => {
                                     ErrorBoundary={LexicalErrorBoundary}
                                 />
                                 <HistoryPlugin />
-                                {/* <AutoFocusPlugin /> */}
+                                <AutoFocusPlugin />
                                 <OnChangePlugin onChange={onChange} />
                                 <ValueControlPlugin props={props} value={value} />
                             </div>

package/src/common/validation/validators.ts

@@ -354,6 +354,13 @@ export default class SchemaValidators {
         
     } = {}) => new Validator<string>('richText', (val, options, path) => {
 
+        // We get a stringified json as input since the editor workds with JSON string
+        try {
+            val = JSON.parse(val);
+        } catch (error) {
+            throw new InputError("Invalid rich text format.");
+        }
+
         // 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).");

package/src/{common/data/rte/index.ts → server/utils/rte.ts}

@@ -1,26 +1,33 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
 import { createHeadlessEditor } from '@lexical/headless';
-import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html'; 
+import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { $getRoot } from 'lexical';
-
 import { JSDOM } from 'jsdom';
 
-import editorNodes from './nodes';
+// Core
+import editorNodes from '@common/data/rte/nodes';
 
+/*----------------------------------
+- FUNCTIONS
+----------------------------------*/
 export const htmlToJson = async (htmlString: string) => {
 
-    const editor = createHeadlessEditor({ 
-        nodes: editorNodes 
+    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);
+        const lexicalNodes = $generateNodesFromDOM(editor, dom ? dom.window.document : window.document);
 
         lexicalNodes.forEach((node) => root.append(node));
     });
@@ -30,18 +37,19 @@ export const htmlToJson = async (htmlString: string) => {
 };
 
 export const jsonToHtml = async (jsonString: string) => {
-    
 
+    // Server side: simulate DOM environment
     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,
+        nodes: editorNodes
     });
 
     // Set the editor state from JSON
@@ -49,14 +57,14 @@ export const jsonToHtml = async (jsonString: string) => {
     if (state.isEmpty())
         return null;
 
-    editor.setEditorState( state );
+    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
+    });
+
+        // Clean up global variables set for JSDOM to avoid memory leaks
     delete global.window;
     delete global.document;
     delete global.DOMParser;