@pega/cosmos-react-rte 2.0.0-dev.9.4 → 2.0.0-rc.4

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

@@ -2,14 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { defaultThemeProp } from '@pega/cosmos-react-core';
 const StyledCodeBlock = styled.code `
-  background-color: ${props => props.theme.base.colors.gray.light};
+  background-color: ${props => props.theme.base.colors.gray['extra-light']};
   display: block;
   font-family: monospace;
   padding: ${props => props.theme.base.spacing};
 `;
 StyledCodeBlock.defaultProps = defaultThemeProp;
 const CodeBlock = (props) => {
-    return _jsx(StyledCodeBlock, Object.assign({}, props), void 0);
+    return _jsx(StyledCodeBlock, { ...props }, void 0);
 };
 export default CodeBlock;
 //# sourceMappingURL=CodeBlock.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/CodeBlock.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAA;sBACb,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;;;aAGpD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CAC7C,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,SAAS,GAAY,CAAC,KAAU,EAAE,EAAE;IACxC,OAAO,KAAC,eAAe,oBAAK,KAAK,UAAI,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FC } from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nconst StyledCodeBlock = styled.code`\n  background-color: ${props => props.theme.base.colors.gray.light};\n  display: block;\n  font-family: monospace;\n  padding: ${props => props.theme.base.spacing};\n`;\n\nStyledCodeBlock.defaultProps = defaultThemeProp;\n\nconst CodeBlock: FC<any> = (props: any) => {\n  return <StyledCodeBlock {...props} />;\n};\n\nexport default CodeBlock;\n"]}
