@pega/cosmos-react-demos 3.0.0-dev.4.1 → 3.0.0-dev.6.0

package/lib/dnd/DragDropList/DragDropList.stories.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { optionsKnob } from '@storybook/addon-knobs';
-import styled from 'styled-components';
-import { Button, Flex, createUID } from '@pega/cosmos-react-core';
+import { Button, Flex } from '@pega/cosmos-react-core';
 import { DragDropManager, DragDropList } from '@pega/cosmos-react-dnd';
+import { StyledDemoDragDropList } from './DragDropList.styles';
+import { createMockDataArray, DemoListItem, EmptyItem, itemType, mockDataArrayA, mockDataArrayB, sort } from './DragDropList.mocks';
 export default {
     title: 'DnD/DragDropList',
     component: DragDropList,
@@ -12,102 +12,31 @@ export default {
         layout: 'fullscreen'
     }
 };
-// Helper function to create demo arrays
-const createMockDataArray = (length, type, listId) => {
-    return Array.from({ length }, (_, i) => {
-        const id = `${i}`;
-        return {
-            type,
-            id: createUID(),
-            data: {
-                content: `Item ${listId}:${id}`,
-                color: `hsl(${(i * 360) / length}deg, 100%, 66%)`
-            }
-        };
-    });
-};
-// styled demo list component
-const StyledEmptyItem = styled.li `
-  display: grid;
-  padding: 1rem;
-  gap: 1rem;
-`;
-// Demo component used to render list items
-const EmptyItem = () => {
-    return _jsx(StyledEmptyItem, { children: "No Items" }, void 0);
-};
-// styled demo list component
-const StyledDemoDragDropList = styled.ul `
-  list-style: none;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  padding: 0.5rem;
-`;
-// styled demo list item component
-const StyledDemoDragDropListItem = styled.li `
-  border: 0.0625rem dashed gray;
-  margin: 0.5rem;
-  padding: 0.5rem;
-  background: white;
-  cursor: ${({ useDragHandle }) => (useDragHandle ? 'auto' : 'move')};
-  transition: transform 0.3s;
-
-  .handle {
-    background: pink;
-    width: 1rem;
-    height: 1rem;
-    display: inline-block;
-    margin-right: 0.0625rem;
-    cursor: move;
-  }
-`;
-// Demo component used to render list items
-const DemoListItem = ({ id, type, dragRef, data, isDragging, ...restProps }) => {
-    return (_jsx(StyledDemoDragDropListItem, { ref: dragRef, style: {
-            opacity: isDragging ? '0.5' : undefined,
-            backgroundColor: data?.color ?? 'white'
-        }, ...restProps, children: data?.content }, void 0));
-};
-const pullModes = {
-    remove: 'remove',
-    clone: 'clone'
-};
-const pushModes = {
-    insert: 'insert',
-    prepend: 'prepend',
-    append: 'append',
-    sort: 'sort'
-};
-const sort = (a, b) => {
-    return a.data.content.localeCompare(b.data.content);
-};
-const itemType = Symbol('');
-const mockDataArrayA = createMockDataArray(10, itemType, 'A');
-const mockDataArrayB = createMockDataArray(4, itemType, 'B');
-// -----------------------------------------------------------------------------
-// DragDropList
-// -----------------------------------------------------------------------------
-export const DragDropListDemo = () => {
-    const pullMode = optionsKnob('Pull Mode', pullModes, 'remove', { display: 'inline-radio' });
-    const pushMode = optionsKnob('Push Mode', pushModes, 'insert', { display: 'inline-radio' });
+export const DragDropListDemo = (args) => {
     const [arrayA, setArrayA] = useState(mockDataArrayA);
     const [arrayB, setArrayB] = useState(mockDataArrayB);
     return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: useCallback(() => {
                     setArrayA(items => {
                         return [...items, ...createMockDataArray(1, itemType, 'A-new')];
                     });
-                }, []), children: "Add to List A" }, void 0), _jsx(Button, { onClick: useCallback(() => {
+                }, []), children: "Add to List A" }), _jsx(Button, { onClick: useCallback(() => {
                     setArrayB(items => {
                         return [...items, ...createMockDataArray(1, itemType, 'B-new')];
                     });
-                }, []), children: "Add to List B" }, void 0), _jsx(DragDropManager, { children: _jsxs(Flex, { container: true, style: { minHeight: '100vh' }, children: [_jsx(DragDropList, { as: StyledDemoDragDropList, id: 'list1', accept: itemType, pullMode: pullMode, pushMode: pushMode === 'sort' ? sort : pushMode, items: arrayA, itemRenderer: DemoListItem, emptyRenderer: EmptyItem, onChange: newArray => {
+                }, []), children: "Add to List B" }), _jsx(DragDropManager, { children: _jsxs(Flex, { container: true, style: { minHeight: '100vh' }, children: [_jsx(DragDropList, { as: StyledDemoDragDropList, id: 'list1', accept: itemType, pullMode: args.pullMode, pushMode: args.pushMode === 'sort' ? sort : args.pushMode, items: arrayA, itemRenderer: DemoListItem, emptyRenderer: EmptyItem, onChange: newArray => {
                                 setArrayA(newArray);
                                 action('List A changed')(newArray);
-                            }, style: { background: 'palegreen' } }, void 0), _jsx(DragDropList, { as: StyledDemoDragDropList, id: 'list2', accept: itemType, pullMode: pullMode, pushMode: pushMode === 'sort' ? sort : pushMode, items: arrayB, itemRenderer: DemoListItem, emptyRenderer: EmptyItem, onChange: newArray => {
+                            }, style: { background: 'palegreen' } }), _jsx(DragDropList, { as: StyledDemoDragDropList, id: 'list2', accept: itemType, pullMode: args.pullMode, pushMode: args.pushMode === 'sort' ? sort : args.pushMode, items: arrayB, itemRenderer: DemoListItem, emptyRenderer: EmptyItem, onChange: newArray => {
                                 setArrayB(newArray);
                                 action('List B changed')(newArray);
-                            }, style: { background: 'lightblue' } }, void 0)] }, void 0) }, void 0)] }, void 0));
+                            }, style: { background: 'lightblue' } })] }) })] }));
+};
+DragDropListDemo.args = {
+    pullMode: 'remove',
+    pushMode: 'insert'
+};
+DragDropListDemo.argTypes = {
+    pullMode: { options: ['remove', 'clone'], control: { type: 'select' } },
+    pushMode: { options: ['insert', 'prepend', 'append', 'sort'], control: { type: 'select' } }
 };
 //# sourceMappingURL=DragDropList.stories.js.map

