@contentful/field-editor-rich-text 3.12.6 → 3.12.7

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.
Files changed (32) hide show
  1. package/dist/cjs/Toolbar/components/EmbedEntityWidget.js +2 -2
  2. package/dist/cjs/plugins/EmbeddedEntityBlock/LinkedEntityBlock.js +1 -1
  3. package/dist/cjs/plugins/EmbeddedEntityInline/LinkedEntityInline.js +97 -0
  4. package/dist/cjs/plugins/EmbeddedEntityInline/index.js +8 -191
  5. package/dist/cjs/plugins/EmbeddedResourceBlock/LinkedResourceBlock.js +1 -1
  6. package/dist/cjs/plugins/shared/EmbeddedInlineToolbarIcon.js +100 -0
  7. package/dist/cjs/plugins/shared/EmbeddedInlineUtil.js +88 -0
  8. package/dist/cjs/plugins/shared/LinkedBlockWrapper.js +4 -5
  9. package/dist/cjs/plugins/shared/LinkedInlineWrapper.js +85 -0
  10. package/dist/cjs/plugins/shared/utils.js +12 -0
  11. package/dist/esm/Toolbar/components/EmbedEntityWidget.js +2 -2
  12. package/dist/esm/plugins/EmbeddedEntityBlock/LinkedEntityBlock.js +1 -1
  13. package/dist/esm/plugins/EmbeddedEntityInline/LinkedEntityInline.js +48 -0
  14. package/dist/esm/plugins/EmbeddedEntityInline/index.js +3 -134
  15. package/dist/esm/plugins/EmbeddedResourceBlock/LinkedResourceBlock.js +1 -1
  16. package/dist/esm/plugins/shared/EmbeddedInlineToolbarIcon.js +46 -0
  17. package/dist/esm/plugins/shared/EmbeddedInlineUtil.js +62 -0
  18. package/dist/esm/plugins/shared/LinkedBlockWrapper.js +4 -5
  19. package/dist/esm/plugins/shared/LinkedInlineWrapper.js +31 -0
  20. package/dist/esm/plugins/shared/utils.js +2 -0
  21. package/dist/types/plugins/EmbeddedEntityBlock/LinkedEntityBlock.d.ts +2 -7
  22. package/dist/types/plugins/EmbeddedEntityInline/LinkedEntityInline.d.ts +14 -0
  23. package/dist/types/plugins/EmbeddedEntityInline/index.d.ts +0 -7
  24. package/dist/types/plugins/shared/EmbeddedInlineToolbarIcon.d.ts +7 -0
  25. package/dist/types/plugins/shared/EmbeddedInlineUtil.d.ts +22 -0
  26. package/dist/types/plugins/shared/LinkedBlockWrapper.d.ts +4 -19
  27. package/dist/types/plugins/shared/LinkedInlineWrapper.d.ts +10 -0
  28. package/dist/types/plugins/shared/utils.d.ts +2 -0
  29. package/package.json +2 -2
  30. package/dist/cjs/plugins/EmbeddedEntityInline/Util.js +0 -30
  31. package/dist/esm/plugins/EmbeddedEntityInline/Util.js +0 -20
  32. package/dist/types/plugins/EmbeddedEntityInline/Util.d.ts +0 -16
@@ -13,8 +13,8 @@ const _richtexttypes = require("@contentful/rich-text-types");
13
13
  const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
14
14
  const _editor = require("../../helpers/editor");
15
15
  const _validations = require("../../helpers/validations");
16
- const _EmbeddedEntityInline = require("../../plugins/EmbeddedEntityInline");
17
16
  const _EmbeddedBlockToolbarIcon = require("../../plugins/shared/EmbeddedBlockToolbarIcon");
17
+ const _EmbeddedInlineToolbarIcon = require("../../plugins/shared/EmbeddedInlineToolbarIcon");
18
18
  const _SdkProvider = require("../../SdkProvider");
19
19
  const _EmbeddedEntityDropdownButton = require("./EmbeddedEntityDropdownButton");
20
20
  function _getRequireWildcardCache(nodeInterop) {
@@ -74,7 +74,7 @@ const EmbedEntityWidget = ({ isDisabled , canInsertBlocks })=>{
74
74
  isDisabled: !!isDisabled,
75
75
  nodeType: _richtexttypes.BLOCKS.EMBEDDED_RESOURCE,
76
76
  onClose: onCloseEntityDropdown
77
- }), inlineEntryEmbedEnabled && _react.default.createElement(_EmbeddedEntityInline.ToolbarEmbeddedEntityInlineButton, {
77
+ }), inlineEntryEmbedEnabled && _react.default.createElement(_EmbeddedInlineToolbarIcon.EmbeddedInlineToolbarIcon, {
78
78
  isDisabled: !!isDisabled || (0, _editor.isLinkActive)(editor),
79
79
  onClose: onCloseEntityDropdown
80
80
  }), blockAssetEmbedEnabled && _react.default.createElement(_EmbeddedBlockToolbarIcon.EmbeddedBlockToolbarIcon, {
@@ -106,6 +106,6 @@ function LinkedEntityBlock(props) {
106
106
  onEdit: handleEditClick,
107
107
  onEntityFetchComplete: onEntityFetchComplete
108
108
  })),
109
- element: element
109
+ link: element.data.target
110
110
  }, children);
111
111
  }
