@eccenca/gui-elements 23.5.0 → 23.6.0-rc.1

package/src/cmem/markdown/Markdown.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
-import rehypeRaw from "rehype-raw";
-import remarkGfm from "remark-gfm";
+import { PluggableList } from "react-markdown/lib/react-markdown";
 //@ts-ignore
 import remarkTypograf from "@mavrin/remark-typograf";
-import {remarkDefinitionList} from 'remark-definition-list';
-import { PluggableList } from "react-markdown/lib/react-markdown";
-import {HtmlContentBlock, TestableComponent} from "../../index";
+import rehypeRaw from "rehype-raw";
+import { remarkDefinitionList } from "remark-definition-list";
+import remarkGfm from "remark-gfm";
+
+import { HtmlContentBlock, TestableComponent } from "../../index";
 
 export interface MarkdownProps extends TestableComponent {
     children: string;
@@ -53,17 +54,44 @@ const configDefault = {
     rehypePlugins: [] as PluggableList,
     allowedElements: [
         // default markdown
-        "a", "blockquote", "code", "em", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "img", "li", "ol", "p", "pre", "strong", "ul",
+        "a",
+        "blockquote",
+        "code",
+        "em",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "hr",
+        "img",
+        "li",
+        "ol",
+        "p",
+        "pre",
+        "strong",
+        "ul",
         // gfm (Github Flavoured Markdown) extensions
-        "del", "input", "table", "tbody", "td", "th", "thead", "tr",
+        "del",
+        "input",
+        "table",
+        "tbody",
+        "td",
+        "th",
+        "thead",
+        "tr",
         // other stuff
-        "mark", "dl", "dt", "dd"
+        "mark",
+        "dl",
+        "dt",
+        "dd",
     ],
     // remove all unwanted HTML markup
     unwrapDisallowed: true,
     // show escaped HTML
     skipHtml: false,
-}
+};
 
 /** Renders a markdown string. */
 export const Markdown = ({
@@ -76,40 +104,46 @@ export const Markdown = ({
     linkTargetName = "_mdref",
     ...otherProps
 }: MarkdownProps) => {
+    const configHtml = allowHtml
+        ? {
+              rehypePlugins: [...configDefault.rehypePlugins].concat([rehypeRaw]),
+              // switch from allowed list to disallowed list
+              allowedElements: undefined,
+              disallowedElements: ["applet", "script", "style", "link", "iframe", "form", "button"],
+          }
+        : {};
 
-    const configHtml = allowHtml ? {
-        rehypePlugins: [...configDefault.rehypePlugins].concat([rehypeRaw]),
-        // switch from allowed list to disallowed list
-        allowedElements: undefined,
-        disallowedElements: [ "applet", "script", "style", "link", "iframe", "form", "button" ],
-    } : { };
-
-    const configTextOnly = removeMarkup ? {
-        skipHtml: true,
-        allowedElements: [],
-        disallowedElements: undefined,
-    } : { };
+    const configTextOnly = removeMarkup
+        ? {
+              skipHtml: true,
+              allowedElements: [],
+              disallowedElements: undefined,
+          }
+        : {};
 
     const reactMarkdownProperties = {
         children: children.trim(),
         ...configDefault,
         ...configHtml,
         ...configTextOnly,
-        linkTarget: linkTargetName ? (href: string, _children: any, _title: string) => {
-            const linkTarget = href.charAt(0) !== "#" ? linkTargetName : "";
-            return linkTarget as React.HTMLAttributeAnchorTarget;
-        } : undefined,
+        linkTarget: linkTargetName
+            ? (href: string, _children: any, _title: string) => {
+                  const linkTarget = href.charAt(0) !== "#" ? linkTargetName : "";
+                  return linkTarget as React.HTMLAttributeAnchorTarget;
+              }
+            : undefined,
     };
-    allowedElements && (reactMarkdownProperties.allowedElements = allowedElements)
-    reHypePlugins && reHypePlugins.forEach(plugin => reactMarkdownProperties.rehypePlugins = [...reactMarkdownProperties.rehypePlugins, plugin])
+    allowedElements && (reactMarkdownProperties.allowedElements = allowedElements);
+    reHypePlugins &&
+        reHypePlugins.forEach(
+            (plugin) => (reactMarkdownProperties.rehypePlugins = [...reactMarkdownProperties.rehypePlugins, plugin])
+        );
 
     // @ts-ignore because against the lib spec it does not allow a function for linkTarget.
-    const markdownDisplay = <ReactMarkdown {...reactMarkdownProperties} />
+    const markdownDisplay = <ReactMarkdown {...reactMarkdownProperties} />;
     return inheritBlock ? (
         markdownDisplay
     ) : (
-        <HtmlContentBlock data-test-id={otherProps["data-test-id"]} >
-            { markdownDisplay }
-        </HtmlContentBlock>
+        <HtmlContentBlock data-test-id={otherProps["data-test-id"]}>{markdownDisplay}</HtmlContentBlock>
     );
-}
+};

package/src/cmem/markdown/highlightSearchWords.test.ts

@@ -1,36 +1,37 @@
-import {VFile} from "vfile";
-import {Root, Parent, Element, Text} from "hast";
+import { Element, Parent, Root, Text } from "hast";
+import { VFile } from "vfile";
+
 import highlightSearchWordsPluginFactory from "./highlightSearchWords";
 
 describe("Highlight search words reHype plugin", () => {
     it("should highlight search words", () => {
-        const searchQuery = "abc xyz"
-        const highlightSearchWordsPlugin = highlightSearchWordsPluginFactory(searchQuery)
-        const highlightSearchWordTransformer = highlightSearchWordsPlugin()
-        const textNode = (text: string): Text => ({type: "text", value: text})
-        const markNode = (text: string): Element => ({type: "element", tagName: "mark", children: [textNode(text)]})
-        const result = highlightSearchWordTransformer({
+        const searchQuery = "abc xyz";
+        const highlightSearchWordsPlugin = highlightSearchWordsPluginFactory(searchQuery);
+        const highlightSearchWordTransformer = highlightSearchWordsPlugin();
+        const textNode = (text: string): Text => ({ type: "text", value: text });
+        const markNode = (text: string): Element => ({ type: "element", tagName: "mark", children: [textNode(text)] });
+        const result = highlightSearchWordTransformer(
+            {
                 type: "root",
                 children: [
                     {
                         type: "element",
                         tagName: "p",
-                        children: [textNode("Text with abc query words xyz.")]
-                    }
-                ]
+                        children: [textNode("Text with abc query words xyz.")],
+                    },
+                ],
             },
             new VFile(),
-            () => {
-            }
+            () => {}
         );
-        const rootChildren = (result as Root).children
-        expect(rootChildren.length).toBe(1)
+        const rootChildren = (result as Root).children;
+        expect(rootChildren.length).toBe(1);
         expect((rootChildren[0] as Parent).children).toStrictEqual([
             textNode("Text with "),
             markNode("abc"),
             textNode(" query words "),
             markNode("xyz"),
-            textNode(".")
-        ])
-    })
-})
+            textNode("."),
+        ]);
+    });
+});

