@contentful/field-editor-rich-text 3.12.5 → 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.
- package/dist/cjs/Toolbar/components/EmbedEntityWidget.js +2 -2
- package/dist/cjs/plugins/EmbeddedEntityBlock/LinkedEntityBlock.js +1 -1
- package/dist/cjs/plugins/EmbeddedEntityInline/LinkedEntityInline.js +97 -0
- package/dist/cjs/plugins/EmbeddedEntityInline/index.js +8 -191
- package/dist/cjs/plugins/EmbeddedResourceBlock/LinkedResourceBlock.js +1 -1
- package/dist/cjs/plugins/shared/EmbeddedInlineToolbarIcon.js +100 -0
- package/dist/cjs/plugins/shared/EmbeddedInlineUtil.js +88 -0
- package/dist/cjs/plugins/shared/LinkedBlockWrapper.js +4 -5
- package/dist/cjs/plugins/shared/LinkedInlineWrapper.js +85 -0
- package/dist/cjs/plugins/shared/utils.js +12 -0
- package/dist/esm/Toolbar/components/EmbedEntityWidget.js +2 -2
- package/dist/esm/plugins/EmbeddedEntityBlock/LinkedEntityBlock.js +1 -1
- package/dist/esm/plugins/EmbeddedEntityInline/LinkedEntityInline.js +48 -0
- package/dist/esm/plugins/EmbeddedEntityInline/index.js +3 -134
- package/dist/esm/plugins/EmbeddedResourceBlock/LinkedResourceBlock.js +1 -1
- package/dist/esm/plugins/shared/EmbeddedInlineToolbarIcon.js +46 -0
- package/dist/esm/plugins/shared/EmbeddedInlineUtil.js +62 -0
- package/dist/esm/plugins/shared/LinkedBlockWrapper.js +4 -5
- package/dist/esm/plugins/shared/LinkedInlineWrapper.js +31 -0
- package/dist/esm/plugins/shared/utils.js +2 -0
- package/dist/types/plugins/EmbeddedEntityBlock/LinkedEntityBlock.d.ts +2 -7
- package/dist/types/plugins/EmbeddedEntityInline/LinkedEntityInline.d.ts +14 -0
- package/dist/types/plugins/EmbeddedEntityInline/index.d.ts +0 -7
- package/dist/types/plugins/shared/EmbeddedInlineToolbarIcon.d.ts +7 -0
- package/dist/types/plugins/shared/EmbeddedInlineUtil.d.ts +22 -0
- package/dist/types/plugins/shared/LinkedBlockWrapper.d.ts +4 -19
- package/dist/types/plugins/shared/LinkedInlineWrapper.d.ts +10 -0
- package/dist/types/plugins/shared/utils.d.ts +2 -0
- package/package.json +3 -3
- package/dist/cjs/plugins/EmbeddedEntityInline/Util.js +0 -30
- package/dist/esm/plugins/EmbeddedEntityInline/Util.js +0 -20
- package/dist/types/plugins/EmbeddedEntityInline/Util.d.ts +0 -16
|
@@ -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(
|
|
28
|
+
}), inlineEntryEmbedEnabled && React.createElement(EmbeddedInlineToolbarIcon, {
|
|
29
29
|
isDisabled: !!isDisabled || isLinkActive(editor),
|
|
30
30
|
onClose: onCloseEntityDropdown
|
|
31
31
|
}), blockAssetEmbedEnabled && React.createElement(EmbeddedBlockToolbarIcon, {
|
|
@@ -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 {
|
|
7
|
-
import
|
|
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:
|
|
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
|
-
|
|
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
|
-
|
|
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":
|
|
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
|
+
}
|
|
@@ -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,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 {
|
|
3
|
-
|
|
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
|
-
|
|
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,
|
|
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 {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/field-editor-rich-text",
|
|
3
|
-
"version": "3.12.
|
|
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",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"@contentful/f36-icons": "^4.1.1",
|
|
45
45
|
"@contentful/f36-tokens": "^4.0.0",
|
|
46
46
|
"@contentful/f36-utils": "^4.19.0",
|
|
47
|
-
"@contentful/field-editor-reference": "^5.
|
|
47
|
+
"@contentful/field-editor-reference": "^5.17.0",
|
|
48
48
|
"@contentful/field-editor-shared": "^1.4.2",
|
|
49
49
|
"@contentful/rich-text-plain-text-renderer": "^16.0.4",
|
|
50
50
|
"@contentful/rich-text-types": "16.3.0",
|
|
@@ -81,5 +81,5 @@
|
|
|
81
81
|
"prism-react-renderer": "2.0.5",
|
|
82
82
|
"react": ">=16.14.0"
|
|
83
83
|
},
|
|
84
|
-
"gitHead": "
|
|
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
|
-
};
|