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

package/lib/components/Editor/Toolbar/FontSizeSelect.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import { Popover, Icon, registerIcon, useOuterEvent, Menu, Button, defaultThemeProp, useI18n, Tooltip, calculateFontSize, isInstance } from '@pega/cosmos-react-core';
+import * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';
+import useEscapeKey from '../hooks/useEscapeKey';
+import useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';
+registerIcon(arrowMicroDownIcon);
+const StyledFontSizeSelect = styled(Button)(({ theme }) => {
+    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    color: ${theme.base.palette['foreground-color']};
+    display: inline-flex;
+    align-items: center;
+    height: calc(3.5 * ${theme.base.spacing});
+    padding: 0 calc(0.5 * ${theme.base.spacing});
+    font-size: ${fontSizes.xxs};
+    min-width: 6ch;
+
+    span {
+      white-space: nowrap;
+    }
+  `;
+});
+StyledFontSizeSelect.defaultProps = defaultThemeProp;
+const StyledSelectMenu = styled.div(({ theme }) => {
+    return css `
+    min-width: 8ch;
+    max-height: calc(30 * ${theme.base.spacing});
+  `;
+});
+StyledSelectMenu.defaultProps = defaultThemeProp;
+const FONT_SIZES = [
+    { id: '8', label: '8px', value: '8px' },
+    { id: '9', label: '9px', value: '9px' },
+    { id: '10', label: '10px', value: '10px' },
+    { id: '11', label: '11px', value: '11px' },
+    { id: '12', label: '12px', value: '12px' },
+    { id: '14', label: '14px', value: '14px' },
+    { id: '16', label: '16px', value: '16px' },
+    { id: '18', label: '18px', value: '18px' },
+    { id: '20', label: '20px', value: '20px' },
+    { id: '24', label: '24px', value: '24px' },
+    { id: '28', label: '28px', value: '28px' },
+    { id: '32', label: '32px', value: '32px' },
+    { id: '36', label: '36px', value: '36px' },
+    { id: '48', label: '48px', value: '48px' },
+    { id: '72', label: '72px', value: '72px' }
+];
+const FontSizeSelect = ({ editor, ...restProps }) => {
+    const t = useI18n();
+    const [open, setOpen] = useState(false);
+    const selecting = useRef(false);
+    const openedByClick = useRef(false);
+    const buttonRef = useRef(null);
+    const popoverRef = useRef(null);
+    const menuRef = useRef(null);
+    useOuterEvent('mousedown', [buttonRef, popoverRef, menuRef], () => {
+        if (open) {
+            setOpen(false);
+        }
+    });
+    const handleEscapeClose = useCallback(() => {
+        setOpen(false);
+        buttonRef.current?.focus();
+    }, []);
+    useEscapeKey(open, handleEscapeClose, editor);
+    useCloseOnEditorClick(open, handleEscapeClose);
+    const onSizeSelect = (sizeId, e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        const size = FONT_SIZES.find(s => s.id === sizeId);
+        if (size) {
+            editor.chain().focus().setFontSize(size.value).run();
+        }
+        if (!openedByClick.current) {
+            buttonRef.current?.focus();
+        }
+        setOpen(false);
+        selecting.current = true;
+        setTimeout(() => {
+            selecting.current = false;
+            if (!editor.isFocused && openedByClick.current) {
+                editor.commands.focus();
+            }
+        }, 0);
+    };
+    const getActiveSize = () => {
+        const attrs = editor.getAttributes('textStyle');
+        const { fontSize } = attrs;
+        if (typeof fontSize !== 'string' || !fontSize)
+            return '12px';
+        const match = FONT_SIZES.find(s => s.value === fontSize);
+        return match ? match.label : '12px';
+    };
+    const getActiveSizeId = () => {
+        const attrs = editor.getAttributes('textStyle');
+        const { fontSize } = attrs;
+        if (typeof fontSize !== 'string' || !fontSize)
+            return '12';
+        const match = FONT_SIZES.find(s => s.value === fontSize);
+        return match ? match.id : '12';
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledFontSizeSelect, { ...restProps, variant: 'simple', type: 'button', icon: false, ref: buttonRef, "data-toolbar-item": 'true', onMouseDown: (e) => {
+                    e.preventDefault();
+                    if (!open) {
+                        openedByClick.current = true;
+                    }
+                    setOpen(!open);
+                }, onKeyDown: (e) => {
+                    if (e.key === 'Enter' && !selecting.current) {
+                        e.preventDefault();
+                        setOpen(true);
+                        openedByClick.current = false;
+                    }
+                    else if (e.key === 'Enter') {
+                        e.preventDefault();
+                        selecting.current = false;
+                    }
+                    else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+                        setOpen(false);
+                    }
+                    else if (e.key === 'Escape' && open) {
+                        e.preventDefault();
+                        setOpen(false);
+                    }
+                }, onFocus: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, onBlur: (e) => {
+                    const { relatedTarget } = e;
+                    if (isInstance(relatedTarget, Node) &&
+                        !buttonRef.current?.contains(relatedTarget) &&
+                        !popoverRef.current?.contains(relatedTarget) &&
+                        !menuRef.current?.contains(relatedTarget)) {
+                        setOpen(false);
+                    }
+                }, onClick: (e) => e.stopPropagation(), "aria-expanded": open, "aria-label": `${t('rte_font_size')}. ${getActiveSize()} ${t('selected').toLocaleLowerCase()}`, "aria-haspopup": true, children: [_jsx("span", { children: getActiveSize() }), _jsx(Icon, { name: 'arrow-micro-down' })] }), buttonRef.current && (_jsx(Tooltip, { target: buttonRef.current, showDelay: 'none', hideDelay: 'none', children: t('rte_font_size') })), _jsx(Popover, { show: open, as: StyledSelectMenu, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, children: _jsx(Menu, { items: FONT_SIZES.map(({ id, label }) => ({
+                        id,
+                        primary: label,
+                        selected: id === getActiveSizeId()
+                    })), focusControlEl: buttonRef.current ?? undefined, mode: 'single-select', ref: menuRef, onItemClick: onSizeSelect }) })] }));
+};
+export default FontSizeSelect;
+//# sourceMappingURL=FontSizeSelect.js.map

package/lib/components/Editor/Toolbar/FontSizeSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontSizeSelect.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/FontSizeSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useCallback } from 'react';\nimport type { MouseEvent, KeyboardEvent, FocusEvent } from 'react';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\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  isInstance\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\n\nimport useEscapeKey from '../hooks/useEscapeKey';\nimport useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';\n\nregisterIcon(arrowMicroDownIcon);\n\nconst StyledFontSizeSelect = 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    height: calc(3.5 * ${theme.base.spacing});\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    font-size: ${fontSizes.xxs};\n    min-width: 6ch;\n\n    span {\n      white-space: nowrap;\n    }\n  `;\n});\n\nStyledFontSizeSelect.defaultProps = defaultThemeProp;\n\nconst StyledSelectMenu = styled.div(({ theme }) => {\n  return css`\n    min-width: 8ch;\n    max-height: calc(30 * ${theme.base.spacing});\n  `;\n});\n\nStyledSelectMenu.defaultProps = defaultThemeProp;\n\nconst FONT_SIZES = [\n  { id: '8', label: '8px', value: '8px' },\n  { id: '9', label: '9px', value: '9px' },\n  { id: '10', label: '10px', value: '10px' },\n  { id: '11', label: '11px', value: '11px' },\n  { id: '12', label: '12px', value: '12px' },\n  { id: '14', label: '14px', value: '14px' },\n  { id: '16', label: '16px', value: '16px' },\n  { id: '18', label: '18px', value: '18px' },\n  { id: '20', label: '20px', value: '20px' },\n  { id: '24', label: '24px', value: '24px' },\n  { id: '28', label: '28px', value: '28px' },\n  { id: '32', label: '32px', value: '32px' },\n  { id: '36', label: '36px', value: '36px' },\n  { id: '48', label: '48px', value: '48px' },\n  { id: '72', label: '72px', value: '72px' }\n];\n\ninterface FontSizeSelectProps {\n  editor: TiptapEditor;\n  'data-testid'?: string;\n}\n\nconst FontSizeSelect = ({ editor, ...restProps }: FontSizeSelectProps) => {\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<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  useOuterEvent('mousedown', [buttonRef, popoverRef, menuRef], () => {\n    if (open) {\n      setOpen(false);\n    }\n  });\n\n  const handleEscapeClose = useCallback(() => {\n    setOpen(false);\n    buttonRef.current?.focus();\n  }, []);\n\n  useEscapeKey(open, handleEscapeClose, editor);\n  useCloseOnEditorClick(open, handleEscapeClose);\n\n  const onSizeSelect = (sizeId: string, e: MouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n\n    const size = FONT_SIZES.find(s => s.id === sizeId);\n    if (size) {\n      editor.chain().focus().setFontSize(size.value).run();\n    }\n\n    if (!openedByClick.current) {\n      buttonRef.current?.focus();\n    }\n    setOpen(false);\n    selecting.current = true;\n    setTimeout(() => {\n      selecting.current = false;\n      if (!editor.isFocused && openedByClick.current) {\n        editor.commands.focus();\n      }\n    }, 0);\n  };\n\n  const getActiveSize = (): string => {\n    const attrs = editor.getAttributes('textStyle');\n    const { fontSize } = attrs;\n    if (typeof fontSize !== 'string' || !fontSize) return '12px';\n    const match = FONT_SIZES.find(s => s.value === fontSize);\n    return match ? match.label : '12px';\n  };\n\n  const getActiveSizeId = (): string => {\n    const attrs = editor.getAttributes('textStyle');\n    const { fontSize } = attrs;\n    if (typeof fontSize !== 'string' || !fontSize) return '12';\n    const match = FONT_SIZES.find(s => s.value === fontSize);\n    return match ? match.id : '12';\n  };\n\n  return (\n    <>\n      <StyledFontSizeSelect\n        {...restProps}\n        variant='simple'\n        type='button'\n        icon={false}\n        ref={buttonRef}\n        data-toolbar-item='true'\n        onMouseDown={(e: MouseEvent) => {\n          e.preventDefault();\n          if (!open) {\n            openedByClick.current = true;\n          }\n          setOpen(!open);\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          } else if (e.key === 'Escape' && open) {\n            e.preventDefault();\n            setOpen(false);\n          }\n        }}\n        onFocus={(e: FocusEvent) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        onBlur={(e: FocusEvent) => {\n          const { relatedTarget } = e;\n          if (\n            isInstance(relatedTarget, Node) &&\n            !buttonRef.current?.contains(relatedTarget) &&\n            !popoverRef.current?.contains(relatedTarget) &&\n            !menuRef.current?.contains(relatedTarget)\n          ) {\n            setOpen(false);\n          }\n        }}\n        onClick={(e: MouseEvent) => e.stopPropagation()}\n        aria-expanded={open}\n        aria-label={`${t('rte_font_size')}. ${getActiveSize()} ${t('selected').toLocaleLowerCase()}`}\n        aria-haspopup\n      >\n        <span>{getActiveSize()}</span>\n        <Icon name='arrow-micro-down' />\n      </StyledFontSizeSelect>\n      {buttonRef.current && (\n        <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n          {t('rte_font_size')}\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={FONT_SIZES.map(({ id, label }) => ({\n            id,\n            primary: label,\n            selected: id === getActiveSizeId()\n          }))}\n          focusControlEl={buttonRef.current ?? undefined}\n          mode='single-select'\n          ref={menuRef}\n          onItemClick={onSizeSelect}\n        />\n      </Popover>\n    </>\n  );\n};\n\nexport default FontSizeSelect;\n"]}

package/lib/components/Editor/Toolbar/ImageButton.d.ts

@@ -1,8 +1,8 @@
-import type { FC } from 'react';
-import type { Editor } from 'tinymce';
+import type { Editor as TiptapEditor } from '@tiptap/core';
 import type { ForwardProps } from '@pega/cosmos-react-core';
-declare const ImageButton: FC<{
-    editor: Editor;
-} & ForwardProps>;
+declare const ImageButton: ({ editor, imageInsertionMode, ...restProps }: {
+    editor: TiptapEditor;
+    imageInsertionMode: "file" | "url" | "all";
+} & ForwardProps) => import("react/jsx-runtime").JSX.Element;
 export default ImageButton;
 //# sourceMappingURL=ImageButton.d.ts.map

package/lib/components/Editor/Toolbar/ImageButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/ImageButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAItC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAY5D,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,CAqCtD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ImageButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/ImageButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AAa3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAU5D,QAAA,MAAM,WAAW,GAAI,8CAIlB;IAAE,MAAM,EAAE,YAAY,CAAC;IAAC,kBAAkB,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,CAAA;CAAE,GAAG,YAAY,4CAuOrF,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Editor/Toolbar/ImageButton.js

@@ -1,30 +1,143 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useContext } from 'react';
-import styled from 'styled-components';
-import { hideVisually } from 'polished';
-import { Icon, registerIcon, useI18n } from '@pega/cosmos-react-core';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useContext, useEffect, useCallback } from 'react';
+import { createUID, FileInput, Grid, Icon, Input, RadioButton, RadioButtonGroup, registerIcon, useI18n } from '@pega/cosmos-react-core';
 import * as pictureIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/picture.icon';
 import ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';
 import EditorContext from '../Editor.context';
