npm - @pega/cosmos-react-rte - Versions diffs - 3.0.0-dev.2.1 → 3.0.0-dev.20.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

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

@@ -1,58 +1,6 @@
 import styled, { css } from 'styled-components';
-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;
-  }
-`;
+import { defaultThemeProp, StyledLink } from '@pega/cosmos-react-core';
+import { listStyles } from '@pega/cosmos-react-core/lib/components/HTML/HTML';
 export const StyledEditorContainer = styled.div(({ containerHeight, readOnly, toolbar, theme }) => {
     return css `
       ${typeof containerHeight === 'string' &&
@@ -91,22 +39,25 @@ export const StyledEditorContainer = styled.div(({ containerHeight, readOnly, to
     `;
 });
 StyledEditorContainer.defaultProps = defaultThemeProp;
-const StyledRichTextEditor = styled.div(({ toolbar, theme }) => {
+const StyledRichTextEditor = styled.div(({ toolbar, theme, focused }) => {
     return css `
-    background-color: ${toolbar ? theme.base.palette['primary-background'] : 'transparent'};
-    width: 100%;
-    position: relative;
+      background-color: ${toolbar ? theme.base.palette['primary-background'] : 'transparent'};
+      width: 100%;
+      position: relative;
-    &:focus-within:not([disabled]) {
-      border-color: ${theme.components['form-control'][':focus']['border-color']};
-      box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};
-    }
+      ${focused &&
+        css `
+        &:not([disabled]) {
+          border-color: ${theme.components['form-control'][':focus']['border-color']};
+          box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};
+        }
+      `}
-    /* Override default styling of slate placeholder. */
+      /* Override default styling of slate placeholder. */
     span[contenteditable='false'] {
-      opacity: ${theme.base.transparency['transparent-3']} !important;
-    }
-  `;
+        opacity: ${theme.base.transparency['transparent-3']} !important;
+      }
+    `;
 });
 StyledRichTextEditor.defaultProps = defaultThemeProp;
 export const StyledRichTextFormField = styled.div(({ toolbar }) => {
@@ -132,58 +83,5 @@ 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)}
-    }
-    img {
-      max-width: 100%;
-    }
-    a {
-      color: ${palette.interactive};
-    }
-    pre {
-      white-space: break-spaces;
-    }
-    p {
-      min-height: ${fontSize[text.primary['font-size']]};
-    }
-    h1 {
-      font-size: ${fontSize[text.h1['font-size']]};
-      font-weight: ${text.h1['font-weight']};
-      min-height: ${fontSize[text.h1['font-size']]};
-    }
-    h2 {
-      font-size: ${fontSize[text.h2['font-size']]};
-      font-weight: ${text.h2['font-weight']};
-      min-height: ${fontSize[text.h2['font-size']]};
-    }
-    h3 {
-      font-size: ${fontSize[text.h3['font-size']]};
-      font-weight: ${text.h3['font-weight']};
-      min-height: ${fontSize[text.h3['font-size']]};
-    }
-    h4 {
-      font-size: ${fontSize[text.h4['font-size']]};
-      font-weight: ${text.h4['font-weight']};
-      min-height: ${fontSize[text.h4['font-size']]};
-    }
-    h5 {
-      font-size: ${fontSize[text.h5['font-size']]};
-      font-weight: ${text.h5['font-weight']};
-      min-height: ${fontSize[text.h5['font-size']]};
-    }
-    h6 {
-      font-size: ${fontSize[text.h6['font-size']]};
-      font-weight: ${text.h6['font-weight']};
-      min-height: ${fontSize[text.h6['font-size']]};
-    }
-  `;
-});
-StyledHtml.defaultProps = defaultThemeProp;
 export default StyledRichTextEditor;
 //# sourceMappingURL=RichTextEditor.styles.js.map

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

	@@ -1 +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,~~EACL~~,~~iBAAiB,EACjB,~~gBAAgB,~~EAEhB~~,UAAU,~~EACV~~,~~aAAa,EACd,~~MAAM,yBAAyB,CAAC;~~AAGjC~~,OAAO,EAAE,~~cAAc~~,EAAE,MAAM,~~6BAA6B~~,CAAC;~~AAS7D~~,MAAM,CAAC,MAAM,~~UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4CzB,aAAa,QAAQ,aAAa;;;;IAIlC,aAAa;;;CAGhB,CAAC;AAEF,MAAM,CAAC,MAAM,~~qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,OAAO,GAAG,CAAA;QACN,OAAO,eAAe,KAAK,QAAQ;QACrC,GAAG,CAAA;kBACS,eAAe;OAC1B;;QAEC,OAAO,eAAe,KAAK,QAAQ;QACrC,GAAG,CAAA;UACC,eAAe,CAAC,GAAG;YACrB,GAAG,CAAA;wBACa,eAAe,CAAC,GAAG;SAClC;;UAEC,eAAe,CAAC,GAAG;YACrB,GAAG,CAAA;wBACa,eAAe,CAAC,GAAG;SAClC;OACF;;QAEC,CAAC,QAAQ,IAAI,OAAO,CAAC;QACvB,GAAG,CAAA;mBACU,KAAK,CAAC,IAAI,CAAC,OAAO;OAC9B;;QAEC,eAAe;QACjB,GAAG,CAAA;;OAEF;;;;;;QAMC,UAAU;KACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,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~~;;;;;iBAK3D~~,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,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IAC3F,OAAO,GAAG,CAAA;MACN,oBAAoB;QAClB,CAAC,OAAO;QACV,GAAG,CAAA;;;OAGF;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;IAI1C,UAAU;;;;;;;CAOb,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjD,MAAM,EACJ,IAAI,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,EACzE,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAChE,OAAO,GAAG,CAAA;MACN,UAAU;;QAER,cAAc,CAAC,KAAK,CAAC;;;;;;eAMd,OAAO,CAAC,WAAW;;;;;;oBAMd,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAa,CAAC;;;mBAGhD,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBACxC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;oBACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;;;mBAG3C,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBACxC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;oBACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;;;mBAG3C,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBACxC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;oBACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;;;mBAG3C,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBACxC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;oBACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;;;mBAG3C,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBACxC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;oBACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;;;mBAG3C,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;qBACxC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;oBACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;;GAE3D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,eAAe,oBAAoB,CAAC","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 StyledEditorContainer = styled.div<StyledRichTextEditorProps>(\n ({ containerHeight, readOnly, toolbar, theme }) => {\n return css`\n ${typeof containerHeight === 'string' &&\n css`\n height: ${containerHeight};\n `}\n\n ${typeof containerHeight === 'object' &&\n css`\n ${containerHeight.min &&\n css`\n min-height: ${containerHeight.min};\n `}\n\n ${containerHeight.max &&\n css`\n max-height: ${containerHeight.max};\n `}\n `}\n\n ${(readOnly \|\| toolbar) &&\n css`\n padding: ${theme.base.spacing};\n `}\n\n ${containerHeight &&\n css`\n overflow: auto;\n `}\n\n &:hover {\n cursor: text;\n }\n\n ${listStyles}\n `;\n }\n);\n\nStyledEditorContainer.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 /* 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 StyledRichTextFormField = styled.div<StyledRichTextEditorProps>(({ toolbar }) => {\n return css`\n ${StyledRichTextEditor} {\n ${!toolbar &&\n css`\n border: none;\n box-shadow: none;\n `}\n }\n `;\n});\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 img {\n max-width: 100%;\n }\n a {\n color: ${palette.interactive};\n }\n pre {\n white-space: break-spaces;\n }\n p {\n min-height: ${fontSize[text.primary['font-size'] as FontSize]};\n }\n h1 {\n font-size: ${fontSize[text.h1['font-size'] as FontSize]};\n font-weight: ${text.h1['font-weight']};\n min-height: ${fontSize[text.h1['font-size'] as FontSize]};\n }\n h2 {\n font-size: ${fontSize[text.h2['font-size'] as FontSize]};\n font-weight: ${text.h2['font-weight']};\n min-height: ${fontSize[text.h2['font-size'] as FontSize]};\n }\n h3 {\n font-size: ${fontSize[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n min-height: ${fontSize[text.h3['font-size'] as FontSize]};\n }\n h4 {\n font-size: ${fontSize[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n min-height: ${fontSize[text.h4['font-size'] as FontSize]};\n }\n h5 {\n font-size: ${fontSize[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n min-height: ${fontSize[text.h5['font-size'] as FontSize]};\n }\n h6 {\n font-size: ${fontSize[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n min-height: ${fontSize[text.h6['font-size'] as FontSize]};\n }\n `;\n});\n\nStyledHtml.defaultProps = defaultThemeProp;\n\nexport default StyledRichTextEditor;\n"]}
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;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAW9E,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,OAAO,GAAG,CAAA;QACN,OAAO,eAAe,KAAK,QAAQ;QACrC,GAAG,CAAA;kBACS,eAAe;OAC1B;;QAEC,OAAO,eAAe,KAAK,QAAQ;QACrC,GAAG,CAAA;UACC,eAAe,CAAC,GAAG;YACrB,GAAG,CAAA;wBACa,eAAe,CAAC,GAAG;SAClC;;UAEC,eAAe,CAAC,GAAG;YACrB,GAAG,CAAA;wBACa,eAAe,CAAC,GAAG;SAClC;OACF;;QAEC,CAAC,QAAQ,IAAI,OAAO,CAAC;QACvB,GAAG,CAAA;mBACU,KAAK,CAAC,IAAI,CAAC,OAAO;OAC9B;;QAEC,eAAe;QACjB,GAAG,CAAA;;OAEF;;;;;;QAMC,UAAU;KACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IAC9B,OAAO,GAAG,CAAA;0BACY,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,aAAa;;;;QAIpF,OAAO;QACT,GAAG,CAAA;;0BAEiB,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;wBAC5D,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;OAEzE;;;;mBAIY,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;;KAEtD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAA4B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IAC3F,OAAO,GAAG,CAAA;MACN,oBAAoB;QAClB,CAAC,OAAO;QACV,GAAG,CAAA;;;OAGF;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,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';\nimport { listStyles } from '@pega/cosmos-react-core/lib/components/HTML/HTML';\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 StyledEditorContainer = styled.div<StyledRichTextEditorProps>(\n ({ containerHeight, readOnly, toolbar, theme }) => {\n return css`\n ${typeof containerHeight === 'string' &&\n css`\n height: ${containerHeight};\n `}\n\n ${typeof containerHeight === 'object' &&\n css`\n ${containerHeight.min &&\n css`\n min-height: ${containerHeight.min};\n `}\n\n ${containerHeight.max &&\n css`\n max-height: ${containerHeight.max};\n `}\n `}\n\n ${(readOnly \|\| toolbar) &&\n css`\n padding: ${theme.base.spacing};\n `}\n\n ${containerHeight &&\n css`\n overflow: auto;\n `}\n\n &:hover {\n cursor: text;\n }\n\n ${listStyles}\n `;\n }\n);\n\nStyledEditorContainer.defaultProps = defaultThemeProp;\n\nconst StyledRichTextEditor = styled.div<StyledRichTextEditorProps>(\n ({ toolbar, theme, focused }) => {\n return css`\n background-color: ${toolbar ? theme.base.palette['primary-background'] : 'transparent'};\n width: 100%;\n position: relative;\n\n ${focused &&\n css`\n &: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\n /* Override default styling of slate placeholder. */\n span[contenteditable='false'] {\n opacity: ${theme.base.transparency['transparent-3']} !important;\n }\n `;\n }\n);\n\nStyledRichTextEditor.defaultProps = defaultThemeProp;\n\nexport const StyledRichTextFormField = styled.div<StyledRichTextEditorProps>(({ toolbar }) => {\n return css`\n ${StyledRichTextEditor} {\n ${!toolbar &&\n css`\n border: none;\n box-shadow: none;\n `}\n }\n `;\n});\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"]}

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

	@@ -1 +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;~~AAK1E~~,OAAO,~~EAAE~~,YAAY,EAAuB,MAAM,yBAAyB,CAAC;~~AAI5E~~,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAQ7D,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,~~CAiE1D~~,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"RichTextViewer.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiE,MAAM,OAAO,CAAC;AAI1F,OAAO,EAAQ,YAAY,EAAuB,MAAM,yBAAyB,CAAC;AAIlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAQ7D,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAuE1D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/RichTextEditor/RichTextViewer.js CHANGED Viewed