@@ -0,0 +1,97 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "LinkedEntityInline", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return LinkedEntityInline;
9
+ }
10
+ });
11
+ const _react = _interop_require_wildcard(require("react"));
12
+ const _slatereact = require("slate-react");
13
+ const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
14
+ const _editor = require("../../helpers/editor");
15
+ const _queries = require("../../internal/queries");
16
+ const _transforms = require("../../internal/transforms");
17
+ const _SdkProvider = require("../../SdkProvider");
18
+ const _linkstracking = require("../links-tracking");
19
+ const _LinkedInlineWrapper = require("../shared/LinkedInlineWrapper");
20
+ const _FetchingWrappedInlineEntryCard = require("./FetchingWrappedInlineEntryCard");
21
+ function _getRequireWildcardCache(nodeInterop) {
22
+ if (typeof WeakMap !== "function") return null;
23
+ var cacheBabelInterop = new WeakMap();
24
+ var cacheNodeInterop = new WeakMap();
25
+ return (_getRequireWildcardCache = function(nodeInterop) {
26
+ return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
27
+ })(nodeInterop);
28
+ }
29
+ function _interop_require_wildcard(obj, nodeInterop) {
30
+ if (!nodeInterop && obj && obj.__esModule) {
31
+ return obj;
32
+ }
33
+ if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
34
+ return {
35
+ default: obj
36
+ };
37
+ }
38
+ var cache = _getRequireWildcardCache(nodeInterop);
39
+ if (cache && cache.has(obj)) {
40
+ return cache.get(obj);
41
+ }
42
+ var newObj = {};
43
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
44
+ for(var key in obj){
45
+ if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
46
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
47
+ if (desc && (desc.get || desc.set)) {
48
+ Object.defineProperty(newObj, key, desc);
49
+ } else {
50
+ newObj[key] = obj[key];
51
+ }
52
+ }
53
+ }
54
+ newObj.default = obj;
55
+ if (cache) {
56
+ cache.set(obj, newObj);
57
+ }
58
+ return newObj;
59
+ }
60
+ function LinkedEntityInline(props) {
61
+ const { attributes , children , element } = props;
62
+ const { onEntityFetchComplete } = (0, _linkstracking.useLinkTracking)();
63
+ const isSelected = (0, _slatereact.useSelected)();
64
+ const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
65
+ const sdk = (0, _SdkProvider.useSdkContext)();
66
+ const isDisabled = (0, _slatereact.useReadOnly)();
67
+ const { id: entryId } = element.data.target.sys;
68
+ function handleEditClick() {
69
+ return sdk.navigator.openEntry(entryId, {
70
+ slideIn: {
71
+ waitForClose: true
72
+ }
73
+ }).then(()=>{
74
+ editor && (0, _editor.focus)(editor);
75
+ });
76
+ }
77
+ function handleRemoveClick() {
78
+ if (!editor) return;
79
+ const pathToElement = (0, _queries.findNodePath)(editor, element);
80
+ (0, _transforms.removeNodes)(editor, {
81
+ at: pathToElement
82
+ });
83
+ }
84
+ return _react.createElement(_LinkedInlineWrapper.LinkedInlineWrapper, {
85
+ attributes: attributes,
86
+ card: _react.createElement(_FetchingWrappedInlineEntryCard.FetchingWrappedInlineEntryCard, {
87
+ sdk: sdk,
88
+ entryId: entryId,
89
+ isSelected: isSelected,
90
+ isDisabled: isDisabled,
91
+ onRemove: handleRemoveClick,
92
+ onEdit: handleEditClick,
93
+ onEntityFetchComplete: onEntityFetchComplete
94
+ }),
95
+ link: element.data.target
96
+ }, children);
97
+ }
@@ -2,188 +2,15 @@
2
2
  Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
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
- ToolbarEmbeddedEntityInlineButton: function() {
13
- return ToolbarEmbeddedEntityInlineButton;
14
- },
15
- createEmbeddedEntityInlinePlugin: function() {
5
+ Object.defineProperty(exports, "createEmbeddedEntityInlinePlugin", {
6
+ enumerable: true,
7
+ get: function() {
16
8
  return createEmbeddedEntityInlinePlugin;
17
9
  }
18
10
  });
19
- const _react = _interop_require_wildcard(require("react"));
20
- const _f36components = require("@contentful/f36-components");
21
- const _f36icons = require("@contentful/f36-icons");
22
- const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
23
11
  const _richtexttypes = require("@contentful/rich-text-types");
24
- const _emotion = require("emotion");
25
- const _ishotkey = _interop_require_default(require("is-hotkey"));
26
- const _slatereact = require("slate-react");
27
- const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
28
- const _editor = require("../../helpers/editor");
29
- const _environment = require("../../helpers/environment");
30
- const _newEntitySelectorConfigFromRichTextField = _interop_require_default(require("../../helpers/newEntitySelectorConfigFromRichTextField"));
31
- const _sdkNavigatorSlideIn = require("../../helpers/sdkNavigatorSlideIn");
32
- const _queries = require("../../internal/queries");
33
- const _transforms = require("../../internal/transforms");
34
- const _SdkProvider = require("../../SdkProvider");
35
- const _linkstracking = require("../links-tracking");
36
- const _FetchingWrappedInlineEntryCard = require("./FetchingWrappedInlineEntryCard");
37
- const _Util = require("./Util");
38
- function _interop_require_default(obj) {
39
- return obj && obj.__esModule ? obj : {
40
- default: obj
41
- };
42
- }
43
- function _getRequireWildcardCache(nodeInterop) {
44
- if (typeof WeakMap !== "function") return null;
45
- var cacheBabelInterop = new WeakMap();
46
- var cacheNodeInterop = new WeakMap();
47
- return (_getRequireWildcardCache = function(nodeInterop) {
48
- return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
49
- })(nodeInterop);
50
- }
51
- function _interop_require_wildcard(obj, nodeInterop) {
52
- if (!nodeInterop && obj && obj.__esModule) {
53
- return obj;
54
- }
55
- if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
56
- return {
57
- default: obj
58
- };
59
- }
60
- var cache = _getRequireWildcardCache(nodeInterop);
61
- if (cache && cache.has(obj)) {
62
- return cache.get(obj);
63
- }
64
- var newObj = {};
65
- var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
66
- for(var key in obj){
67
- if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
68
- var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
69
- if (desc && (desc.get || desc.set)) {
70
- Object.defineProperty(newObj, key, desc);
71
- } else {
72
- newObj[key] = obj[key];
73
- }
74
- }
75
- }
76
- newObj.default = obj;
77
- if (cache) {
78
- cache.set(obj, newObj);
79
- }
80
- return newObj;
81
- }
82
- const styles = {
83
- icon: (0, _emotion.css)({
84
- marginRight: '10px'
85
- }),
86
- root: (0, _emotion.css)({
87
- display: 'inline-block',
88
- margin: `0 ${_f36tokens.default.spacing2Xs}`,
89
- fontSize: 'inherit',
90
- span: {
91
- userSelect: 'none'
92
- }
93
- })
94
- };
95
- function EmbeddedEntityInline(props) {
96
- const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
97
- const sdk = (0, _SdkProvider.useSdkContext)();
98
- const isSelected = (0, _slatereact.useSelected)();
99
- const { id: entryId } = props.element.data.target.sys;
100
- const isDisabled = (0, _slatereact.useReadOnly)();
101
- const { onEntityFetchComplete } = (0, _linkstracking.useLinkTracking)();
102
- function handleEditClick() {
103
- return sdk.navigator.openEntry(entryId, {
104
- slideIn: {
105
- waitForClose: true
106
- }
107
- }).then(()=>{
108
- editor && (0, _editor.focus)(editor);
109
- });
110
- }
111
- function handleRemoveClick() {
112
- if (!editor) return;
113
- const pathToElement = (0, _queries.findNodePath)(editor, props.element);
114
- (0, _transforms.removeNodes)(editor, {
115
- at: pathToElement
116
- });
117
- }
118
- return _react.createElement("span", {
119
- ...props.attributes,
120
- className: styles.root,
121
- "data-embedded-entity-inline-id": entryId,
122
- contentEditable: _environment.IS_CHROME ? undefined : false,
123
- draggable: _environment.IS_CHROME ? true : undefined
124
- }, _react.createElement("span", {
125
- contentEditable: _environment.IS_CHROME ? false : undefined,
126
- draggable: _environment.IS_CHROME ? true : undefined
127
- }, _react.createElement(_FetchingWrappedInlineEntryCard.FetchingWrappedInlineEntryCard, {
128
- sdk: sdk,
129
- entryId: entryId,
130
- isSelected: isSelected,
131
- isDisabled: isDisabled,
132
- onRemove: handleRemoveClick,
133
- onEdit: handleEditClick,
134
- onEntityFetchComplete: onEntityFetchComplete
135
- })), props.children);
136
- }
137
- async function selectEntityAndInsert(editor, sdk, logAction) {
138
- logAction('openCreateEmbedDialog', {
139
- nodeType: _richtexttypes.INLINES.EMBEDDED_ENTRY
140
- });
141
- const config = {
142
- ...(0, _newEntitySelectorConfigFromRichTextField.default)(sdk.field, _richtexttypes.INLINES.EMBEDDED_ENTRY),
143
- withCreate: true
144
- };
145
- const { selection } = editor;
146
- const rteSlide = (0, _sdkNavigatorSlideIn.watchCurrentSlide)(sdk.navigator);
147
- const entry = await sdk.dialogs.selectSingleEntry(config);
148
- if (!entry) {
149
- logAction('cancelCreateEmbedDialog', {
150
- nodeType: _richtexttypes.INLINES.EMBEDDED_ENTRY
151
- });
152
- } else {
153
- (0, _transforms.select)(editor, selection);
154
- (0, _transforms.insertNodes)(editor, (0, _Util.createInlineEntryNode)(entry.sys.id));
155
- logAction('insert', {
156
- nodeType: _richtexttypes.INLINES.EMBEDDED_ENTRY
157
- });
158
- }
159
- rteSlide.onActive(()=>{
160
- rteSlide.unwatch();
161
- (0, _editor.focus)(editor);
162
- });
163
- }
164
- function ToolbarEmbeddedEntityInlineButton(props) {
165
- const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
166
- const sdk = (0, _SdkProvider.useSdkContext)();
167
- async function handleClick(event) {
168
- event.preventDefault();
169
- if (!editor) return;
170
- props.onClose();
171
- await selectEntityAndInsert(editor, sdk, editor.tracking.onToolbarAction);
172
- (0, _editor.moveToTheNextChar)(editor);
173
- }
174
- return _react.createElement(_f36components.Menu.Item, {
175
- disabled: props.isDisabled,
176
- className: "rich-text__entry-link-block-button",
177
- testId: `toolbar-toggle-${_richtexttypes.INLINES.EMBEDDED_ENTRY}`,
178
- onClick: handleClick
179
- }, _react.createElement(_f36components.Flex, {
180
- alignItems: "center",
181
- flexDirection: "row"
182
- }, _react.createElement(_f36icons.EmbeddedEntryInlineIcon, {
183
- variant: "secondary",
184
- className: `rich-text__embedded-entry-list-icon ${styles.icon}`
185
- }), _react.createElement("span", null, "Inline entry")));
186
- }
12
+ const _EmbeddedInlineUtil = require("../shared/EmbeddedInlineUtil");
13
+ const _LinkedEntityInline = require("./LinkedEntityInline");
187
14
  function createEmbeddedEntityInlinePlugin(sdk) {
188
15
  const htmlAttributeName = 'data-embedded-entity-inline-id';
189
16
  return {
@@ -192,12 +19,12 @@ function createEmbeddedEntityInlinePlugin(sdk) {
192
19
  isElement: true,
193
20
  isInline: true,
194
21
  isVoid: true,
195
- component: EmbeddedEntityInline,
22
+ component: _LinkedEntityInline.LinkedEntityInline,
196
23
  options: {
197
24
  hotkey: 'mod+shift+2'
198
25
  },
199
26
  handlers: {
200
- onKeyDown: getWithEmbeddedEntryInlineEvents(sdk)
27
+ onKeyDown: (0, _EmbeddedInlineUtil.getWithEmbeddedEntryInlineEvents)(sdk)
201
28
  },
202
29
  deserializeHtml: {
203
30
  rules: [
@@ -206,17 +33,7 @@ function createEmbeddedEntityInlinePlugin(sdk) {
206
33
  }
207
34
  ],
208
35
  withoutChildren: true,
209
- getNode: (el)=>(0, _Util.createInlineEntryNode)(el.getAttribute(htmlAttributeName))
36
+ getNode: (el)=>(0, _EmbeddedInlineUtil.createInlineEntryNode)(el.getAttribute(htmlAttributeName))
210
37
  }
211
38
  };
212
39
  }
213
- function getWithEmbeddedEntryInlineEvents(sdk) {
214
- return function withEmbeddedEntryInlineEvents(editor, { options: { hotkey } }) {
215
- return function handleEvent(event) {
216
- if (!editor) return;
217
- if (hotkey && (0, _ishotkey.default)(hotkey, event)) {
218
- selectEntityAndInsert(editor, sdk, editor.tracking.onShortcutAction);
219
- }
220
- };
221
- };
222
- }
@@ -41,7 +41,7 @@ function LinkedResourceBlock(props) {
41
41
  ]);
