@pega/cosmos-react-demos 3.0.0-dev.2.1 → 3.0.0-dev.20.0

package/jsx/dnd/StandardDragDropList/SelectionMenu.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionMenu.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/SelectionMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, useCallback, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Flex,\n  Menu,\n  menuHelpers,\n  MenuItemProps,\n  PopoverProps,\n  useElement,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';\nimport { MultiSelectInputProps } from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types';\n\nimport { ContentType, FieldType, mockQuery } from './mockData';\nimport Popover from './Popover';\n\nexport interface SelectionMenuProps {\n  target: NonNullable<PopoverProps['target']>;\n  constraint?: {\n    types?: ContentType[];\n    subTypes?: FieldType[];\n  };\n  onCancel: () => void;\n  onSubmit: (selected: NonNullable<MultiSelectInputProps['selected']>) => void;\n}\n\nconst StyledSelectionMenu: typeof Menu = styled(Menu)(({ theme }) => {\n  return css`\n    margin-inline: calc(-2 * ${theme.base.spacing});\n  `;\n});\n\nStyledSelectionMenu.defaultProps = defaultThemeProp;\n\nconst rootMenuItems: MenuItemProps[] = [\n  { id: 'fields', primary: 'Fields', items: [] },\n  { id: 'views', primary: 'Views', items: [] }\n];\n\nconst SelectionMenu = ({ target, constraint, onCancel: onClose, onSubmit }: SelectionMenuProps) => {\n  const t = useI18n();\n  const [loading, setLoading] = useState(false);\n  const [filterValue, setFilterValue] = useState('');\n  const [inputEl, setInputEl] = useElement<HTMLElement>(null);\n\n  const [menuItems, setMenuItems] = useState<MenuItemProps[]>(() => {\n    if (constraint?.types) {\n      const constrainedTypes = [];\n      if (constraint.types.includes('Field')) {\n        constrainedTypes.push(rootMenuItems[0]);\n      }\n      if (constraint.types.includes('View')) {\n        constrainedTypes.push(rootMenuItems[1]);\n      }\n\n      return constrainedTypes;\n    }\n\n    return rootMenuItems;\n  });\n\n  const [selected, setSelected] = useState<NonNullable<MultiSelectInputProps['selected']>>(\n    () => []\n  );\n\n  const onItemExpand = useCallback(\n    async (id: MenuItemProps['id']) => {\n      const expandedItem = menuHelpers.getItem(menuItems, id);\n      if (!expandedItem || (expandedItem.items && expandedItem.items.length > 0)) {\n        return;\n      }\n\n      setLoading(true);\n\n      const subItems = await mockQuery({\n        type: id === 'fields' ? 'Field' : 'View',\n        delay: 1000\n      });\n\n      const newMenuItems = menuHelpers.mapItem(menuItems, id, item => {\n        return {\n          ...item,\n          items: subItems.map(subItem => ({\n            id: subItem.id,\n            primary: subItem.label,\n            selected: !!selected.find(s => s.id === subItem.id)\n          }))\n        };\n      });\n\n      setMenuItems(newMenuItems as MenuItemProps[]);\n      setLoading(false);\n    },\n    [menuItems, selected]\n  );\n\n  const onFilter = useCallback(async (e: ChangeEvent<HTMLInputElement>) => {\n    const val = e.currentTarget.value;\n    setFilterValue(val);\n\n    if (val) {\n      setLoading(true);\n      setMenuItems([]);\n\n      const matchedItems = await mockQuery({\n        filter: val,\n        delay: 1000\n      });\n\n      setMenuItems(\n        matchedItems.map(matchedItem => {\n          return {\n            id: matchedItem.id,\n            primary: matchedItem.label,\n            secondary: [matchedItem.subType ?? matchedItem.type],\n            selected: !!selected.find(s => s.id === matchedItem.id)\n          };\n        })\n      );\n\n      setLoading(false);\n      return;\n    }\n\n    setMenuItems(rootMenuItems);\n  }, []);\n\n  const onItemClick = useCallback(\n    (id: MenuItemProps['id']) => {\n      setSelected(cur => {\n        if (cur.find(s => s.id === id)) {\n          return cur.filter(sel => sel.id !== id);\n        }\n\n        return [\n          ...cur,\n          { id, text: (menuHelpers.getItem(menuItems, id) as MenuItemProps).primary }\n        ];\n      });\n\n      setMenuItems(cur => menuHelpers.toggleSelected(cur, id) as MenuItemProps[]);\n    },\n    [menuItems]\n  );\n\n  return (\n    <Popover\n      target={target}\n      heading='Content selection'\n      onCancel={onClose}\n      onSubmit={() => {\n        onSubmit(selected);\n      }}\n    >\n      <Flex container={{ direction: 'column', gap: 2, pad: [1, 0] }}>\n        <MultiSelectInput\n          ref={setInputEl}\n          placeholder={t('search_placeholder_default')}\n          value={filterValue}\n          selected={selected}\n          onChange={onFilter}\n          onRemove={onItemClick}\n        />\n        <StyledSelectionMenu\n          focusControlEl={inputEl ?? undefined}\n          mode='multi-select'\n          items={menuItems}\n          scrollAt={10}\n          loading={loading}\n          onItemClick={onItemClick}\n          onItemExpand={onItemExpand}\n        />\n      </Flex>\n    </Popover>\n  );\n};\n\nexport default SelectionMenu;\n"]}