package/lib/dnd/DragDropList/DragDropList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragDropList.stories.js","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { optionsKnob } from '@storybook/addon-knobs';\nimport styled from 'styled-components';\n\nimport { Button, Flex, createUID } from '@pega/cosmos-react-core';\nimport {\n  DragDropManager,\n  DraggableItem,\n  DraggableProps,\n  DragDropList,\n  ItemRendererProps\n} from '@pega/cosmos-react-dnd';\n\nexport default {\n  title: 'DnD/DragDropList',\n  component: DragDropList,\n  parameters: {\n    layout: 'fullscreen'\n  }\n};\n\ninterface ItemData {\n  content: string;\n  color: string;\n}\n\n// Helper function to create demo arrays\nconst createMockDataArray = (\n  length: number,\n  type: DraggableProps['type'],\n  listId: string\n): DraggableItem<ItemData>[] => {\n  return Array.from({ length }, (_, i) => {\n    const id = `${i}`;\n    return {\n      type,\n      id: createUID(),\n      data: {\n        content: `Item ${listId}:${id}`,\n        color: `hsl(${(i * 360) / length}deg, 100%, 66%)`\n      }\n    };\n  });\n};\n\n// styled demo list component\nconst StyledEmptyItem = styled.li`\n  display: grid;\n  padding: 1rem;\n  gap: 1rem;\n`;\n\n// Demo component used to render list items\nconst EmptyItem = () => {\n  return <StyledEmptyItem>No Items</StyledEmptyItem>;\n};\n\n// styled demo list component\nconst StyledDemoDragDropList = styled.ul`\n  list-style: none;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding: 0.5rem;\n`;\n\n// styled demo list item component\nconst StyledDemoDragDropListItem = styled.li<{ [key: string]: any }>`\n  border: 0.0625rem dashed gray;\n  margin: 0.5rem;\n  padding: 0.5rem;\n  background: white;\n  cursor: ${({ useDragHandle }) => (useDragHandle ? 'auto' : 'move')};\n  transition: transform 0.3s;\n\n  .handle {\n    background: pink;\n    width: 1rem;\n    height: 1rem;\n    display: inline-block;\n    margin-right: 0.0625rem;\n    cursor: move;\n  }\n`;\n\n// Demo component used to render list items\nconst DemoListItem = ({\n  id,\n  type,\n  dragRef,\n  data,\n  isDragging,\n  ...restProps\n}: ItemRendererProps<ItemData>) => {\n  return (\n    <StyledDemoDragDropListItem\n      ref={dragRef}\n      style={{\n        opacity: isDragging ? '0.5' : undefined,\n        backgroundColor: data?.color ?? 'white'\n      }}\n      {...restProps}\n    >\n      {data?.content}\n    </StyledDemoDragDropListItem>\n  );\n};\n\nconst pullModes = {\n  remove: 'remove',\n  clone: 'clone'\n} as const;\n\nconst pushModes = {\n  insert: 'insert',\n  prepend: 'prepend',\n  append: 'append',\n  sort: 'sort'\n} as const;\n\nconst sort = (a: DraggableItem<ItemData>, b: DraggableItem<ItemData>): number => {\n  return a.data!.content.localeCompare(b.data!.content);\n};\n\nconst itemType = Symbol('');\nconst mockDataArrayA = createMockDataArray(10, itemType, 'A');\nconst mockDataArrayB = createMockDataArray(4, itemType, 'B');\n\n// -----------------------------------------------------------------------------\n// DragDropList\n// -----------------------------------------------------------------------------\nexport const DragDropListDemo = () => {\n  const pullMode = optionsKnob('Pull Mode', pullModes, 'remove', { display: 'inline-radio' });\n  const pushMode = optionsKnob('Push Mode', pushModes, 'insert', { display: 'inline-radio' });\n\n  const [arrayA, setArrayA] = useState(mockDataArrayA);\n  const [arrayB, setArrayB] = useState(mockDataArrayB);\n\n  return (\n    <>\n      <Button\n        onClick={useCallback(() => {\n          setArrayA(items => {\n            return [...items, ...createMockDataArray(1, itemType, 'A-new')];\n          });\n        }, [])}\n      >\n        Add to List A\n      </Button>\n      <Button\n        onClick={useCallback(() => {\n          setArrayB(items => {\n            return [...items, ...createMockDataArray(1, itemType, 'B-new')];\n          });\n        }, [])}\n      >\n        Add to List B\n      </Button>\n      <DragDropManager>\n        <Flex container style={{ minHeight: '100vh' }}>\n          <DragDropList\n            as={StyledDemoDragDropList}\n            id='list1'\n            accept={itemType}\n            pullMode={pullMode}\n            pushMode={pushMode === 'sort' ? sort : pushMode}\n            items={arrayA}\n            itemRenderer={DemoListItem}\n            emptyRenderer={EmptyItem}\n            onChange={newArray => {\n              setArrayA(newArray);\n              action('List A changed')(newArray);\n            }}\n            style={{ background: 'palegreen' }}\n          />\n\n          <DragDropList\n            as={StyledDemoDragDropList}\n            id='list2'\n            accept={itemType}\n            pullMode={pullMode}\n            pushMode={pushMode === 'sort' ? sort : pushMode}\n            items={arrayB}\n            itemRenderer={DemoListItem}\n            emptyRenderer={EmptyItem}\n            onChange={newArray => {\n              setArrayB(newArray);\n              action('List B changed')(newArray);\n            }}\n            style={{ background: 'lightblue' }}\n          />\n        </Flex>\n      </DragDropManager>\n    </>\n  );\n};\n"]}
+{"version":3,"file":"DragDropList.stories.js","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, Flex } from '@pega/cosmos-react-core';\nimport { DragDropManager, DragDropList, DragDropListProps } from '@pega/cosmos-react-dnd';\n\nimport { StyledDemoDragDropList } from './DragDropList.styles';\nimport {\n  createMockDataArray,\n  DemoListItem,\n  EmptyItem,\n  itemType,\n  mockDataArrayA,\n  mockDataArrayB,\n  sort\n} from './DragDropList.mocks';\n\nexport default {\n  title: 'DnD/DragDropList',\n  component: DragDropList,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface DragDropListDemoProps {\n  pullMode?: DragDropListProps['pullMode'];\n  pushMode?: DragDropListProps['pushMode'] | 'sort';\n}\n\nexport const DragDropListDemo: Story<DragDropListDemoProps> = (args: DragDropListDemoProps) => {\n  const [arrayA, setArrayA] = useState(mockDataArrayA);\n  const [arrayB, setArrayB] = useState(mockDataArrayB);\n\n  return (\n    <>\n      <Button\n        onClick={useCallback(() => {\n          setArrayA(items => {\n            return [...items, ...createMockDataArray(1, itemType, 'A-new')];\n          });\n        }, [])}\n      >\n        Add to List A\n      </Button>\n      <Button\n        onClick={useCallback(() => {\n          setArrayB(items => {\n            return [...items, ...createMockDataArray(1, itemType, 'B-new')];\n          });\n        }, [])}\n      >\n        Add to List B\n      </Button>\n      <DragDropManager>\n        <Flex container style={{ minHeight: '100vh' }}>\n          <DragDropList\n            as={StyledDemoDragDropList}\n            id='list1'\n            accept={itemType}\n            pullMode={args.pullMode}\n            pushMode={args.pushMode === 'sort' ? sort : args.pushMode}\n            items={arrayA}\n            itemRenderer={DemoListItem}\n            emptyRenderer={EmptyItem}\n            onChange={newArray => {\n              setArrayA(newArray);\n              action('List A changed')(newArray);\n            }}\n            style={{ background: 'palegreen' }}\n          />\n\n          <DragDropList\n            as={StyledDemoDragDropList}\n            id='list2'\n            accept={itemType}\n            pullMode={args.pullMode}\n            pushMode={args.pushMode === 'sort' ? sort : args.pushMode}\n            items={arrayB}\n            itemRenderer={DemoListItem}\n            emptyRenderer={EmptyItem}\n            onChange={newArray => {\n              setArrayB(newArray);\n              action('List B changed')(newArray);\n            }}\n            style={{ background: 'lightblue' }}\n          />\n        </Flex>\n      </DragDropManager>\n    </>\n  );\n};\n\nDragDropListDemo.args = {\n  pullMode: 'remove',\n  pushMode: 'insert'\n};\n\nDragDropListDemo.argTypes = {\n  pullMode: { options: ['remove', 'clone'], control: { type: 'select' } },\n  pushMode: { options: ['insert', 'prepend', 'append', 'sort'], control: { type: 'select' } }\n};\n"]}

