@pega/cosmos-react-rte 2.0.0-dev.12.1 → 2.0.0-dev.13.0

package/lib/components/RichTextEditor/DecoratorComponents/Table.d.ts

@@ -1,4 +1,6 @@
 import { FC } from 'react';
+import { DefaultTheme } from 'styled-components';
+export declare const getTableStyles: (theme: DefaultTheme) => import("styled-components").FlattenSimpleInterpolation;
 export declare const TableBody: FC<any>;
 export declare const Table: FC<any>;
 export declare const TableRow: FC<any>;

package/lib/components/RichTextEditor/DecoratorComponents/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAoC5C,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,GAAG,CAO5B,CAAC;AAEH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,GAAG,CAOxB,CAAC;AAEH,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,GAAG,CAO3B,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,GAAG,CAO5B,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAC5C,OAAe,EAAE,YAAY,EAAO,MAAM,mBAAmB,CAAC;AAI9D,eAAO,MAAM,cAAc,UAAW,YAAY,2DA2BjD,CAAC;AAMF,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,GAAG,CAO5B,CAAC;AAEH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,GAAG,CAOxB,CAAC;AAEH,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,GAAG,CAO3B,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,GAAG,CAO5B,CAAC"}

package/lib/components/RichTextEditor/DecoratorComponents/Table.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '@pega/cosmos-react-core';
-const StyledTable = styled.table `
+export const getTableStyles = (theme) => css `
   border-collapse: collapse;
 
   td {
-    border: 0.0625rem solid ${props => props.theme.base.palette['border-line']};
+    border: 0.0625rem solid ${theme.base.palette['border-line']};
     min-width: 6.25rem;
   }
 
@@ -30,6 +30,7 @@ const StyledTable = styled.table `
     }
   }
 `;