@@ -2,14 +2,13 @@ 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 dompurify from 'dompurify';
-import { ErrorState, useI18n } from '@pega/cosmos-react-core';
+import { HTML, ErrorState, useI18n } from '@pega/cosmos-react-core';
 import convertMarkdown from './utils/markdownConverter';
 import { nodeRenderer, leafRenderer } from './utils/renderers';
-import { StyledEditorContainer, StyledHtml, StyledRichTextViewer } from './RichTextEditor.styles';
+import { StyledEditorContainer, StyledRichTextViewer } from './RichTextEditor.styles';
 import { convertHtml } from './utils/htmlConverter';
 // Regex to match valid URLs
-const URL_REGEX = /(?<leadingChar>^|[^(:/a-z0-9@])(?<url>(?<protocol>https?:\/\/)?(?<host>[a-z0-9]+(?:[-.][a-z0-9]+)*\.[a-z]{2,5}(?<port>:[0-9]{1,5})?)(?<pathQueryHash>\/\S*)?)(?<trailingChar>$|[^):/a-z0-9])/g;
+const URL_REGEX = /(?<leadingChar>^|\s)(?<url>(?<protocol>https?:\/\/)?(?<host>[a-z0-9]+(?:[-.][a-z0-9]+)*\.[a-z]{2,5}(?<port>:[0-9]{1,5})?)(?<pathQueryHash>\/[/a-zA-Z0-9\]]*)?)(?=$|[^:)/a-zA-Z0-9\]])/g;
 const RichTextViewer = forwardRef(({ content, type, interactionRenderers, markdownMap, onRetry, ...restProps }, ref) => {
     const t = useI18n();
     const editor = useMemo(() => withReact(createEditor()), []);
@@ -38,15 +37,15 @@ const RichTextViewer = forwardRef(({ content, type, interactionRenderers, markdo
             }
         }
     }, [editor, content, type, interactionRenderers]);
-    const sanitizedHtml = useMemo(() => {
-        return type === 'html' && (!interactionRenderers || interactionRenderers.length === 0)
-            ? dompurify.sanitize(content)
-            : '';
-    }, [content, type, interactionRenderers]);
-    if (sanitizedHtml) {
-        return _jsx(StyledHtml, { ref: ref, dangerouslySetInnerHTML: { __html: sanitizedHtml } }, void 0);
+    if (type === 'html' && (!interactionRenderers || interactionRenderers.length === 0)) {
+        return _jsx(HTML, { ref: ref, content: content });
     }
-    return error ? (_jsx(ErrorState, { message: t('rte_invalid_html'), onRetry: onRetry }, void 0)) : (_jsx(StyledRichTextViewer, { ref: ref, ...restProps, children: _jsx(Slate, { editor: editor, value: [], onChange: () => { }, children: _jsx(StyledEditorContainer, { children: _jsx(Editable, { readOnly: true, renderElement: nodeRenderer, renderLeaf: leafRenderer }, void 0) }, void 0) }, void 0) }, void 0));
+    const onCopy = (e) => {
+        const selection = document.getSelection();
+        e.clipboardData.setData('text/plain', selection?.toString() ?? '');
+        e.preventDefault();
+    };
+    return error ? (_jsx(ErrorState, { message: t('rte_invalid_html'), onRetry: onRetry })) : (_jsx(StyledRichTextViewer, { ref: ref, ...restProps, children: _jsx(Slate, { editor: editor, value: [], onChange: () => { }, children: _jsx(StyledEditorContainer, { children: _jsx(Editable, { readOnly: true, renderElement: nodeRenderer, renderLeaf: leafRenderer, onCopy: onCopy }) }) }) }));
 });
 export default RichTextViewer;
 //# sourceMappingURL=RichTextViewer.js.map

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

	@@ -1 +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,EAAc,YAAY,EAAE,MAAM,OAAO,CAAC;~~AACjD~~,OAAO,~~SAAS~~,~~MAAM~~,~~WAAW,CAAC;AAElC,OAAO,~~EAAgB,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;~~AAE5E~~,OAAO,eAAe,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,~~UAAU,EAAE,~~oBAAoB,EAAE,MAAM,yBAAyB,CAAC;~~AAClG~~,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,4BAA4B;AAC5B,MAAM,SAAS,GACb~~,+LAA+L~~,CAAC;~~AAElM~~,MAAM,cAAc,GAA2C,UAAU,CACvE,CACE,EACE,OAAO,EACP,IAAI,EACJ,oBAAoB,EACpB,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACQ,EACtB,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,qFAAqF;IACrF,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAC;IAChD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,UAAU,EAAE;YACvB,MAAM,CAAC,QAAQ,GAAG,eAAe,CAC/B,OAAO,EACP,CAAC,GAAG,CAAC,oBAAoB,IAAI,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,EACnF,WAAW,CACZ,CAAC;YACF,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;SAC3B;QACD,IAAI,IAAI,KAAK,UAAU,EAAE;YACvB,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YACtC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;SAC3B;QACD,IAAI,IAAI,KAAK,MAAM,IAAI,oBAAoB,IAAI,oBAAoB,CAAC,MAAM,GAAG,CAAC,EAAE;YAC9E,IAAI;gBACF,MAAM,CAAC,QAAQ,GAAG,WAAW,CAAC,OAAO,EAAE,oBAAoB,CAAC,CAAC;gBAC7D,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;gBAC1B,QAAQ,CAAC,KAAK,CAAC,CAAC;aACjB;YAAC,MAAM;gBACN,MAAM,CAAC,QAAQ,GAAG,EAAE,CAAC;gBACrB,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;gBAC1B,QAAQ,CAAC,IAAI,CAAC,CAAC;aAChB;SACF;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC;~~IAClD~~,~~MAAM~~,~~aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,~~IAAI,KAAK,MAAM,IAAI,CAAC,CAAC,oBAAoB,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,CAAC;~~YACpF~~,~~CAAC~~,~~CAAC~~,~~SAAS~~,~~CAAC~~,~~QAAQ~~,~~CAAC~~,OAAO,CAAC;~~YAC7B~~,~~CAAC~~,CAAC,EAAE,~~CAAC~~;~~IACT~~,~~CAAC~~,~~EAAE~~,~~CAAC~~,~~OAAO~~,~~EAAE~~,~~IAAI~~,EAAE,~~oBAAoB,~~CAAC,CAAC,CAAC~~;IAE1C~~,~~IAAI,~~aAAa,~~EAAE;QACjB~~,OAAO,~~KAAC~~,~~UAAU~~,~~IAAC~~,~~GAAG~~,EAAE,~~GAAG~~,EAAE,~~uBAAuB~~,EAAE,~~EAAE~~,~~MAAM~~,~~EAAE~~,~~aAAa~~,EAAE,~~WAAI~~,CAAC;~~KACrF;IAED~~,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,~~WAAI~~,CACjE,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,YAC3C,KAAC,KAAK,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,YAClD,KAAC,qBAAqB,cACpB,KAAC,QAAQ,~~IAAC~~,QAAQ,~~QAAC~~,aAAa,EAAE,YAAY,~~EAAE~~,UAAU,EAAE,YAAY,~~WAAI~~,~~WACtD~~,~~WAClB~~,~~WACa~~,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 { Descendant, createEditor } from 'slate';\~~nimport dompurify from 'dompurify';\~~n\nimport { ForwardProps, ErrorState, useI18n } from '@pega/cosmos-react-core';\n\nimport convertMarkdown from './utils/markdownConverter';\nimport { nodeRenderer, leafRenderer } from './utils/renderers';\nimport { RichTextViewerProps } from './RichTextViewer.types';\nimport { StyledEditorContainer, ~~StyledHtml,~~ StyledRichTextViewer } from './RichTextEditor.styles';\nimport { convertHtml } from './utils/htmlConverter';\n\n// Regex to match valid URLs\nconst URL_REGEX =\n /(?<leadingChar~~>^\|[^(:/a-z0-9@]~~)(?<url>(?<protocol>https?:\\/\\/)?(?<host>[a-z0-9]+(?:[-.][a-z0-9]+)\\.[a-z]{2,5}(?<port>:[0-9]{1,5})?)(?<pathQueryHash~~>\\/\\S~~)?)(~~?<trailingChar>$\|~~[^):/a-z0-9])/g;\n\nconst RichTextViewer: FC<RichTextViewerProps & ForwardProps> = forwardRef(\n (\n {\n content,\n type,\n interactionRenderers,\n markdownMap,\n onRetry,\n ...restProps\n }: RichTextViewerProps,\n ref: Ref<HTMLDivElement>\n ) => {\n const t = useI18n();\n const editor = useMemo(() => withReact(createEditor()), []);\n // State is unused, but still set to force a re-render when updating editor.children.\n const [, setNodes] = useState<Descendant[]>([]);\n const [error, setError] = useState(false);\n\n useEffect(() => {\n if (type === 'markdown') {\n editor.children = convertMarkdown(\n content,\n [...(interactionRenderers \|\| []), { regexPattern: URL_REGEX, type: 'builtin-url' }],\n markdownMap\n );\n setNodes(editor.children);\n }\n if (type === 'richtext') {\n editor.children = JSON.parse(content);\n setNodes(editor.children);\n }\n if (type === 'html' && interactionRenderers && interactionRenderers.length > 0) {\n try {\n editor.children = convertHtml(content, interactionRenderers);\n setNodes(editor.children);\n setError(false);\n } catch {\n editor.children = [];\n setNodes(editor.children);\n setError(true);\n }\n }\n }, [editor, content, type, interactionRenderers]);\n ~~const~~ ~~sanitizedHtml = useMemo~~(~~() => {\n return~~ type === 'html' && (!interactionRenderers \|\| interactionRenderers.length === 0)~~\n ?~~ ~~dompurify.sanitize(content)~~\n : ~~'';\n~~ }, [content, ~~type, interactionRenderers]);\~~n\n if (~~sanitizedHtml~~) {\n ~~return~~ ~~<StyledHtml~~ ~~ref~~=~~{ref}~~ ~~dangerouslySetInnerHTML={{~~ ~~__html:~~ ~~sanitizedHtml~~ ~~}} />;\~~n }\n\n return error ? (\n <ErrorState message={t('rte_invalid_html')} onRetry={onRetry} />\n ) : (\n <StyledRichTextViewer ref={ref} {...restProps}>\n <Slate editor={editor} value={[]} onChange={() => {}}>\n <StyledEditorContainer>\n <Editable readOnly renderElement={nodeRenderer} renderLeaf={leafRenderer} />\n </StyledEditorContainer>\n </Slate>\n </StyledRichTextViewer>\n );\n }\n);\n\nexport default RichTextViewer;\n"]}