42
42
  return _react.default.createElement(_LinkedBlockWrapper.LinkedBlockWrapper, {
43
43
  attributes: attributes,
44
- element: element,
44
+ link: element.data.target,
45
45
  card: _react.default.createElement(_FetchingWrappedResourceCard.FetchingWrappedResourceCard, {
46
46
  sdk: sdk,
47
47
  link: link,
@@ -0,0 +1,100 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "EmbeddedInlineToolbarIcon", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return EmbeddedInlineToolbarIcon;
9
+ }
10
+ });
11
+ const _react = _interop_require_wildcard(require("react"));
12
+ const _f36components = require("@contentful/f36-components");
13
+ const _f36icons = require("@contentful/f36-icons");
14
+ const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
15
+ const _richtexttypes = require("@contentful/rich-text-types");
16
+ const _emotion = require("emotion");
17
+ const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
18
+ const _editor = require("../../helpers/editor");
19
+ const _SdkProvider = require("../../SdkProvider");
20
+ const _EmbeddedInlineUtil = require("../shared/EmbeddedInlineUtil");
21
+ function _interop_require_default(obj) {
22
+ return obj && obj.__esModule ? obj : {
23
+ default: obj
24
+ };
25
+ }
26
+ function _getRequireWildcardCache(nodeInterop) {
27
+ if (typeof WeakMap !== "function") return null;
28
+ var cacheBabelInterop = new WeakMap();
29
+ var cacheNodeInterop = new WeakMap();
30
+ return (_getRequireWildcardCache = function(nodeInterop) {
31
+ return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
32
+ })(nodeInterop);
33
+ }
34
+ function _interop_require_wildcard(obj, nodeInterop) {
35
+ if (!nodeInterop && obj && obj.__esModule) {
36
+ return obj;
37
+ }
38
+ if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
39
+ return {
40
+ default: obj
41
+ };
42
+ }
43
+ var cache = _getRequireWildcardCache(nodeInterop);
44
+ if (cache && cache.has(obj)) {
45
+ return cache.get(obj);
46
+ }
47
+ var newObj = {};
48
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
49
+ for(var key in obj){
50
+ if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
51
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
52
+ if (desc && (desc.get || desc.set)) {
53
+ Object.defineProperty(newObj, key, desc);
54
+ } else {
55
+ newObj[key] = obj[key];
56
+ }
57
+ }
58
+ }
59
+ newObj.default = obj;
60
+ if (cache) {
61
+ cache.set(obj, newObj);
62
+ }
63
+ return newObj;
64
+ }
65
+ const styles = {
66
+ icon: (0, _emotion.css)({
67
+ marginRight: '10px'
68
+ }),
69
+ root: (0, _emotion.css)({
70
+ display: 'inline-block',
71
+ margin: `0 ${_f36tokens.default.spacing2Xs}`,
72
+ fontSize: 'inherit',
73
+ span: {
74
+ userSelect: 'none'
75
+ }
76
+ })
77
+ };
78
+ function EmbeddedInlineToolbarIcon(props) {
79
+ const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
80
+ const sdk = (0, _SdkProvider.useSdkContext)();
81
+ async function handleClick(event) {
82
+ event.preventDefault();
83
+ if (!editor) return;
84
+ props.onClose();
85
+ await (0, _EmbeddedInlineUtil.selectEntityAndInsert)(editor, sdk, editor.tracking.onToolbarAction);
86
+ (0, _editor.moveToTheNextChar)(editor);
87
+ }
88
+ return _react.createElement(_f36components.Menu.Item, {
89
+ disabled: props.isDisabled,
90
+ className: "rich-text__entry-link-block-button",
91
+ testId: `toolbar-toggle-${_richtexttypes.INLINES.EMBEDDED_ENTRY}`,
92
+ onClick: handleClick
93
+ }, _react.createElement(_f36components.Flex, {
94
+ alignItems: "center",
95
+ flexDirection: "row"
96
+ }, _react.createElement(_f36icons.EmbeddedEntryInlineIcon, {
97
+ variant: "secondary",
98
+ className: `rich-text__embedded-entry-list-icon ${styles.icon}`
99
+ }), _react.createElement("span", null, "Inline entry")));
100
+ }
@@ -0,0 +1,88 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
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
+ getWithEmbeddedEntryInlineEvents: function() {
13
+ return getWithEmbeddedEntryInlineEvents;
14
+ },
15
+ selectEntityAndInsert: function() {
16
+ return selectEntityAndInsert;
17
+ },
18
+ createInlineEntryNode: function() {
19
+ return createInlineEntryNode;
20
+ }
21
+ });
22
+ const _richtexttypes = require("@contentful/rich-text-types");
23
+ const _ishotkey = _interop_require_default(require("is-hotkey"));
24
+ const _editor = require("../../helpers/editor");
25
+ const _newEntitySelectorConfigFromRichTextField = _interop_require_default(require("../../helpers/newEntitySelectorConfigFromRichTextField"));
26
+ const _sdkNavigatorSlideIn = require("../../helpers/sdkNavigatorSlideIn");
27
+ const _transforms = require("../../internal/transforms");
28
+ function _interop_require_default(obj) {
29
+ return obj && obj.__esModule ? obj : {
30
+ default: obj
31
+ };
32
+ }
33
+ function getWithEmbeddedEntryInlineEvents(sdk) {
34
+ return function withEmbeddedEntryInlineEvents(editor, { options: { hotkey } }) {
35
+ return function handleEvent(event) {
36
+ if (!editor) return;
37
+ if (hotkey && (0, _ishotkey.default)(hotkey, event)) {
38
+ selectEntityAndInsert(editor, sdk, editor.tracking.onShortcutAction);
39
+ }
40
+ };
41
+ };
42
+ }
43
+ async function selectEntityAndInsert(editor, sdk, logAction) {
44
+ logAction('openCreateEmbedDialog', {
45
+ nodeType: _richtexttypes.INLINES.EMBEDDED_ENTRY
46
+ });
47
+ const config = {
48
+ ...(0, _newEntitySelectorConfigFromRichTextField.default)(sdk.field, _richtexttypes.INLINES.EMBEDDED_ENTRY),
49
+ withCreate: true
50
+ };
51
+ const { selection } = editor;
52
+ const rteSlide = (0, _sdkNavigatorSlideIn.watchCurrentSlide)(sdk.navigator);
53
+ const entry = await sdk.dialogs.selectSingleEntry(config);
54
+ if (!entry) {
55
+ logAction('cancelCreateEmbedDialog', {
56
+ nodeType: _richtexttypes.INLINES.EMBEDDED_ENTRY
57
+ });
58
+ } else {
59
+ (0, _transforms.select)(editor, selection);
60
+ (0, _transforms.insertNodes)(editor, createInlineEntryNode(entry.sys.id));
61
+ logAction('insert', {
62
+ nodeType: _richtexttypes.INLINES.EMBEDDED_ENTRY
63
+ });
64
+ }
65
+ rteSlide.onActive(()=>{
66
+ rteSlide.unwatch();
67
+ (0, _editor.focus)(editor);
68
+ });
69
+ }
70
+ function createInlineEntryNode(id) {
71
+ return {
72
+ type: _richtexttypes.INLINES.EMBEDDED_ENTRY,
73
+ children: [
74
+ {
75
+ text: ''
76
+ }
77
+ ],
78
+ data: {
79
+ target: {
80
+ sys: {
81
+ id,
82
+ type: 'Link',
83
+ linkType: 'Entry'
84
+ }
85
+ }
86
+ }
87
+ };
88
+ }
@@ -11,6 +11,7 @@ Object.defineProperty(exports, "LinkedBlockWrapper", {
11
11
  const _react = _interop_require_default(require("react"));
12
12
  const _emotion = require("emotion");
13
13
  const _environment = require("../../helpers/environment");
14
+ const _utils = require("./utils");
14
15
  function _interop_require_default(obj) {
15
16
  return obj && obj.__esModule ? obj : {
16
17
  default: obj
@@ -27,14 +28,12 @@ const styles = {
27
28
  width: '100%'
28
29
  })
29
30
  };
30
- const isResourceLink = (link)=>!!link.urn;
31
- function LinkedBlockWrapper({ attributes , card , children , element }) {
32
- const link = element.data.target.sys;
31
+ function LinkedBlockWrapper({ attributes , card , children , link }) {
33
32
  return _react.default.createElement("div", {
34
33
  ...attributes,
35
34
  className: styles.root,
36
- "data-entity-type": link.linkType,
37
- "data-entity-id": isResourceLink(link) ? link.urn : link.id,
35
+ "data-entity-type": link.sys.linkType,
36
+ "data-entity-id": (0, _utils.getLinkEntityId)(link),
38
37
  contentEditable: _environment.IS_CHROME ? undefined : false,
39
38
  draggable: _environment.IS_CHROME ? true : undefined
40
39
  }, _react.default.createElement("div", {
@@ -0,0 +1,85 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "LinkedInlineWrapper", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return LinkedInlineWrapper;
9
+ }
10
+ });
11
+ const _react = _interop_require_wildcard(require("react"));
12
+ const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
13
+ const _emotion = require("emotion");
14
+ const _environment = require("../../helpers/environment");
15
+ const _utils = require("./utils");
16
+ function _interop_require_default(obj) {
17
+ return obj && obj.__esModule ? obj : {
18
+ default: obj
19
+ };
20
+ }
21
+ function _getRequireWildcardCache(nodeInterop) {
22
+ if (typeof WeakMap !== "function") return null;
23
+ var cacheBabelInterop = new WeakMap();
24
+ var cacheNodeInterop = new WeakMap();
25
+ return (_getRequireWildcardCache = function(nodeInterop) {
26
+ return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
27
+ })(nodeInterop);
28
+ }
29
+ function _interop_require_wildcard(obj, nodeInterop) {
30
+ if (!nodeInterop && obj && obj.__esModule) {
31
+ return obj;
32
+ }
33
+ if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
34
+ return {
35
+ default: obj
36
+ };
37
+ }
38
+ var cache = _getRequireWildcardCache(nodeInterop);
39
+ if (cache && cache.has(obj)) {
40
+ return cache.get(obj);
41
+ }
42
+ var newObj = {};
43
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
44
+ for(var key in obj){
45
+ if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
46
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
47
+ if (desc && (desc.get || desc.set)) {
48
+ Object.defineProperty(newObj, key, desc);
49
+ } else {
50
+ newObj[key] = obj[key];
51
+ }
52
+ }
53
+ }
54
+ newObj.default = obj;
55
+ if (cache) {
56
+ cache.set(obj, newObj);
57
+ }
58
+ return newObj;
59
+ }
60
+ const styles = {
61
+ icon: (0, _emotion.css)({
62
+ marginRight: '10px'
63
+ }),
64
+ root: (0, _emotion.css)({
65
+ display: 'inline-block',
66
+ margin: `0 ${_f36tokens.default.spacing2Xs}`,
67
+ fontSize: 'inherit',
68
+ span: {
69
+ userSelect: 'none'
70
+ }
71
+ })
72
+ };
73
+ function LinkedInlineWrapper({ attributes , card , children , link }) {
74
+ return _react.createElement("span", {
75
+ ...attributes,
76
+ className: styles.root,
77
+ "data-entity-type": link.sys.linkType,
78
+ "data-entity-id": (0, _utils.getLinkEntityId)(link),
79
+ contentEditable: _environment.IS_CHROME ? undefined : false,
80
+ draggable: _environment.IS_CHROME ? true : undefined
81
+ }, _react.createElement("span", {
82
+ contentEditable: _environment.IS_CHROME ? false : undefined,
83
+ draggable: _environment.IS_CHROME ? true : undefined
84
+ }, card), children);
85
+ }
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "getLinkEntityId", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return getLinkEntityId;
9
+ }
10
+ });
11
+ const isResourceLink = (link)=>!!link.sys.urn;
12
+ const getLinkEntityId = (link)=>isResourceLink(link) ? link.sys.urn : link.sys.id;
@@ -3,8 +3,8 @@ import { BLOCKS, INLINES } from '@contentful/rich-text-types';
3
3
  import { useContentfulEditor } from '../../ContentfulEditorProvider';