+const StyledTable = styled.table(props => getTableStyles(props.theme));
 StyledTable.defaultProps = defaultThemeProp;
 export const TableBody = forwardRef((props, ref) => {
     const { children, ...restProps } = props;

package/lib/components/RichTextEditor/DecoratorComponents/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAO,MAAM,OAAO,CAAC;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;;8BAIF,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;CAuB7E,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,SAAS,GAAY,UAAU,CAAC,CAAC,KAAU,EAAE,GAAa,EAAE,EAAE;IACzE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO,CACL,gCAAW,SAAS,IAAE,GAAG,EAAE,GAAG,gBAC3B,QAAQ,YACH,CACT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAY,UAAU,CAAC,CAAC,KAAU,EAAE,GAAa,EAAE,EAAE;IACrE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO,CACL,KAAC,WAAW,oBAAK,SAAS,IAAE,GAAG,EAAE,GAAG,gBACjC,QAAQ,YACG,CACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAY,UAAU,CAAC,CAAC,KAAU,EAAE,GAAa,EAAE,EAAE;IACxE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO,CACL,6BAAQ,SAAS,IAAE,GAAG,EAAE,GAAG,gBACxB,QAAQ,YACN,CACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAY,UAAU,CAAC,CAAC,KAAU,EAAE,GAAa,EAAE,EAAE;IACzE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO,CACL,6BAAQ,SAAS,IAAE,GAAG,EAAE,GAAG,gBACxB,QAAQ,YACN,CACN,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { FC, forwardRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nconst StyledTable = styled.table`\n  border-collapse: collapse;\n\n  td {\n    border: 0.0625rem solid ${props => props.theme.base.palette['border-line']};\n    min-width: 6.25rem;\n  }\n\n  tr:first-child {\n    td:first-child {\n      border-top-left-radius: 0.125rem;\n    }\n\n    td:last-child {\n      border-top-right-radius: 0.125rem;\n    }\n  }\n\n  tr:last-child {\n    td:first-child {\n      border-bottom-left-radius: 0.125rem;\n    }\n\n    td:last-child {\n      border-bottom-right-radius: 0.125rem;\n    }\n  }\n`;\n\nStyledTable.defaultProps = defaultThemeProp;\n\nexport const TableBody: FC<any> = forwardRef((props: any, ref: Ref<any>) => {\n  const { children, ...restProps } = props;\n  return (\n    <tbody {...restProps} ref={ref}>\n      {children}\n    </tbody>\n  );\n});\n\nexport const Table: FC<any> = forwardRef((props: any, ref: Ref<any>) => {\n  const { children, ...restProps } = props;\n  return (\n    <StyledTable {...restProps} ref={ref}>\n      {children}\n    </StyledTable>\n  );\n});\n\nexport const TableRow: FC<any> = forwardRef((props: any, ref: Ref<any>) => {\n  const { children, ...restProps } = props;\n  return (\n    <tr {...restProps} ref={ref}>\n      {children}\n    </tr>\n  );\n});\n\nexport const TableCell: FC<any> = forwardRef((props: any, ref: Ref<any>) => {\n  const { children, ...restProps } = props;\n  return (\n    <td {...restProps} ref={ref}>\n      {children}\n    </td>\n  );\n});\n"]}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAO,MAAM,OAAO,CAAC;AAC5C,OAAO,MAAM,EAAE,EAAgB,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAmB,EAAE,EAAE,CAAC,GAAG,CAAA;;;;8BAI5B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;CAuB9D,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAEvE,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,SAAS,GAAY,UAAU,CAAC,CAAC,KAAU,EAAE,GAAa,EAAE,EAAE;IACzE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO,CACL,gCAAW,SAAS,IAAE,GAAG,EAAE,GAAG,gBAC3B,QAAQ,YACH,CACT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAY,UAAU,CAAC,CAAC,KAAU,EAAE,GAAa,EAAE,EAAE;IACrE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO,CACL,KAAC,WAAW,oBAAK,SAAS,IAAE,GAAG,EAAE,GAAG,gBACjC,QAAQ,YACG,CACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAY,UAAU,CAAC,CAAC,KAAU,EAAE,GAAa,EAAE,EAAE;IACxE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO,CACL,6BAAQ,SAAS,IAAE,GAAG,EAAE,GAAG,gBACxB,QAAQ,YACN,CACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAY,UAAU,CAAC,CAAC,KAAU,EAAE,GAAa,EAAE,EAAE;IACzE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO,CACL,6BAAQ,SAAS,IAAE,GAAG,EAAE,GAAG,gBACxB,QAAQ,YACN,CACN,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { FC, forwardRef, Ref } from 'react';\nimport styled, { DefaultTheme, css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const getTableStyles = (theme: DefaultTheme) => css`\n  border-collapse: collapse;\n\n  td {\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    min-width: 6.25rem;\n  }\n\n  tr:first-child {\n    td:first-child {\n      border-top-left-radius: 0.125rem;\n    }\n\n    td:last-child {\n      border-top-right-radius: 0.125rem;\n    }\n  }\n\n  tr:last-child {\n    td:first-child {\n      border-bottom-left-radius: 0.125rem;\n    }\n\n    td:last-child {\n      border-bottom-right-radius: 0.125rem;\n    }\n  }\n`;\n\nconst StyledTable = styled.table(props => getTableStyles(props.theme));\n\nStyledTable.defaultProps = defaultThemeProp;\n\nexport const TableBody: FC<any> = forwardRef((props: any, ref: Ref<any>) => {\n  const { children, ...restProps } = props;\n  return (\n    <tbody {...restProps} ref={ref}>\n      {children}\n    </tbody>\n  );\n});\n\nexport const Table: FC<any> = forwardRef((props: any, ref: Ref<any>) => {\n  const { children, ...restProps } = props;\n  return (\n    <StyledTable {...restProps} ref={ref}>\n      {children}\n    </StyledTable>\n  );\n});\n\nexport const TableRow: FC<any> = forwardRef((props: any, ref: Ref<any>) => {\n  const { children, ...restProps } = props;\n  return (\n    <tr {...restProps} ref={ref}>\n      {children}\n    </tr>\n  );\n});\n\nexport const TableCell: FC<any> = forwardRef((props: any, ref: Ref<any>) => {\n  const { children, ...restProps } = props;\n  return (\n    <td {...restProps} ref={ref}>\n      {children}\n    </td>\n  );\n});\n"]}

package/lib/components/RichTextEditor/RichTextEditor.context.d.ts

@@ -1,9 +1,9 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, FocusEvent } from 'react';
 export interface RichTextEditorContextValue {
     onImageAdded?: (image: File, id: string) => void;
     setPopoverOpen: (open: boolean) => void;
     onEditorFocus: (args: {
-        event?: MouseEvent | FocusEvent;
+        event?: MouseEvent | FocusEvent<any>;
         force?: boolean;
         runAfterFocus?: () => void;
         focusEditor?: boolean;

package/lib/components/RichTextEditor/RichTextEditor.context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.context.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,UAAU,EAAc,MAAM,OAAO,CAAC;AAE9D,MAAM,WAAW,0BAA0B;IACzC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;QAChC,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;QAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB,KAAK,IAAI,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,qBAAqB,qDAKhC,CAAC;AAEH,eAAO,MAAM,aAAa,kCAEzB,CAAC"}
+{"version":3,"file":"RichTextEditor.context.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,UAAU,EAAc,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1E,MAAM,WAAW,0BAA0B;IACzC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;QACrC,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;QAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB,KAAK,IAAI,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,qBAAqB,qDAKhC,CAAC;AAEH,eAAO,MAAM,aAAa,kCAEzB,CAAC"}

package/lib/components/RichTextEditor/RichTextEditor.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.context.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAc,UAAU,EAAE,MAAM,OAAO,CAAC;AAc9D,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAA6B;IAC7E,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;IACtB,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC;IACxB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,QAAQ,EAAE,KAAK;CAChB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAC;AAC3C,CAAC,CAAC","sourcesContent":["import { createContext, MouseEvent, useContext } from 'react';\n\nexport interface RichTextEditorContextValue {\n  onImageAdded?: (image: File, id: string) => void;\n  setPopoverOpen: (open: boolean) => void;\n  onEditorFocus: (args: {\n    event?: MouseEvent | FocusEvent;\n    force?: boolean;\n    runAfterFocus?: () => void;\n    focusEditor?: boolean;\n  }) => void;\n  disabled: boolean;\n}\n\nexport const RichTextEditorContext = createContext<RichTextEditorContextValue>({\n  onImageAdded: () => {},\n  setPopoverOpen: () => {},\n  onEditorFocus: () => {},\n  disabled: false\n});\n\nexport const useRTEContext = () => {\n  return useContext(RichTextEditorContext);\n};\n"]}
+{"version":3,"file":"RichTextEditor.context.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAc,UAAU,EAAc,MAAM,OAAO,CAAC;AAc1E,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAA6B;IAC7E,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;IACtB,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC;IACxB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,QAAQ,EAAE,KAAK;CAChB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAC;AAC3C,CAAC,CAAC","sourcesContent":["import { createContext, MouseEvent, useContext, FocusEvent } from 'react';\n\nexport interface RichTextEditorContextValue {\n  onImageAdded?: (image: File, id: string) => void;\n  setPopoverOpen: (open: boolean) => void;\n  onEditorFocus: (args: {\n    event?: MouseEvent | FocusEvent<any>;\n    force?: boolean;\n    runAfterFocus?: () => void;\n    focusEditor?: boolean;\n  }) => void;\n  disabled: boolean;\n}\n\nexport const RichTextEditorContext = createContext<RichTextEditorContextValue>({\n  onImageAdded: () => {},\n  setPopoverOpen: () => {},\n  onEditorFocus: () => {},\n  disabled: false\n});\n\nexport const useRTEContext = () => {\n  return useContext(RichTextEditorContext);\n};\n"]}

package/lib/components/RichTextEditor/RichTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,EAAE,EASH,MAAM,OAAO,CAAC;AAQf,OAAO,EAQL,YAAY,EAMb,MAAM,yBAAyB,CAAC;AAUjC,OAAO,EAAuB,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AA2DlF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CA0a1D,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,EAAE,EASH,MAAM,OAAO,CAAC;AAQf,OAAO,EAQL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAUjC,OAAO,EAAuB,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AA2DlF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CA6a1D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/RichTextEditor/RichTextEditor.js

@@ -5,7 +5,7 @@ import { createEditor, Node } from 'slate';
 // Import the Slate components and React plugin.
 import { Slate, Editable, withReact, ReactEditor } from 'slate-react';
 import styled from 'styled-components';
-import { FormField, FormControl, StyledPopover, useTheme, useUID, createUID, debounce, Popover, Menu, menuHelpers, useAfterInitialEffect } from '@pega/cosmos-react-core';
+import { FormField, FormControl, StyledPopover, useTheme, useUID, createUID, debounce, Popover, Menu, menuHelpers } from '@pega/cosmos-react-core';
 import StyledRichTextEditor, { EditorContainer } from './RichTextEditor.styles';
 import Toolbar from './Toolbar/Toolbar';
 import { nodeRenderer, leafRenderer } from './utils/renderers';
@@ -98,7 +98,9 @@ const RichTextEditor = forwardRef((props, ref) => {
     };
     const onEditorFocus = ({ event, force, focusEditor, runAfterFocus }) => {
         if (focusEditor) {
-            ReactEditor.focus(editor);
+            setTimeout(() => {
+                ReactEditor.focus(editor);
+            }, 0);
         }
         if (runAfterFocus && (force || (!disabled && !toolbarPopover))) {
             setTimeout(runAfterFocus, 0);
@@ -108,8 +110,10 @@ const RichTextEditor = forwardRef((props, ref) => {
         }
     };
     const blurEditor = () => {
-        ReactEditor.blur(editor);
-        onBlur?.();
+        if (ReactEditor.isFocused(editor)) {
+            ReactEditor.blur(editor);
+            onBlur?.();
+        }
     };
     useImperativeHandle(ref, () => ({
         focus: () => {
@@ -261,11 +265,6 @@ const RichTextEditor = forwardRef((props, ref) => {
             }, 0);
         }
     }, []);
-    useAfterInitialEffect(() => {
-        if (!menu) {
-            ReactEditor.focus(editor);
-        }
-    }, [menu]);
     return (_jsx(RichTextEditorContext.Provider, Object.assign({ value: {
             onImageAdded,
             setPopoverOpen: setToolbarPopover,
@@ -274,9 +273,10 @@ const RichTextEditor = forwardRef((props, ref) => {
         } }, { children: _jsx(FormField, Object.assign({ label: 
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
             _jsx("span", Object.assign({ onClick: () => onEditorFocus({ focusEditor: true }) }, { children: label }), void 0), labelHidden: labelHidden, id: id, labelOrder: -1, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, onDrop: onDrop, onFocus: (e) => {
-                if (e.target === formFieldRef.current)
-                    onEditorFocus({});
-            }, ref: formFieldRef, "aria-label": `${label} ${!markdownOnly && !readOnly && toolbar?.length ? 'Hit tab to edit toolbar below' : ''}` }, { children: _jsxs(Slate, Object.assign({ editor: editor, value: value, onChange: newValue => {
+                if (e.target === formFieldRef.current) {
+                    onEditorFocus({ focusEditor: true });
+                }
+            }, onBlur: blurEditor, ref: formFieldRef, "aria-label": `${label} ${!markdownOnly && !readOnly && toolbar?.length ? 'Hit tab to edit toolbar below' : ''}` }, { children: _jsxs(Slate, Object.assign({ editor: editor, value: value, onChange: newValue => {
                     if (!disabled) {
                         setValue(newValue);
                         debouncedUpdateToolbarStyle();
@@ -317,16 +317,19 @@ const RichTextEditor = forwardRef((props, ref) => {
                         }
                     }
                 } }, { children: [_jsxs(FormControl, Object.assign({}, restProps, { ref: ref, ariaLabel: label, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, as: StyledRichTextEditor, toolbar: !!(!markdownOnly && toolbar?.length), onClick: () => {
-                            onEditorFocus({ focusEditor: true });
+                            if (!ReactEditor.isFocused(editor))
+                                onEditorFocus({ focusEditor: true });
                         }, focused: ReactEditor.isFocused(editor) }, { children: [_jsx(EditorContainer, Object.assign({ toolbar: !!(!markdownOnly && toolbar?.length), containerHeight: height, onClick: () => {
-                                    if (!disabled) {
+                                    if (!disabled && !ReactEditor.isFocused(editor)) {
                                         onEditorFocus({ focusEditor: true });
                                         onFocus?.();
                                     }
-                                } }, { children: _jsx(Editable, { renderElement: nodeRenderer, renderLeaf: leafRenderer, onKeyDown: onKeyDown, onKeyUp: onKeyUp, placeholder: placeholder, onFocus: () => {
+                                } }, { children: _jsx(Editable, { renderElement: nodeRenderer, renderLeaf: leafRenderer, onKeyDown: onKeyDown, onKeyUp: onKeyUp, placeholder: placeholder, onFocus: event => {
                                         if (!disabled) {
-                                            onEditorFocus({});
-                                            onFocus?.();
+                                            if (!ReactEditor.isFocused(editor)) {
+                                                onEditorFocus({ focusEditor: true, event });
+                                                onFocus?.();
+                                            }
                                         }
                                         else {
                                             blurEditor();

package/lib/components/RichTextEditor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useState,\n  useRef,\n  useMemo,\n  FC,\n  useEffect,\n  useCallback,\n  MouseEvent,\n  KeyboardEvent,\n  useImperativeHandle,\n  ClipboardEvent,\n  FocusEvent,\n  useReducer\n} from 'react';\n// Import the Slate editor factory.\nimport { createEditor, Editor, Node, Element, Text, Range } from 'slate';\n// Import the Slate components and React plugin.\nimport { Slate, Editable, withReact, ReactEditor } from 'slate-react';\nimport styled from 'styled-components';\nimport { VirtualElement } from '@popperjs/core';\n\nimport {\n  FormField,\n  FormControl,\n  StyledPopover,\n  useTheme,\n  useUID,\n  createUID,\n  debounce,\n  ForwardProps,\n  Popover,\n  Menu,\n  menuHelpers,\n  MenuItemProps,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, { EditorContainer } from './RichTextEditor.styles';\nimport Toolbar from './Toolbar/Toolbar';\nimport { nodeRenderer, leafRenderer } from './utils/renderers';\nimport { onSearchChange } from './utils/search';\nimport EditorCommands from './utils/EditorCommands';\nimport ListCommands from './utils/ListCommands';\nimport { convertHtml } from './utils/htmlConverter';\nimport { convertSlateToHtml } from './utils/slateConverter';\nimport { RichTextEditorState, RichTextEditorProps } from './RichTextEditor.types';\nimport { RichTextEditorContext, RichTextEditorContextValue } from './RichTextEditor.context';\nimport { convertMarkdownForEditor } from './utils/markdownConverter';\n\ntype SyntheticActionType = 'prev' | 'next' | 'child' | 'parent' | 'list_change' | 'set' | 'clear';\n\nconst withVoids = (editor: Editor): ReactEditor => {\n  editor.isVoid = element => {\n    if (element.type === 'image' || element.type === 'image-placeholder') {\n      return true;\n    }\n    return false;\n  };\n\n  return editor as ReactEditor;\n};\n\nconst syntheticFocusReducer = (\n  currentId: string | undefined,\n  action: {\n    type: SyntheticActionType;\n    menuItems: MenuItemProps[];\n    selectedItemId?: MenuItemProps['id'];\n  }\n): string | undefined => {\n  const { type, menuItems, selectedItemId } = action;\n  switch (type) {\n    case 'child':\n      // return first item id if top-level\n      if (!currentId) return menuItems[0].id;\n      // if currently highlighted item has children, select first of them\n      return menuHelpers.getItem(menuItems, currentId)?.items?.[0].id;\n    case 'parent':\n      // find and return parent of currently selected item\n      return menuHelpers.getParentItem(menuItems, currentId)?.id;\n    case 'next':\n      // return next sibling of currently selected item\n      return menuHelpers.getNextItem(menuItems, currentId)?.id ?? currentId;\n    case 'prev':\n      // return prev sibling of currently selected item\n      return menuHelpers.getPrevItem(menuItems, currentId)?.id ?? currentId;\n    case 'list_change':\n      // if currently selected item does not exist in new list, select first one\n      if (currentId && menuHelpers.getItem(menuItems, currentId)) return currentId;\n      return menuItems[0]?.id;\n    case 'set':\n      // return arbitrary selected item id if it is in the tree; undefined otherwise\n      return selectedItemId ? menuHelpers.getItem(menuItems, selectedItemId)?.id : undefined;\n    case 'clear':\n      return undefined;\n    default:\n      return currentId;\n  }\n};\n\nconst StyledSearchPopover = styled(StyledPopover)`\n  min-width: 20rem;\n`;\n\nconst RichTextEditor: FC<RichTextEditorProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RichTextEditorProps>, ref: Ref<RichTextEditorState>) => {\n    const {\n      components: {\n        'text-area': { 'min-height': minHeight }\n      }\n    } = useTheme();\n    const uid = useUID();\n    const {\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      status,\n      required,\n      disabled,\n      readOnly,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      toolbar,\n      onImageAdded,\n      markdownOnly,\n      searchTriggers,\n      onSearch,\n      getSearchItemReplacement,\n      searchRenderers,\n      menu,\n      height = { min: minHeight },\n      defaultValue,\n      autoFocus,\n      ...restProps\n    } = props;\n\n    const formFieldRef = useRef<HTMLElement>(null);\n    const editor = useMemo(() => withVoids(withReact(createEditor())), []);\n    const [value, setValue] = useState<(Element | Text)[]>(\n      defaultValue && !markdownOnly\n        ? convertHtml(defaultValue)\n        : convertMarkdownForEditor(defaultValue, searchRenderers)\n    );\n    const [toolbarPopover, setToolbarPopover] = useState(false);\n    const [toolbarSticky, setToolbarSticky] = useState(false);\n    const [focusableToolbarBtn, setFocusableToolbarBtn] = useState<HTMLElement | null>(null);\n    const [focusedId, dispatchFocus] = useReducer(syntheticFocusReducer, undefined);\n\n    const [popoverTarget, setPopoverTarget] = useState<Range | null>(null);\n    const [searchEl, setSearchEl] = useState<VirtualElement | null>(null);\n\n    const updateToolbarStyle = () => {\n      if ((formFieldRef.current?.offsetHeight || 0) > window.innerHeight) {\n        setToolbarSticky(true);\n      } else {\n        setToolbarSticky(false);\n      }\n    };\n\n    const debouncedUpdateToolbarStyle = debounce(updateToolbarStyle, 200);\n\n    const getPlainText = () => {\n      return value\n        .map(node => {\n          if (markdownOnly && (node as Element).children) {\n            return (node as Element).children\n              .map(textNode => (textNode as Text).searchResult?.markdown || (textNode as Text).text)\n              .join('');\n          }\n          return Node.string(node);\n        })\n        .join('\\n');\n    };\n\n    const onEditorFocus: RichTextEditorContextValue['onEditorFocus'] = ({\n      event,\n      force,\n      focusEditor,\n      runAfterFocus\n    }) => {\n      if (focusEditor) {\n        ReactEditor.focus(editor);\n      }\n\n      if (runAfterFocus && (force || (!disabled && !toolbarPopover))) {\n        setTimeout(runAfterFocus, 0);\n      } else {\n        event?.stopPropagation();\n      }\n    };\n\n    const blurEditor = () => {\n      ReactEditor.blur(editor);\n      onBlur?.();\n    };\n\n    useImperativeHandle<any, RichTextEditorState>(\n      ref,\n      () => ({\n        focus: () => {\n          onEditorFocus({ focusEditor: true });\n        },\n        getPlainText: () => {\n          return getPlainText();\n        },\n        getRichText: () => {\n          return JSON.stringify(value);\n        },\n        getHtml: () => {\n          return convertSlateToHtml(value);\n        },\n        clear: () => {\n          const point = { path: [0, 0], offset: 0 };\n          editor.selection = { anchor: point, focus: point };\n          setValue([\n            {\n              type: 'paragraph',\n              children: [{ text: '' }]\n            }\n          ]);\n        },\n        appendImage: ({ src, alt }, imageId) => {\n          EditorCommands.appendImage(editor, { src, alt }, imageId);\n        },\n        insertText: (text: string) => {\n          editor.insertText(text);\n        }\n      }),\n      [value, setValue]\n    );\n\n    const onMenuItemClick = (itemId: string, e: MouseEvent<any> | KeyboardEvent<any>) => {\n      // MenuItem expects actual click events, but we don't have reference to actual menu item element to trigger a click.\n      menu?.onItemClick?.(itemId, e as MouseEvent<any>);\n      const replacement = getSearchItemReplacement?.(itemId);\n      if (replacement) {\n        let node: Node;\n\n        if (replacement.markdown && replacement.component && replacement.props) {\n          node = {\n            text: replacement.text,\n            searchResult: {\n              markdown: replacement.markdown,\n              component: replacement.component,\n              props: replacement.props,\n              // Prevents copying searchResult attribute onPaste\n              toJSON: () => undefined\n            }\n          };\n        } else {\n          node = { text: replacement.text };\n        }\n\n        EditorCommands.replaceWithNodes(editor, popoverTarget, node);\n      }\n    };\n\n    const onKeyDown = useCallback(\n      (event: KeyboardEvent<any>) => {\n        if (popoverTarget && menu) {\n          switch (event.key) {\n            case 'ArrowDown':\n              event.preventDefault();\n              dispatchFocus({ type: 'next', menuItems: menu.items, selectedItemId: focusedId });\n              break;\n            case 'ArrowUp':\n              event.preventDefault();\n              dispatchFocus({ type: 'prev', menuItems: menu.items, selectedItemId: focusedId });\n              break;\n            case 'Enter':\n              event.preventDefault();\n              if (focusedId) {\n                onMenuItemClick(focusedId, event);\n                dispatchFocus({ type: 'clear', menuItems: menu.items });\n              }\n              break;\n            case 'Escape':\n              event.preventDefault();\n              setPopoverTarget(null);\n              break;\n            default:\n              break;\n          }\n        } else if (event.key === 'Tab' && !event.shiftKey) {\n          if (focusableToolbarBtn) {\n            focusableToolbarBtn.focus();\n            event.preventDefault();\n          }\n        } else {\n          ListCommands.checkListEnter(editor, event);\n          EditorCommands.checkLinkBreak(editor, event);\n          EditorCommands.checkSearchDownKeys(editor, event);\n          EditorCommands.checkImageEnter(editor, event);\n          EditorCommands.checkKeyCommands(editor, event);\n        }\n      },\n      [menu, focusedId, popoverTarget, focusableToolbarBtn]\n    );\n\n    const onKeyUp = (event: KeyboardEvent<any>) => {\n      EditorCommands.checkSearchUpKeys(editor, event);\n    };\n\n    // Adds an image placeholder to be replaced later in time by an image\n    const addImage = (file: File) => {\n      const placeholderId = EditorCommands.appendImagePlaceholder(editor);\n      if (placeholderId) onImageAdded?.(file, placeholderId);\n    };\n\n    const onPaste = (e: ClipboardEvent) => {\n      let image;\n      for (let i = 0; i < e.clipboardData.items.length; i += 1) {\n        const item = e.clipboardData.items[i];\n\n        if (item.type.startsWith('image')) {\n          image = item.getAsFile();\n        }\n      }\n\n      if (image) {\n        e.preventDefault();\n        addImage(image);\n      }\n    };\n\n    const onDrop = (e: DragEvent) => {\n      e.preventDefault();\n      if (e.dataTransfer) {\n        Array.from(e.dataTransfer.files).forEach(file => {\n          if (file.type.includes('image')) {\n            addImage(file);\n          }\n        });\n      }\n    };\n\n    useEffect(() => {\n      if (popoverTarget) {\n        setSearchEl(ReactEditor.toDOMRange(editor, popoverTarget) as VirtualElement);\n      }\n    }, [popoverTarget]);\n\n    useEffect(() => {\n      onChange?.();\n    }, [value]);\n\n    useEffect(() => {\n      if (menu && popoverTarget) {\n        dispatchFocus({\n          type: 'set',\n          menuItems: menu.items,\n          selectedItemId: menu.items[0]?.id\n        });\n      }\n    }, [menu, popoverTarget]);\n\n    useEffect(() => {\n      if (autoFocus) {\n        setTimeout(() => {\n          ReactEditor.focus(editor);\n        }, 0);\n      }\n    }, []);\n\n    useAfterInitialEffect(() => {\n      if (!menu) {\n        ReactEditor.focus(editor);\n      }\n    }, [menu]);\n\n    return (\n      <RichTextEditorContext.Provider\n        value={{\n          onImageAdded,\n          setPopoverOpen: setToolbarPopover,\n          onEditorFocus,\n          disabled: disabled || false\n        }}\n      >\n        <FormField\n          label={\n            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n            <span onClick={() => onEditorFocus({ focusEditor: true })}>{label}</span>\n          }\n          labelHidden={labelHidden}\n          id={id}\n          labelOrder={-1}\n          info={info}\n          status={status}\n          required={required}\n          disabled={disabled}\n          readOnly={readOnly}\n          onDrop={onDrop}\n          onFocus={(e: FocusEvent) => {\n            if (e.target === formFieldRef.current) onEditorFocus({});\n          }}\n          ref={formFieldRef}\n          aria-label={`${label} ${\n            !markdownOnly && !readOnly && toolbar?.length ? 'Hit tab to edit toolbar below' : ''\n          }`}\n        >\n          <Slate\n            editor={editor}\n            value={value}\n            onChange={newValue => {\n              if (!disabled) {\n                setValue(newValue);\n                debouncedUpdateToolbarStyle();\n\n                if (searchTriggers && onSearch && markdownOnly) {\n                  const res = searchTriggers.flatMap(({ trigger, regex }) => {\n                    for (let i = 0; i < 10; i += 1) {\n                      try {\n                        const groupId = createUID();\n                        return [\n                          {\n                            trigger,\n                            groupId: `g${groupId}`,\n                            regex: new RegExp(\n                              String.raw`(?<=^|\\s)${trigger}(?<g${groupId}>${\n                                regex || String.raw`\\w*`\n                              })$`\n                            )\n                          }\n                        ];\n                      } catch (e: unknown) {\n                        if (!(e instanceof SyntaxError)) throw e;\n                      }\n                    }\n\n                    // Failsafe\n                    return [];\n                  });\n\n                  let search;\n                  for (let i = 0; i < res.length; i += 1) {\n                    search = onSearchChange(editor, res[i]);\n                    if (search) break;\n                  }\n\n                  if (search) {\n                    setPopoverTarget(search.target);\n                    onSearch({ search: search.search, trigger: search.trigger });\n                  } else {\n                    setPopoverTarget(null);\n                  }\n                }\n              }\n            }}\n          >\n            <FormControl\n              {...restProps}\n              ref={ref}\n              ariaLabel={label}\n              id={id}\n              required={required}\n              disabled={disabled}\n              readOnly={readOnly}\n              status={status}\n              as={StyledRichTextEditor}\n              toolbar={!!(!markdownOnly && toolbar?.length)}\n              onClick={() => {\n                onEditorFocus({ focusEditor: true });\n              }}\n              focused={ReactEditor.isFocused(editor)}\n            >\n              <EditorContainer\n                toolbar={!!(!markdownOnly && toolbar?.length)}\n                containerHeight={height}\n                onClick={() => {\n                  if (!disabled) {\n                    onEditorFocus({ focusEditor: true });\n                    onFocus?.();\n                  }\n                }}\n              >\n                <Editable\n                  renderElement={nodeRenderer}\n                  renderLeaf={leafRenderer}\n                  onKeyDown={onKeyDown}\n                  onKeyUp={onKeyUp}\n                  placeholder={placeholder}\n                  onFocus={() => {\n                    if (!disabled) {\n                      onEditorFocus({});\n                      onFocus?.();\n                    } else {\n                      blurEditor();\n                    }\n                  }}\n                  onBlur={blurEditor}\n                  disabled={disabled}\n                  readOnly={readOnly}\n                  onPaste={onPaste}\n                />\n              </EditorContainer>\n              {!markdownOnly && !readOnly && toolbar?.length ? (\n                <Toolbar\n                  features={toolbar}\n                  sticky={toolbarSticky}\n                  setFocusableBtn={el => {\n                    setFocusableToolbarBtn(el);\n                  }}\n                />\n              ) : null}\n            </FormControl>\n            <Popover\n              show={!!popoverTarget && !!menu}\n              strategy='fixed'\n              target={searchEl}\n              placement='bottom-start'\n            >\n              {menu && (\n                <Menu\n                  {...menu}\n                  as={StyledSearchPopover}\n                  currentItemId={focusedId}\n                  mode='action'\n                  onItemClick={onMenuItemClick}\n                />\n              )}\n            </Popover>\n          </Slate>\n        </FormField>\n      </RichTextEditorContext.Provider>\n    );\n  }\n);\n\nexport default RichTextEditor;\n"]}
+{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useState,\n  useRef,\n  useMemo,\n  FC,\n  useEffect,\n  useCallback,\n  MouseEvent,\n  KeyboardEvent,\n  useImperativeHandle,\n  ClipboardEvent,\n  FocusEvent,\n  useReducer\n} from 'react';\n// Import the Slate editor factory.\nimport { createEditor, Editor, Node, Element, Text, Range } from 'slate';\n// Import the Slate components and React plugin.\nimport { Slate, Editable, withReact, ReactEditor } from 'slate-react';\nimport styled from 'styled-components';\nimport { VirtualElement } from '@popperjs/core';\n\nimport {\n  FormField,\n  FormControl,\n  StyledPopover,\n  useTheme,\n  useUID,\n  createUID,\n  debounce,\n  ForwardProps,\n  Popover,\n  Menu,\n  menuHelpers,\n  MenuItemProps\n} from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor, { EditorContainer } from './RichTextEditor.styles';\nimport Toolbar from './Toolbar/Toolbar';\nimport { nodeRenderer, leafRenderer } from './utils/renderers';\nimport { onSearchChange } from './utils/search';\nimport EditorCommands from './utils/EditorCommands';\nimport ListCommands from './utils/ListCommands';\nimport { convertHtml } from './utils/htmlConverter';\nimport { convertSlateToHtml } from './utils/slateConverter';\nimport { RichTextEditorState, RichTextEditorProps } from './RichTextEditor.types';\nimport { RichTextEditorContext, RichTextEditorContextValue } from './RichTextEditor.context';\nimport { convertMarkdownForEditor } from './utils/markdownConverter';\n\ntype SyntheticActionType = 'prev' | 'next' | 'child' | 'parent' | 'list_change' | 'set' | 'clear';\n\nconst withVoids = (editor: Editor): ReactEditor => {\n  editor.isVoid = element => {\n    if (element.type === 'image' || element.type === 'image-placeholder') {\n      return true;\n    }\n    return false;\n  };\n\n  return editor as ReactEditor;\n};\n\nconst syntheticFocusReducer = (\n  currentId: string | undefined,\n  action: {\n    type: SyntheticActionType;\n    menuItems: MenuItemProps[];\n    selectedItemId?: MenuItemProps['id'];\n  }\n): string | undefined => {\n  const { type, menuItems, selectedItemId } = action;\n  switch (type) {\n    case 'child':\n      // return first item id if top-level\n      if (!currentId) return menuItems[0].id;\n      // if currently highlighted item has children, select first of them\n      return menuHelpers.getItem(menuItems, currentId)?.items?.[0].id;\n    case 'parent':\n      // find and return parent of currently selected item\n      return menuHelpers.getParentItem(menuItems, currentId)?.id;\n    case 'next':\n      // return next sibling of currently selected item\n      return menuHelpers.getNextItem(menuItems, currentId)?.id ?? currentId;\n    case 'prev':\n      // return prev sibling of currently selected item\n      return menuHelpers.getPrevItem(menuItems, currentId)?.id ?? currentId;\n    case 'list_change':\n      // if currently selected item does not exist in new list, select first one\n      if (currentId && menuHelpers.getItem(menuItems, currentId)) return currentId;\n      return menuItems[0]?.id;\n    case 'set':\n      // return arbitrary selected item id if it is in the tree; undefined otherwise\n      return selectedItemId ? menuHelpers.getItem(menuItems, selectedItemId)?.id : undefined;\n    case 'clear':\n      return undefined;\n    default:\n      return currentId;\n  }\n};\n\nconst StyledSearchPopover = styled(StyledPopover)`\n  min-width: 20rem;\n`;\n\nconst RichTextEditor: FC<RichTextEditorProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RichTextEditorProps>, ref: Ref<RichTextEditorState>) => {\n    const {\n      components: {\n        'text-area': { 'min-height': minHeight }\n      }\n    } = useTheme();\n    const uid = useUID();\n    const {\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      status,\n      required,\n      disabled,\n      readOnly,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      toolbar,\n      onImageAdded,\n      markdownOnly,\n      searchTriggers,\n      onSearch,\n      getSearchItemReplacement,\n      searchRenderers,\n      menu,\n      height = { min: minHeight },\n      defaultValue,\n      autoFocus,\n      ...restProps\n    } = props;\n\n    const formFieldRef = useRef<HTMLElement>(null);\n    const editor = useMemo(() => withVoids(withReact(createEditor())), []);\n    const [value, setValue] = useState<(Element | Text)[]>(\n      defaultValue && !markdownOnly\n        ? convertHtml(defaultValue)\n        : convertMarkdownForEditor(defaultValue, searchRenderers)\n    );\n    const [toolbarPopover, setToolbarPopover] = useState(false);\n    const [toolbarSticky, setToolbarSticky] = useState(false);\n    const [focusableToolbarBtn, setFocusableToolbarBtn] = useState<HTMLElement | null>(null);\n    const [focusedId, dispatchFocus] = useReducer(syntheticFocusReducer, undefined);\n\n    const [popoverTarget, setPopoverTarget] = useState<Range | null>(null);\n    const [searchEl, setSearchEl] = useState<VirtualElement | null>(null);\n\n    const updateToolbarStyle = () => {\n      if ((formFieldRef.current?.offsetHeight || 0) > window.innerHeight) {\n        setToolbarSticky(true);\n      } else {\n        setToolbarSticky(false);\n      }\n    };\n\n    const debouncedUpdateToolbarStyle = debounce(updateToolbarStyle, 200);\n\n    const getPlainText = () => {\n      return value\n        .map(node => {\n          if (markdownOnly && (node as Element).children) {\n            return (node as Element).children\n              .map(textNode => (textNode as Text).searchResult?.markdown || (textNode as Text).text)\n              .join('');\n          }\n          return Node.string(node);\n        })\n        .join('\\n');\n    };\n\n    const onEditorFocus: RichTextEditorContextValue['onEditorFocus'] = ({\n      event,\n      force,\n      focusEditor,\n      runAfterFocus\n    }) => {\n      if (focusEditor) {\n        setTimeout(() => {\n          ReactEditor.focus(editor);\n        }, 0);\n      }\n\n      if (runAfterFocus && (force || (!disabled && !toolbarPopover))) {\n        setTimeout(runAfterFocus, 0);\n      } else {\n        event?.stopPropagation();\n      }\n    };\n\n    const blurEditor = () => {\n      if (ReactEditor.isFocused(editor)) {\n        ReactEditor.blur(editor);\n        onBlur?.();\n      }\n    };\n\n    useImperativeHandle<any, RichTextEditorState>(\n      ref,\n      () => ({\n        focus: () => {\n          onEditorFocus({ focusEditor: true });\n        },\n        getPlainText: () => {\n          return getPlainText();\n        },\n        getRichText: () => {\n          return JSON.stringify(value);\n        },\n        getHtml: () => {\n          return convertSlateToHtml(value);\n        },\n        clear: () => {\n          const point = { path: [0, 0], offset: 0 };\n          editor.selection = { anchor: point, focus: point };\n          setValue([\n            {\n              type: 'paragraph',\n              children: [{ text: '' }]\n            }\n          ]);\n        },\n        appendImage: ({ src, alt }, imageId) => {\n          EditorCommands.appendImage(editor, { src, alt }, imageId);\n        },\n        insertText: (text: string) => {\n          editor.insertText(text);\n        }\n      }),\n      [value, setValue]\n    );\n\n    const onMenuItemClick = (itemId: string, e: MouseEvent<any> | KeyboardEvent<any>) => {\n      // MenuItem expects actual click events, but we don't have reference to actual menu item element to trigger a click.\n      menu?.onItemClick?.(itemId, e as MouseEvent<any>);\n      const replacement = getSearchItemReplacement?.(itemId);\n      if (replacement) {\n        let node: Node;\n\n        if (replacement.markdown && replacement.component && replacement.props) {\n          node = {\n            text: replacement.text,\n            searchResult: {\n              markdown: replacement.markdown,\n              component: replacement.component,\n              props: replacement.props,\n              // Prevents copying searchResult attribute onPaste\n              toJSON: () => undefined\n            }\n          };\n        } else {\n          node = { text: replacement.text };\n        }\n\n        EditorCommands.replaceWithNodes(editor, popoverTarget, node);\n      }\n    };\n\n    const onKeyDown = useCallback(\n      (event: KeyboardEvent<any>) => {\n        if (popoverTarget && menu) {\n          switch (event.key) {\n            case 'ArrowDown':\n              event.preventDefault();\n              dispatchFocus({ type: 'next', menuItems: menu.items, selectedItemId: focusedId });\n              break;\n            case 'ArrowUp':\n              event.preventDefault();\n              dispatchFocus({ type: 'prev', menuItems: menu.items, selectedItemId: focusedId });\n              break;\n            case 'Enter':\n              event.preventDefault();\n              if (focusedId) {\n                onMenuItemClick(focusedId, event);\n                dispatchFocus({ type: 'clear', menuItems: menu.items });\n              }\n              break;\n            case 'Escape':\n              event.preventDefault();\n              setPopoverTarget(null);\n              break;\n            default:\n              break;\n          }\n        } else if (event.key === 'Tab' && !event.shiftKey) {\n          if (focusableToolbarBtn) {\n            focusableToolbarBtn.focus();\n            event.preventDefault();\n          }\n        } else {\n          ListCommands.checkListEnter(editor, event);\n          EditorCommands.checkLinkBreak(editor, event);\n          EditorCommands.checkSearchDownKeys(editor, event);\n          EditorCommands.checkImageEnter(editor, event);\n          EditorCommands.checkKeyCommands(editor, event);\n        }\n      },\n      [menu, focusedId, popoverTarget, focusableToolbarBtn]\n    );\n\n    const onKeyUp = (event: KeyboardEvent<any>) => {\n      EditorCommands.checkSearchUpKeys(editor, event);\n    };\n\n    // Adds an image placeholder to be replaced later in time by an image\n    const addImage = (file: File) => {\n      const placeholderId = EditorCommands.appendImagePlaceholder(editor);\n      if (placeholderId) onImageAdded?.(file, placeholderId);\n    };\n\n    const onPaste = (e: ClipboardEvent) => {\n      let image;\n      for (let i = 0; i < e.clipboardData.items.length; i += 1) {\n        const item = e.clipboardData.items[i];\n\n        if (item.type.startsWith('image')) {\n          image = item.getAsFile();\n        }\n      }\n\n      if (image) {\n        e.preventDefault();\n        addImage(image);\n      }\n    };\n\n    const onDrop = (e: DragEvent) => {\n      e.preventDefault();\n      if (e.dataTransfer) {\n        Array.from(e.dataTransfer.files).forEach(file => {\n          if (file.type.includes('image')) {\n            addImage(file);\n          }\n        });\n      }\n    };\n\n    useEffect(() => {\n      if (popoverTarget) {\n        setSearchEl(ReactEditor.toDOMRange(editor, popoverTarget) as VirtualElement);\n      }\n    }, [popoverTarget]);\n\n    useEffect(() => {\n      onChange?.();\n    }, [value]);\n\n    useEffect(() => {\n      if (menu && popoverTarget) {\n        dispatchFocus({\n          type: 'set',\n          menuItems: menu.items,\n          selectedItemId: menu.items[0]?.id\n        });\n      }\n    }, [menu, popoverTarget]);\n\n    useEffect(() => {\n      if (autoFocus) {\n        setTimeout(() => {\n          ReactEditor.focus(editor);\n        }, 0);\n      }\n    }, []);\n\n    return (\n      <RichTextEditorContext.Provider\n        value={{\n          onImageAdded,\n          setPopoverOpen: setToolbarPopover,\n          onEditorFocus,\n          disabled: disabled || false\n        }}\n      >\n        <FormField\n          label={\n            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n            <span onClick={() => onEditorFocus({ focusEditor: true })}>{label}</span>\n          }\n          labelHidden={labelHidden}\n          id={id}\n          labelOrder={-1}\n          info={info}\n          status={status}\n          required={required}\n          disabled={disabled}\n          readOnly={readOnly}\n          onDrop={onDrop}\n          onFocus={(e: FocusEvent) => {\n            if (e.target === formFieldRef.current) {\n              onEditorFocus({ focusEditor: true });\n            }\n          }}\n          onBlur={blurEditor}\n          ref={formFieldRef}\n          aria-label={`${label} ${\n            !markdownOnly && !readOnly && toolbar?.length ? 'Hit tab to edit toolbar below' : ''\n          }`}\n        >\n          <Slate\n            editor={editor}\n            value={value}\n            onChange={newValue => {\n              if (!disabled) {\n                setValue(newValue);\n                debouncedUpdateToolbarStyle();\n\n                if (searchTriggers && onSearch && markdownOnly) {\n                  const res = searchTriggers.flatMap(({ trigger, regex }) => {\n                    for (let i = 0; i < 10; i += 1) {\n                      try {\n                        const groupId = createUID();\n                        return [\n                          {\n                            trigger,\n                            groupId: `g${groupId}`,\n                            regex: new RegExp(\n                              String.raw`(?<=^|\\s)${trigger}(?<g${groupId}>${\n                                regex || String.raw`\\w*`\n                              })$`\n                            )\n                          }\n                        ];\n                      } catch (e: unknown) {\n                        if (!(e instanceof SyntaxError)) throw e;\n                      }\n                    }\n\n                    // Failsafe\n                    return [];\n                  });\n\n                  let search;\n                  for (let i = 0; i < res.length; i += 1) {\n                    search = onSearchChange(editor, res[i]);\n                    if (search) break;\n                  }\n\n                  if (search) {\n                    setPopoverTarget(search.target);\n                    onSearch({ search: search.search, trigger: search.trigger });\n                  } else {\n                    setPopoverTarget(null);\n                  }\n                }\n              }\n            }}\n          >\n            <FormControl\n              {...restProps}\n              ref={ref}\n              ariaLabel={label}\n              id={id}\n              required={required}\n              disabled={disabled}\n              readOnly={readOnly}\n              status={status}\n              as={StyledRichTextEditor}\n              toolbar={!!(!markdownOnly && toolbar?.length)}\n              onClick={() => {\n                if (!ReactEditor.isFocused(editor)) onEditorFocus({ focusEditor: true });\n              }}\n              focused={ReactEditor.isFocused(editor)}\n            >\n              <EditorContainer\n                toolbar={!!(!markdownOnly && toolbar?.length)}\n                containerHeight={height}\n                onClick={() => {\n                  if (!disabled && !ReactEditor.isFocused(editor)) {\n                    onEditorFocus({ focusEditor: true });\n                    onFocus?.();\n                  }\n                }}\n              >\n                <Editable\n                  renderElement={nodeRenderer}\n                  renderLeaf={leafRenderer}\n                  onKeyDown={onKeyDown}\n                  onKeyUp={onKeyUp}\n                  placeholder={placeholder}\n                  onFocus={event => {\n                    if (!disabled) {\n                      if (!ReactEditor.isFocused(editor)) {\n                        onEditorFocus({ focusEditor: true, event });\n                        onFocus?.();\n                      }\n                    } else {\n                      blurEditor();\n                    }\n                  }}\n                  onBlur={blurEditor}\n                  disabled={disabled}\n                  readOnly={readOnly}\n                  onPaste={onPaste}\n                />\n              </EditorContainer>\n              {!markdownOnly && !readOnly && toolbar?.length ? (\n                <Toolbar\n                  features={toolbar}\n                  sticky={toolbarSticky}\n                  setFocusableBtn={el => {\n                    setFocusableToolbarBtn(el);\n                  }}\n                />\n              ) : null}\n            </FormControl>\n            <Popover\n              show={!!popoverTarget && !!menu}\n              strategy='fixed'\n              target={searchEl}\n              placement='bottom-start'\n            >\n              {menu && (\n                <Menu\n                  {...menu}\n                  as={StyledSearchPopover}\n                  currentItemId={focusedId}\n                  mode='action'\n                  onItemClick={onMenuItemClick}\n                />\n              )}\n            </Popover>\n          </Slate>\n        </FormField>\n      </RichTextEditorContext.Provider>\n    );\n  }\n);\n\nexport default RichTextEditor;\n"]}

package/lib/components/RichTextEditor/RichTextEditor.styles.d.ts

@@ -5,8 +5,10 @@ interface StyledRichTextEditorProps {
     readOnly?: boolean;
     containerHeight?: RichTextEditorProps['height'];
 }
+export declare const listStyles: import("styled-components").FlattenSimpleInterpolation;
 export declare const EditorContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledRichTextEditorProps, never>;
 declare const StyledRichTextEditor: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledRichTextEditorProps, never>;
 export declare const StyledRichTextViewer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHtml: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export default StyledRichTextEditor;
 //# sourceMappingURL=RichTextEditor.styles.d.ts.map

package/lib/components/RichTextEditor/RichTextEditor.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,UAAU,yBAAyB;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,eAAe,gIAyD3B,CAAC;AAIF,QAAA,MAAM,oBAAoB,gIAsBxB,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAWhC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"RichTextEditor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAG7D,UAAU,yBAAyB;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,UAAU,wDAmDtB,CAAC;AAEF,eAAO,MAAM,eAAe,gIAgB3B,CAAC;AAIF,QAAA,MAAM,oBAAoB,gIAsBxB,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAWhC,CAAC;AAEF,eAAO,MAAM,UAAU,yGAwCrB,CAAC;AAIH,eAAe,oBAAoB,CAAC"}

package/lib/components/RichTextEditor/RichTextEditor.styles.js

@@ -1,5 +1,58 @@
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, StyledLink } from '@pega/cosmos-react-core';
+import { calculateFontSize, defaultThemeProp, StyledLink, StyledPopover } from '@pega/cosmos-react-core';
+import { getTableStyles } from './DecoratorComponents/Table';
+export const listStyles = css `
+  ul,
+  ol {
+    padding-inline-start: 2.5rem;
+  }
+
+  li {
+    margin: 0.5rem 0;
+  }
+
+  ul li {
+    ul {
+      margin-inline-start: 1rem;
+      list-style-type: circle;
+    }
+
+    ul ul {
+      margin-inline-start: 2rem;
+      list-style-type: square;
+    }
+
+    ul ul ul {
+      margin-inline-start: 3rem;
+      list-style-type: disc;
+    }
+  }
+
+  ol li {
+    ol {
+      margin-inline-start: 1rem;
+      list-style-type: lower-alpha;
+    }
+
+    ol ol {
+      margin-inline-start: 2rem;
+      list-style-type: lower-roman;
+    }
+
+    ol ol ol {
+      margin-inline-start: 3rem;
+      list-style-type: decimal;
+    }
+  }
+
+  ${StyledPopover} ul, ${StyledPopover} ol {
+    padding-inline-start: 0;
+  }
+
+  ${StyledPopover} li {
+    margin: 0;
+  }
+`;
 export const EditorContainer = styled.div(({ containerHeight, toolbar, theme }) => {
     return css `
       padding: ${toolbar ? theme.base.spacing : '0'};
@@ -12,48 +65,7 @@ export const EditorContainer = styled.div(({ containerHeight, toolbar, theme })
         cursor: text;
       }
 
-      ul,
-      ol {
-        padding-left: 2.5rem;
-      }
-
-      li {
-        margin: 0.5rem 0;
-      }
-
-      ul li {
-        ul {
-          margin-left: 1rem;
-          list-style-type: circle;
-        }
-
-        ul ul {
-          margin-left: 2rem;
-          list-style-type: square;
-        }
-
-        ul ul ul {
-          margin-left: 3rem;
-          list-style-type: disc;
-        }
-      }
-
-      ol li {
-        ol {
-          margin-left: 1rem;
-          list-style-type: lower-alpha;
-        }
-
-        ol ol {
-          margin-left: 2rem;
-          list-style-type: lower-roman;
-        }
-
-        ol ol ol {
-          margin-left: 3rem;
-          list-style-type: decimal;
-        }
-      }
+      ${listStyles}
     `;
 });
 EditorContainer.defaultProps = defaultThemeProp;
@@ -93,5 +105,44 @@ export const StyledRichTextViewer = styled.div `
     }
   }
 `;
+export const StyledHtml = styled.div(({ theme }) => {
+    const { base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette }, components: { text } } = theme;
+    const fontSize = calculateFontSize(baseFontSize, baseFontScale);
+    return css `
+    ${listStyles}
+    table {
+      ${getTableStyles(theme)}
+    }
+
+    a {
+      color: ${palette.interactive};
+    }
+    h1 {
+      font-size: ${fontSize[text.h1['font-size']]};
+      font-weight: ${text.h1['font-weight']};
+    }
+    h2 {
+      font-size: ${fontSize[text.h2['font-size']]};
+      font-weight: ${text.h2['font-weight']};
+    }
+    h3 {
+      font-size: ${fontSize[text.h3['font-size']]};
+      font-weight: ${text.h3['font-weight']};
+    }
+    h4 {
+      font-size: ${fontSize[text.h4['font-size']]};
+      font-weight: ${text.h4['font-weight']};
+    }
+    h5 {
+      font-size: ${fontSize[text.h5['font-size']]};
+      font-weight: ${text.h5['font-weight']};
+    }
+    h6 {
+      font-size: ${fontSize[text.h6['font-size']]};
+      font-weight: ${text.h6['font-weight']};
+    }
+  `;
+});
+StyledHtml.defaultProps = defaultThemeProp;
 export default StyledRichTextEditor;
 //# sourceMappingURL=RichTextEditor.styles.js.map

package/lib/components/RichTextEditor/RichTextEditor.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAWvE,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CACvC,CAAC,EAAE,eAAe,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IACtC,OAAO,GAAG,CAAA;iBACG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;gBACnC,OAAO,eAAe,KAAK,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM;oBAC1D,OAAO,eAAe,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,EAAE,GAAG,IAAI,MAAM;oBAC7E,OAAO,eAAe,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,EAAE,GAAG,IAAI,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiD5F,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IACxF,OAAO,GAAG,CAAA;wBACY,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,aAAa;;;;;sBAKpE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBAC5D,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;MAGtE,CAAC,OAAO;QACV,GAAG,CAAA;;;KAGF;;;;iBAIY,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;;GAEtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;IAI1C,UAAU;;;;;;;CAOb,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, StyledLink } from '@pega/cosmos-react-core';\n\nimport { RichTextEditorProps } from './RichTextEditor.types';\n\ninterface StyledRichTextEditorProps {\n  toolbar?: boolean;\n  focused?: boolean;\n  readOnly?: boolean;\n  containerHeight?: RichTextEditorProps['height'];\n}\n\nexport const EditorContainer = styled.div<StyledRichTextEditorProps>(\n  ({ containerHeight, toolbar, theme }) => {\n    return css`\n      padding: ${toolbar ? theme.base.spacing : '0'};\n      height: ${typeof containerHeight === 'string' ? containerHeight : 'auto'};\n      min-height: ${typeof containerHeight === 'string' ? 'auto' : containerHeight?.min || 'auto'};\n      max-height: ${typeof containerHeight === 'string' ? 'auto' : containerHeight?.max || 'auto'};\n      overflow: auto;\n\n      &:hover {\n        cursor: text;\n      }\n\n      ul,\n      ol {\n        padding-left: 2.5rem;\n      }\n\n      li {\n        margin: 0.5rem 0;\n      }\n\n      ul li {\n        ul {\n          margin-left: 1rem;\n          list-style-type: circle;\n        }\n\n        ul ul {\n          margin-left: 2rem;\n          list-style-type: square;\n        }\n\n        ul ul ul {\n          margin-left: 3rem;\n          list-style-type: disc;\n        }\n      }\n\n      ol li {\n        ol {\n          margin-left: 1rem;\n          list-style-type: lower-alpha;\n        }\n\n        ol ol {\n          margin-left: 2rem;\n          list-style-type: lower-roman;\n        }\n\n        ol ol ol {\n          margin-left: 3rem;\n          list-style-type: decimal;\n        }\n      }\n    `;\n  }\n);\n\nEditorContainer.defaultProps = defaultThemeProp;\n\nconst StyledRichTextEditor = styled.div<StyledRichTextEditorProps>(({ toolbar, theme }) => {\n  return css`\n    background-color: ${toolbar ? theme.base.palette['primary-background'] : 'transparent'};\n    width: 100%;\n    position: relative;\n\n    &:focus-within:not([disabled]) {\n      border-color: ${theme.components['form-control'][':focus']['border-color']};\n      box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n    }\n\n    ${!toolbar &&\n    css`\n      border: none;\n      box-shadow: none;\n    `}\n\n    /* Override default styling of slate placeholder. */\n    span[contenteditable='false'] {\n      opacity: ${theme.base.transparency['transparent-3']} !important;\n    }\n  `;\n});\n\nStyledRichTextEditor.defaultProps = defaultThemeProp;\n\nexport const StyledRichTextViewer = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${StyledLink} {\n    &:enabled:focus,\n    &:not([disabled]):focus {\n      box-shadow: none;\n      text-decoration: underline;\n    }\n  }\n`;\n\nexport default StyledRichTextEditor;\n"]}
+{"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  FontSize,\n  StyledLink,\n  StyledPopover\n} from '@pega/cosmos-react-core';\n\nimport { RichTextEditorProps } from './RichTextEditor.types';\nimport { getTableStyles } from './DecoratorComponents/Table';\n\ninterface StyledRichTextEditorProps {\n  toolbar?: boolean;\n  focused?: boolean;\n  readOnly?: boolean;\n  containerHeight?: RichTextEditorProps['height'];\n}\n\nexport const listStyles = css`\n  ul,\n  ol {\n    padding-inline-start: 2.5rem;\n  }\n\n  li {\n    margin: 0.5rem 0;\n  }\n\n  ul li {\n    ul {\n      margin-inline-start: 1rem;\n      list-style-type: circle;\n    }\n\n    ul ul {\n      margin-inline-start: 2rem;\n      list-style-type: square;\n    }\n\n    ul ul ul {\n      margin-inline-start: 3rem;\n      list-style-type: disc;\n    }\n  }\n\n  ol li {\n    ol {\n      margin-inline-start: 1rem;\n      list-style-type: lower-alpha;\n    }\n\n    ol ol {\n      margin-inline-start: 2rem;\n      list-style-type: lower-roman;\n    }\n\n    ol ol ol {\n      margin-inline-start: 3rem;\n      list-style-type: decimal;\n    }\n  }\n\n  ${StyledPopover} ul, ${StyledPopover} ol {\n    padding-inline-start: 0;\n  }\n\n  ${StyledPopover} li {\n    margin: 0;\n  }\n`;\n\nexport const EditorContainer = styled.div<StyledRichTextEditorProps>(\n  ({ containerHeight, toolbar, theme }) => {\n    return css`\n      padding: ${toolbar ? theme.base.spacing : '0'};\n      height: ${typeof containerHeight === 'string' ? containerHeight : 'auto'};\n      min-height: ${typeof containerHeight === 'string' ? 'auto' : containerHeight?.min || 'auto'};\n      max-height: ${typeof containerHeight === 'string' ? 'auto' : containerHeight?.max || 'auto'};\n      overflow: auto;\n\n      &:hover {\n        cursor: text;\n      }\n\n      ${listStyles}\n    `;\n  }\n);\n\nEditorContainer.defaultProps = defaultThemeProp;\n\nconst StyledRichTextEditor = styled.div<StyledRichTextEditorProps>(({ toolbar, theme }) => {\n  return css`\n    background-color: ${toolbar ? theme.base.palette['primary-background'] : 'transparent'};\n    width: 100%;\n    position: relative;\n\n    &:focus-within:not([disabled]) {\n      border-color: ${theme.components['form-control'][':focus']['border-color']};\n      box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n    }\n\n    ${!toolbar &&\n    css`\n      border: none;\n      box-shadow: none;\n    `}\n\n    /* Override default styling of slate placeholder. */\n    span[contenteditable='false'] {\n      opacity: ${theme.base.transparency['transparent-3']} !important;\n    }\n  `;\n});\n\nStyledRichTextEditor.defaultProps = defaultThemeProp;\n\nexport const StyledRichTextViewer = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${StyledLink} {\n    &:enabled:focus,\n    &:not([disabled]):focus {\n      box-shadow: none;\n      text-decoration: underline;\n    }\n  }\n`;\n\nexport const StyledHtml = styled.div(({ theme }) => {\n  const {\n    base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette },\n    components: { text }\n  } = theme;\n  const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n  return css`\n    ${listStyles}\n    table {\n      ${getTableStyles(theme)}\n    }\n\n    a {\n      color: ${palette.interactive};\n    }\n    h1 {\n      font-size: ${fontSize[text.h1['font-size'] as FontSize]};\n      font-weight: ${text.h1['font-weight']};\n    }\n    h2 {\n      font-size: ${fontSize[text.h2['font-size'] as FontSize]};\n      font-weight: ${text.h2['font-weight']};\n    }\n    h3 {\n      font-size: ${fontSize[text.h3['font-size'] as FontSize]};\n      font-weight: ${text.h3['font-weight']};\n    }\n    h4 {\n      font-size: ${fontSize[text.h4['font-size'] as FontSize]};\n      font-weight: ${text.h4['font-weight']};\n    }\n    h5 {\n      font-size: ${fontSize[text.h5['font-size'] as FontSize]};\n      font-weight: ${text.h5['font-weight']};\n    }\n    h6 {\n      font-size: ${fontSize[text.h6['font-size'] as FontSize]};\n      font-weight: ${text.h6['font-weight']};\n    }\n  `;\n});\n\nStyledHtml.defaultProps = defaultThemeProp;\n\nexport default StyledRichTextEditor;\n"]}

package/lib/components/RichTextEditor/RichTextViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextViewer.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiD,MAAM,OAAO,CAAC;AAI1E,OAAO,EAAE,YAAY,EAA6B,MAAM,yBAAyB,CAAC;AAIlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAI7D,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAwC1D,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"RichTextViewer.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiD,MAAM,OAAO,CAAC;AAK1E,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAIvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAG7D,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAmC1D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/RichTextEditor/RichTextViewer.js

@@ -2,15 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo, useState, useEffect } from 'react';
 import { Slate, Editable, withReact } from 'slate-react';
 import { createEditor } from 'slate';
-import { Text as TextComp, useI18n } from '@pega/cosmos-react-core';
+import dompurify from 'dompurify';
 import convertMarkdown from './utils/markdownConverter';
 import { nodeRenderer, leafRenderer } from './utils/renderers';
-import { EditorContainer, StyledRichTextViewer } from './RichTextEditor.styles';
-import { convertHtml } from './utils/htmlConverter';
+import { EditorContainer, StyledHtml, StyledRichTextViewer } from './RichTextEditor.styles';
 const RichTextViewer = forwardRef(({ content, type, interactionRenderers, markdownMap, ...restProps }, ref) => {
-    const t = useI18n();
     const editor = useMemo(() => withReact(createEditor()), []);
-    const [error, setError] = useState(false);
     const [nodes, setNodes] = useState([]);
     useEffect(() => {
         if (type === 'markdown') {
@@ -19,18 +16,12 @@ const RichTextViewer = forwardRef(({ content, type, interactionRenderers, markdo
         if (type === 'richtext') {
             setNodes(JSON.parse(content));
         }
-        if (type === 'html') {
-            try {
-                const convertedHtmlNodes = convertHtml(content, interactionRenderers);
-                setNodes(convertedHtmlNodes);
-                setError(false);
-            }
-            catch (e) {
-                setError(true);
-            }
-        }
     }, [content]);
-    return !error ? (_jsx(StyledRichTextViewer, Object.assign({ ref: ref }, restProps, { children: _jsx(Slate, Object.assign({ editor: editor, value: nodes, onChange: () => { } }, { children: _jsx(EditorContainer, { children: _jsx(Editable, { readOnly: true, renderElement: nodeRenderer, renderLeaf: leafRenderer }, void 0) }, void 0) }), void 0) }), void 0)) : (_jsx(TextComp, Object.assign({ variant: 'secondary' }, { children: t('rte_invalid_html') }), void 0));
+    const sanitizedHtml = useMemo(() => (type === 'html' ? dompurify.sanitize(content) : ''), [content, type]);
+    if (type === 'html') {
+        return _jsx(StyledHtml, { dangerouslySetInnerHTML: { __html: sanitizedHtml } }, void 0);
+    }
+    return (_jsx(StyledRichTextViewer, Object.assign({ ref: ref }, restProps, { children: _jsx(Slate, Object.assign({ editor: editor, value: nodes, onChange: () => { } }, { children: _jsx(EditorContainer, { children: _jsx(Editable, { readOnly: true, renderElement: nodeRenderer, renderLeaf: leafRenderer }, void 0) }, void 0) }), void 0) }), void 0));
 });
 export default RichTextViewer;
 //# sourceMappingURL=RichTextViewer.js.map

package/lib/components/RichTextEditor/RichTextViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextViewer.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAgB,IAAI,IAAI,QAAQ,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElF,OAAO,eAAe,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,MAAM,cAAc,GAA2C,UAAU,CACvE,CACE,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,EAAE,WAAW,EAAE,GAAG,SAAS,EAAuB,EACvF,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,EAAE,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,UAAU,EAAE;YACvB,QAAQ,CAAC,eAAe,CAAC,OAAO,EAAE,oBAAoB,EAAE,WAAW,CAAC,CAAC,CAAC;SACvE;QACD,IAAI,IAAI,KAAK,UAAU,EAAE;YACvB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;SAC/B;QACD,IAAI,IAAI,KAAK,MAAM,EAAE;YACnB,IAAI;gBACF,MAAM,kBAAkB,GAAG,WAAW,CAAC,OAAO,EAAE,oBAAoB,CAAC,CAAC;gBACtE,QAAQ,CAAC,kBAAkB,CAAC,CAAC;gBAC7B,QAAQ,CAAC,KAAK,CAAC,CAAC;aACjB;YAAC,OAAO,CAAC,EAAE;gBACV,QAAQ,CAAC,IAAI,CAAC,CAAC;aAChB;SACF;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CACd,KAAC,oBAAoB,kBAAC,GAAG,EAAE,GAAG,IAAM,SAAS,cAC3C,KAAC,KAAK,kBAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,gBACrD,KAAC,eAAe,cACd,KAAC,QAAQ,IAAC,QAAQ,QAAC,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,WAAI,WAC5D,YACZ,YACa,CACxB,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,kBAAC,OAAO,EAAC,WAAW,gBAAE,CAAC,CAAC,kBAAkB,CAAC,YAAY,CACjE,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC, Ref, forwardRef, useMemo, useState, useEffect } from 'react';\nimport { Slate, Editable, withReact } from 'slate-react';\nimport { Element, Text, createEditor } from 'slate';\n\nimport { ForwardProps, Text as TextComp, useI18n } from '@pega/cosmos-react-core';\n\nimport convertMarkdown from './utils/markdownConverter';\nimport { nodeRenderer, leafRenderer } from './utils/renderers';\nimport { RichTextViewerProps } from './RichTextViewer.types';\nimport { EditorContainer, StyledRichTextViewer } from './RichTextEditor.styles';\nimport { convertHtml } from './utils/htmlConverter';\n\nconst RichTextViewer: FC<RichTextViewerProps & ForwardProps> = forwardRef(\n  (\n    { content, type, interactionRenderers, markdownMap, ...restProps }: RichTextViewerProps,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const t = useI18n();\n    const editor = useMemo(() => withReact(createEditor()), []);\n    const [error, setError] = useState(false);\n    const [nodes, setNodes] = useState<(Element | Text)[]>([]);\n\n    useEffect(() => {\n      if (type === 'markdown') {\n        setNodes(convertMarkdown(content, interactionRenderers, markdownMap));\n      }\n      if (type === 'richtext') {\n        setNodes(JSON.parse(content));\n      }\n      if (type === 'html') {\n        try {\n          const convertedHtmlNodes = convertHtml(content, interactionRenderers);\n          setNodes(convertedHtmlNodes);\n          setError(false);\n        } catch (e) {\n          setError(true);\n        }\n      }\n    }, [content]);\n\n    return !error ? (\n      <StyledRichTextViewer ref={ref} {...restProps}>\n        <Slate editor={editor} value={nodes} onChange={() => {}}>\n          <EditorContainer>\n            <Editable readOnly renderElement={nodeRenderer} renderLeaf={leafRenderer} />\n          </EditorContainer>\n        </Slate>\n      </StyledRichTextViewer>\n    ) : (\n      <TextComp variant='secondary'>{t('rte_invalid_html')}</TextComp>\n    );\n  }\n);\n\nexport default RichTextViewer;\n"]}
+{"version":3,"file":"RichTextViewer.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,SAAS,MAAM,WAAW,CAAC;AAIlC,OAAO,eAAe,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAE5F,MAAM,cAAc,GAA2C,UAAU,CACvE,CACE,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,EAAE,WAAW,EAAE,GAAG,SAAS,EAAuB,EACvF,GAAwB,EACxB,EAAE;IACF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,EAAE,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,UAAU,EAAE;YACvB,QAAQ,CAAC,eAAe,CAAC,OAAO,EAAE,oBAAoB,EAAE,WAAW,CAAC,CAAC,CAAC;SACvE;QACD,IAAI,IAAI,KAAK,UAAU,EAAE;YACvB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;SAC/B;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAC1D,CAAC,OAAO,EAAE,IAAI,CAAC,CAChB,CAAC;IAEF,IAAI,IAAI,KAAK,MAAM,EAAE;QACnB,OAAO,KAAC,UAAU,IAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,WAAI,CAAC;KAC3E;IACD,OAAO,CACL,KAAC,oBAAoB,kBAAC,GAAG,EAAE,GAAG,IAAM,SAAS,cAC3C,KAAC,KAAK,kBAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,gBACrD,KAAC,eAAe,cACd,KAAC,QAAQ,IAAC,QAAQ,QAAC,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,WAAI,WAC5D,YACZ,YACa,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC, Ref, forwardRef, useMemo, useState, useEffect } from 'react';\nimport { Slate, Editable, withReact } from 'slate-react';\nimport { Element, Text, createEditor } from 'slate';\nimport dompurify from 'dompurify';\n\nimport { ForwardProps } from '@pega/cosmos-react-core';\n\nimport convertMarkdown from './utils/markdownConverter';\nimport { nodeRenderer, leafRenderer } from './utils/renderers';\nimport { RichTextViewerProps } from './RichTextViewer.types';\nimport { EditorContainer, StyledHtml, StyledRichTextViewer } from './RichTextEditor.styles';\n\nconst RichTextViewer: FC<RichTextViewerProps & ForwardProps> = forwardRef(\n  (\n    { content, type, interactionRenderers, markdownMap, ...restProps }: RichTextViewerProps,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const editor = useMemo(() => withReact(createEditor()), []);\n    const [nodes, setNodes] = useState<(Element | Text)[]>([]);\n\n    useEffect(() => {\n      if (type === 'markdown') {\n        setNodes(convertMarkdown(content, interactionRenderers, markdownMap));\n      }\n      if (type === 'richtext') {\n        setNodes(JSON.parse(content));\n      }\n    }, [content]);\n\n    const sanitizedHtml = useMemo(\n      () => (type === 'html' ? dompurify.sanitize(content) : ''),\n      [content, type]\n    );\n\n    if (type === 'html') {\n      return <StyledHtml dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;\n    }\n    return (\n      <StyledRichTextViewer ref={ref} {...restProps}>\n        <Slate editor={editor} value={nodes} onChange={() => {}}>\n          <EditorContainer>\n            <Editable readOnly renderElement={nodeRenderer} renderLeaf={leafRenderer} />\n          </EditorContainer>\n        </Slate>\n      </StyledRichTextViewer>\n    );\n  }\n);\n\nexport default RichTextViewer;\n"]}

package/lib/components/RichTextEditor/mocks/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/lib/components/RichTextEditor/mocks/RichTextEditor.mocks.d.ts.map

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

package/lib/components/RichTextEditor/mocks/RichTextEditor.mocks.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar } from '@pega/cosmos-react-core';
+// cspell:disable
+export const demoUsers = [
+    {
+        id: 'turnc',
+        primary: 'Cindy Turner',
+        secondary: ['Lead Engineer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Cindy Turner' }, void 0)
+    },
+    {
+        id: 'deans',
+        primary: 'Seth DeAngelo',
+        secondary: ['Senior Software Engineer', 'Backend Developer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Seth DeAngelo' }, void 0)
+    },
+    {
+        id: 'moorj',
+        primary: 'Janet Moore',
+        secondary: ['Backend Developer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Janet Moore' }, void 0)
+    },
+    {
+        id: 'thomd',
+        primary: 'Dean Thomas',
+        secondary: ['Designer'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Dean Thomas' }, void 0)
+    },
+    {
+        id: 'hathb',
+        primary: 'Bob Hathoway',
+        secondary: ['Lead Designer', 'Product Owner'],
+        visual: _jsx(Avatar, { size: 'l', name: 'Bob Hathoway' }, void 0)
+    }
+];
+//# sourceMappingURL=RichTextEditor.mocks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.mocks.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/mocks/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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-rte",
-  "version": "2.0.0-dev.12.1",
+  "version": "2.0.0-dev.13.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,11 +20,12 @@
     "build": "tsc -b"
   },
   "dependencies": {
+    "@pega/cosmos-react-core": "2.0.0-dev.13.0",
+    "@popperjs/core": "^2.9.2",
+    "dompurify": "^2.3.1",
     "marked": "^2.0.3",
     "parse5": "^6.0.1",
-    "@pega/cosmos-react-core": "2.0.0-dev.12.1",
     "polished": "^4.1.0",
-    "@popperjs/core": "^2.9.2",
     "react": "^16.14.0 || ^17.0.0",
     "react-dom": "^16.14.0 || ^17.0.0",
     "slate": "^0.65.3",
@@ -32,14 +33,15 @@
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.3.7",
-    "@storybook/addon-actions": "^6.3.7",
-    "@storybook/addon-knobs": "^6.3.0",
-    "@storybook/addon-storysource": "^6.3.7",
-    "@storybook/addon-toolbars": "^6.3.7",
-    "@storybook/addons": "^6.3.7",
-    "@storybook/react": "^6.3.7",
-    "@storybook/theming": "^6.3.7",
+    "@storybook/addon-a11y": "^6.3.8",
+    "@storybook/addon-actions": "^6.3.8",
+    "@storybook/addon-knobs": "^6.3.1",
+    "@storybook/addon-storysource": "^6.3.8",
+    "@storybook/addon-toolbars": "^6.3.8",
+    "@storybook/addons": "^6.3.8",
+    "@storybook/react": "^6.3.8",
+    "@storybook/theming": "^6.3.8",
+    "@types/dompurify": "^2.2.3",
     "@types/marked": "2.0.2",
     "@types/parse5": "^6.0.0",
     "enzyme": "^3.11.0",