5htp-core 0.5.1-2 → 0.5.1-4

package/package.json

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

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

@@ -43,12 +43,12 @@
     align-items: center;
     justify-content: center;
     vertical-align: middle;
-    border-radius: @radius;
+    border-radius: 1rem;
 
     line-height: 1.5;
     text-align: left;
     
-    padding: 0.4em @spacing;
+    padding: 0.4em 0.8em;
 
     background: var(--cBgActive);
 }

package/src/client/components/inputv3/Rte/nodes/ImageNode.tsx

@@ -124,6 +124,7 @@ export class ImageNode extends DecoratorNode<React.JSX.Element> {
 
         const img = document.createElement('img');
         figure.appendChild(img);
+        img.setAttribute('loading', "lazy");
         img.setAttribute('src', this.__src);
         img.setAttribute('alt', this.__altText);
         img.setAttribute('width', this.__width.toString());

package/src/client/components/inputv3/Rte/nodes/ReferenceLinkNode.tsx

@@ -0,0 +1,56 @@
+
+import { HeadingNode, HeadingTagType } from '@lexical/rich-text';
+import { AutoLinkNode, LinkNode } from '@lexical/link';
+
+export default class ReferenceLinkNode extends LinkNode {
+
+    public referenceTo?: string; 
+
+    // Adding a static method to register the custom node
+    static getType() {
+        return 'reference-link';
+    }
+
+    static clone(node) {
+        return new ReferenceLinkNode(node.__url, {
+            rel: node.__rel,
+            target: node.__target,
+            title: node.__title
+          }, node.__key);
+    }
+
+    // Add a `referenceTo` attribute to the serialized JSON
+    static importJSON(serializedNode) {
+        const node = new ReferenceLinkNode(serializedNode.url);
+        node.referenceTo = serializedNode.referenceTo;
+        return node;
+    }
+
+    // Ensure the `referenceTo` attribute is serialized in JSON
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: ReferenceLinkNode.getType(),
+            referenceTo: this.referenceTo
+        };
+    }
+
+    // Override createDOM to set the `referenceTo` attribute
+    createDOM(config) {
+        const dom = super.createDOM(config);
+        if (this.referenceTo) {
+            dom.setAttribute('class', this.referenceTo);
+        }
+        return dom;
+    }
+
+    // Update the DOM to reflect changes in the `referenceTo` attribute
+    updateDOM(prevNode, dom, config) {
+        const updated = super.updateDOM(prevNode, dom, config);
+        if (this.referenceTo !== prevNode.referenceTo) {
+            dom.setAttribute('class', this.referenceTo);
+            return true;
+        }
+        return updated;
+    }
+}

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

@@ -36,6 +36,7 @@ import { TweetNode } from '@client/components/inputv3/Rte/nodes/TweetNode';
 import { YouTubeNode } from '@client/components/inputv3/Rte/nodes/YouTubeNode';
 
 import HeadingWithAnchorNode from '@client/components/inputv3/Rte/nodes/HeadingNode';
+import ReferenceLinkNode from '@client/components/inputv3/Rte/nodes/ReferenceLinkNode';
 
 const PlaygroundNodes: Array<Klass<LexicalNode>> = [
     /*HeadingNode, */HeadingWithAnchorNode,
@@ -74,6 +75,9 @@ const PlaygroundNodes: Array<Klass<LexicalNode>> = [
     PageBreakNode,
     LayoutContainerNode,
     LayoutItemNode,
+
+    // Custom
+    ReferenceLinkNode
 ];
 
 export default PlaygroundNodes;

package/src/server/utils/rte.ts

@@ -42,6 +42,15 @@ type LexicalNode = {
 }
 
 type TRenderOptions = {
+
+    transform?: RteUtils["transformNode"],
+
+    render?: (
+        node: LexicalNode, 
+        parent: LexicalNode | null, 
+        options: TRenderOptions
+    ) => Promise<LexicalNode>,
+
     attachements?: {
         disk: Driver,
         directory: string,
@@ -103,8 +112,8 @@ export class RteUtils {
             }
         }
 
-        const root = await this.processContent(json.root, async (node) => {
-            return await this.transformNode(node, assets, options);
+        const root = await this.processContent(json.root, null, async (node, parent) => {
+            return await this.transformNode(node, parent, assets, options);
         });
 
         json = { ...json, root };
@@ -113,29 +122,30 @@ export class RteUtils {
         const attachementOptions = options?.attachements;
         if (attachementOptions && attachementOptions.prevVersion !== undefined) {
 
-            await this.processContent(root, async (node) => {
+            await this.processContent(root, null, async (node) => {
                 return await this.deleteUnusedFile(node, assets, attachementOptions);
             });
         }
 
         // Convert json to HTML
-        const html = await this.jsonToHtml( json );
+        const html = await this.jsonToHtml( json, options );
 
         return { html, json: content, ...assets };
     }
 
     private async processContent( 
         node: LexicalNode, 
-        callback: (node: LexicalNode) => Promise<LexicalNode>
+        parent: LexicalNode | null,
+        callback: (node: LexicalNode, parent: LexicalNode | null) => Promise<LexicalNode>
     ) {
 
-        node = await callback(node);
+        node = await callback(node, parent);
 
         // Recursion
         if (node.children) {
             for (let i = 0; i < node.children.length; i++) {
 
-                node.children[ i ] = await this.processContent( node.children[ i ], callback );
+                node.children[ i ] = await this.processContent( node.children[ i ], node, callback );
 
             }
         }
@@ -143,23 +153,34 @@ export class RteUtils {
         return node;
     }
 
-    private async transformNode(node: LexicalNode, assets: TContentAssets, options: TRenderOptions) {
+    private async transformNode(
+        node: LexicalNode, 
+        parent: LexicalNode | null, 
+        assets: TContentAssets, 
+        options: TRenderOptions
+    ): Promise<LexicalNode> {
 
-        // Attachment: Upload attachments and replace blobs by URLs
+        // Images and files
         if (node.type === 'image' || node.type === 'file') {
 
+            // Upload images and files and replace blobs by URLs
             await this.processAttachement(
                 node as With<LexicalNode, 'src'>,
                 assets,
                 options,
             );
 
+        // Headings
         } else if (node.type === 'anchored-heading') {
 
+            // Create skeleton
             await this.processHeading(node, assets);
 
         }
 
+        if (options.transform)
+            node = await options.transform(node, parent, assets, options);
+
         return node;
     }
 
@@ -261,7 +282,17 @@ export class RteUtils {
         return node;
     }
 
-    public async jsonToHtml( json: LexicalState ) {
+    public async jsonToHtml( json: LexicalState, options: TRenderOptions = {} ) {
+
+        // Transform before rendering
+        const renderTransform = options.render;
+        if (renderTransform)
+            json = {
+                ...json,
+                root: await this.processContent(json.root, null, async (node, parent) => {
+                    return await renderTransform(node, parent, options);
+                })
+            }
 
         // Server side: simulate DOM environment
         const dom = new JSDOM(`<!DOCTYPE html><body></body>`);