@pega/cosmos-react-rte 9.0.0-build.9.9 → 9.0.0

package/lib/components/RichTextEditor/utils/slateConverter.js

@@ -1,4 +1,11 @@
-import { Element, Text } from 'slate';
+import { Element as SlateElement, Text as SlateText } from 'slate';
+import { disallowedURI } from '@pega/cosmos-react-core';
+const EXCLUDED_ATTR_KEYS = new Set([
+    'type',
+    'children',
+    'isHeaderCell',
+    'isHeaderRow'
+]);
 export const slateToHtmlMap = {
     link: 'a',
     'heading-1': 'h1',
@@ -13,6 +20,7 @@ export const slateToHtmlMap = {
     'code-block': 'pre',
     'horizontal-rule': 'hr',
     table: 'table',
+    'table-head': 'thead',
     'table-body': 'tbody',
     'table-row': 'tr',
     'table-cell': 'td',
@@ -29,65 +37,105 @@ export const slateToHtmlMap = {
 const getAttrs = (el) => {
     // eslint-disable-next-line sonarjs/no-small-switch
     switch (el.type) {
-        case 'list-item':
-            return [
-                { name: 'data-id', value: el.id },
-                { name: 'data-parent-id', value: el.parentId },
-                { name: 'data-order', value: el.order },
-                { name: 'data-level', value: el.level }
-            ].reduce((acc, attr) => {
-                if (attr.value) {
-                    return `${acc} ${attr.name}='${attr.value}'`;
-                }
-                return acc;
-            }, '');
+        case 'list-item': {
+            const attrs = [];
+            if (el.id) {
+                attrs.push(['data-id', el.id]);
+            }
+            if (el.parentId) {
+                attrs.push(['data-parent-id', el.parentId]);
+            }
+            if (el.order !== undefined) {
+                attrs.push(['data-order', `${el.order}`]);
+            }
+            if (el.level !== undefined) {
+                attrs.push(['data-level', `${el.level}`]);
+            }
+            return attrs;
+        }
         default:
-            return Object.keys(el).reduce((innerAcc, key) => {
-                return key !== 'type' && key !== 'children'
-                    ? `${innerAcc} ${key}='${el[key]}'`
-                    : innerAcc;
-            }, '');
+            return Object.entries(el).flatMap(([key, value]) => {
+                const lowerKey = key.toLowerCase();
+                if (EXCLUDED_ATTR_KEYS.has(key) ||
+                    // Strip event handlers.
+                    lowerKey.startsWith('on') ||
+                    value === undefined) {
+                    return [];
+                }
+                if (lowerKey === 'href' && disallowedURI.test(value)) {
+                    return [];
+                }
+                return [[lowerKey, `${value}`]];
+            });
     }
 };
 // Recursive function to reduce Slate Nodes into an HTML string
 export const constructHtml = (nodes) => {
     return nodes.reduce((acc, node) => {
-        if (Element.isElement(node) &&
+        if (SlateElement.isElement(node) &&
             (node.type === 'image-placeholder' || node.type === 'custom' || node.type === 'override'))
             return acc;
-        const htmlTag = Element.isElement(node) ? slateToHtmlMap[node.type] : undefined;
-        let html;
-        if (Text.isText(node)) {
+        const isElement = SlateElement.isElement(node);
+        if (SlateText.isText(node)) {
             const { text, ...restNode } = node;
             // Reducing inline style properties from a single Slate Node into the correct HTML tags
-            html = Object.keys(restNode).reduce((innerAcc, key, i) => {
+            const html = Object.keys(restNode).reduce((innerAcc, key, i) => {
                 const tag = slateToHtmlMap[key];
-                // Add the href attribute if needed
-                const firstInnerTag = tag === 'a' ? `${tag} href='${restNode[key]}'` : tag;
+                if (!tag)
+                    return innerAcc;
+                let innerEl;
+                if (tag === 'a') {
+                    const anchor = document.createElement(tag);
+                    if (restNode.href && !disallowedURI.test(restNode.href)) {
+                        anchor.setAttribute('href', restNode.href);
+                    }
+                    innerEl = anchor;
+                }
+                else {
+                    innerEl = document.createElement(tag);
+                }
                 if (i === 0) {
-                    return `<${firstInnerTag}>${text}</${tag}>`;
+                    innerEl.textContent = text;
+                    return innerEl;
                 }
-                return `<${firstInnerTag}>${innerAcc}</${tag}>`;
-            }, '');
-            if (!html) {
-                html = text;
+                if (innerAcc) {
+                    innerEl.appendChild(innerAcc);
+                }
+                return innerEl;
+            }, null);
+            if (html) {
+                return acc.concat(html);
             }
+            return acc.concat(document.createTextNode(text));
         }
-        else {
-            const attrs = getAttrs(node);
-            html = `<${htmlTag}${attrs}>${constructHtml(node.children || [])}</${htmlTag}>`;
+        let htmlTag = isElement ? slateToHtmlMap[node.type] : undefined;
+        if (isElement && node.type === 'table-cell' && node.isHeaderCell) {
+            htmlTag = 'th';
         }
-        return `${acc}${html}`;
-    }, '');
+        if (!htmlTag)
+            return acc;
+        const el = document.createElement(htmlTag);
+        for (const [attr, val] of getAttrs(node)) {
+            el.setAttribute(attr, val);
+        }
+        for (const child of constructHtml(node.children)) {
+            el.appendChild(child);
+        }
+        return acc.concat(el);
+    }, []);
 };
 export const convertSlateToHtml = (nodes) => {
     if (nodes.length === 1 &&
-        Element.isElement(nodes[0]) &&
-        Text.isText(nodes[0].children[0]) &&
+        SlateElement.isElement(nodes[0]) &&
+        SlateText.isText(nodes[0].children[0]) &&
         nodes[0].children[0].text === '') {
         return '';
     }
     const htmlNodes = constructHtml(nodes);
-    return `<body>${htmlNodes}</body>`;
+    const body = document.createElement('body');
+    for (const node of htmlNodes) {
+        body.appendChild(node);
+    }
+    return body.outerHTML;
 };
 //# sourceMappingURL=slateConverter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slateConverter.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/slateConverter.ts"],"names":[],"mappings":"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","sourcesContent":["import { Element, Text } from 'slate';\nimport type { PegaCustom } from 'slate';\n\nimport type { ExcludeStrict } from '@pega/cosmos-react-core';\n\nexport const slateToHtmlMap = {\n  link: 'a',\n  'heading-1': 'h1',\n  'heading-2': 'h2',\n  'heading-3': 'h3',\n  'heading-4': 'h4',\n  'unordered-list': 'ul',\n  'ordered-list': 'ol',\n  'list-item': 'li',\n  'block-quote': 'blockquote',\n  // FIXME: Should render <pre><code>, but I don't know if this is really used anymore.\n  'code-block': 'pre',\n  'horizontal-rule': 'hr',\n  table: 'table',\n  'table-body': 'tbody',\n  'table-row': 'tr',\n  'table-cell': 'td',\n  text: 'span',\n  paragraph: 'p',\n  bold: 'b',\n  'line-through': 'del',\n  italic: 'i',\n  code: 'code',\n  href: 'a',\n  image: 'img'\n};\n\n// Reduces the properties in a slate node into the correct html attributes, mostly used for list-items at the moment\nconst getAttrs = (\n  el: ExcludeStrict<Element, PegaCustom.ImagePlaceholderElement | PegaCustom.CustomElement>\n) => {\n  // eslint-disable-next-line sonarjs/no-small-switch\n  switch (el.type) {\n    case 'list-item':\n      return [\n        { name: 'data-id', value: el.id },\n        { name: 'data-parent-id', value: el.parentId },\n        { name: 'data-order', value: el.order },\n        { name: 'data-level', value: el.level }\n      ].reduce((acc, attr) => {\n        if (attr.value) {\n          return `${acc} ${attr.name}='${attr.value}'`;\n        }\n        return acc;\n      }, '');\n    default:\n      return Object.keys(el).reduce((innerAcc, key) => {\n        return key !== 'type' && key !== 'children'\n          ? `${innerAcc} ${key}='${el[key as keyof Element]}'`\n          : innerAcc;\n      }, '');\n  }\n};\n\n// Recursive function to reduce Slate Nodes into an HTML string\nexport const constructHtml = (nodes: (Element | Text)[]): string => {\n  return nodes.reduce((acc, node) => {\n    if (\n      Element.isElement(node) &&\n      (node.type === 'image-placeholder' || node.type === 'custom' || node.type === 'override')\n    )\n      return acc;\n\n    const htmlTag = Element.isElement(node) ? slateToHtmlMap[node.type] : undefined;\n    let html;\n    if (Text.isText(node)) {\n      const { text, ...restNode } = node;\n      // Reducing inline style properties from a single Slate Node into the correct HTML tags\n      html = Object.keys(restNode).reduce((innerAcc, key, i) => {\n        const tag = slateToHtmlMap[key as 'bold' | 'line-through' | 'italic' | 'href'];\n        // Add the href attribute if needed\n        const firstInnerTag = tag === 'a' ? `${tag} href='${restNode[key as 'href']}'` : tag;\n\n        if (i === 0) {\n          return `<${firstInnerTag}>${text}</${tag}>`;\n        }\n        return `<${firstInnerTag}>${innerAcc}</${tag}>`;\n      }, '');\n      if (!html) {\n        html = text;\n      }\n    } else {\n      const attrs = getAttrs(node);\n      html = `<${htmlTag}${attrs}>${constructHtml(\n        (node.children as (Element | Text)[]) || []\n      )}</${htmlTag}>`;\n    }\n    return `${acc}${html}`;\n  }, '');\n};\n\nexport const convertSlateToHtml = (nodes: (Element | Text)[]): string => {\n  if (\n    nodes.length === 1 &&\n    Element.isElement(nodes[0]) &&\n    Text.isText(nodes[0].children[0]) &&\n    nodes[0].children[0].text === ''\n  ) {\n    return '';\n  }\n  const htmlNodes = constructHtml(nodes);\n  return `<body>${htmlNodes}</body>`;\n};\n"]}
+{"version":3,"file":"slateConverter.js","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/utils/slateConverter.ts"],"names":[],"mappings":"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","sourcesContent":["import { Element as SlateElement, Text as SlateText } from 'slate';\nimport type { PegaCustom } from 'slate';\n\nimport { disallowedURI } from '@pega/cosmos-react-core';\nimport type { ExcludeStrict } from '@pega/cosmos-react-core';\n\nconst EXCLUDED_ATTR_KEYS: ReadonlySet<string> = new Set([\n  'type',\n  'children',\n  'isHeaderCell',\n  'isHeaderRow'\n]);\n\nexport const slateToHtmlMap = {\n  link: 'a',\n  'heading-1': 'h1',\n  'heading-2': 'h2',\n  'heading-3': 'h3',\n  'heading-4': 'h4',\n  'unordered-list': 'ul',\n  'ordered-list': 'ol',\n  'list-item': 'li',\n  'block-quote': 'blockquote',\n  // FIXME: Should render <pre><code>, but I don't know if this is really used anymore.\n  'code-block': 'pre',\n  'horizontal-rule': 'hr',\n  table: 'table',\n  'table-head': 'thead',\n  'table-body': 'tbody',\n  'table-row': 'tr',\n  'table-cell': 'td',\n  text: 'span',\n  paragraph: 'p',\n  bold: 'b',\n  'line-through': 'del',\n  italic: 'i',\n  code: 'code',\n  href: 'a',\n  image: 'img'\n};\n\n// Reduces the properties in a slate node into the correct html attributes, mostly used for list-items at the moment\nconst getAttrs = (\n  el: ExcludeStrict<SlateElement, PegaCustom.ImagePlaceholderElement | PegaCustom.CustomElement>\n): [string, string][] => {\n  // eslint-disable-next-line sonarjs/no-small-switch\n  switch (el.type) {\n    case 'list-item': {\n      const attrs: [string, string][] = [];\n\n      if (el.id) {\n        attrs.push(['data-id', el.id]);\n      }\n\n      if (el.parentId) {\n        attrs.push(['data-parent-id', el.parentId]);\n      }\n\n      if (el.order !== undefined) {\n        attrs.push(['data-order', `${el.order}`]);\n      }\n\n      if (el.level !== undefined) {\n        attrs.push(['data-level', `${el.level}`]);\n      }\n\n      return attrs;\n    }\n\n    default:\n      return Object.entries(el).flatMap(([key, value]) => {\n        const lowerKey = key.toLowerCase();\n\n        if (\n          EXCLUDED_ATTR_KEYS.has(key) ||\n          // Strip event handlers.\n          lowerKey.startsWith('on') ||\n          value === undefined\n        ) {\n          return [];\n        }\n\n        if (lowerKey === 'href' && disallowedURI.test(value)) {\n          return [];\n        }\n\n        return [[lowerKey, `${value}`]];\n      });\n  }\n};\n\n// Recursive function to reduce Slate Nodes into an HTML string\nexport const constructHtml = (nodes: (SlateElement | SlateText)[]): Node[] => {\n  return nodes.reduce((acc: Node[], node) => {\n    if (\n      SlateElement.isElement(node) &&\n      (node.type === 'image-placeholder' || node.type === 'custom' || node.type === 'override')\n    )\n      return acc;\n\n    const isElement = SlateElement.isElement(node);\n\n    if (SlateText.isText(node)) {\n      const { text, ...restNode } = node;\n      // Reducing inline style properties from a single Slate Node into the correct HTML tags\n      const html = Object.keys(restNode).reduce((innerAcc: Element | null, key, i) => {\n        const tag = slateToHtmlMap[key as 'bold' | 'line-through' | 'italic' | 'href'];\n\n        if (!tag) return innerAcc;\n\n        let innerEl: HTMLElement;\n\n        if (tag === 'a') {\n          const anchor = document.createElement(tag);\n          if (restNode.href && !disallowedURI.test(restNode.href)) {\n            anchor.setAttribute('href', restNode.href);\n          }\n          innerEl = anchor;\n        } else {\n          innerEl = document.createElement(tag);\n        }\n\n        if (i === 0) {\n          innerEl.textContent = text;\n          return innerEl;\n        }\n\n        if (innerAcc) {\n          innerEl.appendChild(innerAcc);\n        }\n\n        return innerEl;\n      }, null);\n\n      if (html) {\n        return acc.concat(html);\n      }\n\n      return acc.concat(document.createTextNode(text));\n    }\n\n    let htmlTag = isElement ? slateToHtmlMap[node.type] : undefined;\n    if (isElement && node.type === 'table-cell' && node.isHeaderCell) {\n      htmlTag = 'th';\n    }\n\n    if (!htmlTag) return acc;\n\n    const el = document.createElement(htmlTag);\n\n    for (const [attr, val] of getAttrs(node)) {\n      el.setAttribute(attr, val);\n    }\n\n    for (const child of constructHtml(node.children)) {\n      el.appendChild(child);\n    }\n\n    return acc.concat(el);\n  }, []);\n};\n\nexport const convertSlateToHtml = (nodes: (SlateElement | SlateText)[]): string => {\n  if (\n    nodes.length === 1 &&\n    SlateElement.isElement(nodes[0]) &&\n    SlateText.isText(nodes[0].children[0]) &&\n    nodes[0].children[0].text === ''\n  ) {\n    return '';\n  }\n\n  const htmlNodes = constructHtml(nodes);\n  const body = document.createElement('body');\n  for (const node of htmlNodes) {\n    body.appendChild(node);\n  }\n\n  return body.outerHTML;\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-rte",
-  "version": "9.0.0-build.9.9",
+  "version": "9.0.0",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": false,
@@ -14,13 +14,35 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "9.0.0-build.9.9",
+    "@intevation/tiptap-extension-office-paste": "^0.1.2",
+    "@pega/cosmos-react-core": "9.0.0",
     "@popperjs/core": "^2.11.6",
+    "@tiptap/core": "^3.12.1",
+    "@tiptap/extension-blockquote": "^3.12.1",
+    "@tiptap/extension-color": "^3.12.1",
+    "@tiptap/extension-font-family": "^3.12.1",
+    "@tiptap/extension-highlight": "^3.12.1",
+    "@tiptap/extension-image": "^3.12.1",
+    "@tiptap/extension-link": "^3.12.1",
+    "@tiptap/extension-paragraph": "^3.12.1",
+    "@tiptap/extension-placeholder": "^3.12.1",
+    "@tiptap/extension-subscript": "^3.12.1",
+    "@tiptap/extension-superscript": "^3.12.1",
+    "@tiptap/extension-table": "^3.12.1",
+    "@tiptap/extension-table-cell": "^3.12.1",
+    "@tiptap/extension-table-header": "^3.12.1",
+    "@tiptap/extension-table-row": "^3.12.1",
+    "@tiptap/extension-text-align": "^3.12.1",
+    "@tiptap/extension-text-style": "^3.12.1",
+    "@tiptap/extension-underline": "^3.12.1",
+    "@tiptap/pm": "^3.12.1",
+    "@tiptap/react": "^3.12.1",
+    "@tiptap/starter-kit": "^3.12.1",
     "@types/parse5": "^6.0.0",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
-    "@types/styled-components": "^5.1.26",
-    "@types/stylis": "^4.0.2",
+    "@types/stylis": "^4.2.7",
+    "dompurify": "^3.2.6",
     "global-tld-list": "0.0.862",
     "marked": "^15.0.6",
     "parse5": "^6.0.1",
@@ -31,15 +53,15 @@
     "slate": "^0.76.1",
     "slate-history": "^0.66.0",
     "slate-react": "^0.76.1",
-    "styled-components": "^5.2.0",
-    "stylis": "^4.0.13",
-    "tinymce": "^6.8.5"
+    "styled-components": "~6.3.11",
+    "stylis": "^4.3.6"
   },
   "devDependencies": {
     "@storybook/addon-actions": "~8.2.9",
     "@storybook/react": "~8.2.9",
     "@storybook/theming": "~8.2.9",
     "@testing-library/react": "^16.0.0",
-    "typescript": "~5.8.3"
+    "@testing-library/user-event": "^14.6.1",
+    "typescript": "~5.9.3"
   }
 }

package/lib/components/Editor/ImageEditor.d.ts

@@ -1,10 +0,0 @@
-import type { FC } from 'react';
-import type { Editor } from 'tinymce';
-export declare const imgHoverClass: string;
-declare const ImageEditor: FC<{
-    editorEl: HTMLElement;
-    editor: Editor;
-    onChange: () => void;
-}>;
-export default ImageEditor;
-//# sourceMappingURL=ImageEditor.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ImageEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/ImageEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,EAAE,EAKH,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AA0BtC,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,CA0YpF,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Editor/ImageEditor.js

@@ -1,292 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState, useLayoutEffect } from 'react';
-import styled from 'styled-components';
-import { remToPx, stripUnit } from 'polished';
-import { Button, Checkbox, createUID, Grid, Icon, Input, NumberInput, useAfterInitialEffect, useElement, useI18n, useTheme, useUID, VisuallyHiddenText } from '@pega/cosmos-react-core';
-import { StyledFormDialog } from './Editor.styles';
-const IgnoreMouseEventsIcon = styled(Icon) `
-  pointer-events: none;
-`;
-export const imgHoverClass = createUID();
-const ImageEditor = ({ editorEl, editor, onChange }) => {
-    const t = useI18n();
-    const id = useUID();
-    const theme = useTheme();
-    const [showImageDialog, setShowImageDialog] = useState(false);
-    const [imageEditHover, setImageEditHover] = useState(false);
-    const [imageEditFocus, setImageEditFocus] = useState(false);
-    const [canShowButtons, setCanShowButtons] = useState(false);
-    const [imgEl, setImageEl] = useState(null);
-    const [imgElements, setImageElements] = useState([]);
-    const [editButtonEl, setEditButtonEl] = useElement(null);
-    const [deleteButtonEl, setDeleteButtonEl] = useElement(null);
-    const [width, setWidth] = useState(0);
-    const [height, setHeight] = useState(0);
-    const [aspectRatio, setAspectRatio] = useState(0);
-    const [altText, setAltText] = useState('');
-    const [customSize, setCustomSize] = useState(false);
-    const [keyCommandText, setKeyCommandText] = useState('');
-    const imageDialogRef = useRef(null);
-    const altTextInputRef = useRef(null);
-    const editorOpenedWithEnter = useRef(false);
-    const [btnStyle, setBtnStyle] = useState({});
-    const onImageClick = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setShowImageDialog(true);
-    };
-    const calculateBtnStyles = (el) => {
-        const elementRect = el.getBoundingClientRect();
-        const padding = Number(stripUnit(remToPx(theme.base.spacing)));
-        return {
-            position: 'absolute',
-            display: 'flex',
-            top: elementRect.top + padding,
-            left: elementRect.right +
-                padding -
-                ((editButtonEl?.scrollWidth ?? 0) + (deleteButtonEl?.scrollWidth ?? 0) * 2)
-        };
-    };
-    const onImageMouseEnter = (e) => {
-        if (!showImageDialog) {
-            const el = e.target;
-            setImageEditHover(true);
-            setImageEl(el);
-        }
-    };
-    const onImageMouseLeave = (e) => {
-        if (e.relatedTarget && e.relatedTarget.id !== id && !showImageDialog) {
-            setImageEl(null);
-            setImageEditHover(false);
-        }
-    };
-    const setImageState = () => {
-        if (imgEl) {
-            let imgHeight;
-            let imgWidth;
-            let hasHeightOrWidthAttribute = false;
-            if (imgEl.getAttribute('height')) {
-                imgHeight = parseInt(imgEl.getAttribute('height'), 10);
-                hasHeightOrWidthAttribute = true;
-            }
-            else {
-                imgHeight = imgEl.naturalHeight;
-            }
-            if (imgEl.getAttribute('width')) {
-                imgWidth = parseInt(imgEl.getAttribute('width'), 10);
-                hasHeightOrWidthAttribute = true;
-            }
-            else {
-                imgWidth = imgEl.naturalWidth;
-            }
-            setAltText(imgEl.getAttribute('alt') || '');
-            setHeight(imgHeight);
-            setWidth(imgWidth);
-            setAspectRatio(imgWidth / imgHeight);
-            setCustomSize(hasHeightOrWidthAttribute);
-        }
-    };
-    const onCheckBoxClick = (e) => {
-        e.stopPropagation();
-    };
-    const onInputClick = (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-    };
-    const onInputFocus = (e) => {
-        e.stopPropagation();
-    };
-    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.
-    const onHeightChange = (incomingValue) => {
-        const inputHeight = parseInt(incomingValue, 10);
-        setHeight(inputHeight);
-        setWidth(inputHeight * aspectRatio);
-    };
-    const onWidthChange = (incomingValue) => {
-        const inputWidth = parseInt(incomingValue, 10);
-        setWidth(inputWidth);
-        setHeight(inputWidth / aspectRatio);
-    };
-    const onImageChangeSubmit = () => {
-        if (imgEl) {
-            if (customSize) {
-                if (Number.isNaN(height) || Number.isNaN(width)) {
-                    imgEl.removeAttribute('height');
-                    imgEl.removeAttribute('width');
-                    setHeight(imgEl.naturalHeight);
-                    setWidth(imgEl.naturalWidth);
-                }
-                else {
-                    imgEl.setAttribute('height', height.toString());
-                    imgEl.setAttribute('width', width.toString());
-                }
-            }
-            else {
-                imgEl.removeAttribute('height');
-                imgEl.removeAttribute('width');
-            }
-            imgEl.setAttribute('alt', altText);
-        }
-        editor.selection.select(editor.dom.select(`img[src="${imgEl?.src}"]`)[0]);
-        setImageEl(null);
-        setShowImageDialog(false);
-        onChange();
-    };
-    const onImageChangeCancel = () => {
-        setImageEl(null);
-        setShowImageDialog(false);
-    };
-    const onImageDelete = () => {
-        if (imgEl) {
-            imgEl.remove();
-        }
-        setImageEl(null);
-        setShowImageDialog(false);
-        setImageEditFocus(false);
-        onChange();
-    };
-    // Keeps the imageElements state up to date with existing and newly added img tags inside of TinyMCE
-    useEffect(() => {
-        const iframeDoc = editor.getDoc();
-        const imageElements = iframeDoc?.querySelectorAll('img') ?? [];
-        setImageElements(() => {
-            return [...imageElements];
-        });
-        const observer = new MutationObserver(mutations => {
-            mutations.forEach(mutation => {
-                if (mutation.type === 'childList' &&
-                    (mutation.addedNodes.length || mutation.removedNodes.length)) {
-                    const newImageElements = iframeDoc?.querySelectorAll('img') ?? [];
-                    setImageElements(() => [...newImageElements]);
-                }
-            });
-        });
-        if (iframeDoc) {
-            observer.observe(iframeDoc.body, { childList: true, subtree: true });
-        }
-        return () => {
-            observer.disconnect();
-        };
-    }, [editorEl, editor, setImageElements]);
-    // Adds event listeners to HTML img elements inside of TinyMCE
-    // This has to be done because there are no react components for these images
-    useEffect(() => {
-        imgElements.forEach(imgElement => {
-            imgElement.addEventListener('mouseenter', onImageMouseEnter);
-            imgElement.addEventListener('mouseout', onImageMouseLeave);
-            imgElement.addEventListener('click', onImageClick);
-        });
-        return () => {
-            imgElements.forEach(imgElement => {
-                imgElement.removeEventListener('mouseenter', onImageMouseEnter);
-                imgElement.removeEventListener('mouseout', onImageMouseLeave);
-                imgElement.removeEventListener('click', onImageClick);
-            });
-        };
-    }, [imgElements, onImageMouseEnter, onImageMouseLeave, onImageClick]);
-    useEffect(() => {
-        setImageState();
-        imgEl?.setAttribute('class', imgHoverClass);
-        if (imgEl && imgEl.clientHeight > 64 && imgEl.clientWidth > 104) {
-            setCanShowButtons(true);
-        }
-        else {
-            setCanShowButtons(false);
-        }
-        return () => {
-            imgEl?.removeAttribute('class');
-        };
-    }, [imgEl]);
-    useEffect(() => {
-        const onKeyUp = () => {
-            const selection = editor.selection.getSel();
-            let nextToImg = false;
-            // If your selection is next to an image on it's own line (not breaking text)
-            if (selection &&
-                selection.anchorNode?.childNodes.length === 1 &&
-                selection.anchorNode?.firstChild?.nodeName === 'IMG' &&
-                selection.anchorOffset === 0) {
-                setImageEl(selection.anchorNode.firstChild);
-                setImageEditFocus(true);
-                nextToImg = true;
-                // If your selection is next to an image that breaks text up inside of a paragraph
-            }
-            else if (selection?.anchorNode?.nextSibling?.nodeName === 'IMG') {
-                setImageEl(selection.anchorNode.nextSibling);
-                setImageEditFocus(true);
-                nextToImg = true;
-            }
-            else if (selection && imgEl && imageEditFocus) {
-                setImageEl(null);
-                setImageEditFocus(false);
-                setKeyCommandText('');
-            }
-            if (nextToImg) {
-                setKeyCommandText(t('rte_image_key_command'));
-            }
-        };
-        const onMouseUp = () => {
-            const selection = editor.selection.getSel();
-            // If your selection is next to an image
-            if (selection?.anchorNode?.firstChild?.nodeName === 'IMG') {
-                setImageEl(selection.anchorNode.firstChild);
-                setImageEditFocus(true);
-            }
-        };
-        const onKeyDown = (e) => {
-            if (e.key === 'Enter' && imageEditFocus) {
-                e.stopPropagation();
-                e.preventDefault();
-                editorOpenedWithEnter.current = true;
-                setShowImageDialog(true);
-            }
-            else if ((e.key === 'Del' || e.key === 'Backspace') && imageEditFocus) {
-                onImageDelete();
-            }
-        };
-        editor.on('keyup', onKeyUp);
-        editor.on('mouseup', onMouseUp);
-        editor.on('keydown', onKeyDown, true);
-        return () => {
-            editor.off('keyup', onKeyUp);
-            editor.off('mouseup', onMouseUp);
-            editor.off('keydown', onKeyDown);
-        };
-    }, [editor, imgEl, imageEditFocus]);
-    useAfterInitialEffect(() => {
-        if (showImageDialog) {
-            editor.selection.getSel()?.collapseToEnd();
-            if (editorOpenedWithEnter.current) {
-                altTextInputRef.current?.focus();
-                editorOpenedWithEnter.current = false;
-            }
-        }
-        else {
-            editor.focus();
-        }
-    }, [showImageDialog]);
-    useLayoutEffect(() => {
-        if (imgEl && editButtonEl && deleteButtonEl) {
-            setBtnStyle(calculateBtnStyles(imgEl));
-        }
-    }, [imgEl, editButtonEl, deleteButtonEl]);
-    return (_jsxs(_Fragment, { children: [(imageEditFocus || imageEditHover) && imgEl && canShowButtons && (_jsxs("div", { id: id, style: btnStyle, children: [_jsx(Button, { ref: setEditButtonEl, icon: true, label: t('rte_edit_image'), "aria-label": t('rte_edit_image', [altText]), onClick: () => {
-                            setShowImageDialog(true);
-                        }, children: _jsx(IgnoreMouseEventsIcon, { name: 'pencil' }) }), _jsx(Button, { ref: setDeleteButtonEl, icon: true, label: t('rte_delete_image'), "aria-label": t('rte_delete_image', [altText]), onClick: onImageDelete, children: _jsx(IgnoreMouseEventsIcon, { name: 'trash' }) })] })), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: keyCommandText }), showImageDialog && (editButtonEl || !canShowButtons) && imgEl && (_jsx(StyledFormDialog, { ref: imageDialogRef, target: editButtonEl && canShowButtons ? editButtonEl : imgEl, heading: t('rte_image_settings'), onCancel: onImageChangeCancel, onSubmit: onImageChangeSubmit, onDismiss: () => {
-                    setShowImageDialog(false);
-                }, children: _jsxs(Grid, { container: {
-                        gap: 2,
-                        areas: customSize
-                            ? '"desc desc" "radio radio" "width height"'
-                            : '"desc desc" "radio radio"'
-                    }, children: [_jsx(Grid, { item: { area: 'desc' }, children: _jsx(Input, { label: t('description'), value: altText, onClick: onInputClick, onChange: onAltTextChange, onFocus: onInputFocus, info: t('rte_image_description_info'), ref: altTextInputRef }) }), _jsx(Grid, { item: { area: 'radio' }, children: _jsx(Checkbox, { checked: customSize, label: t('rte_image_custom_size'), onClick: onCheckBoxClick, onChange: (e) => {
-                                    setCustomSize(e.target.checked);
-                                } }) }), customSize && (_jsxs(_Fragment, { children: [_jsx(Grid, { item: { area: 'width' }, children: _jsx(NumberInput, { label: t('rte_width_in_pixels'), value: Math.floor(Math.max(width, 1)).toString(), onClick: onInputClick, onChange: onWidthChange }) }), _jsx(Grid, { item: { area: 'height' }, children: _jsx(NumberInput, { label: t('rte_height_in_pixels'), value: Math.floor(Math.max(height, 1)).toString(), onClick: onInputClick, onChange: onHeightChange }) })] }))] }) }))] }));
-};
-export default ImageEditor;
-//# sourceMappingURL=ImageEditor.js.map