@rh-support/components 2.5.203 → 2.5.204

package/lib/esm/RichTextEditor/richTextEditor.css

@@ -0,0 +1,148 @@
+.richtext-editor-container {
+    background: var(--pf-t--global--background--color--primary--default, #fff);
+    border: 1px solid var(--pf-t--global--border--color--default, #d2d2d2);
+    border-radius: var(--pf-t--global--border--radius--small, 3px);
+    display: block;
+    min-height: 100px;
+}
+
+.richtext-editor-content {
+    resize: vertical;
+    overflow: auto;
+    font-size: 15px;
+    min-width: 100%;
+    outline: none;
+    border: none;
+    min-height: 100px;
+}
+
+.richtext-editor-content.ql-container,
+.richtext-editor-container .ql-container.ql-container {
+    border: none !important;
+    outline: none !important;
+    font-size: 15px;
+}
+
+.richtext-editor-content .ql-editor {
+    padding: 0.8rem;
+    outline: none;
+    border: none;
+    min-height: 100px;
+}
+
+.richtext-editor-content .ql-editor:focus {
+    outline: none;
+    border: none;
+    box-shadow: none;
+}
+
+.richtext-editor-content:empty::before {
+    content: attr(data-placeholder);
+    color: var(--pf-t--global--text--color--placeholder, #6a6e73);
+    pointer-events: none;
+}
+
+.richtext-editor-content ul,
+.richtext-editor-content ol {
+    padding-left: 24px;
+}
+
+.richtext-editor-content li[data-list='bullet'] {
+    list-style-type: disc;
+}
+
+.richtext-editor-content li[data-list='ordered'] {
+    list-style-type: decimal;
+}
+
+.richtext-editor-content .ql-align-center {
+    text-align: center;
+}
+
+.richtext-editor-content .ql-align-right {
+    text-align: right;
+}
+
+.richtext-editor-content .ql-align-justify {
+    text-align: justify;
+}
+
+.richtext-editor-content .ql-indent-1 {
+    padding-left: 3em;
+}
+
+.richtext-editor-content .ql-indent-2 {
+    padding-left: 6em;
+}
+
+.richtext-editor-content .ql-indent-3 {
+    padding-left: 9em;
+}
+
+.richtext-editor-content .ql-indent-4 {
+    padding-left: 12em;
+}
+
+.richtext-editor-content .ql-indent-5 {
+    padding-left: 15em;
+}
+
+.richtext-editor-content a {
+    color: var(--pf-t--global--text--color--link--default, #0066cc);
+    text-decoration: underline;
+}
+
+.richtext-editor-content img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 8px 0;
+}
+
+.richtext-editor-container.is-private .richtext-editor-content {
+    background-color: #f5eeee;
+}
+
+.richtext-toolbar {
+    border-bottom: 1px solid var(--pf-t--global--border--color--default, #d2d2d2);
+    padding: 4px 8px;
+}
+
+.richtext-toolbar-left-section {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 2px;
+}
+
+.btn-group-separator {
+    display: inline-block;
+    width: 1px;
+    height: 24px;
+    margin: 0 8px;
+    background-color: var(--pf-t--global--border--color--default, #ccc);
+}
+
+.toggle-content {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 14px;
+}
+
+.dropdown-caret {
+    font-size: 12px;
+}
+
+.richtext-char-counter {
+    padding: 4px 8px;
+    font-size: 12px;
+    text-align: right;
+    color: var(--pf-t--global--text--color--subtle, #6a6e73);
+    border-top: 1px solid var(--pf-t--global--border--color--default, #d2d2d2);
+}
+
+.richtext-char-counter--exceeded {
+    color: var(--pf-t--global--color--status--danger--default, #c9190b);
+    font-weight: bold;
+}

package/lib/esm/RichTextEditor/useQuillEditor.d.ts

@@ -0,0 +1,20 @@
+import Quill from 'quill';
+export interface UseQuillEditorOptions {
+    placeholder?: string;
+    readOnly?: boolean;
+    onChange?: (html: string) => void;
+    onChangePlainText?: (text: string) => void;
+    onSelectionChange?: (format: Record<string, unknown>) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+export declare function useQuillEditor(options: UseQuillEditorOptions): {
+    editorRef: import("react").MutableRefObject<HTMLDivElement>;
+    quillRef: import("react").MutableRefObject<Quill>;
+    activeFormat: Record<string, unknown>;
+    setActiveFormat: import("react").Dispatch<import("react").SetStateAction<Record<string, unknown>>>;
+    setContents: (html: string) => void;
+    setReadOnly: (readOnly: boolean) => void;
+    getPlainText: () => string;
+};
+//# sourceMappingURL=useQuillEditor.d.ts.map

package/lib/esm/RichTextEditor/useQuillEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuillEditor.d.ts","sourceRoot":"","sources":["../../../src/RichTextEditor/useQuillEditor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,qBAAqB;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAID,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB;;;;;wBAwDlB,MAAM;4BAgBF,OAAO;;EASrD"}

package/lib/esm/RichTextEditor/useQuillEditor.js

@@ -0,0 +1,81 @@
+import DOMPurify from 'dompurify';
+import Quill from 'quill';
+import { useCallback, useEffect, useRef, useState } from 'react';
+const ALLOWED_FORMATS = ['header', 'bold', 'italic', 'underline', 'strike', 'list', 'indent', 'align', 'link', 'image'];
+export function useQuillEditor(options) {
+    const editorRef = useRef(null);
+    const quillRef = useRef(null);
+    const [activeFormat, setActiveFormat] = useState({});
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    // Track whether the last change was internal (from Quill) to avoid echo loops
+    const isInternalChange = useRef(false);
+    useEffect(() => {
+        if (!editorRef.current || quillRef.current)
+            return;
+        const quill = new Quill(editorRef.current, {
+            theme: false,
+            modules: {
+                toolbar: false,
+                clipboard: { matchVisual: false },
+            },
+            formats: ALLOWED_FORMATS,
+            placeholder: optionsRef.current.placeholder,
+            readOnly: optionsRef.current.readOnly,
+        });
+        quill.on('text-change', () => {
+            var _a, _b, _c, _d;
+            isInternalChange.current = true;
+            const html = DOMPurify.sanitize(quill.getSemanticHTML());
+            (_b = (_a = optionsRef.current).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, html);
+            (_d = (_c = optionsRef.current).onChangePlainText) === null || _d === void 0 ? void 0 : _d.call(_c, quill.getText().trim());
+            const sel = quill.getSelection();
+            if (sel) {
+                setActiveFormat(quill.getFormat(sel));
+            }
+            isInternalChange.current = false;
+        });
+        quill.on('selection-change', (range) => {
+            var _a, _b, _c, _d, _e, _f;
+            if (range) {
+                setActiveFormat(quill.getFormat(range));
+                (_b = (_a = optionsRef.current).onSelectionChange) === null || _b === void 0 ? void 0 : _b.call(_a, quill.getFormat(range));
+                if (range.length === 0) {
+                    (_d = (_c = optionsRef.current).onFocus) === null || _d === void 0 ? void 0 : _d.call(_c);
+                }
+            }
+            else {
+                (_f = (_e = optionsRef.current).onBlur) === null || _f === void 0 ? void 0 : _f.call(_e);
+            }
+        });
+        quillRef.current = quill;
+        return () => {
+            quillRef.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const setContents = useCallback((html) => {
+        const quill = quillRef.current;
+        if (!quill || isInternalChange.current)
+            return;
+        const currentHtml = DOMPurify.sanitize(quill.getSemanticHTML());
+        if (currentHtml === html)
+            return;
+        const selection = quill.getSelection();
+        quill.clipboard.dangerouslyPasteHTML(html);
+        if (selection) {
+            const length = quill.getLength();
+            const safeIndex = Math.min(selection.index, length - 1);
+            quill.setSelection(safeIndex, 0, 'silent');
+        }
+    }, []);
+    const setReadOnly = useCallback((readOnly) => {
+        var _a;
+        (_a = quillRef.current) === null || _a === void 0 ? void 0 : _a.enable(!readOnly);
+    }, []);
+    const getPlainText = useCallback(() => {
+        var _a, _b;
+        return (_b = (_a = quillRef.current) === null || _a === void 0 ? void 0 : _a.getText().trim()) !== null && _b !== void 0 ? _b : '';
+    }, []);
+    return { editorRef, quillRef, activeFormat, setActiveFormat, setContents, setReadOnly, getPlainText };
+}

package/lib/esm/index.d.ts

@@ -5,7 +5,7 @@ export * from './ErrorBoundary';
 export * from './ErrorPages';
 export * from './LoginModal';
 export * from './Table';
-export * from './MarkdownEditor';
+export * from './RichTextEditor';
 export * from './InlineEdit';
 export * from './CoverSpinner';
 export * from './hooks';

package/lib/esm/index.js

@@ -6,7 +6,7 @@ export * from './ErrorBoundary';
 export * from './ErrorPages';
 export * from './LoginModal';
 export * from './Table';
-export * from './MarkdownEditor';
+export * from './RichTextEditor';
 export * from './InlineEdit';
 export * from './CoverSpinner';
 export * from './hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/components",
-    "version": "2.5.203",
+    "version": "2.5.204",
     "description": "Contains all reusabel components for support app",
     "author": "Vikas Rathee <vrathee@redhat.com>",
     "license": "ISC",
@@ -62,13 +62,14 @@
         "@patternfly/react-icons": "6.2.1",
         "@patternfly/react-table": "6.2.1",
         "@rh-support/types": "2.0.26",
-        "@rh-support/user-permissions": "2.5.150",
-        "@rh-support/utils": "2.5.132",
+        "@rh-support/user-permissions": "2.5.151",
+        "@rh-support/utils": "2.5.133",
         "dompurify": "^2.2.6",
         "js-worker-search": "^1.4.1",
         "lazysizes": "^5.3.2",
         "lodash": "^4.17.21",
         "mark.js": "^8.11.1",
+        "quill": "~2.0.3",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-i18next": "15.6.0",
@@ -102,5 +103,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "7c3e9bbcdaa616cf2174f44356011417e368911c"
+    "gitHead": "f1130350456adacf617ce9d7829c300d8e63bded"
 }

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

@@ -1,50 +0,0 @@
-import './markdownEditor.css';
-import { IAttachment } from '@cee-eng/hydrajs/@types/models/attachment';
-import { IMarkdownOptions } from '@cee-eng/ui-toolkit';
-import React, { HTMLProps } from 'react';
-export declare enum EditorMode {
-    PLAIN = "plaintext",
-    MARKDOWN = "markdown"
-}
-interface IFileSelectorProps {
-    showFileSelectorInToolbar: boolean;
-    filesList: Partial<IAttachment>[];
-    onFileSelect: (file: Partial<IAttachment>) => void;
-    onFileDelete: (file: Partial<IAttachment>) => void;
-    onClipboardPaste: (file: any) => void;
-    isSupportedFile: (extension: string) => boolean;
-    attachFileBtn: React.ReactNode;
-    isUploadingFile: boolean;
-}
-export interface IMDEditorProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onChange' | 'value' | 'ref'> {
-    value: string;
-    onChange: (value: string, mode?: EditorMode) => void;
-    className?: string;
-    id?: string;
-    hidePreviewText?: string;
-    showPreviewText?: string;
-    bindTextArea?: (ref: HTMLTextAreaElement) => void;
-    textAreaClassName?: string;
-    mdPlaceholder?: string;
-    plainTextPlaceholder?: string;
-    allowEmoji?: boolean;
-    hideHeadingOptions?: boolean;
-    markedownOptions?: IMarkdownOptions;
-    showMarkdownPlainTextToggle?: boolean;
-    editorMode?: EditorMode;
-    hideToolbars?: boolean;
-    charLimit?: number;
-    minCharsForCounter?: number;
-    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>;
-}
-export { MarkdownEditor };
-//# sourceMappingURL=MarkdownEditor.d.ts.map

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

@@ -1 +0,0 @@
-{"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;AAiC7E,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,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,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;AA4BD,eAAO,MAAM,YAAY,GAAI,MAAM,OAAO,CAAC,WAAW,CAAC,KAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAiB7F,CAAC;AAEF,iBAAS,cAAc,CAAC,KAAK,EAAE,cAAc,qBAo8B5C;kBAp8BQ,cAAc;;;AAw8BvB,OAAO,EAAE,cAAc,EAAE,CAAC"}