@contentful/field-editor-rich-text 3.12.7 → 3.13.0
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/dist/cjs/Toolbar/components/EmbedEntityWidget.js +6 -0
- package/dist/cjs/constants/Schema.js +3 -0
- package/dist/cjs/helpers/{newEntitySelectorConfigFromRichTextField.js → config.js} +19 -5
- package/dist/cjs/plugins/DragAndDrop/index.js +4 -2
- package/dist/cjs/plugins/EmbeddedEntityInline/index.js +21 -4
- package/dist/cjs/plugins/{shared/FetchingWrappedResourceCard.js → EmbeddedResourceBlock/FetchingWrappedResourceBlockCard.js} +3 -3
- package/dist/cjs/plugins/EmbeddedResourceBlock/LinkedResourceBlock.js +2 -2
- package/dist/cjs/plugins/EmbeddedResourceInline/FetchingWrappedResourceInlineCard.js +102 -0
- package/dist/cjs/plugins/EmbeddedResourceInline/LinkedResourceInline.js +51 -0
- package/dist/cjs/plugins/EmbeddedResourceInline/index.js +56 -0
- package/dist/cjs/plugins/index.js +2 -0
- package/dist/cjs/plugins/shared/EmbeddedBlockToolbarIcon.js +2 -4
- package/dist/cjs/plugins/shared/EmbeddedBlockUtil.js +3 -4
- package/dist/cjs/plugins/shared/EmbeddedInlineToolbarIcon.js +11 -6
- package/dist/cjs/plugins/shared/EmbeddedInlineUtil.js +66 -27
- package/dist/cjs/plugins/shared/ResourceNewBadge.js +57 -0
- package/dist/cjs/plugins/shared/__tests__/FetchingWrappedResourceCard.test.js +2 -2
- package/dist/esm/Toolbar/components/EmbedEntityWidget.js +6 -0
- package/dist/esm/constants/Schema.js +3 -0
- package/dist/esm/helpers/{newEntitySelectorConfigFromRichTextField.js → config.js} +8 -2
- package/dist/esm/plugins/DragAndDrop/index.js +4 -2
- package/dist/esm/plugins/EmbeddedEntityInline/index.js +22 -5
- package/dist/esm/plugins/{shared/FetchingWrappedResourceCard.js → EmbeddedResourceBlock/FetchingWrappedResourceBlockCard.js} +1 -1
- package/dist/esm/plugins/EmbeddedResourceBlock/LinkedResourceBlock.js +2 -2
- package/dist/esm/plugins/EmbeddedResourceInline/FetchingWrappedResourceInlineCard.js +53 -0
- package/dist/esm/plugins/EmbeddedResourceInline/LinkedResourceInline.js +36 -0
- package/dist/esm/plugins/EmbeddedResourceInline/index.js +46 -0
- package/dist/esm/plugins/index.js +2 -0
- package/dist/esm/plugins/shared/EmbeddedBlockToolbarIcon.js +3 -5
- package/dist/esm/plugins/shared/EmbeddedBlockUtil.js +1 -2
- package/dist/esm/plugins/shared/EmbeddedInlineToolbarIcon.js +12 -7
- package/dist/esm/plugins/shared/EmbeddedInlineUtil.js +64 -25
- package/dist/esm/plugins/shared/ResourceNewBadge.js +8 -0
- package/dist/esm/plugins/shared/__tests__/FetchingWrappedResourceCard.test.js +2 -2
- package/dist/types/constants/Schema.d.ts +3 -0
- package/dist/types/helpers/config.d.ts +33 -0
- package/dist/types/plugins/{shared/FetchingWrappedResourceCard.d.ts → EmbeddedResourceBlock/FetchingWrappedResourceBlockCard.d.ts} +2 -2
- package/dist/types/plugins/EmbeddedResourceInline/FetchingWrappedResourceInlineCard.d.ts +13 -0
- package/dist/types/plugins/EmbeddedResourceInline/LinkedResourceInline.d.ts +13 -0
- package/dist/types/plugins/EmbeddedResourceInline/index.d.ts +3 -0
- package/dist/types/plugins/shared/EmbeddedInlineToolbarIcon.d.ts +2 -1
- package/dist/types/plugins/shared/EmbeddedInlineUtil.d.ts +3 -17
- package/dist/types/plugins/shared/ResourceNewBadge.d.ts +2 -0
- package/package.json +2 -2
- package/dist/cjs/helpers/newResourceEntitySelectorConfigFromRichTextField.js +0 -21
- package/dist/esm/helpers/newResourceEntitySelectorConfigFromRichTextField.js +0 -6
- package/dist/types/helpers/newEntitySelectorConfigFromRichTextField.d.ts +0 -14
- package/dist/types/helpers/newResourceEntitySelectorConfigFromRichTextField.d.ts +0 -16
|
@@ -63,6 +63,7 @@ const EmbedEntityWidget = ({ isDisabled , canInsertBlocks })=>{
|
|
|
63
63
|
const onCloseEntityDropdown = ()=>setEmbedDropdownOpen(false);
|
|
64
64
|
const onToggleEntityDropdown = ()=>setEmbedDropdownOpen(!isEmbedDropdownOpen);
|
|
65
65
|
const inlineEntryEmbedEnabled = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.INLINES.EMBEDDED_ENTRY);
|
|
66
|
+
const inlineResourceEmbedEnabled = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.INLINES.EMBEDDED_RESOURCE);
|
|
66
67
|
const blockEntryEmbedEnabled = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.BLOCKS.EMBEDDED_ENTRY) && canInsertBlocks;
|
|
67
68
|
const blockResourceEmbedEnabled = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.BLOCKS.EMBEDDED_RESOURCE) && canInsertBlocks;
|
|
68
69
|
const blockAssetEmbedEnabled = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.BLOCKS.EMBEDDED_ASSET) && canInsertBlocks;
|
|
@@ -75,6 +76,11 @@ const EmbedEntityWidget = ({ isDisabled , canInsertBlocks })=>{
|
|
|
75
76
|
nodeType: _richtexttypes.BLOCKS.EMBEDDED_RESOURCE,
|
|
76
77
|
onClose: onCloseEntityDropdown
|
|
77
78
|
}), inlineEntryEmbedEnabled && _react.default.createElement(_EmbeddedInlineToolbarIcon.EmbeddedInlineToolbarIcon, {
|
|
79
|
+
nodeType: _richtexttypes.INLINES.EMBEDDED_ENTRY,
|
|
80
|
+
isDisabled: !!isDisabled || (0, _editor.isLinkActive)(editor),
|
|
81
|
+
onClose: onCloseEntityDropdown
|
|
82
|
+
}), inlineResourceEmbedEnabled && _react.default.createElement(_EmbeddedInlineToolbarIcon.EmbeddedInlineToolbarIcon, {
|
|
83
|
+
nodeType: _richtexttypes.INLINES.EMBEDDED_RESOURCE,
|
|
78
84
|
isDisabled: !!isDisabled || (0, _editor.isLinkActive)(editor),
|
|
79
85
|
onClose: onCloseEntityDropdown
|
|
80
86
|
}), blockAssetEmbedEnabled && _react.default.createElement(_EmbeddedBlockToolbarIcon.EmbeddedBlockToolbarIcon, {
|
|
@@ -2,25 +2,34 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
newEntitySelectorConfigFromRichTextField: function() {
|
|
8
13
|
return newEntitySelectorConfigFromRichTextField;
|
|
14
|
+
},
|
|
15
|
+
newResourceEntitySelectorConfigFromRichTextField: function() {
|
|
16
|
+
return newResourceEntitySelectorConfigFromRichTextField;
|
|
9
17
|
}
|
|
10
18
|
});
|
|
19
|
+
const _getAllowedResourcesForNodeType = _interop_require_default(require("./getAllowedResourcesForNodeType"));
|
|
11
20
|
const _getLinkedContentTypeIdsForNodeType = _interop_require_default(require("./getLinkedContentTypeIdsForNodeType"));
|
|
12
21
|
function _interop_require_default(obj) {
|
|
13
22
|
return obj && obj.__esModule ? obj : {
|
|
14
23
|
default: obj
|
|
15
24
|
};
|
|
16
25
|
}
|
|
17
|
-
|
|
26
|
+
const newEntitySelectorConfigFromRichTextField = (field, nodeType)=>{
|
|
18
27
|
return {
|
|
19
28
|
entityType: getEntityTypeFromRichTextNode(nodeType),
|
|
20
29
|
locale: field.locale || null,
|
|
21
30
|
contentTypes: (0, _getLinkedContentTypeIdsForNodeType.default)(field, nodeType)
|
|
22
31
|
};
|
|
23
|
-
}
|
|
32
|
+
};
|
|
24
33
|
function getEntityTypeFromRichTextNode(nodeType) {
|
|
25
34
|
const words = nodeType.split('-');
|
|
26
35
|
if (words.indexOf('entry') !== -1) {
|
|
@@ -31,3 +40,8 @@ function getEntityTypeFromRichTextNode(nodeType) {
|
|
|
31
40
|
}
|
|
32
41
|
throw new Error(`RichText node type \`${nodeType}\` has no associated \`entityType\``);
|
|
33
42
|
}
|
|
43
|
+
const newResourceEntitySelectorConfigFromRichTextField = (field, nodeType)=>{
|
|
44
|
+
return {
|
|
45
|
+
allowedResources: (0, _getAllowedResourcesForNodeType.default)(field, nodeType)
|
|
46
|
+
};
|
|
47
|
+
};
|
|
@@ -16,11 +16,13 @@ function createDragAndDropPlugin() {
|
|
|
16
16
|
_richtexttypes.BLOCKS.EMBEDDED_ASSET,
|
|
17
17
|
_richtexttypes.BLOCKS.EMBEDDED_RESOURCE,
|
|
18
18
|
_richtexttypes.BLOCKS.HR,
|
|
19
|
-
_richtexttypes.INLINES.EMBEDDED_ENTRY
|
|
19
|
+
_richtexttypes.INLINES.EMBEDDED_ENTRY,
|
|
20
|
+
_richtexttypes.INLINES.EMBEDDED_RESOURCE
|
|
20
21
|
];
|
|
21
22
|
const ON_DROP_ALLOWED_TYPES = {
|
|
22
23
|
TABLE: [
|
|
23
|
-
_richtexttypes.INLINES.EMBEDDED_ENTRY
|
|
24
|
+
_richtexttypes.INLINES.EMBEDDED_ENTRY,
|
|
25
|
+
_richtexttypes.INLINES.EMBEDDED_RESOURCE
|
|
24
26
|
]
|
|
25
27
|
};
|
|
26
28
|
return {
|
|
@@ -13,9 +13,10 @@ const _EmbeddedInlineUtil = require("../shared/EmbeddedInlineUtil");
|
|
|
13
13
|
const _LinkedEntityInline = require("./LinkedEntityInline");
|
|
14
14
|
function createEmbeddedEntityInlinePlugin(sdk) {
|
|
15
15
|
const htmlAttributeName = 'data-embedded-entity-inline-id';
|
|
16
|
+
const nodeType = _richtexttypes.INLINES.EMBEDDED_ENTRY;
|
|
16
17
|
return {
|
|
17
|
-
key:
|
|
18
|
-
type:
|
|
18
|
+
key: nodeType,
|
|
19
|
+
type: nodeType,
|
|
19
20
|
isElement: true,
|
|
20
21
|
isInline: true,
|
|
21
22
|
isVoid: true,
|
|
@@ -24,7 +25,7 @@ function createEmbeddedEntityInlinePlugin(sdk) {
|
|
|
24
25
|
hotkey: 'mod+shift+2'
|
|
25
26
|
},
|
|
26
27
|
handlers: {
|
|
27
|
-
onKeyDown: (0, _EmbeddedInlineUtil.getWithEmbeddedEntryInlineEvents)(sdk)
|
|
28
|
+
onKeyDown: (0, _EmbeddedInlineUtil.getWithEmbeddedEntryInlineEvents)(nodeType, sdk)
|
|
28
29
|
},
|
|
29
30
|
deserializeHtml: {
|
|
30
31
|
rules: [
|
|
@@ -33,7 +34,23 @@ function createEmbeddedEntityInlinePlugin(sdk) {
|
|
|
33
34
|
}
|
|
34
35
|
],
|
|
35
36
|
withoutChildren: true,
|
|
36
|
-
getNode: (el)=>(
|
|
37
|
+
getNode: (el)=>({
|
|
38
|
+
type: nodeType,
|
|
39
|
+
children: [
|
|
40
|
+
{
|
|
41
|
+
text: ''
|
|
42
|
+
}
|
|
43
|
+
],
|
|
44
|
+
data: {
|
|
45
|
+
target: {
|
|
46
|
+
sys: {
|
|
47
|
+
id: el.getAttribute('data-entity-id'),
|
|
48
|
+
type: 'Link',
|
|
49
|
+
linkType: el.getAttribute('data-entity-type')
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
})
|
|
37
54
|
}
|
|
38
55
|
};
|
|
39
56
|
}
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
Object.defineProperty(exports, "
|
|
5
|
+
Object.defineProperty(exports, "FetchingWrappedResourceBlockCard", {
|
|
6
6
|
enumerable: true,
|
|
7
7
|
get: function() {
|
|
8
|
-
return
|
|
8
|
+
return FetchingWrappedResourceBlockCard;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _react = _interop_require_wildcard(require("react"));
|
|
@@ -80,7 +80,7 @@ const InternalEntryCard = _react.memo((props)=>{
|
|
|
80
80
|
});
|
|
81
81
|
}, _fastdeepequal.default);
|
|
82
82
|
InternalEntryCard.displayName = 'ReferenceCard';
|
|
83
|
-
const
|
|
83
|
+
const FetchingWrappedResourceBlockCard = (props)=>{
|
|
84
84
|
const { link , onEntityFetchComplete } = props;
|
|
85
85
|
const { data , status , error } = (0, _fieldeditorreference.useResource)(link.linkType, link.urn);
|
|
86
86
|
_react.useEffect(()=>{
|
|
@@ -14,8 +14,8 @@ const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
|
|
|
14
14
|
const _internal = require("../../internal");
|
|
15
15
|
const _SdkProvider = require("../../SdkProvider");
|
|
16
16
|
const _linkstracking = require("../links-tracking");
|
|
17
|
-
const _FetchingWrappedResourceCard = require("../shared/FetchingWrappedResourceCard");
|
|
18
17
|
const _LinkedBlockWrapper = require("../shared/LinkedBlockWrapper");
|
|
18
|
+
const _FetchingWrappedResourceBlockCard = require("./FetchingWrappedResourceBlockCard");
|
|
19
19
|
function _interop_require_default(obj) {
|
|
20
20
|
return obj && obj.__esModule ? obj : {
|
|
21
21
|
default: obj
|
|
@@ -42,7 +42,7 @@ function LinkedResourceBlock(props) {
|
|
|
42
42
|
return _react.default.createElement(_LinkedBlockWrapper.LinkedBlockWrapper, {
|
|
43
43
|
attributes: attributes,
|
|
44
44
|
link: element.data.target,
|
|
45
|
-
card: _react.default.createElement(
|
|
45
|
+
card: _react.default.createElement(_FetchingWrappedResourceBlockCard.FetchingWrappedResourceBlockCard, {
|
|
46
46
|
sdk: sdk,
|
|
47
47
|
link: link,
|
|
48
48
|
isDisabled: isDisabled,
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "FetchingWrappedResourceInlineCard", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return FetchingWrappedResourceInlineCard;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _react = _interop_require_wildcard(require("react"));
|
|
12
|
+
const _f36components = require("@contentful/f36-components");
|
|
13
|
+
const _fieldeditorreference = require("@contentful/field-editor-reference");
|
|
14
|
+
const _fieldeditorshared = require("@contentful/field-editor-shared");
|
|
15
|
+
const _richtexttypes = require("@contentful/rich-text-types");
|
|
16
|
+
function _getRequireWildcardCache(nodeInterop) {
|
|
17
|
+
if (typeof WeakMap !== "function") return null;
|
|
18
|
+
var cacheBabelInterop = new WeakMap();
|
|
19
|
+
var cacheNodeInterop = new WeakMap();
|
|
20
|
+
return (_getRequireWildcardCache = function(nodeInterop) {
|
|
21
|
+
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
22
|
+
})(nodeInterop);
|
|
23
|
+
}
|
|
24
|
+
function _interop_require_wildcard(obj, nodeInterop) {
|
|
25
|
+
if (!nodeInterop && obj && obj.__esModule) {
|
|
26
|
+
return obj;
|
|
27
|
+
}
|
|
28
|
+
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
|
29
|
+
return {
|
|
30
|
+
default: obj
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
var cache = _getRequireWildcardCache(nodeInterop);
|
|
34
|
+
if (cache && cache.has(obj)) {
|
|
35
|
+
return cache.get(obj);
|
|
36
|
+
}
|
|
37
|
+
var newObj = {};
|
|
38
|
+
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
39
|
+
for(var key in obj){
|
|
40
|
+
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
41
|
+
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
42
|
+
if (desc && (desc.get || desc.set)) {
|
|
43
|
+
Object.defineProperty(newObj, key, desc);
|
|
44
|
+
} else {
|
|
45
|
+
newObj[key] = obj[key];
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
newObj.default = obj;
|
|
50
|
+
if (cache) {
|
|
51
|
+
cache.set(obj, newObj);
|
|
52
|
+
}
|
|
53
|
+
return newObj;
|
|
54
|
+
}
|
|
55
|
+
const { getEntryTitle , getEntryStatus } = _fieldeditorshared.entityHelpers;
|
|
56
|
+
function FetchingWrappedResourceInlineCard(props) {
|
|
57
|
+
const { link , onEntityFetchComplete } = props;
|
|
58
|
+
const { data , status: requestStatus } = (0, _fieldeditorreference.useResource)(link.linkType, link.urn);
|
|
59
|
+
_react.useEffect(()=>{
|
|
60
|
+
if (requestStatus === 'success') {
|
|
61
|
+
onEntityFetchComplete?.();
|
|
62
|
+
}
|
|
63
|
+
}, [
|
|
64
|
+
onEntityFetchComplete,
|
|
65
|
+
requestStatus
|
|
66
|
+
]);
|
|
67
|
+
if (requestStatus === 'error') {
|
|
68
|
+
return _react.createElement(_f36components.InlineEntryCard, {
|
|
69
|
+
title: "Entry missing or inaccessible",
|
|
70
|
+
testId: _richtexttypes.INLINES.EMBEDDED_RESOURCE,
|
|
71
|
+
isSelected: props.isSelected
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
if (requestStatus === 'loading' || data === undefined) {
|
|
75
|
+
return _react.createElement(_f36components.InlineEntryCard, {
|
|
76
|
+
isLoading: true
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
const { resource: entry , contentType , defaultLocaleCode , space } = data;
|
|
80
|
+
const title = getEntryTitle({
|
|
81
|
+
entry,
|
|
82
|
+
contentType,
|
|
83
|
+
defaultLocaleCode,
|
|
84
|
+
localeCode: defaultLocaleCode,
|
|
85
|
+
defaultTitle: 'Untitled'
|
|
86
|
+
});
|
|
87
|
+
const status = getEntryStatus(entry?.sys);
|
|
88
|
+
return _react.createElement(_f36components.InlineEntryCard, {
|
|
89
|
+
testId: _richtexttypes.INLINES.EMBEDDED_RESOURCE,
|
|
90
|
+
isSelected: props.isSelected,
|
|
91
|
+
title: `${data.contentType.name}: ${title} (Space: ${space.name})`,
|
|
92
|
+
status: status,
|
|
93
|
+
actions: [
|
|
94
|
+
_react.createElement(_f36components.MenuItem, {
|
|
95
|
+
key: "remove",
|
|
96
|
+
onClick: props.onRemove,
|
|
97
|
+
disabled: props.isDisabled,
|
|
98
|
+
testId: "delete"
|
|
99
|
+
}, "Remove")
|
|
100
|
+
]
|
|
101
|
+
}, _react.createElement(_f36components.Text, null, title));
|
|
102
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "LinkedResourceInline", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return LinkedResourceInline;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _react = _interop_require_default(require("react"));
|
|
12
|
+
const _slatereact = require("slate-react");
|
|
13
|
+
const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
|
|
14
|
+
const _internal = require("../../internal");
|
|
15
|
+
const _SdkProvider = require("../../SdkProvider");
|
|
16
|
+
const _linkstracking = require("../links-tracking");
|
|
17
|
+
const _LinkedInlineWrapper = require("../shared/LinkedInlineWrapper");
|
|
18
|
+
const _FetchingWrappedResourceInlineCard = require("./FetchingWrappedResourceInlineCard");
|
|
19
|
+
function _interop_require_default(obj) {
|
|
20
|
+
return obj && obj.__esModule ? obj : {
|
|
21
|
+
default: obj
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
function LinkedResourceInline(props) {
|
|
25
|
+
const { attributes , children , element } = props;
|
|
26
|
+
const { onEntityFetchComplete } = (0, _linkstracking.useLinkTracking)();
|
|
27
|
+
const isSelected = (0, _slatereact.useSelected)();
|
|
28
|
+
const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
|
|
29
|
+
const sdk = (0, _SdkProvider.useSdkContext)();
|
|
30
|
+
const isDisabled = (0, _slatereact.useReadOnly)();
|
|
31
|
+
const link = element.data.target.sys;
|
|
32
|
+
function handleRemoveClick() {
|
|
33
|
+
if (!editor) return;
|
|
34
|
+
const pathToElement = (0, _internal.findNodePath)(editor, element);
|
|
35
|
+
(0, _internal.removeNodes)(editor, {
|
|
36
|
+
at: pathToElement
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
return _react.default.createElement(_LinkedInlineWrapper.LinkedInlineWrapper, {
|
|
40
|
+
attributes: attributes,
|
|
41
|
+
link: element.data.target,
|
|
42
|
+
card: _react.default.createElement(_FetchingWrappedResourceInlineCard.FetchingWrappedResourceInlineCard, {
|
|
43
|
+
sdk: sdk,
|
|
44
|
+
link: link,
|
|
45
|
+
isDisabled: isDisabled,
|
|
46
|
+
isSelected: isSelected,
|
|
47
|
+
onRemove: handleRemoveClick,
|
|
48
|
+
onEntityFetchComplete: onEntityFetchComplete
|
|
49
|
+
})
|
|
50
|
+
}, children);
|
|
51
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "createEmbeddedResourceInlinePlugin", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return createEmbeddedResourceInlinePlugin;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _richtexttypes = require("@contentful/rich-text-types");
|
|
12
|
+
const _EmbeddedInlineUtil = require("../shared/EmbeddedInlineUtil");
|
|
13
|
+
const _LinkedResourceInline = require("./LinkedResourceInline");
|
|
14
|
+
function createEmbeddedResourceInlinePlugin(sdk) {
|
|
15
|
+
const htmlAttributeName = 'data-embedded-resource-inline-id';
|
|
16
|
+
const nodeType = _richtexttypes.INLINES.EMBEDDED_RESOURCE;
|
|
17
|
+
return {
|
|
18
|
+
key: nodeType,
|
|
19
|
+
type: nodeType,
|
|
20
|
+
isElement: true,
|
|
21
|
+
isInline: true,
|
|
22
|
+
isVoid: true,
|
|
23
|
+
component: _LinkedResourceInline.LinkedResourceInline,
|
|
24
|
+
options: {
|
|
25
|
+
hotkey: 'mod+shift+p'
|
|
26
|
+
},
|
|
27
|
+
handlers: {
|
|
28
|
+
onKeyDown: (0, _EmbeddedInlineUtil.getWithEmbeddedEntryInlineEvents)(nodeType, sdk)
|
|
29
|
+
},
|
|
30
|
+
deserializeHtml: {
|
|
31
|
+
rules: [
|
|
32
|
+
{
|
|
33
|
+
validAttribute: htmlAttributeName
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
withoutChildren: true,
|
|
37
|
+
getNode: (el)=>({
|
|
38
|
+
type: nodeType,
|
|
39
|
+
children: [
|
|
40
|
+
{
|
|
41
|
+
text: ''
|
|
42
|
+
}
|
|
43
|
+
],
|
|
44
|
+
data: {
|
|
45
|
+
target: {
|
|
46
|
+
sys: {
|
|
47
|
+
urn: el.getAttribute('data-entity-id'),
|
|
48
|
+
linkType: el.getAttribute('data-entity-type'),
|
|
49
|
+
type: 'ResourceLink'
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
})
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
}
|
|
@@ -24,6 +24,7 @@ const _DragAndDrop = require("./DragAndDrop");
|
|
|
24
24
|
const _EmbeddedEntityBlock = require("./EmbeddedEntityBlock");
|
|
25
25
|
const _EmbeddedEntityInline = require("./EmbeddedEntityInline");
|
|
26
26
|
const _EmbeddedResourceBlock = require("./EmbeddedResourceBlock");
|
|
27
|
+
const _EmbeddedResourceInline = require("./EmbeddedResourceInline");
|
|
27
28
|
const _Heading = require("./Heading");
|
|
28
29
|
const _Hr = require("./Hr");
|
|
29
30
|
const _Hyperlink = require("./Hyperlink");
|
|
@@ -57,6 +58,7 @@ const getPlugins = (sdk, onAction, restrictedMarks)=>[
|
|
|
57
58
|
(0, _EmbeddedResourceBlock.createEmbeddedResourceBlockPlugin)(sdk),
|
|
58
59
|
(0, _Hyperlink.createHyperlinkPlugin)(sdk),
|
|
59
60
|
(0, _EmbeddedEntityInline.createEmbeddedEntityInlinePlugin)(sdk),
|
|
61
|
+
(0, _EmbeddedResourceInline.createEmbeddedResourceInlinePlugin)(sdk),
|
|
60
62
|
(0, _Marks.createMarksPlugin)(),
|
|
61
63
|
(0, _TrailingParagraph.createTrailingParagraphPlugin)(),
|
|
62
64
|
(0, _Text.createTextPlugin)(restrictedMarks),
|
|
@@ -24,6 +24,7 @@ const _emotion = require("emotion");
|
|
|
24
24
|
const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
|
|
25
25
|
const _SdkProvider = require("../../SdkProvider");
|
|
26
26
|
const _EmbeddedBlockUtil = require("../shared/EmbeddedBlockUtil");
|
|
27
|
+
const _ResourceNewBadge = require("./ResourceNewBadge");
|
|
27
28
|
function _getRequireWildcardCache(nodeInterop) {
|
|
28
29
|
if (typeof WeakMap !== "function") return null;
|
|
29
30
|
var cacheBabelInterop = new WeakMap();
|
|
@@ -97,10 +98,7 @@ function EmbeddedBlockToolbarIcon({ isDisabled , nodeType , onClose }) {
|
|
|
97
98
|
as: type === 'Asset' ? _f36icons.AssetIcon : _f36icons.EmbeddedEntryBlockIcon,
|
|
98
99
|
className: `rich-text__embedded-entry-list-icon ${styles.icon}`,
|
|
99
100
|
variant: "secondary"
|
|
100
|
-
}), _react.createElement("span", null, type, nodeType == _richtexttypes.BLOCKS.EMBEDDED_RESOURCE && _react.createElement(
|
|
101
|
-
variant: "primary-filled",
|
|
102
|
-
size: "small"
|
|
103
|
-
}, "new")))));
|
|
101
|
+
}), _react.createElement("span", null, type, nodeType == _richtexttypes.BLOCKS.EMBEDDED_RESOURCE && _react.createElement(_ResourceNewBadge.ResourceNewBadge, null))));
|
|
104
102
|
}
|
|
105
103
|
function getEntityTypeFromNodeType(nodeType) {
|
|
106
104
|
const words = nodeType.toLowerCase().split('-');
|
|
@@ -21,9 +21,8 @@ _export(exports, {
|
|
|
21
21
|
});
|
|
22
22
|
const _richtexttypes = require("@contentful/rich-text-types");
|
|
23
23
|
const _ishotkey = _interop_require_default(require("is-hotkey"));
|
|
24
|
+
const _config = require("../../helpers/config");
|
|
24
25
|
const _editor = require("../../helpers/editor");
|
|
25
|
-
const _newEntitySelectorConfigFromRichTextField = _interop_require_default(require("../../helpers/newEntitySelectorConfigFromRichTextField"));
|
|
26
|
-
const _newResourceEntitySelectorConfigFromRichTextField = _interop_require_default(require("../../helpers/newResourceEntitySelectorConfigFromRichTextField"));
|
|
27
26
|
const _sdkNavigatorSlideIn = require("../../helpers/sdkNavigatorSlideIn");
|
|
28
27
|
const _internal = require("../../internal");
|
|
29
28
|
function _interop_require_default(obj) {
|
|
@@ -59,7 +58,7 @@ async function selectEntityAndInsert(nodeType, sdk, editor, logAction) {
|
|
|
59
58
|
nodeType
|
|
60
59
|
});
|
|
61
60
|
const { field , dialogs } = sdk;
|
|
62
|
-
const baseConfig = (0,
|
|
61
|
+
const baseConfig = (0, _config.newEntitySelectorConfigFromRichTextField)(field, nodeType);
|
|
63
62
|
const selectEntity = baseConfig.entityType === 'Asset' ? dialogs.selectSingleAsset : dialogs.selectSingleEntry;
|
|
64
63
|
const config = {
|
|
65
64
|
...baseConfig,
|
|
@@ -93,7 +92,7 @@ async function selectResourceEntityAndInsert(sdk, editor, logAction) {
|
|
|
93
92
|
nodeType: _richtexttypes.BLOCKS.EMBEDDED_RESOURCE
|
|
94
93
|
});
|
|
95
94
|
const { field , dialogs } = sdk;
|
|
96
|
-
const config = (0,
|
|
95
|
+
const config = (0, _config.newResourceEntitySelectorConfigFromRichTextField)(field, _richtexttypes.BLOCKS.EMBEDDED_RESOURCE);
|
|
97
96
|
const { selection } = editor;
|
|
98
97
|
const entity = await dialogs.selectSingleResourceEntry(config);
|
|
99
98
|
if (!entity) {
|
|
@@ -18,6 +18,7 @@ const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
|
|
|
18
18
|
const _editor = require("../../helpers/editor");
|
|
19
19
|
const _SdkProvider = require("../../SdkProvider");
|
|
20
20
|
const _EmbeddedInlineUtil = require("../shared/EmbeddedInlineUtil");
|
|
21
|
+
const _ResourceNewBadge = require("./ResourceNewBadge");
|
|
21
22
|
function _interop_require_default(obj) {
|
|
22
23
|
return obj && obj.__esModule ? obj : {
|
|
23
24
|
default: obj
|
|
@@ -75,20 +76,24 @@ const styles = {
|
|
|
75
76
|
}
|
|
76
77
|
})
|
|
77
78
|
};
|
|
78
|
-
function EmbeddedInlineToolbarIcon(
|
|
79
|
+
function EmbeddedInlineToolbarIcon({ onClose , nodeType , isDisabled }) {
|
|
79
80
|
const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
|
|
80
81
|
const sdk = (0, _SdkProvider.useSdkContext)();
|
|
81
82
|
async function handleClick(event) {
|
|
82
83
|
event.preventDefault();
|
|
83
84
|
if (!editor) return;
|
|
84
|
-
|
|
85
|
-
|
|
85
|
+
onClose();
|
|
86
|
+
if (nodeType === _richtexttypes.INLINES.EMBEDDED_RESOURCE) {
|
|
87
|
+
await (0, _EmbeddedInlineUtil.selectResourceEntityAndInsert)(editor, sdk, editor.tracking.onToolbarAction);
|
|
88
|
+
} else {
|
|
89
|
+
await (0, _EmbeddedInlineUtil.selectEntityAndInsert)(editor, sdk, editor.tracking.onToolbarAction);
|
|
90
|
+
}
|
|
86
91
|
(0, _editor.moveToTheNextChar)(editor);
|
|
87
92
|
}
|
|
88
93
|
return _react.createElement(_f36components.Menu.Item, {
|
|
89
|
-
disabled:
|
|
94
|
+
disabled: isDisabled,
|
|
90
95
|
className: "rich-text__entry-link-block-button",
|
|
91
|
-
testId: `toolbar-toggle-${
|
|
96
|
+
testId: `toolbar-toggle-${nodeType}`,
|
|
92
97
|
onClick: handleClick
|
|
93
98
|
}, _react.createElement(_f36components.Flex, {
|
|
94
99
|
alignItems: "center",
|
|
@@ -96,5 +101,5 @@ function EmbeddedInlineToolbarIcon(props) {
|
|
|
96
101
|
}, _react.createElement(_f36icons.EmbeddedEntryInlineIcon, {
|
|
97
102
|
variant: "secondary",
|
|
98
103
|
className: `rich-text__embedded-entry-list-icon ${styles.icon}`
|
|
99
|
-
}), _react.createElement("span", null, "Inline entry")));
|
|
104
|
+
}), _react.createElement("span", null, "Inline entry", nodeType == _richtexttypes.INLINES.EMBEDDED_RESOURCE && _react.createElement(_ResourceNewBadge.ResourceNewBadge, null))));
|
|
100
105
|
}
|
|
@@ -15,14 +15,14 @@ _export(exports, {
|
|
|
15
15
|
selectEntityAndInsert: function() {
|
|
16
16
|
return selectEntityAndInsert;
|
|
17
17
|
},
|
|
18
|
-
|
|
19
|
-
return
|
|
18
|
+
selectResourceEntityAndInsert: function() {
|
|
19
|
+
return selectResourceEntityAndInsert;
|
|
20
20
|
}
|
|
21
21
|
});
|
|
22
22
|
const _richtexttypes = require("@contentful/rich-text-types");
|
|
23
23
|
const _ishotkey = _interop_require_default(require("is-hotkey"));
|
|
24
|
+
const _config = require("../../helpers/config");
|
|
24
25
|
const _editor = require("../../helpers/editor");
|
|
25
|
-
const _newEntitySelectorConfigFromRichTextField = _interop_require_default(require("../../helpers/newEntitySelectorConfigFromRichTextField"));
|
|
26
26
|
const _sdkNavigatorSlideIn = require("../../helpers/sdkNavigatorSlideIn");
|
|
27
27
|
const _transforms = require("../../internal/transforms");
|
|
28
28
|
function _interop_require_default(obj) {
|
|
@@ -30,22 +30,56 @@ function _interop_require_default(obj) {
|
|
|
30
30
|
default: obj
|
|
31
31
|
};
|
|
32
32
|
}
|
|
33
|
-
function getWithEmbeddedEntryInlineEvents(sdk) {
|
|
33
|
+
function getWithEmbeddedEntryInlineEvents(nodeType, sdk) {
|
|
34
34
|
return function withEmbeddedEntryInlineEvents(editor, { options: { hotkey } }) {
|
|
35
35
|
return function handleEvent(event) {
|
|
36
36
|
if (!editor) return;
|
|
37
37
|
if (hotkey && (0, _ishotkey.default)(hotkey, event)) {
|
|
38
|
-
|
|
38
|
+
if (nodeType === _richtexttypes.INLINES.EMBEDDED_RESOURCE) {
|
|
39
|
+
selectResourceEntityAndInsert(editor, sdk, editor.tracking.onShortcutAction);
|
|
40
|
+
} else {
|
|
41
|
+
selectEntityAndInsert(editor, sdk, editor.tracking.onShortcutAction);
|
|
42
|
+
}
|
|
39
43
|
}
|
|
40
44
|
};
|
|
41
45
|
};
|
|
42
46
|
}
|
|
47
|
+
const getLink = (nodeType, entity)=>{
|
|
48
|
+
if (nodeType === _richtexttypes.INLINES.EMBEDDED_RESOURCE) {
|
|
49
|
+
return {
|
|
50
|
+
urn: entity.sys.urn,
|
|
51
|
+
type: 'ResourceLink',
|
|
52
|
+
linkType: 'Contentful:Entry'
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
return {
|
|
56
|
+
id: entity.sys.id,
|
|
57
|
+
type: 'Link',
|
|
58
|
+
linkType: entity.sys.type
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
const createInlineEntryNode = (nodeType, entity)=>{
|
|
62
|
+
return {
|
|
63
|
+
type: nodeType,
|
|
64
|
+
children: [
|
|
65
|
+
{
|
|
66
|
+
text: ''
|
|
67
|
+
}
|
|
68
|
+
],
|
|
69
|
+
data: {
|
|
70
|
+
target: {
|
|
71
|
+
sys: getLink(nodeType, entity)
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
};
|
|
43
76
|
async function selectEntityAndInsert(editor, sdk, logAction) {
|
|
77
|
+
const nodeType = _richtexttypes.INLINES.EMBEDDED_ENTRY;
|
|
44
78
|
logAction('openCreateEmbedDialog', {
|
|
45
|
-
nodeType
|
|
79
|
+
nodeType
|
|
46
80
|
});
|
|
47
81
|
const config = {
|
|
48
|
-
...(0,
|
|
82
|
+
...(0, _config.newEntitySelectorConfigFromRichTextField)(sdk.field, nodeType),
|
|
49
83
|
withCreate: true
|
|
50
84
|
};
|
|
51
85
|
const { selection } = editor;
|
|
@@ -53,13 +87,13 @@ async function selectEntityAndInsert(editor, sdk, logAction) {
|
|
|
53
87
|
const entry = await sdk.dialogs.selectSingleEntry(config);
|
|
54
88
|
if (!entry) {
|
|
55
89
|
logAction('cancelCreateEmbedDialog', {
|
|
56
|
-
nodeType
|
|
90
|
+
nodeType
|
|
57
91
|
});
|
|
58
92
|
} else {
|
|
59
93
|
(0, _transforms.select)(editor, selection);
|
|
60
|
-
(0, _transforms.insertNodes)(editor, createInlineEntryNode(entry
|
|
94
|
+
(0, _transforms.insertNodes)(editor, createInlineEntryNode(nodeType, entry));
|
|
61
95
|
logAction('insert', {
|
|
62
|
-
nodeType
|
|
96
|
+
nodeType
|
|
63
97
|
});
|
|
64
98
|
}
|
|
65
99
|
rteSlide.onActive(()=>{
|
|
@@ -67,22 +101,27 @@ async function selectEntityAndInsert(editor, sdk, logAction) {
|
|
|
67
101
|
(0, _editor.focus)(editor);
|
|
68
102
|
});
|
|
69
103
|
}
|
|
70
|
-
function
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
target: {
|
|
80
|
-
sys: {
|
|
81
|
-
id,
|
|
82
|
-
type: 'Link',
|
|
83
|
-
linkType: 'Entry'
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
}
|
|
104
|
+
async function selectResourceEntityAndInsert(editor, sdk, logAction) {
|
|
105
|
+
const nodeType = _richtexttypes.INLINES.EMBEDDED_RESOURCE;
|
|
106
|
+
logAction('openCreateEmbedDialog', {
|
|
107
|
+
nodeType
|
|
108
|
+
});
|
|
109
|
+
const { dialogs , field } = sdk;
|
|
110
|
+
const config = {
|
|
111
|
+
...(0, _config.newResourceEntitySelectorConfigFromRichTextField)(field, nodeType),
|
|
112
|
+
withCreate: true
|
|
87
113
|
};
|
|
114
|
+
const { selection } = editor;
|
|
115
|
+
const entry = await dialogs.selectSingleResourceEntry(config);
|
|
116
|
+
if (!entry) {
|
|
117
|
+
logAction('cancelCreateEmbedDialog', {
|
|
118
|
+
nodeType
|
|
119
|
+
});
|
|
120
|
+
} else {
|
|
121
|
+
(0, _transforms.select)(editor, selection);
|
|
122
|
+
(0, _transforms.insertNodes)(editor, createInlineEntryNode(nodeType, entry));
|
|
123
|
+
logAction('insert', {
|
|
124
|
+
nodeType
|
|
125
|
+
});
|
|
126
|
+
}
|
|
88
127
|
}
|