@c-rex/components 0.1.37 → 0.1.39

package/src/render-article.tsx

@@ -1,68 +1,75 @@
-"use client";
-
-import { useMemo, useRef, useEffect } from "react";
-import parse from "html-react-parser";
-import { useQueryState } from "nuqs";
-import { useHighlight } from "@c-rex/contexts/highlight-provider";
-import { useHighlightStore } from "./stores/highlight-store";
-
-type Props = {
-    htmlContent: string;
-    contentLang?: string;
-};
-
-export const RenderArticle = ({ htmlContent, contentLang }: Props) => {
-    const [query] = useQueryState("q");
-    const containerRef = useRef<HTMLElement | null>(null);
-    const enableHighlight = useHighlightStore((state) => state.enable);
-    const { registerContainer } = useHighlight();
-
-    const highlightedContent = useMemo(() => {
-        if (!enableHighlight) return parse(htmlContent);
-        if (!query) return parse(htmlContent);
-
-        const terms = query
-            .split(/[+ ]/)
-            .map((t) => t.trim())
-            .filter(Boolean);
-
-        if (terms.length === 0) return parse(htmlContent);
-
-        const escaped = terms.map((t) =>
-            t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
-        );
-        const regex = new RegExp(`(${escaped.join("|")})`, "gi");
-
-        return parse(htmlContent, {
-            replace: (domNode: any) => {
-                if (domNode.type === "text") {
-                    const parts = domNode.data.split(regex);
-                    if (parts.length === 1) return;
-                    return (
-                        <>
-                            {parts.map((part: any, i: any) =>
-                                regex.test(part) ? (
-                                    <mark key={i} className="bg-yellow-200">
-                                        {part}
-                                    </mark>
-                                ) : (
-                                    part
-                                )
-                            )}
-                        </>
-                    );
-                }
-            },
-        });
-    }, [htmlContent, query, enableHighlight]);
-
-    useEffect(() => {
-        registerContainer(containerRef.current);
-    }, [highlightedContent, registerContainer]);
-
-    return (
-        <main ref={containerRef} lang={contentLang} className="pb-4 pr-4 min-h-[70vh]">
-            {highlightedContent}
-        </main>
-    );
-};
+"use client";
+
+import { useMemo, useRef, useEffect } from "react";
+import parse from "html-react-parser";
+import { useQueryState } from "nuqs";
+import { useHighlight } from "@c-rex/contexts/highlight-provider";
+import { useHighlightStore } from "./stores/highlight-store";
+import styles from "./render-article.module.css";
+
+type Props = {
+    htmlContent: string;
+    contentLang?: string;
+};
+
+export const RenderArticle = ({ htmlContent, contentLang }: Props) => {
+    const [query] = useQueryState("q");
+    const containerRef = useRef<HTMLElement | null>(null);
+    const enableHighlight = useHighlightStore((state) => state.enable);
+    const { registerContainer } = useHighlight();
+
+    const highlightedContent = useMemo(() => {
+        if (!enableHighlight) return parse(htmlContent);
+        if (!query) return parse(htmlContent);
+
+        const terms = query
+            .split(/[+ ]/)
+            .map((t) => t.trim())
+            .filter(Boolean);
+
+        if (terms.length === 0) return parse(htmlContent);
+
+        const escaped = terms.map((t) =>
+            t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+        );
+        const regex = new RegExp(`(${escaped.join("|")})`, "gi");
+
+        return parse(htmlContent, {
+            replace: (domNode: any) => {
+                if (domNode.type === "text") {
+                    const parts = domNode.data.split(regex);
+                    if (parts.length === 1) return;
+                    return (
+                        <>
+                            {parts.map((part: any, i: any) =>
+                                regex.test(part) ? (
+                                    <mark key={i} className="bg-yellow-200">
+                                        {part}
+                                    </mark>
+                                ) : (
+                                    part
+                                )
+                            )}
+                        </>
+                    );
+                }
+            },
+        });
+    }, [htmlContent, query, enableHighlight]);
+
+    useEffect(() => {
+        registerContainer(containerRef.current);
+    }, [highlightedContent, registerContainer]);
+
+    return (
+        <main
+            ref={containerRef}
+            id="ids-content"
+            data-content-scope="dita"
+            lang={contentLang}
+            className={`ids-content ids-content--dita-ot pb-4 pr-4 ${styles.idsContent}`}
+        >
+            {highlightedContent}
+        </main>
+    );
+};

