@rh-support/components 2.4.3-beta.5 → 2.5.0

package/lib/esm/InlineEdit/inlineEdit.css

@@ -28,3 +28,25 @@
 .hide-in-pdf {
     display: none !important;
 }
+
+@media (max-width: 401px) {
+    .edit-actions {
+        top: 4.75rem !important;
+        margin-right: -1rem !important;
+    }
+
+    .pull-right {
+        margin-top: 2rem;
+    }
+}
+
+@media (max-width: 417px) and (min-width: 401px) {
+    .edit-actions {
+        top: 7rem !important;
+        margin-right: -1rem !important;
+    }
+
+    .pull-right {
+        margin-top: 2rem;
+    }
+}

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,qBAy1B5C;kBAz1BQ,cAAc;;;AA61BvB,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;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"}

package/lib/esm/MarkdownEditor/MarkdownEditor.js

@@ -54,9 +54,9 @@ const defaultProps = {
 };
 function MarkdownEditor(props) {
     const { t } = useTranslation();
-    const { hidePreviewText, showPreviewText, mdPlaceholder, plainTextPlaceholder, textAreaClassName, bindTextArea, markedownOptions, allowEmoji, hideHeadingOptions, rows, showMarkdownPlainTextToggle, editorMode, className, charLimit, minCharsForCounter, id, 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", "onCommentExceedCharsLimit", "fileSelectorProps"]);
+    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"]);
     const [isPreview, setIsPreview] = useState(false);
-    const [mdValue, setMdValue] = useState(props.value);
+    const [mdValue, setMdValue] = useState(props.value || '');
     const previousFileList = usePrevious(filesList);
     const [isPlainModeEnabled, setIsPlainModeEnabled] = useState(showMarkdownPlainTextToggle && props.editorMode === EditorMode.PLAIN ? true : false);
     const textareaRef = useRef(null);
@@ -157,16 +157,26 @@ function MarkdownEditor(props) {
         const mode = isPlainMode ? EditorMode.PLAIN : EditorMode.MARKDOWN;
         props.onChange(mdValue, mode);
     };
+    // Add this useEffect to properly initialize the mdValue when component mounts
     useEffect(() => {
-        if (mdValue !== props.value) {
-            setMdValue(props.value);
+        setMdValue(props.value || '');
+    }, [props.value]);
+    // Update the existing useEffect to handle both value and editorMode changes
+    useEffect(() => {
+        if (value !== mdValue) {
+            setMdValue(value);
         }
-    }, [mdValue, props.value]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
     useEffect(() => {
-        const isPlainMode = props.editorMode === EditorMode.PLAIN ? true : false;
-        if (isPlainMode === isPlainModeEnabled)
-            return;
-        onModeChange(isPlainMode);
+        const isPlainMode = props.editorMode === EditorMode.PLAIN;
+        if (isPlainMode !== isPlainModeEnabled) {
+            setIsPlainModeEnabled(isPlainMode);
+            isPlainModeEnabledRef.current = isPlainMode;
+            if (isPlainMode && isPreview) {
+                setIsPreview(false);
+            }
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.editorMode]);
     useEffect(() => {
@@ -183,8 +193,8 @@ function MarkdownEditor(props) {
     }, [mdValue], 500);
     const onValueChangeLocal = (text) => {
         const mode = showMarkdownPlainTextToggle && isPlainModeEnabled ? EditorMode.PLAIN : EditorMode.MARKDOWN;
-        props.onChange(text, mode);
         setMdValue(text);
+        props.onChange(text, mode);
     };
     const textChanged = (event) => {
         let value = event.target.value;
@@ -192,7 +202,12 @@ function MarkdownEditor(props) {
             value = value.replace(emojiPattern, '').trim();
         }
         onValueChangeLocal(value);
-        charLimit - value.length < 0 ? props.onCommentExceedCharsLimit(true) : props.onCommentExceedCharsLimit(false);
+        // Add a null check before calling onCommentExceedCharsLimit
+        if (props.onCommentExceedCharsLimit) {
+            charLimit - value.length < 0
+                ? props.onCommentExceedCharsLimit(true)
+                : props.onCommentExceedCharsLimit(false);
+        }
     };
     const hasSelection = () => {
         return textareaRef.current.selectionStart !== textareaRef.current.selectionEnd;
@@ -212,11 +227,12 @@ function MarkdownEditor(props) {
             templateEnd +
             trailingWhitespace +
             currentText.substring(posEnd);
-        onValueChangeLocal(newText);
+        // 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.focus();
+        // Call onValueChangeLocal only once
         onValueChangeLocal(newText);
     };
     const wrapBasedOnNewLines = () => {
@@ -432,7 +448,7 @@ function MarkdownEditor(props) {
                         showFileSelectorInToolbar && (React.createElement(Dropdown, { onSelect: onFileSelectLocal, id: "md-editor-toolbar-file-selector", toggle: React.createElement(DropdownToggle, { "aria-label": "file selector", onToggle: (_event, isOpen) => onFileSelectToggle(isOpen), isDisabled: props.disabled || isPreview },
                                 React.createElement(ImageIcon, null)), dropdownItems: getFileSelectorList(), tabIndex: -1, isPlain: true, menuAppendTo: document.body, isOpen: isFileSelectorOpen, "data-tracking-id": "md-editor-toolbar-file-selector" }))),
                     React.createElement(ToolbarItem, null, markdownGuidanceBtn)),
-                React.createElement(Toolbar, null,
+                React.createElement(Toolbar, { className: "mobile-markdown-toolbar" },
                     React.createElement("div", { className: "mobile-markdown-toolbar" },
                         React.createElement(ToolbarGroup, { spaceItems: { default: 'spaceItemsNone' }, "data-tracking-id": "mobile-md-editor-toolbar", className: "markdown-toolbar-left-section" },
                             !props.hideHeadingOptions && (React.createElement(Dropdown, { isText: true, isPlain: true, onSelect: onHeadingSelect, toggle: React.createElement(DropdownToggle, { id: "heading-selector", onToggle: onToggle }, "Heading"), isOpen: isHeadingDropdownOpen, dropdownItems: [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/components",
-    "version": "2.4.3-beta.5",
+    "version": "2.5.0",
     "description": "Contains all reusabel components for support app",
     "author": "Vikas Rathee <vrathee@redhat.com>",
     "license": "ISC",
@@ -70,8 +70,8 @@
         "@patternfly/react-table": "5.1.1",
         "@patternfly/react-tokens": "^5.4.0",
         "@rh-support/types": "2.0.5",
-        "@rh-support/user-permissions": "2.4.3-beta.5",
-        "@rh-support/utils": "2.4.3-beta.5",
+        "@rh-support/user-permissions": "2.5.0",
+        "@rh-support/utils": "2.5.0",
         "dompurify": "^2.2.6",
         "downshift": "^6.0.5",
         "js-worker-search": "^1.4.1",
@@ -111,5 +111,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "259d82237f1bce282e2d569e85b32233d3c4a4a6"
+    "gitHead": "d867a78014ee4a08aa8d7bf9e0dc9bd08ce6ac5a"
 }