@contentful/field-editor-rich-text 2.0.0-next.39 → 2.0.0-next.41
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/field-editor-rich-text.cjs.development.js +148 -415
- package/dist/field-editor-rich-text.cjs.development.js.map +1 -1
- package/dist/field-editor-rich-text.cjs.production.min.js +1 -1
- package/dist/field-editor-rich-text.cjs.production.min.js.map +1 -1
- package/dist/field-editor-rich-text.esm.js +153 -420
- package/dist/field-editor-rich-text.esm.js.map +1 -1
- package/dist/helpers/sanitizeIncomingSlateDoc.d.ts +6 -0
- package/dist/plugins/EmbeddedEntityBlock/ToolbarIcon.d.ts +1 -2
- package/dist/plugins/EmbeddedEntityInline/index.d.ts +0 -1
- package/dist/plugins/shared/FetchingWrappedAssetCard.d.ts +0 -10
- package/dist/prepareDocument.d.ts +2 -2
- package/package.json +2 -2
- package/dist/plugins/shared/EntityStatusIcon.d.ts +0 -7
|
@@ -21,12 +21,11 @@ var slate = require('slate');
|
|
|
21
21
|
var Slate = require('slate-react');
|
|
22
22
|
var constate = _interopDefault(require('constate'));
|
|
23
23
|
var f36Components = require('@contentful/f36-components');
|
|
24
|
-
var
|
|
24
|
+
var find = _interopDefault(require('lodash/find'));
|
|
25
|
+
var flow = _interopDefault(require('lodash/flow'));
|
|
25
26
|
var get = _interopDefault(require('lodash/get'));
|
|
26
27
|
var f36Icons = require('@contentful/f36-icons');
|
|
27
28
|
var tokens = _interopDefault(require('@contentful/f36-tokens'));
|
|
28
|
-
var find = _interopDefault(require('lodash/find'));
|
|
29
|
-
var flow = _interopDefault(require('lodash/flow'));
|
|
30
29
|
var plateList = require('@udecode/plate-list');
|
|
31
30
|
var castArray = _interopDefault(require('lodash/castArray'));
|
|
32
31
|
var plateBasicMarks = require('@udecode/plate-basic-marks');
|
|
@@ -639,179 +638,24 @@ var _constate = /*#__PURE__*/constate(useSdk),
|
|
|
639
638
|
SdkProvider = _constate[0],
|
|
640
639
|
useSdkContext = _constate[1];
|
|
641
640
|
|
|
642
|
-
var styles = {
|
|
643
|
-
scheduleIcon: /*#__PURE__*/emotion.css({
|
|
644
|
-
marginRight: tokens.spacing2Xs
|
|
645
|
-
})
|
|
646
|
-
};
|
|
647
|
-
function EntityStatusIcon(_ref) {
|
|
648
|
-
var entity = _ref.entity,
|
|
649
|
-
entityType = _ref.entityType;
|
|
650
|
-
|
|
651
|
-
var _useEntities = fieldEditorReference.useEntities(),
|
|
652
|
-
loadEntityScheduledActions = _useEntities.loadEntityScheduledActions;
|
|
653
|
-
|
|
654
|
-
return /*#__PURE__*/React.createElement(fieldEditorReference.ScheduledIconWithTooltip, {
|
|
655
|
-
getEntityScheduledActions: loadEntityScheduledActions,
|
|
656
|
-
entityType: entityType,
|
|
657
|
-
entityId: entity.sys.id
|
|
658
|
-
}, /*#__PURE__*/React.createElement(f36Icons.ClockIcon, {
|
|
659
|
-
className: styles.scheduleIcon,
|
|
660
|
-
size: "small",
|
|
661
|
-
color: "muted",
|
|
662
|
-
testId: "schedule-icon"
|
|
663
|
-
}));
|
|
664
|
-
}
|
|
665
|
-
|
|
666
|
-
var styles$1 = {
|
|
667
|
-
assetCard: /*#__PURE__*/emotion.css({
|
|
668
|
-
cursor: 'pointer'
|
|
669
|
-
}),
|
|
670
|
-
cardDropdown: /*#__PURE__*/emotion.css({
|
|
671
|
-
width: '300px'
|
|
672
|
-
}),
|
|
673
|
-
truncated: /*#__PURE__*/emotion.css({
|
|
674
|
-
overflow: 'hidden',
|
|
675
|
-
whiteSpace: 'nowrap',
|
|
676
|
-
textOverflow: 'ellipsis'
|
|
677
|
-
})
|
|
678
|
-
};
|
|
679
|
-
|
|
680
|
-
function downloadAsset(url, fileName) {
|
|
681
|
-
// This method won't work if we have CORS disabled(asset not on the contentful server)
|
|
682
|
-
fetch(url, {
|
|
683
|
-
method: 'GET',
|
|
684
|
-
headers: {}
|
|
685
|
-
}).then(function (response) {
|
|
686
|
-
response.arrayBuffer().then(function (buffer) {
|
|
687
|
-
var url = window.URL.createObjectURL(new Blob([buffer]));
|
|
688
|
-
var link = document.createElement('a');
|
|
689
|
-
link.href = url;
|
|
690
|
-
link.setAttribute('download', fileName); //or any other extension
|
|
691
|
-
|
|
692
|
-
document.body.appendChild(link);
|
|
693
|
-
link.click();
|
|
694
|
-
document.body.removeChild(link);
|
|
695
|
-
});
|
|
696
|
-
})["catch"](function (err) {
|
|
697
|
-
f36Components.Notification.error('Failed to download asset');
|
|
698
|
-
console.log(err);
|
|
699
|
-
});
|
|
700
|
-
}
|
|
701
|
-
|
|
702
|
-
function renderAssetInfo(props) {
|
|
703
|
-
var entityFile = props.entityFile;
|
|
704
|
-
var fileName = get(entityFile, 'fileName');
|
|
705
|
-
var mimeType = get(entityFile, 'contentType');
|
|
706
|
-
var fileSize = get(entityFile, 'details.size');
|
|
707
|
-
var image = get(entityFile, 'details.image');
|
|
708
|
-
return [/*#__PURE__*/React.createElement(f36Components.Menu.SectionTitle, {
|
|
709
|
-
key: "file-section"
|
|
710
|
-
}, "File info"), fileName && /*#__PURE__*/React.createElement(f36Components.Menu.Item, {
|
|
711
|
-
key: "file-name"
|
|
712
|
-
}, /*#__PURE__*/React.createElement(f36Components.Text, {
|
|
713
|
-
isTruncated: true
|
|
714
|
-
}, fileName)), mimeType && /*#__PURE__*/React.createElement(f36Components.Menu.Item, {
|
|
715
|
-
key: "file-type"
|
|
716
|
-
}, /*#__PURE__*/React.createElement(f36Components.Text, {
|
|
717
|
-
isTruncated: true
|
|
718
|
-
}, mimeType)), fileSize && /*#__PURE__*/React.createElement(f36Components.Menu.Item, {
|
|
719
|
-
key: "file-size"
|
|
720
|
-
}, fieldEditorShared.shortenStorageUnit(fileSize, 'B')), image && /*#__PURE__*/React.createElement(f36Components.Menu.Item, {
|
|
721
|
-
key: "file-dimentions"
|
|
722
|
-
}, image.width + " \xD7 " + image.height)].filter(function (item) {
|
|
723
|
-
return item;
|
|
724
|
-
});
|
|
725
|
-
}
|
|
726
|
-
function renderActions(props) {
|
|
727
|
-
var entityFile = props.entityFile,
|
|
728
|
-
isDisabled = props.isDisabled,
|
|
729
|
-
onEdit = props.onEdit,
|
|
730
|
-
onRemove = props.onRemove;
|
|
731
|
-
return [/*#__PURE__*/React.createElement(f36Components.Menu.SectionTitle, {
|
|
732
|
-
key: "section-title"
|
|
733
|
-
}, "Actions"), onEdit ? /*#__PURE__*/React.createElement(f36Components.Menu.Item, {
|
|
734
|
-
key: "edit",
|
|
735
|
-
onClick: onEdit,
|
|
736
|
-
testId: "card-action-edit"
|
|
737
|
-
}, "Edit") : null, entityFile ? /*#__PURE__*/React.createElement(f36Components.Menu.Item, {
|
|
738
|
-
key: "download",
|
|
739
|
-
onClick: function onClick() {
|
|
740
|
-
if (typeof entityFile.url === 'string') {
|
|
741
|
-
downloadAsset(entityFile.url, get(entityFile, 'fileName'));
|
|
742
|
-
}
|
|
743
|
-
},
|
|
744
|
-
testId: "card-action-download"
|
|
745
|
-
}, "Download") : null, onRemove ? /*#__PURE__*/React.createElement(f36Components.Menu.Item, {
|
|
746
|
-
key: "remove",
|
|
747
|
-
disabled: isDisabled,
|
|
748
|
-
onClick: onRemove,
|
|
749
|
-
testId: "card-action-remove"
|
|
750
|
-
}, "Remove") : null].filter(function (item) {
|
|
751
|
-
return item;
|
|
752
|
-
});
|
|
753
|
-
}
|
|
754
641
|
function FetchingWrappedAssetCard(props) {
|
|
755
|
-
var
|
|
642
|
+
var onEntityFetchComplete = props.onEntityFetchComplete,
|
|
643
|
+
assetId = props.assetId;
|
|
756
644
|
|
|
757
645
|
var _useEntities = fieldEditorReference.useEntities(),
|
|
758
646
|
getOrLoadAsset = _useEntities.getOrLoadAsset,
|
|
647
|
+
loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
|
|
759
648
|
assets = _useEntities.assets;
|
|
760
649
|
|
|
761
|
-
var asset = assets[props.assetId];
|
|
762
|
-
var defaultLocaleCode = props.sdk.locales["default"];
|
|
763
|
-
var entityFile = asset != null && (_asset$fields = asset.fields) != null && _asset$fields.file ? asset.fields.file[props.locale] || asset.fields.file[defaultLocaleCode] : undefined;
|
|
764
|
-
var onEntityFetchComplete = props.onEntityFetchComplete;
|
|
765
650
|
React.useEffect(function () {
|
|
766
|
-
getOrLoadAsset(
|
|
767
|
-
}, [
|
|
768
|
-
|
|
651
|
+
getOrLoadAsset(assetId);
|
|
652
|
+
}, [getOrLoadAsset, assetId]);
|
|
653
|
+
var asset = assets[assetId];
|
|
769
654
|
React.useEffect(function () {
|
|
770
|
-
if (
|
|
771
|
-
|
|
772
|
-
}
|
|
773
|
-
|
|
774
|
-
onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
|
|
775
|
-
}, [asset, onEntityFetchComplete]);
|
|
776
|
-
|
|
777
|
-
function getAssetSrc() {
|
|
778
|
-
if (!(entityFile != null && entityFile.url)) return '';
|
|
779
|
-
return entityFile.url + "?h=300";
|
|
780
|
-
}
|
|
781
|
-
|
|
782
|
-
function getFileType() {
|
|
783
|
-
var groupToIconMap = {
|
|
784
|
-
image: 'image',
|
|
785
|
-
video: 'video',
|
|
786
|
-
audio: 'audio',
|
|
787
|
-
richtext: 'richtext',
|
|
788
|
-
presentation: 'presentation',
|
|
789
|
-
spreadsheet: 'spreadsheet',
|
|
790
|
-
pdfdocument: 'pdf',
|
|
791
|
-
archive: 'archive',
|
|
792
|
-
plaintext: 'plaintext',
|
|
793
|
-
code: 'code',
|
|
794
|
-
markup: 'markup'
|
|
795
|
-
};
|
|
796
|
-
var archive = groupToIconMap['archive'];
|
|
797
|
-
|
|
798
|
-
if (!entityFile) {
|
|
799
|
-
return archive;
|
|
655
|
+
if (asset) {
|
|
656
|
+
onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
|
|
800
657
|
}
|
|
801
|
-
|
|
802
|
-
var groupName = mimetype.getGroupLabel({
|
|
803
|
-
type: entityFile.contentType,
|
|
804
|
-
fallbackFileName: entityFile.fileName
|
|
805
|
-
});
|
|
806
|
-
return groupToIconMap[groupName] || archive;
|
|
807
|
-
}
|
|
808
|
-
|
|
809
|
-
if (asset === undefined) {
|
|
810
|
-
return /*#__PURE__*/React.createElement(f36Components.AssetCard, {
|
|
811
|
-
size: "small",
|
|
812
|
-
isLoading: true
|
|
813
|
-
});
|
|
814
|
-
}
|
|
658
|
+
}, [onEntityFetchComplete, asset]);
|
|
815
659
|
|
|
816
660
|
if (asset === 'failed') {
|
|
817
661
|
return /*#__PURE__*/React.createElement(fieldEditorReference.MissingEntityCard, {
|
|
@@ -821,138 +665,48 @@ function FetchingWrappedAssetCard(props) {
|
|
|
821
665
|
});
|
|
822
666
|
}
|
|
823
667
|
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
entityType: "Asset",
|
|
829
|
-
asSquare: true,
|
|
830
|
-
isDisabled: props.isDisabled,
|
|
831
|
-
onRemove: props.onRemove
|
|
668
|
+
if (asset === undefined) {
|
|
669
|
+
return /*#__PURE__*/React.createElement(f36Components.AssetCard, {
|
|
670
|
+
size: "default",
|
|
671
|
+
isLoading: true
|
|
832
672
|
});
|
|
833
673
|
}
|
|
834
674
|
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
localeCode: props.locale,
|
|
838
|
-
defaultLocaleCode: defaultLocaleCode,
|
|
839
|
-
defaultTitle: 'Untitled'
|
|
840
|
-
});
|
|
841
|
-
return /*#__PURE__*/React.createElement(f36Components.AssetCard, {
|
|
842
|
-
title: entityTitle,
|
|
843
|
-
isSelected: props.isSelected,
|
|
675
|
+
return /*#__PURE__*/React.createElement(fieldEditorReference.WrappedAssetCard, {
|
|
676
|
+
getEntityScheduledActions: loadEntityScheduledActions,
|
|
844
677
|
size: "small",
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
actions: [renderActions({
|
|
854
|
-
entityFile: entityFile,
|
|
855
|
-
isDisabled: props.isDisabled,
|
|
856
|
-
onEdit: props.onEdit,
|
|
857
|
-
onRemove: props.onRemove
|
|
858
|
-
}), entityFile ? renderAssetInfo({
|
|
859
|
-
entityFile: entityFile
|
|
860
|
-
}) : null].filter(function (item) {
|
|
861
|
-
return item;
|
|
862
|
-
})
|
|
863
|
-
});
|
|
864
|
-
}
|
|
865
|
-
|
|
866
|
-
var styles$2 = {
|
|
867
|
-
entryCard: /*#__PURE__*/emotion.css({
|
|
868
|
-
cursor: 'pointer'
|
|
869
|
-
})
|
|
870
|
-
};
|
|
871
|
-
|
|
872
|
-
function EntryThumbnail(_ref) {
|
|
873
|
-
var file = _ref.file;
|
|
874
|
-
if (!fieldEditorShared.isValidImage(file)) return null;
|
|
875
|
-
return /*#__PURE__*/React.createElement(fieldEditorReference.AssetThumbnail, {
|
|
876
|
-
file: file
|
|
678
|
+
isSelected: props.isSelected,
|
|
679
|
+
isDisabled: props.isDisabled,
|
|
680
|
+
localeCode: props.locale,
|
|
681
|
+
defaultLocaleCode: props.sdk.locales["default"],
|
|
682
|
+
asset: asset,
|
|
683
|
+
onEdit: props.onEdit,
|
|
684
|
+
onRemove: props.isDisabled ? undefined : props.onRemove,
|
|
685
|
+
isClickable: false
|
|
877
686
|
});
|
|
878
687
|
}
|
|
879
688
|
|
|
880
689
|
function FetchingWrappedEntryCard(props) {
|
|
690
|
+
var entryId = props.entryId,
|
|
691
|
+
onEntityFetchComplete = props.onEntityFetchComplete;
|
|
692
|
+
|
|
881
693
|
var _useEntities = fieldEditorReference.useEntities(),
|
|
882
694
|
getOrLoadEntry = _useEntities.getOrLoadEntry,
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
var _React$useState = React.useState(null),
|
|
887
|
-
file = _React$useState[0],
|
|
888
|
-
setFile = _React$useState[1];
|
|
889
|
-
|
|
890
|
-
var entry = entries[props.entryId];
|
|
891
|
-
var contentType = React.useMemo(function () {
|
|
892
|
-
if (!entry || entry === 'failed') {
|
|
893
|
-
return undefined;
|
|
894
|
-
}
|
|
695
|
+
loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
|
|
696
|
+
entries = _useEntities.entries;
|
|
895
697
|
|
|
896
|
-
return props.sdk.space.getCachedContentTypes().find(function (contentType) {
|
|
897
|
-
return contentType.sys.id === entry.sys.contentType.sys.id;
|
|
898
|
-
});
|
|
899
|
-
}, [props.sdk, entry]);
|
|
900
|
-
var defaultLocaleCode = props.sdk.locales["default"];
|
|
901
|
-
var onEntityFetchComplete = props.onEntityFetchComplete;
|
|
902
698
|
React.useEffect(function () {
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
entry: entry,
|
|
907
|
-
contentType: contentType,
|
|
908
|
-
localeCode: props.locale,
|
|
909
|
-
defaultLocaleCode: defaultLocaleCode
|
|
910
|
-
}, getOrLoadAsset)["catch"](function () {
|
|
911
|
-
return null;
|
|
912
|
-
}).then(function (file) {
|
|
913
|
-
if (subscribed) {
|
|
914
|
-
setFile(file);
|
|
915
|
-
}
|
|
916
|
-
});
|
|
917
|
-
return function () {
|
|
918
|
-
subscribed = false;
|
|
919
|
-
};
|
|
920
|
-
}, [entry, contentType, props.locale, defaultLocaleCode, props.sdk, file, getOrLoadAsset]);
|
|
921
|
-
React.useEffect(function () {
|
|
922
|
-
getOrLoadEntry(props.entryId);
|
|
923
|
-
}, [props.entryId]); // eslint-disable-line
|
|
924
|
-
|
|
699
|
+
getOrLoadEntry(entryId);
|
|
700
|
+
}, [getOrLoadEntry, entryId]);
|
|
701
|
+
var entry = entries[entryId];
|
|
925
702
|
React.useEffect(function () {
|
|
926
|
-
if (
|
|
927
|
-
|
|
703
|
+
if (entry) {
|
|
704
|
+
onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
|
|
928
705
|
}
|
|
929
|
-
|
|
930
|
-
onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
|
|
931
|
-
}, [entry, onEntityFetchComplete]);
|
|
932
|
-
|
|
933
|
-
function renderDropdown() {
|
|
934
|
-
if (!props.onEdit || !props.onRemove) return undefined;
|
|
935
|
-
return [props.onEdit ? /*#__PURE__*/React.createElement(f36Components.MenuItem, {
|
|
936
|
-
key: "edit",
|
|
937
|
-
testId: "card-action-edit",
|
|
938
|
-
onClick: function onClick() {
|
|
939
|
-
props.onEdit && props.onEdit();
|
|
940
|
-
}
|
|
941
|
-
}, "Edit") : null, props.onRemove ? /*#__PURE__*/React.createElement(f36Components.MenuItem, {
|
|
942
|
-
key: "delete",
|
|
943
|
-
disabled: props.isDisabled,
|
|
944
|
-
testId: "card-action-remove",
|
|
945
|
-
onClick: function onClick() {
|
|
946
|
-
props.onRemove && props.onRemove();
|
|
947
|
-
}
|
|
948
|
-
}, "Remove") : null].filter(function (item) {
|
|
949
|
-
return item;
|
|
950
|
-
});
|
|
951
|
-
}
|
|
706
|
+
}, [onEntityFetchComplete, entry]);
|
|
952
707
|
|
|
953
708
|
if (entry === undefined) {
|
|
954
709
|
return /*#__PURE__*/React.createElement(f36Components.EntryCard, {
|
|
955
|
-
size: "default",
|
|
956
710
|
isLoading: true
|
|
957
711
|
});
|
|
958
712
|
}
|
|
@@ -965,50 +719,26 @@ function FetchingWrappedEntryCard(props) {
|
|
|
965
719
|
});
|
|
966
720
|
}
|
|
967
721
|
|
|
968
|
-
var
|
|
969
|
-
|
|
970
|
-
if (entryStatus === 'deleted') {
|
|
971
|
-
return /*#__PURE__*/React.createElement(fieldEditorReference.MissingEntityCard, {
|
|
972
|
-
entityType: "Entry",
|
|
973
|
-
isDisabled: props.isDisabled,
|
|
974
|
-
onRemove: props.onRemove
|
|
975
|
-
});
|
|
976
|
-
}
|
|
977
|
-
|
|
978
|
-
var title = fieldEditorShared.entityHelpers.getEntryTitle({
|
|
979
|
-
entry: entry,
|
|
980
|
-
contentType: contentType,
|
|
981
|
-
localeCode: props.locale,
|
|
982
|
-
defaultLocaleCode: defaultLocaleCode,
|
|
983
|
-
defaultTitle: 'Untitled'
|
|
722
|
+
var contentType = props.sdk.space.getCachedContentTypes().find(function (contentType) {
|
|
723
|
+
return contentType.sys.id === entry.sys.contentType.sys.id;
|
|
984
724
|
});
|
|
985
|
-
|
|
986
|
-
entity: entry,
|
|
987
|
-
contentType: contentType,
|
|
988
|
-
localeCode: props.locale,
|
|
989
|
-
defaultLocaleCode: defaultLocaleCode
|
|
990
|
-
});
|
|
991
|
-
return /*#__PURE__*/React.createElement(f36Components.EntryCard, {
|
|
992
|
-
contentType: contentType == null ? void 0 : contentType.name,
|
|
993
|
-
title: title,
|
|
994
|
-
description: description,
|
|
725
|
+
return /*#__PURE__*/React.createElement(fieldEditorReference.WrappedEntryCard, {
|
|
995
726
|
size: "default",
|
|
727
|
+
getAsset: props.sdk.space.getAsset,
|
|
728
|
+
getEntityScheduledActions: loadEntityScheduledActions,
|
|
996
729
|
isSelected: props.isSelected,
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
}),
|
|
1006
|
-
withDragHandle: false,
|
|
1007
|
-
actions: renderDropdown()
|
|
730
|
+
isDisabled: props.isDisabled,
|
|
731
|
+
localeCode: props.locale,
|
|
732
|
+
defaultLocaleCode: props.sdk.locales["default"],
|
|
733
|
+
contentType: contentType,
|
|
734
|
+
entry: entry,
|
|
735
|
+
onEdit: props.onEdit,
|
|
736
|
+
onRemove: props.isDisabled ? undefined : props.onRemove,
|
|
737
|
+
isClickable: false
|
|
1008
738
|
});
|
|
1009
739
|
}
|
|
1010
740
|
|
|
1011
|
-
var styles
|
|
741
|
+
var styles = {
|
|
1012
742
|
root: /*#__PURE__*/emotion.css({
|
|
1013
743
|
marginBottom: '1.25rem !important',
|
|
1014
744
|
display: 'block'
|
|
@@ -1050,7 +780,7 @@ function LinkedEntityBlock(props) {
|
|
|
1050
780
|
};
|
|
1051
781
|
|
|
1052
782
|
return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
|
|
1053
|
-
className: styles
|
|
783
|
+
className: styles.root,
|
|
1054
784
|
"data-entity-type": entityType,
|
|
1055
785
|
"data-entity-id": entityId,
|
|
1056
786
|
// COMPAT: This makes copy & paste work for Firefox
|
|
@@ -1060,7 +790,7 @@ function LinkedEntityBlock(props) {
|
|
|
1060
790
|
// COMPAT: This makes copy & paste work for Chromium/Blink browsers and Safari
|
|
1061
791
|
contentEditable: HAS_BEFORE_INPUT_SUPPORT ? false : undefined,
|
|
1062
792
|
draggable: HAS_BEFORE_INPUT_SUPPORT ? true : undefined,
|
|
1063
|
-
className: styles
|
|
793
|
+
className: styles.container
|
|
1064
794
|
}, entityType === 'Entry' && /*#__PURE__*/React__default.createElement(FetchingWrappedEntryCard, {
|
|
1065
795
|
sdk: sdk,
|
|
1066
796
|
entryId: entityId,
|
|
@@ -2008,14 +1738,13 @@ function insertBlock(editor, nodeType, entity) {
|
|
|
2008
1738
|
focus(editor);
|
|
2009
1739
|
}
|
|
2010
1740
|
|
|
2011
|
-
var styles$
|
|
1741
|
+
var styles$1 = {
|
|
2012
1742
|
icon: /*#__PURE__*/emotion.css({
|
|
2013
1743
|
marginRight: '10px'
|
|
2014
1744
|
})
|
|
2015
1745
|
};
|
|
2016
1746
|
function EmbeddedEntityBlockToolbarIcon(_ref) {
|
|
2017
|
-
var
|
|
2018
|
-
isDisabled = _ref.isDisabled,
|
|
1747
|
+
var isDisabled = _ref.isDisabled,
|
|
2019
1748
|
nodeType = _ref.nodeType,
|
|
2020
1749
|
onClose = _ref.onClose;
|
|
2021
1750
|
var editor = useContentfulEditor();
|
|
@@ -2047,15 +1776,7 @@ function EmbeddedEntityBlockToolbarIcon(_ref) {
|
|
|
2047
1776
|
|
|
2048
1777
|
var type = getEntityTypeFromNodeType(nodeType);
|
|
2049
1778
|
var baseClass = "rich-text__" + nodeType;
|
|
2050
|
-
return
|
|
2051
|
-
isDisabled: isDisabled,
|
|
2052
|
-
className: baseClass + "-button",
|
|
2053
|
-
size: "small",
|
|
2054
|
-
onClick: handleClick,
|
|
2055
|
-
startIcon: type === 'Asset' ? /*#__PURE__*/React__default.createElement(f36Icons.AssetIcon, null) : /*#__PURE__*/React__default.createElement(f36Icons.EmbeddedEntryBlockIcon, null),
|
|
2056
|
-
variant: "secondary",
|
|
2057
|
-
testId: "toolbar-toggle-" + nodeType
|
|
2058
|
-
}, "Embed " + type.toLowerCase()) : /*#__PURE__*/React__default.createElement(f36Components.Menu.Item, {
|
|
1779
|
+
return /*#__PURE__*/React__default.createElement(f36Components.Menu.Item, {
|
|
2059
1780
|
disabled: isDisabled,
|
|
2060
1781
|
className: baseClass + "-list-item",
|
|
2061
1782
|
onClick: handleClick,
|
|
@@ -2065,7 +1786,7 @@ function EmbeddedEntityBlockToolbarIcon(_ref) {
|
|
|
2065
1786
|
flexDirection: "row"
|
|
2066
1787
|
}, /*#__PURE__*/React__default.createElement(f36Components.Icon, {
|
|
2067
1788
|
as: type === 'Asset' ? f36Icons.AssetIcon : f36Icons.EmbeddedEntryBlockIcon,
|
|
2068
|
-
className: "rich-text__embedded-entry-list-icon " + styles$
|
|
1789
|
+
className: "rich-text__embedded-entry-list-icon " + styles$1.icon,
|
|
2069
1790
|
variant: "secondary"
|
|
2070
1791
|
}), /*#__PURE__*/React__default.createElement("span", null, type)));
|
|
2071
1792
|
}
|
|
@@ -2164,7 +1885,7 @@ var createEmbeddedAssetBlockPlugin = /*#__PURE__*/createEmbeddedEntityPlugin(Con
|
|
|
2164
1885
|
|
|
2165
1886
|
var getEntryTitle = fieldEditorShared.entityHelpers.getEntryTitle,
|
|
2166
1887
|
getEntryStatus = fieldEditorShared.entityHelpers.getEntryStatus;
|
|
2167
|
-
var styles$
|
|
1888
|
+
var styles$2 = {
|
|
2168
1889
|
scheduledIcon: /*#__PURE__*/emotion.css({
|
|
2169
1890
|
verticalAlign: 'text-bottom',
|
|
2170
1891
|
marginRight: tokens.spacing2Xs
|
|
@@ -2235,7 +1956,7 @@ function FetchingWrappedInlineEntryCard(props) {
|
|
|
2235
1956
|
actions: [/*#__PURE__*/React__default.createElement(f36Components.MenuItem, {
|
|
2236
1957
|
key: "remove",
|
|
2237
1958
|
onClick: props.onRemove,
|
|
2238
|
-
testId: "
|
|
1959
|
+
testId: "delete"
|
|
2239
1960
|
}, "Remove")]
|
|
2240
1961
|
});
|
|
2241
1962
|
}
|
|
@@ -2252,14 +1973,14 @@ function FetchingWrappedInlineEntryCard(props) {
|
|
|
2252
1973
|
key: "remove",
|
|
2253
1974
|
onClick: props.onRemove,
|
|
2254
1975
|
disabled: props.isDisabled,
|
|
2255
|
-
testId: "
|
|
1976
|
+
testId: "delete"
|
|
2256
1977
|
}, "Remove")]
|
|
2257
1978
|
}, /*#__PURE__*/React__default.createElement(fieldEditorReference.ScheduledIconWithTooltip, {
|
|
2258
1979
|
getEntityScheduledActions: loadEntityScheduledActions,
|
|
2259
1980
|
entityType: "Entry",
|
|
2260
1981
|
entityId: entry.sys.id
|
|
2261
1982
|
}, /*#__PURE__*/React__default.createElement(f36Icons.ClockIcon, {
|
|
2262
|
-
className: styles$
|
|
1983
|
+
className: styles$2.scheduledIcon,
|
|
2263
1984
|
variant: "muted",
|
|
2264
1985
|
testId: "scheduled-icon"
|
|
2265
1986
|
})), /*#__PURE__*/React__default.createElement(f36Components.Text, null, title));
|
|
@@ -2283,7 +2004,7 @@ function createInlineEntryNode(id) {
|
|
|
2283
2004
|
};
|
|
2284
2005
|
}
|
|
2285
2006
|
|
|
2286
|
-
var styles$
|
|
2007
|
+
var styles$3 = {
|
|
2287
2008
|
icon: /*#__PURE__*/emotion.css({
|
|
2288
2009
|
marginRight: '10px'
|
|
2289
2010
|
}),
|
|
@@ -2319,7 +2040,7 @@ function EmbeddedEntityInline(props) {
|
|
|
2319
2040
|
}
|
|
2320
2041
|
|
|
2321
2042
|
return /*#__PURE__*/React.createElement("span", Object.assign({}, props.attributes, {
|
|
2322
|
-
className: styles$
|
|
2043
|
+
className: styles$3.root,
|
|
2323
2044
|
"data-embedded-entity-inline-id": entryId,
|
|
2324
2045
|
// COMPAT: This makes copy & paste work for Firefox
|
|
2325
2046
|
contentEditable: !HAS_BEFORE_INPUT_SUPPORT ? false : undefined,
|
|
@@ -2439,15 +2160,7 @@ function ToolbarEmbeddedEntityInlineButton(props) {
|
|
|
2439
2160
|
return _handleClick.apply(this, arguments);
|
|
2440
2161
|
}
|
|
2441
2162
|
|
|
2442
|
-
return
|
|
2443
|
-
isDisabled: props.isDisabled,
|
|
2444
|
-
className: Contentful.INLINES.EMBEDDED_ENTRY + "-button",
|
|
2445
|
-
size: "small",
|
|
2446
|
-
onClick: handleClick,
|
|
2447
|
-
startIcon: /*#__PURE__*/React.createElement(f36Icons.EmbeddedEntryInlineIcon, null),
|
|
2448
|
-
variant: "secondary",
|
|
2449
|
-
testId: "toolbar-toggle-" + Contentful.INLINES.EMBEDDED_ENTRY
|
|
2450
|
-
}, "Embed inline entry") : /*#__PURE__*/React.createElement(f36Components.Menu.Item, {
|
|
2163
|
+
return /*#__PURE__*/React.createElement(f36Components.Menu.Item, {
|
|
2451
2164
|
disabled: props.isDisabled,
|
|
2452
2165
|
className: "rich-text__entry-link-block-button",
|
|
2453
2166
|
testId: "toolbar-toggle-" + Contentful.INLINES.EMBEDDED_ENTRY,
|
|
@@ -2457,7 +2170,7 @@ function ToolbarEmbeddedEntityInlineButton(props) {
|
|
|
2457
2170
|
flexDirection: "row"
|
|
2458
2171
|
}, /*#__PURE__*/React.createElement(f36Icons.EmbeddedEntryInlineIcon, {
|
|
2459
2172
|
variant: "secondary",
|
|
2460
|
-
className: "rich-text__embedded-entry-list-icon " + styles$
|
|
2173
|
+
className: "rich-text__embedded-entry-list-icon " + styles$3.icon
|
|
2461
2174
|
}), /*#__PURE__*/React.createElement("span", null, "Inline entry")));
|
|
2462
2175
|
}
|
|
2463
2176
|
function createEmbeddedEntityInlinePlugin(sdk) {
|
|
@@ -2533,7 +2246,7 @@ var isMarkEnabled = function isMarkEnabled(field, mark) {
|
|
|
2533
2246
|
};
|
|
2534
2247
|
|
|
2535
2248
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _dropdown, _LABELS;
|
|
2536
|
-
var styles$
|
|
2249
|
+
var styles$4 = {
|
|
2537
2250
|
dropdown: (_dropdown = {
|
|
2538
2251
|
root: /*#__PURE__*/emotion.css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-weight: ", ";\n "])), tokens.fontWeightDemiBold)
|
|
2539
2252
|
}, _dropdown[Contentful.BLOCKS.PARAGRAPH] = /*#__PURE__*/emotion.css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: ", ";\n "])), tokens.fontSizeL), _dropdown[Contentful.BLOCKS.HEADING_1] = /*#__PURE__*/emotion.css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 1.625rem;\n "]))), _dropdown[Contentful.BLOCKS.HEADING_2] = /*#__PURE__*/emotion.css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 1.4375rem;\n "]))), _dropdown[Contentful.BLOCKS.HEADING_3] = /*#__PURE__*/emotion.css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 1.25rem;\n "]))), _dropdown[Contentful.BLOCKS.HEADING_4] = /*#__PURE__*/emotion.css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 1.125rem;\n "]))), _dropdown[Contentful.BLOCKS.HEADING_5] = /*#__PURE__*/emotion.css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 1rem;\n "]))), _dropdown[Contentful.BLOCKS.HEADING_6] = /*#__PURE__*/emotion.css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 0.875rem;\n "]))), _dropdown)
|
|
@@ -2628,7 +2341,7 @@ function ToolbarHeadingButton(props) {
|
|
|
2628
2341
|
testId: "dropdown-option-" + nodeType,
|
|
2629
2342
|
disabled: props.isDisabled
|
|
2630
2343
|
}, /*#__PURE__*/React.createElement("span", {
|
|
2631
|
-
className: emotion.cx(styles$
|
|
2344
|
+
className: emotion.cx(styles$4.dropdown.root, styles$4.dropdown[nodeType])
|
|
2632
2345
|
}, LABELS[nodeType]));
|
|
2633
2346
|
}).filter(Boolean)));
|
|
2634
2347
|
}
|
|
@@ -2698,7 +2411,7 @@ var transformLift = function transformLift(editor, _ref4) {
|
|
|
2698
2411
|
};
|
|
2699
2412
|
|
|
2700
2413
|
var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _dropdown$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _headings, _HeadingComponents;
|
|
2701
|
-
var styles$
|
|
2414
|
+
var styles$5 = {
|
|
2702
2415
|
dropdown: (_dropdown$1 = {
|
|
2703
2416
|
root: /*#__PURE__*/emotion.css(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-weight: ", ";\n "])), tokens.fontWeightDemiBold)
|
|
2704
2417
|
}, _dropdown$1[Contentful.BLOCKS.PARAGRAPH] = /*#__PURE__*/emotion.css(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: ", ";\n "])), tokens.fontSizeL), _dropdown$1[Contentful.BLOCKS.HEADING_1] = /*#__PURE__*/emotion.css(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 1.625rem;\n "]))), _dropdown$1[Contentful.BLOCKS.HEADING_2] = /*#__PURE__*/emotion.css(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 1.4375rem;\n "]))), _dropdown$1[Contentful.BLOCKS.HEADING_3] = /*#__PURE__*/emotion.css(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 1.25rem;\n "]))), _dropdown$1[Contentful.BLOCKS.HEADING_4] = /*#__PURE__*/emotion.css(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 1.125rem;\n "]))), _dropdown$1[Contentful.BLOCKS.HEADING_5] = /*#__PURE__*/emotion.css(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 1rem;\n "]))), _dropdown$1[Contentful.BLOCKS.HEADING_6] = /*#__PURE__*/emotion.css(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 0.875rem;\n "]))), _dropdown$1),
|
|
@@ -2710,7 +2423,7 @@ var styles$8 = {
|
|
|
2710
2423
|
function createHeading(Tag, block) {
|
|
2711
2424
|
return function Heading(props) {
|
|
2712
2425
|
return /*#__PURE__*/React.createElement(Tag, Object.assign({}, props.attributes, {
|
|
2713
|
-
className: emotion.cx(styles$
|
|
2426
|
+
className: emotion.cx(styles$5.headings.root, styles$5.headings[block])
|
|
2714
2427
|
}), props.children);
|
|
2715
2428
|
};
|
|
2716
2429
|
}
|
|
@@ -2806,7 +2519,7 @@ var createHeadingPlugin = function createHeadingPlugin() {
|
|
|
2806
2519
|
};
|
|
2807
2520
|
};
|
|
2808
2521
|
|
|
2809
|
-
var styles$
|
|
2522
|
+
var styles$6 = {
|
|
2810
2523
|
button: /*#__PURE__*/emotion.css({
|
|
2811
2524
|
height: '30px',
|
|
2812
2525
|
width: '30px',
|
|
@@ -2832,7 +2545,7 @@ function ToolbarButton(props) {
|
|
|
2832
2545
|
};
|
|
2833
2546
|
|
|
2834
2547
|
var button = /*#__PURE__*/React__default.createElement(f36Components.Button, {
|
|
2835
|
-
className: emotion.cx(styles$
|
|
2548
|
+
className: emotion.cx(styles$6.button, className),
|
|
2836
2549
|
isDisabled: isDisabled,
|
|
2837
2550
|
startIcon: children,
|
|
2838
2551
|
onClick: handleClick,
|
|
@@ -2843,7 +2556,7 @@ function ToolbarButton(props) {
|
|
|
2843
2556
|
|
|
2844
2557
|
if (title) {
|
|
2845
2558
|
return /*#__PURE__*/React__default.createElement(f36Components.Tooltip, {
|
|
2846
|
-
className: styles$
|
|
2559
|
+
className: styles$6.tooltip,
|
|
2847
2560
|
placement: "bottom",
|
|
2848
2561
|
content: title
|
|
2849
2562
|
}, button);
|
|
@@ -2853,7 +2566,7 @@ function ToolbarButton(props) {
|
|
|
2853
2566
|
}
|
|
2854
2567
|
|
|
2855
2568
|
var _templateObject$2, _templateObject2$2, _templateObject3$2;
|
|
2856
|
-
var styles$
|
|
2569
|
+
var styles$7 = {
|
|
2857
2570
|
container: /*#__PURE__*/emotion.css(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 ", ";\n "])), tokens.spacingL),
|
|
2858
2571
|
hr: /*#__PURE__*/emotion.css(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n height: ", ";\n background: transparent;\n position: relative;\n border: 0;\n user-select: none;\n &:hover {\n cursor: pointer;\n }\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n background: ", ";\n top: 50%;\n }\n "])), tokens.spacingM, tokens.gray300),
|
|
2859
2572
|
hrSelected: /*#__PURE__*/emotion.css(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &::after {\n background: ", ";\n -webkit-box-shadow: 0px 0px 5px ", ";\n box-shadow: 0px 0px 5px ", ";\n }\n "])), tokens.colorPrimary, tokens.colorPrimary, tokens.colorPrimary)
|
|
@@ -2911,14 +2624,14 @@ function Hr(props) {
|
|
|
2911
2624
|
var isSelected = Slate.useSelected();
|
|
2912
2625
|
var isFocused = Slate.useFocused();
|
|
2913
2626
|
return /*#__PURE__*/React.createElement("div", Object.assign({}, props.attributes, {
|
|
2914
|
-
className: styles$
|
|
2627
|
+
className: styles$7.container,
|
|
2915
2628
|
"data-void-element": Contentful.BLOCKS.HR
|
|
2916
2629
|
}), /*#__PURE__*/React.createElement("div", {
|
|
2917
2630
|
draggable: true,
|
|
2918
2631
|
// Moving `contentEditable` to this div makes it to be selectable when being the first void element, e.g pressing ctrl + a to select everything
|
|
2919
2632
|
contentEditable: false
|
|
2920
2633
|
}, /*#__PURE__*/React.createElement("hr", {
|
|
2921
|
-
className: emotion.cx(styles$
|
|
2634
|
+
className: emotion.cx(styles$7.hr, isSelected && isFocused ? styles$7.hrSelected : undefined)
|
|
2922
2635
|
})), props.children);
|
|
2923
2636
|
}
|
|
2924
2637
|
var createHrPlugin = function createHrPlugin() {
|
|
@@ -2945,7 +2658,7 @@ var createHrPlugin = function createHrPlugin() {
|
|
|
2945
2658
|
};
|
|
2946
2659
|
|
|
2947
2660
|
var _templateObject$3, _SYS_LINK_TYPES, _LINK_TYPE_SELECTION_;
|
|
2948
|
-
var styles$
|
|
2661
|
+
var styles$8 = {
|
|
2949
2662
|
removeSelectionLabel: /*#__PURE__*/emotion.css(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: ", ";\n "])), tokens.spacingS)
|
|
2950
2663
|
};
|
|
2951
2664
|
var SYS_LINK_TYPES = (_SYS_LINK_TYPES = {}, _SYS_LINK_TYPES[Contentful.INLINES.ENTRY_HYPERLINK] = 'Entry', _SYS_LINK_TYPES[Contentful.INLINES.ASSET_HYPERLINK] = 'Asset', _SYS_LINK_TYPES);
|
|
@@ -3128,7 +2841,7 @@ function HyperlinkModal(props) {
|
|
|
3128
2841
|
}, "Link target", ' '), linkEntity && linkEntity.sys.linkType === SYS_LINK_TYPES[linkType] ? /*#__PURE__*/React.createElement(React.Fragment, null, !props.readonly && /*#__PURE__*/React.createElement(f36Components.TextLink, {
|
|
3129
2842
|
testId: "entity-selection-link",
|
|
3130
2843
|
onClick: resetLinkEntity,
|
|
3131
|
-
className: styles$
|
|
2844
|
+
className: styles$8.removeSelectionLabel
|
|
3132
2845
|
}, "Remove selection"), /*#__PURE__*/React.createElement("div", null, linkType === Contentful.INLINES.ENTRY_HYPERLINK && /*#__PURE__*/React.createElement(FetchingWrappedEntryCard, {
|
|
3133
2846
|
sdk: props.sdk,
|
|
3134
2847
|
locale: props.sdk.field.locale,
|
|
@@ -3469,7 +3182,7 @@ function useEntityInfo(props) {
|
|
|
3469
3182
|
return getEntityInfo(status.data);
|
|
3470
3183
|
}
|
|
3471
3184
|
|
|
3472
|
-
var styles$
|
|
3185
|
+
var styles$9 = {
|
|
3473
3186
|
hyperlinkWrapper: /*#__PURE__*/emotion.css({
|
|
3474
3187
|
display: 'inline',
|
|
3475
3188
|
position: 'static',
|
|
@@ -3514,13 +3227,13 @@ function EntityHyperlink(props) {
|
|
|
3514
3227
|
|
|
3515
3228
|
return /*#__PURE__*/React.createElement(f36Components.Tooltip, {
|
|
3516
3229
|
content: tooltipContent,
|
|
3517
|
-
targetWrapperClassName: styles$
|
|
3230
|
+
targetWrapperClassName: styles$9.hyperlinkWrapper,
|
|
3518
3231
|
placement: "bottom",
|
|
3519
3232
|
maxWidth: "auto"
|
|
3520
3233
|
}, /*#__PURE__*/React.createElement(f36Components.TextLink, {
|
|
3521
3234
|
as: "a",
|
|
3522
3235
|
onClick: handleClick,
|
|
3523
|
-
className: styles$
|
|
3236
|
+
className: styles$9.hyperlink,
|
|
3524
3237
|
"data-link-type": target.sys.linkType,
|
|
3525
3238
|
"data-link-id": target.sys.id
|
|
3526
3239
|
}, props.children));
|
|
@@ -3544,7 +3257,7 @@ function UrlHyperlink(props) {
|
|
|
3544
3257
|
|
|
3545
3258
|
return /*#__PURE__*/React.createElement(f36Components.Tooltip, {
|
|
3546
3259
|
content: uri,
|
|
3547
|
-
targetWrapperClassName: styles$
|
|
3260
|
+
targetWrapperClassName: styles$9.hyperlinkWrapper,
|
|
3548
3261
|
placement: "bottom",
|
|
3549
3262
|
maxWidth: "auto"
|
|
3550
3263
|
}, /*#__PURE__*/React.createElement(f36Components.TextLink, {
|
|
@@ -3552,7 +3265,7 @@ function UrlHyperlink(props) {
|
|
|
3552
3265
|
href: uri,
|
|
3553
3266
|
rel: "noopener noreferrer",
|
|
3554
3267
|
onClick: handleClick,
|
|
3555
|
-
className: styles$
|
|
3268
|
+
className: styles$9.hyperlink
|
|
3556
3269
|
}, props.children));
|
|
3557
3270
|
}
|
|
3558
3271
|
|
|
@@ -3678,12 +3391,12 @@ var createHyperlinkPlugin = function createHyperlinkPlugin(sdk) {
|
|
|
3678
3391
|
|
|
3679
3392
|
var _templateObject$4, _templateObject2$3, _templateObject3$3, _styles;
|
|
3680
3393
|
var baseStyle = /*#__PURE__*/emotion.css(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0 0 1.25rem 1.25rem;\n\n div:first-child {\n margin: 0;\n line-height: ", ";\n }\n"])), tokens.lineHeightDefault);
|
|
3681
|
-
var styles$
|
|
3394
|
+
var styles$a = (_styles = {}, _styles[Contentful.BLOCKS.UL_LIST] = /*#__PURE__*/emotion.css(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: disc;\n ul {\n list-style-type: circle;\n ul {\n list-style-type: square;\n }\n }\n "]))), _styles[Contentful.BLOCKS.OL_LIST] = /*#__PURE__*/emotion.css(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: decimal;\n ol {\n list-style-type: upper-alpha;\n ol {\n list-style-type: lower-roman;\n ol {\n list-style-type: lower-alpha;\n }\n }\n }\n "]))), _styles);
|
|
3682
3395
|
|
|
3683
3396
|
function createList(Tag, block) {
|
|
3684
3397
|
return function List(props) {
|
|
3685
3398
|
return /*#__PURE__*/React.createElement(Tag, Object.assign({}, props.attributes, {
|
|
3686
|
-
className: emotion.cx(baseStyle, styles$
|
|
3399
|
+
className: emotion.cx(baseStyle, styles$a[block])
|
|
3687
3400
|
}), props.children);
|
|
3688
3401
|
};
|
|
3689
3402
|
}
|
|
@@ -4664,14 +4377,14 @@ var ToolbarBoldButton = /*#__PURE__*/createMarkToolbarButton({
|
|
|
4664
4377
|
mark: Contentful.MARKS.BOLD,
|
|
4665
4378
|
icon: /*#__PURE__*/React.createElement(f36Icons.FormatBoldIcon, null)
|
|
4666
4379
|
});
|
|
4667
|
-
var styles$
|
|
4380
|
+
var styles$b = {
|
|
4668
4381
|
bold: /*#__PURE__*/emotion.css({
|
|
4669
4382
|
fontWeight: 600
|
|
4670
4383
|
})
|
|
4671
4384
|
};
|
|
4672
4385
|
function Bold(props) {
|
|
4673
4386
|
return /*#__PURE__*/React.createElement("strong", Object.assign({}, props.attributes, {
|
|
4674
|
-
className: styles$
|
|
4387
|
+
className: styles$b.bold
|
|
4675
4388
|
}), props.children);
|
|
4676
4389
|
}
|
|
4677
4390
|
|
|
@@ -4711,7 +4424,7 @@ var ToolbarCodeButton = /*#__PURE__*/createMarkToolbarButton({
|
|
|
4711
4424
|
mark: Contentful.MARKS.CODE,
|
|
4712
4425
|
icon: /*#__PURE__*/React.createElement(f36Icons.CodeIcon, null)
|
|
4713
4426
|
});
|
|
4714
|
-
var styles$
|
|
4427
|
+
var styles$c = {
|
|
4715
4428
|
code: /*#__PURE__*/emotion.css({
|
|
4716
4429
|
fontFamily: 'monospace',
|
|
4717
4430
|
fontSize: '.9em'
|
|
@@ -4719,7 +4432,7 @@ var styles$f = {
|
|
|
4719
4432
|
};
|
|
4720
4433
|
function Code(props) {
|
|
4721
4434
|
return /*#__PURE__*/React.createElement("code", Object.assign({}, props.attributes, {
|
|
4722
|
-
className: styles$
|
|
4435
|
+
className: styles$c.code
|
|
4723
4436
|
}), props.children);
|
|
4724
4437
|
}
|
|
4725
4438
|
var createCodePlugin = function createCodePlugin() {
|
|
@@ -4749,14 +4462,14 @@ var ToolbarItalicButton = /*#__PURE__*/createMarkToolbarButton({
|
|
|
4749
4462
|
mark: Contentful.MARKS.ITALIC,
|
|
4750
4463
|
icon: /*#__PURE__*/React.createElement(f36Icons.FormatItalicIcon, null)
|
|
4751
4464
|
});
|
|
4752
|
-
var styles$
|
|
4465
|
+
var styles$d = {
|
|
4753
4466
|
italic: /*#__PURE__*/emotion.css({
|
|
4754
4467
|
fontStyle: 'italic'
|
|
4755
4468
|
})
|
|
4756
4469
|
};
|
|
4757
4470
|
function Italic(props) {
|
|
4758
4471
|
return /*#__PURE__*/React.createElement("em", Object.assign({}, props.attributes, {
|
|
4759
|
-
className: styles$
|
|
4472
|
+
className: styles$d.italic
|
|
4760
4473
|
}), props.children);
|
|
4761
4474
|
}
|
|
4762
4475
|
var createItalicPlugin = function createItalicPlugin() {
|
|
@@ -5032,10 +4745,10 @@ var createNormalizerPlugin = function createNormalizerPlugin() {
|
|
|
5032
4745
|
};
|
|
5033
4746
|
|
|
5034
4747
|
var _templateObject$6, _styles$1;
|
|
5035
|
-
var styles$
|
|
4748
|
+
var styles$e = (_styles$1 = {}, _styles$1[Contentful.BLOCKS.PARAGRAPH] = /*#__PURE__*/emotion.css(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: ", ";\n margin-bottom: 1.5em;\n "])), tokens.lineHeightDefault), _styles$1);
|
|
5036
4749
|
function Paragraph(props) {
|
|
5037
4750
|
return /*#__PURE__*/React.createElement("div", Object.assign({}, props.attributes, {
|
|
5038
|
-
className: styles$
|
|
4751
|
+
className: styles$e[Contentful.BLOCKS.PARAGRAPH]
|
|
5039
4752
|
}), props.children);
|
|
5040
4753
|
}
|
|
5041
4754
|
|
|
@@ -5856,7 +5569,7 @@ var isTable = function isTable(node) {
|
|
|
5856
5569
|
return slate.Element.isElement(node) && node.type === Contentful.BLOCKS.TABLE;
|
|
5857
5570
|
};
|
|
5858
5571
|
|
|
5859
|
-
var styles$
|
|
5572
|
+
var styles$f = {
|
|
5860
5573
|
topRight: /*#__PURE__*/emotion.css({
|
|
5861
5574
|
position: 'absolute',
|
|
5862
5575
|
top: '6px',
|
|
@@ -5945,7 +5658,7 @@ var TableActions = function TableActions() {
|
|
|
5945
5658
|
size: "small",
|
|
5946
5659
|
variant: "transparent",
|
|
5947
5660
|
tabIndex: -1,
|
|
5948
|
-
className: styles$
|
|
5661
|
+
className: styles$f.topRight,
|
|
5949
5662
|
icon: /*#__PURE__*/React__default.createElement(f36Icons.ChevronDownIcon, null),
|
|
5950
5663
|
"aria-label": "Open table menu",
|
|
5951
5664
|
testId: "cf-table-actions-button"
|
|
@@ -6767,6 +6480,42 @@ var disableCorePlugins = {
|
|
|
6767
6480
|
eventEditor: true
|
|
6768
6481
|
};
|
|
6769
6482
|
|
|
6483
|
+
var isTextElement = function isTextElement(node) {
|
|
6484
|
+
return 'text' in node;
|
|
6485
|
+
};
|
|
6486
|
+
/**
|
|
6487
|
+
* Ensures all nodes have a child leaf text element. This should be handled by
|
|
6488
|
+
* Slate but its behavior has proven to be buggy and unpredictable.
|
|
6489
|
+
*/
|
|
6490
|
+
|
|
6491
|
+
|
|
6492
|
+
function sanitizeIncomingSlateDoc(nodes) {
|
|
6493
|
+
if (nodes === void 0) {
|
|
6494
|
+
nodes = [];
|
|
6495
|
+
}
|
|
6496
|
+
|
|
6497
|
+
return nodes.map(function (node) {
|
|
6498
|
+
var _node$children;
|
|
6499
|
+
|
|
6500
|
+
if (isTextElement(node)) {
|
|
6501
|
+
return node;
|
|
6502
|
+
}
|
|
6503
|
+
|
|
6504
|
+
if (((_node$children = node.children) == null ? void 0 : _node$children.length) === 0) {
|
|
6505
|
+
return _extends({}, node, {
|
|
6506
|
+
children: [{
|
|
6507
|
+
text: '',
|
|
6508
|
+
data: {}
|
|
6509
|
+
}]
|
|
6510
|
+
});
|
|
6511
|
+
}
|
|
6512
|
+
|
|
6513
|
+
return _extends({}, node, {
|
|
6514
|
+
children: sanitizeIncomingSlateDoc(node.children)
|
|
6515
|
+
});
|
|
6516
|
+
});
|
|
6517
|
+
}
|
|
6518
|
+
|
|
6770
6519
|
/**
|
|
6771
6520
|
* For legacy reasons, a document may not have any content at all
|
|
6772
6521
|
* e.g:
|
|
@@ -6821,16 +6570,17 @@ var setEditorContent = function setEditorContent(editor, nodes) {
|
|
|
6821
6570
|
});
|
|
6822
6571
|
};
|
|
6823
6572
|
/**
|
|
6824
|
-
* Converts a
|
|
6573
|
+
* Converts a Contentful rich text document to the corresponding slate editor
|
|
6825
6574
|
* value
|
|
6826
6575
|
*/
|
|
6827
6576
|
|
|
6828
6577
|
var documentToEditorValue = function documentToEditorValue(doc) {
|
|
6829
|
-
|
|
6578
|
+
var slateDoc = contentfulSlateJSAdapter.toSlatejsDocument({
|
|
6830
6579
|
document: hasContent(doc) ? doc : Contentful.EMPTY_DOCUMENT,
|
|
6831
6580
|
// TODO: get rid of schema, https://github.com/contentful/field-editors/pull/1065#discussion_r826723248
|
|
6832
6581
|
schema: schema
|
|
6833
6582
|
});
|
|
6583
|
+
return sanitizeIncomingSlateDoc(slateDoc);
|
|
6834
6584
|
};
|
|
6835
6585
|
var normalizeEditorValue = function normalizeEditorValue(value, options) {
|
|
6836
6586
|
var editor = plateCore.createPlateEditor(options);
|
|
@@ -6842,7 +6592,7 @@ var normalizeEditorValue = function normalizeEditorValue(value, options) {
|
|
|
6842
6592
|
};
|
|
6843
6593
|
|
|
6844
6594
|
var STYLE_EDITOR_BORDER = "1px solid " + tokens.gray400;
|
|
6845
|
-
var styles$
|
|
6595
|
+
var styles$g = {
|
|
6846
6596
|
root: /*#__PURE__*/emotion.css({
|
|
6847
6597
|
position: 'relative'
|
|
6848
6598
|
}),
|
|
@@ -6938,35 +6688,18 @@ var EmbedEntityWidget = function EmbedEntityWidget(_ref) {
|
|
|
6938
6688
|
// TODO: refine permissions check in order to account for tags in rules and then readd access.can('read', 'Asset')
|
|
6939
6689
|
|
|
6940
6690
|
var blockAssetEmbedEnabled = isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.EMBEDDED_ASSET) && canInsertBlocks;
|
|
6941
|
-
var numEnabledEmbeds = [inlineEntryEmbedEnabled, blockEntryEmbedEnabled, blockAssetEmbedEnabled].filter(Boolean).length;
|
|
6942
|
-
var shouldDisplayDropdown = numEnabledEmbeds > 1 || isDisabled; // Avoids UI glitching when switching back and forth between
|
|
6943
|
-
// different layouts
|
|
6944
|
-
|
|
6945
|
-
React__default.useEffect(function () {
|
|
6946
|
-
if (!shouldDisplayDropdown) {
|
|
6947
|
-
setEmbedDropdownOpen(false);
|
|
6948
|
-
}
|
|
6949
|
-
}, [shouldDisplayDropdown]);
|
|
6950
6691
|
var actions = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, blockEntryEmbedEnabled && /*#__PURE__*/React__default.createElement(EmbeddedEntityBlockToolbarIcon, {
|
|
6951
6692
|
isDisabled: !!isDisabled,
|
|
6952
6693
|
nodeType: Contentful.BLOCKS.EMBEDDED_ENTRY,
|
|
6953
|
-
onClose: onCloseEntityDropdown
|
|
6954
|
-
isButton: !shouldDisplayDropdown
|
|
6694
|
+
onClose: onCloseEntityDropdown
|
|
6955
6695
|
}), inlineEntryEmbedEnabled && /*#__PURE__*/React__default.createElement(ToolbarEmbeddedEntityInlineButton, {
|
|
6956
6696
|
isDisabled: !!isDisabled || isLinkActive(editor),
|
|
6957
|
-
onClose: onCloseEntityDropdown
|
|
6958
|
-
isButton: !shouldDisplayDropdown
|
|
6697
|
+
onClose: onCloseEntityDropdown
|
|
6959
6698
|
}), blockAssetEmbedEnabled && /*#__PURE__*/React__default.createElement(EmbeddedEntityBlockToolbarIcon, {
|
|
6960
6699
|
isDisabled: !!isDisabled,
|
|
6961
6700
|
nodeType: Contentful.BLOCKS.EMBEDDED_ASSET,
|
|
6962
|
-
onClose: onCloseEntityDropdown
|
|
6963
|
-
isButton: !shouldDisplayDropdown
|
|
6701
|
+
onClose: onCloseEntityDropdown
|
|
6964
6702
|
}));
|
|
6965
|
-
|
|
6966
|
-
if (!shouldDisplayDropdown) {
|
|
6967
|
-
return actions;
|
|
6968
|
-
}
|
|
6969
|
-
|
|
6970
6703
|
return /*#__PURE__*/React__default.createElement(EmbeddedEntityDropdownButton, {
|
|
6971
6704
|
isDisabled: isDisabled,
|
|
6972
6705
|
onClose: onCloseEntityDropdown,
|
|
@@ -6975,7 +6708,7 @@ var EmbedEntityWidget = function EmbedEntityWidget(_ref) {
|
|
|
6975
6708
|
}, actions);
|
|
6976
6709
|
};
|
|
6977
6710
|
|
|
6978
|
-
var styles$
|
|
6711
|
+
var styles$h = {
|
|
6979
6712
|
toolbar: /*#__PURE__*/emotion.css({
|
|
6980
6713
|
border: "1px solid " + tokens.gray400,
|
|
6981
6714
|
backgroundColor: tokens.gray100,
|
|
@@ -7020,14 +6753,14 @@ var Toolbar = function Toolbar(_ref) {
|
|
|
7020
6753
|
var shouldDisableTables = isDisabled || !canInsertBlocks || isListSelected || isBlockquoteSelected;
|
|
7021
6754
|
return /*#__PURE__*/React__default.createElement(f36Components.Flex, {
|
|
7022
6755
|
testId: "toolbar",
|
|
7023
|
-
className: styles$
|
|
6756
|
+
className: styles$h.toolbar,
|
|
7024
6757
|
alignItems: "center"
|
|
7025
6758
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
7026
|
-
className: styles$
|
|
6759
|
+
className: styles$h.formattingOptionsWrapper
|
|
7027
6760
|
}, /*#__PURE__*/React__default.createElement(ToolbarHeadingButton, {
|
|
7028
6761
|
isDisabled: isDisabled || !canInsertBlocks
|
|
7029
6762
|
}), validationInfo.isAnyMarkEnabled && /*#__PURE__*/React__default.createElement("span", {
|
|
7030
|
-
className: styles$
|
|
6763
|
+
className: styles$h.divider
|
|
7031
6764
|
}), isMarkEnabled(sdk.field, Contentful.MARKS.BOLD) && /*#__PURE__*/React__default.createElement(ToolbarBoldButton, {
|
|
7032
6765
|
isDisabled: isDisabled
|
|
7033
6766
|
}), isMarkEnabled(sdk.field, Contentful.MARKS.ITALIC) && /*#__PURE__*/React__default.createElement(ToolbarItalicButton, {
|
|
@@ -7037,11 +6770,11 @@ var Toolbar = function Toolbar(_ref) {
|
|
|
7037
6770
|
}), isMarkEnabled(sdk.field, Contentful.MARKS.CODE) && /*#__PURE__*/React__default.createElement(ToolbarCodeButton, {
|
|
7038
6771
|
isDisabled: isDisabled
|
|
7039
6772
|
}), validationInfo.isAnyHyperlinkEnabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
|
|
7040
|
-
className: styles$
|
|
6773
|
+
className: styles$h.divider
|
|
7041
6774
|
}), /*#__PURE__*/React__default.createElement(ToolbarHyperlinkButton, {
|
|
7042
6775
|
isDisabled: isDisabled
|
|
7043
6776
|
})), validationInfo.isAnyBlockFormattingEnabled && /*#__PURE__*/React__default.createElement("span", {
|
|
7044
|
-
className: styles$
|
|
6777
|
+
className: styles$h.divider
|
|
7045
6778
|
}), /*#__PURE__*/React__default.createElement(ToolbarListButton, {
|
|
7046
6779
|
isDisabled: isDisabled || !canInsertBlocks
|
|
7047
6780
|
}), isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.QUOTE) && /*#__PURE__*/React__default.createElement(ToolbarQuoteButton, {
|
|
@@ -7051,7 +6784,7 @@ var Toolbar = function Toolbar(_ref) {
|
|
|
7051
6784
|
}), isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.TABLE) && /*#__PURE__*/React__default.createElement(ToolbarTableButton, {
|
|
7052
6785
|
isDisabled: shouldDisableTables
|
|
7053
6786
|
})), /*#__PURE__*/React__default.createElement("div", {
|
|
7054
|
-
className: styles$
|
|
6787
|
+
className: styles$h.embedActionsWrapper
|
|
7055
6788
|
}, /*#__PURE__*/React__default.createElement(EmbedEntityWidget, {
|
|
7056
6789
|
isDisabled: isDisabled,
|
|
7057
6790
|
canInsertBlocks: canInsertBlocks
|
|
@@ -7076,7 +6809,7 @@ function getValidationInfo(field) {
|
|
|
7076
6809
|
}
|
|
7077
6810
|
|
|
7078
6811
|
var _templateObject$b;
|
|
7079
|
-
var styles$
|
|
6812
|
+
var styles$i = {
|
|
7080
6813
|
nativeSticky: /*#__PURE__*/emotion.css(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: -webkit-sticky;\n position: sticky;\n top: -1px;\n z-index: 2;\n "])))
|
|
7081
6814
|
};
|
|
7082
6815
|
|
|
@@ -7084,7 +6817,7 @@ var StickyToolbarWrapper = function StickyToolbarWrapper(_ref) {
|
|
|
7084
6817
|
var isDisabled = _ref.isDisabled,
|
|
7085
6818
|
children = _ref.children;
|
|
7086
6819
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
7087
|
-
className: isDisabled ? '' : styles$
|
|
6820
|
+
className: isDisabled ? '' : styles$i.nativeSticky
|
|
7088
6821
|
}, children);
|
|
7089
6822
|
};
|
|
7090
6823
|
|
|
@@ -7179,9 +6912,9 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
|
|
|
7179
6912
|
setPendingExternalUpdate(true);
|
|
7180
6913
|
setEditorContent(editor, documentToEditorValue(props.value));
|
|
7181
6914
|
}, [props.value, id]);
|
|
7182
|
-
var classNames = emotion.cx(styles$
|
|
6915
|
+
var classNames = emotion.cx(styles$g.editor, props.minHeight !== undefined ? emotion.css({
|
|
7183
6916
|
minHeight: props.minHeight
|
|
7184
|
-
}) : undefined, props.isDisabled ? styles$
|
|
6917
|
+
}) : undefined, props.isDisabled ? styles$g.disabled : styles$g.enabled, props.isToolbarHidden && styles$g.hiddenToolbar);
|
|
7185
6918
|
React.useEffect(function () {
|
|
7186
6919
|
if (!isFirstRender) {
|
|
7187
6920
|
return;
|
|
@@ -7197,7 +6930,7 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
|
|
|
7197
6930
|
}, /*#__PURE__*/React__default.createElement(ContentfulEditorIdProvider, {
|
|
7198
6931
|
value: id
|
|
7199
6932
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
7200
|
-
className: styles$
|
|
6933
|
+
className: styles$g.root,
|
|
7201
6934
|
"data-test-id": "rich-text-editor"
|
|
7202
6935
|
}, /*#__PURE__*/React__default.createElement(plateCore.Plate, {
|
|
7203
6936
|
id: id,
|