@monolith-forensics/monolith-ui 1.9.1-dev.8 → 1.9.3-dev.0

package/dist/RichTextEditor/RichTextEditor.js

@@ -8,17 +8,79 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 import { EditorContent, useEditor } from "@tiptap/react";
+import { BubbleMenu as TiptapBubbleMenu, } from "@tiptap/react/menus";
+import { isTextSelection } from "@tiptap/core";
 import { DOMParser as ProseMirrorDOMParser } from "@tiptap/pm/model";
+import { TextSelection } from "@tiptap/pm/state";
 import { Toolbar } from "./Toolbar";
-import getTipTapExtensions from "./Extensions/getTiptapExtensions";
-import { Extensions, SlashCommands } from "./Enums";
+import getTipTapExtensions, { resolveExtensions, } from "./Extensions/getTiptapExtensions";
+import { Controls, Extensions, SlashCommands } from "./Enums";
 import { addImagePlaceholder, removeImagePlaceholder, startImageUpload, } from "./Plugins/UploadImagesPlugin";
 import SaveBadge from "./Components/SaveBadge";
+import BubbleMenuContent from "./Components/BubbleMenu";
+import { TableRails } from "./Components/TableTools";
 import Fonts from "./Enums/Fonts";
 import RichTextEditorContext from "./Contexts/RichTextEditorContext";
+import { getLinkAttributesAtPosition, getLinkRangeAtPosition, openLink, } from "./Utils/linkUtils";
+import { TABLE_CELL_MIN_WIDTH } from "./Utils/tableUtils";
+const codeBlockFallbacks = {
+    light: {
+        background: "#f6f8fa",
+        text: "#24292f",
+        border: "#d0d7de",
+        selection: "#0969da2e",
+        syntax: {
+            comment: "#6e7781",
+            punctuation: "#24292f",
+            property: "#0550ae",
+            selector: "#116329",
+            operator: "#cf222e",
+            keyword: "#cf222e",
+            string: "#0a3069",
+            number: "#0550ae",
+            function: "#8250df",
+            variable: "#953800",
+            tag: "#116329",
+            attribute: "#0550ae",
+            literal: "#0550ae",
+            deleted: "#82071e",
+            inserted: "#116329",
+        },
+    },
+    dark: {
+        background: "#0d1117",
+        text: "#c9d1d9",
+        border: "#30363d",
+        selection: "#1f6feb40",
+        syntax: {
+            comment: "#8b949e",
+            punctuation: "#c9d1d9",
+            property: "#79c0ff",
+            selector: "#7ee787",
+            operator: "#ff7b72",
+            keyword: "#ff7b72",
+            string: "#a5d6ff",
+            number: "#79c0ff",
+            function: "#d2a8ff",
+            variable: "#ffa657",
+            tag: "#7ee787",
+            attribute: "#79c0ff",
+            literal: "#79c0ff",
+            deleted: "#ffa198",
+            inserted: "#aff5b4",
+        },
+    },
+};
+const getCodeBlockTheme = (theme) => {
+    if (theme.palette.codeBlock)
+        return theme.palette.codeBlock;
+    return theme.palette.mode === "DARK"
+        ? codeBlockFallbacks.dark
+        : codeBlockFallbacks.light;
+};
 const getImageFilesFromClipboard = (clipboardData) => {
     return Array.from(clipboardData.files).filter((file) => file.type.includes("image/"));
 };