package/lib/dnd/DragDropList/DragDropList.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledEmptyItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDemoDragDropList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDemoDragDropListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    [key: string]: any;
+}, never>;
+//# sourceMappingURL=DragDropList.styles.d.ts.map

package/lib/dnd/DragDropList/DragDropList.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropList.styles.d.ts","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,wGAI3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,wGAOlC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;SAgBtC,CAAC"}

package/lib/dnd/DragDropList/DragDropList.styles.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+export const StyledEmptyItem = styled.li `
+  display: grid;
+  padding: 1rem;
+  gap: 1rem;
+`;
+export const StyledDemoDragDropList = styled.ul `
+  list-style: none;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 0.5rem;
+`;
+export const StyledDemoDragDropListItem = styled.li `
+  border: 0.0625rem dashed gray;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  background: white;
+  cursor: ${({ useDragHandle }) => (useDragHandle ? 'auto' : 'move')};
+  transition: transform 0.3s;
+
+  .handle {
+    background: pink;
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+    margin-right: 0.0625rem;
+    cursor: move;
+  }
+`;
+//# sourceMappingURL=DragDropList.styles.js.map

package/lib/dnd/DragDropList/DragDropList.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropList.styles.js","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,EAAE,CAAA;;;;CAIvC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;CAO9C,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,EAAE,CAAwB;;;;;YAK/D,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;;;;;;CAWnE,CAAC","sourcesContent":["import styled from 'styled-components';\n\nexport const StyledEmptyItem = styled.li`\n  display: grid;\n  padding: 1rem;\n  gap: 1rem;\n`;\n\nexport const StyledDemoDragDropList = styled.ul`\n  list-style: none;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding: 0.5rem;\n`;\n\nexport const StyledDemoDragDropListItem = styled.li<{ [key: string]: any }>`\n  border: 0.0625rem dashed gray;\n  margin: 0.5rem;\n  padding: 0.5rem;\n  background: white;\n  cursor: ${({ useDragHandle }) => (useDragHandle ? 'auto' : 'move')};\n  transition: transform 0.3s;\n\n  .handle {\n    background: pink;\n    width: 1rem;\n    height: 1rem;\n    display: inline-block;\n    margin-right: 0.0625rem;\n    cursor: move;\n  }\n`;\n"]}

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

