@pega/cosmos-react-demos 3.0.0-dev.7.0 → 3.0.0-dev.9.1

package/jsx/rte/Editor/Editor.mocks.d.ts

@@ -1,6 +1,309 @@
 export declare const label = "Form field label";
-export declare class PegaCustomElement extends HTMLElement {
-    removeElements(): void;
-    connectedCallback(): void;
-}
+export declare const createPegaCustomElement: (win: typeof globalThis) => {
+    new (): {
+        removeElements(): void;
+        connectedCallback(): void;
+        accessKey: string;
+        readonly accessKeyLabel: string;
+        autocapitalize: string;
+        dir: string;
+        draggable: boolean;
+        hidden: boolean;
+        innerText: string;
+        lang: string;
+        readonly offsetHeight: number;
+        readonly offsetLeft: number;
+        readonly offsetParent: Element | null;
+        readonly offsetTop: number;
+        readonly offsetWidth: number;
+        outerText: string;
+        spellcheck: boolean;
+        title: string;
+        translate: boolean;
+        attachInternals(): ElementInternals;
+        click(): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
+        removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+        readonly attributes: NamedNodeMap;
+        readonly classList: DOMTokenList;
+        className: string;
+        readonly clientHeight: number;
+        readonly clientLeft: number;
+        readonly clientTop: number;
+        readonly clientWidth: number;
+        id: string;
+        readonly localName: string;
+        readonly namespaceURI: string | null;
+        onfullscreenchange: ((this: Element, ev: Event) => any) | null;
+        onfullscreenerror: ((this: Element, ev: Event) => any) | null;
+        outerHTML: string;
+        readonly ownerDocument: Document;
+        readonly part: DOMTokenList;
+        readonly prefix: string | null;
+        readonly scrollHeight: number;
+        scrollLeft: number;
+        scrollTop: number;
+        readonly scrollWidth: number;
+        readonly shadowRoot: ShadowRoot | null;
+        slot: string;
+        readonly tagName: string;
+        attachShadow(init: ShadowRootInit): ShadowRoot;
+        closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
+        closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
+        closest<E extends Element = Element>(selectors: string): E | null;
+        getAttribute(qualifiedName: string): string | null;
+        getAttributeNS(namespace: string | null, localName: string): string | null;
+        getAttributeNames(): string[];
+        getAttributeNode(qualifiedName: string): Attr | null;
+        getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
+        getBoundingClientRect(): DOMRect;
+        getClientRects(): DOMRectList;
+        getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
+        getElementsByTagName<K_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
+        getElementsByTagName<K_5 extends keyof SVGElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<SVGElementTagNameMap[K_5]>;
+        getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
+        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
+        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
+        getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
+        hasAttribute(qualifiedName: string): boolean;
+        hasAttributeNS(namespace: string | null, localName: string): boolean;
+        hasAttributes(): boolean;
+        hasPointerCapture(pointerId: number): boolean;
+        insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
+        insertAdjacentHTML(position: InsertPosition, text: string): void;
+        insertAdjacentText(where: InsertPosition, data: string): void;
+        matches(selectors: string): boolean;
+        releasePointerCapture(pointerId: number): void;
+        removeAttribute(qualifiedName: string): void;
+        removeAttributeNS(namespace: string | null, localName: string): void;
+        removeAttributeNode(attr: Attr): Attr;
+        requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
+        requestPointerLock(): void;
+        scroll(options?: ScrollToOptions | undefined): void;
+        scroll(x: number, y: number): void;
+        scrollBy(options?: ScrollToOptions | undefined): void;
+        scrollBy(x: number, y: number): void;
+        scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
+        scrollTo(options?: ScrollToOptions | undefined): void;
+        scrollTo(x: number, y: number): void;
+        setAttribute(qualifiedName: string, value: string): void;
+        setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
+        setAttributeNode(attr: Attr): Attr | null;
+        setAttributeNodeNS(attr: Attr): Attr | null;
+        setPointerCapture(pointerId: number): void;
+        toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
+        webkitMatchesSelector(selectors: string): boolean;
+        readonly baseURI: string;
+        readonly childNodes: NodeListOf<ChildNode>;
+        readonly firstChild: ChildNode | null;
+        readonly isConnected: boolean;
+        readonly lastChild: ChildNode | null;
+        readonly nextSibling: ChildNode | null;
+        readonly nodeName: string;
+        readonly nodeType: number;
+        nodeValue: string | null;
+        readonly parentElement: HTMLElement | null;
+        readonly parentNode: ParentNode | null;
+        readonly previousSibling: ChildNode | null;
+        textContent: string | null;
+        appendChild<T extends Node>(node: T): T;
+        cloneNode(deep?: boolean | undefined): Node;
+        compareDocumentPosition(other: Node): number;
+        contains(other: Node | null): boolean;
+        getRootNode(options?: GetRootNodeOptions | undefined): Node;
+        hasChildNodes(): boolean;
+        insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
+        isDefaultNamespace(namespace: string | null): boolean;
+        isEqualNode(otherNode: Node | null): boolean;
+        isSameNode(otherNode: Node | null): boolean;
+        lookupNamespaceURI(prefix: string | null): string | null;
+        lookupPrefix(namespace: string | null): string | null;
+        normalize(): void;
+        removeChild<T_2 extends Node>(child: T_2): T_2;
+        replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
+        readonly ATTRIBUTE_NODE: number;
+        readonly CDATA_SECTION_NODE: number;
+        readonly COMMENT_NODE: number;
+        readonly DOCUMENT_FRAGMENT_NODE: number;
+        readonly DOCUMENT_NODE: number;
+        readonly DOCUMENT_POSITION_CONTAINED_BY: number;
+        readonly DOCUMENT_POSITION_CONTAINS: number;
+        readonly DOCUMENT_POSITION_DISCONNECTED: number;
+        readonly DOCUMENT_POSITION_FOLLOWING: number;
+        readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
+        readonly DOCUMENT_POSITION_PRECEDING: number;
+        readonly DOCUMENT_TYPE_NODE: number;
+        readonly ELEMENT_NODE: number;
+        readonly ENTITY_NODE: number;
+        readonly ENTITY_REFERENCE_NODE: number;
+        readonly NOTATION_NODE: number;
+        readonly PROCESSING_INSTRUCTION_NODE: number;
+        readonly TEXT_NODE: number;
+        dispatchEvent(event: Event): boolean;
+        ariaAtomic: string | null;
+        ariaAutoComplete: string | null;
+        ariaBusy: string | null;
+        ariaChecked: string | null;
+        ariaColCount: string | null;
+        ariaColIndex: string | null;
+        ariaColSpan: string | null;
+        ariaCurrent: string | null;
+        ariaDisabled: string | null;
+        ariaExpanded: string | null;
+        ariaHasPopup: string | null;
+        ariaHidden: string | null;
+        ariaKeyShortcuts: string | null;
+        ariaLabel: string | null;
+        ariaLevel: string | null;
+        ariaLive: string | null;
+        ariaModal: string | null;
+        ariaMultiLine: string | null;
+        ariaMultiSelectable: string | null;
+        ariaOrientation: string | null;
+        ariaPlaceholder: string | null;
+        ariaPosInSet: string | null;
+        ariaPressed: string | null;
+        ariaReadOnly: string | null;
+        ariaRequired: string | null;
+        ariaRoleDescription: string | null;
+        ariaRowCount: string | null;
+        ariaRowIndex: string | null;
+        ariaRowSpan: string | null;
+        ariaSelected: string | null;
+        ariaSetSize: string | null;
+        ariaSort: string | null;
+        ariaValueMax: string | null;
+        ariaValueMin: string | null;
+        ariaValueNow: string | null;
+        ariaValueText: string | null;
+        animate(keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
+        getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
+        after(...nodes: (string | Node)[]): void;
+        before(...nodes: (string | Node)[]): void;
+        remove(): void;
+        replaceWith(...nodes: (string | Node)[]): void;
+        innerHTML: string;
+        readonly nextElementSibling: Element | null;
+        readonly previousElementSibling: Element | null;
+        readonly childElementCount: number;
+        readonly children: HTMLCollection;
+        readonly firstElementChild: Element | null;
+        readonly lastElementChild: Element | null;
+        append(...nodes: (string | Node)[]): void;
+        prepend(...nodes: (string | Node)[]): void;
+        querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
+        querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
+        querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
+        querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
+        querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
+        querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
+        replaceChildren(...nodes: (string | Node)[]): void;
+        readonly assignedSlot: HTMLSlotElement | null;
+        oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+        oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+        onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+        readonly style: CSSStyleDeclaration;
+        contentEditable: string;
+        enterKeyHint: string;
+        inputMode: string;
+        readonly isContentEditable: boolean;
+        onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+        onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+        oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onerror: OnErrorEventHandler;
+        onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+        onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
+        ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
+        onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+        onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
+        onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
+        onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
+        autofocus: boolean;
+        readonly dataset: DOMStringMap;
+        nonce?: string | undefined;
+        tabIndex: number;
+        blur(): void;
+        focus(options?: FocusOptions | undefined): void;
+    };
+};
 //# sourceMappingURL=Editor.mocks.d.ts.map

package/jsx/rte/Editor/Editor.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.mocks.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.mocks.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,qBAAqB,CAAC;AAYxC,qBAAa,iBAAkB,SAAQ,WAAW;IAChD,cAAc;IAMd,iBAAiB;CAOlB"}
+{"version":3,"file":"Editor.mocks.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.mocks.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,qBAAqB,CAAC;AAYxC,eAAO,MAAM,uBAAuB,QAAS,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiB7D,CAAC"}

package/jsx/rte/Editor/Editor.mocks.jsx

@@ -3,18 +3,21 @@ export const label = 'Form field label';
 const PegaCustom = ({ children }) => {
     return (<p style={{ color: 'blue', textTransform: 'uppercase' }} dangerouslySetInnerHTML={{ __html: children }}/>);
 };
-export class PegaCustomElement extends HTMLElement {
-    removeElements() {
-        while (this.firstChild) {
-            this.removeChild(this.firstChild);
+export const createPegaCustomElement = (win) => {
+    const HtmlElement = win.HTMLElement;
+    return class PegaCustomElement extends HtmlElement {
+        removeElements() {
+            while (this.firstChild) {
+                this.removeChild(this.firstChild);
+            }
         }
-    }
-    connectedCallback() {
-        const inner = this.innerHTML;
-        this.removeElements();
-        const mountPoint = document.createElement('span');
-        this.appendChild(mountPoint);
-        ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);
-    }
-}
+        connectedCallback() {
+            const inner = this.innerHTML;
+            this.removeElements();
+            const mountPoint = document.createElement('span');
+            this.appendChild(mountPoint);
+            ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);
+        }
+    };
+};
 //# sourceMappingURL=Editor.mocks.jsx.map

