Supporting images and making refactoring to text variations

shawkyebrahim2514 · Dec 2, 2024 · e887bef · e887bef
1 parent 970abce
commit e887bef
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 17 deletions.
diff --git a/react-frontend/src/components/HTMLMarkdown/customPlugins.ts b/react-frontend/src/components/HTMLMarkdown/customPlugins.ts
@@ -1,7 +1,7 @@
 import { findAndReplace } from 'mdast-util-find-and-replace'
 import { visit } from 'unist-util-visit';
 import type { Node } from 'hast'
-import { Nodes, Blockquote, Parent } from 'mdast'
+import { Nodes, Blockquote, Parent, Image, Root, RootContent, Paragraph } from 'mdast'
 import { toString } from 'mdast-util-to-string'
 
 export const prepareBlockQuotes = () => {
@@ -33,25 +33,25 @@ export const prepareBlockQuotes = () => {
 
 const textVariationsRegexReplace = {
     button: {
-        regex: /\[\[([a-zA-Z0-9\s]+)\]\]/g,
+        regex: /\[\[([a-zA-Z0-9\s]+)\]\]/,
         replace: {
             className: 'button',
         }
     },
     highlightAreaWithSecondaryColor: {
-        regex: /!-(.*?)-!/g, // /!-([a-zA-Z0-9\s]+)-!/g
+        regex: /!-(.*?)-!/,
         replace: {
             className: 'highlight-area secondary',
         }
     },
     highlightTextWithSecondaryColor: {
-        regex: /!(.*?)!/g, // /!([a-zA-Z0-9\s]+)!/g
+        regex: /!(.*?)!/,
         replace: {
             className: 'secondary',
         }
     },
     highlightAreaWithBaseColor: {
-        regex: /-(.*?)-/g, // /-([a-zA-Z0-9\s]+)-/g
+        regex: /-(.*?)-/,
         replace: {
             className: 'highlight-area',
         }
@@ -62,7 +62,6 @@ const handleVariationReplace = (variation: typeof textVariationsRegexReplace[key
     findAndReplace(node, [
         variation.regex,
         (fullText: any, content: any) => {
-            console.log('content', content);
             return {
                 type: 'strong',
                 children: [
@@ -105,4 +104,95 @@ export const prepareTextVariations = () => {
             }
         })
     }
+};
+
+// let imageRegex = /!\[([^\]]+)\]\(([^ ]+)\s*=\s*(\d+)x?(\d+)?\|?([^\)]+)?\)/;
+let imageRegex = /!\[([^\]]+)\]\(([^ ]+)\s?(?:=(\d+)x?(\d+)?)?(?:\|((?:center|left|right)+))?\)/;
+
+const imageNodeStyle: React.CSSProperties = ({
+    maxWidth: `100%`,
+    maxHeight: `100%`
+});
+
+const imageWrapperNodeStyle = (width: number, height: number): React.CSSProperties => ({
+    flexGrow: 1,
+    maxWidth: width ? `${width}px` : '100%',
+    maxHeight: height ? `${height}px` : '100%',
+});
+
+const alignToFlex = (align: string): string => {
+    if (align === 'center') {
+        return 'center';
+    } else if (align === 'right') {
+        return 'flex-end';
+    } else {
+        return 'flex-start';
+    }
+}
+
+const imageContainerStyle = (align: string): React.CSSProperties => {
+    return {
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: alignToFlex(align),
+        gap: '10px',
+    }
+}
+
+export const customImagePlugin = () => {
+    return function (tree: Nodes) {
+        visit(tree, 'paragraph', (node: Nodes) => {
+            let nodeFullText = toString(node);
+            const match = imageRegex.exec(nodeFullText);
+            if (match) {
+                console.log('match', match);
+                const fragments = nodeFullText.split(imageRegex);
+                const currentNode = node as Parent;
+                const imageNodes: RootContent[] = [];
+                let align: string = 'left';
+                for (let i = 0; i < (fragments.length - 1) / 6; i++) {
+                    const range = i * 6;
+                    const altText = fragments[range + 1];
+                    const url = fragments[range + 2];
+                    const width = fragments[range + 3];
+                    const height = fragments[range + 4];
+                    align = fragments[range + 5];
+                    const imageNode: Image = {
+                        type: 'image',
+                        url: url,
+                        alt: altText,
+                        data: {
+                            hProperties: {
+                                className: 'image',
+                                style: Object.entries(imageNodeStyle)
+                                    .map(([key, value]) => `${key}: ${value}`)
+                                    .join('; '),
+                            }
+                        }
+                    };
+                    imageNodes.push({
+                        type: 'paragraph',
+                        children: [imageNode],
+                        data: {
+                            hProperties: {
+                                className: 'image-container',
+                                style: Object.entries(imageWrapperNodeStyle(parseInt(width), parseInt(height)))
+                                    .map(([key, value]) => `${key}: ${value}`)
+                                    .join('; ')
+                            }
+                        }
+                    });
+                }
+                currentNode.children = imageNodes;
+                currentNode.data = {
+                    hProperties: {
+                        className: 'image',
+                        style: Object.entries(imageContainerStyle(align))
+                            .map(([key, value]) => `${key}: ${value}`)
+                            .join('; '),
+                    }
+                }
+            }
+        })
+    };
 };
diff --git a/react-frontend/src/components/HTMLMarkdown/index.tsx b/react-frontend/src/components/HTMLMarkdown/index.tsx
@@ -10,7 +10,7 @@ import HeadingMarkdown from './HeadingMarkdown';
 import SpanMarkdown from './SpanMarkdown';
 import BlockquoteMarkdown from './BlockquoteMarkdown';
 import AncherLinkMarkdown from './AncherLinkMarkdown';
-import { prepareBlockQuotes, prepareTextVariations } from './customPlugins';
+import { prepareBlockQuotes, prepareTextVariations, customImagePlugin } from './customPlugins';
 
 type Props = {
     readonly markdown: string
@@ -40,8 +40,9 @@ function HTMLMarkdown({ markdown }: Props) {
                 remarkBreaks,
                 remarkDirective,
                 remarkDirectiveRehype,
+                customImagePlugin,
                 prepareBlockQuotes,
-                prepareTextVariations
+                prepareTextVariations,
             ]}
             components={markdownComponents}>
             {markdown}

diff --git a/react-frontend/src/index.css b/react-frontend/src/index.css
@@ -1,17 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500;800&display=swap');
 @import url('https://fonts.cdnfonts.com/css/omnes-2');
-@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');
 
 body {
   margin: 0;
-  /* font-family: 'Roboto', sans-serif; */
-  /* font-family: 'Open Sans', sans-serif; */
   font-family: 'Omnes', sans-serif;
-  /* font-family: 'M PLUS Rounded 1c', sans-serif; */
-  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif; */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   min-height: 100vh;