@@ -0,0 +1,6 @@
+export declare const label = "Form field label";
+export declare class PegaCustomElement extends HTMLElement {
+    removeElements(): void;
+    connectedCallback(): void;
+}
+//# sourceMappingURL=Editor.mocks.d.ts.map

package/lib/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,qBAAa,iBAAkB,SAAQ,WAAW;IAChD,cAAc;IAMd,iBAAiB;CAOlB"}

package/lib/rte/Editor/Editor.mocks.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactDOM from 'react-dom';
+export const label = 'Form field label';
+const PegaCustom = ({ children }) => {
+    return (_jsx("p", { style: { color: 'blue', textTransform: 'uppercase' }, 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: { __html: children } }));
+};
+export 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(_jsx(PegaCustom, { children: inner }), mountPoint);
+    }
+}
+//# sourceMappingURL=Editor.mocks.js.map

package/lib/rte/Editor/Editor.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.mocks.js","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,YACE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE;QACpD,2CAA2C;QAC3C,uBAAuB,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,GAC7C,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,KAAC,UAAU,cAAE,KAAK,GAAc,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"]}

package/lib/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,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"}

package/lib/rte/Editor/Editor.stories.js

@@ -1,21 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { label, PegaCustomElement } 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 (_jsx(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>' }, void 0));
+    return (_jsx(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>' }));
 };
 export const EmptyEditorDemo = () => {
     const editorRef = useRef(null);
@@ -23,7 +22,7 @@ export const EmptyEditorDemo = () => {
         const src = URL.createObjectURL(image);
         editorRef.current?.appendImage({ src, alt: image.name }, id);
     };
-    return (_jsx(Editor, { ref: editorRef, label: label, toolbar: ['inline-styling', 'lists', 'indentation', 'images', 'links'], onImageAdded: onImageAdded, onFocus: action('Editor has focus'), onBlur: action('Editor has blurred'), placeholder: 'Type some stuff in here' }, void 0));
+    return (_jsx(Editor, { ref: editorRef, label: label, toolbar: ['inline-styling', 'lists', 'indentation', 'images', 'links'], onImageAdded: onImageAdded, onFocus: action('Editor has focus'), onBlur: action('Editor has blurred'), placeholder: 'Type some stuff in here' }));
 };
 export const ReadonlyFormField = () => {
     return (_jsx(Editor, { label: label, readOnly: true, 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>
@@ -32,27 +31,8 @@ export const ReadonlyFormField = () => {
       <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>
 
       <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>
-      ` }, void 0));
+      ` }));
 };
-const PegaCustom = ({ children }) => {
-    return (_jsx("p", { style: { color: 'blue', textTransform: 'uppercase' }, 
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML: { __html: children } }, void 0));
-};
-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(_jsx(PegaCustom, { children: inner }, void 0), mountPoint);
-    }
-}
 export const CustomComponentDemo = () => {
     const editorRef = useRef(null);
     const [editor, setEditor] = useState({});
@@ -69,7 +49,7 @@ export const CustomComponentDemo = () => {
             }
         ], onInit: initializedEditor => {
             setEditor(initializedEditor);
-        } }, void 0));
+        } }));
 };
 export const RichTextEditorWithLogs = () => {
     const editorRef = useRef(null);
@@ -86,7 +66,7 @@ export const RichTextEditorWithLogs = () => {
         else if (type === 'rich_text')
             setContent(editorRef.current?.getRichText());
     };
-    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Editor, { ref: editorRef, toolbar: ['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation'], onImageAdded: onImageAdded, label: 'Rich text editor with logs', info: 'Click on the buttons below to show the different formatted outputs of the RTE' }, void 0), _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { onClick: () => showContent('html'), children: "Show HTML" }, void 0), _jsx(Button, { onClick: () => showContent('plain_text'), children: "Show plain text" }, void 0), _jsx(Button, { onClick: () => showContent('rich_text'), children: "Show rich text" }, void 0)] }, void 0), _jsx(Text, { children: content }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Editor, { ref: editorRef, toolbar: ['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation'], onImageAdded: onImageAdded, label: 'Rich text editor with logs', info: 'Click on the buttons below to show the different formatted outputs of the RTE' }), _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { onClick: () => showContent('html'), children: "Show HTML" }), _jsx(Button, { onClick: () => showContent('plain_text'), children: "Show plain text" }), _jsx(Button, { onClick: () => showContent('rich_text'), children: "Show rich text" })] }), _jsx(Text, { children: content })] }));
 };
 export const RichTextEditorHtmlParsingDemo = () => {
     const [html, setHtml] = useState('<p>Hello world!</p>');
@@ -95,6 +75,6 @@ export const RichTextEditorHtmlParsingDemo = () => {
         const src = URL.createObjectURL(image);
         rteRef.current?.appendImage({ src, alt: image.name }, id);
     };
-    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsxs(Card, { children: [_jsx(CardContent, { children: _jsx(TextArea, { value: html, onChange: e => setHtml(e.target.value) }, void 0) }, void 0), _jsx(CardFooter, { children: _jsx(Button, { onClick: () => rteRef.current?.insertHtml(html.trim(), true), children: "Overwrite RTE with new HTML" }, void 0) }, void 0)] }, void 0), _jsx(Editor, { defaultValue: html, onImageAdded: onImageAdded, ref: rteRef, label: label, toolbar: ['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation'] }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsxs(Card, { children: [_jsx(CardContent, { children: _jsx(TextArea, { value: html, onChange: e => setHtml(e.target.value) }) }), _jsx(CardFooter, { children: _jsx(Button, { onClick: () => rteRef.current?.insertHtml(html.trim(), true), children: "Overwrite RTE with new HTML" }) })] }), _jsx(Editor, { defaultValue: html, onImageAdded: onImageAdded, ref: rteRef, label: label, toolbar: ['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation'] })] }));
 };
 //# sourceMappingURL=Editor.stories.js.map

