fix(visual): truncate headings, escape HTML in orama (#460)

Author: avivkeller

src/generators/orama-db/index.mjs

@@ -77,7 +77,9 @@ export default {
 
         return {
           title: hierarchicalTitle,
-          description: paragraph ? transformNodeToString(paragraph) : undefined,
+          description: paragraph
+            ? transformNodeToString(paragraph, true)
+            : undefined,
           path: `${entry.api}.html#${entry.slug}`,
         };
       })

src/generators/web/ui/index.css

@@ -34,6 +34,18 @@ main {
     align-items: center;
     gap: 8px;
 
+    > h1,
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6 {
+      flex: 1;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
     .change-history {
       margin-left: auto;
     }

src/utils/unist.mjs

@@ -2,27 +2,37 @@
 
 import { pointEnd, pointStart } from 'unist-util-position';
 
+/**
+ * Escapes HTML entities ("<" and ">") in a string
+ * @param {string} string The string
+ */
+const escapeHTMLEntities = string =>
+  string.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
 /**
  * Extracts text content from a node recursively
  *
  * @param {import('unist').Node} node The Node to be transformed into a string
+ * @param {boolean} [escape] Escape HTML entities ("<", ">")?
  * @returns {string} The transformed Node as a string
  */
-export const transformNodeToString = node => {
+export const transformNodeToString = (node, escape) => {
   switch (node.type) {
     case 'inlineCode':
-      return `\`${node.value}\``;
+      return `\`${escape ? escapeHTMLEntities(node.value) : node.value}\``;
     case 'strong':
-      return `**${transformNodesToString(node.children)}**`;
+      return `**${transformNodesToString(node.children, escape)}**`;
     case 'emphasis':
-      return `_${transformNodesToString(node.children)}_`;
+      return `_${transformNodesToString(node.children, escape)}_`;
     default: {
       if (node.children) {
-        return transformNodesToString(node.children);
+        return transformNodesToString(node.children, escape);
       }
 
+      const string = node.value?.replace(/\n/g, ' ') || '';
+
       // Replace line breaks (\n) with spaces to keep text in a single line
-      return node.value?.replace(/\n/g, ' ') || '';
+      return escape ? escapeHTMLEntities(string) : string;
     }
   }
 };
@@ -32,10 +42,11 @@ export const transformNodeToString = node => {
  * and transfor them back to what their source would look like
  *
  * @param {Array<import('unist').Parent & import('unist').Literal>} nodes Nodes to parsed and joined
+ * @param {boolean} [escape] Escape HTML entities ("<", ">")?
  * @returns {string} The parsed and joined nodes as a string
  */
-export const transformNodesToString = nodes => {
-  const mappedChildren = nodes.map(node => transformNodeToString(node));
+export const transformNodesToString = (nodes, escape) => {
+  const mappedChildren = nodes.map(node => transformNodeToString(node, escape));
 
   return mappedChildren.join('');
 };