@@ -272,25 +334,86 @@ const StyledContent = styled.div `
     word-break: break-word;
     text-rendering: optimizeLegibility;
 
+    .tableWrapper {
+      max-width: 100%;
+      overflow-x: auto;
+      padding: 5px 0px;
+      cursor: default;
+
+      table {
+        cursor: text;
+      }
+    }
+
     table {
       border-collapse: collapse;
+      table-layout: fixed;
       width: 100%;
+      overflow: hidden;
 
       th,
       td {
         border: 1px solid ${({ theme }) => theme.palette.divider};
+        box-sizing: border-box;
         padding: 0.5rem;
-        min-width: 100px;
+        min-width: ${TABLE_CELL_MIN_WIDTH}px;
+        position: relative;
+        vertical-align: top;
       }
 
       // for table header
       th {
         border: 1px solid ${({ theme }) => theme.palette.divider};
         padding: 0.5rem;
-        min-width: 100px;
+        min-width: ${TABLE_CELL_MIN_WIDTH}px;
         background-color: ${({ theme }) => theme.palette.action.hover};
         font-weight: 500;
       }
+
+      [align="left"] {
+        text-align: left;
+      }
+
+      [align="center"] {
+        text-align: center;
+      }
+
+      [align="right"] {
+        text-align: right;
+      }
+    }
+
+    .column-resize-handle {
+      position: absolute;
+      top: 0;
+      right: -1px;
+      bottom: 0;
+      z-index: 20;
+      width: 2px;
+      background-color: ${({ theme }) => theme.palette.primary.main};
+      pointer-events: none;
+    }
+
+    &.resize-cursor {
+      cursor: col-resize;
+    }
+
+    .selectedCell::after {
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+      background-color: ${({ theme }) => theme.palette.primary.main}22;
+      content: "";
+      pointer-events: none;
+    }
+
+    .monolith-table-rail-target::after {
+      position: absolute;
+      inset: 0;
+      z-index: 3;
+      background-color: ${({ theme }) => theme.palette.primary.main}18;
+      content: "";
+      pointer-events: none;
     }
 
     h1 {
@@ -317,6 +440,158 @@ const StyledContent = styled.div `
       margin: 0;
       line-height: 1.5rem;
     }
+    .editor-inline-code,
+    :not(pre) > code {
+      padding: 0.1rem 0.25rem;
+      border: 1px solid ${({ theme }) => theme.palette.divider};
+      border-radius: 4px;
+      background-color: ${({ theme }) => theme.palette.action.hover};
+      color: ${({ theme }) => theme.palette.text.secondary};
+      font-family:
+        ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas,
+        "Liberation Mono", "Courier New", monospace;
+      font-size: 0.9em;
+      box-decoration-break: clone;
+    }
+    .editor-code-block {
+      position: relative;
+      margin: 0.5rem 0;
+      padding: 1rem 0.875rem;
+      overflow-x: auto;
+      border: 1px solid ${({ theme }) => getCodeBlockTheme(theme).border};
+      border-radius: 6px;
+      background-color: ${({ theme }) => getCodeBlockTheme(theme).background};
+      color: ${({ theme }) => getCodeBlockTheme(theme).text};
+      font-family:
+        ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas,
+        "Liberation Mono", "Courier New", monospace;
+      font-size: 0.85rem;
+      line-height: 1.45rem;
+      white-space: pre;
+
+      ::selection {
+        background-color: ${({ theme }) => getCodeBlockTheme(theme).selection};
+      }
+
+      &[data-wrap="true"] {
+        white-space: pre-wrap;
+        word-break: break-word;
+        overflow-wrap: anywhere;
+      }
+
+      code {
+        display: block;
+        min-width: max-content;
+        padding: 0;
+        border: 0;
+        background-color: transparent;
+        color: inherit;
+        font: inherit;
+      }
+
+      &[data-wrap="true"] code {
+        min-width: 0;
+        white-space: inherit;
+      }
+
+      .editor-code-block-actions {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top: 0.4rem;
+        right: 0.4rem;
+        z-index: 1;
+        gap: 0.25rem;
+        opacity: 0;
+        transition: opacity 120ms ease-in-out;
+      }
+
+      &:hover .editor-code-block-actions,
+      &:focus-within .editor-code-block-actions {
+        opacity: 1;
+      }
+
+      .hljs-comment,
+      .hljs-quote {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.comment};
+      }
+
+      .hljs-punctuation {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.punctuation};
+      }
+
+      .hljs-property,
+      .hljs-attr,
+      .hljs-attribute,
+      .hljs-doctag {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.property};
+      }
+
+      .hljs-selector-tag,
+      .hljs-selector-id,
+      .hljs-selector-class,
+      .hljs-selector-attr,
+      .hljs-selector-pseudo {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.selector};
+      }
+
+      .hljs-operator,
+      .hljs-params {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.operator};
+      }
+
+      .hljs-keyword,
+      .hljs-meta .hljs-keyword,
+      .hljs-template-tag,
+      .hljs-template-variable {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.keyword};
+      }
+
+      .hljs-string,
+      .hljs-regexp {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.string};
+      }
+
+      .hljs-number {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.number};
+      }
+
+      .hljs-title,
+      .hljs-title.function_,
+      .hljs-title.class_ {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.function};
+      }
+
+      .hljs-variable,
+      .hljs-name,
+      .hljs-section,
+      .hljs-symbol {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.variable};
+      }
+
+      .hljs-tag {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.tag};
+      }
+
+      .hljs-built_in,
+      .hljs-type,
+      .hljs-literal {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.literal};
+      }
+
+      .hljs-meta,
+      .hljs-link {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.attribute};
+      }
+
+      .hljs-deletion {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.deleted};
+      }
+
+      .hljs-addition {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.inserted};
+      }
+    }
     ul {
       margin: 0;
     }
