@rh-support/components 2.4.10-beta.6 → 2.5.0

package/lib/cjs/MarkdownEditor/MarkdownEditor.js

@@ -1,437 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MarkdownEditor = exports.EditorMode = void 0;
-require("./markdownEditor.css");
-const ui_toolkit_1 = require("@cee-eng/ui-toolkit");
-const react_core_1 = require("@patternfly/react-core");
-const code_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/code-icon"));
-const image_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/image-icon"));
-const link_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/link-icon"));
-const list_ul_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/list-ul-icon"));
-const quote_right_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/quote-right-icon"));
-const trash_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/trash-icon"));
-const utils_1 = require("@rh-support/utils");
-const classnames_1 = __importDefault(require("classnames"));
-const dompurify_1 = __importDefault(require("dompurify"));
-const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
-const react_1 = __importStar(require("react"));
-const react_i18next_1 = require("react-i18next");
-const hooks_1 = require("../hooks");
-var EditorMode;
-(function (EditorMode) {
-    EditorMode["PLAIN"] = "plaintext";
-    EditorMode["MARKDOWN"] = "markdown";
-})(EditorMode = exports.EditorMode || (exports.EditorMode = {}));
-const defaultProps = {
-    value: '',
-    onChange: () => { },
-    id: '',
-    className: '',
-    hidePreviewText: 'Hide preview',
-    showPreviewText: 'Show preview',
-    textAreaClassName: '',
-    mdPlaceholder: 'Add a comment using markdown',
-    plainTextPlaceholder: 'Add a comment to this case',
-    allowEmoji: true,
-    hideHeadingOptions: false,
-    showMarkdownPlainTextToggle: false,
-    editorMode: EditorMode.PLAIN,
-    charLimit: 32000,
-    minCharsForCounter: 31800,
-    fileSelectorProps: {
-        showFileSelectorInToolbar: false,
-    },
-};
-function MarkdownEditor(props) {
-    const { t } = react_i18next_1.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 [isPreview, setIsPreview] = react_1.useState(false);
-    const [mdValue, setMdValue] = react_1.useState(props.value);
-    const previousFileList = hooks_1.usePrevious(filesList);
-    const [isPlainModeEnabled, setIsPlainModeEnabled] = react_1.useState(showMarkdownPlainTextToggle && props.editorMode === EditorMode.PLAIN ? true : false);
-    const textareaRef = react_1.useRef(null);
-    const { state, setURValue, undo, redo, resetURValue } = hooks_1.useUndo(props.value);
-    // for access inside event handlers
-    const isPlainModeEnabledRef = react_1.useRef(isPlainModeEnabled);
-    const [isFileSelectorOpen, setIsFileSelectorOpen] = react_1.useState(false);
-    const onFileSelectLocal = () => {
-        setIsFileSelectorOpen((open) => !open);
-    };
-    const onFileSelectToggle = (isOpen) => {
-        setIsFileSelectorOpen(isOpen);
-    };
-    react_1.useEffect(() => {
-        if ((previousFileList || []).length < (filesList || []).length && isUploadingFile) {
-            onFileInsert(filesList[0]);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filesList]);
-    const onFileInsert = (file) => {
-        const template = utils_1.isImageFile(file.fileType)
-            ? `![${file.fileName}](${file.link})`
-            : `[${file.fileName}](${file.link})`;
-        insert(template, 0, 0);
-        const currentStart = textareaRef.current.selectionStart;
-        textareaRef.current.setSelectionRange(currentStart + template.length, currentStart + template.length);
-        onFileSelect && onFileSelect(file);
-    };
-    function pastedFile(items) {
-        for (const item of items) {
-            if (isSupportedFile && isSupportedFile(item.type)) {
-                return item.getAsFile();
-            }
-        }
-        return null;
-    }
-    const onPaste = (event) => {
-        if (!event.clipboardData || isPlainModeEnabledRef.current)
-            return;
-        if (!event.clipboardData.items)
-            return;
-        const file = pastedFile(event.clipboardData.items);
-        if (!file)
-            return;
-        const files = [file];
-        event.preventDefault();
-        onClipboardPaste(files);
-    };
-    // To handle dropped images
-    const onDrop = (event) => {
-        if (!event.dataTransfer.files)
-            return;
-        const file = event.dataTransfer.files[0];
-        if (!file)
-            return;
-        const files = [file];
-        event.preventDefault();
-        onClipboardPaste(files);
-    };
-    const getFileSelectorList = () => {
-        const filesAsDropdownItems = filesList.map((file) => {
-            return (react_1.default.createElement(react_core_1.DropdownItem, { key: file.id, onClick: () => {
-                    onFileInsert(file);
-                } },
-                react_1.default.createElement(react_core_1.Flex, { flexWrap: { default: 'nowrap' } },
-                    react_1.default.createElement(react_core_1.FlexItem, null,
-                        react_1.default.createElement(react_core_1.Text, { component: react_core_1.TextVariants.small }, file.fileName)),
-                    onFileDelete && (react_1.default.createElement(react_core_1.FlexItem, { className: "pf-u-ml-auto" },
-                        react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, onClick: (event) => {
-                                onFileSelectToggle(false);
-                                onFileDelete(file);
-                                event.stopPropagation();
-                            } },
-                            react_1.default.createElement(trash_icon_1.default, { color: "#c9190b" })))))));
-        });
-        return [
-            ...filesAsDropdownItems,
-            ...(filesAsDropdownItems.length > 0 ? [react_1.default.createElement(react_core_1.DropdownSeparator, { key: "separator" })] : []),
-            react_1.default.createElement(react_core_1.DropdownItem, { key: "separated link", component: attachFileBtn }),
-        ];
-    };
-    const bindTextAreaRef = (ref) => {
-        textareaRef.current = ref;
-        if (props.bindTextArea)
-            props.bindTextArea(ref);
-    };
-    const onModeChange = (isPlainMode) => {
-        setIsPlainModeEnabled(isPlainMode);
-        isPlainModeEnabledRef.current = isPlainMode;
-        isPlainMode && isPreview && setIsPreview(false);
-        const mode = isPlainMode ? EditorMode.PLAIN : EditorMode.MARKDOWN;
-        props.onChange(mdValue, mode);
-    };
-    react_1.useEffect(() => {
-        if (mdValue !== props.value) {
-            setMdValue(props.value);
-        }
-    }, [mdValue, props.value]);
-    react_1.useEffect(() => {
-        const isPlainMode = props.editorMode === EditorMode.PLAIN ? true : false;
-        if (isPlainMode === isPlainModeEnabled)
-            return;
-        onModeChange(isPlainMode);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.editorMode]);
-    react_1.useEffect(() => {
-        // update state on undo redo
-        if (mdValue !== state.present) {
-            onValueChangeLocal(state.present);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state.present]);
-    hooks_1.useDebounce(() => {
-        if (isEmpty_1.default(mdValue))
-            return;
-        !isPlainModeEnabled && setURValue(mdValue);
-    }, [mdValue], 500);
-    const onValueChangeLocal = (text) => {
-        const mode = showMarkdownPlainTextToggle && isPlainModeEnabled ? EditorMode.PLAIN : EditorMode.MARKDOWN;
-        props.onChange(text, mode);
-        setMdValue(text);
-    };
-    const textChanged = (event) => {
-        let value = event.target.value;
-        if (!props.allowEmoji && utils_1.isEmojiPattern(value)) {
-            value = value.replace(utils_1.emojiPattern, '').trim();
-        }
-        onValueChangeLocal(value);
-        charLimit - value.length < 0 ? props.onCommentExceedCharsLimit(true) : props.onCommentExceedCharsLimit(false);
-    };
-    const hasSelection = () => {
-        return textareaRef.current.selectionStart !== textareaRef.current.selectionEnd;
-    };
-    const wrapSelection = (templateStart, templateEnd) => {
-        const currentText = textareaRef.current.value;
-        const posStart = textareaRef.current.selectionStart;
-        const posEnd = textareaRef.current.selectionEnd;
-        const selectedText = currentText.substring(posStart, posEnd);
-        const whitespaceEdges = selectedText.match(/^\s*|\s*$/g) || [];
-        const leadingWhitespace = whitespaceEdges[0] || '';
-        const trailingWhitespace = whitespaceEdges[1] || '';
-        const newText = currentText.substring(0, posStart) +
-            leadingWhitespace +
-            templateStart +
-            selectedText.trim() +
-            templateEnd +
-            trailingWhitespace +
-            currentText.substring(posEnd);
-        onValueChangeLocal(newText);
-        textareaRef.current.value = newText;
-        textareaRef.current.selectionStart = posEnd + templateStart.length + templateEnd.length;
-        textareaRef.current.selectionEnd = textareaRef.current.selectionStart;
-        textareaRef.current.focus();
-        onValueChangeLocal(newText);
-    };
-    const wrapBasedOnNewLines = () => {
-        const currentText = textareaRef.current.value;
-        const posStart = textareaRef.current.selectionStart;
-        const posEnd = textareaRef.current.selectionEnd;
-        const selectedText = currentText.substring(posStart, posEnd);
-        const splitText = selectedText.split('\n');
-        const newText = currentText
-            .substring(0, posStart)
-            .concat(splitText.map((v) => `- ${v}`).join('\n'), '\n', currentText.substring(posEnd));
-        onValueChangeLocal(newText);
-    };
-    const insert = (template, selectionStart, selectionEnd) => {
-        const currentText = textareaRef.current.value;
-        const pos = textareaRef.current.selectionStart;
-        const newText = currentText.substring(0, pos) + template + currentText.substring(pos);
-        onValueChangeLocal(newText);
-        textareaRef.current.value = newText;
-        textareaRef.current.selectionStart = pos + selectionStart;
-        textareaRef.current.selectionEnd = pos + (selectionEnd || selectionStart);
-        textareaRef.current.focus();
-        onValueChangeLocal(newText);
-    };
-    const bold = () => {
-        if (hasSelection()) {
-            wrapSelection('**', '**');
-        }
-        else {
-            insert('**TEXT**', 2, 6);
-        }
-    };
-    const italic = () => {
-        if (hasSelection()) {
-            wrapSelection('_', '_');
-        }
-        else {
-            insert('_TEXT_', 1, 5);
-        }
-    };
-    const h1 = () => {
-        if (hasSelection()) {
-            wrapSelection('# ', '');
-        }
-        else {
-            insert('# HEADING', 2, 9);
-        }
-    };
-    const h2 = () => {
-        if (hasSelection()) {
-            wrapSelection('## ', '');
-        }
-        else {
-            insert('## HEADING', 3, 10);
-        }
-    };
-    const h3 = () => {
-        if (hasSelection()) {
-            wrapSelection('### ', '');
-        }
-        else {
-            insert('### HEADING', 4, 11);
-        }
-    };
-    const list = () => {
-        if (hasSelection()) {
-            wrapBasedOnNewLines();
-        }
-        else {
-            insert('- ITEM', 2, 6);
-        }
-    };
-    const link = () => {
-        if (hasSelection()) {
-            wrapSelection('[', '](URL "TITLE")');
-        }
-        else {
-            insert('[LINK TEXT](URL "TITLE")', 1, 10);
-        }
-    };
-    const quote = () => {
-        if (hasSelection()) {
-            wrapSelection('> ', '\n');
-        }
-        else {
-            insert('> QUOTE', 2, 7);
-        }
-    };
-    const code = () => {
-        if (hasSelection()) {
-            wrapSelection('~~~\n', '\n~~~\n');
-        }
-        else {
-            insert('~~~\nCODE\n~~~\n', 4, 8);
-        }
-    };
-    const preview = () => {
-        setIsPreview((previewFlag) => !previewFlag);
-    };
-    const previewMDText = (mdText) => {
-        let text = mdText;
-        const markeddownOptions = Object.assign(Object.assign({}, props.markedownOptions), { openLinksInNewTab: true, gfm: true, breaks: true });
-        return ui_toolkit_1.parseCommentMarkdown(text, { openImagesInNewTab: false, lazyLoadImages: false }, markeddownOptions);
-    };
-    const keydown = (event) => {
-        if (event.ctrlKey) {
-            switch (event.key) {
-                case 'b':
-                    bold();
-                    utils_1.haltEvent(event);
-                    break;
-                case 'i':
-                    italic();
-                    utils_1.haltEvent(event);
-                    break;
-                case '1':
-                    h1();
-                    utils_1.haltEvent(event);
-                    break;
-                case '2':
-                    h2();
-                    utils_1.haltEvent(event);
-                    break;
-                case '3':
-                    h3();
-                    utils_1.haltEvent(event);
-                    break;
-                case 'z':
-                    undo();
-                    utils_1.haltEvent(event);
-                    break;
-                case 'y':
-                    redo();
-                    utils_1.haltEvent(event);
-                    break;
-            }
-        }
-    };
-    const getCharCountText = (comment) => {
-        const charCountLeft = charLimit - comment.length;
-        return (react_1.default.createElement("span", { className: `character-count-wrapper ${charCountLeft <= 0 ? 'red' : ''}` },
-            "(",
-            t(`{{charCountLeft}} characters left`, { charCountLeft }),
-            ")"));
-    };
-    const contentRows = (props.value && props.value.split('\n').length + 1) || 4;
-    // reset undo redo value after post comment
-    props.disabled && !isEmpty_1.default(state.present) && resetURValue('');
-    // editor is disabled and preview is true -> set preview to false
-    props.disabled && isPreview && setIsPreview(false);
-    const disablePreviewButton = mdValue === '';
-    return (react_1.default.createElement("div", { className: `markdown-editor-container ${props.className}`, id: props.id, "data-tracking-id": "md-editor-container", onDrop: onDrop, onPaste: onPaste },
-        react_1.default.createElement("div", { className: "toolbar-container border-bottom" }, !isPlainModeEnabled && (react_1.default.createElement(react_core_1.Toolbar, { className: "pf-l-flex" },
-            react_1.default.createElement(react_core_1.ToolbarGroup, { "data-tracking-id": "md-editor-toolbar", className: "markdown-toolbar-left-section pf-m-wrap" },
-                react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: bold, "data-tracking-id": "md-editor-toolbar-b", title: "Bold" }, "B"),
-                react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, tabIndex: -1, isDisabled: props.disabled || isPreview, onClick: italic, "data-tracking-id": "md-editor-toolbar-i", title: "Italic" }, "I"),
-                react_1.default.createElement("div", { className: "btn-group-separator" }),
-                !props.hideHeadingOptions && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(react_core_1.Button, { tabIndex: -1, variant: react_core_1.ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h1, title: "Heading 1", "data-tracking-id": "md-editor-toolbar-h1" }, "H1"),
-                    react_1.default.createElement(react_core_1.Button, { tabIndex: -1, variant: react_core_1.ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h2, title: "Heading 2", "data-tracking-id": "md-editor-toolbar-h2" }, "H2"),
-                    react_1.default.createElement(react_core_1.Button, { tabIndex: -1, variant: react_core_1.ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: h3, title: "Heading 3", "data-tracking-id": "md-editor-toolbar-h3" }, "H3"),
-                    react_1.default.createElement("div", { className: "btn-group-separator" }))),
-                react_1.default.createElement(react_core_1.Button, { tabIndex: -1, isDisabled: props.disabled || isPreview, variant: react_core_1.ButtonVariant.plain, onClick: list, title: "Bullet List", "data-tracking-id": "md-editor-toolbar-bul-list" },
-                    react_1.default.createElement(list_ul_icon_1.default, null)),
-                react_1.default.createElement("div", { className: "btn-group-separator" }),
-                react_1.default.createElement(react_core_1.Button, { tabIndex: -1, variant: react_core_1.ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: link, title: "Link", "data-tracking-id": "md-editor-toolbar-link" },
-                    react_1.default.createElement(link_icon_1.default, null)),
-                react_1.default.createElement(react_core_1.Button, { tabIndex: -1, variant: react_core_1.ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: quote, title: "Quote", "data-tracking-id": "md-editor-toolbar-quote" },
-                    react_1.default.createElement(quote_right_icon_1.default, null)),
-                react_1.default.createElement(react_core_1.Button, { tabIndex: -1, variant: react_core_1.ButtonVariant.plain, isDisabled: props.disabled || isPreview, onClick: code, title: "Code", "data-tracking-id": "md-editor-toolbar-code" },
-                    react_1.default.createElement(code_icon_1.default, null)),
-                showFileSelectorInToolbar && (react_1.default.createElement(react_core_1.Dropdown, { onSelect: onFileSelectLocal, id: "md-editor-toolbar-file-selector", toggle: react_1.default.createElement(react_core_1.DropdownToggle, { onToggle: onFileSelectToggle, isDisabled: props.disabled || isPreview },
-                        react_1.default.createElement(image_icon_1.default, null)), dropdownItems: getFileSelectorList(), tabIndex: -1, isPlain: true, menuAppendTo: document.body, isOpen: isFileSelectorOpen, "data-tracking-id": "md-editor-toolbar-file-selector" }))),
-            react_1.default.createElement(react_core_1.ToolbarItem, null,
-                react_1.default.createElement("a", { className: "pf-c-button pf-m-link pf-m-inline markdown-guidance", rel: "noopener noreferrer", target: "_blank", href: "/articles/4729621", "data-tracking-id": "md-guidance" },
-                    react_1.default.createElement(react_i18next_1.Trans, null, "Markdown guidance")))))),
-        react_1.default.createElement("div", { className: "markdown-content" }, !isPreview ? (react_1.default.createElement("textarea", Object.assign({}, textAreaProps, { onKeyDown: keydown, placeholder: isPlainModeEnabled ? t(props.plainTextPlaceholder) : t(props.mdPlaceholder), ref: bindTextAreaRef, className: classnames_1.default('form-control', 'markdown-text-area', props.textAreaClassName, 'textArea'), value: mdValue, onChange: textChanged, rows: props.rows || contentRows, style: { height: '313px' } }))) : (react_1.default.createElement("div", { className: "markdown-preview-placeholder", style: { height: '313px' } },
-            react_1.default.createElement("div", { className: "markdown-preview", style: { maxHeight: '313px' } },
-                react_1.default.createElement("div", { dangerouslySetInnerHTML: {
-                        __html: dompurify_1.default.sanitize(previewMDText(mdValue)),
-                    } }))))),
-        react_1.default.createElement("div", null, props.showMarkdownPlainTextToggle && (react_1.default.createElement("div", { className: `markdown-toggle-toolbar pf-l-flex` },
-            react_1.default.createElement("span", { className: "markdown-toolbar-left-section" },
-                !isPlainModeEnabled && (react_1.default.createElement(react_core_1.Button, { className: "markdown-preview-btn", tabIndex: -1, variant: react_core_1.ButtonVariant.link, onClick: preview, title: "Show preview", "data-tracking-id": `md-preview-${isPreview ? 'hide' : 'show'}`, isDisabled: disablePreviewButton }, isPreview ? (react_1.default.createElement("span", null,
-                    " ",
-                    t(hidePreviewText))) : (react_1.default.createElement("span", null,
-                    " ",
-                    t(showPreviewText))))),
-                isUploadingFile && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(react_i18next_1.Trans, null,
-                        react_1.default.createElement("small", { className: "pf-u-pl-md" },
-                            react_1.default.createElement(react_i18next_1.Trans, null, "Uploading File"))),
-                    react_1.default.createElement(react_core_1.Spinner, { className: "pf-u-ml-sm", size: "md" }))),
-                mdValue.length > props.minCharsForCounter && getCharCountText(mdValue)),
-            react_1.default.createElement("span", null,
-                react_1.default.createElement(react_core_1.Button, { variant: "plain", className: isPlainModeEnabled ? 'markdown-active-mode' : '', onClick: () => onModeChange(true), isDisabled: isPlainModeEnabled || isUploadingFile, "data-tracking-id": "md-editor-plaintext" },
-                    react_1.default.createElement(react_i18next_1.Trans, null, "Plain text")),
-                react_1.default.createElement(react_core_1.Button, { variant: "plain", className: !isPlainModeEnabled ? 'markdown-active-mode' : '', onClick: () => onModeChange(false), isDisabled: !isPlainModeEnabled, "data-tracking-id": "md-editor-md" },
-                    react_1.default.createElement(react_i18next_1.Trans, null, "Markdown"))))))));
-}
-exports.MarkdownEditor = MarkdownEditor;
-MarkdownEditor.defaultProps = defaultProps;