package/lib/rte/Editor/Editor.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.stories.js","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 ReactDOM from 'react-dom';\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\nexport default {\n  title: 'RTE/Editor',\n  component: Editor\n} as Meta;\n\nconst label = 'Form field label';\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\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\nclass 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\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.js","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"]}

package/lib/rte/RichTextEditor/RichTextEditor.mocks.js

@@ -6,31 +6,31 @@ export const demoUsers = [
         id: 'turnc',
         primary: 'Cindy Turner',
         secondary: ['Lead Engineer'],
-        visual: _jsx(Avatar, { size: 'l', name: 'Cindy Turner' }, void 0)
+        visual: _jsx(Avatar, { size: 'l', name: 'Cindy Turner' })
     },
     {
         id: 'deans',
         primary: 'Seth DeAngelo',
         secondary: ['Senior Software Engineer', 'Backend Developer'],
-        visual: _jsx(Avatar, { size: 'l', name: 'Seth DeAngelo' }, void 0)
+        visual: _jsx(Avatar, { size: 'l', name: 'Seth DeAngelo' })
     },
     {
         id: 'moorj',
         primary: 'Janet Moore',
         secondary: ['Backend Developer'],
-        visual: _jsx(Avatar, { size: 'l', name: 'Janet Moore' }, void 0)
+        visual: _jsx(Avatar, { size: 'l', name: 'Janet Moore' })
     },
     {
         id: 'thomd',
         primary: 'Dean Thomas',
         secondary: ['Designer'],
-        visual: _jsx(Avatar, { size: 'l', name: 'Dean Thomas' }, void 0)
+        visual: _jsx(Avatar, { size: 'l', name: 'Dean Thomas' })
     },
     {
         id: 'hathb',
         primary: 'Bob Hathoway',
         secondary: ['Lead Designer', 'Product Owner'],
-        visual: _jsx(Avatar, { size: 'l', name: 'Bob Hathoway' }, void 0)
+        visual: _jsx(Avatar, { size: 'l', name: 'Bob Hathoway' })
     }
 ];
 //# sourceMappingURL=RichTextEditor.mocks.js.map

