@eccenca/gui-elements 23.1.0-rc.4 → 23.2.0-rc.0

package/src/_shame.scss

@@ -1,15 +1,5 @@
 // Add stuff to test fast and dirty.
-// This file should not contain any styles because we do not work dirty!
-
-.#{$ns}-portal {
-    z-index: 8001; // higher than carbon ui shell header
-}
-
-html {
-    // TODO: move to application or workspace element
-    background-color: $eccgui-color-workspace-background;
-    color: $eccgui-color-workspace-text;
-}
+// This file should not contain any styles.
 
 .#{$prefix}--assistive-text,
 .#{$prefix}--visually-hidden {
@@ -56,39 +46,6 @@ html {
     }
 }
 
-/*
-    TODO: create own auto complete input in new hui elements
-*/
-.app_di-autocomplete__options {
-    max-width: 90vw;
-    min-width: 40rem;
-    max-height: 60vh;
-    overflow: auto;
-}
-
-/*
-    WORKAROUND: markdown footnotes rendered without (empty) local anchors
-*/
-
-.#{$eccgui}-typography__contentblock {
-    a[href=""] {
-        font-size: $eccgui-size-typo-caption;
-        line-height: $eccgui-size-typo-caption-lineheight;
-        pointer-events: none;
-        cursor: text;
-        color: currentColor;
-        text-decoration: none;
-        vertical-align: super;
-
-        &:before {
-            content: "[";
-        }
-        &:after {
-            content: "]";
-        }
-    }
-}
-
 /*
     WORKAROUND: thinner scrollbars
 */
@@ -114,7 +71,6 @@ scrollbar-color: #bbb transparent;
     CHANGE: default focus behaviour
 */
 