package/src/cmem/markdown/highlightSearchWords.ts

@@ -1,16 +1,13 @@
-import {Content, Parent, Root, Text} from "hast";
-import {Transformer} from "unified"
-import {Node} from "unist";
+import { Content, Parent, Root, Text } from "hast";
+import { Transformer } from "unified";
+import { Node } from "unist";
+
 import { highlighterUtils } from "../../components/Typography/Highlighter";
 
-/**
- * Creates a react-markdown reHype plugin that marks text based on a multi-word search query.
- * @deprecated moved to `markdownUtils.highlightSearchWordsPluginFactory`
- */
-export default function highlightSearchWordsPluginFactory(searchQuery: string | undefined) {
-    const searchStringParts = searchQuery ? highlighterUtils.extractSearchWords(searchQuery) : []
+const highlightSearchWordsPluginFactoryFn = (searchQuery: string | undefined) => {
+    const searchStringParts = searchQuery ? highlighterUtils.extractSearchWords(searchQuery) : [];
     const multiWordRegex = highlighterUtils.createMultiWordRegex(searchStringParts);
-    const createTextNode = (text: string): Text => ({type: "text", value: text})
+    const createTextNode = (text: string): Text => ({ type: "text", value: text });
 
     // Highlight a text node by returning an array of text and mark elements
     const highlightTextNode = (textNode: Text): Content[] => {
@@ -19,56 +16,63 @@ export default function highlightSearchWordsPluginFactory(searchQuery: string |
         }
         const result: Content[] = [];
 
-        const text = textNode.value
+        const text = textNode.value;
         let offset = 0;
         // loop through matches and add unmatched and matched parts to result array
         let matchArray = multiWordRegex.exec(text);
         while (matchArray !== null) {
             result.push(createTextNode(text.slice(offset, matchArray.index)));
-            result.push({type: "element", tagName: "mark", children: [createTextNode(matchArray[0])]});
+            result.push({ type: "element", tagName: "mark", children: [createTextNode(matchArray[0])] });
             offset = multiWordRegex.lastIndex;
             matchArray = multiWordRegex.exec(text);
         }
         // Add remaining unmatched string
         result.push(createTextNode(text.slice(offset)));
         return result;
-
-    }
+    };
 
     // Upper level highlight function
-    const highlightRootNode = (node: Root): Root => highlightParentNode(node)
+    const highlightRootNode = (node: Root): Root => highlightParentNode(node);
 
     // Highlight function to be called on Parent nodes
     const highlightParentNode = <T extends Parent>(parentNode: T): T => {
         const newChildren: Content[] = [];
-        parentNode.children.forEach(child => {
-            const highlightedChild = highlightTextNodes(child)
-            if(Array.isArray(highlightedChild)) {
-                newChildren.push(...highlightedChild as Content[])
+        parentNode.children.forEach((child) => {
+            const highlightedChild = highlightTextNodes(child);
+            if (Array.isArray(highlightedChild)) {
+                newChildren.push(...(highlightedChild as Content[]));
             } else {
-                newChildren.push(highlightedChild as Content)
+                newChildren.push(highlightedChild as Content);
             }
-        })
-        return {...parentNode, children: newChildren} as T
-    }
+        });
+        return { ...parentNode, children: newChildren } as T;
+    };
 
     // Highlight function to be called on generic inner nodes
     const highlightTextNodes = (node: Node): Node | Node[] => {
-        if(node.type === "text") {
-            return highlightTextNode(node as Text)
+        if (node.type === "text") {
+            return highlightTextNode(node as Text);
         } else {
-            if((node as Parent).children) {
-                return highlightParentNode(node as Parent)
+            if ((node as Parent).children) {
+                return highlightParentNode(node as Parent);
             } else {
-                return node
+                return node;
             }
         }
-    }
+    };
     return function highlightSearchWords(): Transformer<Root, Root> {
-        return (input: Root) => highlightRootNode(input)
-    }
-}
+        return (input: Root) => highlightRootNode(input);
+    };
+};
+
+/**
+ * Creates a react-markdown reHype plugin that marks text based on a multi-word search query.
+ * @deprecated moved to `markdownUtils.highlightSearchWordsPluginFactory`
+ */
+const highlightSearchWordsPluginFactory = highlightSearchWordsPluginFactoryFn;
+
+export default highlightSearchWordsPluginFactory;
 
 export const markdownUtils = {
-    highlightSearchWordsPluginFactory,
-}
+    highlightSearchWordsPluginFactory: highlightSearchWordsPluginFactoryFn,
+};