package/lib/rte/RichTextEditor/RichTextEditor.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.mocks.js","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAiB,MAAM,yBAAyB,CAAC;AAEhE,iBAAiB;AACjB,MAAM,CAAC,MAAM,SAAS,GAAoB;IACxC;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,cAAc;QACvB,SAAS,EAAE,CAAC,eAAe,CAAC;QAC5B,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,WAAG;KAChD;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,eAAe;QACxB,SAAS,EAAE,CAAC,0BAA0B,EAAE,mBAAmB,CAAC;QAC5D,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,eAAe,WAAG;KACjD;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,aAAa;QACtB,SAAS,EAAE,CAAC,mBAAmB,CAAC;QAChC,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,aAAa,WAAG;KAC/C;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,aAAa;QACtB,SAAS,EAAE,CAAC,UAAU,CAAC;QACvB,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,aAAa,WAAG;KAC/C;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,cAAc;QACvB,SAAS,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;QAC7C,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,WAAG;KAChD;CACF,CAAC","sourcesContent":["import { Avatar, MenuItemProps } from '@pega/cosmos-react-core';\n\n// cspell:disable\nexport const demoUsers: MenuItemProps[] = [\n  {\n    id: 'turnc',\n    primary: 'Cindy Turner',\n    secondary: ['Lead Engineer'],\n    visual: <Avatar size='l' name='Cindy Turner' />\n  },\n  {\n    id: 'deans',\n    primary: 'Seth DeAngelo',\n    secondary: ['Senior Software Engineer', 'Backend Developer'],\n    visual: <Avatar size='l' name='Seth DeAngelo' />\n  },\n  {\n    id: 'moorj',\n    primary: 'Janet Moore',\n    secondary: ['Backend Developer'],\n    visual: <Avatar size='l' name='Janet Moore' />\n  },\n  {\n    id: 'thomd',\n    primary: 'Dean Thomas',\n    secondary: ['Designer'],\n    visual: <Avatar size='l' name='Dean Thomas' />\n  },\n  {\n    id: 'hathb',\n    primary: 'Bob Hathoway',\n    secondary: ['Lead Designer', 'Product Owner'],\n    visual: <Avatar size='l' name='Bob Hathoway' />\n  }\n];\n"]}
+{"version":3,"file":"RichTextEditor.mocks.js","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAiB,MAAM,yBAAyB,CAAC;AAEhE,iBAAiB;AACjB,MAAM,CAAC,MAAM,SAAS,GAAoB;IACxC;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,cAAc;QACvB,SAAS,EAAE,CAAC,eAAe,CAAC;QAC5B,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG;KAChD;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,eAAe;QACxB,SAAS,EAAE,CAAC,0BAA0B,EAAE,mBAAmB,CAAC;QAC5D,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,eAAe,GAAG;KACjD;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,aAAa;QACtB,SAAS,EAAE,CAAC,mBAAmB,CAAC;QAChC,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,aAAa,GAAG;KAC/C;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,aAAa;QACtB,SAAS,EAAE,CAAC,UAAU,CAAC;QACvB,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,aAAa,GAAG;KAC/C;IACD;QACE,EAAE,EAAE,OAAO;QACX,OAAO,EAAE,cAAc;QACvB,SAAS,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;QAC7C,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG;KAChD;CACF,CAAC","sourcesContent":["import { Avatar, MenuItemProps } from '@pega/cosmos-react-core';\n\n// cspell:disable\nexport const demoUsers: MenuItemProps[] = [\n  {\n    id: 'turnc',\n    primary: 'Cindy Turner',\n    secondary: ['Lead Engineer'],\n    visual: <Avatar size='l' name='Cindy Turner' />\n  },\n  {\n    id: 'deans',\n    primary: 'Seth DeAngelo',\n    secondary: ['Senior Software Engineer', 'Backend Developer'],\n    visual: <Avatar size='l' name='Seth DeAngelo' />\n  },\n  {\n    id: 'moorj',\n    primary: 'Janet Moore',\n    secondary: ['Backend Developer'],\n    visual: <Avatar size='l' name='Janet Moore' />\n  },\n  {\n    id: 'thomd',\n    primary: 'Dean Thomas',\n    secondary: ['Designer'],\n    visual: <Avatar size='l' name='Dean Thomas' />\n  },\n  {\n    id: 'hathb',\n    primary: 'Bob Hathoway',\n    secondary: ['Lead Designer', 'Product Owner'],\n    visual: <Avatar size='l' name='Bob Hathoway' />\n  }\n];\n// cspell:enable\n"]}