package/src/renditions/file-download.tsx

@@ -1,84 +1,84 @@
-import { FC } from "react";
-import { RenditionModel } from "@c-rex/interfaces";
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger
-} from "@c-rex/ui/dropdown-menu";
-import { Button } from "@c-rex/ui/button";
-import { FileIcon } from "../icons/file-icon";
-import { CloudDownload, Eye } from "lucide-react";
-
-
-interface FileDownloadDropdown {
-    renditions: RenditionModel[] | null | undefined;
-}
-
-export const FileDownloadDropdown: FC<FileDownloadDropdown> = async ({ renditions }) => {
-
-    if (renditions == null || renditions.length == 0) return null;
-
-    const result: {
-        [key: string]: {
-            view: string;
-            download: string;
-        }
-    } = {}
-
-    renditions.forEach((item) => {
-        const key = item.format!
-
-        if (result[key] == undefined) {
-            result[key] = {
-                view: "",
-                download: ""
-            }
-        }
-        const download = item.links?.filter((link) => link.rel == "download")[0]?.href
-        const view = item.links?.filter((link) => link.rel == "view")[0]?.href
-
-        if (download != null && download != undefined) {
-            result[key].download = download
-        }
-
-        if (view != null && view != undefined) {
-            result[key].view = view
-        }
-    })
-
-    return (
-        <>
-            {Object.keys(result).map((fileKey, idx) => {
-                const file = result[fileKey];
-                if (!file) return null;
-
-                return (
-                    <DropdownMenu key={idx}>
-                        <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" size="icon">
-                                <FileIcon extension={fileKey} />
-                            </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent>
-                            {file.view && (
-                                <DropdownMenuItem asChild>
-                                    <a href={file.view} target="_blank" rel="noreferrer" className="flex items-center">
-                                        <Eye className="mr-2" /> Open
-                                    </a>
-                                </DropdownMenuItem>
-                            )}
-                            {file.download && (
-                                <DropdownMenuItem asChild>
-                                    <a href={file.download} target="_blank" rel="noreferrer" className="flex items-center">
-                                        <CloudDownload className="mr-2" /> Download
-                                    </a>
-                                </DropdownMenuItem>
-                            )}
-                        </DropdownMenuContent>
-                    </DropdownMenu>
-                );
-            })}
-        </>
-    )
+import { FC } from "react";
+import { RenditionModel } from "@c-rex/interfaces";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from "@c-rex/ui/dropdown-menu";
+import { Button } from "@c-rex/ui/button";
+import { FileIcon } from "../icons/file-icon";
+import { CloudDownload, Eye } from "lucide-react";
+
+
+interface FileDownloadDropdown {
+    renditions: RenditionModel[] | null | undefined;
+}
+
+export const FileDownloadDropdown: FC<FileDownloadDropdown> = async ({ renditions }) => {
+
+    if (renditions == null || renditions.length == 0) return null;
+
+    const result: {
+        [key: string]: {
+            view: string;
+            download: string;
+        }
+    } = {}
+
+    renditions.forEach((item) => {
+        const key = item.format!
+
+        if (result[key] == undefined) {
+            result[key] = {
+                view: "",
+                download: ""
+            }
+        }
+        const download = item.links?.filter((link) => link.rel == "download")[0]?.href
+        const view = item.links?.filter((link) => link.rel == "view")[0]?.href
+
+        if (download != null && download != undefined) {
+            result[key].download = download
+        }
+
+        if (view != null && view != undefined) {
+            result[key].view = view
+        }
+    })
+
+    return (
+        <>
+            {Object.keys(result).map((fileKey, idx) => {
+                const file = result[fileKey];
+                if (!file) return null;
+
+                return (
+                    <DropdownMenu key={idx}>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="icon">
+                                <FileIcon extension={fileKey} />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent>
+                            {file.view && (
+                                <DropdownMenuItem asChild>
+                                    <a href={file.view} target="_blank" rel="noreferrer" className="flex items-center">
+                                        <Eye className="mr-2" /> Open
+                                    </a>
+                                </DropdownMenuItem>
+                            )}
+                            {file.download && (
+                                <DropdownMenuItem asChild>
+                                    <a href={file.download} target="_blank" rel="noreferrer" className="flex items-center">
+                                        <CloudDownload className="mr-2" /> Download
+                                    </a>
+                                </DropdownMenuItem>
+                            )}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                );
+            })}
+        </>
+    )
 }

package/src/renditions/html.tsx

@@ -1,65 +1,65 @@
-import { FC, JSX } from "react";
-import * as cheerio from "cheerio"
-import { RenditionModel } from "@c-rex/interfaces";
-import { fragmentsGetAllServer } from "@c-rex/services/server-requests";
-import { call } from "@c-rex/utils";
-
-interface HtmlRenditionProps {
-    htmlFormats?: string[]
-    shortId: string,
-    render?: (html: string) => JSX.Element,
-    renditions?: RenditionModel[] | null
-}
-
-const defaultRender = (html: string) => {
-    const $ = cheerio.load(html)
-    const articleHtml = $("body").html() || ""
-    return <div dangerouslySetInnerHTML={{ __html: articleHtml }} />;
-}
-
-export const HtmlRendition: FC<HtmlRenditionProps> = async ({
-    shortId,
-    htmlFormats = ["application/xhtml+xml", "application/html", "text/html"],
-    render = defaultRender,
-    renditions
-}) => {
-    const empty = <div>No rendition available</div>;
-
-    if (renditions == undefined) {
-        const result = await fragmentsGetAllServer({
-            Fields: ["titles", "renditions"],
-            Embed: ["renditions"],
-            PageSize: 1,
-            Links: true,
-            Restrict: [
-                `informationUnits=${shortId}`,
-                ...htmlFormats.map(format => `renditions.format=${format}`)
-            ],
-        })
-
-        renditions = result.items?.[0]?.renditions;
-    }
-
-    if (renditions == null || renditions.length == 0) return empty;
-    renditions = renditions.filter(rendition => htmlFormats.includes(rendition.format!));
-
-    if (renditions.length == 0 || renditions[0] == undefined || renditions[0].links == undefined) return empty;
-
-    const filteredLinks = renditions[0].links.filter((item) => item.rel == "view");
-
-    if (filteredLinks.length == 0 || filteredLinks[0] == undefined || filteredLinks[0].href == undefined) return empty;
-
-    const url = filteredLinks[0].href;
-    try {
-
-        const html = await fetch(url).then(res => res.text());
-        return render(html);
-    } catch (error) {
-        call("CrexLogger.log", {
-            level: "error",
-            message: `HtmlRendition error: ${error}`
-        });
-
-        return empty;
-    }
+import { FC, JSX } from "react";
+import * as cheerio from "cheerio"
+import { RenditionModel } from "@c-rex/interfaces";
+import { fragmentsGetAllServer } from "@c-rex/services/server-requests";
+import { call } from "@c-rex/utils";
+
+interface HtmlRenditionProps {
+    htmlFormats?: string[]
+    shortId: string,
+    render?: (html: string) => JSX.Element,
+    renditions?: RenditionModel[] | null
+}
+
+const defaultRender = (html: string) => {
+    const $ = cheerio.load(html)
+    const articleHtml = $("body").html() || ""
+    return <div dangerouslySetInnerHTML={{ __html: articleHtml }} />;
+}
+
+export const HtmlRendition: FC<HtmlRenditionProps> = async ({
+    shortId,
+    htmlFormats = ["application/xhtml+xml", "application/html", "text/html"],
+    render = defaultRender,
+    renditions
+}) => {
+    const empty = <div>No rendition available</div>;
+
+    if (renditions == undefined) {
+        const result = await fragmentsGetAllServer({
+            Fields: ["titles", "renditions"],
+            Embed: ["renditions"],
+            PageSize: 1,
+            Links: true,
+            Restrict: [
+                `informationUnits=${shortId}`,
+                ...htmlFormats.map(format => `renditions.format=${format}`)
+            ],
+        })
+
+        renditions = result.items?.[0]?.renditions;
+    }
+
+    if (renditions == null || renditions.length == 0) return empty;
+    renditions = renditions.filter(rendition => htmlFormats.includes(rendition.format!));
+
+    if (renditions.length == 0 || renditions[0] == undefined || renditions[0].links == undefined) return empty;
+
+    const filteredLinks = renditions[0].links.filter((item) => item.rel == "view");
+
+    if (filteredLinks.length == 0 || filteredLinks[0] == undefined || filteredLinks[0].href == undefined) return empty;
+
+    const url = filteredLinks[0].href;
+    try {
+
+        const html = await fetch(url).then(res => res.text());
+        return render(html);
+    } catch (error) {
+        call("CrexLogger.log", {
+            level: "error",
+            message: `HtmlRendition error: ${error}`
+        });
+
+        return empty;
+    }
 }

package/src/renditions/image/container.tsx

@@ -1,55 +1,55 @@
-"use client"
-
-import { FC } from "react";
-import { cn } from "@c-rex/utils";
-import { FragmentsGetAllClient } from "../../generated/client-components";
-import { ImageRendition } from "./rendition";
-import { Skeleton } from "@c-rex/ui/skeleton";
-
-interface ImageContainerProps {
-    itemShortId: string;
-    imageRestrictions?: string[];
-    imageFormats?: string[];
-    emptyImageStyle?: string;
-    skeletonStyle?: string;
-    imageStyle?: string;
-}
-
-export const ImageRenditionContainer: FC<ImageContainerProps> = ({
-    itemShortId,
-    emptyImageStyle,
-    imageStyle,
-    imageFormats = ["image/svg+xml", "image/gif", "image/png", "image/jpg"],
-    skeletonStyle
-}) => {
-    const newRestrictions = [
-        `informationUnits=${itemShortId}`,
-        ...imageFormats.map(format => `renditions.format=${format}`)
-    ];
-
-    return (
-        <FragmentsGetAllClient
-            queryParams={{
-                Fields: ["titles", "renditions"],
-                Embed: ["renditions"],
-                PageSize: 1,
-                Links: true,
-                Restrict: newRestrictions,
-            }}
-        >
-            {({ data, isLoading }) => (
-                isLoading ? (
-                    <Skeleton className={cn("w-full h-full", skeletonStyle)} />
-                ) : (
-                    <ImageRendition
-                        key={data?.items[0]?.shortId}
-                        items={data?.items as any}
-                        formats={imageFormats}
-                        emptyImageStyle={emptyImageStyle}
-                        imageStyle={imageStyle}
-                    />
-                )
-            )}
-        </FragmentsGetAllClient>
-    )
+"use client"
+
+import { FC } from "react";
+import { cn } from "@c-rex/utils";
+import { FragmentsGetAllClient } from "../../generated/client-components";
+import { ImageRendition } from "./rendition";
+import { Skeleton } from "@c-rex/ui/skeleton";
+
+interface ImageContainerProps {
+    itemShortId: string;
+    imageRestrictions?: string[];
+    imageFormats?: string[];
+    emptyImageStyle?: string;
+    skeletonStyle?: string;
+    imageStyle?: string;
+}
+
+export const ImageRenditionContainer: FC<ImageContainerProps> = ({
+    itemShortId,
+    emptyImageStyle,
+    imageStyle,
+    imageFormats = ["image/svg+xml", "image/gif", "image/png", "image/jpg"],
+    skeletonStyle
+}) => {
+    const newRestrictions = [
+        `informationUnits=${itemShortId}`,
+        ...imageFormats.map(format => `renditions.format=${format}`)
+    ];
+
+    return (
+        <FragmentsGetAllClient
+            queryParams={{
+                Fields: ["titles", "renditions"],
+                Embed: ["renditions"],
+                PageSize: 1,
+                Links: true,
+                Restrict: newRestrictions,
+            }}
+        >
+            {({ data, isLoading }) => (
+                isLoading ? (
+                    <Skeleton className={cn("w-full h-full", skeletonStyle)} />
+                ) : (
+                    <ImageRendition
+                        key={data?.items[0]?.shortId}
+                        items={data?.items as any}
+                        formats={imageFormats}
+                        emptyImageStyle={emptyImageStyle}
+                        imageStyle={imageStyle}
+                    />
+                )
+            )}
+        </FragmentsGetAllClient>
+    )
 }