package/src/cmem/markdown/markdown.scss

@@ -1,20 +1,22 @@
-[data-footnote-ref=true] {
+[data-footnote-ref="true"] {
     &::before {
         content: "[";
     }
+
     &::after {
         content: "]";
     }
 
-    vertical-align: super;
-    font-size: $eccgui-size-typo-caption;
     margin-left: $eccgui-size-inline-whitespace * 0.5;
+    font-size: $eccgui-size-typo-caption;
+    vertical-align: super;
 }
 
 .data-footnote-backref {
     &::before {
         content: "[";
     }
+
     &::after {
         content: "]";
     }
@@ -27,6 +29,7 @@
     @extend .#{$eccgui}-separation__divider-horizontal;
     @extend .#{$eccgui}-separation__spacing--medium;
     @extend .#{$eccgui}-separation__divider-horizontal--short;
+
     overflow: hidden;
 }
 
@@ -46,16 +49,17 @@
     a[href=""] {
         font-size: $eccgui-size-typo-caption;
         line-height: $eccgui-size-typo-caption-lineheight;
-        pointer-events: none;
-        cursor: text;
-        color: currentColor;
+        color: currentcolor;
         text-decoration: none;
         vertical-align: super;
+        pointer-events: none;
+        cursor: text;
 
-        &:before {
+        &::before {
             content: "[";
         }
-        &:after {
+
+        &::after {
             content: "]";
         }
     }