package/lib/rte/RichTextEditor/RichTextEditor.stories.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { RichTextEditorProps } from '@pega/cosmos-react-rte';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const RichTextEditorDemo: Story<RichTextEditorProps>;
-export declare const RichTextEditorWithLogs: () => JSX.Element;
+export declare const RichTextEditorWithLogs: Story;
 export declare const RichTextEditorMDDemo: Story<RichTextEditorProps>;
-export declare const RichTextEditorHtmlParsingDemo: () => JSX.Element;
+export declare const RichTextEditorHtmlParsingDemo: Story;
 //# sourceMappingURL=RichTextEditor.stories.d.ts.map

package/lib/rte/RichTextEditor/RichTextEditor.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAa/C,OAAO,EAAkB,mBAAmB,EAAuB,MAAM,wBAAwB,CAAC;;AAIlG,wBAqBU;AAEV,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,CAkDzD,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBA2ClC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,mBAAmB,CAuC3D,CAAC;AAEF,eAAO,MAAM,6BAA6B,mBAuCzC,CAAC"}
+{"version":3,"file":"RichTextEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAa/C,OAAO,EAAkB,mBAAmB,EAAuB,MAAM,wBAAwB,CAAC;;AAIlG,wBAqBU;AAEV,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,CAkDzD,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA2CpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,mBAAmB,CAuC3D,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,KAuC3C,CAAC"}

package/lib/rte/RichTextEditor/RichTextEditor.stories.js