package/jsx/dnd/StandardDragDropList/StandardDragDropList.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const StandardDragDropListDemo: Story;
+//# sourceMappingURL=StandardDragDropList.stories.d.ts.map

package/jsx/dnd/StandardDragDropList/StandardDragDropList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardDragDropList.stories.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/StandardDragDropList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAQ/C,wBAGU;AAEV,eAAO,MAAM,wBAAwB,EAAE,KAWtC,CAAC"}

package/jsx/dnd/StandardDragDropList/StandardDragDropList.stories.jsx

@@ -0,0 +1,15 @@
+import { StandardDragDropList } from '@pega/cosmos-react-dnd';
+import { Flex } from '@pega/cosmos-react-core';
+import StandardListDemoComp from './Demo';
+import { mockFields, mockViews, mockGroups } from './mockData';
+export default {
+    title: 'DnD/StandardDragDropList',
+    component: StandardDragDropList
+};
+export const StandardDragDropListDemo = () => {
+    return (<Flex container={{ direction: 'column', gap: 2 }}>
+      <StandardListDemoComp items={[...mockFields.slice(0, 3), ...mockViews.slice(0, 2), mockGroups[0]]}/>
+      <StandardListDemoComp items={[...mockFields.slice(3, 6), ...mockViews.slice(2, 4), mockGroups[1], mockGroups[2]]}/>
+    </Flex>);
+};
+//# sourceMappingURL=StandardDragDropList.stories.jsx.map

package/jsx/dnd/StandardDragDropList/StandardDragDropList.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardDragDropList.stories.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/StandardDragDropList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,OAAO,oBAAoB,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE/D,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,oBAAoB;CACxB,CAAC;AAEV,MAAM,CAAC,MAAM,wBAAwB,GAAU,GAAG,EAAE;IAClD,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,oBAAoB,CACnB,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,EAE9E;MAAA,CAAC,oBAAoB,CACnB,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,EAE/F;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { StandardDragDropList } from '@pega/cosmos-react-dnd';\nimport { Flex } from '@pega/cosmos-react-core';\n\nimport StandardListDemoComp from './Demo';\nimport { mockFields, mockViews, mockGroups } from './mockData';\n\nexport default {\n  title: 'DnD/StandardDragDropList',\n  component: StandardDragDropList\n} as Meta;\n\nexport const StandardDragDropListDemo: Story = () => {\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <StandardListDemoComp\n        items={[...mockFields.slice(0, 3), ...mockViews.slice(0, 2), mockGroups[0]]}\n      />\n      <StandardListDemoComp\n        items={[...mockFields.slice(3, 6), ...mockViews.slice(2, 4), mockGroups[1], mockGroups[2]]}\n      />\n    </Flex>\n  );\n};\n"]}

package/jsx/dnd/StandardDragDropList/mockData.d.ts

@@ -0,0 +1,26 @@
+export declare type ContentType = 'Field' | 'View' | 'Group';
+export declare type FieldType = typeof fieldTypes[number];
+export interface MockRawItem {
+    id: string;
+    label: string;
+    type: ContentType;
+    subType?: FieldType;
+    items?: MockRawItem[];
+}
+export interface MockQueryParams {
+    id?: MockRawItem['id'] | MockRawItem['id'][];
+    filter?: string;
+    type?: ContentType;
+    subType?: FieldType;
+    limit?: number;
+    offset?: number;
+    delay?: number;
+}
+declare const fieldTypes: readonly ["Text (single line)", "Text (paragraph)", "Integer", "Decimal", "Currency", "Boolean", "Date & time", "Date only", "Time only", "Email", "Phone", "URL", "Picklist"];
+export declare const contentTypes: readonly ["Text (single line)", "Text (paragraph)", "Integer", "Decimal", "Currency", "Boolean", "Date & time", "Date only", "Time only", "Email", "Phone", "URL", "Picklist", "View", "Group"];
+export declare const mockFields: MockRawItem[];
+export declare const mockViews: MockRawItem[];
+export declare const mockGroups: MockRawItem[];
+export declare const mockQuery: ({ id, filter, type, subType, limit, offset, delay }?: MockQueryParams) => Promise<MockRawItem[]>;
+export {};
+//# sourceMappingURL=mockData.d.ts.map