+import { StyledFormDialog } from '../Editor.styles';
+import useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';
 registerIcon(pictureIcon);
-const StyledImageInput = styled.input `
-  ${hideVisually()}
-`;
-const ImageButton = ({ editor, ...restProps }) => {
+const ImageButton = ({ editor, imageInsertionMode, ...restProps }) => {
     const t = useI18n();
-    const fileInputRef = useRef(null);
     const { addImage } = useContext(EditorContext);
-    const onImageInputChange = (e) => {
-        if (e.target.files) {
-            addImage(e.target.files[0]);
-            if (fileInputRef.current) {
-                fileInputRef.current.value = '';
+    const [showImageDialog, setShowImageDialog] = useState(false);
+    const imagebuttonRef = useRef(null);
+    const imagepopoverRef = useRef(null);
+    const [imageTitle, setImageTitle] = useState('');
+    const [imageLinkTitle, setImageLinkTitle] = useState('');
+    const [selectedAttachmentType, setSelectedAttachmentType] = useState(() => {
+        if (imageInsertionMode === 'url') {
+            return 'link';
+        }
+        return 'file';
+    });
+    const [url, setUrl] = useState('');
+    const [tempfile, setTempFile] = useState();
+    const [incorrectUrl, setIncorrectUrl] = useState(false);
+    const [fileEmpty, setFileEmpty] = useState(false);
+    useEffect(() => {
+        if (imageInsertionMode === 'url') {
+            setSelectedAttachmentType('link');
+        }
+        else {
+            setSelectedAttachmentType('file');
+        }
+    }, [imageInsertionMode]);
+    const onImageInputChange = (addedFiles) => {
+        setTempFile(addedFiles[0]);
+        setFileEmpty(false);
+    };
+    const resetMenu = () => {
+        setUrl('');
+        setIncorrectUrl(false);
+        setImageLinkTitle('');
+        setImageTitle('');
+        setTempFile(undefined);
+        setSelectedAttachmentType('file');
+        setFileEmpty(false);
+        setShowImageDialog(false);
+    };
+    // Close dialog when clicking inside the editor iframe
+    const handleEditorClick = useCallback(() => {
+        if (showImageDialog) {
+            resetMenu();
+        }
+    }, [showImageDialog]);
+    useCloseOnEditorClick(showImageDialog, handleEditorClick);
+    const onImageAddSubmit = () => {
+        if (selectedAttachmentType === 'file') {
+            if (tempfile) {
+                addImage(tempfile, undefined, imageTitle);
+                resetMenu();
+            }
+            else {
+                setFileEmpty(true);
             }
         }
+        else if (selectedAttachmentType === 'link') {
+            if (!url || incorrectUrl) {
+                setIncorrectUrl(true);
+                return;
+            }
+            const imageUid = createUID();
+            // Tiptap API - insert image using the Image extension command
+            editor
+                .chain()
+                .focus()
+                .setImage({
+                src: url,
+                alt: imageLinkTitle || t('rte_broken_image')
+            })
+                .updateAttributes('image', { 'data-id': imageUid })
+                .run();
+            // Add error handler for broken images if no alt text was provided
+            if (!imageLinkTitle) {
+                // Use the editor's document to target the correct iframe
+                const editorDoc = editor.view.dom.ownerDocument;
+                requestAnimationFrame(() => {
+                    const imageEl = editorDoc.querySelector(`img[data-id="${imageUid}"]`);
+                    if (imageEl) {
+                        imageEl.onerror = () => {
+                            imageEl.alt = t('rte_broken_image');
+                        };
+                    }
+                });
+            }
+            resetMenu();
+        }
+    };
+    const onImageAddCancel = () => {
+        resetMenu();
     };
-    return (_jsxs(_Fragment, { children: [_jsx(StyledImageInput, { type: 'file', accept: 'image/*', ref: fileInputRef, onChange: onImageInputChange, tabIndex: -1, "aria-hidden": true }), _jsx(ToolbarButton, { onClick: () => {
-                    fileInputRef?.current?.click();
-                }, tooltip: t('rte_image'), label: t('rte_image'), ...restProps, children: _jsx(Icon, { name: 'picture' }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { ref: imagebuttonRef, onClick: () => {
+                    setShowImageDialog(true);
+                }, onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setShowImageDialog(true);
+                    }
+                }, tooltip: t('rte_image'), label: t('rte_image'), ...restProps, children: _jsx(Icon, { name: 'picture' }) }), showImageDialog && imagebuttonRef.current && (_jsx("form", { children: _jsx(StyledFormDialog, { heading: t('rte_add_image'), onSubmit: onImageAddSubmit, onCancel: onImageAddCancel, onDismiss: () => {
+                        resetMenu();
+                    }, target: imagebuttonRef.current, ref: imagepopoverRef, children: _jsxs(Grid, { container: {
+                            gap: 2
+                        }, children: [imageInsertionMode === 'all' && (_jsx(Grid, { container: { rowGap: 2 }, children: _jsxs(RadioButtonGroup, { name: 'chooseListView', label: t('rte_image_source'), onChange: e => {
+                                        setSelectedAttachmentType(e.target.value);
+                                    }, "data-testid": 'chooseListView', inline: true, required: true, children: [_jsx(RadioButton, { id: 'file', label: t('rte_image_file'), value: 'file', checked: selectedAttachmentType === 'file' }), _jsx(RadioButton, { id: 'link', label: t('rte_image_link'), value: 'link', checked: selectedAttachmentType === 'link' })] }) })), selectedAttachmentType === 'file' && (_jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(FileInput, { multiple: false, label: t('rte_image_file'), onFilesAdded: onImageInputChange, required: true, accept: 'image/*', info: fileEmpty ? t('rte_empty_image') : '', status: fileEmpty ? 'error' : undefined, files: tempfile
+                                            ? [
+                                                {
+                                                    name: tempfile.name,
+                                                    id: createUID(),
+                                                    thumbnail: URL.createObjectURL(tempfile),
+                                                    onDelete: () => {
+                                                        setTempFile(undefined);
+                                                    }
+                                                }
+                                            ]
+                                            : [] }), _jsx(Input, { label: t('description'), value: imageTitle, onChange: e => {
+                                            setImageTitle(e.target.value);
+                                        }, info: t('rte_image_description_info') })] })), selectedAttachmentType === 'link' && (_jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(Input, { label: t('rte_image_url'), value: url, required: true, info: incorrectUrl ? t('rte_invalid_url') : '', status: incorrectUrl ? 'error' : undefined, onChange: e => {
+                                            const urlInput = e.target.value;
+                                            setUrl(urlInput);
+                                            try {
+                                                const newUrl = new URL(urlInput);
+                                                setIncorrectUrl(!['http:', 'https:'].includes(newUrl.protocol));
+                                            }
+                                            catch {
+                                                setIncorrectUrl(true);
+                                            }
+                                        } }), _jsx(Input, { label: t('description'), value: imageLinkTitle, onChange: e => {
+                                            setImageLinkTitle(e.target.value);
+                                        }, info: t('rte_image_description_info') })] }))] }) }) }))] }));
 };
 export default ImageButton;
 //# sourceMappingURL=ImageButton.js.map