@@ -46,7 +46,7 @@ export const RichTextEditorDemo = (args) => {
                     'lists',
                     'cut-copy-paste',
                     'indentation'
-                ], onImageAdded: onImageAdded, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, defaultValue: '<body><!-- I will break the RTE --><p> Life is stress free.</p><p> Life is stress free.</p></body>' }, void 0), _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { onClick: overwriteText, children: "Overwrite RTE value with 'Hello world!' HTML" }, void 0), _jsx(Button, { onClick: insertText, label: 'RTE Must be focused for insert text to work', children: "Insert 'Hi mom!'" }, void 0)] }, void 0)] }, void 0));
+                ], onImageAdded: onImageAdded, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, defaultValue: '<body><!-- I will break the RTE --><p> Life is stress free.</p><p> Life is stress free.</p></body>' }), _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { onClick: overwriteText, children: "Overwrite RTE value with 'Hello world!' HTML" }), _jsx(Button, { onClick: insertText, label: 'RTE Must be focused for insert text to work', children: "Insert 'Hi mom!'" })] })] }));
 };
 export const RichTextEditorWithLogs = () => {
     const editorRef = useRef(null);
@@ -72,7 +72,7 @@ export const RichTextEditorWithLogs = () => {
                     'lists',
                     'cut-copy-paste',
                     'indentation'
-                ], onImageAdded: onImageAdded, label: 'Rich text editor with logs', info: 'Click on the buttons below to show the different formatted outputs of the RTE' }, void 0), _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { onClick: () => showContent('html'), children: "Show HTML" }, void 0), _jsx(Button, { onClick: () => showContent('plain_text'), children: "Show plain text" }, void 0), _jsx(Button, { onClick: () => showContent('rich_text'), children: "Show rich text" }, void 0)] }, void 0), _jsx(Text, { children: content }, void 0)] }, void 0));
+                ], onImageAdded: onImageAdded, label: 'Rich text editor with logs', info: 'Click on the buttons below to show the different formatted outputs of the RTE' }), _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { onClick: () => showContent('html'), children: "Show HTML" }), _jsx(Button, { onClick: () => showContent('plain_text'), children: "Show plain text" }), _jsx(Button, { onClick: () => showContent('rich_text'), children: "Show rich text" })] }), _jsx(Text, { children: content })] }));
 };
 export const RichTextEditorMDDemo = (args) => {
     const [users, setUsers] = useState(demoUsers);
@@ -91,7 +91,7 @@ export const RichTextEditorMDDemo = (args) => {
                 markdown: `@${item.id}:${item.primary}:user:`,
                 text: item.primary
             };
-        }, menu: users.length ? { items: users } : undefined, autoFocus: true, markdownOnly: true, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+        }, menu: users.length ? { items: users } : undefined, autoFocus: true, markdownOnly: true, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
 };
 export const RichTextEditorHtmlParsingDemo = () => {
     const [html, setHtml] = useState('<p>Hello world!</p>');
@@ -100,7 +100,7 @@ export const RichTextEditorHtmlParsingDemo = () => {
         const src = URL.createObjectURL(image);
         rteRef.current?.appendImage({ src, alt: image.name }, id);
     };
-    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsxs(Card, { children: [_jsx(CardContent, { children: _jsx(TextArea, { value: html, onChange: e => setHtml(e.target.value) }, void 0) }, void 0), _jsx(CardFooter, { children: _jsx(Button, { onClick: () => rteRef.current?.insertHtml(html.trim(), true), children: "Overwrite RTE with new HTML" }, void 0) }, void 0)] }, void 0), _jsx(RichTextEditor, { defaultValue: html, onImageAdded: onImageAdded, ref: rteRef, label: 'Rich text editor', toolbar: [
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsxs(Card, { children: [_jsx(CardContent, { children: _jsx(TextArea, { value: html, onChange: e => setHtml(e.target.value) }) }), _jsx(CardFooter, { children: _jsx(Button, { onClick: () => rteRef.current?.insertHtml(html.trim(), true), children: "Overwrite RTE with new HTML" }) })] }), _jsx(RichTextEditor, { defaultValue: html, onImageAdded: onImageAdded, ref: rteRef, label: 'Rich text editor', toolbar: [
                     'inline-styling',
                     'headers',
                     'tables',
@@ -109,6 +109,6 @@ export const RichTextEditorHtmlParsingDemo = () => {
                     'lists',
                     'cut-copy-paste',
                     'indentation'
-                ] }, void 0)] }, void 0));
+                ] })] }));
 };
 //# sourceMappingURL=RichTextEditor.stories.js.map