-
 :focus,
 input:focus-visible,
 textarea:focus-visible {

package/src/cmem/ActivityControl/ActivityControlTypes.ts

@@ -1,3 +1,4 @@
+// @deprecated use `SilkActivityStatusProps`
 export interface IActivityStatus {
     // Optional project ID
     project?: string;
@@ -28,5 +29,8 @@ export interface IActivityStatus {
     // The start time as date time, e.g. "2021-09-07T09:34:53.153Z"
     startTime?: string;
 }
+export type SilkActivityStatusProps = IActivityStatus;
 
+// @deprecated use `SilkActivityStatusConcrete`
 export type ConcreteActivityStatus = "Cancelled" | "Failed" | "Successful" | "Not executed" | "Running" | "Waiting" | "Canceling"
+export type SilkActivityStatusConcrete = ConcreteActivityStatus;

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -22,7 +22,7 @@ import { ValidIconName } from "../../components/Icon/canonicalIconNames";
 import { IconProps } from "../../components/Icon/Icon";
 import { TestIconProps } from "../../components/Icon/TestIcon";
 
-export interface IActivityControlProps extends TestableComponent {
+export interface ActivityControlWidgetProps extends TestableComponent {
     /**
      * The label to be shown
      */
@@ -51,7 +51,7 @@ export interface IActivityControlProps extends TestableComponent {
     /**
      * The action buttons
      */
-    activityActions?: IActivityAction[];
+    activityActions?: ActivityControlWidgetAction[];
     /**
      * Context menu items
      */
@@ -78,6 +78,9 @@ export interface IActivityControlProps extends TestableComponent {
     progressSpinnerFinishedIcon?: React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
 }
 
+// @deprecated use `ActivityControlWidgetProps`
+export type IActivityControlProps = ActivityControlWidgetProps;
+
 interface IActivityContextMenu extends TestableComponent {
     // Tooltip for the context menu
     tooltip?: string;
@@ -85,7 +88,7 @@ interface IActivityContextMenu extends TestableComponent {
     menuItems: IActivityMenuAction[];
 }
 
-export interface IActivityAction extends TestableComponent {
+export interface ActivityControlWidgetAction extends TestableComponent {
     // The action that should be triggered
     action: () => any;
     // The tooltip that should be shown over the action icon
@@ -98,12 +101,15 @@ export interface IActivityAction extends TestableComponent {
     hasStateWarning?: boolean;
 }
 
-export interface IActivityMenuAction extends IActivityAction, TestableComponent {
+// @deprecated use `ActivityControlWidgetAction`
+export type IActivityAction = ActivityControlWidgetAction;
+
+interface IActivityMenuAction extends ActivityControlWidgetAction {
     // Optional link
     href?: string;
 }
 /** Shows the status of activities and supports actions on these activities. */
-export function ActivityControlWidget(props: IActivityControlProps) {
+export function ActivityControlWidget(props: ActivityControlWidgetProps) {
     const {
         "data-test-id": dataTestId,
         progressBar,

package/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx

@@ -1,7 +1,7 @@
 import {Button, HtmlContentBlock, IconButton, SimpleDialog} from "../../index";
 import React, { useState } from "react";
 
-interface IProps {
+interface ActivityExecutionErrorReportModalProps {
     // Title of the modal
     title?: string
     // Called when the close button is clicked
@@ -17,7 +17,14 @@ interface IProps {
 }
 
 /** Shows the execution error report to the user and offers to download the report. */
-export const ActivityExecutionErrorReportModal = ({title, onDiscard, report, downloadButtonValue, closeButtonValue, fetchErrorReport}: IProps) => {
+export const ActivityExecutionErrorReportModal = ({
+    title,
+    onDiscard,
+    report,
+    downloadButtonValue,
+    closeButtonValue,
+    fetchErrorReport
+}: ActivityExecutionErrorReportModalProps) => {
     const [displayFullscreen, setDisplayFullscreen] = useState<boolean>(false);
     const fileName = "Activity execution report from " + (new Date()).toISOString().replace(/T/, " ").replace(/:/g, "-").substr(0, 19) + ".md"
     const handleDownload = async () => {

package/src/cmem/ActivityControl/SilkActivityControl.tsx

@@ -1,7 +1,7 @@
 import {TestableComponent} from "../../components/interfaces";
-import {ActivityControlWidget, IActivityAction} from "./ActivityControlWidget";
+import {ActivityControlWidget, ActivityControlWidgetProps } from "./ActivityControlWidget";
 import React, {useEffect, useRef, useState} from "react";
-import {ConcreteActivityStatus, IActivityStatus} from "./ActivityControlTypes";
+import {SilkActivityStatusConcrete, SilkActivityStatusProps} from "./ActivityControlTypes";
 import {Intent} from "@blueprintjs/core/src/common/intent";
 import {ActivityExecutionErrorReportModal} from "./ActivityExecutionErrorReportModal";
 import {Icon, Spacing} from "../../";
@@ -11,7 +11,7 @@ import {IntentTypes} from "../../common/Intent";
 const progressBreakpointIndetermination = 10;
 const progressBreakpointAnimation = 99;
 
-interface SilkActivityControlProps extends TestableComponent {
+export interface SilkActivityControlProps extends TestableComponent {
     // The label of this activity
     label: string | JSX.Element;
     /**
@@ -19,9 +19,9 @@ interface SilkActivityControlProps extends TestableComponent {
      */
     tags?: JSX.Element;
     // Initial state
-    initialStatus?: IActivityStatus;
+    initialStatus?: SilkActivityStatusProps;
     // Register a function in order to receive callbacks
-    registerForUpdates: (callback: (status: IActivityStatus) => any) => any;
+    registerForUpdates: (callback: (status: SilkActivityStatusProps) => any) => any;
     // Un-register this component from any updates
     unregisterFromUpdates: () => any;
     // If the start action should be available
@@ -57,12 +57,12 @@ interface SilkActivityControlProps extends TestableComponent {
         translate: (unit: TimeUnits) => string;
     };
     // configure how the widget is displayed
-    layoutConfig?: IActivityControlLayoutProps;
+    layoutConfig?: SilkActivityControlLayoutProps;
     /** Configures when the status message should be hidden, e.g. because it is uninteresting. */
-    hideMessageOnStatus?: (concreteStatus: ConcreteActivityStatus | undefined) => boolean
+    hideMessageOnStatus?: (concreteStatus: SilkActivityStatusConcrete | undefined) => boolean
 }
 
-export interface IActivityControlLayoutProps {
+export interface SilkActivityControlLayoutProps {
     // show small version of the widget
     small?: boolean;
     // display widget inside rectange
@@ -77,7 +77,10 @@ export interface IActivityControlLayoutProps {
     labelWrapper?: JSX.Element;
 }
 
-const defaultLayout: IActivityControlLayoutProps = {
+// @deprecated use `SilkActivityControlLayoutProps`
+export type IActivityControlLayoutProps = SilkActivityControlLayoutProps;
+
+const defaultLayout: SilkActivityControlLayoutProps = {
     small: false,
     border: false,
     canShrink: false,
@@ -88,11 +91,11 @@ interface IErrorReportAction {
     // The title of the error report modal
     title?: string;
     // The element that will be rendered in the modal, either as Markdown or object
-    renderReport: (report: string | IActivityExecutionReport) => JSX.Element;
-    // What version of the report should be handed to the renderReport function, if false IActivityExecutionReport, if true the Markdown string
+    renderReport: (report: string | SilkActivityExecutionReportProps) => JSX.Element;
+    // What version of the report should be handed to the renderReport function, if false SilkActivityExecutionReportProps, if true the Markdown string
     renderMarkdown: boolean;
     // The function to fetch the error report. It returns undefined if something went wrong.
-    fetchErrorReport: (markdown: boolean) => Promise<string | IActivityExecutionReport | undefined>;
+    fetchErrorReport: (markdown: boolean) => Promise<string | SilkActivityExecutionReportProps | undefined>;
     // If besides showing the error report, there should also be an option to download it.
     allowDownload?: boolean;
     // The text of the download button in the modal
@@ -101,7 +104,7 @@ interface IErrorReportAction {
     closeButtonValue: string;
 }
 
-export interface IActivityExecutionReport {
+export interface SilkActivityExecutionReportProps {
     // Summary of the activity execution error
     errorSummary: string;
     // If the activity was running in a project context, the project ID
@@ -122,6 +125,9 @@ export interface IActivityExecutionReport {
     stackTrace?: IStacktrace;
 }
 
+// @deprecated use `SilkActivityExecutionReportProps`
+export type IActivityExecutionReport = SilkActivityExecutionReportProps;
+
 interface IStacktrace {
     // The final error message of the stacktrace
     errorMessage?: String;
@@ -131,9 +137,12 @@ interface IStacktrace {
     cause?: IStacktrace;
 }
 
+// @deprecated use `SilkActivityControlTranslationKeys`
 export type ActivityControlTranslationKeys = "startActivity" | "stopActivity" | "reloadActivity" | "showErrorReport" | "startPrioritized";
-
+export type SilkActivityControlTranslationKeys = ActivityControlTranslationKeys;
+// @deprecated use `SilkActivityControlAction`
 export type ActivityAction = "start" | "cancel" | "restart";
+export type SilkActivityControlAction = ActivityAction;
 
 /** Silk activity control. */
 export function SilkActivityControl(props: SilkActivityControlProps) {
@@ -160,14 +169,14 @@ export function useSilkActivityControl({
     executePrioritized,
     ...props
 }: SilkActivityControlProps) {
-    const [activityStatus, setActivityStatus] = useState<IActivityStatus | undefined>(initialStatus);
-    const currentStatus = useRef<IActivityStatus | undefined>(initialStatus)
+    const [activityStatus, setActivityStatus] = useState<SilkActivityStatusProps | undefined>(initialStatus);
+    const currentStatus = useRef<SilkActivityStatusProps | undefined>(initialStatus)
     const [showStartPrioritized, setShowStartPrioritized] = useState(false)
-    const [errorReport, setErrorReport] = useState<string | IActivityExecutionReport | undefined>(undefined);
+    const [errorReport, setErrorReport] = useState<string | SilkActivityExecutionReportProps | undefined>(undefined);
 
     // Register update function
     useEffect(() => {
-        const updateActivityStatus = (status: IActivityStatus | undefined) => {
+        const updateActivityStatus = (status: SilkActivityStatusProps | undefined) => {
             if(status?.concreteStatus !== "Waiting") {
                 setShowStartPrioritized(false)
             } else if(executePrioritized) {
@@ -189,7 +198,7 @@ export function useSilkActivityControl({
     );
 
     // Create activity actions
-    const actions: IActivityAction[] = [];
+    const actions: ActivityControlWidgetProps['activityActions'] = [];
 
     if (failureReportAction && activityStatus?.failed && activityStatus.concreteStatus !== "Cancelled") {
         actions.push({
@@ -367,7 +376,7 @@ export function useSilkActivityControl({
     } as const;
 }
 
-export const calcIntent = (activityStatus: IActivityStatus): Intent => {
+export const calcIntent = (activityStatus: SilkActivityStatusProps): Intent => {
     const concreteStatus = activityStatus.concreteStatus;
     let intent: Intent;
     switch (concreteStatus) {

package/src/cmem/ActivityControl/index.ts

@@ -1,3 +1,4 @@
-export { ActivityControlWidget } from "./ActivityControlWidget";
-export { ActivityExecutionErrorReportModal } from "./ActivityExecutionErrorReportModal";
-export { SilkActivityControl, useSilkActivityControl } from "./SilkActivityControl";
+export * from "./ActivityControlWidget";
+export * from "./ActivityExecutionErrorReportModal";
+export * from "./SilkActivityControl";
+export * from "./ActivityControlTypes";

package/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx

@@ -1,8 +1,7 @@
 import React, {useState} from "react";
 import {Link, Spacing} from "../../index";
 
-interface IContentBlobTogglerProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface ContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
         space-delimited list of class names
     */
@@ -43,7 +42,7 @@ export function ContentBlobToggler({
   startExtended = false,
   enableToggler = true,
   ...otherProps
-}: IContentBlobTogglerProps) {
+}: ContentBlobTogglerProps) {
   const [isExtended, setViewState] = useState(startExtended);
   const handlerToggleView = (event: any) => {
     event.preventDefault();

package/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -1,35 +1,15 @@
 import React from "react";
-import { ContentBlobToggler, Markdown } from "./..";
+import { ContentBlobToggler, ContentBlobTogglerProps, Markdown } from "./..";
 
-interface IStringPreviewContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     space-delimited list of class names
-     */
-    className?: string;
+export interface StringPreviewContentBlobTogglerProps extends Omit<ContentBlobTogglerProps, "previewContent" | "enableToggler"> {
     /**
      The preview content will be cut to this length if it is too long.
      */
     previewMaxLength?: number;
-    /**
-     text label used for toggler when preview is displayed
-     */
-    toggleExtendText: string;
-    /**
-     text label used for toggler when full view is displayed
-     */
-    toggleReduceText: string;
     /**
      The content string. If it is smaller than previewMaxLength this will be displayed in full, else fullviewContent will be displayed.
      */
     content: string;
-    /**
-     Content that is displayed as extended full view
-     */
-    fullviewContent: React.ReactNode;
-    /**
-     show extended full view initially
-     */
-    startExtended?: boolean;
     /** If only the first non-empty line should be shown in the preview. This will in addition also be shortened according to previewMaxLength. */
     firstNonEmptyLineOnly?: boolean
     /** If enabled the preview is rendered as markdown. */
@@ -40,17 +20,17 @@ interface IStringPreviewContentBlobTogglerProps extends React.HTMLAttributes<HTM
 
 /** Version of the content toggler for text only content. */
 export function StringPreviewContentBlobToggler({
-                                                    className = "",
-                                                    previewMaxLength,
-                                                    toggleExtendText,
-                                                    toggleReduceText,
-                                                    content,
-                                                    fullviewContent,
-                                                    startExtended,
-                                                    firstNonEmptyLineOnly,
-                                                    renderPreviewAsMarkdown = false,
-                                                    allowedHtmlElementsInPreview
-                                                }: IStringPreviewContentBlobTogglerProps) {
+    className = "",
+    previewMaxLength,
+    toggleExtendText,
+    toggleReduceText,
+    content,
+    fullviewContent,
+    startExtended,
+    firstNonEmptyLineOnly,
+    renderPreviewAsMarkdown = false,
+    allowedHtmlElementsInPreview
+}: StringPreviewContentBlobTogglerProps) {
     const previewMaybeFirstLine = firstNonEmptyLineOnly ? firstNonEmptyLine(content) : content
     const previewString = previewMaxLength ? previewMaybeFirstLine.substr(0, previewMaxLength) : previewMaybeFirstLine
     const enableToggler = previewString !== content
@@ -68,9 +48,16 @@ export function StringPreviewContentBlobToggler({
 
 const newLineRegex = new RegExp("\r|\n"); // eslint-disable-line
 
-/** Takes the first non-empty line from a preview string. */
+/**
+ * Takes the first non-empty line from a preview string.
+ * @deprecated use `stringPreviewContentBlobTogglerUtils.firstNonEmptyLine`
+ */
 export function firstNonEmptyLine(preview: string) {
     const previewString = preview.trim();
     const result = newLineRegex.exec(previewString);
     return result !== null ? previewString.substr(0, result.index) : previewString;
 }
+
+export const stringPreviewContentBlobTogglerUtils = {
+    firstNonEmptyLine
+}

package/src/cmem/ContentBlobToggler/index.ts

@@ -1,2 +1,2 @@
-export { ContentBlobToggler } from "./ContentBlobToggler";
-export { StringPreviewContentBlobToggler } from "./StringPreviewContentBlobToggler";
+export * from "./ContentBlobToggler";
+export * from "./StringPreviewContentBlobToggler";

package/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx

@@ -1,7 +1,11 @@
 import React, {useEffect, useState} from "react";
 import {TestableComponent} from "../../components/interfaces";
 
-interface IProps extends TestableComponent {
+// @deprecated use `ElapsedDateTimeDisplayUnits`
+export type TimeUnits = "minute" | "minutes" | "hour" | "hours" | "day" | "days"
+export type ElapsedDateTimeDisplayUnits = TimeUnits;
+
+export interface ElapsedDateTimeDisplayProps extends TestableComponent {
     // The date time given as string (parseable by Date) or number (ms since 1970-01-01 00:00:00 UTC)
     dateTime: string | number
     // String to put before the elapsed time
@@ -11,17 +15,18 @@ interface IProps extends TestableComponent {
     // If the date time string should be shown as tooltip
     showDateTimeTooltip?: boolean
     // Translate time related vocabulary
-    translateUnits: (unit: TimeUnits) => string
+    translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string
 }
 
-export type TimeUnits = "minute" | "minutes" | "hour" | "hours" | "day" | "days"
-
 const dateTimeToElapsedTimeInMs = (dateTime: string | number) => {
     const absoluteMs = typeof dateTime === "number" ? dateTime : new Date(dateTime).getTime()
     return new Date().getTime() - absoluteMs
 }
 
-// Returns a segmentation of the elapsed time, i.e. an array with the nr of days, hours, minutes, seconds
+/**
+ * Returns a segmentation of the elapsed time, i.e. an array with the nr of days, hours, minutes, seconds
+ * @deprecated moved to `elapsedDateTimeDisplayUtils.elapsedTimeSegmented`
+ */
 export const elapsedTimeSegmented = (elapsedTimeInMs: number): number[] => {
     // In how many segments the time should be split, i.e. hours, minutes, seconds
     const segmentSteps = [24, 60, 60]
@@ -37,9 +42,12 @@ export const elapsedTimeSegmented = (elapsedTimeInMs: number): number[] => {
     return segmentValues.reverse()
 }
 
-// Returns the simplified elapsed time
-export const simplifiedElapsedTime = (timeSegments: number[], translateUnits: (unit: TimeUnits) => string) => {
-    const units: TimeUnits[] = ["day", "hour", "minute"]
+/**
+ * Returns the simplified elapsed time
+ * @deprecated moved to `elapsedDateTimeDisplayUtils.simplifiedElapsedTime`
+ */
+export const simplifiedElapsedTime = (timeSegments: number[], translateUnits: (unit: ElapsedDateTimeDisplayUnits) => string) => {
+    const units: ElapsedDateTimeDisplayUnits[] = ["day", "hour", "minute"]
     // Find first non-null value
     let idx = 0
     while(idx < 3 && timeSegments[idx] === 0) {
@@ -49,11 +57,21 @@ export const simplifiedElapsedTime = (timeSegments: number[], translateUnits: (u
         // Do not show exact seconds
         return `< 1 ${translateUnits("minute")}`
     } else {
-        return `${timeSegments[idx]} ${translateUnits(units[idx] + (timeSegments[idx] > 1 ? "s": "") as TimeUnits)}`
+        return `${timeSegments[idx]} ${translateUnits(units[idx] + (timeSegments[idx] > 1 ? "s": "") as ElapsedDateTimeDisplayUnits)}`
     }
 }
-/** Displays the elapsed time in a human readable way. */
-export const ElapsedDateTimeDisplay = ({dateTime, prefix = "", suffix = "", showDateTimeTooltip = true, translateUnits, ...otherProps}: IProps) => {
+
+/**
+ * Displays the elapsed time in a human readable way.
+ */
+export const ElapsedDateTimeDisplay = ({
+    dateTime,
+    prefix = "",
+    suffix = "",
+    showDateTimeTooltip = true,
+    translateUnits,
+    ...otherProps
+}: ElapsedDateTimeDisplayProps) => {
     const [elapsedTime, setElapsedTime] = useState<number>(dateTimeToElapsedTimeInMs(dateTime))
 
     useEffect(() => {
@@ -67,3 +85,8 @@ export const ElapsedDateTimeDisplay = ({dateTime, prefix = "", suffix = "", show
         {prefix + simplifiedElapsedTime(elapsedTimeSegmented(elapsedTime), translateUnits) + suffix}
     </span>
 }
+
+export const elapsedDateTimeDisplayUtils = {
+    elapsedTimeSegmented,
+    simplifiedElapsedTime,
+}

package/src/cmem/index.ts

@@ -1,25 +1,7 @@
-import { ActivityAction, IActivityControlLayoutProps } from "./ActivityControl/SilkActivityControl";
-import { IActivityStatus } from "./ActivityControl/ActivityControlTypes";
-import { TimeUnits } from "./DateTimeDisplay/ElapsedDateTimeDisplay";
-
-export {
-    ActivityControlWidget,
-    ActivityExecutionErrorReportModal,
-    SilkActivityControl,
-    useSilkActivityControl,
-} from "./ActivityControl";
-export { ContentBlobToggler, StringPreviewContentBlobToggler } from "./ContentBlobToggler";
-export { firstNonEmptyLine } from "./ContentBlobToggler/StringPreviewContentBlobToggler";
-export { ElapsedDateTimeDisplay } from "./DateTimeDisplay/ElapsedDateTimeDisplay";
-export { Markdown } from "./markdown/Markdown";
-export { ReactFlow } from "./react-flow/ReactFlow/ReactFlow";
-export { StickyNoteModal } from "./react-flow/StickyNoteModal/StickyNoteModal";
-
-export type {
-    IActivityStatus,
-    ActivityAction,
-    IActivityControlLayoutProps,
-    TimeUnits,
-}
-
+export * from "./ActivityControl";
 export * from "./ConfidenceValue";
+export * from "./ContentBlobToggler"
+export * from "./DateTimeDisplay/ElapsedDateTimeDisplay";
+export * from "./markdown/Markdown";
+export * from "./markdown/highlightSearchWords";
+export * from "./react-flow";

package/src/cmem/markdown/Markdown.tsx

@@ -1,14 +1,14 @@
+import React from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 //@ts-ignore
 import remarkTypograf from "@mavrin/remark-typograf";
 import {remarkDefinitionList} from 'remark-definition-list';
-import React from "react";
-import {HtmlContentBlock, TestableComponent} from "../../index";
 import { PluggableList } from "react-markdown/lib/react-markdown";
+import {HtmlContentBlock, TestableComponent} from "../../index";
 
-export interface MarkdownParserProps extends TestableComponent {
+export interface MarkdownProps extends TestableComponent {
     children: string;
     /**
      * Allow HTML as partial content, otherwise escape HTML tags.
@@ -39,6 +39,8 @@ export interface MarkdownParserProps extends TestableComponent {
      */
     linkTargetName?: false | string;
 }
+/* @deprecated use `MarkdownProps` */
+export type MarkdownParserProps = MarkdownProps;
 
 const configDefault = {
     /*
@@ -73,7 +75,7 @@ export const Markdown = ({
     reHypePlugins,
     linkTargetName = "_mdref",
     ...otherProps
-}: MarkdownParserProps) => {
+}: MarkdownProps) => {
 
     const configHtml = allowHtml ? {
         rehypePlugins: [...configDefault.rehypePlugins].concat([rehypeRaw]),

package/src/cmem/markdown/highlightSearchWords.ts

@@ -1,12 +1,15 @@
 import {Content, Parent, Root, Text} from "hast";
 import {Transformer} from "unified"
 import {Node} from "unist";
-import {createMultiWordRegex, extractSearchWords} from "../../components/Typography/Highlighter";
+import { highlighterUtils } from "../../components/Typography/Highlighter";
 
-/** Creates a react-markdown reHype plugin that marks text based on a multi-word search query. */
+/**
+ * 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 ? extractSearchWords(searchQuery) : []
-    const multiWordRegex = createMultiWordRegex(searchStringParts);
+    const searchStringParts = searchQuery ? highlighterUtils.extractSearchWords(searchQuery) : []
+    const multiWordRegex = highlighterUtils.createMultiWordRegex(searchStringParts);
     const createTextNode = (text: string): Text => ({type: "text", value: text})
 
     // Highlight a text node by returning an array of text and mark elements
@@ -65,3 +68,7 @@ export default function highlightSearchWordsPluginFactory(searchQuery: string |
         return (input: Root) => highlightRootNode(input)
     }
 }
+
+export const markdownUtils = {
+    highlightSearchWordsPluginFactory,
+}

package/src/cmem/markdown/markdown.scss

@@ -1,4 +1,4 @@
-.footnote-ref {
+[data-footnote-ref=true] {
     &::before {
         content: "[";
     }
@@ -11,7 +11,7 @@
     margin-left: $eccgui-size-inline-whitespace * 0.5;
 }
 
-.footnote-back {
+.data-footnote-backref {
     &::before {
         content: "[";
     }
@@ -19,9 +19,16 @@
         content: "]";
     }
 
-    margin-left: $eccgui-size-inline-whitespace;
+    margin-left: 0.5 * $eccgui-size-inline-whitespace;
 }
 
+#footnote-label {
+    @extend hr;
+    @extend .#{$eccgui}-separation__divider-horizontal;
+    @extend .#{$eccgui}-separation__spacing--medium;
+    @extend .#{$eccgui}-separation__divider-horizontal--short;
+    overflow: hidden;
+}
 
 .task-list-item {
     list-style: none;
@@ -30,3 +37,26 @@
         margin-left: $eccgui-size-block-whitespace * -2;
     }
 }
+
+/*
+    WORKAROUND: markdown footnotes rendered without (empty) local anchors
+*/
+
+.#{$eccgui}-typography__contentblock {
+    a[href=""] {
+        font-size: $eccgui-size-typo-caption;
+        line-height: $eccgui-size-typo-caption-lineheight;
+        pointer-events: none;
+        cursor: text;
+        color: currentColor;
+        text-decoration: none;
+        vertical-align: super;
+
+        &:before {
+            content: "[";
+        }
+        &:after {
+            content: "]";
+        }
+    }
+}