1	+ {"version":3,"file":"RichTextViewer.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, Ref, forwardRef, useMemo, useState, useEffect, ClipboardEvent } from 'react';\nimport { Slate, Editable, withReact } from 'slate-react';\nimport { Descendant, createEditor } from 'slate';\n\nimport { HTML, ForwardProps, ErrorState, useI18n } from '@pega/cosmos-react-core';\n\nimport convertMarkdown from './utils/markdownConverter';\nimport { nodeRenderer, leafRenderer } from './utils/renderers';\nimport { RichTextViewerProps } from './RichTextViewer.types';\nimport { StyledEditorContainer, StyledRichTextViewer } from './RichTextEditor.styles';\nimport { convertHtml } from './utils/htmlConverter';\n\n// Regex to match valid URLs\nconst URL_REGEX =\n /(?<leadingChar>^\|\\s)(?<url>(?<protocol>https?:\\/\\/)?(?<host>[a-z0-9]+(?:[-.][a-z0-9]+)\\.[a-z]{2,5}(?<port>:[0-9]{1,5})?)(?<pathQueryHash>\\/[/a-zA-Z0-9\\]])?)(?=$\|[^:)/a-zA-Z0-9\\]])/g;\n\nconst RichTextViewer: FC<RichTextViewerProps & ForwardProps> = forwardRef(\n (\n {\n content,\n type,\n interactionRenderers,\n markdownMap,\n onRetry,\n ...restProps\n }: RichTextViewerProps,\n ref: Ref<HTMLDivElement>\n ) => {\n const t = useI18n();\n const editor = useMemo(() => withReact(createEditor()), []);\n // State is unused, but still set to force a re-render when updating editor.children.\n const [, setNodes] = useState<Descendant[]>([]);\n const [error, setError] = useState(false);\n\n useEffect(() => {\n if (type === 'markdown') {\n editor.children = convertMarkdown(\n content,\n [...(interactionRenderers \|\| []), { regexPattern: URL_REGEX, type: 'builtin-url' }],\n markdownMap\n );\n setNodes(editor.children);\n }\n if (type === 'richtext') {\n editor.children = JSON.parse(content);\n setNodes(editor.children);\n }\n if (type === 'html' && interactionRenderers && interactionRenderers.length > 0) {\n try {\n editor.children = convertHtml(content, interactionRenderers);\n setNodes(editor.children);\n setError(false);\n } catch {\n editor.children = [];\n setNodes(editor.children);\n setError(true);\n }\n }\n }, [editor, content, type, interactionRenderers]);\n\n if (type === 'html' && (!interactionRenderers \|\| interactionRenderers.length === 0)) {\n return <HTML ref={ref} content={content} />;\n }\n\n const onCopy = (e: ClipboardEvent) => {\n const selection = document.getSelection();\n e.clipboardData.setData('text/plain', selection?.toString() ?? '');\n e.preventDefault();\n };\n\n return error ? (\n <ErrorState message={t('rte_invalid_html')} onRetry={onRetry} />\n ) : (\n <StyledRichTextViewer ref={ref} {...restProps}>\n <Slate editor={editor} value={[]} onChange={() => {}}>\n <StyledEditorContainer>\n <Editable\n readOnly\n renderElement={nodeRenderer}\n renderLeaf={leafRenderer}\n onCopy={onCopy}\n />\n </StyledEditorContainer>\n </Slate>\n </StyledRichTextViewer>\n );\n }\n);\n\nexport default RichTextViewer;\n"]}