package/lib/components/Editor/Toolbar/ImageButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageButton.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/ImageButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAE9F,OAAO,aAAa,MAAM,4CAA4C,CAAC;AACvE,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAE9C,YAAY,CAAC,WAAW,CAAC,CAAC;AAE1B,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAA;IACjC,YAAY,EAAE;CACjB,CAAC;AAEF,MAAM,WAAW,GAA0C,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IACtF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACpD,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAE/C,MAAM,kBAAkB,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC9D,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACnB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YAE5B,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;gBACzB,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;YAClC,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,gBAAgB,IACf,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,kBAAkB,EAC5B,QAAQ,EAAE,CAAC,CAAC,wBAEZ,EACF,KAAC,aAAa,IACZ,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;gBACjC,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,WAAW,CAAC,EACvB,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,KACjB,SAAS,YAEb,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,GAAG,GACT,IACf,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { useRef, useContext } from 'react';\nimport type { ChangeEvent, FC } from 'react';\nimport styled from 'styled-components';\nimport type { Editor } from 'tinymce';\nimport { hideVisually } from 'polished';\n\nimport { Icon, registerIcon, useI18n } from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport * as pictureIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/picture.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport EditorContext from '../Editor.context';\n\nregisterIcon(pictureIcon);\n\nconst StyledImageInput = styled.input`\n  ${hideVisually()}\n`;\n\nconst ImageButton: FC<{ editor: Editor } & ForwardProps> = ({ editor, ...restProps }) => {\n  const t = useI18n();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const { addImage } = useContext(EditorContext);\n\n  const onImageInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (e.target.files) {\n      addImage(e.target.files[0]);\n\n      if (fileInputRef.current) {\n        fileInputRef.current.value = '';\n      }\n    }\n  };\n\n  return (\n    <>\n      <StyledImageInput\n        type='file'\n        accept='image/*'\n        ref={fileInputRef}\n        onChange={onImageInputChange}\n        tabIndex={-1}\n        aria-hidden\n      />\n      <ToolbarButton\n        onClick={() => {\n          fileInputRef?.current?.click();\n        }}\n        tooltip={t('rte_image')}\n        label={t('rte_image')}\n        {...restProps}\n      >\n        <Icon name='picture' />\n      </ToolbarButton>\n    </>\n  );\n};\n\nexport default ImageButton;\n"]}
+{"version":3,"file":"ImageButton.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/ImageButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useContext, useEffect, useCallback } from 'react';\nimport type { KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\n\nimport {\n  createUID,\n  FileInput,\n  Grid,\n  Icon,\n  Input,\n  RadioButton,\n  RadioButtonGroup,\n  registerIcon,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport * as pictureIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/picture.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport EditorContext from '../Editor.context';\nimport { StyledFormDialog } from '../Editor.styles';\nimport useCloseOnEditorClick from '../hooks/useCloseOnEditorClick';\n\nregisterIcon(pictureIcon);\n\nconst ImageButton = ({\n  editor,\n  imageInsertionMode,\n  ...restProps\n}: { editor: TiptapEditor; imageInsertionMode: 'file' | 'url' | 'all' } & ForwardProps) => {\n  const t = useI18n();\n  const { addImage } = useContext(EditorContext);\n  const [showImageDialog, setShowImageDialog] = useState(false);\n  const imagebuttonRef = useRef<HTMLElement>(null);\n  const imagepopoverRef = useRef(null);\n  const [imageTitle, setImageTitle] = useState('');\n  const [imageLinkTitle, setImageLinkTitle] = useState('');\n  const [selectedAttachmentType, setSelectedAttachmentType] = useState(() => {\n    if (imageInsertionMode === 'url') {\n      return 'link';\n    }\n    return 'file';\n  });\n  const [url, setUrl] = useState('');\n  const [tempfile, setTempFile] = useState<File>();\n  const [incorrectUrl, setIncorrectUrl] = useState(false);\n  const [fileEmpty, setFileEmpty] = useState(false);\n\n  useEffect(() => {\n    if (imageInsertionMode === 'url') {\n      setSelectedAttachmentType('link');\n    } else {\n      setSelectedAttachmentType('file');\n    }\n  }, [imageInsertionMode]);\n\n  const onImageInputChange = (addedFiles: File[]) => {\n    setTempFile(addedFiles[0]);\n    setFileEmpty(false);\n  };\n\n  const resetMenu = () => {\n    setUrl('');\n    setIncorrectUrl(false);\n    setImageLinkTitle('');\n    setImageTitle('');\n    setTempFile(undefined);\n    setSelectedAttachmentType('file');\n    setFileEmpty(false);\n    setShowImageDialog(false);\n  };\n\n  // Close dialog when clicking inside the editor iframe\n  const handleEditorClick = useCallback(() => {\n    if (showImageDialog) {\n      resetMenu();\n    }\n  }, [showImageDialog]);\n  useCloseOnEditorClick(showImageDialog, handleEditorClick);\n\n  const onImageAddSubmit = () => {\n    if (selectedAttachmentType === 'file') {\n      if (tempfile) {\n        addImage(tempfile, undefined, imageTitle);\n        resetMenu();\n      } else {\n        setFileEmpty(true);\n      }\n    } else if (selectedAttachmentType === 'link') {\n      if (!url || incorrectUrl) {\n        setIncorrectUrl(true);\n        return;\n      }\n\n      const imageUid = createUID();\n      // Tiptap API - insert image using the Image extension command\n      editor\n        .chain()\n        .focus()\n        .setImage({\n          src: url,\n          alt: imageLinkTitle || t('rte_broken_image')\n        })\n        .updateAttributes('image', { 'data-id': imageUid })\n        .run();\n\n      // Add error handler for broken images if no alt text was provided\n      if (!imageLinkTitle) {\n        // Use the editor's document to target the correct iframe\n        const editorDoc = editor.view.dom.ownerDocument;\n        requestAnimationFrame(() => {\n          const imageEl = editorDoc.querySelector<HTMLImageElement>(`img[data-id=\"${imageUid}\"]`);\n          if (imageEl) {\n            imageEl.onerror = () => {\n              imageEl.alt = t('rte_broken_image');\n            };\n          }\n        });\n      }\n      resetMenu();\n    }\n  };\n\n  const onImageAddCancel = () => {\n    resetMenu();\n  };\n\n  return (\n    <>\n      <ToolbarButton\n        ref={imagebuttonRef}\n        onClick={() => {\n          setShowImageDialog(true);\n        }}\n        onKeyDown={(e: ReactKeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            setShowImageDialog(true);\n          }\n        }}\n        tooltip={t('rte_image')}\n        label={t('rte_image')}\n        {...restProps}\n      >\n        <Icon name='picture' />\n      </ToolbarButton>\n      {showImageDialog && imagebuttonRef.current && (\n        <form>\n          <StyledFormDialog\n            heading={t('rte_add_image')}\n            onSubmit={onImageAddSubmit}\n            onCancel={onImageAddCancel}\n            onDismiss={() => {\n              resetMenu();\n            }}\n            target={imagebuttonRef.current}\n            ref={imagepopoverRef}\n          >\n            <Grid\n              container={{\n                gap: 2\n              }}\n            >\n              {imageInsertionMode === 'all' && (\n                <Grid container={{ rowGap: 2 }}>\n                  <RadioButtonGroup\n                    name='chooseListView'\n                    label={t('rte_image_source')}\n                    onChange={e => {\n                      setSelectedAttachmentType(e.target.value);\n                    }}\n                    data-testid='chooseListView'\n                    inline\n                    required\n                  >\n                    <RadioButton\n                      id='file'\n                      label={t('rte_image_file')}\n                      value='file'\n                      checked={selectedAttachmentType === 'file'}\n                    />\n                    <RadioButton\n                      id='link'\n                      label={t('rte_image_link')}\n                      value='link'\n                      checked={selectedAttachmentType === 'link'}\n                    />\n                  </RadioButtonGroup>\n                </Grid>\n              )}\n              {selectedAttachmentType === 'file' && (\n                <Grid container={{ rowGap: 2 }}>\n                  <FileInput\n                    multiple={false}\n                    label={t('rte_image_file')}\n                    onFilesAdded={onImageInputChange}\n                    required\n                    accept='image/*'\n                    info={fileEmpty ? t('rte_empty_image') : ''}\n                    status={fileEmpty ? 'error' : undefined}\n                    files={\n                      tempfile\n                        ? [\n                            {\n                              name: tempfile.name,\n                              id: createUID(),\n                              thumbnail: URL.createObjectURL(tempfile),\n                              onDelete: () => {\n                                setTempFile(undefined);\n                              }\n                            }\n                          ]\n                        : []\n                    }\n                  />\n                  <Input\n                    label={t('description')}\n                    value={imageTitle}\n                    onChange={e => {\n                      setImageTitle(e.target.value);\n                    }}\n                    info={t('rte_image_description_info')}\n                  />\n                </Grid>\n              )}\n              {selectedAttachmentType === 'link' && (\n                <Grid container={{ rowGap: 2 }}>\n                  <Input\n                    label={t('rte_image_url')}\n                    value={url}\n                    required\n                    info={incorrectUrl ? t('rte_invalid_url') : ''}\n                    status={incorrectUrl ? 'error' : undefined}\n                    onChange={e => {\n                      const urlInput = e.target.value;\n                      setUrl(urlInput);\n                      try {\n                        const newUrl = new URL(urlInput);\n                        setIncorrectUrl(!['http:', 'https:'].includes(newUrl.protocol));\n                      } catch {\n                        setIncorrectUrl(true);\n                      }\n                    }}\n                  />\n                  <Input\n                    label={t('description')}\n                    value={imageLinkTitle}\n                    onChange={e => {\n                      setImageLinkTitle(e.target.value);\n                    }}\n                    info={t('rte_image_description_info')}\n                  />\n                </Grid>\n              )}\n            </Grid>\n          </StyledFormDialog>\n        </form>\n      )}\n    </>\n  );\n};\n\nexport default ImageButton;\n"]}

