@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/jsx/cs/DialPad/DialPad.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, Story } from '@storybook/react';
+import { DialPadKeyboardProps } from '@pega/cosmos-react-cs';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface DialPadDemoProps {
+    mode: DialPadKeyboardProps['mode'];
+}
+export declare const DialPadDemo: Story<DialPadDemoProps>;
+//# sourceMappingURL=DialPad.stories.d.ts.map

package/jsx/cs/DialPad/DialPad.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialPad.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/DialPad/DialPad.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAW,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;;AAEtE,wBAGU;AAEV,UAAU,gBAAgB;IACxB,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAU/C,CAAC"}

package/jsx/cs/DialPad/DialPadKeyboardData.mock.d.ts

@@ -0,0 +1,11 @@
+export declare const dialPadKeysMock: {
+    key: string;
+    charCode: number;
+    buttonIndex: number;
+}[];
+export declare const defaultDialPadKeysMock: {
+    key: string;
+    charCode: number;
+    buttonIndex: number;
+}[];
+//# sourceMappingURL=DialPadKeyboardData.mock.d.ts.map

package/jsx/cs/DialPad/DialPadKeyboardData.mock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialPadKeyboardData.mock.d.ts","sourceRoot":"","sources":["../../../src/cs/DialPad/DialPadKeyboardData.mock.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe;;;;GAc3B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;GAGlC,CAAC"}

package/jsx/cs/DialPad/DialPadKeyboardData.mock.js

@@ -0,0 +1,20 @@
+export const dialPadKeysMock = [
+    { key: '1', charCode: 49, buttonIndex: 0 },
+    { key: '2', charCode: 50, buttonIndex: 1 },
+    { key: '3', charCode: 51, buttonIndex: 2 },
+    { key: '4', charCode: 52, buttonIndex: 3 },
+    { key: '5', charCode: 53, buttonIndex: 4 },
+    { key: '6', charCode: 54, buttonIndex: 5 },
+    { key: '7', charCode: 55, buttonIndex: 6 },
+    { key: '8', charCode: 56, buttonIndex: 7 },
+    { key: '9', charCode: 57, buttonIndex: 8 },
+    { key: '*', charCode: 42, buttonIndex: 9 },
+    { key: '0', charCode: 48, buttonIndex: 10 },
+    { key: '#', charCode: 35, buttonIndex: 11 },
+    { key: '+', charCode: 43, buttonIndex: 10 }
+];
+export const defaultDialPadKeysMock = [
+    ...dialPadKeysMock,
+    { key: 'Backspace', charCode: 127, buttonIndex: 12 }
+];
+//# sourceMappingURL=DialPadKeyboardData.mock.js.map

package/jsx/cs/DialPad/DialPadKeyboardData.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialPadKeyboardData.mock.js","sourceRoot":"","sources":["../../../src/cs/DialPad/DialPadKeyboardData.mock.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;IAC1C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;IAC3C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;IAC3C,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,GAAG,eAAe;IAClB,EAAE,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,EAAE,EAAE;CACrD,CAAC","sourcesContent":["export const dialPadKeysMock = [\n  { key: '1', charCode: 49, buttonIndex: 0 },\n  { key: '2', charCode: 50, buttonIndex: 1 },\n  { key: '3', charCode: 51, buttonIndex: 2 },\n  { key: '4', charCode: 52, buttonIndex: 3 },\n  { key: '5', charCode: 53, buttonIndex: 4 },\n  { key: '6', charCode: 54, buttonIndex: 5 },\n  { key: '7', charCode: 55, buttonIndex: 6 },\n  { key: '8', charCode: 56, buttonIndex: 7 },\n  { key: '9', charCode: 57, buttonIndex: 8 },\n  { key: '*', charCode: 42, buttonIndex: 9 },\n  { key: '0', charCode: 48, buttonIndex: 10 },\n  { key: '#', charCode: 35, buttonIndex: 11 },\n  { key: '+', charCode: 43, buttonIndex: 10 }\n];\n\nexport const defaultDialPadKeysMock = [\n  ...dialPadKeysMock,\n  { key: 'Backspace', charCode: 127, buttonIndex: 12 }\n];\n"]}