package/lib/components/RichTextEditor/RichTextViewer.types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Token, Tokens } from 'marked';
+import { marked } from 'marked';
 import { ComponentType, FC } from 'react';
 import { ErrorStateProps } from '@pega/cosmos-react-core';
 export interface InteractionRenderers {
@@ -7,12 +7,12 @@ export interface InteractionRenderers {
     component?: ComponentType<any>;
 }
 export declare type TokenMap = {
-    [K in Exclude<Token, Tokens.Def>['type']]: Extract<Token, {
+    [K in Exclude<marked.Token, marked.Tokens.Def>['type']]: Extract<marked.Token, {
         type: K;
     }>;
 };
 export declare type MDMap = {
-    [K in Exclude<Token, Tokens.Def>['type']]?: (token: TokenMap[K]) => FC<{
+    [K in Exclude<marked.Token, marked.Tokens.Def>['type']]?: (token: TokenMap[K]) => FC<{
         token: TokenMap[K];
     }> | undefined;
 };

package/lib/components/RichTextEditor/RichTextViewer.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextViewer.types.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,~~KAAK,EAAE,~~MAAM,EAAE,MAAM,QAAQ,CAAC;~~AACvC~~,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CAChC;AAED,oBAAY,QAAQ,GAAG;~~KAAG~~,CAAC,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC;~~CAAE~~,CAAC;~~AAElG~~,oBAAY,KAAK,GAAG;KACjB,CAAC,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,~~CAC1C~~,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KACf,EAAE,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;KAAE,CAAC,GAAG,SAAS;CAC5C,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;IACvC,oBAAoB,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACtC"}
1	+ {"version":3,"file":"RichTextViewer.types.d.ts","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CAChC;AAED,oBAAY,QAAQ,GAAG;KACpB,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC;CAC5F,CAAC;AAEF,oBAAY,KAAK,GAAG;KACjB,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CACxD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KACf,EAAE,CAAC;QAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;KAAE,CAAC,GAAG,SAAS;CAC5C,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;IACvC,oBAAoB,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACtC"}

package/lib/components/RichTextEditor/RichTextViewer.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextViewer.types.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ~~Token,~~ ~~Tokens~~ } from 'marked';\nimport { ComponentType, FC } from 'react';\n\nimport { ErrorStateProps } from '@pega/cosmos-react-core';\n\nexport interface InteractionRenderers {\n type: string;\n regexPattern: RegExp;\n component?: ComponentType<any>;\n}\n\nexport type TokenMap = { [K in Exclude<Token, Tokens.Def>['type']]: Extract<Token, { type: K }> };\n\nexport type MDMap = {\n [K in Exclude<Token, Tokens.Def>['type']]?: (\n token: TokenMap[K]\n ) => FC<{ token: TokenMap[K] }> \| undefined;\n};\n\nexport interface RichTextViewerProps {\n content: string;\n type: 'markdown' \| 'html' \| 'richtext';\n interactionRenderers?: InteractionRenderers[];\n markdownMap?: MDMap;\n onRetry?: ErrorStateProps['onRetry'];\n}\n"]}
1	+ {"version":3,"file":"RichTextViewer.types.js","sourceRoot":"","sources":["../../../src/components/RichTextEditor/RichTextViewer.types.ts"],"names":[],"mappings":"","sourcesContent":["import { marked } from 'marked';\nimport { ComponentType, FC } from 'react';\n\nimport { ErrorStateProps } from '@pega/cosmos-react-core';\n\nexport interface InteractionRenderers {\n type: string;\n regexPattern: RegExp;\n component?: ComponentType<any>;\n}\n\nexport type TokenMap = {\n [K in Exclude<marked.Token, marked.Tokens.Def>['type']]: Extract<marked.Token, { type: K }>;\n};\n\nexport type MDMap = {\n [K in Exclude<marked.Token, marked.Tokens.Def>['type']]?: (\n token: TokenMap[K]\n ) => FC<{ token: TokenMap[K] }> \| undefined;\n};\n\nexport interface RichTextViewerProps {\n content: string;\n type: 'markdown' \| 'html' \| 'richtext';\n interactionRenderers?: InteractionRenderers[];\n markdownMap?: MDMap;\n onRetry?: ErrorStateProps['onRetry'];\n}\n"]}

package/lib/components/RichTextEditor/Toolbar/AnchorButton.js CHANGED Viewed

@@ -22,7 +22,7 @@ const AnchorButton = ({ osx, ...props }) => {
     const [url, setUrl] = useState('');
     const [urlMatch, setUrlMatch] = useState(true);
     const [anchorMenu, setAnchorMenu] = useState(false);
-    const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_anchor')} (${ctrl}K)`);
+    const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_link')} (${ctrl}K)`);
     const openMenu = (opts = {}) => {
         setAnchorMenu(true);
         setPopoverOpen(true);
@@ -117,7 +117,7 @@ const AnchorButton = ({ osx, ...props }) => {
                         e.preventDefault();
                         openMenu({ focusInput: true });
                     }
-                }, active: isLinkActive(), tooltip: tooltip, label: t('rte_anchor'), ...props, children: _jsx(Icon, { name: 'chain' }, void 0) }, void 0), _jsx(Popover, { show: anchorMenu, target: buttonRef.current, ref: setPopoverEl, placement: 'bottom', children: _jsx(CardContent, { children: _jsx(Form, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onKeyDown: cancelAnchorCreation, onMouseDown: cancelAnchorCreation, type: 'button', children: "Cancel" }, void 0), _jsx(Button, { disabled: !url || !urlMatch, name: 'apply', type: 'submit', variant: 'primary', children: "Apply" }, void 0)] }, void 0), onSubmit: (e) => {
+                }, active: isLinkActive(), tooltip: tooltip, label: t('rte_link'), ...props, children: _jsx(Icon, { name: 'chain' }) }), _jsx(Popover, { show: anchorMenu, target: buttonRef.current, ref: setPopoverEl, placement: 'bottom', children: _jsx(CardContent, { children: _jsx(Form, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onKeyDown: cancelAnchorCreation, onMouseDown: cancelAnchorCreation, type: 'button', children: "Cancel" }), _jsx(Button, { disabled: !url || !urlMatch, name: 'apply', type: 'submit', variant: 'primary', children: "Apply" })] }), onSubmit: (e) => {
                             e.preventDefault();
                             createLink();
                         }, children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(Input, { label: 'Text', value: selectedText, onClick: preventDef, onChange: (e) => {
@@ -128,7 +128,7 @@ const AnchorButton = ({ osx, ...props }) => {
                                                 resetMenu({ focusEditor: false });
                                             }
                                         }, 0);
-                                    }, ref: textInputRef }, void 0), _jsx(Input, { label: 'URL', value: url, onClick: preventDef, onChange: (e) => {
+                                    }, ref: textInputRef }), _jsx(Input, { label: 'URL', value: url, onClick: preventDef, onChange: (e) => {
                                         const urlInput = e.target.value;
                                         setUrl(urlInput);
                                         if (!urlMatch) {
@@ -150,7 +150,7 @@ const AnchorButton = ({ osx, ...props }) => {
                                         catch {
                                             setUrlMatch(false);
                                         }
-                                    }, info: !urlMatch ? 'Not a valid URL' : '', status: !urlMatch ? 'error' : undefined, ref: urlInputRef }, void 0)] }, void 0) }, void 0) }, void 0) }, void 0)] }, void 0));
+                                    }, info: !urlMatch ? 'Not a valid URL' : '', status: !urlMatch ? 'error' : undefined, ref: urlInputRef })] }) }) }) })] }));
 };
 export default AnchorButton;
 //# sourceMappingURL=AnchorButton.js.map