package/lib/components/Editor/Toolbar/SourceCodeButton.d.ts

@@ -0,0 +1,8 @@
+interface SourceCodeButtonProps {
+    active?: boolean;
+    onToggle?: (isSourceMode: boolean) => void;
+    'data-testid'?: string;
+}
+declare const SourceCodeButton: ({ active, onToggle, ...restProps }: SourceCodeButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default SourceCodeButton;
+//# sourceMappingURL=SourceCodeButton.d.ts.map

package/lib/components/Editor/Toolbar/SourceCodeButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SourceCodeButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/SourceCodeButton.tsx"],"names":[],"mappings":"AA0CA,UAAU,qBAAqB;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,GAAI,oCAAoC,qBAAqB,4CA8ClF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/Editor/Toolbar/SourceCodeButton.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { mix } from 'polished';
+import { Icon, registerIcon, Button, defaultThemeProp, useI18n, Tooltip, tryCatch } from '@pega/cosmos-react-core';
+import * as codeIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/code.icon';
+registerIcon(codeIcon);
+const StyledSourceCodeButton = styled(Button)(({ theme, $active }) => {
+    const activeColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
+    return css `
+    color: ${theme.base.palette['foreground-color']};
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(3.5 * ${theme.base.spacing});
+    min-width: calc(3.5 * ${theme.base.spacing});
+    padding: 0;
+
+    ${$active &&
+        css `
+      background-color: ${activeColor};
+      color: ${theme.base.palette.interactive};
+      border-bottom: calc(0.25 * ${theme.base.spacing}) solid ${theme.base.palette.interactive};
+    `}
+  `;
+});
+StyledSourceCodeButton.defaultProps = defaultThemeProp;
+const SourceCodeButton = ({ active, onToggle, ...restProps }) => {
+    const t = useI18n();
+    const buttonRef = useRef(null);
+    const handleToggle = () => {
+        onToggle?.(!active);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(StyledSourceCodeButton, { ...restProps, variant: 'simple', type: 'button', icon: false, ref: buttonRef, "data-toolbar-item": 'true', "$active": active, onMouseDown: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleToggle();
+                }, onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        handleToggle();
+                    }
+                }, onFocus: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, onClick: (e) => e.stopPropagation(), "aria-label": t('rte_source_code'), "aria-pressed": active, children: _jsx(Icon, { name: 'code' }) }), buttonRef.current && (_jsx(Tooltip, { target: buttonRef.current, showDelay: 'none', hideDelay: 'none', children: t('rte_source_code') }))] }));
+};
+export default SourceCodeButton;
+//# sourceMappingURL=SourceCodeButton.js.map