package/lib/cjs/MarkdownEditor/index.d.ts

@@ -1,2 +0,0 @@
-export * from './MarkdownEditor';
-//# sourceMappingURL=index.d.ts.map

package/lib/cjs/MarkdownEditor/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MarkdownEditor/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/lib/cjs/MarkdownEditor/index.js

@@ -1,13 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./MarkdownEditor"), exports);

package/lib/cjs/MarkdownEditor/markdownEditor.css

@@ -1,111 +0,0 @@
-.markdown-content .markdown-preview {
-    min-height: 100px;
-    overflow: auto;
-    font-size: 15px;
-    padding: 0.8rem;
-    border: 1px solid #e3e3e3;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-    border-radius: 1px;
-}
-
-.markdown-content .markdown-preview ul,
-.markdown-content .markdown-preview ol {
-    padding-left: 24px;
-}
-
-.markdown-content .markdown-preview blockquote {
-    border-left: 5px solid #c0c0c0 !important;
-}
-
-.markdown-editor-container {
-    background: #fff;
-    border: 1px solid #d2d2d2;
-    display: block;
-    min-height: 100px;
-    overflow: hidden;
-}
-
-.markdown-editor-container .pf-c-toolbar {
-    padding: 0.5rem;
-}
-
-.btn-group-separator {
-    background: rgba(40, 45, 51, 0.3);
-    height: 16px;
-    margin-left: 10px;
-    margin-right: 5px;
-    width: 1px;
-}
-
-.markdown-content .markdown-text-area {
-    resize: vertical;
-    border-radius: 0;
-    box-shadow: none !important;
-    outline: none;
-    border: none;
-    font-size: 15px;
-    padding: 0.8rem;
-    min-width: 100%;
-}
-
-.markdown-editor-container .markdown-toggle-toolbar {
-    border-top: 1px solid #d2d2d2;
-}
-
-.markdown-editor-container .markdown-toggle-toolbar button {
-    font-size: 14px;
-    padding: 10px 1rem;
-}
-
-.markdown-editor-container .markdown-toggle-toolbar .markdown-active-mode {
-    border-top: 2px solid #06c;
-    border-radius: 0px;
-    color: #6a6e73;
-    font-weight: 500;
-    color: #06c;
-}
-
-.markdown-editor-container .markdown-guidance {
-    padding-right: 12px;
-}
-
-.markdown-editor-container .character-count-wrapper {
-    white-space: nowrap;
-    padding: 0 16px;
-    font-size: 14px;
-}
-
-.markdown-editor-container .character-count-wrapper.red {
-    color: #e00;
-}
-
-.markdown-editor-container .markdown-toolbar-left-section {
-    flex: 1;
-}
-
-.markdown-editor-container.is-private .markdown-content .markdown-text-area {
-    background-color: #f5eeee;
-}
-
-a[href*='/attachments/']::before,
-button[data-link*='/attachments/']::before {
-    margin-right: 4px;
-    font-style: normal;
-    font-size: inherit;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    content: '📎';
-}
-
-.toolbar-container {
-    height: 50px;
-}
-.markdown-text-area {
-    width: 100%;
-    height: 313px;
-    border: none;
-}
-
-.markdown-preview {
-    border-bottom: none !important;
-}