4
4
  import { isLinkActive } from '../../helpers/editor';
5
5
  import { isNodeTypeEnabled } from '../../helpers/validations';
6
- import { ToolbarEmbeddedEntityInlineButton } from '../../plugins/EmbeddedEntityInline';
7
6
  import { EmbeddedBlockToolbarIcon } from '../../plugins/shared/EmbeddedBlockToolbarIcon';
7
+ import { EmbeddedInlineToolbarIcon } from '../../plugins/shared/EmbeddedInlineToolbarIcon';
8
8
  import { useSdkContext } from '../../SdkProvider';
9
9
  import { EmbeddedEntityDropdownButton } from './EmbeddedEntityDropdownButton';
10
10
  export const EmbedEntityWidget = ({ isDisabled , canInsertBlocks })=>{
@@ -25,7 +25,7 @@ export const EmbedEntityWidget = ({ isDisabled , canInsertBlocks })=>{
25
25
  isDisabled: !!isDisabled,
26
26
  nodeType: BLOCKS.EMBEDDED_RESOURCE,
27
27
  onClose: onCloseEntityDropdown
28
- }), inlineEntryEmbedEnabled && React.createElement(ToolbarEmbeddedEntityInlineButton, {
28
+ }), inlineEntryEmbedEnabled && React.createElement(EmbeddedInlineToolbarIcon, {
29
29
  isDisabled: !!isDisabled || isLinkActive(editor),
30
30
  onClose: onCloseEntityDropdown
31
31
  }), blockAssetEmbedEnabled && React.createElement(EmbeddedBlockToolbarIcon, {
@@ -57,6 +57,6 @@ export function LinkedEntityBlock(props) {
57
57
  onEdit: handleEditClick,
58
58
  onEntityFetchComplete: onEntityFetchComplete
59
59
  })),
