@pega/cosmos-react-rte 9.0.0-build.29.1 → 9.0.0-build.29.3
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.
- package/lib/components/Editor/Editor.d.ts.map +1 -1
- package/lib/components/Editor/Editor.js +3 -2
- package/lib/components/Editor/Editor.js.map +1 -1
- package/lib/components/Editor/Toolbar/ImageButton.d.ts.map +1 -1
- package/lib/components/Editor/Toolbar/ImageButton.js +5 -2
- package/lib/components/Editor/Toolbar/ImageButton.js.map +1 -1
- package/lib/components/Editor/Toolbar/Toolbar.js +3 -3
- package/lib/components/Editor/Toolbar/Toolbar.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAM/E,OAAO,KAAK,EAAE,WAAW,EAAgC,MAAM,gBAAgB,CAAC;;;;AA+fhF,wBAAqD"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useEffect, useRef, useState, useImperativeHandle, useMemo, useCallback } from 'react';
|
|
3
3
|
import { css } from 'styled-components';
|
|
4
|
-
import { FormControl, Progress, useAfterInitialEffect, useTheme, useUID, useConsolidatedRef, useTestIds, withTestIds, useConfiguration, useI18n } from '@pega/cosmos-react-core';
|
|
4
|
+
import { FormControl, Progress, HiddenText, useAfterInitialEffect, useTheme, useUID, useConsolidatedRef, useTestIds, withTestIds, useConfiguration, useI18n } from '@pega/cosmos-react-core';
|
|
5
5
|
import StyledRichTextEditor from '../RichTextEditor/RichTextEditor.styles';
|
|
6
6
|
import EditorContext from './Editor.context';
|
|
7
7
|
import { StyledEditorContainer, StyledEditorIframe, StyledEditorRoot } from './Editor.styles';
|
|
@@ -46,6 +46,7 @@ const Editor = forwardRef(function ForwardedEditor(props, ref) {
|
|
|
46
46
|
const generatedId = useUID();
|
|
47
47
|
const editorId = id ?? generatedId;
|
|
48
48
|
const labelId = useUID();
|
|
49
|
+
const requiredDescriptionId = `${editorId}-required`;
|
|
49
50
|
const editorRef = useConsolidatedRef(ref);
|
|
50
51
|
const formFieldRef = useRef(null);
|
|
51
52
|
const pastedImages = useRef([]);
|
|
@@ -262,7 +263,7 @@ const Editor = forwardRef(function ForwardedEditor(props, ref) {
|
|
|
262
263
|
}
|
|
263
264
|
}), [tiptapEditor, onImageAdded]);
|
|
264
265
|
const renderSuggestionEditor = useCallback((suggestionProps) => (_jsx(SuggestionEditor, { defaultValue: suggestionProps.defaultValue, disabled: suggestionProps.disabled, readOnly: suggestionProps.readOnly, onGetContent: suggestionProps.onGetContent, onContentChange: suggestionProps.onContentChange, renderEditor: ({ ref: suggestionEditorRef, onInit: suggestionOnInit, onChange: suggestionOnChange }) => (_jsx(Editor, { ref: suggestionEditorRef, label: t('ai_rewrite_result_label'), labelHidden: true, toolbar: SUGGESTION_TOOLBAR, defaultValue: suggestionProps.defaultValue, disabled: suggestionProps.disabled, readOnly: suggestionProps.readOnly, height: height, onInit: suggestionOnInit, onChange: suggestionOnChange })) })), [height, t]);
|
|
265
|
-
return (_jsxs(EditorContext.Provider, { value: ctx, children: [_jsx(StyledEditorRoot, { testId: testIds, label: label, labelFor: '', labelId: labelId, labelHidden: labelHidden, id: editorId, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, onResolveSuggestion: onResolveSuggestion, ref: formFieldRef, additionalInfo: additionalInfo, children: _jsx(FormControl, { ...restProps, ref: editorRef, required: required, disabled: disabled, readOnly: readOnly, status: status, as: StyledRichTextEditor, focused: focused, hasSuggestion: status === 'pending', children: _jsxs(StyledEditorContainer, { ref: editorContainerRef, children: [progress && (_jsx(Progress, { placement: 'local', message: typeof progress === 'string' ? progress : undefined })), _jsx(StyledEditorIframe, { "data-testid": testIds.iframe,
|
|
266
|
+
return (_jsxs(EditorContext.Provider, { value: ctx, children: [_jsx(StyledEditorRoot, { testId: testIds, label: label, labelFor: '', labelId: labelId, labelHidden: labelHidden, id: editorId, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, onResolveSuggestion: onResolveSuggestion, ref: formFieldRef, additionalInfo: additionalInfo, children: _jsx(FormControl, { ...restProps, ref: editorRef, required: required, disabled: disabled, readOnly: readOnly, status: status, as: StyledRichTextEditor, focused: focused, hasSuggestion: status === 'pending', children: _jsxs(StyledEditorContainer, { ref: editorContainerRef, children: [progress && (_jsx(Progress, { placement: 'local', message: typeof progress === 'string' ? progress : undefined })), _jsx(StyledEditorIframe, { "data-testid": testIds.iframe, role: 'application', "aria-label": typeof label === 'string' ? label : t('rte_text_formatting_toolbar'), "aria-describedby": required ? requiredDescriptionId : undefined, ref: iframeRef, tabIndex: 0, "$minHeight": height?.min, "$maxHeight": height?.max }), required && _jsx(HiddenText, { id: requiredDescriptionId, children: t('required') }), (toolbar?.length || customActions?.length) && tiptapEditor && (_jsx(Toolbar, { testId: testIds, features: toolbar || [], editor: tiptapEditor, customActions: customActions, imageInsertionMode: imageInsertionMode, onRewriteClick: onRewriteClick, renderSuggestionEditor: renderSuggestionEditor })), imagesEnabled && !readOnly && !disabled && (_jsx(ImageActionButtons, { ref: editButtonRef, position: hoveredImagePosition, containerRef: editorContainerRef, onEdit: onEditButtonClick, onDelete: handleImageDelete, onMouseEnter: () => setIsOverButtons(true), onMouseLeave: () => setIsOverButtons(false), editLabel: t('rte_edit_image', [currentImageAttrs?.alt || '']), deleteLabel: t('rte_delete_image', [currentImageAttrs?.alt || '']) }))] }) }) }), children, imageEditDialog.attributes && (_jsx(ImageEditDialog, { isOpen: imageEditDialog.isOpen, onClose: () => {
|
|
266
267
|
setImageEditDialog({ isOpen: false, attributes: null });
|
|
267
268
|
}, onSave: handleImageEditSave, initialAttributes: imageEditDialog.attributes, target: editButtonRef.current }))] }));
|
|
268
269
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Editor.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Editor as TiptapEditor } from '@tiptap/core';\nimport {\n forwardRef,\n useEffect,\n useRef,\n useState,\n useImperativeHandle,\n useMemo,\n useCallback\n} from 'react';\nimport type { PropsWithoutRef, ReactNode, RefObject } from 'react';\nimport { css } from 'styled-components';\n\nimport {\n FormControl,\n Progress,\n useAfterInitialEffect,\n useTheme,\n useUID,\n useConsolidatedRef,\n useTestIds,\n withTestIds,\n useConfiguration,\n useI18n\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor from '../RichTextEditor/RichTextEditor.styles';\nimport type { Features } from '../RichTextEditor/Toolbar/Toolbar.types';\n\nimport EditorContext from './Editor.context';\nimport type { EditorProps, EditorState, CustomComponent } from './Editor.types';\nimport { StyledEditorContainer, StyledEditorIframe, StyledEditorRoot } from './Editor.styles';\nimport { getEditorTestIds } from './Editor.test-ids';\nimport Toolbar from './Toolbar/Toolbar';\nimport { ImageEditDialog } from './ImageEditDialog';\nimport type { ImageAttributes } from './ImageEditDialog';\nimport ImageActionButtons from './ImageActionButtons';\nimport createFileItemElement from './FileItemElement';\nimport useIframeSetup from './hooks/useIframeSetup';\nimport useImageActions from './hooks/useImageActions';\n\n// Suggestion editor has no toolbar — formatting controls are intentionally omitted\nconst SUGGESTION_TOOLBAR: Features[] = [];\n\ninterface SuggestionEditorRenderProps {\n ref: RefObject<EditorState>;\n onInit: (tiptapEditor: TiptapEditor) => void;\n onChange: (editor?: TiptapEditor) => void;\n}\n\ninterface SuggestionEditorProps {\n defaultValue?: string;\n disabled: boolean;\n readOnly: boolean;\n onGetContent: (getContent: () => string) => void;\n onContentChange: (hasContent: boolean) => void;\n /** Render prop — receives ref and callbacks; must render an Editor-like element */\n renderEditor: (renderProps: SuggestionEditorRenderProps) => ReactNode;\n}\n\nconst SuggestionEditor = ({\n defaultValue,\n onGetContent,\n onContentChange,\n renderEditor\n}: SuggestionEditorProps) => {\n const editorRef = useRef<EditorState>(null);\n\n useEffect(() => {\n onGetContent(() => editorRef.current?.getEditor()?.getHTML() ?? '');\n }, [onGetContent]);\n\n useAfterInitialEffect(() => {\n editorRef.current?.getEditor()?.commands.setContent(defaultValue ?? '');\n }, [defaultValue]);\n\n return renderEditor({\n ref: editorRef,\n onInit: tiptapEditor => {\n // Signal initial content state so submit button enables correctly\n onContentChange(tiptapEditor.getText().trim() !== '');\n },\n onChange: editor => {\n onContentChange((editor?.getText() ?? '').trim() !== '');\n }\n });\n};\n\nconst Editor: ForwardRefForwardPropsComponent<EditorProps> = forwardRef(function ForwardedEditor(\n props: PropsWithoutRef<EditorProps>,\n ref: EditorProps['ref']\n) {\n const {\n testId,\n id,\n label,\n labelHidden,\n info,\n status,\n required,\n disabled,\n readOnly,\n onChange,\n onKeyDown,\n onFocus,\n onBlur,\n onImageAdded,\n onResolveSuggestion,\n onInit,\n onUnload,\n defaultValue,\n placeholder,\n children,\n additionalInfo,\n toolbar,\n customActions,\n customComponents = [],\n spellcheck = true,\n imageInsertionMode = 'all',\n initOptions,\n onRewriteClick,\n progress,\n autoFocus,\n height,\n autoResize = true,\n ...restProps\n } = props;\n\n const theme = useTheme();\n const { styleSheetTarget } = useConfiguration();\n const t = useI18n();\n const [focused, setFocused] = useState(false);\n const [tiptapEditor, setTiptapEditor] = useState<TiptapEditor | null>(null);\n const [imageEditDialog, setImageEditDialog] = useState<{\n isOpen: boolean;\n attributes: ImageAttributes | null;\n }>({ isOpen: false, attributes: null });\n const editButtonRef = useRef<HTMLButtonElement>(null);\n const editorContainerRef = useRef<HTMLDivElement>(null);\n const generatedId = useUID();\n const editorId = id ?? generatedId;\n const labelId = useUID();\n const editorRef = useConsolidatedRef(ref);\n const formFieldRef = useRef<HTMLElement>(null);\n const pastedImages = useRef<File[]>([]);\n const iframeRef = useRef<HTMLIFrameElement>(null);\n\n const testIds = useTestIds(testId, getEditorTestIds);\n\n // Check if images feature is enabled\n const imagesEnabled = toolbar?.includes('images') ?? false;\n\n // Define built-in custom components and merge with user-provided ones\n const customElements: CustomComponent[] = useMemo(() => {\n const FileItemStyle = css`\n /* stylelint-disable-next-line selector-type-no-unknown */\n pega-file {\n display: inline-block;\n width: ${theme.base['content-width'].md};\n }\n `;\n\n return [\n {\n createCustomElement: createFileItemElement,\n name: 'pega-file',\n style: FileItemStyle.toString(),\n extensionAttributes: ['contenteditable']\n },\n ...customComponents\n ];\n }, [customComponents, theme]);\n\n // Register custom elements in the main window (needed for Tiptap to recognize them)\n useEffect(() => {\n customElements.forEach((component: CustomComponent) => {\n if (\n component.name &&\n component.createCustomElement &&\n !window.customElements.get(component.name)\n ) {\n const CustomElement = component.createCustomElement(window);\n window.customElements.define(component.name, CustomElement);\n }\n });\n }, [customElements]);\n\n // Mount Tiptap inside iframe using custom hook\n const { iframeEditorRef } = useIframeSetup({\n iframeRef,\n theme,\n styleSheetTarget,\n customElements,\n placeholder,\n defaultValue,\n disabled,\n readOnly,\n onChange,\n onKeyDown,\n onFocus,\n onBlur,\n onInit,\n spellcheck,\n initOptions,\n onImageAdded,\n imagesEnabled,\n imageInsertionMode,\n pastedImages,\n editorId,\n required,\n setTiptapEditor,\n setFocused,\n autoResize,\n onTabOut: () => {\n // Focus first toolbar button when Tab is pressed in editor\n const toolbarEl = editorContainerRef.current?.querySelector('[data-testid$=\"toolbar\"]');\n const firstButton = toolbarEl?.querySelector<HTMLElement>('button:not([disabled])');\n if (firstButton) {\n firstButton.focus();\n }\n }\n });\n\n // Set up unload event listener to save content before iframe is destroyed\n useEffect(() => {\n if (!iframeRef.current?.contentWindow || !onUnload) return;\n\n const iframeWindow = iframeRef.current.contentWindow;\n const abortController = new AbortController();\n\n iframeWindow.addEventListener(\n 'unload',\n () => {\n const html = iframeEditorRef.current?.getHtml() ?? '';\n onUnload(html);\n },\n { signal: abortController.signal }\n );\n\n return () => {\n abortController.abort();\n };\n }, [onUnload]);\n\n // Set up image action buttons (edit and delete) using custom hook\n const {\n hoveredImagePosition,\n currentImageAttrs,\n currentImageElement,\n handleDelete: handleImageDelete,\n setIsOverButtons\n } = useImageActions({\n tiptapEditor,\n iframeRef,\n isDialogOpen: imageEditDialog.isOpen\n });\n\n // Store the image element when opening the dialog to target the correct node on save\n const editingImageElementRef = useRef<HTMLImageElement | null>(null);\n\n // Handle edit button click from ImageActionButtons\n const onEditButtonClick = () => {\n if (currentImageAttrs && currentImageElement) {\n // Store the element reference to target the correct node on save\n editingImageElementRef.current = currentImageElement;\n setImageEditDialog({\n isOpen: true,\n attributes: currentImageAttrs\n });\n // Don't call handleImageEdit() here - keep buttons visible while dialog is open\n }\n };\n\n // Handle image edit save\n const handleImageEditSave = (attrs: ImageAttributes) => {\n if (!tiptapEditor || !editingImageElementRef.current) return;\n\n // Get exact position from DOM element to handle duplicate images correctly\n const pos = tiptapEditor.view.posAtDOM(editingImageElementRef.current, 0);\n\n if (pos >= 0) {\n const { state } = tiptapEditor;\n const node = state.doc.nodeAt(pos);\n if (!node || node.type.name !== 'image') return;\n\n const nodeEnd = pos + node.nodeSize;\n const tr = state.tr;\n\n // Update image attributes\n tr.setNodeMarkup(pos, undefined, {\n src: attrs.src,\n alt: attrs.alt,\n ...(attrs.width && { width: attrs.width }),\n ...(attrs.height && { height: attrs.height })\n });\n\n // Handle action URL (links are marks in ProseMirror, not nodes)\n // Always remove existing link mark first, then add new one if needed\n tr.removeMark(pos, nodeEnd, state.schema.marks.link);\n if (attrs.actionUrl) {\n const linkMark = state.schema.marks.link.create({\n href: attrs.actionUrl,\n target: '_blank'\n });\n tr.addMark(pos, nodeEnd, linkMark);\n }\n\n tiptapEditor.view.dispatch(tr);\n }\n\n // Clear the ref after save\n editingImageElementRef.current = null;\n };\n\n // Update editor when props change\n useAfterInitialEffect(() => {\n iframeEditorRef.current?.setEditable(!readOnly && !disabled);\n }, [readOnly, disabled]);\n\n // Handle autoFocus\n useEffect(() => {\n if (autoFocus && tiptapEditor) {\n tiptapEditor.commands.focus();\n }\n }, [autoFocus, tiptapEditor]);\n\n // Expose methods via ref\n useImperativeHandle(\n editorRef,\n () => ({\n focus: () => iframeEditorRef.current?.focus(),\n getPlainText: () => iframeEditorRef.current?.getPlainText() ?? '',\n getRichText: () => iframeEditorRef.current?.getRichText() ?? '',\n getHtml: () => iframeEditorRef.current?.getHtml() ?? '',\n clear: () => iframeEditorRef.current?.clear(),\n updateAttachmentAttributes: (imageId: string, uploadProgress?: number, error?: string) => {\n if (!iframeRef.current?.contentDocument) return;\n\n const iframeDoc = iframeRef.current.contentDocument;\n const imageCustomEl = iframeDoc.querySelector(`pega-file[data-id=\"${imageId}\"]`);\n\n if (imageCustomEl) {\n if (error) {\n imageCustomEl.setAttribute('data-error', error);\n } else if (uploadProgress !== undefined) {\n imageCustomEl.setAttribute('data-progress', `${uploadProgress}`);\n }\n }\n },\n appendImage: (\n imageData: { src: string; alt: string; attachmentId?: string },\n imageId: string\n ) => {\n if (!iframeRef.current?.contentDocument || !tiptapEditor) return;\n\n const iframeDoc = iframeRef.current.contentDocument;\n const imageUploadEl = iframeDoc.querySelector(`pega-file[data-id=\"${imageId}\"]`);\n\n if (imageUploadEl) {\n // Create img element\n const imgEl = iframeDoc.createElement('img');\n imgEl.setAttribute('src', imageData.src);\n imgEl.setAttribute('alt', imageData.alt);\n if (imageData.attachmentId) {\n imgEl.setAttribute('data-attachment-id', imageData.attachmentId);\n }\n\n // Replace pega-file with img in the DOM\n imageUploadEl.replaceWith(imgEl);\n\n // Also update the Tiptap document\n const html = tiptapEditor.getHTML();\n const updatedHtml = html.replace(\n new RegExp(`<pega-file[^>]*data-id=[\"']${imageId}[\"'][^>]*>.*?</pega-file>`, 'g'),\n imgEl.outerHTML\n );\n\n if (updatedHtml !== html) {\n tiptapEditor.commands.setContent(updatedHtml, { emitUpdate: false });\n }\n }\n },\n insertText: (text: string) => iframeEditorRef.current?.insertText(text),\n setCursorLocationToStart: () => iframeEditorRef.current?.setCursorLocationToStart(),\n insertHtml: (html: string, overwrite?: boolean) =>\n iframeEditorRef.current?.insertHtml(html, overwrite),\n getEditor: () => iframeEditorRef.current?.getEditor() ?? null,\n element: formFieldRef.current || undefined\n }),\n [tiptapEditor]\n );\n\n const ctx = useMemo(\n () => ({\n editor: tiptapEditor,\n addImage: (image: File, imageId?: string, alt?: string) => {\n if (!tiptapEditor || !image) return;\n\n const imgId = imageId || `img-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;\n\n // Create pega-file element to show upload progress\n const pegaFileHtml = `<br/><pega-file data-id='${imgId}' data-progress='0' data-name='${image.name}' data-alt='${alt || image.name}' contenteditable='false'></pega-file><br/>`;\n\n // Insert the pega-file element\n tiptapEditor.chain().focus().insertContent(pegaFileHtml).run();\n\n // Trigger the onImageAdded callback so consumer can upload and call appendImage\n onImageAdded?.(image, imgId, alt);\n }\n }),\n [tiptapEditor, onImageAdded]\n );\n\n const renderSuggestionEditor = useCallback(\n (suggestionProps: {\n defaultValue?: string;\n disabled: boolean;\n readOnly: boolean;\n onGetContent: (getContent: () => string) => void;\n onContentChange: (hasContent: boolean) => void;\n }) => (\n <SuggestionEditor\n defaultValue={suggestionProps.defaultValue}\n disabled={suggestionProps.disabled}\n readOnly={suggestionProps.readOnly}\n onGetContent={suggestionProps.onGetContent}\n onContentChange={suggestionProps.onContentChange}\n renderEditor={({\n ref: suggestionEditorRef,\n onInit: suggestionOnInit,\n onChange: suggestionOnChange\n }) => (\n <Editor\n ref={suggestionEditorRef}\n label={t('ai_rewrite_result_label')}\n labelHidden\n toolbar={SUGGESTION_TOOLBAR}\n defaultValue={suggestionProps.defaultValue}\n disabled={suggestionProps.disabled}\n readOnly={suggestionProps.readOnly}\n height={height}\n onInit={suggestionOnInit}\n onChange={suggestionOnChange}\n />\n )}\n />\n ),\n [height, t]\n );\n\n return (\n <EditorContext.Provider value={ctx}>\n <StyledEditorRoot\n testId={testIds}\n label={label}\n labelFor=''\n labelId={labelId}\n labelHidden={labelHidden}\n id={editorId}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onResolveSuggestion={onResolveSuggestion}\n ref={formFieldRef}\n additionalInfo={additionalInfo}\n >\n <FormControl\n {...restProps}\n ref={editorRef}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n as={StyledRichTextEditor}\n focused={focused}\n hasSuggestion={status === 'pending'}\n >\n <StyledEditorContainer ref={editorContainerRef}>\n {progress && (\n <Progress\n placement='local'\n message={typeof progress === 'string' ? progress : undefined}\n />\n )}\n {/* Title attribute is required for iframe accessibility (WCAG) */}\n <StyledEditorIframe\n data-testid={testIds.iframe}\n title={typeof label === 'string' ? label : t('rte_text_formatting_toolbar')}\n role='application'\n aria-label={typeof label === 'string' ? label : t('rte_text_formatting_toolbar')}\n ref={iframeRef}\n tabIndex={0}\n $minHeight={height?.min}\n $maxHeight={height?.max}\n />\n {(toolbar?.length || customActions?.length) && tiptapEditor && (\n <Toolbar\n testId={testIds}\n features={toolbar || []}\n editor={tiptapEditor}\n customActions={customActions}\n imageInsertionMode={imageInsertionMode}\n onRewriteClick={onRewriteClick}\n renderSuggestionEditor={renderSuggestionEditor}\n />\n )}\n {imagesEnabled && !readOnly && !disabled && (\n <ImageActionButtons\n ref={editButtonRef}\n position={hoveredImagePosition}\n containerRef={editorContainerRef}\n onEdit={onEditButtonClick}\n onDelete={handleImageDelete}\n onMouseEnter={() => setIsOverButtons(true)}\n onMouseLeave={() => setIsOverButtons(false)}\n editLabel={t('rte_edit_image', [currentImageAttrs?.alt || ''])}\n deleteLabel={t('rte_delete_image', [currentImageAttrs?.alt || ''])}\n />\n )}\n </StyledEditorContainer>\n </FormControl>\n </StyledEditorRoot>\n {children}\n {imageEditDialog.attributes && (\n <ImageEditDialog\n isOpen={imageEditDialog.isOpen}\n onClose={() => {\n setImageEditDialog({ isOpen: false, attributes: null });\n }}\n onSave={handleImageEditSave}\n initialAttributes={imageEditDialog.attributes}\n target={editButtonRef.current}\n />\n )}\n </EditorContext.Provider>\n );\n});\n\nexport default withTestIds(Editor, getEditorTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"Editor.js","sourceRoot":"","sources":["../../../src/components/Editor/Editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Editor as TiptapEditor } from '@tiptap/core';\nimport {\n forwardRef,\n useEffect,\n useRef,\n useState,\n useImperativeHandle,\n useMemo,\n useCallback\n} from 'react';\nimport type { PropsWithoutRef, ReactNode, RefObject } from 'react';\nimport { css } from 'styled-components';\n\nimport {\n FormControl,\n Progress,\n HiddenText,\n useAfterInitialEffect,\n useTheme,\n useUID,\n useConsolidatedRef,\n useTestIds,\n withTestIds,\n useConfiguration,\n useI18n\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport StyledRichTextEditor from '../RichTextEditor/RichTextEditor.styles';\nimport type { Features } from '../RichTextEditor/Toolbar/Toolbar.types';\n\nimport EditorContext from './Editor.context';\nimport type { EditorProps, EditorState, CustomComponent } from './Editor.types';\nimport { StyledEditorContainer, StyledEditorIframe, StyledEditorRoot } from './Editor.styles';\nimport { getEditorTestIds } from './Editor.test-ids';\nimport Toolbar from './Toolbar/Toolbar';\nimport { ImageEditDialog } from './ImageEditDialog';\nimport type { ImageAttributes } from './ImageEditDialog';\nimport ImageActionButtons from './ImageActionButtons';\nimport createFileItemElement from './FileItemElement';\nimport useIframeSetup from './hooks/useIframeSetup';\nimport useImageActions from './hooks/useImageActions';\n\n// Suggestion editor has no toolbar — formatting controls are intentionally omitted\nconst SUGGESTION_TOOLBAR: Features[] = [];\n\ninterface SuggestionEditorRenderProps {\n ref: RefObject<EditorState>;\n onInit: (tiptapEditor: TiptapEditor) => void;\n onChange: (editor?: TiptapEditor) => void;\n}\n\ninterface SuggestionEditorProps {\n defaultValue?: string;\n disabled: boolean;\n readOnly: boolean;\n onGetContent: (getContent: () => string) => void;\n onContentChange: (hasContent: boolean) => void;\n /** Render prop — receives ref and callbacks; must render an Editor-like element */\n renderEditor: (renderProps: SuggestionEditorRenderProps) => ReactNode;\n}\n\nconst SuggestionEditor = ({\n defaultValue,\n onGetContent,\n onContentChange,\n renderEditor\n}: SuggestionEditorProps) => {\n const editorRef = useRef<EditorState>(null);\n\n useEffect(() => {\n onGetContent(() => editorRef.current?.getEditor()?.getHTML() ?? '');\n }, [onGetContent]);\n\n useAfterInitialEffect(() => {\n editorRef.current?.getEditor()?.commands.setContent(defaultValue ?? '');\n }, [defaultValue]);\n\n return renderEditor({\n ref: editorRef,\n onInit: tiptapEditor => {\n // Signal initial content state so submit button enables correctly\n onContentChange(tiptapEditor.getText().trim() !== '');\n },\n onChange: editor => {\n onContentChange((editor?.getText() ?? '').trim() !== '');\n }\n });\n};\n\nconst Editor: ForwardRefForwardPropsComponent<EditorProps> = forwardRef(function ForwardedEditor(\n props: PropsWithoutRef<EditorProps>,\n ref: EditorProps['ref']\n) {\n const {\n testId,\n id,\n label,\n labelHidden,\n info,\n status,\n required,\n disabled,\n readOnly,\n onChange,\n onKeyDown,\n onFocus,\n onBlur,\n onImageAdded,\n onResolveSuggestion,\n onInit,\n onUnload,\n defaultValue,\n placeholder,\n children,\n additionalInfo,\n toolbar,\n customActions,\n customComponents = [],\n spellcheck = true,\n imageInsertionMode = 'all',\n initOptions,\n onRewriteClick,\n progress,\n autoFocus,\n height,\n autoResize = true,\n ...restProps\n } = props;\n\n const theme = useTheme();\n const { styleSheetTarget } = useConfiguration();\n const t = useI18n();\n const [focused, setFocused] = useState(false);\n const [tiptapEditor, setTiptapEditor] = useState<TiptapEditor | null>(null);\n const [imageEditDialog, setImageEditDialog] = useState<{\n isOpen: boolean;\n attributes: ImageAttributes | null;\n }>({ isOpen: false, attributes: null });\n const editButtonRef = useRef<HTMLButtonElement>(null);\n const editorContainerRef = useRef<HTMLDivElement>(null);\n const generatedId = useUID();\n const editorId = id ?? generatedId;\n const labelId = useUID();\n const requiredDescriptionId = `${editorId}-required`;\n const editorRef = useConsolidatedRef(ref);\n const formFieldRef = useRef<HTMLElement>(null);\n const pastedImages = useRef<File[]>([]);\n const iframeRef = useRef<HTMLIFrameElement>(null);\n\n const testIds = useTestIds(testId, getEditorTestIds);\n\n // Check if images feature is enabled\n const imagesEnabled = toolbar?.includes('images') ?? false;\n\n // Define built-in custom components and merge with user-provided ones\n const customElements: CustomComponent[] = useMemo(() => {\n const FileItemStyle = css`\n /* stylelint-disable-next-line selector-type-no-unknown */\n pega-file {\n display: inline-block;\n width: ${theme.base['content-width'].md};\n }\n `;\n\n return [\n {\n createCustomElement: createFileItemElement,\n name: 'pega-file',\n style: FileItemStyle.toString(),\n extensionAttributes: ['contenteditable']\n },\n ...customComponents\n ];\n }, [customComponents, theme]);\n\n // Register custom elements in the main window (needed for Tiptap to recognize them)\n useEffect(() => {\n customElements.forEach((component: CustomComponent) => {\n if (\n component.name &&\n component.createCustomElement &&\n !window.customElements.get(component.name)\n ) {\n const CustomElement = component.createCustomElement(window);\n window.customElements.define(component.name, CustomElement);\n }\n });\n }, [customElements]);\n\n // Mount Tiptap inside iframe using custom hook\n const { iframeEditorRef } = useIframeSetup({\n iframeRef,\n theme,\n styleSheetTarget,\n customElements,\n placeholder,\n defaultValue,\n disabled,\n readOnly,\n onChange,\n onKeyDown,\n onFocus,\n onBlur,\n onInit,\n spellcheck,\n initOptions,\n onImageAdded,\n imagesEnabled,\n imageInsertionMode,\n pastedImages,\n editorId,\n required,\n setTiptapEditor,\n setFocused,\n autoResize,\n onTabOut: () => {\n // Focus first toolbar button when Tab is pressed in editor\n const toolbarEl = editorContainerRef.current?.querySelector('[data-testid$=\"toolbar\"]');\n const firstButton = toolbarEl?.querySelector<HTMLElement>('button:not([disabled])');\n if (firstButton) {\n firstButton.focus();\n }\n }\n });\n\n // Set up unload event listener to save content before iframe is destroyed\n useEffect(() => {\n if (!iframeRef.current?.contentWindow || !onUnload) return;\n\n const iframeWindow = iframeRef.current.contentWindow;\n const abortController = new AbortController();\n\n iframeWindow.addEventListener(\n 'unload',\n () => {\n const html = iframeEditorRef.current?.getHtml() ?? '';\n onUnload(html);\n },\n { signal: abortController.signal }\n );\n\n return () => {\n abortController.abort();\n };\n }, [onUnload]);\n\n // Set up image action buttons (edit and delete) using custom hook\n const {\n hoveredImagePosition,\n currentImageAttrs,\n currentImageElement,\n handleDelete: handleImageDelete,\n setIsOverButtons\n } = useImageActions({\n tiptapEditor,\n iframeRef,\n isDialogOpen: imageEditDialog.isOpen\n });\n\n // Store the image element when opening the dialog to target the correct node on save\n const editingImageElementRef = useRef<HTMLImageElement | null>(null);\n\n // Handle edit button click from ImageActionButtons\n const onEditButtonClick = () => {\n if (currentImageAttrs && currentImageElement) {\n // Store the element reference to target the correct node on save\n editingImageElementRef.current = currentImageElement;\n setImageEditDialog({\n isOpen: true,\n attributes: currentImageAttrs\n });\n // Don't call handleImageEdit() here - keep buttons visible while dialog is open\n }\n };\n\n // Handle image edit save\n const handleImageEditSave = (attrs: ImageAttributes) => {\n if (!tiptapEditor || !editingImageElementRef.current) return;\n\n // Get exact position from DOM element to handle duplicate images correctly\n const pos = tiptapEditor.view.posAtDOM(editingImageElementRef.current, 0);\n\n if (pos >= 0) {\n const { state } = tiptapEditor;\n const node = state.doc.nodeAt(pos);\n if (!node || node.type.name !== 'image') return;\n\n const nodeEnd = pos + node.nodeSize;\n const tr = state.tr;\n\n // Update image attributes\n tr.setNodeMarkup(pos, undefined, {\n src: attrs.src,\n alt: attrs.alt,\n ...(attrs.width && { width: attrs.width }),\n ...(attrs.height && { height: attrs.height })\n });\n\n // Handle action URL (links are marks in ProseMirror, not nodes)\n // Always remove existing link mark first, then add new one if needed\n tr.removeMark(pos, nodeEnd, state.schema.marks.link);\n if (attrs.actionUrl) {\n const linkMark = state.schema.marks.link.create({\n href: attrs.actionUrl,\n target: '_blank'\n });\n tr.addMark(pos, nodeEnd, linkMark);\n }\n\n tiptapEditor.view.dispatch(tr);\n }\n\n // Clear the ref after save\n editingImageElementRef.current = null;\n };\n\n // Update editor when props change\n useAfterInitialEffect(() => {\n iframeEditorRef.current?.setEditable(!readOnly && !disabled);\n }, [readOnly, disabled]);\n\n // Handle autoFocus\n useEffect(() => {\n if (autoFocus && tiptapEditor) {\n tiptapEditor.commands.focus();\n }\n }, [autoFocus, tiptapEditor]);\n\n // Expose methods via ref\n useImperativeHandle(\n editorRef,\n () => ({\n focus: () => iframeEditorRef.current?.focus(),\n getPlainText: () => iframeEditorRef.current?.getPlainText() ?? '',\n getRichText: () => iframeEditorRef.current?.getRichText() ?? '',\n getHtml: () => iframeEditorRef.current?.getHtml() ?? '',\n clear: () => iframeEditorRef.current?.clear(),\n updateAttachmentAttributes: (imageId: string, uploadProgress?: number, error?: string) => {\n if (!iframeRef.current?.contentDocument) return;\n\n const iframeDoc = iframeRef.current.contentDocument;\n const imageCustomEl = iframeDoc.querySelector(`pega-file[data-id=\"${imageId}\"]`);\n\n if (imageCustomEl) {\n if (error) {\n imageCustomEl.setAttribute('data-error', error);\n } else if (uploadProgress !== undefined) {\n imageCustomEl.setAttribute('data-progress', `${uploadProgress}`);\n }\n }\n },\n appendImage: (\n imageData: { src: string; alt: string; attachmentId?: string },\n imageId: string\n ) => {\n if (!iframeRef.current?.contentDocument || !tiptapEditor) return;\n\n const iframeDoc = iframeRef.current.contentDocument;\n const imageUploadEl = iframeDoc.querySelector(`pega-file[data-id=\"${imageId}\"]`);\n\n if (imageUploadEl) {\n // Create img element\n const imgEl = iframeDoc.createElement('img');\n imgEl.setAttribute('src', imageData.src);\n imgEl.setAttribute('alt', imageData.alt);\n if (imageData.attachmentId) {\n imgEl.setAttribute('data-attachment-id', imageData.attachmentId);\n }\n\n // Replace pega-file with img in the DOM\n imageUploadEl.replaceWith(imgEl);\n\n // Also update the Tiptap document\n const html = tiptapEditor.getHTML();\n const updatedHtml = html.replace(\n new RegExp(`<pega-file[^>]*data-id=[\"']${imageId}[\"'][^>]*>.*?</pega-file>`, 'g'),\n imgEl.outerHTML\n );\n\n if (updatedHtml !== html) {\n tiptapEditor.commands.setContent(updatedHtml, { emitUpdate: false });\n }\n }\n },\n insertText: (text: string) => iframeEditorRef.current?.insertText(text),\n setCursorLocationToStart: () => iframeEditorRef.current?.setCursorLocationToStart(),\n insertHtml: (html: string, overwrite?: boolean) =>\n iframeEditorRef.current?.insertHtml(html, overwrite),\n getEditor: () => iframeEditorRef.current?.getEditor() ?? null,\n element: formFieldRef.current || undefined\n }),\n [tiptapEditor]\n );\n\n const ctx = useMemo(\n () => ({\n editor: tiptapEditor,\n addImage: (image: File, imageId?: string, alt?: string) => {\n if (!tiptapEditor || !image) return;\n\n const imgId = imageId || `img-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;\n\n // Create pega-file element to show upload progress\n const pegaFileHtml = `<br/><pega-file data-id='${imgId}' data-progress='0' data-name='${image.name}' data-alt='${alt || image.name}' contenteditable='false'></pega-file><br/>`;\n\n // Insert the pega-file element\n tiptapEditor.chain().focus().insertContent(pegaFileHtml).run();\n\n // Trigger the onImageAdded callback so consumer can upload and call appendImage\n onImageAdded?.(image, imgId, alt);\n }\n }),\n [tiptapEditor, onImageAdded]\n );\n\n const renderSuggestionEditor = useCallback(\n (suggestionProps: {\n defaultValue?: string;\n disabled: boolean;\n readOnly: boolean;\n onGetContent: (getContent: () => string) => void;\n onContentChange: (hasContent: boolean) => void;\n }) => (\n <SuggestionEditor\n defaultValue={suggestionProps.defaultValue}\n disabled={suggestionProps.disabled}\n readOnly={suggestionProps.readOnly}\n onGetContent={suggestionProps.onGetContent}\n onContentChange={suggestionProps.onContentChange}\n renderEditor={({\n ref: suggestionEditorRef,\n onInit: suggestionOnInit,\n onChange: suggestionOnChange\n }) => (\n <Editor\n ref={suggestionEditorRef}\n label={t('ai_rewrite_result_label')}\n labelHidden\n toolbar={SUGGESTION_TOOLBAR}\n defaultValue={suggestionProps.defaultValue}\n disabled={suggestionProps.disabled}\n readOnly={suggestionProps.readOnly}\n height={height}\n onInit={suggestionOnInit}\n onChange={suggestionOnChange}\n />\n )}\n />\n ),\n [height, t]\n );\n\n return (\n <EditorContext.Provider value={ctx}>\n <StyledEditorRoot\n testId={testIds}\n label={label}\n labelFor=''\n labelId={labelId}\n labelHidden={labelHidden}\n id={editorId}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onResolveSuggestion={onResolveSuggestion}\n ref={formFieldRef}\n additionalInfo={additionalInfo}\n >\n <FormControl\n {...restProps}\n ref={editorRef}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n as={StyledRichTextEditor}\n focused={focused}\n hasSuggestion={status === 'pending'}\n >\n <StyledEditorContainer ref={editorContainerRef}>\n {progress && (\n <Progress\n placement='local'\n message={typeof progress === 'string' ? progress : undefined}\n />\n )}\n <StyledEditorIframe\n data-testid={testIds.iframe}\n role='application'\n aria-label={typeof label === 'string' ? label : t('rte_text_formatting_toolbar')}\n aria-describedby={required ? requiredDescriptionId : undefined}\n ref={iframeRef}\n tabIndex={0}\n $minHeight={height?.min}\n $maxHeight={height?.max}\n />\n {required && <HiddenText id={requiredDescriptionId}>{t('required')}</HiddenText>}\n {(toolbar?.length || customActions?.length) && tiptapEditor && (\n <Toolbar\n testId={testIds}\n features={toolbar || []}\n editor={tiptapEditor}\n customActions={customActions}\n imageInsertionMode={imageInsertionMode}\n onRewriteClick={onRewriteClick}\n renderSuggestionEditor={renderSuggestionEditor}\n />\n )}\n {imagesEnabled && !readOnly && !disabled && (\n <ImageActionButtons\n ref={editButtonRef}\n position={hoveredImagePosition}\n containerRef={editorContainerRef}\n onEdit={onEditButtonClick}\n onDelete={handleImageDelete}\n onMouseEnter={() => setIsOverButtons(true)}\n onMouseLeave={() => setIsOverButtons(false)}\n editLabel={t('rte_edit_image', [currentImageAttrs?.alt || ''])}\n deleteLabel={t('rte_delete_image', [currentImageAttrs?.alt || ''])}\n />\n )}\n </StyledEditorContainer>\n </FormControl>\n </StyledEditorRoot>\n {children}\n {imageEditDialog.attributes && (\n <ImageEditDialog\n isOpen={imageEditDialog.isOpen}\n onClose={() => {\n setImageEditDialog({ isOpen: false, attributes: null });\n }}\n onSave={handleImageEditSave}\n initialAttributes={imageEditDialog.attributes}\n target={editButtonRef.current}\n />\n )}\n </EditorContext.Provider>\n );\n});\n\nexport default withTestIds(Editor, getEditorTestIds);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/ImageButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"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;AAS5D,QAAA,MAAM,WAAW,GAAI,8CAIlB;IAAE,MAAM,EAAE,YAAY,CAAC;IAAC,kBAAkB,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,CAAA;CAAE,GAAG,YAAY,4CA8NrF,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -94,8 +94,11 @@ const ImageButton = ({ editor, imageInsertionMode, ...restProps }) => {
|
|
|
94
94
|
};
|
|
95
95
|
return (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { ref: imagebuttonRef, onClick: () => {
|
|
96
96
|
setShowImageDialog(true);
|
|
97
|
-
}, onKeyDown: () => {
|
|
98
|
-
|
|
97
|
+
}, onKeyDown: (e) => {
|
|
98
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
99
|
+
e.preventDefault();
|
|
100
|
+
setShowImageDialog(true);
|
|
101
|
+
}
|
|
99
102
|
}, 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: () => {
|
|
100
103
|
resetMenu();
|
|
101
104
|
}, target: imagebuttonRef.current, ref: imagepopoverRef, children: _jsxs(Grid, { container: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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 } 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';\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 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) {\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 } else {\n setIncorrectUrl(true);\n }\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={() => {\n setShowImageDialog(true);\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"]}
|
|
1
|
+
{"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 } 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';\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 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) {\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 } else {\n setIncorrectUrl(true);\n }\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"]}
|
|
@@ -21,7 +21,7 @@ const StyledToolbar = styled.div(({ sticky, theme }) => {
|
|
|
21
21
|
border-end-start-radius: inherit;
|
|
22
22
|
border-end-end-radius: inherit;
|
|
23
23
|
overflow: auto;
|
|
24
|
-
padding: calc(0.
|
|
24
|
+
padding: calc(0.5 * ${theme.base.spacing});
|
|
25
25
|
${sticky &&
|
|
26
26
|
css `
|
|
27
27
|
position: sticky;
|
|
@@ -142,7 +142,7 @@ const Toolbar = ({ testId, features, sticky, editor, customActions, imageInserti
|
|
|
142
142
|
editor.off('transaction', getActiveStyles);
|
|
143
143
|
};
|
|
144
144
|
}, [editor, getActiveStyles]);
|
|
145
|
-
return (_jsxs(Flex, { "data-testid": testIds.toolbar, ...restProps, as: StyledToolbar, sticky: sticky, container: { justify: 'between' }, ref: toolbarRef, children: [_jsxs(Flex, { container: { alignItems: 'end' }, children: [activeFeatures['inline-styling'] &&
|
|
145
|
+
return (_jsxs(Flex, { "data-testid": testIds.toolbar, ...restProps, as: StyledToolbar, sticky: sticky, container: { justify: 'between' }, ref: toolbarRef, children: [_jsxs(Flex, { container: { alignItems: 'end', gap: 0.5 }, children: [activeFeatures['inline-styling'] &&
|
|
146
146
|
renderStyleButtons(editor, t, activeStyles, osx, testIds), activeFeatures.lists && (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { "data-testid": testIds.bulletedList, onMouseDown: e => {
|
|
147
147
|
e.preventDefault();
|
|
148
148
|
editor.chain().focus().toggleBulletList().run();
|
|
@@ -165,7 +165,7 @@ const Toolbar = ({ testId, features, sticky, editor, customActions, imageInserti
|
|
|
165
165
|
if (!textOutdented) {
|
|
166
166
|
editor.chain().focus().liftListItem('listItem').run();
|
|
167
167
|
}
|
|
168
|
-
}, label: t('rte_unindent'), tooltip: isMobile ? tooltipMobile('unindent') : getIndentationToolTip('unindent'), children: _jsx(Icon, { name: 'unindent' }) })] }))] }), _jsxs(Flex, { container: { alignItems: 'end' }, children: [customActions?.map(({ text, icon, active, onMouseDown,
|
|
168
|
+
}, label: t('rte_unindent'), tooltip: isMobile ? tooltipMobile('unindent') : getIndentationToolTip('unindent'), children: _jsx(Icon, { name: 'unindent' }) })] }))] }), _jsxs(Flex, { container: { alignItems: 'end', gap: 0.5 }, children: [customActions?.map(({ text, icon, active, onMouseDown,
|
|
169
169
|
// Avoid spreading shortcut to DOM attribute
|
|
170
170
|
shortcut, ...rest }) => {
|
|
171
171
|
return (_createElement(ToolbarButton, { ...rest, onMouseDown: e => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useRef, useCallback } from 'react';\nimport type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\n\nimport {\n Flex,\n Icon,\n useArrows,\n useI18n,\n defaultThemeProp,\n registerIcon,\n useOS,\n navigatorIsAvailable,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type { AIAction, TestIdProp, TranslationPack } from '@pega/cosmos-react-core';\nimport type { TranslationFunction } from '@pega/cosmos-react-core/lib/i18n/translate';\nimport * as listIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/list.icon';\nimport * as listNumberIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/list-number.icon';\nimport * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';\nimport * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport type { StyleType, Features } from '../../RichTextEditor/Toolbar/Toolbar.types';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport type { CustomAction } from '../Editor.types';\n\nimport AIRewriteButton from './AIRewriteButton';\nimport ImageButton from './ImageButton';\nimport TextSelect from './TextSelect';\nimport AnchorButton from './AnchorButton';\nimport { getToolbarTestIds } from './Toolbar.test-ids';\nimport type { elements } from './Toolbar.test-ids';\n\nregisterIcon(listIcon, listNumberIcon, indentIcon, unindentIcon);\n\nconst StyledToolbar = styled.div<{ sticky?: boolean }>(({ sticky, theme }) => {\n return css`\n background-color: ${theme.components['form-control']['background-color']};\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n overflow: auto;\n padding: calc(0.25 * ${theme.base.spacing});\n ${sticky &&\n css`\n position: sticky;\n bottom: 0;\n `}\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n});\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport interface ToolbarProps extends TestIdProp<typeof elements> {\n features: Features[];\n sticky?: boolean;\n editor: TiptapEditor;\n customActions?: CustomAction[];\n imageInsertionMode: 'file' | 'url' | 'all';\n onRewriteClick?: (\n originalText: string,\n rewriteAction: AIAction,\n additionalInstructions: string,\n onSuccess: (rewrittenText: string) => void\n ) => void;\n renderSuggestionEditor?: (props: {\n defaultValue?: string;\n disabled: boolean;\n readOnly: boolean;\n onGetContent: (getContent: () => string) => void;\n onContentChange: (hasContent: boolean) => void;\n }) => ReactNode;\n}\n\ntype StyleButtonType = {\n 'data-testid'?: string;\n style: StyleType;\n text: string;\n icon?: string;\n label?: string;\n format: string;\n element?: string;\n tooltip: string;\n};\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\n// Function that returns the text styling buttons\nfunction renderStyleButtons(\n editor: TiptapEditor,\n t: TranslationFunction<TranslationPack>,\n activeStyles: { [key: string]: boolean },\n osx: boolean,\n testIds: Pick<\n Partial<ReturnType<typeof getToolbarTestIds>>,\n 'bold' | 'italic' | 'strikeThrough' | 'textStyles'\n >\n) {\n const inlineStyleButtons: StyleButtonType[] = [\n {\n 'data-testid': testIds.bold,\n style: 'BOLD',\n text: 'B',\n format: 'Bold',\n label: t('rte_bold'),\n element: 'strong',\n tooltip: isMobile\n ? `${t('rte_bold')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_bold')} (${ctrl}B, ${ctrl}${shift}B)`)\n },\n {\n 'data-testid': testIds.italic,\n style: 'ITALIC',\n text: 'I',\n format: 'Italic',\n label: t('rte_italic'),\n element: 'i',\n tooltip: isMobile\n ? `${t('rte_italic')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_italic')} (${ctrl}I, ${ctrl}${shift}I)`)\n },\n {\n 'data-testid': testIds.strikeThrough,\n style: 'STRIKE-THROUGH',\n text: 'S',\n format: 'Strikethrough',\n element: 's',\n label: t('rte_strike_through'),\n tooltip: isMobile\n ? `${t('rte_strike_through')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_strike_through')} (${ctrl}${shift}X)`)\n }\n ];\n\n return (\n <>\n <TextSelect data-testid={testIds.textStyles} osx={osx} editor={editor} />\n {inlineStyleButtons.map(\n ({ format, style, text, label, tooltip, 'data-testid': dataTestId }) => {\n return (\n <ToolbarButton\n data-testid={dataTestId}\n key={style}\n onMouseDown={e => {\n e.preventDefault();\n const chain = editor.chain().focus();\n if (format === 'Bold') {\n chain.toggleBold().run();\n } else if (format === 'Italic') {\n chain.toggleItalic().run();\n } else if (format === 'Strikethrough') {\n chain.toggleStrike().run();\n }\n }}\n styleType={style}\n active={activeStyles[format.toLowerCase()]}\n tooltip={tooltip}\n label={label}\n >\n {text}\n </ToolbarButton>\n );\n }\n )}\n </>\n );\n}\n\n// Takes the features array and transforms it into a map for faster lookup\nfunction createActiveFeaturesMap(features: Features[]) {\n return features.reduce(\n (acc, feature) => {\n return { ...acc, [feature]: true };\n },\n {} as { [F in Features]: boolean }\n );\n}\n\nconst Toolbar = ({\n testId,\n features,\n sticky,\n editor,\n customActions,\n imageInsertionMode,\n onRewriteClick,\n renderSuggestionEditor,\n ...restProps\n}: ToolbarProps) => {\n const t = useI18n();\n const { macintosh: osx } = useOS();\n const toolbarRef = useRef<HTMLElement>(null);\n const testIds = useTestIds(testId, getToolbarTestIds);\n\n useArrows(toolbarRef, { selector: 'button', dir: 'left-right', updateTabIndex: false });\n\n const [activeFeatures, setActiveFeatures] = useState(() => createActiveFeaturesMap(features));\n const [activeStyles, setActiveStyles] = useState(() => ({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n }));\n\n const getIndentationToolTip = (type: 'indent' | 'unindent') =>\n getKeyCommand(osx, ({ shift, alt }) =>\n type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`\n );\n const tooltipMobile = (type: 'indent' | 'unindent') =>\n type === 'indent' ? `${t('rte_indent')}` : `${t('rte_unindent')}`;\n\n useEffect(() => {\n setActiveFeatures(createActiveFeaturesMap(features));\n }, [features]);\n\n const getActiveStyles = useCallback(() => {\n if (!editor) {\n setActiveStyles({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n });\n return;\n }\n // Tiptap API only\n setActiveStyles({\n bold: editor.isActive('bold'),\n italic: editor.isActive('italic'),\n strikethrough: editor.isActive('strike'),\n unorderedList: editor.isActive('bulletList'),\n orderedList: editor.isActive('orderedList')\n });\n }, [editor, setActiveStyles]);\n\n useEffect(() => {\n getActiveStyles();\n editor.on('selectionUpdate', getActiveStyles);\n editor.on('transaction', getActiveStyles);\n return () => {\n editor.off('selectionUpdate', getActiveStyles);\n editor.off('transaction', getActiveStyles);\n };\n }, [editor, getActiveStyles]);\n\n return (\n <Flex\n data-testid={testIds.toolbar}\n {...restProps}\n as={StyledToolbar}\n sticky={sticky}\n container={{ justify: 'between' }}\n ref={toolbarRef}\n >\n <Flex container={{ alignItems: 'end' }}>\n {activeFeatures['inline-styling'] &&\n renderStyleButtons(editor, t, activeStyles, osx, testIds)}\n {activeFeatures.lists && (\n <>\n <ToolbarButton\n data-testid={testIds.bulletedList}\n onMouseDown={e => {\n e.preventDefault();\n editor.chain().focus().toggleBulletList().run();\n }}\n active={activeStyles.unorderedList}\n tooltip={\n isMobile\n ? `${t('rte_bulleted_list')}`\n : getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`\n )\n }\n label={t('rte_bulleted_list')}\n >\n <Icon name='list' />\n </ToolbarButton>\n <ToolbarButton\n data-testid={testIds.numberedList}\n onMouseDown={e => {\n e.preventDefault();\n editor.chain().focus().toggleOrderedList().run();\n }}\n active={activeStyles.orderedList}\n tooltip={t('rte_numbered_list')}\n label={t('rte_numbered_list')}\n >\n <Icon name='list-number' />\n </ToolbarButton>\n </>\n )}\n {activeFeatures.indentation && (\n <>\n <ToolbarButton\n data-testid={testIds.indent}\n onMouseDown={e => {\n e.preventDefault();\n // Try text indent first, fallback to list indent\n const textIndented = editor.chain().focus().indent().run();\n if (!textIndented) {\n editor.chain().focus().sinkListItem('listItem').run();\n }\n }}\n label={t('rte_indent')}\n tooltip={isMobile ? tooltipMobile('indent') : getIndentationToolTip('indent')}\n >\n <Icon name='indent' />\n </ToolbarButton>\n <ToolbarButton\n data-testid={testIds.unindent}\n onMouseDown={e => {\n e.preventDefault();\n // Try text outdent first, fallback to list outdent\n const textOutdented = editor.chain().focus().outdent().run();\n if (!textOutdented) {\n editor.chain().focus().liftListItem('listItem').run();\n }\n }}\n label={t('rte_unindent')}\n tooltip={isMobile ? tooltipMobile('unindent') : getIndentationToolTip('unindent')}\n >\n <Icon name='unindent' />\n </ToolbarButton>\n </>\n )}\n </Flex>\n <Flex container={{ alignItems: 'end' }}>\n {customActions?.map(\n ({\n text,\n icon,\n active,\n onMouseDown,\n // Avoid spreading shortcut to DOM attribute\n shortcut,\n ...rest\n }) => {\n return (\n <ToolbarButton\n {...rest}\n onMouseDown={e => {\n e.preventDefault();\n onMouseDown(e);\n }}\n tooltip={text}\n label={text}\n key={icon}\n active={active?.(editor) || false}\n >\n <Icon name={icon} />\n </ToolbarButton>\n );\n }\n )}\n {activeFeatures.links && (\n <AnchorButton data-testid={testIds.link} editor={editor} osx={osx} />\n )}\n {activeFeatures.images && (\n <ImageButton\n data-testid={testIds.image}\n editor={editor}\n imageInsertionMode={imageInsertionMode}\n />\n )}\n {activeFeatures['ai-rewrite'] && onRewriteClick && (\n <AIRewriteButton\n data-testid={testIds.aiRewrite}\n editor={editor}\n onRewriteClick={onRewriteClick}\n renderSuggestionEditor={renderSuggestionEditor}\n />\n )}\n </Flex>\n </Flex>\n );\n};\n\nexport default withTestIds(Toolbar, getToolbarTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/Toolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useRef, useCallback } from 'react';\nimport type { ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\n\nimport {\n Flex,\n Icon,\n useArrows,\n useI18n,\n defaultThemeProp,\n registerIcon,\n useOS,\n navigatorIsAvailable,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type { AIAction, TestIdProp, TranslationPack } from '@pega/cosmos-react-core';\nimport type { TranslationFunction } from '@pega/cosmos-react-core/lib/i18n/translate';\nimport * as listIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/list.icon';\nimport * as listNumberIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/list-number.icon';\nimport * as indentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/indent.icon';\nimport * as unindentIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/unindent.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport type { StyleType, Features } from '../../RichTextEditor/Toolbar/Toolbar.types';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport type { CustomAction } from '../Editor.types';\n\nimport AIRewriteButton from './AIRewriteButton';\nimport ImageButton from './ImageButton';\nimport TextSelect from './TextSelect';\nimport AnchorButton from './AnchorButton';\nimport { getToolbarTestIds } from './Toolbar.test-ids';\nimport type { elements } from './Toolbar.test-ids';\n\nregisterIcon(listIcon, listNumberIcon, indentIcon, unindentIcon);\n\nconst StyledToolbar = styled.div<{ sticky?: boolean }>(({ sticky, theme }) => {\n return css`\n background-color: ${theme.components['form-control']['background-color']};\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n overflow: auto;\n padding: calc(0.5 * ${theme.base.spacing});\n ${sticky &&\n css`\n position: sticky;\n bottom: 0;\n `}\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n});\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport interface ToolbarProps extends TestIdProp<typeof elements> {\n features: Features[];\n sticky?: boolean;\n editor: TiptapEditor;\n customActions?: CustomAction[];\n imageInsertionMode: 'file' | 'url' | 'all';\n onRewriteClick?: (\n originalText: string,\n rewriteAction: AIAction,\n additionalInstructions: string,\n onSuccess: (rewrittenText: string) => void\n ) => void;\n renderSuggestionEditor?: (props: {\n defaultValue?: string;\n disabled: boolean;\n readOnly: boolean;\n onGetContent: (getContent: () => string) => void;\n onContentChange: (hasContent: boolean) => void;\n }) => ReactNode;\n}\n\ntype StyleButtonType = {\n 'data-testid'?: string;\n style: StyleType;\n text: string;\n icon?: string;\n label?: string;\n format: string;\n element?: string;\n tooltip: string;\n};\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\n// Function that returns the text styling buttons\nfunction renderStyleButtons(\n editor: TiptapEditor,\n t: TranslationFunction<TranslationPack>,\n activeStyles: { [key: string]: boolean },\n osx: boolean,\n testIds: Pick<\n Partial<ReturnType<typeof getToolbarTestIds>>,\n 'bold' | 'italic' | 'strikeThrough' | 'textStyles'\n >\n) {\n const inlineStyleButtons: StyleButtonType[] = [\n {\n 'data-testid': testIds.bold,\n style: 'BOLD',\n text: 'B',\n format: 'Bold',\n label: t('rte_bold'),\n element: 'strong',\n tooltip: isMobile\n ? `${t('rte_bold')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_bold')} (${ctrl}B, ${ctrl}${shift}B)`)\n },\n {\n 'data-testid': testIds.italic,\n style: 'ITALIC',\n text: 'I',\n format: 'Italic',\n label: t('rte_italic'),\n element: 'i',\n tooltip: isMobile\n ? `${t('rte_italic')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_italic')} (${ctrl}I, ${ctrl}${shift}I)`)\n },\n {\n 'data-testid': testIds.strikeThrough,\n style: 'STRIKE-THROUGH',\n text: 'S',\n format: 'Strikethrough',\n element: 's',\n label: t('rte_strike_through'),\n tooltip: isMobile\n ? `${t('rte_strike_through')}`\n : getKeyCommand(osx, ({ ctrl, shift }) => `${t('rte_strike_through')} (${ctrl}${shift}X)`)\n }\n ];\n\n return (\n <>\n <TextSelect data-testid={testIds.textStyles} osx={osx} editor={editor} />\n {inlineStyleButtons.map(\n ({ format, style, text, label, tooltip, 'data-testid': dataTestId }) => {\n return (\n <ToolbarButton\n data-testid={dataTestId}\n key={style}\n onMouseDown={e => {\n e.preventDefault();\n const chain = editor.chain().focus();\n if (format === 'Bold') {\n chain.toggleBold().run();\n } else if (format === 'Italic') {\n chain.toggleItalic().run();\n } else if (format === 'Strikethrough') {\n chain.toggleStrike().run();\n }\n }}\n styleType={style}\n active={activeStyles[format.toLowerCase()]}\n tooltip={tooltip}\n label={label}\n >\n {text}\n </ToolbarButton>\n );\n }\n )}\n </>\n );\n}\n\n// Takes the features array and transforms it into a map for faster lookup\nfunction createActiveFeaturesMap(features: Features[]) {\n return features.reduce(\n (acc, feature) => {\n return { ...acc, [feature]: true };\n },\n {} as { [F in Features]: boolean }\n );\n}\n\nconst Toolbar = ({\n testId,\n features,\n sticky,\n editor,\n customActions,\n imageInsertionMode,\n onRewriteClick,\n renderSuggestionEditor,\n ...restProps\n}: ToolbarProps) => {\n const t = useI18n();\n const { macintosh: osx } = useOS();\n const toolbarRef = useRef<HTMLElement>(null);\n const testIds = useTestIds(testId, getToolbarTestIds);\n\n useArrows(toolbarRef, { selector: 'button', dir: 'left-right', updateTabIndex: false });\n\n const [activeFeatures, setActiveFeatures] = useState(() => createActiveFeaturesMap(features));\n const [activeStyles, setActiveStyles] = useState(() => ({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n }));\n\n const getIndentationToolTip = (type: 'indent' | 'unindent') =>\n getKeyCommand(osx, ({ shift, alt }) =>\n type === 'indent' ? `${t('rte_indent')} (${alt}M)` : `${t('rte_unindent')} (${alt}${shift}M)`\n );\n const tooltipMobile = (type: 'indent' | 'unindent') =>\n type === 'indent' ? `${t('rte_indent')}` : `${t('rte_unindent')}`;\n\n useEffect(() => {\n setActiveFeatures(createActiveFeaturesMap(features));\n }, [features]);\n\n const getActiveStyles = useCallback(() => {\n if (!editor) {\n setActiveStyles({\n bold: false,\n italic: false,\n strikethrough: false,\n unorderedList: false,\n orderedList: false\n });\n return;\n }\n // Tiptap API only\n setActiveStyles({\n bold: editor.isActive('bold'),\n italic: editor.isActive('italic'),\n strikethrough: editor.isActive('strike'),\n unorderedList: editor.isActive('bulletList'),\n orderedList: editor.isActive('orderedList')\n });\n }, [editor, setActiveStyles]);\n\n useEffect(() => {\n getActiveStyles();\n editor.on('selectionUpdate', getActiveStyles);\n editor.on('transaction', getActiveStyles);\n return () => {\n editor.off('selectionUpdate', getActiveStyles);\n editor.off('transaction', getActiveStyles);\n };\n }, [editor, getActiveStyles]);\n\n return (\n <Flex\n data-testid={testIds.toolbar}\n {...restProps}\n as={StyledToolbar}\n sticky={sticky}\n container={{ justify: 'between' }}\n ref={toolbarRef}\n >\n <Flex container={{ alignItems: 'end', gap: 0.5 }}>\n {activeFeatures['inline-styling'] &&\n renderStyleButtons(editor, t, activeStyles, osx, testIds)}\n {activeFeatures.lists && (\n <>\n <ToolbarButton\n data-testid={testIds.bulletedList}\n onMouseDown={e => {\n e.preventDefault();\n editor.chain().focus().toggleBulletList().run();\n }}\n active={activeStyles.unorderedList}\n tooltip={\n isMobile\n ? `${t('rte_bulleted_list')}`\n : getKeyCommand(\n osx,\n ({ ctrl, shift }) => `${t('rte_bulleted_list')} (${ctrl}${shift}L)`\n )\n }\n label={t('rte_bulleted_list')}\n >\n <Icon name='list' />\n </ToolbarButton>\n <ToolbarButton\n data-testid={testIds.numberedList}\n onMouseDown={e => {\n e.preventDefault();\n editor.chain().focus().toggleOrderedList().run();\n }}\n active={activeStyles.orderedList}\n tooltip={t('rte_numbered_list')}\n label={t('rte_numbered_list')}\n >\n <Icon name='list-number' />\n </ToolbarButton>\n </>\n )}\n {activeFeatures.indentation && (\n <>\n <ToolbarButton\n data-testid={testIds.indent}\n onMouseDown={e => {\n e.preventDefault();\n // Try text indent first, fallback to list indent\n const textIndented = editor.chain().focus().indent().run();\n if (!textIndented) {\n editor.chain().focus().sinkListItem('listItem').run();\n }\n }}\n label={t('rte_indent')}\n tooltip={isMobile ? tooltipMobile('indent') : getIndentationToolTip('indent')}\n >\n <Icon name='indent' />\n </ToolbarButton>\n <ToolbarButton\n data-testid={testIds.unindent}\n onMouseDown={e => {\n e.preventDefault();\n // Try text outdent first, fallback to list outdent\n const textOutdented = editor.chain().focus().outdent().run();\n if (!textOutdented) {\n editor.chain().focus().liftListItem('listItem').run();\n }\n }}\n label={t('rte_unindent')}\n tooltip={isMobile ? tooltipMobile('unindent') : getIndentationToolTip('unindent')}\n >\n <Icon name='unindent' />\n </ToolbarButton>\n </>\n )}\n </Flex>\n <Flex container={{ alignItems: 'end', gap: 0.5 }}>\n {customActions?.map(\n ({\n text,\n icon,\n active,\n onMouseDown,\n // Avoid spreading shortcut to DOM attribute\n shortcut,\n ...rest\n }) => {\n return (\n <ToolbarButton\n {...rest}\n onMouseDown={e => {\n e.preventDefault();\n onMouseDown(e);\n }}\n tooltip={text}\n label={text}\n key={icon}\n active={active?.(editor) || false}\n >\n <Icon name={icon} />\n </ToolbarButton>\n );\n }\n )}\n {activeFeatures.links && (\n <AnchorButton data-testid={testIds.link} editor={editor} osx={osx} />\n )}\n {activeFeatures.images && (\n <ImageButton\n data-testid={testIds.image}\n editor={editor}\n imageInsertionMode={imageInsertionMode}\n />\n )}\n {activeFeatures['ai-rewrite'] && onRewriteClick && (\n <AIRewriteButton\n data-testid={testIds.aiRewrite}\n editor={editor}\n onRewriteClick={onRewriteClick}\n renderSuggestionEditor={renderSuggestionEditor}\n />\n )}\n </Flex>\n </Flex>\n );\n};\n\nexport default withTestIds(Toolbar, getToolbarTestIds);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-rte",
|
|
3
|
-
"version": "9.0.0-build.29.
|
|
3
|
+
"version": "9.0.0-build.29.3",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "Pegasystems",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@intevation/tiptap-extension-office-paste": "^0.1.2",
|
|
18
|
-
"@pega/cosmos-react-core": "9.0.0-build.29.
|
|
18
|
+
"@pega/cosmos-react-core": "9.0.0-build.29.3",
|
|
19
19
|
"@popperjs/core": "^2.11.6",
|
|
20
20
|
"@tiptap/core": "^3.12.1",
|
|
21
21
|
"@tiptap/extension-blockquote": "^3.12.1",
|