package/jsx/rte/Editor/Editor.mocks.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.mocks.jsx","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,WAAW,CAAC;AAEjC,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC;AAExC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAwB,EAAE,EAAE;IACxD,OAAO,CACL,CAAC,CAAC,CACA,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC,CAErD,uBAAuB,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAC9C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IAChD,cAAc;QACZ,OAAO,IAAI,CAAC,UAAU,EAAE;YACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SACnC;IACH,CAAC;IAED,iBAAiB;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;QAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAClD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC7B,QAAQ,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC;IAChE,CAAC;CACF","sourcesContent":["import ReactDOM from 'react-dom';\n\nexport const label = 'Form field label';\n\nconst PegaCustom = ({ children }: { children: string }) => {\n  return (\n    <p\n      style={{ color: 'blue', textTransform: 'uppercase' }}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{ __html: children }}\n    />\n  );\n};\n\nexport class PegaCustomElement extends HTMLElement {\n  removeElements() {\n    while (this.firstChild) {\n      this.removeChild(this.firstChild);\n    }\n  }\n\n  connectedCallback() {\n    const inner = this.innerHTML;\n    this.removeElements();\n    const mountPoint = document.createElement('span');\n    this.appendChild(mountPoint);\n    ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);\n  }\n}\n"]}
+{"version":3,"file":"Editor.mocks.jsx","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,WAAW,CAAC;AAEjC,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC;AAExC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAwB,EAAE,EAAE;IACxD,OAAO,CACL,CAAC,CAAC,CACA,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC,CAErD,uBAAuB,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAC9C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,GAAsB,EAAE,EAAE;IAChE,MAAM,WAAW,GAAG,GAAG,CAAC,WAAW,CAAC;IACpC,OAAO,MAAM,iBAAkB,SAAQ,WAAW;QAChD,cAAc;YACZ,OAAO,IAAI,CAAC,UAAU,EAAE;gBACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;aACnC;QACH,CAAC;QAED,iBAAiB;YACf,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;YAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAClD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAC7B,QAAQ,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC;QAChE,CAAC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import ReactDOM from 'react-dom';\n\nexport const label = 'Form field label';\n\nconst PegaCustom = ({ children }: { children: string }) => {\n  return (\n    <p\n      style={{ color: 'blue', textTransform: 'uppercase' }}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{ __html: children }}\n    />\n  );\n};\n\nexport const createPegaCustomElement = (win: typeof globalThis) => {\n  const HtmlElement = win.HTMLElement;\n  return class PegaCustomElement extends HtmlElement {\n    removeElements() {\n      while (this.firstChild) {\n        this.removeChild(this.firstChild);\n      }\n    }\n\n    connectedCallback() {\n      const inner = this.innerHTML;\n      this.removeElements();\n      const mountPoint = document.createElement('span');\n      this.appendChild(mountPoint);\n      ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);\n    }\n  };\n};\n"]}

