@rh-support/components 2.5.0 → 2.5.1

package/lib/esm/MarkdownEditor/MarkdownEditor.d.ts

@@ -37,6 +37,10 @@ export interface IMDEditorProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'on
     onCommentExceedCharsLimit: (val: boolean) => void;
     fileSelectorProps?: Partial<IFileSelectorProps>;
 }
+export declare const validateFile: (file: Partial<IAttachment>) => {
+    isValid: boolean;
+    errorMsg: string;
+};
 declare function MarkdownEditor(props: IMDEditorProps): React.JSX.Element;
 declare namespace MarkdownEditor {
     var defaultProps: Partial<IMDEditorProps>;

package/lib/esm/MarkdownEditor/MarkdownEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../src/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAwB,MAAM,qBAAqB,CAAC;AAgC7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAKtE,oBAAY,UAAU;IAClB,KAAK,cAAc;IACnB,QAAQ,aAAa;CACxB;AAED,UAAU,kBAAkB;IACxB,yBAAyB,EAAE,OAAO,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAChD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yBAAyB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnD;AAuBD,iBAAS,cAAc,CAAC,KAAK,EAAE,cAAc,qBA62B5C;kBA72BQ,cAAc;;;AAi3BvB,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../src/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAwB,MAAM,qBAAqB,CAAC;AAgC7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAMtE,oBAAY,UAAU;IAClB,KAAK,cAAc;IACnB,QAAQ,aAAa;CACxB;AAED,UAAU,kBAAkB;IACxB,yBAAyB,EAAE,OAAO,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAChD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtG,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yBAAyB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CACnD;AA0BD,eAAO,MAAM,YAAY,SAAU,OAAO,CAAC,WAAW,CAAC,KAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAc7F,CAAC;AAEF,iBAAS,cAAc,CAAC,KAAK,EAAE,cAAc,qBAi8B5C;kBAj8BQ,cAAc;;;AAq8BvB,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/lib/esm/MarkdownEditor/MarkdownEditor.js

@@ -27,6 +27,7 @@ import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useDebounce, usePrevious, useUndo } from '../hooks';
+import { ToastNotification } from '../index';
 export var EditorMode;
 (function (EditorMode) {
     EditorMode["PLAIN"] = "plaintext";
@@ -52,6 +53,21 @@ const defaultProps = {
         showFileSelectorInToolbar: false,
     },
 };
+const MAX_FILE_SIZE = 2 * 1024; // 2MB in KB
+const ALLOWED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/gif'];
+export const validateFile = (file) => {
+    // Check file type
+    if (!ALLOWED_FILE_TYPES.includes(file.fileType)) {
+        // ToastNotification.addDangerMessage(t('Invalid file type, Only JPEG, PNG, GIF files are allowed.'));
+        return { isValid: false, errorMsg: 'Invalid file type, Only JPEG, PNG, GIF files are allowed.' };
+    }
+    // Check file size
+    if (file.sizeKB > MAX_FILE_SIZE) {
+        // ToastNotification.addDangerMessage(t('File too large, File size must be less than 2MB'));
+        return { isValid: false, errorMsg: 'File too large, File size must be less than 2MB' };
+    }
+    return { isValid: true, errorMsg: '' };
+};
 function MarkdownEditor(props) {
     const { t } = useTranslation();
     const { hidePreviewText, showPreviewText, mdPlaceholder, plainTextPlaceholder, textAreaClassName, bindTextArea, markedownOptions, allowEmoji, hideHeadingOptions, rows, showMarkdownPlainTextToggle, editorMode, className, charLimit, minCharsForCounter, id, value, onCommentExceedCharsLimit, fileSelectorProps: { onClipboardPaste, onFileDelete, onFileSelect, isSupportedFile, showFileSelectorInToolbar = false, isUploadingFile = false, filesList = [], attachFileBtn, } } = props, textAreaProps = __rest(props, ["hidePreviewText", "showPreviewText", "mdPlaceholder", "plainTextPlaceholder", "textAreaClassName", "bindTextArea", "markedownOptions", "allowEmoji", "hideHeadingOptions", "rows", "showMarkdownPlainTextToggle", "editorMode", "className", "charLimit", "minCharsForCounter", "id", "value", "onCommentExceedCharsLimit", "fileSelectorProps"]);
@@ -77,6 +93,12 @@ function MarkdownEditor(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [filesList]);
     const onFileInsert = (file) => {
+        const { isValid, errorMsg } = validateFile(file);
+        if (!isValid) {
+            ToastNotification.addDangerMessage(t(errorMsg));
+            return;
+        }
+        // Create markdown image syntax
         const template = isImageFile(file.fileType)
             ? `![${file.fileName}](${file.link})`
             : `[${file.fileName}](${file.link})`;
@@ -220,17 +242,93 @@ function MarkdownEditor(props) {
         const whitespaceEdges = selectedText.match(/^\s*|\s*$/g) || [];
         const leadingWhitespace = whitespaceEdges[0] || '';
         const trailingWhitespace = whitespaceEdges[1] || '';
+        const trimmedText = selectedText.trim();
+        let coreText = trimmedText;
+        // Check existing formatting
+        const existingFormats = {
+            h1: coreText.startsWith('# '),
+            h2: coreText.startsWith('## '),
+            h3: coreText.startsWith('### '),
+            bold: coreText.startsWith('**') && coreText.endsWith('**'),
+            italic: coreText.startsWith('_') && coreText.endsWith('_'),
+            quote: coreText.startsWith('> '),
+            link: coreText.match(/^\[.*\]\(.*\)$/),
+        };
+        // Remove existing formatting to get core text
+        if (existingFormats.h1)
+            coreText = coreText.substring(2);
+        else if (existingFormats.h2)
+            coreText = coreText.substring(3);
+        else if (existingFormats.h3)
+            coreText = coreText.substring(4);
+        if (existingFormats.bold)
+            coreText = coreText.substring(2, coreText.length - 2);
+        if (existingFormats.italic)
+            coreText = coreText.substring(1, coreText.length - 1);
+        if (existingFormats.quote)
+            coreText = coreText.substring(2);
+        if (existingFormats.link) {
+            const match = coreText.match(/^\[(.*)\]\((.*)\)$/);
+            if (match)
+                coreText = match[1];
+        }
+        // Determine what formatting we're adding
+        const newFormat = {
+            h1: templateStart === '# ' && templateEnd === '',
+            h2: templateStart === '## ' && templateEnd === '',
+            h3: templateStart === '### ' && templateEnd === '',
+            bold: templateStart === '**' && templateEnd === '**',
+            italic: templateStart === '_' && templateEnd === '_',
+            quote: templateStart === '> ' && (templateEnd === '' || templateEnd === '\n'),
+            link: templateEnd.includes(']('),
+        };
+        // Apply formatting
+        let formattedText = coreText;
+        // First apply inline formatting (bold, italic)
+        if (newFormat.italic && !existingFormats.italic) {
+            formattedText = `_${formattedText}_`;
+        }
+        if (existingFormats.italic && !newFormat.italic) {
+            formattedText = `_${formattedText}_`;
+        }
+        if (newFormat.bold && !existingFormats.bold) {
+            formattedText = `**${formattedText}**`;
+        }
+        if (existingFormats.bold && !newFormat.bold) {
+            formattedText = `**${formattedText}**`;
+        }
+        // Then apply block-level formatting (headings, quotes)
+        if (newFormat.h1 || existingFormats.h1) {
+            formattedText = `# ${formattedText}`;
+        }
+        else if (newFormat.h2 || existingFormats.h2) {
+            formattedText = `## ${formattedText}`;
+        }
+        else if (newFormat.h3 || existingFormats.h3) {
+            formattedText = `### ${formattedText}`;
+        }
+        // Handle quotes - keep them at the start of the line
+        if (newFormat.quote || existingFormats.quote) {
+            formattedText = `> ${formattedText}`;
+        }
+        // Special handling for links
+        if (newFormat.link) {
+            formattedText = `[${formattedText}](URL "TITLE")`;
+        }
+        if (existingFormats.link && !newFormat.link) {
+            const match = trimmedText.match(/^\[(.*)\]\((.*)\)$/);
+            if (match)
+                formattedText = `[${formattedText}](${match[2]})`;
+        }
         const newText = currentText.substring(0, posStart) +
             leadingWhitespace +
-            templateStart +
-            selectedText.trim() +
-            templateEnd +
+            formattedText +
             trailingWhitespace +
             currentText.substring(posEnd);
         // Set the value in the textarea
         textareaRef.current.value = newText;
-        textareaRef.current.selectionStart = posEnd + templateStart.length + templateEnd.length;
-        textareaRef.current.selectionEnd = textareaRef.current.selectionStart;
+        textareaRef.current.selectionStart = posStart + leadingWhitespace.length;
+        textareaRef.current.selectionEnd = posStart + leadingWhitespace.length + formattedText.length;
         textareaRef.current.focus();
         // Call onValueChangeLocal only once
         onValueChangeLocal(newText);
@@ -315,7 +413,7 @@ function MarkdownEditor(props) {
     };
     const quote = () => {
         if (hasSelection()) {
-            wrapSelection('> ', '\n');
+            wrapSelection('> ', '');
         }
         else {
             insert('> QUOTE', 2, 7);

package/lib/esm/TagsSelector/TagsSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagsSelector.d.ts","sourceRoot":"","sources":["../../../src/TagsSelector/TagsSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAmB3B,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,UAAU,MAAM;IACZ,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,WAAW,EACX,EAAE,EACF,SAAS,EACT,YAAiB,EACjB,QAAgB,GACnB,EAAE,MAAM,qBAuJR"}
+{"version":3,"file":"TagsSelector.d.ts","sourceRoot":"","sources":["../../../src/TagsSelector/TagsSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAmB3B,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,UAAU,MAAM;IACZ,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,WAAW,EACX,EAAE,EACF,SAAS,EACT,YAAiB,EACjB,QAAgB,GACnB,EAAE,MAAM,qBA2JR"}

package/lib/esm/TagsSelector/TagsSelector.js

@@ -22,7 +22,8 @@ export function TagsSelector({ tagOptions, onChange, placeholder, id, typeahead,
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [query, tagOptions]);
     const { t } = useTranslation();
-    const onToggleClick = () => {
+    const onToggleClick = (e) => {
+        e.stopPropagation();
         setIsOpen(!isOpen);
     };
     const onSelect = (selection) => {
@@ -58,7 +59,7 @@ export function TagsSelector({ tagOptions, onChange, placeholder, id, typeahead,
             e.stopPropagation();
             onSelect(label);
         } }, label.tagName)))));
-    const toggle = (toggleRef) => (React.createElement(MenuToggle, Object.assign({ ref: toggleRef, onClick: onToggleClick, className: "pf-v5-u-flex-grow-1 tags-selector-menu-toggle", isExpanded: isOpen, onKeyDown: onInputKeyDown, disabled: isEmpty(tagOptions) || disabled }, (typeahead && { variant: 'typeahead' }), { id: id }), typeahead ? (React.createElement(TextInputGroup, { isPlain: true },
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, Object.assign({ ref: toggleRef, onClick: onToggleClick, className: `pf-v5-u-flex-grow-1 tags-selector-menu-toggle ${isEmpty(tagOptions) || disabled ? 'menu-is-disabld' : ''}`, isExpanded: isOpen, onKeyDown: onInputKeyDown, isDisabled: isEmpty(tagOptions) || disabled }, (typeahead && { variant: 'typeahead' }), { id: id, isFullWidth: true }), typeahead ? (React.createElement(TextInputGroup, { isPlain: true },
         React.createElement(TextInputGroupMain, { id: "tags-selector-search-input", value: query, onClick: onToggleClick, onChange: (e, v) => setQuery(v), onKeyDown: onInputKeyDown, innerRef: textInputRef, isExpanded: isOpen, placeholder: placeholder || t('Search for a tag') }, selectedChipGroup),
         React.createElement(TextInputGroupUtilities, null, selected.length > 0 && (React.createElement(Button, { variant: "plain", onClick: handleClear, "aria-label": "clear-all-tags" },
             React.createElement(TimesIcon, { "aria-hidden": true })))))) : (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' }, alignItems: { default: 'alignItemsCenter' } },

package/lib/esm/TagsSelector/tagSelector.css

@@ -9,3 +9,7 @@
 .tags-selector-menu-toggle .pf-v5-c-menu-toggle__controls {
     padding-left: 0;
 }
+
+.menu-is-disabld {
+    background-color: #d2d2d2 !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/components",
-    "version": "2.5.0",
+    "version": "2.5.1",
     "description": "Contains all reusabel components for support app",
     "author": "Vikas Rathee <vrathee@redhat.com>",
     "license": "ISC",
@@ -111,5 +111,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "d867a78014ee4a08aa8d7bf9e0dc9bd08ce6ac5a"
+    "gitHead": "78f51b2cfd60107a49503d13542ba46d29df4d04"
 }