package/lib/cjs/MoreOrLess/MoreOrLess.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-interface IProps {
-    maxHeight?: number;
-    children: any;
-    className?: string;
-    appStickyHeaderRef?: React.MutableRefObject<HTMLElement>;
-}
-declare function MoreOrLess(props: IProps): JSX.Element;
-declare namespace MoreOrLess {
-    var defaultProps: Partial<IProps>;
-}
-export { MoreOrLess };
-//# sourceMappingURL=MoreOrLess.d.ts.map

package/lib/cjs/MoreOrLess/MoreOrLess.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MoreOrLess.d.ts","sourceRoot":"","sources":["../../../src/MoreOrLess/MoreOrLess.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,UAAU,MAAM;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;CAC5D;AAOD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,eAgEhC;kBAhEQ,UAAU;;;AAoEnB,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/lib/cjs/MoreOrLess/MoreOrLess.js

@@ -1,71 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MoreOrLess = void 0;
-const utils_1 = require("@rh-support/utils");
-const react_1 = __importStar(require("react"));
-const react_i18next_1 = require("react-i18next");
-const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
-const defaultProps = {
-    maxHeight: 500,
-    className: '',
-};
-function MoreOrLess(props) {
-    const { t } = react_i18next_1.useTranslation();
-    const [isVisible, setVisibility] = react_1.useState(false);
-    const [y, setY] = react_1.useState(undefined);
-    const [elem, setElem] = react_1.useState(null);
-    const sectionRef = react_1.useRef(null);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const resizeObserver = new resize_observer_polyfill_1.default(() => elem.scrollHeight > props.maxHeight ? setVisibility(true) : setVisibility(false));
-    react_1.useEffect(() => {
-        return () => resizeObserver.disconnect();
-    }, [resizeObserver]);
-    const ref = react_1.useCallback((node) => {
-        if (node !== null) {
-            setElem(node);
-            resizeObserver.observe(node);
-        }
-    }, [resizeObserver]);
-    const [showLess, setShowLess] = react_1.useState(false);
-    const getClassAndText = () => showLess ? { text: t('Show less'), class: 'Show less' } : { text: t('Show more'), class: 'Show more' };
-    const handleMoreOrLess = (e) => {
-        e.preventDefault();
-        // save scroll y position after click on more and then
-        // scroll to the saved y position after clicking on less
-        if (!y) {
-            setY(true);
-        }
-        else {
-            utils_1.scrollIntoView(sectionRef, { navBarRef: props.appStickyHeaderRef, timeout: 0, offset: 30 });
-            setY(undefined);
-        }
-        setShowLess((prevState) => !prevState);
-    };
-    return (react_1.default.createElement("div", { className: `${props.className}`, ref: sectionRef },
-        react_1.default.createElement("div", { ref: ref, style: { maxHeight: props.maxHeight + 'px' }, className: 'more-less-wrapper ' + (showLess ? 'open' : '') }, props.children),
-        isVisible && (react_1.default.createElement("button", { onClick: handleMoreOrLess, className: `btn btn-app btn-link ${getClassAndText().class}`, type: "button" }, getClassAndText().text))));
-}
-exports.MoreOrLess = MoreOrLess;
-MoreOrLess.defaultProps = defaultProps;

package/lib/cjs/MoreOrLess/index.d.ts

@@ -1,2 +0,0 @@
-export * from './MoreOrLess';
-//# sourceMappingURL=index.d.ts.map

package/lib/cjs/MoreOrLess/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MoreOrLess/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}