@pega/cosmos-react-rte 9.0.0-build.29.2 → 9.0.0-build.29.20
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.styles.d.ts.map +1 -1
- package/lib/components/Editor/Toolbar/AnchorButton.d.ts.map +1 -1
- package/lib/components/Editor/Toolbar/AnchorButton.js +33 -31
- package/lib/components/Editor/Toolbar/AnchorButton.js.map +1 -1
- package/lib/components/Editor/Toolbar/ImageButton.d.ts.map +1 -1
- package/lib/components/Editor/Toolbar/ImageButton.js +27 -28
- package/lib/components/Editor/Toolbar/ImageButton.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Editor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,6NAOjC,CAAC;AAIF,UAAU,uBAAuB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,wQAmB9B,CAAC;AAIF,eAAO,MAAM,gBAAgB;
|
|
1
|
+
{"version":3,"file":"Editor.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Editor/Editor.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,6NAOjC,CAAC;AAIF,UAAU,uBAAuB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,wQAmB9B,CAAC;AAIF,eAAO,MAAM,gBAAgB;2BAeogF,CAAC;iDAf/+E,CAAC;AAIpD,eAAO,MAAM,iBAAiB,0dAE7B,CAAC;AAIF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;qSAE5B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnchorButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"AnchorButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AAe3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAS5D,UAAU,iBAAiB;IACzB,GAAG,EAAE,OAAO,CAAC;IACb,MAAM,EAAE,YAAY,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,GAAI,+BAA+B,iBAAiB,GAAG,YAAY,4CAmRpF,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useRef, useState, useEffect, useLayoutEffect } from 'react';
|
|
3
|
-
import { Button, CardContent, Grid, Icon, registerIcon, Input, useOuterEvent, Form, useI18n } from '@pega/cosmos-react-core';
|
|
2
|
+
import { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
|
|
3
|
+
import { Button, CardContent, Grid, Icon, registerIcon, Input, useOuterEvent, Form, useI18n, useElement, useEscape } from '@pega/cosmos-react-core';
|
|
4
4
|
import * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';
|
|
5
5
|
import ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';
|
|
6
6
|
import { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';
|
|
@@ -9,9 +9,9 @@ registerIcon(chainIcon);
|
|
|
9
9
|
const AnchorButton = ({ osx, editor, ...restProps }) => {
|
|
10
10
|
const t = useI18n();
|
|
11
11
|
const buttonRef = useRef(null);
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
12
|
+
const [textInputEl, setTextInputEl] = useElement();
|
|
13
|
+
const [urlInputEl, setUrlInputEl] = useElement();
|
|
14
|
+
const [popoverEl, setPopoverEl] = useElement();
|
|
15
15
|
const [linkText, setLinkText] = useState('');
|
|
16
16
|
const [url, setUrl] = useState('');
|
|
17
17
|
const [urlMatch, setUrlMatch] = useState(false);
|
|
@@ -29,19 +29,19 @@ const AnchorButton = ({ osx, editor, ...restProps }) => {
|
|
|
29
29
|
setShouldFocusInput(true);
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
|
-
const resetMenu = () => {
|
|
32
|
+
const resetMenu = useCallback(() => {
|
|
33
33
|
setLinkText('');
|
|
34
34
|
setUrl('');
|
|
35
35
|
setUrlMatch(true);
|
|
36
36
|
setAnchorMenu(false);
|
|
37
37
|
originalSelectionRef.current = null;
|
|
38
|
-
};
|
|
39
|
-
useOuterEvent('mousedown', [
|
|
38
|
+
}, []);
|
|
39
|
+
useOuterEvent('mousedown', [popoverEl, buttonRef], () => {
|
|
40
40
|
if (anchorMenu) {
|
|
41
41
|
resetMenu();
|
|
42
42
|
}
|
|
43
43
|
});
|
|
44
|
-
const createLink = () => {
|
|
44
|
+
const createLink = useCallback(() => {
|
|
45
45
|
if (url) {
|
|
46
46
|
// Only allow safe protocols to prevent XSS (e.g., javascript: URLs)
|
|
47
47
|
const allowedProtocols = /^(https?|mailto|tel):/i;
|
|
@@ -87,7 +87,7 @@ const AnchorButton = ({ osx, editor, ...restProps }) => {
|
|
|
87
87
|
}
|
|
88
88
|
resetMenu();
|
|
89
89
|
}
|
|
90
|
-
};
|
|
90
|
+
}, [url, linkText, editor, resetMenu]);
|
|
91
91
|
useEffect(() => {
|
|
92
92
|
if (anchorMenu && originalSelectionRef.current) {
|
|
93
93
|
// Use the stored original selection to populate the modal
|
|
@@ -114,16 +114,18 @@ const AnchorButton = ({ osx, editor, ...restProps }) => {
|
|
|
114
114
|
const isLinkActive = () => {
|
|
115
115
|
return editor.isActive('link') && editor.isFocused;
|
|
116
116
|
};
|
|
117
|
-
const cancelAnchorCreation = (event) => {
|
|
118
|
-
if (((event && 'key' in event && event.key === '
|
|
119
|
-
event?.type === '
|
|
117
|
+
const cancelAnchorCreation = useCallback((event) => {
|
|
118
|
+
if (((event && 'key' in event && event.key === 'Escape') ||
|
|
119
|
+
event?.type === 'click' ||
|
|
120
120
|
!event) &&
|
|
121
121
|
anchorMenu) {
|
|
122
|
-
event
|
|
122
|
+
if (event && 'key' in event && event.key === 'Escape') {
|
|
123
|
+
event.stopPropagation();
|
|
124
|
+
}
|
|
123
125
|
resetMenu();
|
|
124
126
|
buttonRef.current?.focus();
|
|
125
127
|
}
|
|
126
|
-
};
|
|
128
|
+
}, [anchorMenu, resetMenu]);
|
|
127
129
|
useEffect(() => {
|
|
128
130
|
const keyCommandListener = (e) => {
|
|
129
131
|
if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
|
|
@@ -141,25 +143,28 @@ const AnchorButton = ({ osx, editor, ...restProps }) => {
|
|
|
141
143
|
return () => {
|
|
142
144
|
iframeWindow?.removeEventListener('keydown', keyCommandListener);
|
|
143
145
|
};
|
|
144
|
-
}, [editor]);
|
|
146
|
+
}, [editor, cancelAnchorCreation]);
|
|
147
|
+
useEscape(cancelAnchorCreation, popoverEl);
|
|
145
148
|
useLayoutEffect(() => {
|
|
146
|
-
if (
|
|
147
|
-
|
|
149
|
+
if (textInputEl && shouldFocusInput) {
|
|
150
|
+
textInputEl.focus();
|
|
148
151
|
setShouldFocusInput(false);
|
|
149
152
|
}
|
|
150
|
-
}, [
|
|
153
|
+
}, [textInputEl, shouldFocusInput]);
|
|
151
154
|
useEffect(() => {
|
|
152
155
|
// These events must be added here so they run before the native event in useArrows (used in the toolbar).
|
|
153
156
|
const onKeyDown = (e) => {
|
|
154
|
-
e.
|
|
157
|
+
if (e.key !== 'Escape') {
|
|
158
|
+
e.stopPropagation();
|
|
159
|
+
}
|
|
155
160
|
};
|
|
156
|
-
|
|
157
|
-
|
|
161
|
+
textInputEl?.addEventListener('keydown', onKeyDown);
|
|
162
|
+
urlInputEl?.addEventListener('keydown', onKeyDown);
|
|
158
163
|
return () => {
|
|
159
|
-
|
|
160
|
-
|
|
164
|
+
textInputEl?.removeEventListener('keydown', onKeyDown);
|
|
165
|
+
urlInputEl?.removeEventListener('keydown', onKeyDown);
|
|
161
166
|
};
|
|
162
|
-
}, [
|
|
167
|
+
}, [textInputEl, urlInputEl]);
|
|
163
168
|
return (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { ref: buttonRef, onMouseDown: e => {
|
|
164
169
|
e.preventDefault();
|
|
165
170
|
openMenu();
|
|
@@ -168,12 +173,9 @@ const AnchorButton = ({ osx, editor, ...restProps }) => {
|
|
|
168
173
|
e.preventDefault();
|
|
169
174
|
openMenu({ focusInput: true });
|
|
170
175
|
}
|
|
171
|
-
}, active: isLinkActive(), tooltip: tooltip, label: t('rte_link'), ...restProps, children: _jsx(Icon, { name: 'chain' }) }), _jsx(StyledEditPopover, { show: anchorMenu, target: buttonRef.current, ref:
|
|
172
|
-
e.preventDefault();
|
|
173
|
-
createLink();
|
|
174
|
-
}, children: t('apply') })] }), children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(Input, { label: t('rte_link_text'), value: linkText, onClick: preventDef, onChange: (e) => {
|
|
176
|
+
}, active: isLinkActive(), tooltip: tooltip, label: t('rte_link'), ...restProps, children: _jsx(Icon, { name: 'chain' }) }), _jsx(StyledEditPopover, { show: anchorMenu, target: buttonRef.current, ref: setPopoverEl, placement: 'bottom', children: _jsx(CardContent, { children: _jsx(Form, { as: 'div', actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onClick: cancelAnchorCreation, type: 'button', children: t('cancel') }), _jsx(Button, { disabled: !url || !urlMatch, name: 'apply', variant: 'primary', onClick: createLink, children: t('apply') })] }), children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(Input, { label: t('rte_link_text'), value: linkText, onClick: preventDef, onChange: (e) => {
|
|
175
177
|
setLinkText(e.target.value);
|
|
176
|
-
}, ref:
|
|
178
|
+
}, ref: setTextInputEl }), _jsx(Input, { label: t('rte_link_url'), value: url, onClick: preventDef, onChange: (e) => {
|
|
177
179
|
const urlInput = e.target.value;
|
|
178
180
|
setUrl(urlInput);
|
|
179
181
|
if (!urlMatch) {
|
|
@@ -195,7 +197,7 @@ const AnchorButton = ({ osx, editor, ...restProps }) => {
|
|
|
195
197
|
catch {
|
|
196
198
|
setUrlMatch(false);
|
|
197
199
|
}
|
|
198
|
-
}, info: !urlMatch ? t('rte_invalid_url') : '', status: !urlMatch ? 'error' : undefined, ref:
|
|
200
|
+
}, info: !urlMatch ? t('rte_invalid_url') : '', status: !urlMatch ? 'error' : undefined, ref: setUrlInputEl })] }) }) }) })] }));
|
|
199
201
|
};
|
|
200
202
|
export default AnchorButton;
|
|
201
203
|
//# sourceMappingURL=AnchorButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnchorButton.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useEffect, useLayoutEffect } from 'react';\nimport type { ChangeEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\n\nimport {\n Button,\n CardContent,\n Grid,\n Icon,\n registerIcon,\n Input,\n useOuterEvent,\n Form,\n useI18n\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport { StyledEditPopover } from '../Editor.styles';\n\nregisterIcon(chainIcon);\n\ninterface AnchorButtonProps {\n osx: boolean;\n editor: TiptapEditor;\n}\n\nconst AnchorButton = ({ osx, editor, ...restProps }: AnchorButtonProps & ForwardProps) => {\n const t = useI18n();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const textInputRef = useRef<HTMLInputElement>(null);\n const urlInputRef = useRef<HTMLInputElement>(null);\n const popoverRef = useRef(null);\n const [linkText, setLinkText] = useState('');\n const [url, setUrl] = useState('');\n const [urlMatch, setUrlMatch] = useState(false);\n const [anchorMenu, setAnchorMenu] = useState(false);\n const [shouldFocusInput, setShouldFocusInput] = useState(false);\n // Store the original selection range when menu opens so we can restore it when creating the link\n const originalSelectionRef = useRef<{ from: number; to: number } | null>(null);\n const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_link')} (${ctrl}K)`);\n\n const openMenu = (opts: { focusInput?: boolean } = {}) => {\n // Save the original selection before opening the menu\n const { from, to } = editor.state.selection;\n originalSelectionRef.current = { from, to };\n setAnchorMenu(true);\n if (opts.focusInput) {\n setShouldFocusInput(true);\n }\n };\n\n const resetMenu = () => {\n setLinkText('');\n setUrl('');\n setUrlMatch(true);\n setAnchorMenu(false);\n originalSelectionRef.current = null;\n };\n\n useOuterEvent('mousedown', [popoverRef, buttonRef], () => {\n if (anchorMenu) {\n resetMenu();\n }\n });\n\n const createLink = () => {\n if (url) {\n // Only allow safe protocols to prevent XSS (e.g., javascript: URLs)\n const allowedProtocols = /^(https?|mailto|tel):/i;\n const hasProtocol = /^[a-z][a-z0-9.+-]*:/i.test(url);\n\n let normalizedUrl: string;\n if (hasProtocol) {\n // Reject URLs with disallowed protocols\n if (!allowedProtocols.test(url)) {\n return;\n }\n normalizedUrl = url;\n } else {\n normalizedUrl = `https://${url}`;\n }\n\n // Use the original selection to determine if text was selected in the editor\n const originalSelection = originalSelectionRef.current;\n\n if (originalSelection && originalSelection.from !== originalSelection.to) {\n // Text was originally selected - restore selection and apply link\n // Then collapse selection to end and clear stored mark so subsequent typing isn't linked\n editor\n .chain()\n .focus()\n .setTextSelection({ from: originalSelection.from, to: originalSelection.to })\n .setLink({ href: normalizedUrl })\n .setTextSelection(originalSelection.to)\n .unsetMark('link')\n .run();\n } else if (linkText) {\n // No text was originally selected, insert new link with the text entered in modal\n editor\n .chain()\n .focus()\n .insertContent({\n type: 'text',\n text: linkText,\n marks: [{ type: 'link', attrs: { href: normalizedUrl } }]\n })\n .unsetMark('link')\n .insertContent(' ')\n .run();\n }\n resetMenu();\n }\n };\n\n useEffect(() => {\n if (anchorMenu && originalSelectionRef.current) {\n // Use the stored original selection to populate the modal\n // This avoids issues where focus shift may collapse the editor selection\n const { from, to } = originalSelectionRef.current;\n const text = editor.state.doc.textBetween(from, to);\n const linkMark = editor.getAttributes('link');\n\n if (linkMark.href) {\n setUrl(linkMark.href);\n setLinkText(text || '');\n } else {\n setLinkText(text || '');\n }\n } else if (!anchorMenu) {\n resetMenu();\n }\n }, [anchorMenu]);\n\n const preventDef = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const isLinkActive = () => {\n return editor.isActive('link') && editor.isFocused;\n };\n\n const cancelAnchorCreation = (event?: KeyboardEvent | MouseEvent) => {\n if (\n ((event && 'key' in event && event.key === 'Enter') ||\n event?.type === 'mousedown' ||\n !event) &&\n anchorMenu\n ) {\n event?.preventDefault();\n resetMenu();\n buttonRef.current?.focus();\n }\n };\n\n useEffect(() => {\n const keyCommandListener = (e: KeyboardEvent) => {\n if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n if (e.key === 'Escape') {\n cancelAnchorCreation();\n }\n };\n\n // Get the iframe's window where editor content lives\n const iframeWindow = editor.view.dom.ownerDocument.defaultView;\n\n // Listen on iframe window for keyboard shortcuts (editor content is in iframe)\n iframeWindow?.addEventListener('keydown', keyCommandListener);\n return () => {\n iframeWindow?.removeEventListener('keydown', keyCommandListener);\n };\n }, [editor]);\n\n useLayoutEffect(() => {\n if (anchorMenu && shouldFocusInput) {\n textInputRef.current?.focus();\n setShouldFocusInput(false);\n }\n }, [textInputRef.current]);\n\n useEffect(() => {\n // These events must be added here so they run before the native event in useArrows (used in the toolbar).\n const onKeyDown = (e: KeyboardEvent) => {\n e.stopPropagation();\n };\n textInputRef.current?.addEventListener('keydown', onKeyDown);\n urlInputRef.current?.addEventListener('keydown', onKeyDown);\n return () => {\n textInputRef.current?.removeEventListener('keydown', onKeyDown);\n urlInputRef.current?.removeEventListener('keydown', onKeyDown);\n };\n }, [textInputRef.current, urlInputRef.current]);\n\n return (\n <>\n <ToolbarButton\n ref={buttonRef}\n onMouseDown={e => {\n e.preventDefault();\n openMenu();\n }}\n onKeyDown={(e: ReactKeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n }}\n active={isLinkActive()}\n tooltip={tooltip}\n label={t('rte_link')}\n {...restProps}\n >\n <Icon name='chain' />\n </ToolbarButton>\n <StyledEditPopover\n show={anchorMenu}\n target={buttonRef.current}\n ref={popoverRef}\n placement='bottom'\n >\n <CardContent>\n <Form\n as='div'\n actions={\n <>\n <Button\n variant='secondary'\n onKeyDown={cancelAnchorCreation}\n onMouseDown={cancelAnchorCreation}\n type='button'\n >\n {t('cancel')}\n </Button>\n <Button\n disabled={!url || !urlMatch}\n name='apply'\n variant='primary'\n onClick={(e: MouseEvent) => {\n e.preventDefault();\n createLink();\n }}\n >\n {t('apply')}\n </Button>\n </>\n }\n >\n <Grid container={{ rowGap: 2 }}>\n <Input\n label={t('rte_link_text')}\n value={linkText}\n onClick={preventDef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setLinkText(e.target.value);\n }}\n ref={textInputRef}\n />\n <Input\n label={t('rte_link_url')}\n value={url}\n onClick={preventDef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n const urlInput = e.target.value;\n setUrl(urlInput);\n\n if (!urlMatch) {\n try {\n // eslint-disable-next-line no-new\n new URL(\n /^[a-z][a-z0-9+.-]*:/i.test(urlInput) ? urlInput : `https:${urlInput}`\n );\n setUrlMatch(true);\n } catch {\n setUrlMatch(false);\n }\n }\n }}\n onBlur={() => {\n try {\n // eslint-disable-next-line no-new\n new URL(/^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `https:${url}`);\n setUrlMatch(true);\n } catch {\n setUrlMatch(false);\n }\n }}\n info={!urlMatch ? t('rte_invalid_url') : ''}\n status={!urlMatch ? 'error' : undefined}\n ref={urlInputRef}\n />\n </Grid>\n </Form>\n </CardContent>\n </StyledEditPopover>\n </>\n );\n};\n\nexport default AnchorButton;\n"]}
|
|
1
|
+
{"version":3,"file":"AnchorButton.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/AnchorButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';\nimport type { ChangeEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport type { Editor as TiptapEditor } from '@tiptap/core';\n\nimport {\n Button,\n CardContent,\n Grid,\n Icon,\n registerIcon,\n Input,\n useOuterEvent,\n Form,\n useI18n,\n useElement,\n useEscape\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport * as chainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain.icon';\n\nimport ToolbarButton from '../../RichTextEditor/Toolbar/ToolbarButton';\nimport { getKeyCommand } from '../../RichTextEditor/Toolbar/utils';\nimport { StyledEditPopover } from '../Editor.styles';\n\nregisterIcon(chainIcon);\n\ninterface AnchorButtonProps {\n osx: boolean;\n editor: TiptapEditor;\n}\n\nconst AnchorButton = ({ osx, editor, ...restProps }: AnchorButtonProps & ForwardProps) => {\n const t = useI18n();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [textInputEl, setTextInputEl] = useElement<HTMLInputElement>();\n const [urlInputEl, setUrlInputEl] = useElement<HTMLInputElement>();\n const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n const [linkText, setLinkText] = useState('');\n const [url, setUrl] = useState('');\n const [urlMatch, setUrlMatch] = useState(false);\n const [anchorMenu, setAnchorMenu] = useState(false);\n const [shouldFocusInput, setShouldFocusInput] = useState(false);\n // Store the original selection range when menu opens so we can restore it when creating the link\n const originalSelectionRef = useRef<{ from: number; to: number } | null>(null);\n const tooltip = getKeyCommand(osx, ({ ctrl }) => `${t('rte_link')} (${ctrl}K)`);\n\n const openMenu = (opts: { focusInput?: boolean } = {}) => {\n // Save the original selection before opening the menu\n const { from, to } = editor.state.selection;\n originalSelectionRef.current = { from, to };\n setAnchorMenu(true);\n if (opts.focusInput) {\n setShouldFocusInput(true);\n }\n };\n\n const resetMenu = useCallback(() => {\n setLinkText('');\n setUrl('');\n setUrlMatch(true);\n setAnchorMenu(false);\n originalSelectionRef.current = null;\n }, []);\n\n useOuterEvent('mousedown', [popoverEl, buttonRef], () => {\n if (anchorMenu) {\n resetMenu();\n }\n });\n\n const createLink = useCallback(() => {\n if (url) {\n // Only allow safe protocols to prevent XSS (e.g., javascript: URLs)\n const allowedProtocols = /^(https?|mailto|tel):/i;\n const hasProtocol = /^[a-z][a-z0-9.+-]*:/i.test(url);\n\n let normalizedUrl: string;\n if (hasProtocol) {\n // Reject URLs with disallowed protocols\n if (!allowedProtocols.test(url)) {\n return;\n }\n normalizedUrl = url;\n } else {\n normalizedUrl = `https://${url}`;\n }\n\n // Use the original selection to determine if text was selected in the editor\n const originalSelection = originalSelectionRef.current;\n\n if (originalSelection && originalSelection.from !== originalSelection.to) {\n // Text was originally selected - restore selection and apply link\n // Then collapse selection to end and clear stored mark so subsequent typing isn't linked\n editor\n .chain()\n .focus()\n .setTextSelection({ from: originalSelection.from, to: originalSelection.to })\n .setLink({ href: normalizedUrl })\n .setTextSelection(originalSelection.to)\n .unsetMark('link')\n .run();\n } else if (linkText) {\n // No text was originally selected, insert new link with the text entered in modal\n editor\n .chain()\n .focus()\n .insertContent({\n type: 'text',\n text: linkText,\n marks: [{ type: 'link', attrs: { href: normalizedUrl } }]\n })\n .unsetMark('link')\n .insertContent(' ')\n .run();\n }\n resetMenu();\n }\n }, [url, linkText, editor, resetMenu]);\n\n useEffect(() => {\n if (anchorMenu && originalSelectionRef.current) {\n // Use the stored original selection to populate the modal\n // This avoids issues where focus shift may collapse the editor selection\n const { from, to } = originalSelectionRef.current;\n const text = editor.state.doc.textBetween(from, to);\n const linkMark = editor.getAttributes('link');\n\n if (linkMark.href) {\n setUrl(linkMark.href);\n setLinkText(text || '');\n } else {\n setLinkText(text || '');\n }\n } else if (!anchorMenu) {\n resetMenu();\n }\n }, [anchorMenu]);\n\n const preventDef = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const isLinkActive = () => {\n return editor.isActive('link') && editor.isFocused;\n };\n\n const cancelAnchorCreation = useCallback(\n (event?: KeyboardEvent | MouseEvent) => {\n if (\n ((event && 'key' in event && event.key === 'Escape') ||\n event?.type === 'click' ||\n !event) &&\n anchorMenu\n ) {\n if (event && 'key' in event && event.key === 'Escape') {\n event.stopPropagation();\n }\n\n resetMenu();\n buttonRef.current?.focus();\n }\n },\n [anchorMenu, resetMenu]\n );\n\n useEffect(() => {\n const keyCommandListener = (e: KeyboardEvent) => {\n if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n if (e.key === 'Escape') {\n cancelAnchorCreation();\n }\n };\n\n // Get the iframe's window where editor content lives\n const iframeWindow = editor.view.dom.ownerDocument.defaultView;\n\n // Listen on iframe window for keyboard shortcuts (editor content is in iframe)\n iframeWindow?.addEventListener('keydown', keyCommandListener);\n return () => {\n iframeWindow?.removeEventListener('keydown', keyCommandListener);\n };\n }, [editor, cancelAnchorCreation]);\n\n useEscape(cancelAnchorCreation, popoverEl);\n\n useLayoutEffect(() => {\n if (textInputEl && shouldFocusInput) {\n textInputEl.focus();\n setShouldFocusInput(false);\n }\n }, [textInputEl, shouldFocusInput]);\n\n useEffect(() => {\n // These events must be added here so they run before the native event in useArrows (used in the toolbar).\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key !== 'Escape') {\n e.stopPropagation();\n }\n };\n textInputEl?.addEventListener('keydown', onKeyDown);\n urlInputEl?.addEventListener('keydown', onKeyDown);\n return () => {\n textInputEl?.removeEventListener('keydown', onKeyDown);\n urlInputEl?.removeEventListener('keydown', onKeyDown);\n };\n }, [textInputEl, urlInputEl]);\n\n return (\n <>\n <ToolbarButton\n ref={buttonRef}\n onMouseDown={e => {\n e.preventDefault();\n openMenu();\n }}\n onKeyDown={(e: ReactKeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n openMenu({ focusInput: true });\n }\n }}\n active={isLinkActive()}\n tooltip={tooltip}\n label={t('rte_link')}\n {...restProps}\n >\n <Icon name='chain' />\n </ToolbarButton>\n <StyledEditPopover\n show={anchorMenu}\n target={buttonRef.current}\n ref={setPopoverEl}\n placement='bottom'\n >\n <CardContent>\n <Form\n as='div'\n actions={\n <>\n <Button variant='secondary' onClick={cancelAnchorCreation} type='button'>\n {t('cancel')}\n </Button>\n <Button\n disabled={!url || !urlMatch}\n name='apply'\n variant='primary'\n onClick={createLink}\n >\n {t('apply')}\n </Button>\n </>\n }\n >\n <Grid container={{ rowGap: 2 }}>\n <Input\n label={t('rte_link_text')}\n value={linkText}\n onClick={preventDef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setLinkText(e.target.value);\n }}\n ref={setTextInputEl}\n />\n <Input\n label={t('rte_link_url')}\n value={url}\n onClick={preventDef}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n const urlInput = e.target.value;\n setUrl(urlInput);\n\n if (!urlMatch) {\n try {\n // eslint-disable-next-line no-new\n new URL(\n /^[a-z][a-z0-9+.-]*:/i.test(urlInput) ? urlInput : `https:${urlInput}`\n );\n setUrlMatch(true);\n } catch {\n setUrlMatch(false);\n }\n }\n }}\n onBlur={() => {\n try {\n // eslint-disable-next-line no-new\n new URL(/^[a-z][a-z0-9+.-]*:/i.test(url) ? url : `https:${url}`);\n setUrlMatch(true);\n } catch {\n setUrlMatch(false);\n }\n }}\n info={!urlMatch ? t('rte_invalid_url') : ''}\n status={!urlMatch ? 'error' : undefined}\n ref={setUrlInputEl}\n />\n </Grid>\n </Form>\n </CardContent>\n </StyledEditPopover>\n </>\n );\n};\n\nexport default AnchorButton;\n"]}
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,4CA+NrF,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -57,36 +57,35 @@ const ImageButton = ({ editor, imageInsertionMode, ...restProps }) => {
|
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
else if (selectedAttachmentType === 'link') {
|
|
60
|
-
if (url) {
|
|
61
|
-
const imageUid = createUID();
|
|
62
|
-
// Tiptap API - insert image using the Image extension command
|
|
63
|
-
editor
|
|
64
|
-
.chain()
|
|
65
|
-
.focus()
|
|
66
|
-
.setImage({
|
|
67
|
-
src: url,
|
|
68
|
-
alt: imageLinkTitle || t('rte_broken_image')
|
|
69
|
-
})
|
|
70
|
-
.updateAttributes('image', { 'data-id': imageUid })
|
|
71
|
-
.run();
|
|
72
|
-
// Add error handler for broken images if no alt text was provided
|
|
73
|
-
if (!imageLinkTitle) {
|
|
74
|
-
// Use the editor's document to target the correct iframe
|
|
75
|
-
const editorDoc = editor.view.dom.ownerDocument;
|
|
76
|
-
requestAnimationFrame(() => {
|
|
77
|
-
const imageEl = editorDoc.querySelector(`img[data-id="${imageUid}"]`);
|
|
78
|
-
if (imageEl) {
|
|
79
|
-
imageEl.onerror = () => {
|
|
80
|
-
imageEl.alt = t('rte_broken_image');
|
|
81
|
-
};
|
|
82
|
-
}
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
resetMenu();
|
|
86
|
-
}
|
|
87
|
-
else {
|
|
60
|
+
if (!url || incorrectUrl) {
|
|
88
61
|
setIncorrectUrl(true);
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
const imageUid = createUID();
|
|
65
|
+
// Tiptap API - insert image using the Image extension command
|
|
66
|
+
editor
|
|
67
|
+
.chain()
|
|
68
|
+
.focus()
|
|
69
|
+
.setImage({
|
|
70
|
+
src: url,
|
|
71
|
+
alt: imageLinkTitle || t('rte_broken_image')
|
|
72
|
+
})
|
|
73
|
+
.updateAttributes('image', { 'data-id': imageUid })
|
|
74
|
+
.run();
|
|
75
|
+
// Add error handler for broken images if no alt text was provided
|
|
76
|
+
if (!imageLinkTitle) {
|
|
77
|
+
// Use the editor's document to target the correct iframe
|
|
78
|
+
const editorDoc = editor.view.dom.ownerDocument;
|
|
79
|
+
requestAnimationFrame(() => {
|
|
80
|
+
const imageEl = editorDoc.querySelector(`img[data-id="${imageUid}"]`);
|
|
81
|
+
if (imageEl) {
|
|
82
|
+
imageEl.onerror = () => {
|
|
83
|
+
imageEl.alt = t('rte_broken_image');
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
});
|
|
89
87
|
}
|
|
88
|
+
resetMenu();
|
|
90
89
|
}
|
|
91
90
|
};
|
|
92
91
|
const onImageAddCancel = () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageButton.js","sourceRoot":"","sources":["../../../../src/components/Editor/Toolbar/ImageButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhE,OAAO,EACL,SAAS,EACT,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,OAAO,EACR,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAE9F,OAAO,aAAa,MAAM,4CAA4C,CAAC;AACvE,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,YAAY,CAAC,WAAW,CAAC,CAAC;AAE1B,MAAM,WAAW,GAAG,CAAC,EACnB,MAAM,EACN,kBAAkB,EAClB,GAAG,SAAS,EACwE,EAAE,EAAE;IACxF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC/C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,cAAc,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IACjD,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QACxE,IAAI,kBAAkB,KAAK,KAAK,EAAE,CAAC;YACjC,OAAO,MAAM,CAAC;QAChB,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAQ,CAAC;IACjD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,kBAAkB,KAAK,KAAK,EAAE,CAAC;YACjC,yBAAyB,CAAC,MAAM,CAAC,CAAC;QACpC,CAAC;aAAM,CAAC;YACN,yBAAyB,CAAC,MAAM,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,MAAM,kBAAkB,GAAG,CAAC,UAAkB,EAAE,EAAE;QAChD,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QAC3B,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,MAAM,CAAC,EAAE,CAAC,CAAC;QACX,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,iBAAiB,CAAC,EAAE,CAAC,CAAC;QACtB,aAAa,CAAC,EAAE,CAAC,CAAC;QAClB,WAAW,CAAC,SAAS,CAAC,CAAC;QACvB,yBAAyB,CAAC,MAAM,CAAC,CAAC;QAClC,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,sBAAsB,KAAK,MAAM,EAAE,CAAC;YACtC,IAAI,QAAQ,EAAE,CAAC;gBACb,QAAQ,CAAC,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;gBAC1C,SAAS,EAAE,CAAC;YACd,CAAC;iBAAM,CAAC;gBACN,YAAY,CAAC,IAAI,CAAC,CAAC;YACrB,CAAC;QACH,CAAC;aAAM,IAAI,sBAAsB,KAAK,MAAM,EAAE,CAAC;YAC7C,IAAI,GAAG,EAAE,CAAC;gBACR,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;gBAC7B,8DAA8D;gBAC9D,MAAM;qBACH,KAAK,EAAE;qBACP,KAAK,EAAE;qBACP,QAAQ,CAAC;oBACR,GAAG,EAAE,GAAG;oBACR,GAAG,EAAE,cAAc,IAAI,CAAC,CAAC,kBAAkB,CAAC;iBAC7C,CAAC;qBACD,gBAAgB,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;qBAClD,GAAG,EAAE,CAAC;gBAET,kEAAkE;gBAClE,IAAI,CAAC,cAAc,EAAE,CAAC;oBACpB,yDAAyD;oBACzD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC;oBAChD,qBAAqB,CAAC,GAAG,EAAE;wBACzB,MAAM,OAAO,GAAG,SAAS,CAAC,aAAa,CAAmB,gBAAgB,QAAQ,IAAI,CAAC,CAAC;wBACxF,IAAI,OAAO,EAAE,CAAC;4BACZ,OAAO,CAAC,OAAO,GAAG,GAAG,EAAE;gCACrB,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,kBAAkB,CAAC,CAAC;4BACtC,CAAC,CAAC;wBACJ,CAAC;oBACH,CAAC,CAAC,CAAC;gBACL,CAAC;gBACD,SAAS,EAAE,CAAC;YACd,CAAC;iBAAM,CAAC;gBACN,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,SAAS,EAAE,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,aAAa,IACZ,GAAG,EAAE,cAAc,EACnB,OAAO,EAAE,GAAG,EAAE;oBACZ,kBAAkB,CAAC,IAAI,CAAC,CAAC;gBAC3B,CAAC,EACD,SAAS,EAAE,CAAC,CAAqB,EAAE,EAAE;oBACnC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;wBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC;gBACH,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,EACf,eAAe,IAAI,cAAc,CAAC,OAAO,IAAI,CAC5C,yBACE,KAAC,gBAAgB,IACf,OAAO,EAAE,CAAC,CAAC,eAAe,CAAC,EAC3B,QAAQ,EAAE,gBAAgB,EAC1B,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAE,GAAG,EAAE;wBACd,SAAS,EAAE,CAAC;oBACd,CAAC,EACD,MAAM,EAAE,cAAc,CAAC,OAAO,EAC9B,GAAG,EAAE,eAAe,YAEpB,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,GAAG,EAAE,CAAC;yBACP,aAEA,kBAAkB,KAAK,KAAK,IAAI,CAC/B,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,YAC5B,MAAC,gBAAgB,IACf,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAC5B,QAAQ,EAAE,CAAC,CAAC,EAAE;wCACZ,yBAAyB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oCAC5C,CAAC,iBACW,gBAAgB,EAC5B,MAAM,QACN,QAAQ,mBAER,KAAC,WAAW,IACV,EAAE,EAAC,MAAM,EACT,KAAK,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC1B,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,sBAAsB,KAAK,MAAM,GAC1C,EACF,KAAC,WAAW,IACV,EAAE,EAAC,MAAM,EACT,KAAK,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC1B,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,sBAAsB,KAAK,MAAM,GAC1C,IACe,GACd,CACR,EACA,sBAAsB,KAAK,MAAM,IAAI,CACpC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAC5B,KAAC,SAAS,IACR,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC1B,YAAY,EAAE,kBAAkB,EAChC,QAAQ,QACR,MAAM,EAAC,SAAS,EAChB,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,EAAE,EAC3C,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACvC,KAAK,EACH,QAAQ;4CACN,CAAC,CAAC;gDACE;oDACE,IAAI,EAAE,QAAQ,CAAC,IAAI;oDACnB,EAAE,EAAE,SAAS,EAAE;oDACf,SAAS,EAAE,GAAG,CAAC,eAAe,CAAC,QAAQ,CAAC;oDACxC,QAAQ,EAAE,GAAG,EAAE;wDACb,WAAW,CAAC,SAAS,CAAC,CAAC;oDACzB,CAAC;iDACF;6CACF;4CACH,CAAC,CAAC,EAAE,GAER,EACF,KAAC,KAAK,IACJ,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,EACvB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,CAAC,CAAC,EAAE;4CACZ,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wCAChC,CAAC,EACD,IAAI,EAAE,CAAC,CAAC,4BAA4B,CAAC,GACrC,IACG,CACR,EACA,sBAAsB,KAAK,MAAM,IAAI,CACpC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAC5B,KAAC,KAAK,IACJ,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,EACzB,KAAK,EAAE,GAAG,EACV,QAAQ,QACR,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,EAAE,EAC9C,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC1C,QAAQ,EAAE,CAAC,CAAC,EAAE;4CACZ,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;4CAChC,MAAM,CAAC,QAAQ,CAAC,CAAC;4CACjB,IAAI,CAAC;gDACH,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,CAAC;gDACjC,eAAe,CAAC,CAAC,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;4CAClE,CAAC;4CAAC,MAAM,CAAC;gDACP,eAAe,CAAC,IAAI,CAAC,CAAC;4CACxB,CAAC;wCACH,CAAC,GACD,EACF,KAAC,KAAK,IACJ,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,EACvB,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,CAAC,CAAC,EAAE;4CACZ,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wCACpC,CAAC,EACD,IAAI,EAAE,CAAC,CAAC,4BAA4B,CAAC,GACrC,IACG,CACR,IACI,GACU,GACd,CACR,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","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"]}
|
|
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 || 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/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.20",
|
|
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.20",
|
|
19
19
|
"@popperjs/core": "^2.11.6",
|
|
20
20
|
"@tiptap/core": "^3.12.1",
|
|
21
21
|
"@tiptap/extension-blockquote": "^3.12.1",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"slate": "^0.76.1",
|
|
40
40
|
"slate-history": "^0.66.0",
|
|
41
41
|
"slate-react": "^0.76.1",
|
|
42
|
-
"styled-components": "
|
|
42
|
+
"styled-components": "~6.3.11",
|
|
43
43
|
"stylis": "^4.3.6"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|