package/jsx/cs/IntelligentGuidance/IntelligentGuidance.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IntelligentGuidanceProps } from '@pega/cosmos-react-cs';
+declare const _default: {
+    title: string;
+    component: import("react").FunctionComponent<IntelligentGuidanceProps & import("@pega/cosmos-react-core").ForwardProps>;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const IntelligentGuidanceDemo: () => JSX.Element;
+export declare const CaseViewWithIntelligentGuidance: () => JSX.Element;
+//# sourceMappingURL=IntelligentGuidance.stories.d.ts.map

package/jsx/cs/IntelligentGuidance/IntelligentGuidance.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntelligentGuidance.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/IntelligentGuidance/IntelligentGuidance.stories.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAML,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;;;;;;;;AAgB/B,wBAME;AAEF,eAAO,MAAM,uBAAuB,mBA6BnC,CAAC;AAQF,eAAO,MAAM,+BAA+B,mBAuX3C,CAAC"}

package/jsx/cs/InteractionNotification/InteractionNotification.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FunctionComponent<import("@pega/cosmos-react-cs/lib/components/InteractionNotification/InteractionNotification").InteractionNotificationProps & import("@pega/cosmos-react-core").ForwardProps>;
+};
+export default _default;
+export declare const interactionNotification: () => JSX.Element;
+//# sourceMappingURL=InteractionNotification.stories.d.ts.map

package/jsx/cs/InteractionNotification/InteractionNotification.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionNotification.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/InteractionNotification/InteractionNotification.stories.tsx"],"names":[],"mappings":";;;;;AAKA,wBAGE;AAEF,eAAO,MAAM,uBAAuB,mBAiCnC,CAAC"}

package/jsx/cs/InteractionTimer/InteractionTimer.stories.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Story } from '@storybook/react';
+import { InteractionTimerProps } from '@pega/cosmos-react-cs';
+declare const _default: {
+    title: string;
+    component: import("react").FunctionComponent<InteractionTimerProps & import("@pega/cosmos-react-core").ForwardProps>;
+};
+export default _default;
+export interface InteractionTimerStoryProps extends InteractionTimerProps {
+    createdAt?: number;
+    showTimer?: boolean;
+}
+export declare const InteractionTimerDemo: Story<InteractionTimerStoryProps>;
+//# sourceMappingURL=InteractionTimer.stories.d.ts.map

package/jsx/cs/InteractionTimer/InteractionTimer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionTimer.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/InteractionTimer/InteractionTimer.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGzC,OAAO,EAAoB,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;;;;;AAEhF,wBAGE;AAEF,MAAM,WAAW,0BAA2B,SAAQ,qBAAqB;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAqCD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,0BAA0B,CAsElE,CAAC"}

package/jsx/cs/TaskManager/TaskManager.mocks.d.ts

@@ -0,0 +1,13 @@
+export declare const TaskPickerMockData: {
+    tasks: {
+        id: string;
+        primary: string;
+        selected: boolean;
+        items: {
+            id: string;
+            primary: string;
+            fields: string[];
+        }[];
+    }[];
+};
+//# sourceMappingURL=TaskManager.mocks.d.ts.map

package/jsx/cs/TaskManager/TaskManager.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManager.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB;;;;;;;;;;;CA0I9B,CAAC"}

package/jsx/cs/TaskManager/TaskManager.mocks.js