package/lib/components/Editor/Toolbar/SourceCodeButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SourceCodeButton.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/SourceCodeButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,gBAAgB,EAChB,OAAO,EACP,OAAO,EACP,QAAQ,EACT,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAExF,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAwB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IAC1F,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CACpF,CAAC;IACF,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;yBAI1B,KAAK,CAAC,IAAI,CAAC,OAAO;4BACf,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGxC,OAAO;QACT,GAAG,CAAA;0BACmB,WAAW;eACtB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;mCACV,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;KACzF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAQvD,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAyB,EAAE,EAAE;IACrF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,sBAAsB,OACjB,SAAS,EACb,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,KAAK,EACX,GAAG,EAAE,SAAS,uBACI,MAAM,aACf,MAAM,EACf,WAAW,EAAE,CAAC,CAAa,EAAE,EAAE;oBAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,YAAY,EAAE,CAAC;gBACjB,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;wBACtB,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,YAAY,EAAE,CAAC;oBACjB,CAAC;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,gBACnC,CAAC,CAAC,iBAAiB,CAAC,kBAClB,MAAM,YAEpB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACG,EACxB,SAAS,CAAC,OAAO,IAAI,CACpB,KAAC,OAAO,IAAC,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YAClE,CAAC,CAAC,iBAAiB,CAAC,GACb,CACX,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { useRef } from 'react';\nimport type { MouseEvent, KeyboardEvent, FocusEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport {\n  Icon,\n  registerIcon,\n  Button,\n  defaultThemeProp,\n  useI18n,\n  Tooltip,\n  tryCatch\n} from '@pega/cosmos-react-core';\nimport * as codeIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/code.icon';\n\nregisterIcon(codeIcon);\n\nconst StyledSourceCodeButton = styled(Button)<{ $active?: boolean }>(({ theme, $active }) => {\n  const activeColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: calc(3.5 * ${theme.base.spacing});\n    min-width: calc(3.5 * ${theme.base.spacing});\n    padding: 0;\n\n    ${$active &&\n    css`\n      background-color: ${activeColor};\n      color: ${theme.base.palette.interactive};\n      border-bottom: calc(0.25 * ${theme.base.spacing}) solid ${theme.base.palette.interactive};\n    `}\n  `;\n});\n\nStyledSourceCodeButton.defaultProps = defaultThemeProp;\n\ninterface SourceCodeButtonProps {\n  active?: boolean;\n  onToggle?: (isSourceMode: boolean) => void;\n  'data-testid'?: string;\n}\n\nconst SourceCodeButton = ({ active, onToggle, ...restProps }: SourceCodeButtonProps) => {\n  const t = useI18n();\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  const handleToggle = () => {\n    onToggle?.(!active);\n  };\n\n  return (\n    <>\n      <StyledSourceCodeButton\n        {...restProps}\n        variant='simple'\n        type='button'\n        icon={false}\n        ref={buttonRef}\n        data-toolbar-item='true'\n        $active={active}\n        onMouseDown={(e: MouseEvent) => {\n          e.preventDefault();\n          e.stopPropagation();\n          handleToggle();\n        }}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            handleToggle();\n          }\n        }}\n        onFocus={(e: FocusEvent) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        onClick={(e: MouseEvent) => e.stopPropagation()}\n        aria-label={t('rte_source_code')}\n        aria-pressed={active}\n      >\n        <Icon name='code' />\n      </StyledSourceCodeButton>\n      {buttonRef.current && (\n        <Tooltip target={buttonRef.current} showDelay='none' hideDelay='none'>\n          {t('rte_source_code')}\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\nexport default SourceCodeButton;\n"]}

package/lib/components/Editor/Toolbar/TableButton.d.ts

@@ -0,0 +1,8 @@
+import type { Editor as TiptapEditor } from '@tiptap/core';
+interface TableButtonProps {
+    editor: TiptapEditor;
+    'data-testid'?: string;
+}
+declare const TableButton: ({ editor, ...restProps }: TableButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default TableButton;
+//# sourceMappingURL=TableButton.d.ts.map

package/lib/components/Editor/Toolbar/TableButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/TableButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AAsH3D,UAAU,gBAAgB;IACxB,MAAM,EAAE,YAAY,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,WAAW,GAAI,0BAA0B,gBAAgB,4CAuT9D,CAAC;AAEF,eAAe,WAAW,CAAC"}