package/lib/components/RichTextEditor/Toolbar/AnchorButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnchorButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n useRef,\n useState,\n ChangeEvent,\n useEffect,\n MouseEvent,\n KeyboardEvent as ReactKeyboardEvent,\n FormEvent\n} from 'react';\nimport { Text, Editor, Range, Transforms } from 'slate';\nimport { ReactEditor, useSlate } from 'slate-react';\n\nimport {\n Button,\n CardContent,\n Grid,\n Icon,\n registerIcon,\n Input,\n Popover,\n useOuterEvent,\n useElement,\n ForwardProps,\n Form,\n useI18n\n} from '@pega/cosmos-react-core';\nimport * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';\n\nimport { useRTEContext } from '../RichTextEditor.context';\nimport EditorCommands from '../utils/EditorCommands';\n\nimport ToolbarButton from './ToolbarButton';\nimport { getKeyCommand } from './utils';\n\nregisterIcon(chainIcon);\n\ninterface AnchorButtonProps {\n osx: boolean;\n}\n\nconst AnchorButton: FC<AnchorButtonProps & ForwardProps> = ({ osx, ...props }) => {\n const t = useI18n();\n const { setPopoverOpen, onEditorFocus } = useRTEContext();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const textInputRef = useRef<HTMLInputElement>(null);\n const urlInputRef = useRef<HTMLInputElement>(null);\n const editor = useSlate();\n const [popoverEl, setPopoverEl] = useElement();\n const [selectedText, setSelectedText] = useState('');\n const [selection, setSelection] = useState<Range \| null>(null);\n const [url, setUrl] = useState('');\n const [urlMatch, setUrlMatch] = useState(true);\n const [anchorMenu, setAnchorMenu] = useState(false);\n const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_anchor')} (${ctrl}K)`);\n\n const openMenu = (opts: { focusInput?: boolean } = {}) => {\n setAnchorMenu(true);\n setPopoverOpen(true);\n if (opts.focusInput) {\n setTimeout(() => {\n textInputRef.current?.focus();\n }, 0);\n }\n };\n\n const resetMenu = (opts: { focusEditor?: boolean } = { focusEditor: true }) => {\n setSelection(null);\n setSelectedText('');\n setUrl('');\n setUrlMatch(true);\n setAnchorMenu(false);\n setPopoverOpen(false);\n if (opts.focusEditor) {\n setTimeout(() => {\n onEditorFocus({\n runAfterFocus: () => {\n if (selection) Transforms.setSelection(editor, selection);\n }\n });\n }, 0);\n }\n };\n\n useOuterEvent('mousedown', [popoverEl], () => {\n if (anchorMenu) {\n resetMenu();\n }\n });\n\n const createLink = () => {\n if (url) {\n EditorCommands.createLink(\n editor,\n selectedText,\n new URL(/^[a-z][a-z0-9.+-]:/i.test(url) ? url : `http:${url}`).href,\n selection\n );\n resetMenu();\n }\n };\n\n useEffect(() => {\n if (editor.selection) {\n setSelectedText(Editor.string(editor, editor.selection));\n setSelection(editor.selection);\n const [match] = Editor.nodes<Text>(editor, {\n match: n => Text.isText(n) && !!n.href,\n at: editor.selection\n });\n if (match) {\n setUrl(match[0].href \|\| '');\n setSelectedText(match[0].text);\n } else {\n setUrl('');\n }\n }\n }, [anchorMenu]);\n\n const preventDef = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const isLinkActive = () => {\n const [link] = Editor.nodes<Text>(editor, { match: n => Text.isText(n) && !!n.href });\n return !!link;\n };\n\n const cancelAnchorCreation = (event?: KeyboardEvent \| MouseEvent) => {\n event?.preventDefault();\n if (\n (event?.type === 'keydown' && (event as KeyboardEvent)?.key === 'Enter') \|\|\n event?.type === 'mousedown' \|\|\n !event\n ) {\n resetMenu({ focusEditor: false });\n buttonRef.current?.focus();\n }\n };\n\n useEffect(() => {\n const keyCommandListener = (e: KeyboardEvent) => {\n if (e.key === 'k' && (e.metaKey \|\| e.ctrlKey) && ReactEditor.isFocused(editor)) {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n if (e.key === 'Escape') {\n cancelAnchorCreation();\n }\n };\n\n document.addEventListener('keydown', keyCommandListener);\n\n return () => {\n document.removeEventListener('keydown', keyCommandListener);\n };\n }, []);\n\n return (\n <>\n <ToolbarButton\n ref={buttonRef}\n onMouseDown={() => {\n openMenu();\n }}\n onKeyDown={(e: ReactKeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n }}\n active={isLinkActive()}\n tooltip={tooltip}\n label={t('rte_anchor')}\n {...props}\n >\n <Icon name='chain' />\n </ToolbarButton>\n <Popover show={anchorMenu} target={buttonRef.current} ref={setPopoverEl} placement='bottom'>\n <CardContent>\n <Form\n actions={\n <>\n <Button\n variant='secondary'\n onKeyDown={cancelAnchorCreation}\n onMouseDown={cancelAnchorCreation}\n type='button'\n >\n Cancel\n </Button>\n <Button disabled={!url \|\| !urlMatch} name='apply' type='submit' variant='primary'>\n Apply\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n createLink();\n }}\n >\n <Grid container={{ rowGap: 2 }}>\n <Input\n label='Text'\n value={selectedText}\n onClick={preventDef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setSelectedText(e.target.value);\n }}\n onBlur={() => {\n setTimeout(() => {\n if (document.activeElement !== urlInputRef.current) {\n resetMenu({ focusEditor: false });\n }\n }, 0);\n }}\n ref={textInputRef}\n />\n <Input\n label='URL'\n value={url}\n onClick={preventDef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n const urlInput = e.target.value;\n setUrl(urlInput);\n\n if (!urlMatch) {\n try {\n // eslint-disable-next-line no-new\n new URL(\n /^[a-z][a-z0-9+.-]:/i.test(urlInput) ? urlInput : `http:${urlInput}`\n );\n setUrlMatch(true);\n } catch {\n setUrlMatch(false);\n }\n }\n }}\n onBlur={() => {\n try {\n // eslint-disable-next-line no-new\n new URL(/^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `http:${url}`);\n setUrlMatch(true);\n } catch {\n setUrlMatch(false);\n }\n }}\n info={!urlMatch ? 'Not a valid URL' : ''}\n status={!urlMatch ? 'error' : undefined}\n ref={urlInputRef}\n />\n </Grid>\n </Form>\n </CardContent>\n </Popover>\n </>\n );\n};\n\nexport default AnchorButton;\n"]}
1	+ {"version":3,"file":"AnchorButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n useRef,\n useState,\n ChangeEvent,\n useEffect,\n MouseEvent,\n KeyboardEvent as ReactKeyboardEvent,\n FormEvent\n} from 'react';\nimport { Text, Editor, Range, Transforms } from 'slate';\nimport { ReactEditor, useSlate } from 'slate-react';\n\nimport {\n Button,\n CardContent,\n Grid,\n Icon,\n registerIcon,\n Input,\n Popover,\n useOuterEvent,\n useElement,\n ForwardProps,\n Form,\n useI18n\n} from '@pega/cosmos-react-core';\nimport * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';\n\nimport { useRTEContext } from '../RichTextEditor.context';\nimport EditorCommands from '../utils/EditorCommands';\n\nimport ToolbarButton from './ToolbarButton';\nimport { getKeyCommand } from './utils';\n\nregisterIcon(chainIcon);\n\ninterface AnchorButtonProps {\n osx: boolean;\n}\n\nconst AnchorButton: FC<AnchorButtonProps & ForwardProps> = ({ osx, ...props }) => {\n const t = useI18n();\n const { setPopoverOpen, onEditorFocus } = useRTEContext();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const textInputRef = useRef<HTMLInputElement>(null);\n const urlInputRef = useRef<HTMLInputElement>(null);\n const editor = useSlate();\n const [popoverEl, setPopoverEl] = useElement();\n const [selectedText, setSelectedText] = useState('');\n const [selection, setSelection] = useState<Range \| null>(null);\n const [url, setUrl] = useState('');\n const [urlMatch, setUrlMatch] = useState(true);\n const [anchorMenu, setAnchorMenu] = useState(false);\n const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_link')} (${ctrl}K)`);\n\n const openMenu = (opts: { focusInput?: boolean } = {}) => {\n setAnchorMenu(true);\n setPopoverOpen(true);\n if (opts.focusInput) {\n setTimeout(() => {\n textInputRef.current?.focus();\n }, 0);\n }\n };\n\n const resetMenu = (opts: { focusEditor?: boolean } = { focusEditor: true }) => {\n setSelection(null);\n setSelectedText('');\n setUrl('');\n setUrlMatch(true);\n setAnchorMenu(false);\n setPopoverOpen(false);\n if (opts.focusEditor) {\n setTimeout(() => {\n onEditorFocus({\n runAfterFocus: () => {\n if (selection) Transforms.setSelection(editor, selection);\n }\n });\n }, 0);\n }\n };\n\n useOuterEvent('mousedown', [popoverEl], () => {\n if (anchorMenu) {\n resetMenu();\n }\n });\n\n const createLink = () => {\n if (url) {\n EditorCommands.createLink(\n editor,\n selectedText,\n new URL(/^[a-z][a-z0-9.+-]:/i.test(url) ? url : `http:${url}`).href,\n selection\n );\n resetMenu();\n }\n };\n\n useEffect(() => {\n if (editor.selection) {\n setSelectedText(Editor.string(editor, editor.selection));\n setSelection(editor.selection);\n const [match] = Editor.nodes<Text>(editor, {\n match: n => Text.isText(n) && !!n.href,\n at: editor.selection\n });\n if (match) {\n setUrl(match[0].href \|\| '');\n setSelectedText(match[0].text);\n } else {\n setUrl('');\n }\n }\n }, [anchorMenu]);\n\n const preventDef = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const isLinkActive = () => {\n const [link] = Editor.nodes<Text>(editor, { match: n => Text.isText(n) && !!n.href });\n return !!link;\n };\n\n const cancelAnchorCreation = (event?: KeyboardEvent \| MouseEvent) => {\n event?.preventDefault();\n if (\n (event?.type === 'keydown' && (event as KeyboardEvent)?.key === 'Enter') \|\|\n event?.type === 'mousedown' \|\|\n !event\n ) {\n resetMenu({ focusEditor: false });\n buttonRef.current?.focus();\n }\n };\n\n useEffect(() => {\n const keyCommandListener = (e: KeyboardEvent) => {\n if (e.key === 'k' && (e.metaKey \|\| e.ctrlKey) && ReactEditor.isFocused(editor)) {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n if (e.key === 'Escape') {\n cancelAnchorCreation();\n }\n };\n\n document.addEventListener('keydown', keyCommandListener);\n\n return () => {\n document.removeEventListener('keydown', keyCommandListener);\n };\n }, []);\n\n return (\n <>\n <ToolbarButton\n ref={buttonRef}\n onMouseDown={() => {\n openMenu();\n }}\n onKeyDown={(e: ReactKeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n }}\n active={isLinkActive()}\n tooltip={tooltip}\n label={t('rte_link')}\n {...props}\n >\n <Icon name='chain' />\n </ToolbarButton>\n <Popover show={anchorMenu} target={buttonRef.current} ref={setPopoverEl} placement='bottom'>\n <CardContent>\n <Form\n actions={\n <>\n <Button\n variant='secondary'\n onKeyDown={cancelAnchorCreation}\n onMouseDown={cancelAnchorCreation}\n type='button'\n >\n Cancel\n </Button>\n <Button disabled={!url \|\| !urlMatch} name='apply' type='submit' variant='primary'>\n Apply\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n createLink();\n }}\n >\n <Grid container={{ rowGap: 2 }}>\n <Input\n label='Text'\n value={selectedText}\n onClick={preventDef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setSelectedText(e.target.value);\n }}\n onBlur={() => {\n setTimeout(() => {\n if (document.activeElement !== urlInputRef.current) {\n resetMenu({ focusEditor: false });\n }\n }, 0);\n }}\n ref={textInputRef}\n />\n <Input\n label='URL'\n value={url}\n onClick={preventDef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n const urlInput = e.target.value;\n setUrl(urlInput);\n\n if (!urlMatch) {\n try {\n // eslint-disable-next-line no-new\n new URL(\n /^[a-z][a-z0-9+.-]:/i.test(urlInput) ? urlInput : `http:${urlInput}`\n );\n setUrlMatch(true);\n } catch {\n setUrlMatch(false);\n }\n }\n }}\n onBlur={() => {\n try {\n // eslint-disable-next-line no-new\n new URL(/^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `http:${url}`);\n setUrlMatch(true);\n } catch {\n setUrlMatch(false);\n }\n }}\n info={!urlMatch ? 'Not a valid URL' : ''}\n status={!urlMatch ? 'error' : undefined}\n ref={urlInputRef}\n />\n </Grid>\n </Form>\n </CardContent>\n </Popover>\n </>\n );\n};\n\nexport default AnchorButton;\n"]}

package/lib/components/RichTextEditor/Toolbar/ImageButton.js CHANGED Viewed

@@ -22,9 +22,9 @@ const ImageButton = ({ ...props }) => {
             }
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(StyledImageInput, { type: 'file', accept: 'image/*', ref: fileInputRef, onChange: onImageInputChange }, void 0), _jsx(ToolbarButton, { onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(StyledImageInput, { type: 'file', accept: 'image/*', ref: fileInputRef, onChange: onImageInputChange }), _jsx(ToolbarButton, { onClick: () => {
                     fileInputRef?.current?.click();
-                }, tooltip: t('rte_image'), label: t('rte_image'), ...props, children: _jsx(Icon, { name: 'picture' }, void 0) }, void 0)] }, void 0));
+                }, tooltip: t('rte_image'), label: t('rte_image'), ...props, children: _jsx(Icon, { name: 'picture' }) })] }));
 };
 export default ImageButton;
 //# sourceMappingURL=ImageButton.js.map