@@ -0,0 +1,140 @@
+export const TaskPickerMockData = {
+    tasks: [
+        {
+            id: '1',
+            primary: 'Frequently performed',
+            selected: false,
+            items: [
+                {
+                    id: '1-1',
+                    primary: 'Address change',
+                    fields: [
+                        'Address line 1',
+                        'Address line 2',
+                        'Country',
+                        'City',
+                        'State',
+                        'Postal code',
+                        'Phone',
+                        'Cell',
+                        'FAX',
+                        'Email'
+                    ]
+                },
+                {
+                    id: '1-2',
+                    primary: 'Make payment',
+                    fields: ['Account number', 'Amount', 'Comments']
+                }
+            ]
+        },
+        {
+            id: '2',
+            primary: 'Account',
+            selected: false,
+            items: [
+                {
+                    id: '2-1',
+                    primary: 'Address change',
+                    fields: [
+                        'Address line 1',
+                        'Address line 2',
+                        'Country',
+                        'City',
+                        'State',
+                        'Postal code',
+                        'Phone',
+                        'Cell',
+                        'FAX',
+                        'Email'
+                    ]
+                },
+                {
+                    id: '2-2',
+                    primary: 'Close account',
+                    fields: ['Reason', 'Comments']
+                }
+            ]
+        },
+        {
+            id: '3',
+            primary: 'Contact',
+            selected: false,
+            items: [
+                {
+                    id: '3-1',
+                    primary: 'Modify account links',
+                    fields: ['Customer name', 'Account number', 'Contact number', 'Email', 'Account link']
+                },
+                {
+                    id: '3-2',
+                    primary: 'Update contact profile',
+                    fields: ['Customer ID', 'New contact number', 'New email', 'Other comments']
+                }
+            ]
+        },
+        {
+            id: '4',
+            primary: 'Sales and offers',
+            selected: false,
+            items: [
+                {
+                    id: '4-1',
+                    primary: 'Create lead',
+                    fields: [
+                        'Stage',
+                        'Phone',
+                        'Email',
+                        'Territory',
+                        'First name',
+                        'Last name',
+                        'Owner',
+                        'Rating',
+                        'Mobile'
+                    ]
+                },
+                {
+                    id: '4-2',
+                    primary: 'Create opportunity',
+                    fields: [
+                        'Amount',
+                        'Close date',
+                        'Probability',
+                        'Owner',
+                        'Name',
+                        'Territory',
+                        'Short name',
+                        'Primary contact',
+                        'Forecast category',
+                        'Stage',
+                        'Source',
+                        'Must win'
+                    ]
+                }
+            ]
+        },
+        {
+            id: '5',
+            primary: 'General',
+            selected: false,
+            items: [
+                {
+                    id: '5-1',
+                    primary: 'File a complaint',
+                    fields: ['Individual Name', 'Identification number', 'Name', 'Issue', 'Severity']
+                },
+                {
+                    id: '5-2',
+                    primary: 'Schedule activity',
+                    fields: ['Activity name', 'Time', 'Date', 'Target completion date and time']
+                },
+                {
+                    id: '5-3',
+                    primary: 'Send correspondence',
+                    fields: ['From', 'To', 'Subject', 'Correspondence body', 'Signature']
+                }
+            ]
+        }
+    ]
+};
+//# sourceMappingURL=TaskManager.mocks.js.map

package/jsx/cs/TaskManager/TaskManager.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManager.mocks.js","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.mocks.ts"],"names":[],"mappings":"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","sourcesContent":["export const TaskPickerMockData = {\n  tasks: [\n    {\n      id: '1',\n      primary: 'Frequently performed',\n      selected: false,\n      items: [\n        {\n          id: '1-1',\n          primary: 'Address change',\n          fields: [\n            'Address line 1',\n            'Address line 2',\n            'Country',\n            'City',\n            'State',\n            'Postal code',\n            'Phone',\n            'Cell',\n            'FAX',\n            'Email'\n          ]\n        },\n        {\n          id: '1-2',\n          primary: 'Make payment',\n          fields: ['Account number', 'Amount', 'Comments']\n        }\n      ]\n    },\n    {\n      id: '2',\n      primary: 'Account',\n      selected: false,\n      items: [\n        {\n          id: '2-1',\n          primary: 'Address change',\n          fields: [\n            'Address line 1',\n            'Address line 2',\n            'Country',\n            'City',\n            'State',\n            'Postal code',\n            'Phone',\n            'Cell',\n            'FAX',\n            'Email'\n          ]\n        },\n        {\n          id: '2-2',\n          primary: 'Close account',\n          fields: ['Reason', 'Comments']\n        }\n      ]\n    },\n    {\n      id: '3',\n      primary: 'Contact',\n      selected: false,\n      items: [\n        {\n          id: '3-1',\n          primary: 'Modify account links',\n          fields: ['Customer name', 'Account number', 'Contact number', 'Email', 'Account link']\n        },\n        {\n          id: '3-2',\n          primary: 'Update contact profile',\n          fields: ['Customer ID', 'New contact number', 'New email', 'Other comments']\n        }\n      ]\n    },\n    {\n      id: '4',\n      primary: 'Sales and offers',\n      selected: false,\n      items: [\n        {\n          id: '4-1',\n          primary: 'Create lead',\n          fields: [\n            'Stage',\n            'Phone',\n            'Email',\n            'Territory',\n            'First name',\n            'Last name',\n            'Owner',\n            'Rating',\n            'Mobile'\n          ]\n        },\n        {\n          id: '4-2',\n          primary: 'Create opportunity',\n          fields: [\n            'Amount',\n            'Close date',\n            'Probability',\n            'Owner',\n            'Name',\n            'Territory',\n            'Short name',\n            'Primary contact',\n            'Forecast category',\n            'Stage',\n            'Source',\n            'Must win'\n          ]\n        }\n      ]\n    },\n    {\n      id: '5',\n      primary: 'General',\n      selected: false,\n      items: [\n        {\n          id: '5-1',\n          primary: 'File a complaint',\n          fields: ['Individual Name', 'Identification number', 'Name', 'Issue', 'Severity']\n        },\n        {\n          id: '5-2',\n          primary: 'Schedule activity',\n          fields: ['Activity name', 'Time', 'Date', 'Target completion date and time']\n        },\n        {\n          id: '5-3',\n          primary: 'Send correspondence',\n          fields: ['From', 'To', 'Subject', 'Correspondence body', 'Signature']\n        }\n      ]\n    }\n  ]\n};\n"]}

