Enhance tooltip rendering in remark-info-tooltip component by adding support for text before and after tooltips; refactor text node handling to improve structure and maintainability.

Author: devhelpr

src/components/remark-info-tooltip.tsx

@@ -14,6 +14,8 @@ interface ParentNode extends Node {
 interface CustomElementData extends ElementData {
     hProperties?: {
         tooltip?: string;
+        textBefore?: string;
+        textAfter?: string;
     };
 }
 
@@ -28,59 +30,77 @@ export function remarkInfoTooltip() {
                 );
 
                 if (matches) {
+                    let lastIndex = 0;
+                    const newChildren: Node[] = [];
+
                     matches.forEach(match => {
                         const tooltipMatch = match.match(
                             /\{tooltip:([^}]+)\}(.*?)\{\/tooltip\}/
                         );
                         if (tooltipMatch) {
                             const [, tooltipContent, text] = tooltipMatch;
-                            const index = node.value.indexOf(match);
-                            if (index !== -1) {
-                                // Create a new element node
-                                const elementNode: Element = {
-                                    type: 'element',
-                                    tagName: 'div',
-                                    properties: {
+                            const index = node.value.indexOf(match, lastIndex);
+
+                            // Add text before the tooltip
+                            const textBefore = node.value.slice(
+                                lastIndex,
+                                index
+                            );
+                            if (textBefore) {
+                                const textNode: TextNode = {
+                                    type: 'text',
+                                    value: textBefore,
+                                };
+                                newChildren.push(textNode);
+                            }
+
+                            // Create a new element node for the tooltip
+                            const elementNode: Element = {
+                                type: 'element',
+                                tagName: 'span',
+                                properties: {
+                                    tooltip: tooltipContent,
+                                },
+                                data: {
+                                    hProperties: {
                                         tooltip: tooltipContent,
-                                        // textBefore: node.value.slice(0, index),
-                                        // textAfter: node.value.slice(
-                                        //     index + match.length
-                                        // ),
                                     },
-                                    data: {
-                                        hProperties: {
-                                            tooltip: tooltipContent,
-                                            textBefore: node.value.slice(
-                                                0,
-                                                index
-                                            ),
-                                            textAfter: node.value.slice(
-                                                index + match.length
-                                            ),
-                                        },
-                                    } as CustomElementData,
-                                    children: [
-                                        {
-                                            type: 'text',
-                                            value: text,
-                                        },
-                                    ],
-                                };
+                                } as CustomElementData,
+                                children: [
+                                    {
+                                        type: 'text',
+                                        value: text,
+                                    } as TextNode,
+                                ],
+                            };
+                            newChildren.push(elementNode);
 
-                                // Replace the text node with the element node
-                                if (ancestors.length > 0) {
-                                    const parent =
-                                        ancestors[ancestors.length - 1];
-                                    const nodeIndex =
-                                        parent.children.indexOf(node);
-                                    if (nodeIndex !== -1) {
-                                        parent.children[nodeIndex] =
-                                            elementNode;
-                                    }
-                                }
-                            }
+                            lastIndex = index + match.length;
                         }
                     });
+
+                    // Add any remaining text after the last tooltip
+                    const remainingText = node.value.slice(lastIndex);
+                    if (remainingText) {
+                        const textNode: TextNode = {
+                            type: 'text',
+                            value: remainingText,
+                        };
+                        newChildren.push(textNode);
+                    }
+
+                    // Replace the text node with the new children
+                    if (ancestors.length > 0) {
+                        const parent = ancestors[ancestors.length - 1];
+                        const nodeIndex = parent.children.indexOf(node);
+                        if (nodeIndex !== -1) {
+                            parent.children.splice(
+                                nodeIndex,
+                                1,
+                                ...newChildren
+                            );
+                        }
+                    }
                 }
             }
         );