@dotcms/react 26.8.14-1 → 26.8.14-1-next.2538
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.
|
@@ -3,6 +3,12 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
/**
|
|
4
4
|
* Renders an image component for dotCMS.
|
|
5
5
|
*
|
|
6
|
+
* When the Block Editor assigns a link to the image, it is stored as `href` /
|
|
7
|
+
* `target` on the `dotImage` node and the image is wrapped in an anchor. `href`
|
|
8
|
+
* is `null` when the image has no link, in which case it renders bare. The
|
|
9
|
+
* truthiness check also covers the transient `''` the editor writes while
|
|
10
|
+
* unsetting a link.
|
|
11
|
+
*
|
|
6
12
|
* @param node - The node for the DotCMSImage component.
|
|
7
13
|
* @returns The rendered image component.
|
|
8
14
|
*/
|
|
@@ -12,6 +18,8 @@ const DotCMSImage = ({
|
|
|
12
18
|
const {
|
|
13
19
|
src,
|
|
14
20
|
alt,
|
|
21
|
+
href,
|
|
22
|
+
target,
|
|
15
23
|
textWrap,
|
|
16
24
|
textAlign
|
|
17
25
|
} = node.attrs;
|
|
@@ -33,16 +41,23 @@ const DotCMSImage = ({
|
|
|
33
41
|
textAlign: textAlign
|
|
34
42
|
};
|
|
35
43
|
}
|
|
44
|
+
const image = jsx("img", {
|
|
45
|
+
alt: alt,
|
|
46
|
+
src: src,
|
|
47
|
+
style: textWrap ? {
|
|
48
|
+
maxWidth: '100%',
|
|
49
|
+
height: 'auto'
|
|
50
|
+
} : undefined
|
|
51
|
+
});
|
|
36
52
|
return jsx("figure", {
|
|
37
53
|
style: wrapperStyle,
|
|
38
|
-
children: jsx("
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
})
|
|
54
|
+
children: href ? jsx("a", {
|
|
55
|
+
href: href,
|
|
56
|
+
target: target != null ? target : undefined,
|
|
57
|
+
// Guards against reverse tabnabbing when the link opens in a new tab.
|
|
58
|
+
rel: target === '_blank' ? 'noopener noreferrer' : undefined,
|
|
59
|
+
children: image
|
|
60
|
+
}) : image
|
|
46
61
|
});
|
|
47
62
|
};
|
|
48
63
|
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dotcms/react",
|
|
3
|
-
"version": "26.
|
|
3
|
+
"version": "26.8.14-1-next.2538",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"react": ">=18",
|
|
6
6
|
"react-dom": ">=18"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@dotcms/uve": "26.
|
|
10
|
-
"@dotcms/client": "26.
|
|
9
|
+
"@dotcms/uve": "26.8.14-1-next.2538",
|
|
10
|
+
"@dotcms/client": "26.8.14-1-next.2538",
|
|
11
11
|
"@tinymce/tinymce-react": "6.2.1"
|
|
12
12
|
},
|
|
13
13
|
"devDependencies": {
|
|
@@ -2,6 +2,12 @@ import { BlockEditorNode } from '@dotcms/types';
|
|
|
2
2
|
/**
|
|
3
3
|
* Renders an image component for dotCMS.
|
|
4
4
|
*
|
|
5
|
+
* When the Block Editor assigns a link to the image, it is stored as `href` /
|
|
6
|
+
* `target` on the `dotImage` node and the image is wrapped in an anchor. `href`
|
|
7
|
+
* is `null` when the image has no link, in which case it renders bare. The
|
|
8
|
+
* truthiness check also covers the transient `''` the editor writes while
|
|
9
|
+
* unsetting a link.
|
|
10
|
+
*
|
|
5
11
|
* @param node - The node for the DotCMSImage component.
|
|
6
12
|
* @returns The rendered image component.
|
|
7
13
|
*/
|