@pega/cosmos-react-rte 4.0.0-dev.8.3 → 4.0.0-dev.8.4
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.
|
@@ -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;
|
|
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,CA+XpF,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useRef, useState, useLayoutEffect } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
|
-
import { Button, CardContent, CardHeader, Checkbox, createUID, Flex, Form, Grid, Icon, Input, NumberInput, Popover, Text, useElement, useI18n, useOuterEvent, useUID, VisuallyHiddenText } from '@pega/cosmos-react-core';
|
|
4
|
+
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';
|
|
5
5
|
const IgnoreMouseEventsIcon = styled.svg `
|
|
6
6
|
pointer-events: none;
|
|
7
7
|
`;
|
|
@@ -243,7 +243,7 @@ const ImageEditor = ({ editorEl, editor, onChange }) => {
|
|
|
243
243
|
editor.off('keydown', onKeyDown);
|
|
244
244
|
};
|
|
245
245
|
}, [editor, imgEl, showEditButton]);
|
|
246
|
-
|
|
246
|
+
useAfterInitialEffect(() => {
|
|
247
247
|
if (showImagePopover) {
|
|
248
248
|
editor.selection.getSel()?.collapseToEnd();
|
|
249
249
|
if (editorOpenedWithEnter.current) {
|
|
@@ -251,8 +251,9 @@ const ImageEditor = ({ editorEl, editor, onChange }) => {
|
|
|
251
251
|
editorOpenedWithEnter.current = false;
|
|
252
252
|
}
|
|
253
253
|
}
|
|
254
|
-
else
|
|
254
|
+
else {
|
|
255
255
|
editor.focus();
|
|
256
|
+
}
|
|
256
257
|
}, [showImagePopover]);
|
|
257
258
|
useLayoutEffect(() => {
|
|
258
259
|
if (imgEl && buttonEl) {
|
|
@@ -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.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 } else editor.focus();\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 [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.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 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 {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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-rte",
|
|
3
|
-
"version": "4.0.0-dev.8.
|
|
3
|
+
"version": "4.0.0-dev.8.4",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "4.0.0-dev.8.
|
|
23
|
+
"@pega/cosmos-react-core": "4.0.0-dev.8.4",
|
|
24
24
|
"@popperjs/core": "^2.11.6",
|
|
25
25
|
"@types/marked": "^4.0.2",
|
|
26
26
|
"@types/parse5": "^6.0.0",
|