+{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/CodeBlock.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAA;sBACb,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;;aAG7D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CAC7C,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,SAAS,GAAY,CAAC,KAAU,EAAE,EAAE;IACxC,OAAO,KAAC,eAAe,OAAK,KAAK,WAAI,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FC } from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nconst StyledCodeBlock = styled.code`\n  background-color: ${props => props.theme.base.colors.gray['extra-light']};\n  display: block;\n  font-family: monospace;\n  padding: ${props => props.theme.base.spacing};\n`;\n\nStyledCodeBlock.defaultProps = defaultThemeProp;\n\nconst CodeBlock: FC<any> = (props: any) => {\n  return <StyledCodeBlock {...props} />;\n};\n\nexport default CodeBlock;\n"]}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Flex, Image } from '@pega/cosmos-react-core';
 const ImageBlock = (props) => {
-    return (_jsx(Flex, Object.assign({ container: { alignItems: 'end' } }, { children: _jsx(Image, { src: props.src, alt: props.alt }, void 0) }), void 0));
+    return (_jsx(Flex, { container: { alignItems: 'end' }, children: _jsx(Image, { src: props.src, alt: props.alt }, void 0) }, void 0));
 };
 export default ImageBlock;
 //# sourceMappingURL=Image.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Image.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAOtD,MAAM,UAAU,GAAY,CAAC,KAAsB,EAAE,EAAE;IACrD,OAAO,CACL,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,gBACpC,KAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,WAAI,YACpC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Flex, Image } from '@pega/cosmos-react-core';\n\ninterface ImageBlockProps {\n  src: string;\n  alt: string;\n}\n\nconst ImageBlock: FC<any> = (props: ImageBlockProps) => {\n  return (\n    <Flex container={{ alignItems: 'end' }}>\n      <Image src={props.src} alt={props.alt} />\n    </Flex>\n  );\n};\n\nexport default ImageBlock;\n"]}
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Image.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAOtD,MAAM,UAAU,GAAY,CAAC,KAAsB,EAAE,EAAE;IACrD,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,YACpC,KAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,WAAI,WACpC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Flex, Image } from '@pega/cosmos-react-core';\n\ninterface ImageBlockProps {\n  src: string;\n  alt: string;\n}\n\nconst ImageBlock: FC<any> = (props: ImageBlockProps) => {\n  return (\n    <Flex container={{ alignItems: 'end' }}>\n      <Image src={props.src} alt={props.alt} />\n    </Flex>\n  );\n};\n\nexport default ImageBlock;\n"]}

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Link } from '@pega/cosmos-react-core';
 const LinkEntity = (props) => {
     const { url } = props.contentState.getEntity(props.entityKey).getData();
-    return (_jsx(Link, Object.assign({ href: url, target: '_blank' }, { children: props.children }), void 0));
+    return (_jsx(Link, { href: url, target: '_blank', children: props.children }, void 0));
 };
 export default LinkEntity;
 //# sourceMappingURL=Link.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Link.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,UAAU,GAAY,CAAC,KAAU,EAAE,EAAE;IACzC,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,CAAC;IACxE,OAAO,CACL,KAAC,IAAI,kBAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAC,QAAQ,gBAC7B,KAAK,CAAC,QAAQ,YACV,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Link } from '@pega/cosmos-react-core';\n\nconst LinkEntity: FC<any> = (props: any) => {\n  const { url } = props.contentState.getEntity(props.entityKey).getData();\n  return (\n    <Link href={url} target='_blank'>\n      {props.children}\n    </Link>\n  );\n};\n\nexport default LinkEntity;\n"]}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Link.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,UAAU,GAAY,CAAC,KAAU,EAAE,EAAE;IACzC,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,CAAC;IACxE,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAC,QAAQ,YAC7B,KAAK,CAAC,QAAQ,WACV,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Link } from '@pega/cosmos-react-core';\n\nconst LinkEntity: FC<any> = (props: any) => {\n  const { url } = props.contentState.getEntity(props.entityKey).getData();\n  return (\n    <Link href={url} target='_blank'>\n      {props.children}\n    </Link>\n  );\n};\n\nexport default LinkEntity;\n"]}

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,21 +30,22 @@ 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;
-    return (_jsx("tbody", Object.assign({}, restProps, { ref: ref }, { children: children }), void 0));
+    return (_jsx("tbody", { ...restProps, ref: ref, children: children }, void 0));
 });
 export const Table = forwardRef((props, ref) => {
     const { children, ...restProps } = props;
-    return (_jsx(StyledTable, Object.assign({}, restProps, { ref: ref }, { children: children }), void 0));
+    return (_jsx(StyledTable, { ...restProps, ref: ref, children: children }, void 0));
 });
 export const TableRow = forwardRef((props, ref) => {
     const { children, ...restProps } = props;
-    return (_jsx("tr", Object.assign({}, restProps, { ref: ref }, { children: children }), void 0));
+    return (_jsx("tr", { ...restProps, ref: ref, children: children }, void 0));
 });
 export const TableCell = forwardRef((props, ref) => {
     const { children, ...restProps } = props;
-    return (_jsx("td", Object.assign({}, restProps, { ref: ref }, { children: children }), void 0));
+    return (_jsx("td", { ...restProps, ref: ref, children: children }, void 0));
 });
 //# sourceMappingURL=Table.js.map

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,mBAAW,SAAS,EAAE,GAAG,EAAE,GAAG,YAC3B,QAAQ,WACH,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,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,YACjC,QAAQ,WACG,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,gBAAQ,SAAS,EAAE,GAAG,EAAE,GAAG,YACxB,QAAQ,WACN,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,gBAAQ,SAAS,EAAE,GAAG,EAAE,GAAG,YACxB,QAAQ,WACN,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;
+    addImage: (image: File) => 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,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,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

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react';
 export const RichTextEditorContext = createContext({
-    onImageAdded: () => { },
+    addImage: () => { },
     setPopoverOpen: () => { },
     onEditorFocus: () => { },
     disabled: false

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,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,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  addImage: (image: File) => 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  addImage: () => {},\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;AA0DlF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAiZ1D,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,EAAE,EASH,MAAM,OAAO,CAAC;AASf,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,CAwb1D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/RichTextEditor/RichTextEditor.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useRef, useMemo, useEffect, useCallback, useImperativeHandle, useReducer } from 'react';
 // Import the Slate editor factory.
-import { createEditor, Node } from 'slate';
+import { createEditor, Node, Transforms } from 'slate';
 // Import the Slate components and React plugin.
 import { Slate, Editable, withReact, ReactEditor } from 'slate-react';
+import { withHistory } from 'slate-history';
 import styled from 'styled-components';
-import { FormField, FormControl, StyledPopover, useTheme, useUID, createUID, debounce, Popover, Menu, menuHelpers, useAfterInitialEffect } from '@pega/cosmos-react-core';
-import StyledRichTextEditor, { EditorContainer } from './RichTextEditor.styles';
+import { FormField, FormControl, StyledPopover, useTheme, useUID, createUID, debounce, Popover, Menu, menuHelpers } from '@pega/cosmos-react-core';
+import StyledRichTextEditor, { EditorContainer, StyledFormField } from './RichTextEditor.styles';
 import Toolbar from './Toolbar/Toolbar';
 import { nodeRenderer, leafRenderer } from './utils/renderers';
 import { onSearchChange } from './utils/search';
@@ -15,6 +16,7 @@ import ListCommands from './utils/ListCommands';
 import { convertHtml } from './utils/htmlConverter';
 import { convertSlateToHtml } from './utils/slateConverter';
 import { RichTextEditorContext } from './RichTextEditor.context';
+import { convertMarkdownForEditor } from './utils/markdownConverter';
 const withVoids = (editor) => {
     editor.isVoid = element => {
         if (element.type === 'image' || element.type === 'image-placeholder') {
@@ -25,7 +27,6 @@ const withVoids = (editor) => {
     return editor;
 };
 const syntheticFocusReducer = (currentId, action) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { type, menuItems, selectedItemId } = action;
     switch (type) {
         case 'child':
@@ -33,24 +34,24 @@ const syntheticFocusReducer = (currentId, action) => {
             if (!currentId)
                 return menuItems[0].id;
             // if currently highlighted item has children, select first of them
-            return (_b = (_a = menuHelpers.getItem(menuItems, currentId)) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b[0].id;
+            return menuHelpers.getItem(menuItems, currentId)?.items?.[0].id;
         case 'parent':
             // find and return parent of currently selected item
-            return (_c = menuHelpers.getParentItem(menuItems, currentId)) === null || _c === void 0 ? void 0 : _c.id;
+            return menuHelpers.getParentItem(menuItems, currentId)?.id;
         case 'next':
             // return next sibling of currently selected item
-            return (_e = (_d = menuHelpers.getNextItem(menuItems, currentId)) === null || _d === void 0 ? void 0 : _d.id) !== null && _e !== void 0 ? _e : currentId;
+            return menuHelpers.getNextItem(menuItems, currentId)?.id ?? currentId;
         case 'prev':
             // return prev sibling of currently selected item
-            return (_g = (_f = menuHelpers.getPrevItem(menuItems, currentId)) === null || _f === void 0 ? void 0 : _f.id) !== null && _g !== void 0 ? _g : currentId;
+            return menuHelpers.getPrevItem(menuItems, currentId)?.id ?? currentId;
         case 'list_change':
             // if currently selected item does not exist in new list, select first one
             if (currentId && menuHelpers.getItem(menuItems, currentId))
                 return currentId;
-            return (_h = menuItems[0]) === null || _h === void 0 ? void 0 : _h.id;
+            return menuItems[0]?.id;
         case 'set':
             // return arbitrary selected item id if it is in the tree; undefined otherwise
-            return selectedItemId ? (_j = menuHelpers.getItem(menuItems, selectedItemId)) === null || _j === void 0 ? void 0 : _j.id : undefined;
+            return selectedItemId ? menuHelpers.getItem(menuItems, selectedItemId)?.id : undefined;
         case 'clear':
             return undefined;
         default:
@@ -63,17 +64,12 @@ const StyledSearchPopover = styled(StyledPopover) `
 const RichTextEditor = forwardRef((props, ref) => {
     const { components: { 'text-area': { 'min-height': minHeight } } } = useTheme();
     const uid = useUID();
-    const { id = uid, label, labelHidden, info, status, required, disabled, readOnly, onChange, onFocus, onBlur, placeholder, toolbar, onImageAdded, markdownOnly, searchTriggers, onSearch, getSearchItemReplacement, menu, height = { min: minHeight }, defaultValue, autoFocus, ...restProps } = props;
+    const { id = uid, label, labelHidden, info, status, required, disabled, readOnly, onChange, onFocus, onBlur, placeholder, toolbar, onImageAdded, markdownOnly, searchTriggers, onSearch, getSearchItemReplacement, searchRenderers, menu, height = { min: minHeight }, defaultValue, autoFocus, ...restProps } = props;
     const formFieldRef = useRef(null);
-    const editor = useMemo(() => withVoids(withReact(createEditor())), []);
-    const [value, setValue] = useState(defaultValue && !markdownOnly
+    const editor = useMemo(() => withVoids(withReact(withHistory(createEditor()))), []);
+    const [value, setValue] = useState(() => defaultValue && !markdownOnly
         ? convertHtml(defaultValue)
-        : [
-            {
-                type: 'paragraph',
-                children: [{ text: defaultValue || '' }]
-            }
-        ]);
+        : convertMarkdownForEditor(defaultValue, searchRenderers));
     const [toolbarPopover, setToolbarPopover] = useState(false);
     const [toolbarSticky, setToolbarSticky] = useState(false);
     const [focusableToolbarBtn, setFocusableToolbarBtn] = useState(null);
@@ -81,8 +77,7 @@ const RichTextEditor = forwardRef((props, ref) => {
     const [popoverTarget, setPopoverTarget] = useState(null);
     const [searchEl, setSearchEl] = useState(null);
     const updateToolbarStyle = () => {
-        var _a;
-        if ((((_a = formFieldRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0) > window.innerHeight) {
+        if ((formFieldRef.current?.offsetHeight || 0) > window.innerHeight) {
             setToolbarSticky(true);
         }
         else {
@@ -93,24 +88,37 @@ const RichTextEditor = forwardRef((props, ref) => {
     const getPlainText = () => {
         return value
             .map(node => {
+            if (markdownOnly && node.children) {
+                return node.children
+                    .map(textNode => textNode.searchResult?.markdown || textNode.text)
+                    .join('');
+            }
             return Node.string(node);
         })
             .join('\n');
     };
     const onEditorFocus = ({ event, force, focusEditor, runAfterFocus }) => {
         if (focusEditor) {
-            ReactEditor.focus(editor);
+            setTimeout(() => {
+                if (!ReactEditor.isFocused(editor)) {
+                    ReactEditor.focus(editor);
+                    onFocus?.();
+                }
+            }, 0);
         }
         if (runAfterFocus && (force || (!disabled && !toolbarPopover))) {
             setTimeout(runAfterFocus, 0);
         }
         else {
-            event === null || event === void 0 ? void 0 : event.stopPropagation();
+            event?.stopPropagation();
         }
     };
-    const blurEditor = () => {
-        ReactEditor.blur(editor);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    const blurEditor = (force) => {
+        if (force)
+            ReactEditor.blur(editor);
+        if (ReactEditor.isFocused(editor)) {
+            onBlur?.();
+        }
     };
     useImperativeHandle(ref, () => ({
         focus: () => {
@@ -136,19 +144,48 @@ const RichTextEditor = forwardRef((props, ref) => {
             ]);
         },
         appendImage: ({ src, alt }, imageId) => {
-            EditorCommands.appendImage(editor, { src, alt }, imageId);
+            const path = EditorCommands.appendImage(editor, { src, alt }, imageId);
+            if (path) {
+                Transforms.select(editor, { anchor: path, focus: path });
+                ReactEditor.focus(editor);
+            }
         },
         insertText: (text) => {
             editor.insertText(text);
+        },
+        insertHtml: (html, overwrite = false) => {
+            setValue(prevValue => {
+                if (overwrite) {
+                    const point = { path: [0, 0], offset: 0 };
+                    editor.selection = { anchor: point, focus: point };
+                    return convertHtml(html !== '' ? html : '<p></p>');
+                }
+                return [...prevValue, ...convertHtml(html)];
+            });
         }
     }), [value, setValue]);
     const onMenuItemClick = (itemId, e) => {
-        var _a;
         // MenuItem expects actual click events, but we don't have reference to actual menu item element to trigger a click.
-        (_a = menu === null || menu === void 0 ? void 0 : menu.onItemClick) === null || _a === void 0 ? void 0 : _a.call(menu, itemId, e);
-        const replacementText = getSearchItemReplacement === null || getSearchItemReplacement === void 0 ? void 0 : getSearchItemReplacement(itemId);
-        if (replacementText) {
-            EditorCommands.replaceWithText(editor, popoverTarget, replacementText);
+        menu?.onItemClick?.(itemId, e);
+        const replacement = getSearchItemReplacement?.(itemId);
+        if (replacement) {
+            let node;
+            if (replacement.markdown && replacement.component && replacement.props) {
+                node = {
+                    text: replacement.text,
+                    searchResult: {
+                        markdown: replacement.markdown,
+                        component: replacement.component,
+                        props: replacement.props,
+                        // Prevents copying searchResult attribute onPaste
+                        toJSON: () => undefined
+                    }
+                };
+            }
+            else {
+                node = { text: replacement.text };
+            }
+            EditorCommands.replaceWithNodes(editor, popoverTarget, node);
         }
     };
     const onKeyDown = useCallback((event) => {
@@ -166,7 +203,6 @@ const RichTextEditor = forwardRef((props, ref) => {
                     event.preventDefault();
                     if (focusedId) {
                         onMenuItemClick(focusedId, event);
-                        setPopoverTarget(null);
                         dispatchFocus({ type: 'clear', menuItems: menu.items });
                     }
                     break;
@@ -187,15 +223,19 @@ const RichTextEditor = forwardRef((props, ref) => {
         else {
             ListCommands.checkListEnter(editor, event);
             EditorCommands.checkLinkBreak(editor, event);
+            EditorCommands.checkSearchDownKeys(editor, event);
             EditorCommands.checkImageEnter(editor, event);
             EditorCommands.checkKeyCommands(editor, event);
         }
     }, [menu, focusedId, popoverTarget, focusableToolbarBtn]);
+    const onKeyUp = (event) => {
+        EditorCommands.checkSearchUpKeys(editor, event);
+    };
     // Adds an image placeholder to be replaced later in time by an image
     const addImage = (file) => {
         const placeholderId = EditorCommands.appendImagePlaceholder(editor);
         if (placeholderId)
-            onImageAdded === null || onImageAdded === void 0 ? void 0 : onImageAdded(file, placeholderId);
+            onImageAdded?.(file, placeholderId);
     };
     const onPaste = (e) => {
         let image;
@@ -226,15 +266,14 @@ const RichTextEditor = forwardRef((props, ref) => {
         }
     }, [popoverTarget]);
     useEffect(() => {
-        onChange === null || onChange === void 0 ? void 0 : onChange();
+        onChange?.();
     }, [value]);
     useEffect(() => {
-        var _a;
         if (menu && popoverTarget) {
             dispatchFocus({
                 type: 'set',
                 menuItems: menu.items,
-                selectedItemId: (_a = menu.items[0]) === null || _a === void 0 ? void 0 : _a.id
+                selectedItemId: menu.items[0]?.id
             });
         }
     }, [menu, popoverTarget]);
@@ -245,22 +284,18 @@ const RichTextEditor = forwardRef((props, ref) => {
             }, 0);
         }
     }, []);
-    useAfterInitialEffect(() => {
-        if (!menu) {
-            ReactEditor.focus(editor);
-        }
-    }, [menu]);
-    return (_jsx(RichTextEditorContext.Provider, Object.assign({ value: {
-            onImageAdded,
+    return (_jsx(RichTextEditorContext.Provider, { value: {
+            addImage,
             setPopoverOpen: setToolbarPopover,
             onEditorFocus,
             disabled: disabled || false
-        } }, { children: _jsx(FormField, Object.assign({ label: 
+        }, children: _jsx(FormField, { as: StyledFormField, toolbar: !!(!markdownOnly && toolbar?.length), 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 === null || toolbar === void 0 ? void 0 : toolbar.length) ? 'Hit tab to edit toolbar below' : ''}` }, { children: _jsxs(Slate, Object.assign({ editor: editor, value: value, onChange: newValue => {
+            _jsx("span", { onClick: () => onEditorFocus({ focusEditor: true }), children: label }, void 0), labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, onDrop: onDrop, onFocus: (e) => {
+                if (e.target === formFieldRef.current && !disabled) {
+                    onEditorFocus({ focusEditor: true });
+                }
+            }, ref: formFieldRef, "aria-label": `${label} ${!markdownOnly && !readOnly && toolbar?.length ? 'Hit tab to edit toolbar below' : ''}`, tabIndex: disabled ? -1 : undefined, children: _jsxs(Slate, { editor: editor, value: value, onChange: newValue => {
                     if (!disabled) {
                         setValue(newValue);
                         debouncedUpdateToolbarStyle();
@@ -273,7 +308,7 @@ const RichTextEditor = forwardRef((props, ref) => {
                                             {
                                                 trigger,
                                                 groupId: `g${groupId}`,
-                                                regex: new RegExp(String.raw `${trigger}(?<g${groupId}>${regex || String.raw `\w*`})$`)
+                                                regex: new RegExp(String.raw `(?:^|\s)(?<match>${trigger}(?<g${groupId}>${regex || String.raw `\w*`}))$`)
                                             }
                                         ];
                                     }
@@ -300,26 +335,17 @@ 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 === null || toolbar === void 0 ? void 0 : toolbar.length)), onClick: () => {
+                }, children: [_jsxs(FormControl, { ...restProps, ref: ref, ariaLabel: label, required: required, disabled: disabled, readOnly: readOnly, status: status, as: StyledRichTextEditor, toolbar: !!(!markdownOnly && toolbar?.length), onClick: () => {
                             onEditorFocus({ focusEditor: true });
-                        }, focused: ReactEditor.isFocused(editor) }, { children: [_jsx(EditorContainer, Object.assign({ toolbar: !!(!markdownOnly && (toolbar === null || toolbar === void 0 ? void 0 : toolbar.length)), containerHeight: height, onClick: () => {
+                        }, focused: ReactEditor.isFocused(editor), children: [_jsx(EditorContainer, { toolbar: !!(!markdownOnly && toolbar?.length), containerHeight: height, onClick: () => {
                                     if (!disabled) {
                                         onEditorFocus({ focusEditor: true });
-                                        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
                                     }
-                                } }, { children: _jsx(Editable, { renderElement: nodeRenderer, renderLeaf: leafRenderer, onKeyDown: onKeyDown, placeholder: placeholder, onFocus: () => {
-                                        if (!disabled) {
-                                            onEditorFocus({});
-                                            onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-                                        }
-                                        else {
-                                            blurEditor();
-                                        }
-                                    }, onBlur: blurEditor, disabled: disabled, readOnly: readOnly, onPaste: onPaste }, void 0) }), void 0),
-                            !markdownOnly && !readOnly && (toolbar === null || toolbar === void 0 ? void 0 : toolbar.length) ? (_jsx(Toolbar, { features: toolbar, sticky: toolbarSticky, setFocusableBtn: el => {
+                                }, children: _jsx(Editable, { id: id, renderElement: nodeRenderer, renderLeaf: leafRenderer, onKeyDown: onKeyDown, onKeyUp: onKeyUp, placeholder: placeholder, onFocus: event => {
+                                        onEditorFocus({ focusEditor: true, event });
+                                    }, onBlur: () => blurEditor(), disabled: disabled, readOnly: readOnly, onPaste: onPaste, tabIndex: disabled ? -1 : undefined }, void 0) }, void 0), !markdownOnly && !readOnly && toolbar?.length ? (_jsx(Toolbar, { features: toolbar, sticky: toolbarSticky, setFocusableBtn: el => {
                                     setFocusableToolbarBtn(el);
-                                } }, void 0)) : null] }), void 0),
-                    _jsx(Popover, Object.assign({ show: !!popoverTarget && !!menu, strategy: 'fixed', target: searchEl, placement: 'bottom-start' }, { children: menu && (_jsx(Menu, Object.assign({}, menu, { as: StyledSearchPopover, currentItemId: focusedId, mode: 'action', onItemClick: onMenuItemClick }), void 0)) }), void 0)] }), void 0) }), void 0) }), void 0));
+                                } }, void 0)) : null] }, void 0), _jsx(Popover, { show: !!popoverTarget && !!menu, strategy: 'fixed', target: searchEl, placement: 'bottom-start', children: menu && (_jsx(Menu, { ...menu, as: StyledSearchPopover, currentItemId: focusedId, mode: 'action', onItemClick: onMenuItemClick }, void 0)) }, void 0)] }, void 0) }, void 0) }, void 0));
 });
 export default RichTextEditor;
 //# sourceMappingURL=RichTextEditor.js.map