package/jsx/rte/Editor/Editor.stories.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const EditorDemo: () => JSX.Element;
-export declare const EmptyEditorDemo: () => JSX.Element;
-export declare const ReadonlyFormField: () => JSX.Element;
-export declare const CustomComponentDemo: () => JSX.Element;
-export declare const RichTextEditorWithLogs: () => JSX.Element;
-export declare const RichTextEditorHtmlParsingDemo: () => JSX.Element;
+export declare const EditorDemo: Story;
+export declare const EmptyEditorDemo: Story;
+export declare const ReadonlyFormField: Story;
+export declare const CustomComponentDemo: Story;
+export declare const RichTextEditorWithLogs: Story;
+export declare const RichTextEditorHtmlParsingDemo: Story;
 //# sourceMappingURL=Editor.stories.d.ts.map

package/jsx/rte/Editor/Editor.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAkBxC,wBAGU;AAEV,eAAO,MAAM,UAAU,mBAmBtB,CAAC;AAEF,eAAO,MAAM,eAAe,mBAmB3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mBAc7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,mBA6B/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBAkClC,CAAC;AAEF,eAAO,MAAM,6BAA6B,mBA8BzC,CAAC"}
+{"version":3,"file":"Editor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAkB/C,wBAGU;AAEV,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAmB7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAc/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA6BjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAkCpC,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,KA8B3C,CAAC"}