60
- element: element
60
+ link: element.data.target
61
61
  }, children);
62
62
  }
@@ -0,0 +1,48 @@
1
+ import * as React from 'react';
2
+ import { useReadOnly, useSelected } from 'slate-react';
3
+ import { useContentfulEditor } from '../../ContentfulEditorProvider';
4
+ import { focus } from '../../helpers/editor';
5
+ import { findNodePath } from '../../internal/queries';
6
+ import { removeNodes } from '../../internal/transforms';
7
+ import { useSdkContext } from '../../SdkProvider';
8
+ import { useLinkTracking } from '../links-tracking';
9
+ import { LinkedInlineWrapper } from '../shared/LinkedInlineWrapper';
10
+ import { FetchingWrappedInlineEntryCard } from './FetchingWrappedInlineEntryCard';
11
+ export function LinkedEntityInline(props) {
12
+ const { attributes , children , element } = props;
13
+ const { onEntityFetchComplete } = useLinkTracking();
14
+ const isSelected = useSelected();
15
+ const editor = useContentfulEditor();
16
+ const sdk = useSdkContext();
17
+ const isDisabled = useReadOnly();
18
+ const { id: entryId } = element.data.target.sys;
19
+ function handleEditClick() {
20
+ return sdk.navigator.openEntry(entryId, {
21
+ slideIn: {
22
+ waitForClose: true
23
+ }
24
+ }).then(()=>{
25
+ editor && focus(editor);
26
+ });
27
+ }
28
+ function handleRemoveClick() {
29
+ if (!editor) return;
30
+ const pathToElement = findNodePath(editor, element);
31
+ removeNodes(editor, {
32
+ at: pathToElement
33
+ });
34
+ }
35
+ return React.createElement(LinkedInlineWrapper, {
36
+ attributes: attributes,
37
+ card: React.createElement(FetchingWrappedInlineEntryCard, {
38
+ sdk: sdk,
39
+ entryId: entryId,
40
+ isSelected: isSelected,
41
+ isDisabled: isDisabled,
42
+ onRemove: handleRemoveClick,
43
+ onEdit: handleEditClick,
44
+ onEntityFetchComplete: onEntityFetchComplete
45
+ }),
46
+ link: element.data.target
47
+ }, children);
48
+ }
@@ -1,127 +1,6 @@
1
- import * as React from 'react';
2
- import { Menu, Flex } from '@contentful/f36-components';
3
- import { EmbeddedEntryInlineIcon } from '@contentful/f36-icons';
4
- import tokens from '@contentful/f36-tokens';
5
1
  import { INLINES } from '@contentful/rich-text-types';