package/jsx/cs/TaskManager/TaskManager.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FunctionComponent<import("@pega/cosmos-react-cs").TaskManagerProps & import("@pega/cosmos-react-core").ForwardProps>;
+};
+export default _default;
+export declare const TaskManagerDemo: () => JSX.Element;
+//# sourceMappingURL=TaskManager.stories.d.ts.map

package/jsx/cs/TaskManager/TaskManager.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManager.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.stories.tsx"],"names":[],"mappings":";;;;;AAwBA,wBAGE;AAQF,eAAO,MAAM,eAAe,mBA0W3B,CAAC"}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: <T extends object = object>({ accept, items, itemRenderer: ItemRenderer, emptyRenderer: EmptyRenderer, onChange, pullMode, pushMode, as: Component, ...restProps }: import("@pega/cosmos-react-dnd").DragDropListProps<T> & import("@pega/cosmos-react-core").ForwardProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const DragDropListDemo: () => JSX.Element;
+//# sourceMappingURL=DragDropList.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropList.stories.d.ts","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.stories.tsx"],"names":[],"mappings":";;;;;;;;AAcA,wBAME;AAiHF,eAAO,MAAM,gBAAgB,mBAgE5B,CAAC"}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Meta } 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;
+//# sourceMappingURL=Editor.stories.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,119 @@
+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';
+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>'/>);
+};
+export const EmptyEditorDemo = () => {
+    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']} onImageAdded={onImageAdded} onFocus={action('Editor has focus')} onBlur={action('Editor has blurred')} placeholder='Type some stuff in here'/>);
+};
+export const ReadonlyFormField = () => {
+    return (<Editor label={label} readOnly 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>
+      <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>
+      <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>
+      <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>
+      `}/>);
+};
+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={[
+            {
+                icon: 'pega',
+                text: 'Insert a custom element',
+                onMouseDown: () => {
+                    onCustomAction();
+                }
+            }
+        ]} onInit={initializedEditor => {
+            setEditor(initializedEditor);
+        }}/>);
+};
+export const RichTextEditorWithLogs = () => {
+    const editorRef = useRef(null);
+    const [content, setContent] = useState();
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        editorRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    const showContent = (type) => {
+        if (type === 'html')
+            setContent(editorRef.current?.getHtml());
+        else if (type === 'plain_text')
+            setContent(editorRef.current?.getPlainText());
+        else if (type === 'rich_text')
+            setContent(editorRef.current?.getRichText());
+    };
+    return (<Flex container={{ direction: 'column', gap: 2 }}>
+      <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'/>
+
+      <Flex container={{ gap: 1 }}>
+        <Button onClick={() => showContent('html')}>Show HTML</Button>
+        <Button onClick={() => showContent('plain_text')}>Show plain text</Button>
+        <Button onClick={() => showContent('rich_text')}>Show rich text</Button>
+      </Flex>
+
+      <Text>{content}</Text>
+    </Flex>);
+};
+export const RichTextEditorHtmlParsingDemo = () => {
+    const [html, setHtml] = useState('<p>Hello world!</p>');
+    const rteRef = useRef(null);
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        rteRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    return (<Flex container={{ direction: 'column', gap: 2 }}>
+      <Card>
+        <CardContent>
+          <TextArea value={html} onChange={e => setHtml(e.target.value)}/>
+        </CardContent>
+        <CardFooter>
+          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>
+            Overwrite RTE with new HTML
+          </Button>
+        </CardFooter>
+      </Card>
+      <Editor defaultValue={html} onImageAdded={onImageAdded} ref={rteRef} label={label} toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}/>
+    </Flex>);
+};
+//# sourceMappingURL=Editor.stories.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.stories.jsx","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,QAAQ,EACT,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAe,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAE7D,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,MAAM;CACV,CAAC;AAEV,MAAM,KAAK,GAAG,kBAAkB,CAAC;AAEjC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,MAAM,SAAS,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE5C,MAAM,YAAY,GAAG,CAAC,KAAW,EAAE,EAAU,EAAE,EAAE;QAC/C,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QACvC,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CACvE,OAAO,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAClC,MAAM,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CACjC,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,YAAY,CAAC,kEAAkE,EAC/E,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,MAAM,SAAS,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE5C,MAAM,YAAY,GAAG,CAAC,KAAW,EAAE,EAAU,EAAE,EAAE;QAC/C,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QACvC,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CACvE,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,OAAO,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CACpC,MAAM,CAAC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,CACrC,WAAW,CAAC,yBAAyB,EACrC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,OAAO,CACL,CAAC,MAAM,CACL,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CACR,YAAY,CAAC,CAAC;;;;;;OAMb,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,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,iBAAkB,SAAQ,WAAW;IACzC,cAAc;QACZ,OAAO,IAAI,CAAC,UAAU,EAAE;YACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SACnC;IACH,CAAC;IAED,iBAAiB;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;QAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAClD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC7B,QAAQ,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC;IAChE,CAAC;CACF;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,SAAS,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC5C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAmB,CAAC,CAAC;IAE1D,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,MAAM,CAAC,aAAa,CAAC,kDAAkD,CAAC,CAAC;IAC3E,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CACvE,YAAY,CAAC,gIAAgI,CAC7I,gBAAgB,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,iBAAiB,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC,CAC9E,aAAa,CAAC,CAAC;YACb;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,yBAAyB;gBAC/B,WAAW,EAAE,GAAG,EAAE;oBAChB,cAAc,EAAE,CAAC;gBACnB,CAAC;aACF;SACF,CAAC,CACF,MAAM,CAAC,CAAC,iBAAiB,CAAC,EAAE;YAC1B,SAAS,CAAC,iBAAiB,CAAC,CAAC;QAC/B,CAAC,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACzC,MAAM,SAAS,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAE7D,MAAM,YAAY,GAAG,CAAC,KAAW,EAAE,EAAU,EAAE,EAAE;QAC/C,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QACvC,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,IAAyC,EAAE,EAAE;QAChE,IAAI,IAAI,KAAK,MAAM;YAAE,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;aACzD,IAAI,IAAI,KAAK,YAAY;YAAE,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC;aACzE,IAAI,IAAI,KAAK,WAAW;YAAE,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC,CAAC;IAC9E,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAC5F,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,KAAK,CAAC,4BAA4B,CAClC,IAAI,CAAC,+EAA+E,EAGtF;;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC1B;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,MAAM,CAC7D;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,EAAE,MAAM,CACzE;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,EAAE,MAAM,CACzE;MAAA,EAAE,IAAI,CAEN;;MAAA,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,CACvB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,EAAE;IAChD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAC;IACxD,MAAM,MAAM,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAEzC,MAAM,YAAY,GAAG,CAAC,KAAW,EAAE,EAAU,EAAE,EAAE;QAC/C,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QACvC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAC5D,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,IAAI,CACH;QAAA,CAAC,WAAW,CACV;UAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAChE;QAAA,EAAE,WAAW,CACb;QAAA,CAAC,UAAU,CACT;UAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC,CACnE;;UACF,EAAE,MAAM,CACV;QAAA,EAAE,UAAU,CACd;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,MAAM,CACL,YAAY,CAAC,CAAC,IAAI,CAAC,CACnB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,GAAG,CAAC,CAAC,MAAM,CAAC,CACZ,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,EAEhG;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","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></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><pega-custom>Hello from custom element.</pega-custom><p>hi</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/jsx/rte/RichTextEditor/RichTextEditor.mocks.d.ts

@@ -0,0 +1,3 @@
+import { MenuItemProps } from '@pega/cosmos-react-core';
+export declare const demoUsers: MenuItemProps[];
+//# sourceMappingURL=RichTextEditor.mocks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.mocks.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGhE,eAAO,MAAM,SAAS,EAAE,aAAa,EA+BpC,CAAC"}

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

@@ -0,0 +1,10 @@
+/// <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 RichTextEditorMDDemo: Story<RichTextEditorProps>;
+export declare const RichTextEditorHtmlParsingDemo: () => JSX.Element;
+//# sourceMappingURL=RichTextEditor.stories.d.ts.map

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

@@ -0,0 +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"}