package/jsx/rte/Editor/Editor.stories.jsx

@@ -2,7 +2,7 @@ import { useState, useRef } from 'react';
 import { action } from '@storybook/addon-actions';
 import { Button, Card, CardContent, CardFooter, Flex, Text, TextArea } from '@pega/cosmos-react-core';
 import { Editor } from '@pega/cosmos-react-rte';
-import { label, PegaCustomElement } from './Editor.mocks';
+import { createPegaCustomElement, label } from './Editor.mocks';
 export default {
     title: 'RTE/Editor',
     component: Editor
@@ -13,7 +13,7 @@ export const EditorDemo = () => {
         const src = URL.createObjectURL(image);
         editorRef.current?.appendImage({ src, alt: image.name }, id);
     };
-    return (<Editor ref={editorRef} label={label} toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']} onFocus={action('Editor focused')} onBlur={action('Editor blurred')} onImageAdded={onImageAdded} defaultValue='<body><p>Hi mom <a href="https://google.com">link</a></p><img alt="placeholder" src="http://via.placeholder.com/640x360"/></body>'/>);
+    return (<Editor ref={editorRef} label={label} toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']} onFocus={action('Editor focused')} onBlur={action('Editor blurred')} onImageAdded={onImageAdded} defaultValue='<body><p>Hi mom <a href="https://google.com">link</a></p><img alt="Example alt text" src="http://via.placeholder.com/640x360"/></body>'/>);
 };
 export const EmptyEditorDemo = () => {
     const editorRef = useRef(null);
@@ -38,7 +38,7 @@ export const CustomComponentDemo = () => {
     const onCustomAction = () => {
         editor.insertContent('<pega-custom>Inserted from toolbar</pega-custom>');
     };
-    return (<Editor ref={editorRef} label={label} toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']} defaultValue='<body><p>Hi mom <a href="https://google.com">link</a></p><p>hi <pega-custom>Hello from custom element.</pega-custom></p></body>' customComponents={[{ customElement: PegaCustomElement, name: 'pega-custom' }]} customActions={[
+    return (<Editor ref={editorRef} label={label} toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']} defaultValue='<body><p>Hi mom <a href="https://google.com">link</a></p><p>hi <pega-custom>Hello from custom element.</pega-custom></p></body>' customComponents={[{ createCustomElement: createPegaCustomElement, name: 'pega-custom' }]} customActions={[
             {
                 icon: 'pega',
                 text: 'Insert a custom element',

package/jsx/rte/Editor/Editor.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.stories.jsx","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useRef } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Editor as TinymceEditor } from 'tinymce';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardFooter,\n  Flex,\n  Text,\n  TextArea\n} from '@pega/cosmos-react-core';\nimport { EditorState, Editor } from '@pega/cosmos-react-rte';\n\nimport { label, PegaCustomElement } from './Editor.mocks';\n\nexport default {\n  title: 'RTE/Editor',\n  component: Editor\n} as Meta;\n\nexport const EditorDemo = () => {\n  const editorRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Editor\n      ref={editorRef}\n      label={label}\n      toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n      onFocus={action('Editor focused')}\n      onBlur={action('Editor blurred')}\n      onImageAdded={onImageAdded}\n      defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><img alt=\"placeholder\" src=\"http://via.placeholder.com/640x360\"/></body>'\n    />\n  );\n};\n\nexport const EmptyEditorDemo = () => {\n  const editorRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Editor\n      ref={editorRef}\n      label={label}\n      toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n      onImageAdded={onImageAdded}\n      onFocus={action('Editor has focus')}\n      onBlur={action('Editor has blurred')}\n      placeholder='Type some stuff in here'\n    />\n  );\n};\n\nexport const ReadonlyFormField = () => {\n  return (\n    <Editor\n      label={label}\n      readOnly\n      defaultValue={`<article class=\"main-page-content\" lang=\"en-US\"><h1>HTML: HyperText Markup Language</h1><div><p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href=\"/en-US/docs/Web/CSS\">CSS</a>) or functionality/behavior (<a href=\"/en-US/docs/Web/JavaScript\">JavaScript</a>).</p>\n      <p>\"Hypertext\" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>\n      <p>HTML uses \"markup\" to annotate text, images, and other content for display in a Web browser. HTML markup includes special \"elements\" such as <a href=\"/en-US/docs/Web/HTML/Element/head\"><code>&lt;head&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/title\"><code>&lt;title&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/body\"><code>&lt;body&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/header\"><code>&lt;header&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/footer\"><code>&lt;footer&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/article\"><code>&lt;article&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/section\"><code>&lt;section&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/p\"><code>&lt;p&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/div\"><code>&lt;div&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/span\"><code>&lt;span&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/img\"><code>&lt;img&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/aside\"><code>&lt;aside&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/audio\"><code>&lt;audio&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code>&lt;canvas&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/datalist\"><code>&lt;datalist&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/details\"><code>&lt;details&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/embed\"><code>&lt;embed&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/nav\"><code>&lt;nav&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/output\"><code>&lt;output&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/progress\"><code>&lt;progress&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/video\"><code>&lt;video&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code>&lt;ul&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ol\"><code>&lt;ol&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/li\"><code>&lt;li&gt;</code></a> and many others.</p>\n      <p>An HTML element is set off from other text in a document by \"tags\", which consist of the element name surrounded by \"<code>&lt;</code>\" and \"<code>&gt;</code>\".&nbsp; The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code>&lt;title&gt;</code> tag can be written as <code>&lt;Title&gt;</code>, <code>&lt;TITLE&gt;</code>, or in any other way.</p>\n\n      <div id=\"on-github\" class=\"on-github\"><h3>Found a problem with this page?</h3><ul><li><a href=\"https://github.com/mdn/content/edit/main/files/en-us/web/html/index.md\" title=\"You're going to need to sign in to GitHub first (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Edit on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/blob/main/files/en-us/web/html/index.md\" title=\"Folder: en-us/web/html (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Source on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/issues/new?body=MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A%0A%23%23%23%23+What+information+was+incorrect%2C+unhelpful%2C+or+incomplete%3F%0A%0A%0A%23%23%23%23+Specific+section+or+headline%3F%0A%0A%0A%23%23%23%23+What+did+you+expect+to+see%3F%0A%0A%0A%23%23%23%23+Did+you+test+this%3F+If+so%2C+how%3F%0A%0A%0A%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+Content+page+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fhtml%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fhtml%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F775662998e66813a612e3ff27e02f2ada867bc17%0A*+Document+last+modified%3A+2021-10-03T00%3A01%3A51.000Z%0A%0A%3C%2Fdetails%3E&amp;title=Issue+with+%22HTML%3A+HyperText+Markup+Language%22%3A+%28short+summary+here+please%29&amp;labels=needs-triage%2CContent%3AHTML\" title=\"This will take you to https://github.com/mdn/content to file a new issue\" target=\"_blank\" rel=\"noopener noreferrer\">Report a problem with this content on <b>GitHub</b></a></li><li>Want to fix the problem yourself? See <a href=\"https://github.com/mdn/content/blob/main/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">our Contribution guide</a>.</li></ul></div>\n      `}\n    />\n  );\n};\n\nexport const CustomComponentDemo = () => {\n  const editorRef = useRef<EditorState>(null);\n  const [editor, setEditor] = useState({} as TinymceEditor);\n\n  const onCustomAction = () => {\n    editor.insertContent('<pega-custom>Inserted from toolbar</pega-custom>');\n  };\n\n  return (\n    <Editor\n      ref={editorRef}\n      label={label}\n      toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n      defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><p>hi <pega-custom>Hello from custom element.</pega-custom></p></body>'\n      customComponents={[{ customElement: PegaCustomElement, name: 'pega-custom' }]}\n      customActions={[\n        {\n          icon: 'pega',\n          text: 'Insert a custom element',\n          onMouseDown: () => {\n            onCustomAction();\n          }\n        }\n      ]}\n      onInit={initializedEditor => {\n        setEditor(initializedEditor);\n      }}\n    />\n  );\n};\n\nexport const RichTextEditorWithLogs = () => {\n  const editorRef = useRef<EditorState>(null);\n  const [content, setContent] = useState<string | undefined>();\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  const showContent = (type: 'html' | 'plain_text' | 'rich_text') => {\n    if (type === 'html') setContent(editorRef.current?.getHtml());\n    else if (type === 'plain_text') setContent(editorRef.current?.getPlainText());\n    else if (type === 'rich_text') setContent(editorRef.current?.getRichText());\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Editor\n        ref={editorRef}\n        toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n        onImageAdded={onImageAdded}\n        label='Rich text editor with logs'\n        info='Click on the buttons below to show the different formatted outputs of the RTE'\n      />\n\n      <Flex container={{ gap: 1 }}>\n        <Button onClick={() => showContent('html')}>Show HTML</Button>\n        <Button onClick={() => showContent('plain_text')}>Show plain text</Button>\n        <Button onClick={() => showContent('rich_text')}>Show rich text</Button>\n      </Flex>\n\n      <Text>{content}</Text>\n    </Flex>\n  );\n};\n\nexport const RichTextEditorHtmlParsingDemo = () => {\n  const [html, setHtml] = useState('<p>Hello world!</p>');\n  const rteRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    rteRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Card>\n        <CardContent>\n          <TextArea value={html} onChange={e => setHtml(e.target.value)} />\n        </CardContent>\n        <CardFooter>\n          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n            Overwrite RTE with new HTML\n          </Button>\n        </CardFooter>\n      </Card>\n      <Editor\n        defaultValue={html}\n        onImageAdded={onImageAdded}\n        ref={rteRef}\n        label={label}\n        toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n      />\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"Editor.stories.jsx","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useRef } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Editor as TinymceEditor } from 'tinymce';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardFooter,\n  Flex,\n  Text,\n  TextArea\n} from '@pega/cosmos-react-core';\nimport { EditorState, Editor } from '@pega/cosmos-react-rte';\n\nimport { createPegaCustomElement, label } from './Editor.mocks';\n\nexport default {\n  title: 'RTE/Editor',\n  component: Editor\n} as Meta;\n\nexport const EditorDemo: Story = () => {\n  const editorRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Editor\n      ref={editorRef}\n      label={label}\n      toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n      onFocus={action('Editor focused')}\n      onBlur={action('Editor blurred')}\n      onImageAdded={onImageAdded}\n      defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><img alt=\"Example alt text\" src=\"http://via.placeholder.com/640x360\"/></body>'\n    />\n  );\n};\n\nexport const EmptyEditorDemo: Story = () => {\n  const editorRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Editor\n      ref={editorRef}\n      label={label}\n      toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n      onImageAdded={onImageAdded}\n      onFocus={action('Editor has focus')}\n      onBlur={action('Editor has blurred')}\n      placeholder='Type some stuff in here'\n    />\n  );\n};\n\nexport const ReadonlyFormField: Story = () => {\n  return (\n    <Editor\n      label={label}\n      readOnly\n      defaultValue={`<article class=\"main-page-content\" lang=\"en-US\"><h1>HTML: HyperText Markup Language</h1><div><p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href=\"/en-US/docs/Web/CSS\">CSS</a>) or functionality/behavior (<a href=\"/en-US/docs/Web/JavaScript\">JavaScript</a>).</p>\n      <p>\"Hypertext\" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>\n      <p>HTML uses \"markup\" to annotate text, images, and other content for display in a Web browser. HTML markup includes special \"elements\" such as <a href=\"/en-US/docs/Web/HTML/Element/head\"><code>&lt;head&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/title\"><code>&lt;title&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/body\"><code>&lt;body&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/header\"><code>&lt;header&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/footer\"><code>&lt;footer&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/article\"><code>&lt;article&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/section\"><code>&lt;section&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/p\"><code>&lt;p&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/div\"><code>&lt;div&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/span\"><code>&lt;span&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/img\"><code>&lt;img&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/aside\"><code>&lt;aside&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/audio\"><code>&lt;audio&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code>&lt;canvas&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/datalist\"><code>&lt;datalist&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/details\"><code>&lt;details&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/embed\"><code>&lt;embed&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/nav\"><code>&lt;nav&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/output\"><code>&lt;output&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/progress\"><code>&lt;progress&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/video\"><code>&lt;video&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code>&lt;ul&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ol\"><code>&lt;ol&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/li\"><code>&lt;li&gt;</code></a> and many others.</p>\n      <p>An HTML element is set off from other text in a document by \"tags\", which consist of the element name surrounded by \"<code>&lt;</code>\" and \"<code>&gt;</code>\".&nbsp; The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code>&lt;title&gt;</code> tag can be written as <code>&lt;Title&gt;</code>, <code>&lt;TITLE&gt;</code>, or in any other way.</p>\n\n      <div id=\"on-github\" class=\"on-github\"><h3>Found a problem with this page?</h3><ul><li><a href=\"https://github.com/mdn/content/edit/main/files/en-us/web/html/index.md\" title=\"You're going to need to sign in to GitHub first (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Edit on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/blob/main/files/en-us/web/html/index.md\" title=\"Folder: en-us/web/html (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Source on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/issues/new?body=MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A%0A%23%23%23%23+What+information+was+incorrect%2C+unhelpful%2C+or+incomplete%3F%0A%0A%0A%23%23%23%23+Specific+section+or+headline%3F%0A%0A%0A%23%23%23%23+What+did+you+expect+to+see%3F%0A%0A%0A%23%23%23%23+Did+you+test+this%3F+If+so%2C+how%3F%0A%0A%0A%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+Content+page+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fhtml%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fhtml%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F775662998e66813a612e3ff27e02f2ada867bc17%0A*+Document+last+modified%3A+2021-10-03T00%3A01%3A51.000Z%0A%0A%3C%2Fdetails%3E&amp;title=Issue+with+%22HTML%3A+HyperText+Markup+Language%22%3A+%28short+summary+here+please%29&amp;labels=needs-triage%2CContent%3AHTML\" title=\"This will take you to https://github.com/mdn/content to file a new issue\" target=\"_blank\" rel=\"noopener noreferrer\">Report a problem with this content on <b>GitHub</b></a></li><li>Want to fix the problem yourself? See <a href=\"https://github.com/mdn/content/blob/main/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">our Contribution guide</a>.</li></ul></div>\n      `}\n    />\n  );\n};\n\nexport const CustomComponentDemo: Story = () => {\n  const editorRef = useRef<EditorState>(null);\n  const [editor, setEditor] = useState({} as TinymceEditor);\n\n  const onCustomAction = () => {\n    editor.insertContent('<pega-custom>Inserted from toolbar</pega-custom>');\n  };\n\n  return (\n    <Editor\n      ref={editorRef}\n      label={label}\n      toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n      defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><p>hi <pega-custom>Hello from custom element.</pega-custom></p></body>'\n      customComponents={[{ createCustomElement: createPegaCustomElement, name: 'pega-custom' }]}\n      customActions={[\n        {\n          icon: 'pega',\n          text: 'Insert a custom element',\n          onMouseDown: () => {\n            onCustomAction();\n          }\n        }\n      ]}\n      onInit={initializedEditor => {\n        setEditor(initializedEditor);\n      }}\n    />\n  );\n};\n\nexport const RichTextEditorWithLogs: Story = () => {\n  const editorRef = useRef<EditorState>(null);\n  const [content, setContent] = useState<string | undefined>();\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  const showContent = (type: 'html' | 'plain_text' | 'rich_text') => {\n    if (type === 'html') setContent(editorRef.current?.getHtml());\n    else if (type === 'plain_text') setContent(editorRef.current?.getPlainText());\n    else if (type === 'rich_text') setContent(editorRef.current?.getRichText());\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Editor\n        ref={editorRef}\n        toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n        onImageAdded={onImageAdded}\n        label='Rich text editor with logs'\n        info='Click on the buttons below to show the different formatted outputs of the RTE'\n      />\n\n      <Flex container={{ gap: 1 }}>\n        <Button onClick={() => showContent('html')}>Show HTML</Button>\n        <Button onClick={() => showContent('plain_text')}>Show plain text</Button>\n        <Button onClick={() => showContent('rich_text')}>Show rich text</Button>\n      </Flex>\n\n      <Text>{content}</Text>\n    </Flex>\n  );\n};\n\nexport const RichTextEditorHtmlParsingDemo: Story = () => {\n  const [html, setHtml] = useState('<p>Hello world!</p>');\n  const rteRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    rteRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Card>\n        <CardContent>\n          <TextArea value={html} onChange={e => setHtml(e.target.value)} />\n        </CardContent>\n        <CardFooter>\n          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n            Overwrite RTE with new HTML\n          </Button>\n        </CardFooter>\n      </Card>\n      <Editor\n        defaultValue={html}\n        onImageAdded={onImageAdded}\n        ref={rteRef}\n        label={label}\n        toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n      />\n    </Flex>\n  );\n};\n"]}

package/jsx/rte/RichTextEditor/RichTextViewer.stories.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const RichTextViewerDemo: () => JSX.Element;
-export declare const RichTextViewerHTMLDemo: () => JSX.Element;
-export declare const RichTextViewerMDDemo: () => JSX.Element;
+export declare const RichTextViewerDemo: Story;
+export declare const RichTextViewerHTMLDemo: Story;
+export declare const RichTextViewerHTMLOverflowDemo: Story;
+export declare const RichTextViewerMDDemo: Story;
 //# sourceMappingURL=RichTextViewer.stories.d.ts.map

package/jsx/rte/RichTextEditor/RichTextViewer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAcxC,wBAGU;AAEV,eAAO,MAAM,kBAAkB,mBAuB9B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBAuBlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,mBA4DhC,CAAC"}
+{"version":3,"file":"RichTextViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAc/C,wBAGU;AAEV,eAAO,MAAM,kBAAkB,EAAE,KAuBhC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAuBpC,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KA0B5C,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KA4DlC,CAAC"}

package/jsx/rte/RichTextEditor/RichTextViewer.stories.jsx

@@ -1,7 +1,7 @@
 import { useRef, useState } from 'react';
 import { Flex, Link } from '@pega/cosmos-react-core';
 import { HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';
-import { RichTextEditor, RichTextViewer } from '@pega/cosmos-react-rte';
+import { RichTextViewer, Editor as RichTextEditor } from '@pega/cosmos-react-rte';
 import { demoUsers } from './RichTextEditor.mocks';
 export default {
     title: 'RTE/RichTextViewer',
@@ -41,6 +41,23 @@ export const RichTextViewerHTMLDemo = () => {
       <RichTextViewer content={content} type='html'/>
     </Flex>);
 };
+export const RichTextViewerHTMLOverflowDemo = () => {
+    const editorRef = useRef(null);
+    const [content, setContent] = useState(() => "<p style='background-color: green; width: 110%; height: 100px;'>hi</p>");
+    return (<Flex container={{ direction: 'column', gap: 2 }}>
+      <RichTextEditor ref={editorRef} toolbar={[
+            'inline-styling',
+            'headers',
+            'tables',
+            'links',
+            'lists',
+            'cut-copy-paste',
+            'indentation'
+        ]} defaultValue={content} onChange={() => setContent(editorRef.current?.getHtml() || '')}/>
+
+      <RichTextViewer content={content} type='html'/>
+    </Flex>);
+};
 export const RichTextViewerMDDemo = () => {
     const LinkComponent = ({ token }) => {
         return (<Link href={token.href} previewable>

package/jsx/rte/RichTextEditor/RichTextViewer.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextViewer.stories.jsx","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Flex, Link, MenuItemProps } from '@pega/cosmos-react-core';\nimport { HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';\nimport {\n  RichTextEditor,\n  RichTextViewer,\n  RichTextEditorState,\n  TokenMap\n} from '@pega/cosmos-react-rte';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n  title: 'RTE/RichTextViewer',\n  component: RichTextViewer\n} as Meta;\n\nexport const RichTextViewerDemo = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('[]');\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        onChange={() => setContent(editorRef.current?.getRichText() || '')}\n      />\n\n      <RichTextViewer content={content} type='richtext' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerHTMLDemo = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('');\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        onChange={() => setContent(editorRef.current?.getHtml() || '')}\n      />\n\n      <RichTextViewer content={content} type='html' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerMDDemo = () => {\n  const LinkComponent = ({ token }: { token: TokenMap['link'] }) => {\n    return (\n      <Link href={token.href} previewable>\n        {token.text}\n      </Link>\n    );\n  };\n\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('');\n  const [users, setUsers] = useState<MenuItemProps[]>(demoUsers);\n\n  const searchUsers = (event: { search: string; trigger: string }) => {\n    if (event.trigger === '@') {\n      setUsers(\n        demoUsers.filter(user => {\n          return user.primary.toLowerCase().includes(event.search.toLowerCase());\n        })\n      );\n    }\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        searchTriggers={[{ trigger: '@', regex: '[a-zA-Z]*(?: [a-zA-Z]*)?' }]}\n        onSearch={searchUsers}\n        getSearchItemReplacement={(id: string) => {\n          const item = demoUsers.find(({ id: itemId }) => itemId === id);\n\n          if (!item) return undefined;\n\n          return {\n            markdown: `@${item.id}:${item.primary}:user:`,\n            text: item.primary\n          };\n        }}\n        menu={users.length ? { items: users } : undefined}\n        autoFocus\n        markdownOnly\n        defaultValue={\n          '# Try writing some of your own markdown and see how it renders!\\n\\nYou can interact with mentions such as @deans:Seth DeAngelo:user:\\n\\nThere is built in support for #tags: as well!\\n\\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)'\n        }\n        onChange={() => setContent(editorRef.current?.getPlainText() || '')}\n      />\n\n      <RichTextViewer\n        content={content}\n        type='markdown'\n        interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n        markdownMap={{\n          link: (linkToken: TokenMap['link']) => {\n            if (linkToken.href?.includes('www.pega.com')) return LinkComponent;\n          }\n        }}\n      />\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"RichTextViewer.stories.jsx","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Flex, Link, MenuItemProps } from '@pega/cosmos-react-core';\nimport { HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';\nimport {\n  RichTextViewer,\n  Editor as RichTextEditor,\n  EditorState as RichTextEditorState,\n  TokenMap\n} from '@pega/cosmos-react-rte';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n  title: 'RTE/RichTextViewer',\n  component: RichTextViewer\n} as Meta;\n\nexport const RichTextViewerDemo: Story = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('[]');\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        onChange={() => setContent(editorRef.current?.getRichText() || '')}\n      />\n\n      <RichTextViewer content={content} type='richtext' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerHTMLDemo: Story = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('');\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        onChange={() => setContent(editorRef.current?.getHtml() || '')}\n      />\n\n      <RichTextViewer content={content} type='html' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerHTMLOverflowDemo: Story = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState(\n    () => \"<p style='background-color: green; width: 110%; height: 100px;'>hi</p>\"\n  );\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        defaultValue={content}\n        onChange={() => setContent(editorRef.current?.getHtml() || '')}\n      />\n\n      <RichTextViewer content={content} type='html' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerMDDemo: Story = () => {\n  const LinkComponent = ({ token }: { token: TokenMap['link'] }) => {\n    return (\n      <Link href={token.href} previewable>\n        {token.text}\n      </Link>\n    );\n  };\n\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('');\n  const [users, setUsers] = useState<MenuItemProps[]>(demoUsers);\n\n  const searchUsers = (event: { search: string; trigger: string }) => {\n    if (event.trigger === '@') {\n      setUsers(\n        demoUsers.filter(user => {\n          return user.primary.toLowerCase().includes(event.search.toLowerCase());\n        })\n      );\n    }\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        searchTriggers={[{ trigger: '@', regex: '[a-zA-Z]*(?: [a-zA-Z]*)?' }]}\n        onSearch={searchUsers}\n        getSearchItemReplacement={(id: string) => {\n          const item = demoUsers.find(({ id: itemId }) => itemId === id);\n\n          if (!item) return undefined;\n\n          return {\n            markdown: `@${item.id}:${item.primary}:user:`,\n            text: item.primary\n          };\n        }}\n        menu={users.length ? { items: users } : undefined}\n        autoFocus\n        markdownOnly\n        defaultValue={\n          '# Try writing some of your own markdown and see how it renders!\\n\\nYou can interact with mentions such as @deans:Seth DeAngelo:user:\\n\\nThere is built in support for #tags: as well!\\n\\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)'\n        }\n        onChange={() => setContent(editorRef.current?.getPlainText() || '')}\n      />\n\n      <RichTextViewer\n        content={content}\n        type='markdown'\n        interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n        markdownMap={{\n          link: (linkToken: TokenMap['link']) => {\n            if (linkToken.href?.includes('www.pega.com')) return LinkComponent;\n          }\n        }}\n      />\n    </Flex>\n  );\n};\n"]}