6
- import { css } from 'emotion';
7
- import isHotkey from 'is-hotkey';
8
- import { useSelected, useReadOnly } from 'slate-react';
9
- import { useContentfulEditor } from '../../ContentfulEditorProvider';
10
- import { focus, moveToTheNextChar } from '../../helpers/editor';
11
- import { IS_CHROME } from '../../helpers/environment';
12
- import newEntitySelectorConfigFromRichTextField from '../../helpers/newEntitySelectorConfigFromRichTextField';
13
- import { watchCurrentSlide } from '../../helpers/sdkNavigatorSlideIn';
14
- import { findNodePath } from '../../internal/queries';
15
- import { insertNodes, removeNodes, select } from '../../internal/transforms';
16
- import { useSdkContext } from '../../SdkProvider';
17
- import { useLinkTracking } from '../links-tracking';
18
- import { FetchingWrappedInlineEntryCard } from './FetchingWrappedInlineEntryCard';
19
- import { createInlineEntryNode } from './Util';
20
- const styles = {
21
- icon: css({
22
- marginRight: '10px'
23
- }),
24
- root: css({
25
- display: 'inline-block',
26
- margin: `0 ${tokens.spacing2Xs}`,
27
- fontSize: 'inherit',
28
- span: {
29
- userSelect: 'none'
30
- }
31
- })
32
- };
33
- function EmbeddedEntityInline(props) {
34
- const editor = useContentfulEditor();
35
- const sdk = useSdkContext();
36
- const isSelected = useSelected();
37
- const { id: entryId } = props.element.data.target.sys;
38
- const isDisabled = useReadOnly();
39
- const { onEntityFetchComplete } = useLinkTracking();
40
- function handleEditClick() {
41
- return sdk.navigator.openEntry(entryId, {
42
- slideIn: {
43
- waitForClose: true
44
- }
45
- }).then(()=>{
46
- editor && focus(editor);
47
- });
48
- }
49
- function handleRemoveClick() {
50
- if (!editor) return;
51
- const pathToElement = findNodePath(editor, props.element);
52
- removeNodes(editor, {
53
- at: pathToElement
54
- });
55
- }
56
- return React.createElement("span", {
57
- ...props.attributes,
58
- className: styles.root,
59
- "data-embedded-entity-inline-id": entryId,
60
- contentEditable: IS_CHROME ? undefined : false,
61
- draggable: IS_CHROME ? true : undefined
62
- }, React.createElement("span", {
63
- contentEditable: IS_CHROME ? false : undefined,
64
- draggable: IS_CHROME ? true : undefined
65
- }, React.createElement(FetchingWrappedInlineEntryCard, {
66
- sdk: sdk,
67
- entryId: entryId,
68
- isSelected: isSelected,
69
- isDisabled: isDisabled,
70
- onRemove: handleRemoveClick,
71
- onEdit: handleEditClick,
72
- onEntityFetchComplete: onEntityFetchComplete
73
- })), props.children);
74
- }
75
- async function selectEntityAndInsert(editor, sdk, logAction) {
76
- logAction('openCreateEmbedDialog', {
77
- nodeType: INLINES.EMBEDDED_ENTRY
78
- });
79
- const config = {
80
- ...newEntitySelectorConfigFromRichTextField(sdk.field, INLINES.EMBEDDED_ENTRY),
81
- withCreate: true
82
- };
83
- const { selection } = editor;
84
- const rteSlide = watchCurrentSlide(sdk.navigator);
85
- const entry = await sdk.dialogs.selectSingleEntry(config);
86
- if (!entry) {
87
- logAction('cancelCreateEmbedDialog', {
88
- nodeType: INLINES.EMBEDDED_ENTRY
89
- });
90
- } else {
91
- select(editor, selection);
92
- insertNodes(editor, createInlineEntryNode(entry.sys.id));
93
- logAction('insert', {
94
- nodeType: INLINES.EMBEDDED_ENTRY
95
- });
96
- }
97
- rteSlide.onActive(()=>{
98
- rteSlide.unwatch();
99
- focus(editor);
100
- });
101
- }
102
- export function ToolbarEmbeddedEntityInlineButton(props) {
103
- const editor = useContentfulEditor();
104
- const sdk = useSdkContext();
105
- async function handleClick(event) {
106
- event.preventDefault();
107
- if (!editor) return;
108
- props.onClose();
109
- await selectEntityAndInsert(editor, sdk, editor.tracking.onToolbarAction);
110
- moveToTheNextChar(editor);
111
- }
112
- return React.createElement(Menu.Item, {
113
- disabled: props.isDisabled,
114
- className: "rich-text__entry-link-block-button",
115
- testId: `toolbar-toggle-${INLINES.EMBEDDED_ENTRY}`,
116
- onClick: handleClick
117
- }, React.createElement(Flex, {
118
- alignItems: "center",
119
- flexDirection: "row"
120
- }, React.createElement(EmbeddedEntryInlineIcon, {
121
- variant: "secondary",
122
- className: `rich-text__embedded-entry-list-icon ${styles.icon}`
123
- }), React.createElement("span", null, "Inline entry")));
124
- }
2
+ import { createInlineEntryNode, getWithEmbeddedEntryInlineEvents } from '../shared/EmbeddedInlineUtil';
3
+ import { LinkedEntityInline } from './LinkedEntityInline';
125
4
  export function createEmbeddedEntityInlinePlugin(sdk) {
126
5
  const htmlAttributeName = 'data-embedded-entity-inline-id';
127
6
  return {
@@ -130,7 +9,7 @@ export function createEmbeddedEntityInlinePlugin(sdk) {
130
9
  isElement: true,
131
10
  isInline: true,
132
11
  isVoid: true,
133
- component: EmbeddedEntityInline,
12
+ component: LinkedEntityInline,
134
13
  options: {
135
14
  hotkey: 'mod+shift+2'
136
15
  },
@@ -148,13 +27,3 @@ export function createEmbeddedEntityInlinePlugin(sdk) {
148
27
  }
149
28
  };
150
29
  }
151
- function getWithEmbeddedEntryInlineEvents(sdk) {
152
- return function withEmbeddedEntryInlineEvents(editor, { options: { hotkey } }) {
153
- return function handleEvent(event) {
154
- if (!editor) return;
155
- if (hotkey && isHotkey(hotkey, event)) {
156
- selectEntityAndInsert(editor, sdk, editor.tracking.onShortcutAction);
157
- }
158
- };
159
- };
160
- }
@@ -26,7 +26,7 @@ export function LinkedResourceBlock(props) {
26
26
  ]);