@@ -330,8 +605,6 @@ const StyledContent = styled.div `
       color: ${({ theme }) => theme.palette.text.primary};
       text-decoration: underline;
       cursor: pointer;
-      // Set title attribute
-      title: "Click to open link";
     }
     img {
       max-width: 100%;
@@ -349,6 +622,7 @@ const StyledContent = styled.div `
     color: #888;
     pointer-events: none;
     height: 0;
+    white-space: nowrap;
   }
   .ProseMirror .is-empty::before {
     content: attr(data-placeholder);
@@ -356,6 +630,7 @@ const StyledContent = styled.div `
     color: #888;
     pointer-events: none;
     height: 0;
+    white-space: nowrap;
   }
 
   .ProseMirror .monolith-image.uploading {
@@ -543,16 +818,104 @@ const StyledContent = styled.div `
     margin: 0 0.125rem;
   }
 `;
-export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = "", value, readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, handleImageUrlUpload, style, }) => {
+export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = "", value, readOnly = false, font, showToolbar = true, saving = false, disabledExtensions = [], extensionPreset = "basic", extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, handleImageUrlUpload, style, }) => {
+    const resolvedExtensions = useMemo(() => resolveExtensions({
+        disabledExtensions,
+        extensionPreset,
+        extensions,
+    }), [disabledExtensions, extensionPreset, extensions]);
+    const resolvedExtensionSet = useMemo(() => new Set(resolvedExtensions), [resolvedExtensions]);
+    const resolvedSlashCommands = useMemo(() => slashCommands.filter((command) => {
+        if (command === SlashCommands.Code) {
+            return resolvedExtensionSet.has(Extensions.Code);
+        }
+        if (command === SlashCommands.CodeBlock) {
+            return resolvedExtensionSet.has(Extensions.CodeBlock);
+        }
+        if (command === SlashCommands.Table) {
+            return resolvedExtensionSet.has(Extensions.Table);
+        }
+        return true;
+    }), [resolvedExtensionSet, slashCommands]);
+    const resolvedToolbarOptions = useMemo(() => {
+        if (!(toolbarOptions === null || toolbarOptions === void 0 ? void 0 : toolbarOptions.controls))
+            return toolbarOptions;
+        const controlExtensionMap = {
+            [Controls.BOLD]: Extensions.Bold,
+            [Controls.ITALIC]: Extensions.Italic,
+            [Controls.UNDERLINE]: Extensions.Underline,
+            [Controls.STRIKE]: Extensions.Strike,
+            [Controls.CODE]: Extensions.Code,
+            [Controls.CODE_BLOCK]: Extensions.CodeBlock,
+            [Controls.BULLET_LIST]: Extensions.BulletList,
+            [Controls.ORDERED_LIST]: Extensions.OrderedList,
+            [Controls.COLOR]: Extensions.Color,
+            [Controls.HIGHLIGHT]: Extensions.Highlight,
+            [Controls.LINK]: Extensions.Link,
+            [Controls.TEXT_ALIGN_LEFT]: Extensions.TextAlign,
+            [Controls.TEXT_ALIGN_CENTER]: Extensions.TextAlign,
+            [Controls.TEXT_ALIGN_RIGHT]: Extensions.TextAlign,
+            [Controls.TEXT_ALIGN_JUSTIFIED]: Extensions.TextAlign,
+            [Controls.TABLE]: Extensions.Table,
+        };
+        return Object.assign(Object.assign({}, toolbarOptions), { controls: toolbarOptions.controls.filter((control) => {
+                if (typeof control !== "string")
+                    return true;
+                const extension = controlExtensionMap[control];
+                return !extension || resolvedExtensionSet.has(extension);
+            }) });
+    }, [resolvedExtensionSet, toolbarOptions]);
     const isControlled = value !== undefined;
-    const hasImageExtension = extensions.includes(Extensions.Image);
-    const hasSlashCommandExtension = extensions.includes(Extensions.SlashCommand);
-    const hasImageSlashCommand = hasSlashCommandExtension && slashCommands.includes(SlashCommands.Image);
+    const hasImageExtension = resolvedExtensionSet.has(Extensions.Image);
+    const hasSlashCommandExtension = resolvedExtensionSet.has(Extensions.SlashCommand);
+    const hasBubbleMenuExtension = resolvedExtensionSet.has(Extensions.BubbleMenu);
+    const hasTableExtension = resolvedExtensionSet.has(Extensions.Table);
+    const hasImageSlashCommand = hasSlashCommandExtension &&
+        resolvedSlashCommands.includes(SlashCommands.Image);
     const onChangeRef = useRef(onChange);
+    const bubbleMenuPortalRef = useRef(null);
     const [fontState, setFontState] = useState(font || Fonts.DEFAULT);
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
+    const getBubbleMenuPortalRoot = useCallback(() => {
+        if (bubbleMenuPortalRef.current) {
+            return bubbleMenuPortalRef.current;
+        }
+        const portal = document.createElement("div");
+        portal.setAttribute("data-monolith-bubble-menu-portal", "");
+        document.body.appendChild(portal);
+        bubbleMenuPortalRef.current = portal;
+        return portal;
+    }, []);
+    useEffect(() => {
+        return () => {
+            var _a;
+            (_a = bubbleMenuPortalRef.current) === null || _a === void 0 ? void 0 : _a.remove();
+            bubbleMenuPortalRef.current = null;
+        };
+    }, []);
+    const shouldShowBubbleMenu = useCallback(({ editor, element, view, state, from, to }) => {
+        const { selection } = state;
+        const isChildOfMenu = element.contains(document.activeElement);
+        const hasEditorFocus = view.hasFocus() || isChildOfMenu;
+        const selectedText = state.doc.textBetween(from, to).trim();
+        const isEmptyTextBlock = !selectedText && isTextSelection(state.selection);
+        if (!hasEditorFocus ||
+            selection.empty ||
+            isEmptyTextBlock ||
+            !editor.isEditable) {
+            return false;
+        }
+        return true;
+    }, []);
+    const bubbleMenuPositionOptions = useMemo(() => ({
+        strategy: "fixed",
+        placement: "top",
+        offset: 8,
+        flip: false,
+        shift: { padding: 10 },
+    }), []);
     if (hasImageSlashCommand && !hasImageExtension) {
         throw new Error("Extensions.Image is required when using the Image slash command.");
     }
@@ -566,12 +929,29 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
         editable: !readOnly,
         shouldRerenderOnTransaction: true,
         extensions: getTipTapExtensions({
-            extensions,
-            slashCommands,
-            bubbleMenuOptions,
+            disabledExtensions,
+            extensions: resolvedExtensions,
+            slashCommands: resolvedSlashCommands,
             handleImageUpload,
         }),
         editorProps: {
+            handleClick: (view, pos, event) => {
+                const linkRange = getLinkRangeAtPosition(view.state, pos);
+                const linkAttributes = getLinkAttributesAtPosition(view.state, pos);
+                if (!linkRange || !(linkAttributes === null || linkAttributes === void 0 ? void 0 : linkAttributes.href))
+                    return false;
+                const mouseEvent = event;
+                mouseEvent.preventDefault();
+                mouseEvent.stopPropagation();
+                const shouldOpenLink = mouseEvent.metaKey || mouseEvent.ctrlKey || !view.editable;
+                if (shouldOpenLink) {
+                    openLink(linkAttributes.href);
+                    return true;
+                }
+                view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, linkRange.from, linkRange.to)));
+                view.focus();
+                return true;
+            },
             handlePaste: (view, event) => {
                 if (!hasImageExtension || !handleImageUpload)
                     return false;
@@ -632,5 +1012,5 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
     return (_jsx(StyledContent, { className: className, children: _jsxs(RichTextEditorContext.Provider, { value: {
                 font: fontState,
                 setFont: setFontState,
-            }, children: [showToolbar && (_jsx(Toolbar, { editor: editor, toolbarOptions: toolbarOptions })), saving && _jsx(SaveBadge, {}), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": fontState || null, style: style })] }) }));
+            }, children: [showToolbar && (_jsx(Toolbar, { editor: editor, toolbarOptions: resolvedToolbarOptions })), saving && _jsx(SaveBadge, {}), editor && hasBubbleMenuExtension && (_jsx(TiptapBubbleMenu, { editor: editor, pluginKey: "bubbleMenu", updateDelay: 200, appendTo: getBubbleMenuPortalRoot, shouldShow: shouldShowBubbleMenu, options: bubbleMenuPositionOptions, children: _jsx(BubbleMenuContent, { editor: editor, customMenuItems: bubbleMenuOptions === null || bubbleMenuOptions === void 0 ? void 0 : bubbleMenuOptions.customMenuItems }) })), editor && hasTableExtension && _jsx(TableRails, { editor: editor }), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": fontState || null, style: style })] }) }));
 };

package/dist/RichTextEditor/Toolbar/Control.d.ts

@@ -1,13 +1,17 @@
 import { Editor } from "@tiptap/react";
+import { ButtonProps } from "../../Button";
 export type ControlProps = {
     className?: string;
     editor: Editor | null;
     isActive?: any;
-    operation: {
+    operation?: {
         name: string;
         attributes?: any;
     };
+    onClick?: (editor: Editor | null) => void;
+    disabled?: boolean;
     label: string;
     icon: any;
+    size?: ButtonProps["size"];
 };
-export declare const Control: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ControlProps, never>> & string & Omit<({ className, editor, isActive, operation, label, icon: Icon, }: ControlProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const Control: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ControlProps, never>> & string & Omit<({ className, editor, isActive, operation, onClick, disabled, label, icon: Icon, size, }: ControlProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/dist/RichTextEditor/Toolbar/Control.js

@@ -1,23 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import Labels from "./Labels";
-export const Control = styled(({ className, editor, isActive, operation, label, icon: Icon, }) => {
+import { Button } from "../../Button";
+export const Control = styled(({ className, editor, isActive, operation, onClick, disabled, label, icon: Icon, size = "xs", }) => {
     var _a;
     const _label = Labels[label];
     const active = (isActive === null || isActive === void 0 ? void 0 : isActive.name)
         ? (_a = editor === null || editor === void 0 ? void 0 : editor.isActive) === null || _a === void 0 ? void 0 : _a.call(editor, isActive.name, isActive.attributes)
         : false;
-    return (_jsx("button", { className: className + (active ? " active" : ""), "aria-label": _label, "data-active": active, title: _label, onClick: () => {
+    return (_jsx(Button, { className: className + (active ? " active" : ""), "aria-label": _label, "data-active": active, title: _label, disabled: disabled, onClick: () => {
+            if (onClick) {
+                onClick(editor);
+                return;
+            }
+            if (!operation)
+                return;
             const focus = editor === null || editor === void 0 ? void 0 : editor.chain().focus();
             focus[operation.name](operation.attributes).run();
-        }, children: _jsx(Icon, { size: "16px" }) }));
+        }, size: size, children: _jsx(Icon, { size: "16px" }) }));
 }) `
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0px;
+
+  padding: 5px;
+
   background-color: transparent;
   cursor: pointer;
   color: ${({ theme }) => theme.palette.text.primary};

package/dist/RichTextEditor/Toolbar/Controls.d.ts

@@ -4,10 +4,16 @@ interface ControlProps {
 }
 export declare const UndoControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const RedoControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FontControl: () => import("react/jsx-runtime").JSX.Element;
+export declare const TextColorControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HighlightControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ClearFormattingControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const BoldControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ItalicControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const UnderlineControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const StrikeThroughControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeBlockControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading1Control: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading2Control: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading3Control: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;