npm - @pega/cosmos-react-rte - Versions diffs - 4.0.0-dev.2.0 → 4.0.0-dev.20.0 - Mend

@pega/cosmos-react-rte 4.0.0-dev.2.0 → 4.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 (87) hide show

package/lib/components/Editor/Editor.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Editor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.styles.ts"],"names":[],"mappings":"~~AAEA~~,eAAO,MAAM,wBAAwB,oOAYpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yRAU7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,~~yGAchC~~,CAAC"}
1	+ {"version":3,"file":"Editor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,wBAAwB,oOAYpC,CAAC;AAEF,eAAO,MAAM,oBAAoB,mEAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yRAU7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAehC,CAAC"}

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

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '@pega/cosmos-react-core';
 export const offscreenSelectionStyles = `
   .mce-offscreen-selection {
     border: 0;
@@ -12,6 +13,11 @@ export const offscreenSelectionStyles = `
     width: 1px;
   }
 `;
+export const mceContentBodyStyles = `
+  .mce-content-body {
+    overflow-wrap: break-word;
+  }
+`;
 export const placeholderStyles = `
   .mce-content-body[data-mce-placeholder] {
     position: relative;
@@ -23,7 +29,7 @@ export const placeholderStyles = `
     position: absolute;
   }
 `;
-export const StyledEditorContainer = styled.div(() => {
+export const StyledEditorContainer = styled.div(({ theme }) => {
     return css `
     &:hover {
       cursor: text;
@@ -31,6 +37,7 @@ export const StyledEditorContainer = styled.div(() => {
     iframe {
       width: 100%;
+      height: ${theme.components['text-area']['min-height']};
     }
     .tox-statusbar {
@@ -38,4 +45,5 @@ export const StyledEditorContainer = styled.div(() => {
     }
   `;
 });
+StyledEditorContainer.defaultProps = defaultThemeProp;
 //# sourceMappingURL=Editor.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Editor.styles.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,CAAC,MAAM,wBAAwB,GAAG;;;;;;;;;;;;CAYvC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;CAUhC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,~~GAAG~~,EAAE;~~IACnD~~,OAAO,GAAG,CAAA~~;;;;;;;;;;;;GAYT~~,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nexport const offscreenSelectionStyles = `\n .mce-offscreen-selection {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n whiteSpace: nowrap;\n width: 1px;\n }\n`;\n\nexport const placeholderStyles = `\n .mce-content-body[data-mce-placeholder] {\n position: relative;\n }\n .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {\n cursor: text;\n color: rgb(117, 117, 117);\n content: attr(data-mce-placeholder);\n position: absolute;\n }\n`;\n\nexport const StyledEditorContainer = styled.div(() => {\n return css`\n &:hover {\n cursor: text;\n }\n\n iframe {\n width: 100%;\n }\n\n .tox-statusbar {\n display: none !important;\n }\n `;\n});\n"]}
1	+ {"version":3,"file":"Editor.styles.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,wBAAwB,GAAG;;;;;;;;;;;;CAYvC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;CAInC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;CAUhC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;;;;;;;gBAOI,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;;;;;;GAMxD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const offscreenSelectionStyles = `\n .mce-offscreen-selection {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n whiteSpace: nowrap;\n width: 1px;\n }\n`;\n\nexport const mceContentBodyStyles = `\n .mce-content-body {\n overflow-wrap: break-word;\n }\n`;\n\nexport const placeholderStyles = `\n .mce-content-body[data-mce-placeholder] {\n position: relative;\n }\n .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {\n cursor: text;\n color: rgb(117, 117, 117);\n content: attr(data-mce-placeholder);\n position: absolute;\n }\n`;\n\nexport const StyledEditorContainer = styled.div(({ theme }) => {\n return css`\n &:hover {\n cursor: text;\n }\n\n iframe {\n width: 100%;\n height: ${theme.components['text-area']['min-height']};\n }\n\n .tox-statusbar {\n display: none !important;\n }\n `;\n});\n\nStyledEditorContainer.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Editor/Editor.types.d.ts CHANGED Viewed

@@ -3,12 +3,12 @@ import { Editor as TinymceEditor } from 'tinymce/tinymce';
 import { Action, BaseProps, FormControlProps } from '@pega/cosmos-react-core';
 import { Features } from '../RichTextEditor/Toolbar/Toolbar.types';
 import { RichTextEditorState } from '../RichTextEditor';
-export declare type EditorState = RichTextEditorState & {
+export type EditorState = RichTextEditorState & {
     getEditor: () => TinymceEditor | undefined;
     element?: HTMLElement;
     setCursorLocationToStart?: () => void;
 };
-export declare type CustomAction = {
+export type CustomAction = {
     text: Action['text'];
     icon: NonNullable<Action['icon']>;
     onMouseDown: (e: ReactMouseEvent | ReactKeyboardEvent) => void;
@@ -19,7 +19,7 @@ export declare type CustomAction = {
         command: (editor: TinymceEditor) => void;
     };
 };
-export declare type CustomComponent = {
+export type CustomComponent = {
     createCustomElement: (window: typeof globalThis) => CustomElementConstructor;
     name: string;
     extensionAttributes?: string[];

package/lib/components/Editor/Editor.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Editor.types.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,GAAG,EACH,UAAU,IAAI,eAAe,EAC7B,aAAa,IAAI,kBAAkB,EACpC,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,~~oBAAY~~,WAAW,GAAG,mBAAmB,GAAG;IAC9C,SAAS,EAAE,MAAM,aAAa,GAAG,SAAS,CAAC;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;CACvC,CAAC;AAEF,~~oBAAY~~,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;IAClC,WAAW,EAAE,CAAC,CAAC,EAAE,eAAe,GAAG,kBAAkB,KAAK,IAAI,CAAC;IAC/D,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;KAAE,CAAC;CAC/F,CAAC;AAEF,~~oBAAY~~,eAAe,GAAG;IAC5B,mBAAmB,EAAE,CAAC,MAAM,EAAE,OAAO,UAAU,KAAK,wBAAwB,CAAC;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,gBAAgB,EAAE,SAAS;IAC9D,gEAAgE;IAChE,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uHAAuH;IACvH,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,mDAAmD;IACnD,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,2DAA2D;IAC3D,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kIAAkI;IAClI,MAAM,CAAC,EAAE;QACP,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,iEAAiE;IACjE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2BAA2B;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB"}
1	+ {"version":3,"file":"Editor.types.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.types.ts"],"names":[],"mappings":"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"}

package/lib/components/Editor/ImageEditor.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/ImageEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAQH,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;~~AA4BjC~~,eAAO,MAAM,aAAa,QAAc,CAAC;AAEzC,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC;IAAE,QAAQ,EAAE,WAAW,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAAE,~~CA8XpF~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"ImageEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/ImageEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAQH,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AA6BjC,eAAO,MAAM,aAAa,QAAc,CAAC;AAEzC,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC;IAAE,QAAQ,EAAE,WAAW,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAAE,CA2YpF,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Editor/ImageEditor.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useLayoutEffect } from 'react';
 import styled from 'styled-components';
-import { Button, CardContent, CardHeader, Checkbox, createUID, Flex, Form, Grid, Icon, Input, NumberInput, Popover, Text, useElement, useI18n, useOuterEvent, useUID, VisuallyHiddenText } from '@pega/cosmos-react-core';
+import { Button, CardContent, CardHeader, Checkbox, createUID, Flex, Form, Grid, Icon, Input, NumberInput, Popover, Text, useAfterInitialEffect, useElement, useI18n, useOuterEvent, useUID, VisuallyHiddenText } from '@pega/cosmos-react-core';
 const IgnoreMouseEventsIcon = styled.svg `
   pointer-events: none;
 `;
@@ -10,7 +10,8 @@ const ImageEditor = ({ editorEl, editor, onChange }) => {
     const t = useI18n();
     const id = useUID();
     const [showImagePopover, setShowImagePopover] = useState(false);
-    const [showEditButton, setShowEditButton] = useState(false);
+    const [imageEditHover, setImageEditHover] = useState(false);
+    const [imageEditFocus, setImageEditFocus] = useState(false);
     const [canShowEditButton, setCanShowEditButton] = useState(false);
     const [imgEl, setImageEl] = useState(null);
     const [imgElements, setImageElements] = useState([]);
@@ -41,14 +42,14 @@ const ImageEditor = ({ editorEl, editor, onChange }) => {
     const onImageMouseEnter = (e) => {
         if (!showImagePopover) {
             const el = e.target;
-            setShowEditButton(true);
+            setImageEditHover(true);
             setImageEl(el);
         }
     };
     const onImageMouseLeave = (e) => {
         if (e.relatedTarget && e.relatedTarget.id !== id && !showImagePopover) {
             setImageEl(null);
-            setShowEditButton(false);
+            setImageEditHover(false);
         }
     };
     const setImageState = () => {
@@ -94,9 +95,9 @@ const ImageEditor = ({ editorEl, editor, onChange }) => {
     const onAltTextChange = (e) => {
         setAltText(e.target.value);
     };
-    /* The next two functions handle changing the height and width of the selected image element.
-    If the value entered is too small, the value will be defaulted.
-    When the height is input, a new width will be calculated and vice versa. */
+    // The next two functions handle changing the height and width of the selected image element.
+    // If the value entered is too small, the value will be defaulted.
+    // When the height is input, a new width will be calculated and vice versa.
     const onHeightChange = (incomingValue) => {
         const inputHeight = parseInt(incomingValue, 10);
         setHeight(inputHeight);
@@ -128,7 +129,6 @@ const ImageEditor = ({ editorEl, editor, onChange }) => {
             }
             imgEl.setAttribute('alt', altText);
         }
-        editor.focus();
         editor.selection.select(editor.dom.select(`img[src="${imgEl?.src}"]`)[0]);
         setImageEl(null);
         setShowImagePopover(false);
@@ -208,18 +208,18 @@ const ImageEditor = ({ editorEl, editor, onChange }) => {
                 selection.anchorNode?.firstChild?.nodeName === 'IMG' &&
                 selection.anchorOffset === 0) {
                 setImageEl(selection.anchorNode.firstChild);
-                setShowEditButton(true);
+                setImageEditFocus(true);
                 nextToImg = true;
                 // If your selection is next to an image that breaks text up inside of a paragraph
             }
             else if (selection && selection.anchorNode?.nextSibling?.nodeName === 'IMG') {
                 setImageEl(selection.anchorNode.nextSibling);
-                setShowEditButton(true);
+                setImageEditFocus(true);
                 nextToImg = true;
             }
-            else if (selection && imgEl && showEditButton) {
+            else if (selection && imgEl && imageEditFocus) {
                 setImageEl(null);
-                setShowEditButton(false);
+                setImageEditFocus(false);
                 setKeyCommandText('');
             }
             if (nextToImg) {
@@ -227,13 +227,13 @@ const ImageEditor = ({ editorEl, editor, onChange }) => {
             }
         };
         const onKeyDown = (e) => {
-            if (e.key === 'Enter' && showEditButton) {
+            if (e.key === 'Enter' && imageEditFocus) {
                 e.stopPropagation();
                 e.preventDefault();
                 editorOpenedWithEnter.current = true;
                 setShowImagePopover(true);
             }
-            else if (e.key === 'Del' && showEditButton) {
+            else if (e.key === 'Del' && imageEditFocus) {
                 onImageDelete();
             }
         };
@@ -243,8 +243,8 @@ const ImageEditor = ({ editorEl, editor, onChange }) => {
             editor.off('keyup', onKeyUp);
             editor.off('keydown', onKeyDown);
         };
-    }, [editor, imgEl, showEditButton]);
-    useEffect(() => {
+    }, [editor, imgEl, imageEditFocus]);
+    useAfterInitialEffect(() => {
         if (showImagePopover) {
             editor.selection.getSel()?.collapseToEnd();
             if (editorOpenedWithEnter.current) {
@@ -252,13 +252,18 @@ const ImageEditor = ({ editorEl, editor, onChange }) => {
                 editorOpenedWithEnter.current = false;
             }
         }
+        else {
+            editor.focus();
+        }
     }, [showImagePopover]);
     useLayoutEffect(() => {
         if (imgEl && buttonEl) {
             setBtnStyle(calculateBtnStyles(imgEl));
         }
     }, [imgEl, buttonEl]);
-    return (_jsxs(_Fragment, { children: [showEditButton && imgEl && canShowEditButton && (_jsx(Button, { id: id, icon: true, variant: 'primary', ref: setButtonEl, onClick: () => setShowImagePopover(true), style: { ...btnStyle }, children: _jsx(Icon, { name: 'pencil-solid', as: IgnoreMouseEventsIcon }) })), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: keyCommandText }), showImagePopover && (buttonEl || !canShowEditButton) && imgEl && (_jsxs(Popover, { target: canShowEditButton ? buttonEl : imgEl, strategy: 'fixed', arrow: true, ref: imagePopoverRef, onClick: (e) => e.stopPropagation(), children: [_jsx(CardHeader, { actions: _jsx(Button, { variant: 'simple', icon: true, onClick: onImageChangeCancel, label: t('close'), children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Text, { variant: 'h3', children: t('rte_image_settings') }) }), _jsx(CardContent, { children: _jsx(Form, { as: 'div', actions: _jsxs(Flex, { container: { justify: 'between' }, item: { grow: 1 }, children: [_jsxs(Flex, { item: { grow: 1 }, children: [_jsx(Button, { onClick: onImageChangeCancel, children: t('cancel') }), _jsx(Button, { onClick: onImageDelete, children: t('delete') })] }), _jsx(Button, { variant: 'primary', onClick: onImageChangeSubmit, children: t('submit') })] }), children: _jsxs(Grid, { container: {
+    return (_jsxs(_Fragment, { children: [(imageEditFocus || imageEditHover) && imgEl && canShowEditButton && (_jsx(Button, { id: id, icon: true, variant: 'primary', ref: setButtonEl, onClick: () => {
+                    setShowImagePopover(true);
+                }, style: { ...btnStyle }, children: _jsx(Icon, { name: 'pencil-solid', as: IgnoreMouseEventsIcon }) })), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: keyCommandText }), showImagePopover && (buttonEl || !canShowEditButton) && imgEl && (_jsxs(Popover, { target: canShowEditButton ? buttonEl : imgEl, strategy: 'fixed', arrow: true, ref: imagePopoverRef, onClick: (e) => e.stopPropagation(), children: [_jsx(CardHeader, { actions: _jsx(Button, { variant: 'simple', icon: true, onClick: onImageChangeCancel, label: t('close'), children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Text, { variant: 'h3', children: t('rte_image_settings') }) }), _jsx(CardContent, { children: _jsx(Form, { as: 'div', actions: _jsxs(Flex, { container: { justify: 'between' }, item: { grow: 1 }, children: [_jsxs(Flex, { item: { grow: 1 }, children: [_jsx(Button, { onClick: onImageChangeCancel, children: t('cancel') }), _jsx(Button, { onClick: onImageDelete, children: t('delete') })] }), _jsx(Button, { variant: 'primary', onClick: onImageChangeSubmit, children: t('submit') })] }), children: _jsxs(Grid, { container: {
                                     gap: 2,
                                     areas: customSize
                                         ? '"desc desc" "radio radio" "width height"'

package/lib/components/Editor/ImageEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageEditor.js","sourceRoot":"","sources":["../../../src/components/Editor/ImageEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n MouseEvent as ReactMouseEvent,\n useEffect,\n useRef,\n useState,\n ChangeEvent,\n CSSProperties,\n useLayoutEffect\n} from 'react';\nimport { Editor } from 'tinymce';\nimport styled from 'styled-components';\n\nimport {\n Button,\n CardContent,\n CardHeader,\n Checkbox,\n createUID,\n Flex,\n Form,\n Grid,\n Icon,\n Input,\n NumberInput,\n Popover,\n Text,\n useElement,\n useI18n,\n useOuterEvent,\n useUID,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nconst IgnoreMouseEventsIcon = styled.svg`\n pointer-events: none;\n`;\n\nexport const imgHoverClass = createUID();\n\nconst ImageEditor: FC<{ editorEl: HTMLElement; editor: Editor; onChange: () => void }> = ({\n editorEl,\n editor,\n onChange\n}) => {\n const t = useI18n();\n const id = useUID();\n const [showImagePopover, setShowImagePopover] = useState(false);\n const [showEditButton, setShowEditButton] = useState(false);\n const [canShowEditButton, setCanShowEditButton] = useState(false);\n const [imgEl, setImageEl] = useState<HTMLImageElement \| null>(null);\n const [imgElements, setImageElements] = useState<HTMLImageElement[]>([]);\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>(null);\n const [width, setWidth] = useState(0);\n const [height, setHeight] = useState(0);\n const [aspectRatio, setAspectRatio] = useState(0);\n const [altText, setAltText] = useState('');\n const [customSize, setCustomSize] = useState(false);\n const [keyCommandText, setKeyCommandText] = useState('');\n const imagePopoverRef = useRef<HTMLDivElement>(null);\n const altTextInputRef = useRef<HTMLInputElement>(null);\n const editorOpenedWithEnter = useRef(false);\n const [btnStyle, setBtnStyle] = useState<CSSProperties>({});\n\n const onImageClick = (e: MouseEvent \| ReactMouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setShowImagePopover(true);\n };\n\n const calculateBtnStyles = (el: HTMLElement): CSSProperties => {\n const elementRect = el.getBoundingClientRect();\n return {\n position: 'absolute',\n top: elementRect.top + (elementRect.height / 2 - (buttonEl?.scrollHeight \|\| 0) / 2),\n left: elementRect.left + (elementRect.width / 2 - (buttonEl?.scrollWidth \|\| 0) / 2)\n };\n };\n\n const onImageMouseEnter = (e: MouseEvent) => {\n if (!showImagePopover) {\n const el = e.target as HTMLElement;\n setShowEditButton(true);\n setImageEl(el as HTMLImageElement);\n }\n };\n\n const onImageMouseLeave = (e: MouseEvent) => {\n if (e.relatedTarget && (e.relatedTarget as HTMLButtonElement).id !== id && !showImagePopover) {\n setImageEl(null);\n setShowEditButton(false);\n }\n };\n\n const setImageState = () => {\n if (imgEl) {\n let imgHeight;\n let imgWidth;\n let hasHeightOrWidthAttribute = false;\n if (imgEl.getAttribute('height')) {\n imgHeight = parseInt(imgEl.getAttribute('height') as string, 10);\n hasHeightOrWidthAttribute = true;\n } else {\n imgHeight = imgEl.naturalHeight;\n }\n if (imgEl.getAttribute('width')) {\n imgWidth = parseInt(imgEl.getAttribute('width') as string, 10);\n hasHeightOrWidthAttribute = true;\n } else {\n imgWidth = imgEl.naturalWidth;\n }\n setAltText(imgEl.getAttribute('alt') \|\| '');\n setHeight(imgHeight);\n setWidth(imgWidth);\n setAspectRatio(imgWidth / imgHeight);\n setCustomSize(hasHeightOrWidthAttribute);\n }\n };\n\n useOuterEvent('mousedown', [imagePopoverRef], () => {\n setImageState();\n setShowImagePopover(false);\n });\n\n const onCheckBoxClick = (e: ReactMouseEvent) => {\n e.stopPropagation();\n };\n\n const onInputClick = (e: ReactMouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n };\n\n const onInputFocus = (e: FocusEvent) => {\n e.stopPropagation();\n };\n\n const onAltTextChange = (e: ChangeEvent<HTMLInputElement>) => {\n setAltText(e.target.value);\n };\n\n /* The next two functions handle changing the height and width of the selected image element.\n If the value entered is too small, the value will be defaulted.\n When the height is input, a new width will be calculated and vice versa. /\n const onHeightChange = (incomingValue: string) => {\n const inputHeight = parseInt(incomingValue, 10);\n\n setHeight(inputHeight);\n setWidth(inputHeight aspectRatio);\n };\n\n const onWidthChange = (incomingValue: string) => {\n const inputWidth = parseInt(incomingValue, 10);\n\n setWidth(inputWidth);\n setHeight(inputWidth / aspectRatio);\n };\n\n const onImageChangeSubmit = (e: MouseEvent) => {\n e.preventDefault();\n if (imgEl) {\n if (customSize) {\n if (Number.isNaN(height) \|\| Number.isNaN(width)) {\n imgEl.removeAttribute('height');\n imgEl.removeAttribute('width');\n setHeight(imgEl.naturalHeight);\n setWidth(imgEl.naturalWidth);\n } else {\n imgEl.setAttribute('height', height.toString());\n imgEl.setAttribute('width', width.toString());\n }\n } else {\n imgEl.removeAttribute('height');\n imgEl.removeAttribute('width');\n }\n imgEl.setAttribute('alt', altText);\n }\n\n editor.focus();\n editor.selection.select(editor.dom.select(`img[src=\"${imgEl?.src}\"]`)[0]);\n setImageEl(null);\n setShowImagePopover(false);\n onChange();\n };\n\n const onImageChangeCancel = () => {\n setImageEl(null);\n setShowImagePopover(false);\n };\n\n const onImageDelete = () => {\n if (imgEl) {\n imgEl.remove();\n }\n setImageEl(null);\n setShowImagePopover(false);\n onChange();\n };\n\n // Keeps the imageElements state up to date with existing and newly added img tags inside of TinyMCE\n useEffect(() => {\n const iframeDoc = editor.getDoc();\n const imageElements = iframeDoc?.querySelectorAll('img') ?? ([] as HTMLImageElement[]);\n setImageElements(() => {\n return [...imageElements];\n });\n const observer = new MutationObserver(mutations => {\n mutations.forEach(mutation => {\n if (\n mutation.type === 'childList' &&\n (mutation.addedNodes.length \|\| mutation.removedNodes.length)\n ) {\n const newImageElements = iframeDoc?.querySelectorAll('img') ?? ([] as HTMLImageElement[]);\n setImageElements(() => [...newImageElements]);\n }\n });\n });\n if (iframeDoc) {\n observer.observe(iframeDoc.body, { childList: true, subtree: true });\n }\n return () => {\n observer.disconnect();\n };\n }, [editorEl, editor, setImageElements]);\n\n // Adds event listeners to HTML img elements inside of TinyMCE\n // This has to be done because there are no react components for these images\n useEffect(() => {\n imgElements.forEach(imgElement => {\n imgElement.addEventListener('mouseenter', onImageMouseEnter);\n imgElement.addEventListener('mouseout', onImageMouseLeave);\n imgElement.addEventListener('click', onImageClick);\n });\n return () => {\n imgElements.forEach(imgElement => {\n imgElement.removeEventListener('mouseenter', onImageMouseEnter);\n imgElement.removeEventListener('mouseout', onImageMouseLeave);\n imgElement.removeEventListener('click', onImageClick);\n });\n };\n }, [imgElements, onImageMouseEnter, onImageMouseLeave, onImageClick]);\n\n useEffect(() => {\n setImageState();\n imgEl?.setAttribute('class', imgHoverClass);\n if (imgEl && imgEl.clientHeight > 36 && imgEl.clientWidth > 36) {\n setCanShowEditButton(true);\n } else {\n setCanShowEditButton(false);\n }\n return () => {\n imgEl?.removeAttribute('class');\n };\n }, [imgEl]);\n\n useEffect(() => {\n const onKeyUp = () => {\n const selection = editor.selection.getSel();\n let nextToImg = false;\n // If your selection is next to an image on it's own line (not breaking text)\n if (\n selection &&\n selection.anchorNode?.childNodes.length === 1 &&\n selection.anchorNode?.firstChild?.nodeName === 'IMG' &&\n selection.anchorOffset === 0\n ) {\n setImageEl(selection.anchorNode.firstChild as HTMLImageElement);\n setShowEditButton(true);\n nextToImg = true;\n // If your selection is next to an image that breaks text up inside of a paragraph\n } else if (selection && selection.anchorNode?.nextSibling?.nodeName === 'IMG') {\n setImageEl(selection.anchorNode.nextSibling as HTMLImageElement);\n setShowEditButton(true);\n nextToImg = true;\n } else if (selection && imgEl && showEditButton) {\n setImageEl(null);\n setShowEditButton(false);\n setKeyCommandText('');\n }\n\n if (nextToImg) {\n setKeyCommandText(t('rte_image_key_command'));\n }\n };\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter' && showEditButton) {\n e.stopPropagation();\n e.preventDefault();\n editorOpenedWithEnter.current = true;\n setShowImagePopover(true);\n } else if (e.key === 'Del' && showEditButton) {\n onImageDelete();\n }\n };\n editor.on('keyup', onKeyUp);\n editor.on('keydown', onKeyDown, true);\n return () => {\n editor.off('keyup', onKeyUp);\n editor.off('keydown', onKeyDown);\n };\n }, [editor, imgEl, showEditButton]);\n\n useEffect(() => {\n if (showImagePopover) {\n editor.selection.getSel()?.collapseToEnd();\n\n if (editorOpenedWithEnter.current) {\n altTextInputRef.current?.focus();\n editorOpenedWithEnter.current = false;\n }\n }\n }, [showImagePopover]);\n\n useLayoutEffect(() => {\n if (imgEl && buttonEl) {\n setBtnStyle(calculateBtnStyles(imgEl));\n }\n }, [imgEl, buttonEl]);\n\n return (\n <>\n {showEditButton && imgEl && canShowEditButton && (\n <Button\n id={id}\n icon\n variant='primary'\n ref={setButtonEl}\n onClick={() => setShowImagePopover(true)}\n style={{ ...btnStyle }}\n >\n <Icon name='pencil-solid' as={IgnoreMouseEventsIcon} />\n </Button>\n )}\n <VisuallyHiddenText aria-live='polite'>{keyCommandText}</VisuallyHiddenText>\n {showImagePopover && (buttonEl \|\| !canShowEditButton) && imgEl && (\n <Popover\n target={canShowEditButton ? buttonEl : imgEl}\n strategy='fixed'\n arrow\n ref={imagePopoverRef}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n >\n <CardHeader\n actions={\n <Button variant='simple' icon onClick={onImageChangeCancel} label={t('close')}>\n <Icon name='times' />\n </Button>\n }\n >\n <Text variant='h3'>{t('rte_image_settings')}</Text>\n </CardHeader>\n <CardContent>\n <Form\n as='div'\n actions={\n <Flex container={{ justify: 'between' }} item={{ grow: 1 }}>\n <Flex item={{ grow: 1 }}>\n <Button onClick={onImageChangeCancel}>{t('cancel')}</Button>\n <Button onClick={onImageDelete}>{t('delete')}</Button>\n </Flex>\n <Button variant='primary' onClick={onImageChangeSubmit}>\n {t('submit')}\n </Button>\n </Flex>\n }\n >\n <Grid\n container={{\n gap: 2,\n areas: customSize\n ? '\"desc desc\" \"radio radio\" \"width height\"'\n : '\"desc desc\" \"radio radio\"'\n }}\n >\n <Grid item={{ area: 'desc' }}>\n <Input\n label={t('description')}\n value={altText}\n onClick={onInputClick}\n onChange={onAltTextChange}\n onFocus={onInputFocus}\n info={t('rte_image_description_info')}\n ref={altTextInputRef}\n />\n </Grid>\n <Grid item={{ area: 'radio' }}>\n <Checkbox\n checked={customSize}\n label={t('rte_image_custom_size')}\n onClick={onCheckBoxClick}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setCustomSize(e.target.checked);\n }}\n />\n </Grid>\n {customSize && (\n <>\n <Grid item={{ area: 'width' }}>\n <NumberInput\n label={t('rte_width_in_pixels')}\n value={Math.floor(Math.max(width, 1)).toString()}\n onClick={onInputClick}\n onChange={onWidthChange}\n />\n </Grid>\n <Grid item={{ area: 'height' }}>\n <NumberInput\n label={t('rte_height_in_pixels')}\n value={Math.floor(Math.max(height, 1)).toString()}\n onClick={onInputClick}\n onChange={onHeightChange}\n />\n </Grid>\n </>\n )}\n </Grid>\n </Form>\n </CardContent>\n </Popover>\n )}\n </>\n );\n};\n\nexport default ImageEditor;\n"]}
1	+ {"version":3,"file":"ImageEditor.js","sourceRoot":"","sources":["../../../src/components/Editor/ImageEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n MouseEvent as ReactMouseEvent,\n useEffect,\n useRef,\n useState,\n ChangeEvent,\n CSSProperties,\n useLayoutEffect\n} from 'react';\nimport { Editor } from 'tinymce';\nimport styled from 'styled-components';\n\nimport {\n Button,\n CardContent,\n CardHeader,\n Checkbox,\n createUID,\n Flex,\n Form,\n Grid,\n Icon,\n Input,\n NumberInput,\n Popover,\n Text,\n useAfterInitialEffect,\n useElement,\n useI18n,\n useOuterEvent,\n useUID,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nconst IgnoreMouseEventsIcon = styled.svg`\n pointer-events: none;\n`;\n\nexport const imgHoverClass = createUID();\n\nconst ImageEditor: FC<{ editorEl: HTMLElement; editor: Editor; onChange: () => void }> = ({\n editorEl,\n editor,\n onChange\n}) => {\n const t = useI18n();\n const id = useUID();\n const [showImagePopover, setShowImagePopover] = useState(false);\n const [imageEditHover, setImageEditHover] = useState(false);\n const [imageEditFocus, setImageEditFocus] = useState(false);\n const [canShowEditButton, setCanShowEditButton] = useState(false);\n const [imgEl, setImageEl] = useState<HTMLImageElement \| null>(null);\n const [imgElements, setImageElements] = useState<HTMLImageElement[]>([]);\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>(null);\n const [width, setWidth] = useState(0);\n const [height, setHeight] = useState(0);\n const [aspectRatio, setAspectRatio] = useState(0);\n const [altText, setAltText] = useState('');\n const [customSize, setCustomSize] = useState(false);\n const [keyCommandText, setKeyCommandText] = useState('');\n const imagePopoverRef = useRef<HTMLDivElement>(null);\n const altTextInputRef = useRef<HTMLInputElement>(null);\n const editorOpenedWithEnter = useRef(false);\n const [btnStyle, setBtnStyle] = useState<CSSProperties>({});\n\n const onImageClick = (e: MouseEvent \| ReactMouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setShowImagePopover(true);\n };\n\n const calculateBtnStyles = (el: HTMLElement): CSSProperties => {\n const elementRect = el.getBoundingClientRect();\n return {\n position: 'absolute',\n top: elementRect.top + (elementRect.height / 2 - (buttonEl?.scrollHeight \|\| 0) / 2),\n left: elementRect.left + (elementRect.width / 2 - (buttonEl?.scrollWidth \|\| 0) / 2)\n };\n };\n\n const onImageMouseEnter = (e: MouseEvent) => {\n if (!showImagePopover) {\n const el = e.target as HTMLElement;\n setImageEditHover(true);\n setImageEl(el as HTMLImageElement);\n }\n };\n\n const onImageMouseLeave = (e: MouseEvent) => {\n if (e.relatedTarget && (e.relatedTarget as HTMLButtonElement).id !== id && !showImagePopover) {\n setImageEl(null);\n setImageEditHover(false);\n }\n };\n\n const setImageState = () => {\n if (imgEl) {\n let imgHeight;\n let imgWidth;\n let hasHeightOrWidthAttribute = false;\n if (imgEl.getAttribute('height')) {\n imgHeight = parseInt(imgEl.getAttribute('height') as string, 10);\n hasHeightOrWidthAttribute = true;\n } else {\n imgHeight = imgEl.naturalHeight;\n }\n if (imgEl.getAttribute('width')) {\n imgWidth = parseInt(imgEl.getAttribute('width') as string, 10);\n hasHeightOrWidthAttribute = true;\n } else {\n imgWidth = imgEl.naturalWidth;\n }\n setAltText(imgEl.getAttribute('alt') \|\| '');\n setHeight(imgHeight);\n setWidth(imgWidth);\n setAspectRatio(imgWidth / imgHeight);\n setCustomSize(hasHeightOrWidthAttribute);\n }\n };\n\n useOuterEvent('mousedown', [imagePopoverRef], () => {\n setImageState();\n setShowImagePopover(false);\n });\n\n const onCheckBoxClick = (e: ReactMouseEvent) => {\n e.stopPropagation();\n };\n\n const onInputClick = (e: ReactMouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n };\n\n const onInputFocus = (e: FocusEvent) => {\n e.stopPropagation();\n };\n\n const onAltTextChange = (e: ChangeEvent<HTMLInputElement>) => {\n setAltText(e.target.value);\n };\n\n // The next two functions handle changing the height and width of the selected image element.\n // If the value entered is too small, the value will be defaulted.\n // When the height is input, a new width will be calculated and vice versa.\n const onHeightChange = (incomingValue: string) => {\n const inputHeight = parseInt(incomingValue, 10);\n\n setHeight(inputHeight);\n setWidth(inputHeight * aspectRatio);\n };\n\n const onWidthChange = (incomingValue: string) => {\n const inputWidth = parseInt(incomingValue, 10);\n\n setWidth(inputWidth);\n setHeight(inputWidth / aspectRatio);\n };\n\n const onImageChangeSubmit = (e: MouseEvent) => {\n e.preventDefault();\n if (imgEl) {\n if (customSize) {\n if (Number.isNaN(height) \|\| Number.isNaN(width)) {\n imgEl.removeAttribute('height');\n imgEl.removeAttribute('width');\n setHeight(imgEl.naturalHeight);\n setWidth(imgEl.naturalWidth);\n } else {\n imgEl.setAttribute('height', height.toString());\n imgEl.setAttribute('width', width.toString());\n }\n } else {\n imgEl.removeAttribute('height');\n imgEl.removeAttribute('width');\n }\n imgEl.setAttribute('alt', altText);\n }\n\n editor.selection.select(editor.dom.select(`img[src=\"${imgEl?.src}\"]`)[0]);\n setImageEl(null);\n setShowImagePopover(false);\n onChange();\n };\n\n const onImageChangeCancel = () => {\n setImageEl(null);\n setShowImagePopover(false);\n };\n\n const onImageDelete = () => {\n if (imgEl) {\n imgEl.remove();\n }\n setImageEl(null);\n setShowImagePopover(false);\n onChange();\n };\n\n // Keeps the imageElements state up to date with existing and newly added img tags inside of TinyMCE\n useEffect(() => {\n const iframeDoc = editor.getDoc();\n const imageElements = iframeDoc?.querySelectorAll('img') ?? ([] as HTMLImageElement[]);\n setImageElements(() => {\n return [...imageElements];\n });\n const observer = new MutationObserver(mutations => {\n mutations.forEach(mutation => {\n if (\n mutation.type === 'childList' &&\n (mutation.addedNodes.length \|\| mutation.removedNodes.length)\n ) {\n const newImageElements = iframeDoc?.querySelectorAll('img') ?? ([] as HTMLImageElement[]);\n setImageElements(() => [...newImageElements]);\n }\n });\n });\n if (iframeDoc) {\n observer.observe(iframeDoc.body, { childList: true, subtree: true });\n }\n return () => {\n observer.disconnect();\n };\n }, [editorEl, editor, setImageElements]);\n\n // Adds event listeners to HTML img elements inside of TinyMCE\n // This has to be done because there are no react components for these images\n useEffect(() => {\n imgElements.forEach(imgElement => {\n imgElement.addEventListener('mouseenter', onImageMouseEnter);\n imgElement.addEventListener('mouseout', onImageMouseLeave);\n imgElement.addEventListener('click', onImageClick);\n });\n return () => {\n imgElements.forEach(imgElement => {\n imgElement.removeEventListener('mouseenter', onImageMouseEnter);\n imgElement.removeEventListener('mouseout', onImageMouseLeave);\n imgElement.removeEventListener('click', onImageClick);\n });\n };\n }, [imgElements, onImageMouseEnter, onImageMouseLeave, onImageClick]);\n\n useEffect(() => {\n setImageState();\n imgEl?.setAttribute('class', imgHoverClass);\n if (imgEl && imgEl.clientHeight > 36 && imgEl.clientWidth > 36) {\n setCanShowEditButton(true);\n } else {\n setCanShowEditButton(false);\n }\n return () => {\n imgEl?.removeAttribute('class');\n };\n }, [imgEl]);\n\n useEffect(() => {\n const onKeyUp = () => {\n const selection = editor.selection.getSel();\n let nextToImg = false;\n // If your selection is next to an image on it's own line (not breaking text)\n if (\n selection &&\n selection.anchorNode?.childNodes.length === 1 &&\n selection.anchorNode?.firstChild?.nodeName === 'IMG' &&\n selection.anchorOffset === 0\n ) {\n setImageEl(selection.anchorNode.firstChild as HTMLImageElement);\n setImageEditFocus(true);\n nextToImg = true;\n // If your selection is next to an image that breaks text up inside of a paragraph\n } else if (selection && selection.anchorNode?.nextSibling?.nodeName === 'IMG') {\n setImageEl(selection.anchorNode.nextSibling as HTMLImageElement);\n setImageEditFocus(true);\n nextToImg = true;\n } else if (selection && imgEl && imageEditFocus) {\n setImageEl(null);\n setImageEditFocus(false);\n setKeyCommandText('');\n }\n\n if (nextToImg) {\n setKeyCommandText(t('rte_image_key_command'));\n }\n };\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter' && imageEditFocus) {\n e.stopPropagation();\n e.preventDefault();\n editorOpenedWithEnter.current = true;\n setShowImagePopover(true);\n } else if (e.key === 'Del' && imageEditFocus) {\n onImageDelete();\n }\n };\n\n editor.on('keyup', onKeyUp);\n editor.on('keydown', onKeyDown, true);\n\n return () => {\n editor.off('keyup', onKeyUp);\n editor.off('keydown', onKeyDown);\n };\n }, [editor, imgEl, imageEditFocus]);\n\n useAfterInitialEffect(() => {\n if (showImagePopover) {\n editor.selection.getSel()?.collapseToEnd();\n\n if (editorOpenedWithEnter.current) {\n altTextInputRef.current?.focus();\n editorOpenedWithEnter.current = false;\n }\n } else {\n editor.focus();\n }\n }, [showImagePopover]);\n\n useLayoutEffect(() => {\n if (imgEl && buttonEl) {\n setBtnStyle(calculateBtnStyles(imgEl));\n }\n }, [imgEl, buttonEl]);\n\n return (\n <>\n {(imageEditFocus \|\| imageEditHover) && imgEl && canShowEditButton && (\n <Button\n id={id}\n icon\n variant='primary'\n ref={setButtonEl}\n onClick={() => {\n setShowImagePopover(true);\n }}\n style={{ ...btnStyle }}\n >\n <Icon name='pencil-solid' as={IgnoreMouseEventsIcon} />\n </Button>\n )}\n\n <VisuallyHiddenText aria-live='polite'>{keyCommandText}</VisuallyHiddenText>\n\n {showImagePopover && (buttonEl \|\| !canShowEditButton) && imgEl && (\n <Popover\n target={canShowEditButton ? buttonEl : imgEl}\n strategy='fixed'\n arrow\n ref={imagePopoverRef}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n >\n <CardHeader\n actions={\n <Button variant='simple' icon onClick={onImageChangeCancel} label={t('close')}>\n <Icon name='times' />\n </Button>\n }\n >\n <Text variant='h3'>{t('rte_image_settings')}</Text>\n </CardHeader>\n\n <CardContent>\n <Form\n as='div'\n actions={\n <Flex container={{ justify: 'between' }} item={{ grow: 1 }}>\n <Flex item={{ grow: 1 }}>\n <Button onClick={onImageChangeCancel}>{t('cancel')}</Button>\n <Button onClick={onImageDelete}>{t('delete')}</Button>\n </Flex>\n <Button variant='primary' onClick={onImageChangeSubmit}>\n {t('submit')}\n </Button>\n </Flex>\n }\n >\n <Grid\n container={{\n gap: 2,\n areas: customSize\n ? '\"desc desc\" \"radio radio\" \"width height\"'\n : '\"desc desc\" \"radio radio\"'\n }}\n >\n <Grid item={{ area: 'desc' }}>\n <Input\n label={t('description')}\n value={altText}\n onClick={onInputClick}\n onChange={onAltTextChange}\n onFocus={onInputFocus}\n info={t('rte_image_description_info')}\n ref={altTextInputRef}\n />\n </Grid>\n\n <Grid item={{ area: 'radio' }}>\n <Checkbox\n checked={customSize}\n label={t('rte_image_custom_size')}\n onClick={onCheckBoxClick}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setCustomSize(e.target.checked);\n }}\n />\n </Grid>\n\n {customSize && (\n <>\n <Grid item={{ area: 'width' }}>\n <NumberInput\n label={t('rte_width_in_pixels')}\n value={Math.floor(Math.max(width, 1)).toString()}\n onClick={onInputClick}\n onChange={onWidthChange}\n />\n </Grid>\n\n <Grid item={{ area: 'height' }}>\n <NumberInput\n label={t('rte_height_in_pixels')}\n value={Math.floor(Math.max(height, 1)).toString()}\n onClick={onInputClick}\n onChange={onHeightChange}\n />\n </Grid>\n </>\n )}\n </Grid>\n </Form>\n </CardContent>\n </Popover>\n )}\n </>\n );\n};\n\nexport default ImageEditor;\n"]}

package/lib/components/Editor/Toolbar/TextSelect.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { Editor } from 'tinymce';
-declare type FormatTypes = 'p' | 'h1' | 'h2' | 'h3' | 'h4';
+type FormatTypes = 'p' | 'h1' | 'h2' | 'h3' | 'h4';
 export declare const getTextFormats: (osx?: boolean) => {
     text: string;
     subText: string;

package/lib/components/Editor/Toolbar/TextSelect.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoE,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAgDjC,~~aAAK~~,WAAW,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAgBnD,eAAO,MAAM,cAAc,SACpB,OAAO,KACX;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,WAAW,CAAA;CAAE,EAQtD,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC;IAAE,GAAG,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,~~CA2HpD~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"TextSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoE,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAgDjC,KAAK,WAAW,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAgBnD,eAAO,MAAM,cAAc,SACpB,OAAO,KACX;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,WAAW,CAAA;CAAE,EAQtD,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC;IAAE,GAAG,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CA0HpD,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -125,7 +125,7 @@ const TextSelect = ({ osx, editor }) => {
                         primary: text,
                         secondary: [subText],
                         selected: type === activeFormat()
-                    })), focusControlEl: buttonRef.current ?? undefined, focusElOnClose: false, mode: 'single-select', ref: menuRef, onItemClick: onTextSelect }) })] }));
+                    })), focusControlEl: buttonRef.current ?? undefined, mode: 'single-select', ref: menuRef, onItemClick: onTextSelect }) })] }));
 };
 export default TextSelect;
 //# sourceMappingURL=TextSelect.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextSelect.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TextSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,MAAM,EAAE,QAAQ,EAAyC,OAAO,EAAE,MAAM,OAAO,CAAC;AAE7F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,MAAM,EACN,gBAAgB,EAChB,OAAO,EACP,OAAO,EACP,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,kBAAkB,MAAM,yEAAyE,CAAC;AAE9G,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAEnE,YAAY,CAAC,kBAAkB,CAAC,CAAC;AAEjC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACvF,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;iCAGlB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;uBACrC,KAAK,CAAC,IAAI,CAAC,OAAO;0BACf,KAAK,CAAC,IAAI,CAAC,OAAO;iBAC3B,SAAS,CAAC,GAAG;;;;;;;oBAOV,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAElC,CAAC;AAIF,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,QAAQ;IACX,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,QAAQ;IACZ,GAAG,EAAE,QAAQ;CACL,CAAC;AAEX,MAAM,cAAc,GAAG,CAAC,GAAW,EAAE,GAAY,EAAE,EAAE;IACnD,OAAO,aAAa,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,EAAE,CAAC,CAAC;AACtE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,MAAe,KAAK,EACoC,EAAE;IAC1D,OAAO;QACL,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE;QAC9D,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE;QAClE,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE;QAClE,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE;QAClE,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE;KACnE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAyC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3E,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAChC,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE7B,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,aAAa,CAAC,OAAO,EAAE,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE;QAC5D,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,CAAC,IAAiB,EAAE,CAAa,EAAE,EAAE;QACxD,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,CAAC,WAAW,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;YAC1B,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;SAC5B;QACD,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;QACzB,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,aAAa,CAAC,OAAO,EAAE;gBAC/C,MAAM,CAAC,KAAK,EAAE,CAAC;aAChB;QACH,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,EAAkB,EAA2B,EAAE;QAC1E,MAAM,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,EAAiB,CAAC;QAC3D,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE;YAC1B,OAAO,SAAS,CAAC;SAClB;QACD,IAAI,EAAE,CAAC,UAAU,EAAE;YACjB,OAAO,mBAAmB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;SAC3C;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAA4B,EAAE;QACjD,OAAO,MAAM,CAAC,QAAQ,EAAE;YACtB,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YACjD,CAAC,CAAE,MAAM,CAAC,eAAe,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,CAAC,WAAW,EAAkB,CAAC;IACxF,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAW,EAAE;QACjC,MAAM,gBAAgB,GAAG,YAAY,EAAE,CAAC;QACxC,MAAM,MAAM,GAAG,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAC5E,OAAO,MAAM,IAAI,SAAS,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,MAAC,gBAAgB,IACf,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,KAAK,EACX,GAAG,EAAE,SAAS,EACd,WAAW,EAAE,CAAC,CAAa,EAAE,EAAE;oBAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,OAAO,CAAC,IAAI,CAAC,CAAC;oBACd,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC/B,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;wBAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,OAAO,CAAC,IAAI,CAAC,CAAC;wBACd,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;qBAC/B;yBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;wBAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;qBAC3B;yBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE;wBAC1D,OAAO,CAAC,KAAK,CAAC,CAAC;qBAChB;gBACH,CAAC,EACD,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;oBACzB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACtB,CAAC,EACD,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,mBAChC,IAAI,gBACP,GAAG,CAAC,CAAC,6BAA6B,CAAC,KAAK,CAAC,CACnD,mBAAmB,CACpB,KAAK,aAAa,EAAE,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,iBAAiB,EAAE,EAAE,oCAG5D,yBAAO,aAAa,EAAE,GAAQ,EAC9B,KAAC,IAAI,IAAC,IAAI,EAAC,kBAAkB,GAAG,IACf,EAClB,SAAS,CAAC,OAAO,IAAI,CACpB,KAAC,OAAO,IAAC,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YAClE,CAAC,CAAC,mBAAmB,CAAC,GACf,CACX,EACD,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,gBAAgB,EACpB,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,UAAU,YAEf,KAAC,IAAI,IACH,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;wBACnD,EAAE,EAAE,IAAI;wBACR,OAAO,EAAE,IAAI;wBACb,SAAS,EAAE,CAAC,OAAO,CAAC;wBACpB,QAAQ,EAAE,IAAI,KAAK,YAAY,EAAE;qBAClC,CAAC,CAAC,EACH,cAAc,EAAE,SAAS,CAAC,OAAO,IAAI,SAAS,EAC9C,cAAc,EAAE,KAAK,EACrB,IAAI,EAAC,eAAe,EACpB,GAAG,EAAE,OAAO,EACZ,WAAW,EAAE,YAAmD,GAChE,GACM,IACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC, useRef, useState, MouseEvent, KeyboardEvent, FocusEvent, useMemo } from 'react';\nimport { Editor } from 'tinymce';\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 { getKeyCommand } from '../../RichTextEditor/Toolbar/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: 20ch;\n`;\n\ntype FormatTypes = 'p' \| 'h1' \| 'h2' \| 'h3' \| 'h4';\n\nconst textMapping = {\n p: 'Normal',\n h1: 'Heading 1',\n h2: 'Heading 2',\n h3: 'Heading 3',\n h4: 'Heading 4',\n '': 'Normal',\n div: 'Normal'\n} as const;\n\nconst getTextCommand = (num: number, osx: boolean) => {\n return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nexport const getTextFormats = (\n osx: boolean = false\n): { text: string; subText: string; type: FormatTypes }[] => {\n return [\n { text: 'Normal', subText: getTextCommand(0, osx), type: 'p' },\n { text: 'Heading 1', subText: getTextCommand(1, osx), type: 'h1' },\n { text: 'Heading 2', subText: getTextCommand(2, osx), type: 'h2' },\n { text: 'Heading 3', subText: getTextCommand(3, osx), type: 'h3' },\n { text: 'Heading 4', subText: getTextCommand(4, osx), type: 'h4' }\n ];\n};\n\nconst TextSelect: FC<{ osx: boolean; editor: Editor }> = ({ osx, editor }) => {\n const t = useI18n();\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\n const textFormats = useMemo(() => {\n return getTextFormats(osx);\n }, [osx]);\n\n useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {\n setOpen(false);\n });\n\n const onTextSelect = (type: FormatTypes, e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n editor.execCommand('FormatBlock', false, type);\n if (!openedByClick.current) {\n buttonRef.current?.focus();\n }\n setOpen(false);\n selecting.current = true;\n setTimeout(() => {\n if (!editor.hasFocus() && openedByClick.current) {\n editor.focus();\n }\n }, 0);\n };\n\n const getParentTextFormat = (el: Element \| Node): FormatTypes \| undefined => {\n const elTagName = el.nodeName.toLowerCase() as FormatTypes;\n if (textMapping[elTagName]) {\n return elTagName;\n }\n if (el.parentNode) {\n return getParentTextFormat(el.parentNode);\n }\n return undefined;\n };\n\n const activeFormat = (): FormatTypes \| undefined => {\n return editor.hasFocus()\n ? getParentTextFormat(editor.selection.getNode())\n : (editor.contentDocument?.body?.firstChild?.nodeName.toLowerCase() as FormatTypes);\n };\n\n const getFormatText = (): string => {\n const activeFormatType = activeFormat();\n const format = activeFormatType ? textMapping[activeFormatType] : 'Unknown';\n return format \|\| 'Unknown';\n };\n\n return (\n <>\n <StyledTextSelect\n variant='simple'\n type='button'\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={`${t('rte_text_formatting_toolbar')}. ${t(\n 'rte_heading_style'\n )}. ${getFormatText()} ${t('selected').toLocaleLowerCase()}`}\n aria-haspopup\n >\n <span>{getFormatText()}</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 === activeFormat()\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/Editor/Toolbar/TextSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useRef, useState, MouseEvent, KeyboardEvent, FocusEvent, useMemo } from 'react';\nimport { Editor } from 'tinymce';\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 { getKeyCommand } from '../../RichTextEditor/Toolbar/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: 20ch;\n`;\n\ntype FormatTypes = 'p' \| 'h1' \| 'h2' \| 'h3' \| 'h4';\n\nconst textMapping = {\n p: 'Normal',\n h1: 'Heading 1',\n h2: 'Heading 2',\n h3: 'Heading 3',\n h4: 'Heading 4',\n '': 'Normal',\n div: 'Normal'\n} as const;\n\nconst getTextCommand = (num: number, osx: boolean) => {\n return getKeyCommand(osx, ({ ctrl, alt }) => `${ctrl}${alt}${num}`);\n};\n\nexport const getTextFormats = (\n osx: boolean = false\n): { text: string; subText: string; type: FormatTypes }[] => {\n return [\n { text: 'Normal', subText: getTextCommand(0, osx), type: 'p' },\n { text: 'Heading 1', subText: getTextCommand(1, osx), type: 'h1' },\n { text: 'Heading 2', subText: getTextCommand(2, osx), type: 'h2' },\n { text: 'Heading 3', subText: getTextCommand(3, osx), type: 'h3' },\n { text: 'Heading 4', subText: getTextCommand(4, osx), type: 'h4' }\n ];\n};\n\nconst TextSelect: FC<{ osx: boolean; editor: Editor }> = ({ osx, editor }) => {\n const t = useI18n();\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\n const textFormats = useMemo(() => {\n return getTextFormats(osx);\n }, [osx]);\n\n useOuterEvent('click', [buttonRef, popoverRef, menuRef], () => {\n setOpen(false);\n });\n\n const onTextSelect = (type: FormatTypes, e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n editor.execCommand('FormatBlock', false, type);\n if (!openedByClick.current) {\n buttonRef.current?.focus();\n }\n setOpen(false);\n selecting.current = true;\n setTimeout(() => {\n if (!editor.hasFocus() && openedByClick.current) {\n editor.focus();\n }\n }, 0);\n };\n\n const getParentTextFormat = (el: Element \| Node): FormatTypes \| undefined => {\n const elTagName = el.nodeName.toLowerCase() as FormatTypes;\n if (textMapping[elTagName]) {\n return elTagName;\n }\n if (el.parentNode) {\n return getParentTextFormat(el.parentNode);\n }\n return undefined;\n };\n\n const activeFormat = (): FormatTypes \| undefined => {\n return editor.hasFocus()\n ? getParentTextFormat(editor.selection.getNode())\n : (editor.contentDocument?.body?.firstChild?.nodeName.toLowerCase() as FormatTypes);\n };\n\n const getFormatText = (): string => {\n const activeFormatType = activeFormat();\n const format = activeFormatType ? textMapping[activeFormatType] : 'Unknown';\n return format \|\| 'Unknown';\n };\n\n return (\n <>\n <StyledTextSelect\n variant='simple'\n type='button'\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={`${t('rte_text_formatting_toolbar')}. ${t(\n 'rte_heading_style'\n )}. ${getFormatText()} ${t('selected').toLocaleLowerCase()}`}\n aria-haspopup\n >\n <span>{getFormatText()}</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 === activeFormat()\n }))}\n focusControlEl={buttonRef.current ?? undefined}\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"]}

package/lib/components/Editor/Toolbar/Toolbar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAkBjC,OAAO,EAAa,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEjF,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;~~AA0B~~/C,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC;AAuFD,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA4I7B,CAAC;AAEF,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAkBjC,OAAO,EAAa,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEjF,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AA4B/C,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC;AAuFD,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA4I7B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Editor/Toolbar/Toolbar.js CHANGED Viewed

@@ -10,17 +10,23 @@ import ImageButton from './ImageButton';
 import TextSelect from './TextSelect';
 import AnchorButton from './AnchorButton';
 registerIcon(indentIcon, unindentIcon);
-const StyledToolbar = styled.div(({ sticky, theme }) => `
-  background-color: ${theme.base.palette['primary-background']};
-  border-radius: calc(0.25 * ${theme.base['border-radius']});
-  overflow: auto;
-  padding: 0.125rem;
-  ${sticky &&
-    css `
+const StyledToolbar = styled.div(({ sticky, theme }) => {
+    return css `
+    background-color: ${theme.base.palette['primary-background']};
+    border-radius: calc(0.25 * ${theme.base['border-radius']});
+    overflow: auto;
+    padding: calc(0.5 * ${theme.base.spacing});
+    ${sticky &&
+        css `
       position: sticky;
       bottom: 0;
     `}
-`);
+    &:has(:focus-visible) {
+      box-shadow: ${theme.base.shadow['focus-group']};
+    }
+  `;
+});
 StyledToolbar.defaultProps = defaultThemeProp;
 const isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');
 // Function that returns the text styling buttons
@@ -82,7 +88,7 @@ const Toolbar = ({ features, sticky, editor, customActions }) => {
     const t = useI18n();
     const { macintosh: osx } = useOS();
     const toolbarRef = useRef(null);
-    useArrows(toolbarRef, { selector: 'button', dir: 'left-right' });
+    useArrows(toolbarRef, { selector: 'button, input[type="file"]', dir: 'left-right' });
     const [activeFeatures, setActiveFeatures] = useState(() => createActiveFeaturesMap(features));
     const [activeStyles, setActiveStyles] = useState(() => ({
         bold: false,

package/lib/components/Editor/Toolbar/Toolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useState, useEffect, useRef, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\nimport { Editor } from 'tinymce';\n\nimport {\n Flex,\n Icon,\n useArrows,\n useI18n,\n defaultThemeProp,\n TranslationPack,\n registerIcon,\n useOS,\n navigatorIsAvailable\n} from '@pega/cosmos-react-core';\nimport { TranslationFunction } from '@pega/cosmos-react-core/lib/i18n/translate';\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 ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport { StyleType, Features } from '../../RichTextEditor/Toolbar/Toolbar.types';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport { CustomAction } from '../Editor.types';\n\nimport ImageButton from './ImageButton';\nimport TextSelect from './TextSelect';\nimport AnchorButton from './AnchorButton';\n\nregisterIcon(indentIcon, unindentIcon);\n\nconst StyledToolbar = styled.div<{ sticky?: boolean }>(\n ({ sticky, theme }) => `\n background-color: ${theme.base.palette['primary-background']};\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n overflow: auto;\n padding: 0.125rem;\n ${\n sticky &&\n css`\n position: sticky;\n bottom: 0;\n `\n }\n`\n);\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport interface ToolbarProps {\n features: Features[];\n sticky?: boolean;\n editor: Editor;\n customActions?: CustomAction[];\n}\n\ntype StyleButtonType = {\n style: StyleType;\n text: string;\n icon?: string;\n label?: string;\n format: string;\n element?: string;\n tooltip: string;\n};\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\n// Function that returns the text styling buttons\nfunction renderStyleButtons(\n editor: Editor,\n t: TranslationFunction<TranslationPack>,\n activeStyles: { [key: string]: boolean },\n osx: boolean\n) {\n const inlineStyleButtons: StyleButtonType[] = [\n {\n style: 'BOLD',\n text: 'B',\n format: 'Bold',\n label: t('rte_bold'),\n element: 'strong',\n tooltip: isMobile\n ? `${t('rte_bold')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_bold')} (${ctrl}B, ${ctrl}${shift}B)`)\n },\n {\n style: 'ITALIC',\n text: 'I',\n format: 'Italic',\n label: t('rte_italic'),\n element: 'i',\n tooltip: isMobile\n ? `${t('rte_italic')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_italic')} (${ctrl}I, ${ctrl}${shift}I)`)\n },\n {\n style: 'STRIKE-THROUGH',\n text: 'S',\n format: 'Strikethrough',\n element: 's',\n label: t('rte_strike_through'),\n tooltip: isMobile\n ? `${t('rte_strike_through')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_strike_through')} (${ctrl}${shift}X)`)\n }\n ];\n\n return inlineStyleButtons.map(({ format, style, text, label, tooltip }) => {\n return (\n <ToolbarButton\n key={style}\n onMouseDown={e => {\n e.preventDefault();\n if (editor.hasFocus()) {\n editor.execCommand(format);\n } else {\n editor.focus();\n setTimeout(() => {\n editor.execCommand(format);\n }, 0);\n }\n }}\n styleType={style}\n active={activeStyles[format.toLowerCase()]}\n tooltip={tooltip}\n label={label}\n >\n {text}\n </ToolbarButton>\n );\n });\n}\n\n// Takes the features array and transforms it into a map for faster lookup\nfunction createActiveFeaturesMap(features: Features[]) {\n return features.reduce((acc, feature) => {\n return { ...acc, [feature]: true };\n }, {} as { [F in Features]: boolean });\n}\n\nconst Toolbar: FC<ToolbarProps> = ({ features, sticky, editor, customActions }: ToolbarProps) => {\n const t = useI18n();\n const { macintosh: osx } = useOS();\n const toolbarRef = useRef<HTMLElement>(null);\n\n useArrows(toolbarRef, { selector: 'button', dir: 'left-right' });\n\n const [activeFeatures, setActiveFeatures] = useState(() => createActiveFeaturesMap(features));\n const [activeStyles, setActiveStyles] = useState(() => ({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n }));\n\n const getIndentationToolTip = (type: 'indent' \| 'unindent') =>\n getKeyCommand(osx, ({ shift, alt }) =>\n type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`\n );\n const tooltipMobile = (type: 'indent' \| 'unindent') =>\n type === 'indent' ? `${t('rte_indent')}` : `${t('rte_unindent')}`;\n\n useEffect(() => {\n setActiveFeatures(createActiveFeaturesMap(features));\n }, [features]);\n\n const getActiveStyles = useCallback(() => {\n if (editor.hasFocus()) {\n setActiveStyles({\n bold: editor.queryCommandState('Bold'),\n italic: editor.queryCommandState('Italic'),\n strikethrough: editor.queryCommandState('Strikethrough'),\n unorderedList: editor.queryCommandState('InsertUnorderedList'),\n orderedList: editor.queryCommandState('InsertOrderedList')\n });\n } else {\n setActiveStyles({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n });\n }\n }, [editor, setActiveStyles]);\n\n useEffect(() => {\n getActiveStyles();\n editor.on('SelectionChange', getActiveStyles);\n return () => {\n editor.off('SelectionChange', getActiveStyles);\n };\n }, [editor, getActiveStyles]);\n\n return (\n <Flex as={StyledToolbar} sticky={sticky} container={{ justify: 'between' }} ref={toolbarRef}>\n <Flex container={{ alignItems: 'end' }}>\n <TextSelect osx={osx} editor={editor} />\n {activeFeatures['inline-styling'] && renderStyleButtons(editor, t, activeStyles, osx)}\n {activeFeatures.lists && (\n <>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('InsertUnorderedList');\n }}\n active={activeStyles.unorderedList}\n tooltip={\n isMobile\n ? `${t('rte_bulleted_list')}`\n : getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`\n )\n }\n label={t('rte_bulleted_list')}\n >\n <Icon name='list' />\n </ToolbarButton>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('InsertOrderedList');\n }}\n active={activeStyles.orderedList}\n tooltip={t('rte_numbered_list')}\n label={t('rte_numbered_list')}\n >\n <Icon name='list-number' />\n </ToolbarButton>\n </>\n )}\n {activeFeatures.indentation && (\n <>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('Indent');\n }}\n label={t('rte_indent')}\n tooltip={isMobile ? tooltipMobile('indent') : getIndentationToolTip('indent')}\n >\n <Icon name='indent' />\n </ToolbarButton>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('Outdent');\n }}\n label={t('rte_unindent')}\n tooltip={isMobile ? tooltipMobile('unindent') : getIndentationToolTip('unindent')}\n >\n <Icon name='unindent' />\n </ToolbarButton>\n </>\n )}\n </Flex>\n <Flex container={{ alignItems: 'end' }}>\n {customActions?.map(action => {\n return (\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n action.onMouseDown(e);\n }}\n tooltip={action.text}\n label={action.text}\n key={action.icon}\n active={action.active?.(editor) \|\| false}\n >\n <Icon name={action.icon} />\n </ToolbarButton>\n );\n })}\n {activeFeatures.links && <AnchorButton editor={editor} osx={osx} />}\n {activeFeatures.images && <ImageButton editor={editor} />}\n </Flex>\n </Flex>\n );\n};\n\nexport default Toolbar;\n"]}
1	+ {"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useState, useEffect, useRef, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\nimport { Editor } from 'tinymce';\n\nimport {\n Flex,\n Icon,\n useArrows,\n useI18n,\n defaultThemeProp,\n TranslationPack,\n registerIcon,\n useOS,\n navigatorIsAvailable\n} from '@pega/cosmos-react-core';\nimport { TranslationFunction } from '@pega/cosmos-react-core/lib/i18n/translate';\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 ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport { StyleType, Features } from '../../RichTextEditor/Toolbar/Toolbar.types';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport { CustomAction } from '../Editor.types';\n\nimport ImageButton from './ImageButton';\nimport TextSelect from './TextSelect';\nimport AnchorButton from './AnchorButton';\n\nregisterIcon(indentIcon, unindentIcon);\n\nconst StyledToolbar = styled.div<{ sticky?: boolean }>(({ sticky, theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n overflow: auto;\n padding: calc(0.5 * ${theme.base.spacing});\n ${sticky &&\n css`\n position: sticky;\n bottom: 0;\n `}\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n});\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport interface ToolbarProps {\n features: Features[];\n sticky?: boolean;\n editor: Editor;\n customActions?: CustomAction[];\n}\n\ntype StyleButtonType = {\n style: StyleType;\n text: string;\n icon?: string;\n label?: string;\n format: string;\n element?: string;\n tooltip: string;\n};\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\n// Function that returns the text styling buttons\nfunction renderStyleButtons(\n editor: Editor,\n t: TranslationFunction<TranslationPack>,\n activeStyles: { [key: string]: boolean },\n osx: boolean\n) {\n const inlineStyleButtons: StyleButtonType[] = [\n {\n style: 'BOLD',\n text: 'B',\n format: 'Bold',\n label: t('rte_bold'),\n element: 'strong',\n tooltip: isMobile\n ? `${t('rte_bold')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_bold')} (${ctrl}B, ${ctrl}${shift}B)`)\n },\n {\n style: 'ITALIC',\n text: 'I',\n format: 'Italic',\n label: t('rte_italic'),\n element: 'i',\n tooltip: isMobile\n ? `${t('rte_italic')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_italic')} (${ctrl}I, ${ctrl}${shift}I)`)\n },\n {\n style: 'STRIKE-THROUGH',\n text: 'S',\n format: 'Strikethrough',\n element: 's',\n label: t('rte_strike_through'),\n tooltip: isMobile\n ? `${t('rte_strike_through')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_strike_through')} (${ctrl}${shift}X)`)\n }\n ];\n\n return inlineStyleButtons.map(({ format, style, text, label, tooltip }) => {\n return (\n <ToolbarButton\n key={style}\n onMouseDown={e => {\n e.preventDefault();\n if (editor.hasFocus()) {\n editor.execCommand(format);\n } else {\n editor.focus();\n setTimeout(() => {\n editor.execCommand(format);\n }, 0);\n }\n }}\n styleType={style}\n active={activeStyles[format.toLowerCase()]}\n tooltip={tooltip}\n label={label}\n >\n {text}\n </ToolbarButton>\n );\n });\n}\n\n// Takes the features array and transforms it into a map for faster lookup\nfunction createActiveFeaturesMap(features: Features[]) {\n return features.reduce((acc, feature) => {\n return { ...acc, [feature]: true };\n }, {} as { [F in Features]: boolean });\n}\n\nconst Toolbar: FC<ToolbarProps> = ({ features, sticky, editor, customActions }: ToolbarProps) => {\n const t = useI18n();\n const { macintosh: osx } = useOS();\n const toolbarRef = useRef<HTMLElement>(null);\n\n useArrows(toolbarRef, { selector: 'button, input[type=\"file\"]', dir: 'left-right' });\n\n const [activeFeatures, setActiveFeatures] = useState(() => createActiveFeaturesMap(features));\n const [activeStyles, setActiveStyles] = useState(() => ({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n }));\n\n const getIndentationToolTip = (type: 'indent' \| 'unindent') =>\n getKeyCommand(osx, ({ shift, alt }) =>\n type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`\n );\n const tooltipMobile = (type: 'indent' \| 'unindent') =>\n type === 'indent' ? `${t('rte_indent')}` : `${t('rte_unindent')}`;\n\n useEffect(() => {\n setActiveFeatures(createActiveFeaturesMap(features));\n }, [features]);\n\n const getActiveStyles = useCallback(() => {\n if (editor.hasFocus()) {\n setActiveStyles({\n bold: editor.queryCommandState('Bold'),\n italic: editor.queryCommandState('Italic'),\n strikethrough: editor.queryCommandState('Strikethrough'),\n unorderedList: editor.queryCommandState('InsertUnorderedList'),\n orderedList: editor.queryCommandState('InsertOrderedList')\n });\n } else {\n setActiveStyles({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n });\n }\n }, [editor, setActiveStyles]);\n\n useEffect(() => {\n getActiveStyles();\n editor.on('SelectionChange', getActiveStyles);\n return () => {\n editor.off('SelectionChange', getActiveStyles);\n };\n }, [editor, getActiveStyles]);\n\n return (\n <Flex as={StyledToolbar} sticky={sticky} container={{ justify: 'between' }} ref={toolbarRef}>\n <Flex container={{ alignItems: 'end' }}>\n <TextSelect osx={osx} editor={editor} />\n {activeFeatures['inline-styling'] && renderStyleButtons(editor, t, activeStyles, osx)}\n {activeFeatures.lists && (\n <>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('InsertUnorderedList');\n }}\n active={activeStyles.unorderedList}\n tooltip={\n isMobile\n ? `${t('rte_bulleted_list')}`\n : getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`\n )\n }\n label={t('rte_bulleted_list')}\n >\n <Icon name='list' />\n </ToolbarButton>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('InsertOrderedList');\n }}\n active={activeStyles.orderedList}\n tooltip={t('rte_numbered_list')}\n label={t('rte_numbered_list')}\n >\n <Icon name='list-number' />\n </ToolbarButton>\n </>\n )}\n {activeFeatures.indentation && (\n <>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('Indent');\n }}\n label={t('rte_indent')}\n tooltip={isMobile ? tooltipMobile('indent') : getIndentationToolTip('indent')}\n >\n <Icon name='indent' />\n </ToolbarButton>\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n editor.execCommand('Outdent');\n }}\n label={t('rte_unindent')}\n tooltip={isMobile ? tooltipMobile('unindent') : getIndentationToolTip('unindent')}\n >\n <Icon name='unindent' />\n </ToolbarButton>\n </>\n )}\n </Flex>\n <Flex container={{ alignItems: 'end' }}>\n {customActions?.map(action => {\n return (\n <ToolbarButton\n onMouseDown={e => {\n e.preventDefault();\n action.onMouseDown(e);\n }}\n tooltip={action.text}\n label={action.text}\n key={action.icon}\n active={action.active?.(editor) \|\| false}\n >\n <Icon name={action.icon} />\n </ToolbarButton>\n );\n })}\n {activeFeatures.links && <AnchorButton editor={editor} osx={osx} />}\n {activeFeatures.images && <ImageButton editor={editor} />}\n </Flex>\n </Flex>\n );\n};\n\nexport default Toolbar;\n"]}

package/lib/components/RichTextEditor/DecoratorComponents/Link.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,GAAG,~~CAOvB~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/DecoratorComponents/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,GAAG,CAGvB,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

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

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

	@@ -1 +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,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAO,EAAE,EAAE;IACzE,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,CAAC;IAC5D,OAAO,~~CACL,~~KAAC,IAAI,IAAC,IAAI,EAAE,GAAG,~~EAAE~~,~~MAAM,EAAC,~~QAAQ,~~YAC7B~~,~~QAAQ,GACJ,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> = ({ children, contentState, entityKey }: any) => {\n const { url } = contentState.getEntity(entityKey).getData();\n return ~~(\n~~ <Link href={url} ~~target='_blank'>\n~~ {children}\n </Link>\n ~~);\n~~};\n\nexport default LinkEntity;\n"]}
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,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAO,EAAE,EAAE;IACzE,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,CAAC;IAC5D,OAAO,KAAC,IAAI,IAAC,IAAI,EAAE,GAAG,YAAG,QAAQ,GAAQ,CAAC;AAC5C,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Link } from '@pega/cosmos-react-core';\n\nconst LinkEntity: FC<any> = ({ children, contentState, entityKey }: any) => {\n const { url } = contentState.getEntity(entityKey).getData();\n return <Link href={url}>{children}</Link>;\n};\n\nexport default LinkEntity;\n"]}