package/jsx/dnd/StandardDragDropList/mockData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mockData.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/mockData.ts"],"names":[],"mappings":"AAEA,oBAAY,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACrD,oBAAY,SAAS,GAAG,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC;AAGlD,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;CACvB;AAGD,MAAM,WAAW,eAAe;IAC9B,EAAE,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAQD,QAAA,MAAM,UAAU,gLAcN,CAAC;AAEX,eAAO,MAAM,YAAY,iMAA4C,CAAC;AAEtE,eAAO,MAAM,UAAU,EAAE,WAAW,EAOlC,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,WAAW,EAMjC,CAAC;AAEH,eAAO,MAAM,UAAU,EAAE,WAAW,EAOlC,CAAC;AAGH,eAAO,MAAM,SAAS,yDAQnB,eAAe,KAAQ,QAAQ,WAAW,EAAE,CAiC9C,CAAC"}

package/jsx/dnd/StandardDragDropList/mockData.js

@@ -0,0 +1,77 @@
+import { createUID } from '@pega/cosmos-react-core';
+const getRandomInt = (min, max) => {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+const fieldTypes = [
+    'Text (single line)',
+    'Text (paragraph)',
+    'Integer',
+    'Decimal',
+    'Currency',
+    'Boolean',
+    'Date & time',
+    'Date only',
+    'Time only',
+    'Email',
+    'Phone',
+    'URL',
+    'Picklist'
+];
+export const contentTypes = [...fieldTypes, 'View', 'Group'];
+export const mockFields = Array.from({ length: 500 }, (_, i) => {
+    return {
+        id: createUID(),
+        label: `Field-${i + 1}`,
+        type: 'Field',
+        subType: fieldTypes[getRandomInt(0, fieldTypes.length - 1)]
+    };
+});
+export const mockViews = Array.from({ length: 50 }, (_, i) => {
+    return {
+        id: createUID(),
+        label: `View-${i + 1}`,
+        type: 'View'
+    };
+});
+export const mockGroups = Array.from({ length: 3 }, (_, i) => {
+    return {
+        id: createUID(),
+        label: `Group-${i + 1}`,
+        type: 'Group',
+        items: i === 0 ? mockFields.slice(-3) : mockFields.slice((i + 1) * -3, i * -3)
+    };
+});
+export const mockQuery = ({ id, filter, type, subType, limit = 100, offset = 0, delay = 0 } = {}) => {
+    return new Promise(resolve => {
+        setTimeout(() => {
+            let contentItems = [];
+            if (id) {
+                resolve([...mockFields, ...mockViews, ...mockGroups].filter(item => {
+                    return Array.isArray(id) ? id.includes(item.id) : item.id === id;
+                }));
+                return;
+            }
+            if (type) {
+                if (type === 'Field') {
+                    contentItems = subType ? mockFields.filter(f => f.subType === subType) : mockFields;
+                }
+                else if (type === 'View') {
+                    contentItems = mockViews;
+                }
+                else if (type === 'Group') {
+                    contentItems = mockGroups;
+                }
+            }
+            else {
+                contentItems = [...mockFields, ...mockViews, ...mockGroups];
+            }
+            if (filter) {
+                contentItems = contentItems.filter(item => item.label.includes(filter));
+            }
+            resolve(contentItems.slice(offset, limit));
+        }, delay);
+    });
+};
+//# sourceMappingURL=mockData.js.map

package/jsx/dnd/StandardDragDropList/mockData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mockData.js","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/mockData.ts"],"names":[],"mappings":"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","sourcesContent":["import { createUID } from '@pega/cosmos-react-core';\n\nexport type ContentType = 'Field' | 'View' | 'Group';\nexport type FieldType = typeof fieldTypes[number];\n\n// A simple mock of an object type before it is transformed to a ContentItem\nexport interface MockRawItem {\n  id: string;\n  label: string;\n  type: ContentType;\n  subType?: FieldType;\n  items?: MockRawItem[];\n}\n\n// Used as the arg type to the simulated query function.\nexport interface MockQueryParams {\n  id?: MockRawItem['id'] | MockRawItem['id'][];\n  filter?: string;\n  type?: ContentType;\n  subType?: FieldType;\n  limit?: number;\n  offset?: number;\n  delay?: number;\n}\n\nconst getRandomInt = (min: number, max: number) => {\n  min = Math.ceil(min);\n  max = Math.floor(max);\n  return Math.floor(Math.random() * (max - min + 1)) + min;\n};\n\nconst fieldTypes = [\n  'Text (single line)',\n  'Text (paragraph)',\n  'Integer',\n  'Decimal',\n  'Currency',\n  'Boolean',\n  'Date & time',\n  'Date only',\n  'Time only',\n  'Email',\n  'Phone',\n  'URL',\n  'Picklist'\n] as const;\n\nexport const contentTypes = [...fieldTypes, 'View', 'Group'] as const;\n\nexport const mockFields: MockRawItem[] = Array.from({ length: 500 }, (_, i) => {\n  return {\n    id: createUID(),\n    label: `Field-${i + 1}`,\n    type: 'Field',\n    subType: fieldTypes[getRandomInt(0, fieldTypes.length - 1)]\n  };\n});\n\nexport const mockViews: MockRawItem[] = Array.from({ length: 50 }, (_, i) => {\n  return {\n    id: createUID(),\n    label: `View-${i + 1}`,\n    type: 'View'\n  };\n});\n\nexport const mockGroups: MockRawItem[] = Array.from({ length: 3 }, (_, i) => {\n  return {\n    id: createUID(),\n    label: `Group-${i + 1}`,\n    type: 'Group',\n    items: i === 0 ? mockFields.slice(-3) : mockFields.slice((i + 1) * -3, i * -3)\n  };\n});\n\n// Simulated query functionality to assist with loading states and fetching specifc content item types.\nexport const mockQuery = ({\n  id,\n  filter,\n  type,\n  subType,\n  limit = 100,\n  offset = 0,\n  delay = 0\n}: MockQueryParams = {}): Promise<MockRawItem[]> => {\n  return new Promise(resolve => {\n    setTimeout(() => {\n      let contentItems: MockRawItem[] = [];\n\n      if (id) {\n        resolve(\n          [...mockFields, ...mockViews, ...mockGroups].filter(item => {\n            return Array.isArray(id) ? id.includes(item.id) : item.id === id;\n          })\n        );\n        return;\n      }\n\n      if (type) {\n        if (type === 'Field') {\n          contentItems = subType ? mockFields.filter(f => f.subType === subType) : mockFields;\n        } else if (type === 'View') {\n          contentItems = mockViews;\n        } else if (type === 'Group') {\n          contentItems = mockGroups;\n        }\n      } else {\n        contentItems = [...mockFields, ...mockViews, ...mockGroups];\n      }\n\n      if (filter) {\n        contentItems = contentItems.filter(item => item.label.includes(filter));\n      }\n\n      resolve(contentItems.slice(offset, limit));\n    }, delay);\n  });\n};\n"]}

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

@@ -0,0 +1,309 @@
+export declare const label = "Form field label";
+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

@@ -0,0 +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,eAAO,MAAM,uBAAuB,QAAS,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiB7D,CAAC"}

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

@@ -0,0 +1,23 @@
+import ReactDOM from 'react-dom';
+export const label = 'Form field label';
+const PegaCustom = ({ children }) => {
+    return (<p style={{ color: 'blue', textTransform: 'uppercase' }} dangerouslySetInnerHTML={{ __html: children }}/>);
+};
+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);
+        }
+    };
+};
+//# sourceMappingURL=Editor.mocks.jsx.map

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