package/lib/components/RichTextEditor/Toolbar/ImageButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/ImageButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAE9F,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,YAAY,CAAC,WAAW,CAAC,CAAC;AAE1B,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAA;IACjC,YAAY;CACf,CAAC;AAEF,MAAM,WAAW,GAAqB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;IACrC,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEpD,MAAM,kBAAkB,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC9D,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE;YAClB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YAE5B,IAAI,YAAY,CAAC,OAAO,EAAE;gBACxB,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;aACjC;SACF;IACH,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,gBAAgB,IACf,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,kBAAkB,~~WAC5B~~,EACF,KAAC,aAAa,IACZ,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;gBACjC,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,EACvB,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,KACjB,KAAK,YAET,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,~~WAAG~~,~~WACT~~,~~YACf~~,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { ChangeEvent, FC, useRef } from 'react';\nimport styled from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { Icon, registerIcon, ForwardProps, useI18n } from '@pega/cosmos-react-core';\nimport * as pictureIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/picture.icon';\n\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport ToolbarButton from './ToolbarButton';\n\nregisterIcon(pictureIcon);\n\nconst StyledImageInput = styled.input`\n ${hideVisually}\n`;\n\nconst ImageButton: FC<ForwardProps> = ({ ...props }) => {\n const t = useI18n();\n const { addImage } = useRTEContext();\n const fileInputRef = useRef<HTMLInputElement>(null);\n\n const onImageInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.files) {\n addImage(e.target.files[0]);\n\n if (fileInputRef.current) {\n fileInputRef.current.value = '';\n }\n }\n };\n\n return (\n <>\n <StyledImageInput\n type='file'\n accept='image/*'\n ref={fileInputRef}\n onChange={onImageInputChange}\n />\n <ToolbarButton\n onClick={() => {\n fileInputRef?.current?.click();\n }}\n tooltip={t('rte_image')}\n label={t('rte_image')}\n {...props}\n >\n <Icon name='picture' />\n </ToolbarButton>\n </>\n );\n};\n\nexport default ImageButton;\n"]}
1	+ {"version":3,"file":"ImageButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/ImageButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,MAAM,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAE9F,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,YAAY,CAAC,WAAW,CAAC,CAAC;AAE1B,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAA;IACjC,YAAY;CACf,CAAC;AAEF,MAAM,WAAW,GAAqB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;IACrC,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEpD,MAAM,kBAAkB,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC9D,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE;YAClB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YAE5B,IAAI,YAAY,CAAC,OAAO,EAAE;gBACxB,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;aACjC;SACF;IACH,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,gBAAgB,IACf,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,kBAAkB,GAC5B,EACF,KAAC,aAAa,IACZ,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;gBACjC,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,EACvB,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,KACjB,KAAK,YAET,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,GAAG,GACT,IACf,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { ChangeEvent, FC, useRef } from 'react';\nimport styled from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { Icon, registerIcon, ForwardProps, useI18n } from '@pega/cosmos-react-core';\nimport * as pictureIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/picture.icon';\n\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport ToolbarButton from './ToolbarButton';\n\nregisterIcon(pictureIcon);\n\nconst StyledImageInput = styled.input`\n ${hideVisually}\n`;\n\nconst ImageButton: FC<ForwardProps> = ({ ...props }) => {\n const t = useI18n();\n const { addImage } = useRTEContext();\n const fileInputRef = useRef<HTMLInputElement>(null);\n\n const onImageInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.files) {\n addImage(e.target.files[0]);\n\n if (fileInputRef.current) {\n fileInputRef.current.value = '';\n }\n }\n };\n\n return (\n <>\n <StyledImageInput\n type='file'\n accept='image/*'\n ref={fileInputRef}\n onChange={onImageInputChange}\n />\n <ToolbarButton\n onClick={() => {\n fileInputRef?.current?.click();\n }}\n tooltip={t('rte_image')}\n label={t('rte_image')}\n {...props}\n >\n <Icon name='picture' />\n </ToolbarButton>\n </>\n );\n};\n\nexport default ImageButton;\n"]}

package/lib/components/RichTextEditor/Toolbar/IndentButton.js CHANGED Viewed

@@ -22,7 +22,7 @@ const IndentButton = ({ type, osx }) => {
         if (!ReactEditor.isFocused(editor))
             ReactEditor.focus(editor);
     };
-    return (_jsx(ToolbarButton, { onMouseDown: onMouseDown, tooltip: tooltip, label: type, children: _jsx(Icon, { name: type }, void 0) }, void 0));
+    return (_jsx(ToolbarButton, { onMouseDown: onMouseDown, tooltip: tooltip, label: type, children: _jsx(Icon, { name: type }) }));
 };
 export default IndentButton;
 //# sourceMappingURL=IndentButton.js.map

package/lib/components/RichTextEditor/Toolbar/IndentButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IndentButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/IndentButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,KAAK,UAAU,MAAM,+DAA+D,CAAC;AAC5F,OAAO,KAAK,YAAY,MAAM,iEAAiE,CAAC;AAEhG,OAAO,cAAc,MAAM,yBAAyB,CAAC;AAErD,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;AAOvC,MAAM,YAAY,GAA0B,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE;IAC5D,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC;IAC1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CACpD,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAC9F,CAAC;IAEF,MAAM,WAAW,GAAsC,CAAC,CAAC,EAAE;QACzD,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,cAAc,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;SAC/B;aAAM;YACL,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;SACjC;QACD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC;YAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,YACpE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,~~WAAI~~,~~WACN~~,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FC } from 'react';\nimport { ReactEditor, useSlate } from 'slate-react';\n\nimport { Icon, registerIcon, useI18n } from '@pega/cosmos-react-core';\nimport * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';\nimport * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';\n\nimport EditorCommands from '../utils/EditorCommands';\n\nimport ToolbarButton, { ToolBarButtonProps } from './ToolbarButton';\nimport { getKeyCommand } from './utils';\n\nregisterIcon(indentIcon, unindentIcon);\n\ninterface IndentButtonProps {\n type: 'indent' \| 'unindent';\n osx: boolean;\n}\n\nconst IndentButton: FC<IndentButtonProps> = ({ type, osx }) => {\n const editor = useSlate();\n const t = useI18n();\n const tooltip = getKeyCommand(osx, ({ shift, alt }) =>\n type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`\n );\n\n const onMouseDown: ToolBarButtonProps['onMouseDown'] = e => {\n e.preventDefault();\n if (type === 'indent') {\n EditorCommands.indent(editor);\n } else {\n EditorCommands.unindent(editor);\n }\n if (!ReactEditor.isFocused(editor)) ReactEditor.focus(editor);\n };\n\n return (\n <ToolbarButton onMouseDown={onMouseDown} tooltip={tooltip} label={type}>\n <Icon name={type} />\n </ToolbarButton>\n );\n};\n\nexport default IndentButton;\n"]}
1	+ {"version":3,"file":"IndentButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/IndentButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,KAAK,UAAU,MAAM,+DAA+D,CAAC;AAC5F,OAAO,KAAK,YAAY,MAAM,iEAAiE,CAAC;AAEhG,OAAO,cAAc,MAAM,yBAAyB,CAAC;AAErD,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;AAOvC,MAAM,YAAY,GAA0B,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE;IAC5D,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC;IAC1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CACpD,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAC9F,CAAC;IAEF,MAAM,WAAW,GAAsC,CAAC,CAAC,EAAE;QACzD,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,cAAc,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;SAC/B;aAAM;YACL,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;SACjC;QACD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC;YAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,YACpE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,GACN,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FC } from 'react';\nimport { ReactEditor, useSlate } from 'slate-react';\n\nimport { Icon, registerIcon, useI18n } from '@pega/cosmos-react-core';\nimport * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';\nimport * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';\n\nimport EditorCommands from '../utils/EditorCommands';\n\nimport ToolbarButton, { ToolBarButtonProps } from './ToolbarButton';\nimport { getKeyCommand } from './utils';\n\nregisterIcon(indentIcon, unindentIcon);\n\ninterface IndentButtonProps {\n type: 'indent' \| 'unindent';\n osx: boolean;\n}\n\nconst IndentButton: FC<IndentButtonProps> = ({ type, osx }) => {\n const editor = useSlate();\n const t = useI18n();\n const tooltip = getKeyCommand(osx, ({ shift, alt }) =>\n type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`\n );\n\n const onMouseDown: ToolBarButtonProps['onMouseDown'] = e => {\n e.preventDefault();\n if (type === 'indent') {\n EditorCommands.indent(editor);\n } else {\n EditorCommands.unindent(editor);\n }\n if (!ReactEditor.isFocused(editor)) ReactEditor.focus(editor);\n };\n\n return (\n <ToolbarButton onMouseDown={onMouseDown} tooltip={tooltip} label={type}>\n <Icon name={type} />\n </ToolbarButton>\n );\n};\n\nexport default IndentButton;\n"]}

package/lib/components/RichTextEditor/Toolbar/TableButton.js CHANGED Viewed

@@ -14,7 +14,7 @@ const TableButton = props => {
     return (_jsx(ToolbarButton, { type: 'button', onMouseDown: e => {
             e.preventDefault();
             createNewTable();
-        }, tooltip: t('rte_table'), label: t('rte_table'), ...props, children: _jsx(Icon, { name: 'table' }, void 0) }, void 0));
+        }, tooltip: t('rte_table'), label: t('rte_table'), ...props, children: _jsx(Icon, { name: 'table' }) }));
 };
 export default TableButton;
 //# sourceMappingURL=TableButton.js.map

package/lib/components/RichTextEditor/Toolbar/TableButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TableButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,cAAc,MAAM,yBAAyB,CAAC;AAErD,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,YAAY,CAAC,SAAS,CAAC,CAAC;AAExB,MAAM,WAAW,GAAqB,KAAK,CAAC,EAAE;IAC5C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC;IAE1B,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,cAAc,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,CAAC,CAAC,EAAE;YACf,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,cAAc,EAAE,CAAC;QACnB,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,EACvB,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,KACjB,KAAK,YAET,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,~~WAAG~~,~~WACP~~,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useSlate } from 'slate-react';\n\nimport { Icon, registerIcon, ForwardProps, useI18n } from '@pega/cosmos-react-core';\nimport * as tableIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/table.icon';\n\nimport EditorCommands from '../utils/EditorCommands';\n\nimport ToolbarButton from './ToolbarButton';\n\nregisterIcon(tableIcon);\n\nconst TableButton: FC<ForwardProps> = props => {\n const t = useI18n();\n const editor = useSlate();\n\n const createNewTable = () => {\n EditorCommands.appendTable(editor);\n };\n\n return (\n <ToolbarButton\n type='button'\n onMouseDown={e => {\n e.preventDefault();\n createNewTable();\n }}\n tooltip={t('rte_table')}\n label={t('rte_table')}\n {...props}\n >\n <Icon name='table' />\n </ToolbarButton>\n );\n};\n\nexport default TableButton;\n"]}
1	+ {"version":3,"file":"TableButton.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TableButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,cAAc,MAAM,yBAAyB,CAAC;AAErD,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,YAAY,CAAC,SAAS,CAAC,CAAC;AAExB,MAAM,WAAW,GAAqB,KAAK,CAAC,EAAE;IAC5C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC;IAE1B,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,cAAc,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,CAAC,CAAC,EAAE;YACf,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,cAAc,EAAE,CAAC;QACnB,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,EACvB,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,KACjB,KAAK,YAET,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACP,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useSlate } from 'slate-react';\n\nimport { Icon, registerIcon, ForwardProps, useI18n } from '@pega/cosmos-react-core';\nimport * as tableIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/table.icon';\n\nimport EditorCommands from '../utils/EditorCommands';\n\nimport ToolbarButton from './ToolbarButton';\n\nregisterIcon(tableIcon);\n\nconst TableButton: FC<ForwardProps> = props => {\n const t = useI18n();\n const editor = useSlate();\n\n const createNewTable = () => {\n EditorCommands.appendTable(editor);\n };\n\n return (\n <ToolbarButton\n type='button'\n onMouseDown={e => {\n e.preventDefault();\n createNewTable();\n }}\n tooltip={t('rte_table')}\n label={t('rte_table')}\n {...props}\n >\n <Icon name='table' />\n </ToolbarButton>\n );\n};\n\nexport default TableButton;\n"]}

package/lib/components/RichTextEditor/Toolbar/TextSelect.js CHANGED Viewed

@@ -108,12 +108,12 @@ const TextSelect = ({ osx }) => {
                 }, onFocus: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                }, onClick: (e) => e.stopPropagation(), "aria-expanded": open, "aria-label": `Text formatting toolbar. ${t('rte_heading_style')}. ${textMapping[EditorCommands.getActiveBlockType(editor)]} selected`, "aria-haspopup": true, children: [_jsx("span", { children: textMapping[EditorCommands.getActiveBlockType(editor)] }, void 0), _jsx(Icon, { name: 'arrow-micro-down' }, void 0)] }, void 0), buttonRef.current && (_jsx(Tooltip, { target: buttonRef.current, showDelay: 'none', hideDelay: 'none', children: t('rte_heading_style') }, void 0)), _jsx(Popover, { show: open, as: StyledSelectMenu, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, children: _jsx(Menu, { items: textFormats.map(({ text, type, subText }) => ({
+                }, onClick: (e) => e.stopPropagation(), "aria-expanded": open, "aria-label": `Text formatting toolbar. ${t('rte_heading_style')}. ${textMapping[EditorCommands.getActiveBlockType(editor)]} selected`, "aria-haspopup": true, children: [_jsx("span", { children: textMapping[EditorCommands.getActiveBlockType(editor)] }), _jsx(Icon, { name: 'arrow-micro-down' })] }), buttonRef.current && (_jsx(Tooltip, { target: buttonRef.current, showDelay: 'none', hideDelay: 'none', children: t('rte_heading_style') })), _jsx(Popover, { show: open, as: StyledSelectMenu, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, children: _jsx(Menu, { items: textFormats.map(({ text, type, subText }) => ({
                         id: type,
                         primary: text,
                         secondary: [subText],
                         selected: type === EditorCommands.getActiveBlockType(editor)
-                    })), focusControlEl: buttonRef.current || undefined, focusElOnClose: false, mode: 'single-select', ref: menuRef, onItemClick: onTextSelect }, void 0) }, void 0)] }, void 0));
+                    })), focusControlEl: buttonRef.current || undefined, focusElOnClose: false, mode: 'single-select', ref: menuRef, onItemClick: onTextSelect }) })] }));
 };
 export default TextSelect;
 //# sourceMappingURL=TextSelect.js.map

package/lib/components/RichTextEditor/Toolbar/TextSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextSelect.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useRef, useState, MouseEvent, useCallback, KeyboardEvent, FocusEvent } from 'react';\nimport { Element, Transforms } from 'slate';\nimport { ReactEditor, useSlate } from 'slate-react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Popover,\n Icon,\n registerIcon,\n useOuterEvent,\n Menu,\n Button,\n defaultThemeProp,\n useI18n,\n Tooltip,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport EditorCommands from '../utils/EditorCommands';\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport { getKeyCommand } from './utils';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledTextSelect = styled(Button)(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n color: ${theme.base.palette['foreground-color']};\n display: inline-flex;\n align-items: center;\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n height: calc(4 * ${theme.base.spacing});\n padding: calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSizes.xxs};\n\n span {\n white-space: nowrap;\n }\n\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledTextSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div`\n min-width: 10rem;\n`;\n\nconst textMapping: { [key: string]: string } = {\n paragraph: 'Normal',\n 'heading-1': 'Heading 1',\n 'heading-2': 'Heading 2',\n 'heading-3': 'Heading 3',\n 'heading-4': 'Heading 4',\n '': 'Normal'\n};\n\nconst getTextCommand = (num: number, osx: boolean) => {\n return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nconst getTextFormats = (\n osx: boolean\n): { text: string; subText: string; type: Element['type'] }[] => {\n return [\n { text: 'Normal', subText: getTextCommand(0, osx), type: 'paragraph' },\n { text: 'Heading 1', subText: getTextCommand(1, osx), type: 'heading-1' },\n { text: 'Heading 2', subText: getTextCommand(2, osx), type: 'heading-2' },\n { text: 'Heading 3', subText: getTextCommand(3, osx), type: 'heading-3' },\n { text: 'Heading 4', subText: getTextCommand(4, osx), type: 'heading-4' }\n ];\n};\n\nconst TextSelect: FC<{ osx: boolean }> = ({ osx }) => {\n const t = useI18n();\n const { disabled } = useRTEContext();\n const [open, setOpen] = useState(false);\n const selecting = useRef(false);\n const openedByClick = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const popoverRef = useRef(null);\n const menuRef = useRef(null);\n const editor = useSlate();\n\n const textFormats = useCallback(() => {\n return getTextFormats(osx);\n }, [osx])();\n\n useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {\n setOpen(false);\n });\n\n const onTextSelect = (type: Element['type'], e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n EditorCommands.setBlock(type, editor);\n if (!openedByClick.current) {\n buttonRef.current?.focus();\n }\n setOpen(false);\n selecting.current = true;\n setTimeout(() => {\n if (!ReactEditor.isFocused(editor) && openedByClick.current) {\n const selection = editor.selection;\n ReactEditor.focus(editor);\n if (selection) Transforms.select(editor, selection);\n }\n }, 0);\n };\n\n return (\n <>\n <StyledTextSelect\n variant='simple'\n type='button'\n disabled={disabled}\n icon={false}\n ref={buttonRef}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n openedByClick.current = true;\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter' && !selecting.current) {\n e.preventDefault();\n setOpen(true);\n openedByClick.current = false;\n } else if (e.key === 'Enter') {\n e.preventDefault();\n selecting.current = false;\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowRight') {\n setOpen(false);\n }\n }}\n onFocus={(e: FocusEvent) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n aria-expanded={open}\n aria-label={`Text formatting toolbar. ${t('rte_heading_style')}. ${\n textMapping[EditorCommands.getActiveBlockType(editor)]\n } selected`}\n aria-haspopup\n >\n <span>{textMapping[EditorCommands.getActiveBlockType(editor)]}</span>\n <Icon name='arrow-micro-down' />\n </StyledTextSelect>\n {buttonRef.current && (\n <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n {t('rte_heading_style')}\n </Tooltip>\n )}\n <Popover\n show={open}\n as={StyledSelectMenu}\n target={buttonRef.current}\n placement='bottom-start'\n ref={popoverRef}\n >\n <Menu\n items={textFormats.map(({ text, type, subText }) => ({\n id: type,\n primary: text,\n secondary: [subText],\n selected: type === EditorCommands.getActiveBlockType(editor)\n }))}\n focusControlEl={buttonRef.current \|\| undefined}\n focusElOnClose={false}\n mode='single-select'\n ref={menuRef}\n onItemClick={onTextSelect as (id: string, e: MouseEvent) => void}\n />\n </Popover>\n </>\n );\n};\n\nexport default TextSelect;\n"]}
1	+ {"version":3,"file":"TextSelect.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useRef, useState, MouseEvent, useCallback, KeyboardEvent, FocusEvent } from 'react';\nimport { Element, Transforms } from 'slate';\nimport { ReactEditor, useSlate } from 'slate-react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Popover,\n Icon,\n registerIcon,\n useOuterEvent,\n Menu,\n Button,\n defaultThemeProp,\n useI18n,\n Tooltip,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport EditorCommands from '../utils/EditorCommands';\nimport { useRTEContext } from '../RichTextEditor.context';\n\nimport { getKeyCommand } from './utils';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledTextSelect = styled(Button)(({ theme }) => {\n const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n color: ${theme.base.palette['foreground-color']};\n display: inline-flex;\n align-items: center;\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n height: calc(4 * ${theme.base.spacing});\n padding: calc(0.5 * ${theme.base.spacing});\n font-size: ${fontSizes.xxs};\n\n span {\n white-space: nowrap;\n }\n\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledTextSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div`\n min-width: 10rem;\n`;\n\nconst textMapping: { [key: string]: string } = {\n paragraph: 'Normal',\n 'heading-1': 'Heading 1',\n 'heading-2': 'Heading 2',\n 'heading-3': 'Heading 3',\n 'heading-4': 'Heading 4',\n '': 'Normal'\n};\n\nconst getTextCommand = (num: number, osx: boolean) => {\n return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nconst getTextFormats = (\n osx: boolean\n): { text: string; subText: string; type: Element['type'] }[] => {\n return [\n { text: 'Normal', subText: getTextCommand(0, osx), type: 'paragraph' },\n { text: 'Heading 1', subText: getTextCommand(1, osx), type: 'heading-1' },\n { text: 'Heading 2', subText: getTextCommand(2, osx), type: 'heading-2' },\n { text: 'Heading 3', subText: getTextCommand(3, osx), type: 'heading-3' },\n { text: 'Heading 4', subText: getTextCommand(4, osx), type: 'heading-4' }\n ];\n};\n\nconst TextSelect: FC<{ osx: boolean }> = ({ osx }) => {\n const t = useI18n();\n const { disabled } = useRTEContext();\n const [open, setOpen] = useState(false);\n const selecting = useRef(false);\n const openedByClick = useRef(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const popoverRef = useRef(null);\n const menuRef = useRef(null);\n const editor = useSlate();\n\n const textFormats = useCallback(() => {\n return getTextFormats(osx);\n }, [osx])();\n\n useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {\n setOpen(false);\n });\n\n const onTextSelect = (type: Element['type'], e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n EditorCommands.setBlock(type, editor);\n if (!openedByClick.current) {\n buttonRef.current?.focus();\n }\n setOpen(false);\n selecting.current = true;\n setTimeout(() => {\n if (!ReactEditor.isFocused(editor) && openedByClick.current) {\n const selection = editor.selection;\n ReactEditor.focus(editor);\n if (selection) Transforms.select(editor, selection);\n }\n }, 0);\n };\n\n return (\n <>\n <StyledTextSelect\n variant='simple'\n type='button'\n disabled={disabled}\n icon={false}\n ref={buttonRef}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n openedByClick.current = true;\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter' && !selecting.current) {\n e.preventDefault();\n setOpen(true);\n openedByClick.current = false;\n } else if (e.key === 'Enter') {\n e.preventDefault();\n selecting.current = false;\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowRight') {\n setOpen(false);\n }\n }}\n onFocus={(e: FocusEvent) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n aria-expanded={open}\n aria-label={`Text formatting toolbar. ${t('rte_heading_style')}. ${\n textMapping[EditorCommands.getActiveBlockType(editor)]\n } selected`}\n aria-haspopup\n >\n <span>{textMapping[EditorCommands.getActiveBlockType(editor)]}</span>\n <Icon name='arrow-micro-down' />\n </StyledTextSelect>\n {buttonRef.current && (\n <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n {t('rte_heading_style')}\n </Tooltip>\n )}\n <Popover\n show={open}\n as={StyledSelectMenu}\n target={buttonRef.current}\n placement='bottom-start'\n ref={popoverRef}\n >\n <Menu\n items={textFormats.map(({ text, type, subText }) => ({\n id: type,\n primary: text,\n secondary: [subText],\n selected: type === EditorCommands.getActiveBlockType(editor)\n }))}\n focusControlEl={buttonRef.current \|\| undefined}\n focusElOnClose={false}\n mode='single-select'\n ref={menuRef}\n onItemClick={onTextSelect as (id: string, e: MouseEvent) => void}\n />\n </Popover>\n </>\n );\n};\n\nexport default TextSelect;\n"]}