27
27
  return React.createElement(LinkedBlockWrapper, {
28
28
  attributes: attributes,
29
- element: element,
29
+ link: element.data.target,
30
30
  card: React.createElement(FetchingWrappedResourceCard, {
31
31
  sdk: sdk,
32
32
  link: link,
@@ -0,0 +1,46 @@
1
+ import * as React from 'react';
2
+ import { Menu, Flex } from '@contentful/f36-components';
3
+ import { EmbeddedEntryInlineIcon } from '@contentful/f36-icons';
4
+ import tokens from '@contentful/f36-tokens';
5
+ import { INLINES } from '@contentful/rich-text-types';
6
+ import { css } from 'emotion';
7
+ import { useContentfulEditor } from '../../ContentfulEditorProvider';
8
+ import { moveToTheNextChar } from '../../helpers/editor';
9
+ import { useSdkContext } from '../../SdkProvider';
10
+ import { selectEntityAndInsert } from '../shared/EmbeddedInlineUtil';
11
+ const styles = {
12
+ icon: css({
13
+ marginRight: '10px'
14
+ }),
15
+ root: css({
16
+ display: 'inline-block',
17
+ margin: `0 ${tokens.spacing2Xs}`,
18
+ fontSize: 'inherit',
19
+ span: {
20
+ userSelect: 'none'
21
+ }
22
+ })
23
+ };
24
+ export function EmbeddedInlineToolbarIcon(props) {
25
+ const editor = useContentfulEditor();
26
+ const sdk = useSdkContext();
27
+ async function handleClick(event) {
28
+ event.preventDefault();
29
+ if (!editor) return;
30
+ props.onClose();
31
+ await selectEntityAndInsert(editor, sdk, editor.tracking.onToolbarAction);
32
+ moveToTheNextChar(editor);
33
+ }
34
+ return React.createElement(Menu.Item, {
35
+ disabled: props.isDisabled,
36
+ className: "rich-text__entry-link-block-button",
37
+ testId: `toolbar-toggle-${INLINES.EMBEDDED_ENTRY}`,
38
+ onClick: handleClick
39
+ }, React.createElement(Flex, {
40
+ alignItems: "center",
41
+ flexDirection: "row"
42
+ }, React.createElement(EmbeddedEntryInlineIcon, {
43
+ variant: "secondary",
44
+ className: `rich-text__embedded-entry-list-icon ${styles.icon}`
45
+ }), React.createElement("span", null, "Inline entry")));
46
+ }
@@ -0,0 +1,62 @@
1
+ import { INLINES } from '@contentful/rich-text-types';
2
+ import isHotkey from 'is-hotkey';
3
+ import { focus } from '../../helpers/editor';
4
+ import newEntitySelectorConfigFromRichTextField from '../../helpers/newEntitySelectorConfigFromRichTextField';
5
+ import { watchCurrentSlide } from '../../helpers/sdkNavigatorSlideIn';
6
+ import { insertNodes, select } from '../../internal/transforms';
7
+ export function getWithEmbeddedEntryInlineEvents(sdk) {
8
+ return function withEmbeddedEntryInlineEvents(editor, { options: { hotkey } }) {
9
+ return function handleEvent(event) {
10
+ if (!editor) return;
11
+ if (hotkey && isHotkey(hotkey, event)) {
12
+ selectEntityAndInsert(editor, sdk, editor.tracking.onShortcutAction);
13
+ }
14
+ };
15
+ };
16
+ }
17
+ export async function selectEntityAndInsert(editor, sdk, logAction) {
18
+ logAction('openCreateEmbedDialog', {
19
+ nodeType: INLINES.EMBEDDED_ENTRY
20
+ });
21
+ const config = {
22
+ ...newEntitySelectorConfigFromRichTextField(sdk.field, INLINES.EMBEDDED_ENTRY),
23
+ withCreate: true
24
+ };
25
+ const { selection } = editor;
26
+ const rteSlide = watchCurrentSlide(sdk.navigator);
27
+ const entry = await sdk.dialogs.selectSingleEntry(config);
28
+ if (!entry) {
29
+ logAction('cancelCreateEmbedDialog', {
30
+ nodeType: INLINES.EMBEDDED_ENTRY
31
+ });
32
+ } else {
33
+ select(editor, selection);
34
+ insertNodes(editor, createInlineEntryNode(entry.sys.id));
35
+ logAction('insert', {
36
+ nodeType: INLINES.EMBEDDED_ENTRY
37
+ });
38
+ }
39
+ rteSlide.onActive(()=>{
40
+ rteSlide.unwatch();
41
+ focus(editor);
42
+ });
43
+ }
44
+ export function createInlineEntryNode(id) {
45
+ return {
46
+ type: INLINES.EMBEDDED_ENTRY,
47
+ children: [
48
+ {
49
+ text: ''
50
+ }
51
+ ],
52
+ data: {
53
+ target: {
54
+ sys: {
55
+ id,
56
+ type: 'Link',
57
+ linkType: 'Entry'
58
+ }
59
+ }
60
+ }
61
+ };
62
+ }
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { css } from 'emotion';
3
3
  import { IS_CHROME } from '../../helpers/environment';
4
+ import { getLinkEntityId } from './utils';
4
5
  const styles = {
5
6
  root: css({
6
7
  marginBottom: '1.25rem !important',
@@ -12,14 +13,12 @@ const styles = {
12
13
  width: '100%'
13
14
  })
14
15
  };
15
- const isResourceLink = (link)=>!!link.urn;
16
- export function LinkedBlockWrapper({ attributes , card , children , element }) {
17
- const link = element.data.target.sys;
16
+ export function LinkedBlockWrapper({ attributes , card , children , link }) {
18
17
  return React.createElement("div", {
19
18
  ...attributes,
20
19
  className: styles.root,
21
- "data-entity-type": link.linkType,
22
- "data-entity-id": isResourceLink(link) ? link.urn : link.id,
20
+ "data-entity-type": link.sys.linkType,
21
+ "data-entity-id": getLinkEntityId(link),
23
22
  contentEditable: IS_CHROME ? undefined : false,
24
23
  draggable: IS_CHROME ? true : undefined
25
24
  }, React.createElement("div", {
@@ -0,0 +1,31 @@
1
+ import * as React from 'react';
2
+ import tokens from '@contentful/f36-tokens';
3
+ import { css } from 'emotion';
4
+ import { IS_CHROME } from '../../helpers/environment';
5
+ import { getLinkEntityId } from './utils';
6
+ const styles = {
7
+ icon: css({
8
+ marginRight: '10px'
9
+ }),
10
+ root: css({
11
+ display: 'inline-block',
12
+ margin: `0 ${tokens.spacing2Xs}`,
13
+ fontSize: 'inherit',
14
+ span: {
15
+ userSelect: 'none'
16
+ }
17
+ })
18
+ };
19
+ export function LinkedInlineWrapper({ attributes , card , children , link }) {
20
+ return React.createElement("span", {
21
+ ...attributes,
22
+ className: styles.root,
23
+ "data-entity-type": link.sys.linkType,
24
+ "data-entity-id": getLinkEntityId(link),
25
+ contentEditable: IS_CHROME ? undefined : false,
26
+ draggable: IS_CHROME ? true : undefined
27
+ }, React.createElement("span", {
28
+ contentEditable: IS_CHROME ? false : undefined,
29
+ draggable: IS_CHROME ? true : undefined
30
+ }, card), children);
31
+ }
@@ -0,0 +1,2 @@
1
+ const isResourceLink = (link)=>!!link.sys.urn;
2
+ export const getLinkEntityId = (link)=>isResourceLink(link) ? link.sys.urn : link.sys.id;
@@ -1,15 +1,10 @@
1
1
  import * as React from 'react';
2
+ import { EntityLink } from '@contentful/field-editor-reference';
2
3
  import { Element, RenderElementProps } from '../../internal/types';
3
4
  type LinkedEntityBlockProps = {
4
5
  element: Element & {
5
6
  data: {
6
- target: {
7
- sys: {
8
- id: string;
9
- linkType: 'Entry' | 'Asset';
10
- type: 'Link';
11
- };
12
- };
7
+ target: EntityLink;
13
8
  };
14
9
  };
15
10
  attributes: Pick<RenderElementProps, 'attributes'>;
@@ -0,0 +1,14 @@
1
+ import * as React from 'react';
2
+ import { EntryLink } from '@contentful/field-editor-reference';
3
+ import { Element, RenderElementProps } from '../../internal/types';
4
+ type LinkedEntityInlineProps = {
5
+ element: Element & {
6
+ data: {
7
+ target: EntryLink;
8
+ };
9
+ };
10
+ attributes: Pick<RenderElementProps, 'attributes'>;
11
+ children: Pick<RenderElementProps, 'children'>;
12
+ };
13
+ export declare function LinkedEntityInline(props: LinkedEntityInlineProps): React.JSX.Element;
14
+ export {};
@@ -1,10 +1,3 @@
1
- import * as React from 'react';
2
1
  import { FieldAppSDK } from '@contentful/app-sdk';
3
2
  import { PlatePlugin } from '../../internal/types';
4
- interface ToolbarEmbeddedEntityInlineButtonProps {
5
- onClose: () => void;
6
- isDisabled: boolean;
7
- }
8
- export declare function ToolbarEmbeddedEntityInlineButton(props: ToolbarEmbeddedEntityInlineButtonProps): React.JSX.Element;
9
3
  export declare function createEmbeddedEntityInlinePlugin(sdk: FieldAppSDK): PlatePlugin;
10
- export {};
@@ -0,0 +1,7 @@
1
+ import * as React from 'react';
2
+ interface EmbeddedInlineToolbarIconProps {
3
+ onClose: () => void;
4
+ isDisabled: boolean;
5
+ }
6
+ export declare function EmbeddedInlineToolbarIcon(props: EmbeddedInlineToolbarIconProps): React.JSX.Element;
7
+ export {};
@@ -0,0 +1,22 @@
1
+ import { FieldAppSDK } from '@contentful/app-sdk';
2
+ import { INLINES } from '@contentful/rich-text-types';
3
+ import { HotkeyPlugin } from '@udecode/plate-common';
4
+ import { KeyboardHandler } from '../../internal/types';
5
+ import { TrackingPluginActions } from '../../plugins/Tracking';
6
+ export declare function getWithEmbeddedEntryInlineEvents(sdk: FieldAppSDK): KeyboardHandler<HotkeyPlugin>;
7
+ export declare function selectEntityAndInsert(editor: any, sdk: FieldAppSDK, logAction: TrackingPluginActions['onShortcutAction'] | TrackingPluginActions['onToolbarAction']): Promise<void>;
8
+ export declare function createInlineEntryNode(id: string): {
9
+ type: INLINES;
10
+ children: {
11
+ text: string;
12
+ }[];
13
+ data: {
14
+ target: {
15
+ sys: {
16
+ id: string;
17
+ type: string;
18
+ linkType: string;
19
+ };
20
+ };
21
+ };
22
+ };
@@ -1,25 +1,10 @@
1
1
  import React from 'react';
2
- import { Element, RenderElementProps } from '../../internal';
3
- type EntityLink = {
4
- id: string;
5
- linkType: 'Entry' | 'Asset';
6
- type: 'Link';
7
- };
8
- type ResourceLink = {
9
- urn: string;
10
- linkType: 'Contentful:Entry';
11
- type: 'ResourceLink';
12
- };
2
+ import { EntityLink, ResourceLink } from '@contentful/field-editor-reference';
3
+ import { RenderElementProps } from '../../internal';
13
4
  type LinkedBlockWrapperProps = React.PropsWithChildren<{
14
5
  attributes: Pick<RenderElementProps, 'attributes'>;
15
6
  card: JSX.Element;
16
- element: Element & {
17
- data: {
18
- target: {
19
- sys: ResourceLink | EntityLink;
20
- };
21
- };
22
- };
7
+ link: ResourceLink | EntityLink;
23
8
  }>;
24
- export declare function LinkedBlockWrapper({ attributes, card, children, element, }: LinkedBlockWrapperProps): React.JSX.Element;
9
+ export declare function LinkedBlockWrapper({ attributes, card, children, link }: LinkedBlockWrapperProps): React.JSX.Element;
25
10
  export {};
@@ -0,0 +1,10 @@
1
+ import * as React from 'react';
2
+ import { EntryLink, ResourceLink } from '@contentful/field-editor-reference';
3
+ import { RenderElementProps } from '../../internal/types';
4
+ type LinkedInlineWrapperProps = React.PropsWithChildren<{
5
+ attributes: Pick<RenderElementProps, 'attributes'>;
6
+ card: JSX.Element;
7
+ link: ResourceLink | EntryLink;
8
+ }>;
9
+ export declare function LinkedInlineWrapper({ attributes, card, children, link, }: LinkedInlineWrapperProps): React.JSX.Element;
10
+ export {};
@@ -0,0 +1,2 @@
1
+ import { EntityLink, ResourceLink } from '@contentful/field-editor-reference';
2
+ export declare const getLinkEntityId: (link: EntityLink | ResourceLink) => string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contentful/field-editor-rich-text",
3
- "version": "3.12.6",
3
+ "version": "3.12.7",
4
4
  "source": "./src/index.tsx",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -81,5 +81,5 @@
81
81
  "prism-react-renderer": "2.0.5",
82
82
  "react": ">=16.14.0"
83
83
  },
84
- "gitHead": "ff0704c0aa9e0f0cdbb4fc70de7ac4ca337529e4"
84
+ "gitHead": "3ae9c46f02565c17a9323b1d319950bbb5adc900"
85
85
  }
@@ -1,30 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "createInlineEntryNode", {
6
- enumerable: true,
7
- get: function() {
8
- return createInlineEntryNode;
9
- }
10
- });
11
- const _richtexttypes = require("@contentful/rich-text-types");
12
- function createInlineEntryNode(id) {
13
- return {
14
- type: _richtexttypes.INLINES.EMBEDDED_ENTRY,
15
- children: [
16
- {
17
- text: ''
18
- }
19
- ],
20
- data: {
21
- target: {
22
- sys: {
23
- id,
24
- type: 'Link',
25
- linkType: 'Entry'
26
- }
27
- }
28
- }
29
- };
30
- }
@@ -1,20 +0,0 @@
1
- import { INLINES } from '@contentful/rich-text-types';
2
- export function createInlineEntryNode(id) {
3
- return {
4
- type: INLINES.EMBEDDED_ENTRY,
5
- children: [
6
- {
7
- text: ''
8
- }
9
- ],
10
- data: {
11
- target: {
12
- sys: {
13
- id,
14
- type: 'Link',
15
- linkType: 'Entry'
16
- }
17
- }
18
- }
19
- };
20
- }
@@ -1,16 +0,0 @@
1
- import { INLINES } from '@contentful/rich-text-types';
2
- export declare function createInlineEntryNode(id: string): {
3
- type: INLINES;
4
- children: {
5
- text: string;
6
- }[];
7
- data: {
8
- target: {
9
- sys: {
10
- id: string;
11
- type: string;
12
- linkType: string;
13
- };
14
- };
15
- };
16
- };