@@ -0,0 +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,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;;AAiBxC,wBAGU;AAIV,eAAO,MAAM,UAAU,mBAmBtB,CAAC;AAEF,eAAO,MAAM,eAAe,mBAmB3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mBAc7B,CAAC;AA4BF,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,KAoBxB,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

@@ -1,20 +1,19 @@
 import { useState, useRef } from 'react';
-import ReactDOM from 'react-dom';
 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 { createPegaCustomElement, label } from './Editor.mocks';
 export default {
     title: 'RTE/Editor',
     component: Editor
 };
-const label = 'Form field label';
 export const EditorDemo = () => {
     const editorRef = useRef(null);
     const onImageAdded = (image, id) => {
         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></body>'/>);
+    return (<Editor ref={editorRef} label={label} toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']} onFocus={action('Editor focused')} onBlur={action('Editor blurred')} onChange={action('Editor changed')} 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);
@@ -33,30 +32,13 @@ export const ReadonlyFormField = () => {
       <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>
       `}/>);
 };
-const PegaCustom = ({ children }) => {
-    return (<p style={{ color: 'blue', textTransform: 'uppercase' }} dangerouslySetInnerHTML={{ __html: children }}/>);
-};
-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);
-    }
-}
 export const CustomComponentDemo = () => {
     const editorRef = useRef(null);
     const [editor, setEditor] = useState({});
     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><pega-custom>Hello from custom element.</pega-custom><p>hi</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',