@contentful/field-editor-rich-text 2.2.0 → 2.3.1
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/CHANGELOG.md +16 -0
- package/dist/field-editor-rich-text.cjs.development.js +288 -252
- 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 +288 -252
- package/dist/field-editor-rich-text.esm.js.map +1 -1
- package/dist/plugins/CommandPalette/components/CommandList.d.ts +4 -3
- package/dist/plugins/CommandPalette/useCommands.d.ts +2 -2
- package/package.json +6 -4
|
@@ -9,15 +9,17 @@ import noop from 'lodash-es/noop';
|
|
|
9
9
|
import { createDeserializeDocxPlugin } from '@udecode/plate-serializer-docx';
|
|
10
10
|
import { createSoftBreakPlugin as createSoftBreakPlugin$1, createExitBreakPlugin as createExitBreakPlugin$1 } from '@udecode/plate-break';
|
|
11
11
|
import { createResetNodePlugin as createResetNodePlugin$1, onKeyDownResetNode, SIMULATE_BACKSPACE } from '@udecode/plate-reset-node';
|
|
12
|
-
import {
|
|
13
|
-
import { ReactEditor, useSelected, useReadOnly, useFocused } from 'slate-react';
|
|
12
|
+
import { usePopper } from 'react-popper';
|
|
14
13
|
import { ScreenReaderOnly, Popover, SectionHeading, Stack, Flex, AssetCard, EntryCard, Menu, Icon, InlineEntryCard, MenuItem, Text as Text$1, Button, Tooltip, ModalContent, Form, FormControl, TextInput, Select, FormLabel, TextLink, ModalControls, IconButton } from '@contentful/f36-components';
|
|
14
|
+
import { Portal } from '@contentful/f36-utils';
|
|
15
15
|
import constate from 'constate';
|
|
16
16
|
import isHotkey from 'is-hotkey';
|
|
17
|
-
import
|
|
17
|
+
import { Text, Element, Editor, Transforms, Range, Path, Node, Point } from 'slate';
|
|
18
|
+
import { ReactEditor, useSelected, useReadOnly, useFocused } from 'slate-react';
|
|
18
19
|
import find from 'lodash-es/find';
|
|
19
20
|
import flow from 'lodash-es/flow';
|
|
20
21
|
import get from 'lodash-es/get';
|
|
22
|
+
import tokens from '@contentful/f36-tokens';
|
|
21
23
|
import { AssetIcon, EmbeddedEntryBlockIcon, ClockIcon, EmbeddedEntryInlineIcon, ChevronDownIcon, HorizontalRuleIcon, LinkIcon, ListBulletedIcon, ListNumberedIcon, FormatBoldIcon, CodeIcon, FormatItalicIcon, FormatUnderlinedIcon, QuoteIcon, TableIcon, PlusIcon } from '@contentful/f36-icons';
|
|
22
24
|
import { getListTypes, ELEMENT_LIC, getListItemEntry, isListNested, moveListItemUp, ELEMENT_LI, unwrapList as unwrapList$1, removeFirstListItem, removeListItem, deleteForwardList, deleteFragmentList, normalizeList, createListPlugin as createListPlugin$1, ELEMENT_UL, ELEMENT_OL } from '@udecode/plate-list';
|
|
23
25
|
import castArray from 'lodash-es/castArray';
|
|
@@ -334,6 +336,131 @@ var createResetNodePlugin = function createResetNodePlugin() {
|
|
|
334
336
|
});
|
|
335
337
|
};
|
|
336
338
|
|
|
339
|
+
/**
|
|
340
|
+
* Trim leading slash character if found. Bails otherwise.
|
|
341
|
+
*
|
|
342
|
+
* @example
|
|
343
|
+
* trimLeadingSlash("/my query") // --> "my query"
|
|
344
|
+
*/
|
|
345
|
+
function trimLeadingSlash(text) {
|
|
346
|
+
if (!text.startsWith('/')) {
|
|
347
|
+
return text;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
return text.slice(1);
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
function useSdk(_ref) {
|
|
354
|
+
var sdk = _ref.sdk;
|
|
355
|
+
var sdkMemo = useMemo(function () {
|
|
356
|
+
return sdk;
|
|
357
|
+
}, []); // eslint-disable-line -- TODO: explain this disable
|
|
358
|
+
|
|
359
|
+
return sdkMemo;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
var _constate = /*#__PURE__*/constate(useSdk),
|
|
363
|
+
SdkProvider = _constate[0],
|
|
364
|
+
useSdkContext = _constate[1];
|
|
365
|
+
|
|
366
|
+
var useCommandList = function useCommandList(commandItems, container) {
|
|
367
|
+
var _React$useState = useState(function () {
|
|
368
|
+
// select the first item on initial render
|
|
369
|
+
if ('group' in commandItems[0]) {
|
|
370
|
+
return commandItems[0].commands[0].id;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
return commandItems[0].id;
|
|
374
|
+
}),
|
|
375
|
+
selectedItem = _React$useState[0],
|
|
376
|
+
setSelectedItem = _React$useState[1];
|
|
377
|
+
|
|
378
|
+
var _React$useState2 = useState(commandItems.length > 0),
|
|
379
|
+
isOpen = _React$useState2[0],
|
|
380
|
+
setIsOpen = _React$useState2[1];
|
|
381
|
+
|
|
382
|
+
useEffect(function () {
|
|
383
|
+
if (!container.current) {
|
|
384
|
+
return;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
var buttons = Array.from(container.current.querySelectorAll('button'));
|
|
388
|
+
var currBtn = buttons.find(function (btn) {
|
|
389
|
+
return btn.id === selectedItem;
|
|
390
|
+
});
|
|
391
|
+
var currIndex = currBtn ? buttons.indexOf(currBtn) : 0;
|
|
392
|
+
var shouldSelectFirstBtn = !currBtn && buttons.length;
|
|
393
|
+
|
|
394
|
+
if (shouldSelectFirstBtn) {
|
|
395
|
+
setSelectedItem(buttons[0].id);
|
|
396
|
+
buttons[0].scrollIntoView({
|
|
397
|
+
block: 'nearest',
|
|
398
|
+
inline: 'start'
|
|
399
|
+
});
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
function handleKeyDown(event) {
|
|
403
|
+
if (isHotkey('up', event)) {
|
|
404
|
+
event.preventDefault();
|
|
405
|
+
|
|
406
|
+
if (currIndex === 0) {
|
|
407
|
+
return;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
setSelectedItem(buttons[currIndex - 1].id);
|
|
411
|
+
buttons[currIndex - 1].scrollIntoView({
|
|
412
|
+
block: 'nearest',
|
|
413
|
+
inline: 'start'
|
|
414
|
+
});
|
|
415
|
+
} else if (isHotkey('down', event)) {
|
|
416
|
+
event.preventDefault();
|
|
417
|
+
|
|
418
|
+
if (currIndex === buttons.length - 1) {
|
|
419
|
+
return;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
setSelectedItem(buttons[currIndex + 1].id);
|
|
423
|
+
buttons[currIndex + 1].scrollIntoView({
|
|
424
|
+
block: 'nearest',
|
|
425
|
+
inline: 'start'
|
|
426
|
+
});
|
|
427
|
+
} else if (isHotkey('enter', event)) {
|
|
428
|
+
event.preventDefault();
|
|
429
|
+
|
|
430
|
+
if (currBtn) {
|
|
431
|
+
setSelectedItem('');
|
|
432
|
+
currBtn.click();
|
|
433
|
+
}
|
|
434
|
+
} //TODO: handle shift+enter, which must be detected using separate events
|
|
435
|
+
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
if (commandItems.length) {
|
|
439
|
+
window.addEventListener('keydown', handleKeyDown);
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
return function () {
|
|
443
|
+
return window.removeEventListener('keydown', handleKeyDown);
|
|
444
|
+
};
|
|
445
|
+
}, [commandItems, container, selectedItem]);
|
|
446
|
+
useEffect(function () {
|
|
447
|
+
var handleMousedown = function handleMousedown(event) {
|
|
448
|
+
if (container.current && !container.current.contains(event.target)) {
|
|
449
|
+
setIsOpen(false);
|
|
450
|
+
}
|
|
451
|
+
};
|
|
452
|
+
|
|
453
|
+
document.addEventListener('mousedown', handleMousedown);
|
|
454
|
+
return function () {
|
|
455
|
+
document.removeEventListener('mousedown', handleMousedown);
|
|
456
|
+
};
|
|
457
|
+
}, [container]);
|
|
458
|
+
return {
|
|
459
|
+
selectedItem: selectedItem,
|
|
460
|
+
isOpen: isOpen
|
|
461
|
+
};
|
|
462
|
+
};
|
|
463
|
+
|
|
337
464
|
var IS_SAFARI = typeof navigator !== 'undefined' && /*#__PURE__*/ /Version\/[\d.]+.*Safari/.test(navigator.userAgent);
|
|
338
465
|
var IS_CHROME = /*#__PURE__*/ /(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9.]+)(:?\s|$)/.test(navigator.userAgent);
|
|
339
466
|
|
|
@@ -538,129 +665,36 @@ function toggleElement(editor, options, editorOptions) {
|
|
|
538
665
|
});
|
|
539
666
|
}
|
|
540
667
|
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
*/
|
|
547
|
-
function trimLeadingSlash(text) {
|
|
548
|
-
if (!text.startsWith('/')) {
|
|
549
|
-
return text;
|
|
550
|
-
}
|
|
551
|
-
|
|
552
|
-
return text.slice(1);
|
|
553
|
-
}
|
|
554
|
-
|
|
555
|
-
function useSdk(_ref) {
|
|
556
|
-
var sdk = _ref.sdk;
|
|
557
|
-
var sdkMemo = useMemo(function () {
|
|
558
|
-
return sdk;
|
|
559
|
-
}, []); // eslint-disable-line -- TODO: explain this disable
|
|
560
|
-
|
|
561
|
-
return sdkMemo;
|
|
562
|
-
}
|
|
563
|
-
|
|
564
|
-
var _constate = /*#__PURE__*/constate(useSdk),
|
|
565
|
-
SdkProvider = _constate[0],
|
|
566
|
-
useSdkContext = _constate[1];
|
|
567
|
-
|
|
568
|
-
var useCommandList = function useCommandList(commandItems, container) {
|
|
569
|
-
var _React$useState = useState(function () {
|
|
570
|
-
// select the first item on initial render
|
|
571
|
-
if ('group' in commandItems[0]) {
|
|
572
|
-
return commandItems[0].commands[0].id;
|
|
573
|
-
}
|
|
574
|
-
|
|
575
|
-
return commandItems[0].id;
|
|
576
|
-
}),
|
|
577
|
-
selectedItem = _React$useState[0],
|
|
578
|
-
setSelectedItem = _React$useState[1];
|
|
579
|
-
|
|
580
|
-
var _React$useState2 = useState(commandItems.length > 0),
|
|
581
|
-
isOpen = _React$useState2[0],
|
|
582
|
-
setIsOpen = _React$useState2[1];
|
|
583
|
-
|
|
584
|
-
useEffect(function () {
|
|
585
|
-
if (!(container != null && container.current)) {
|
|
586
|
-
return;
|
|
587
|
-
}
|
|
588
|
-
|
|
589
|
-
var buttons = Array.from(container.current.querySelectorAll('button'));
|
|
590
|
-
var currBtn = buttons.find(function (btn) {
|
|
591
|
-
return btn.id === selectedItem;
|
|
592
|
-
});
|
|
593
|
-
var currIndex = currBtn ? buttons.indexOf(currBtn) : 0;
|
|
594
|
-
var shouldSelectFirstBtn = !currBtn && buttons.length;
|
|
595
|
-
|
|
596
|
-
if (shouldSelectFirstBtn) {
|
|
597
|
-
setSelectedItem(buttons[0].id);
|
|
598
|
-
buttons[0].scrollIntoView({
|
|
599
|
-
block: 'nearest',
|
|
600
|
-
inline: 'start'
|
|
601
|
-
});
|
|
602
|
-
}
|
|
603
|
-
|
|
604
|
-
function handleKeyDown(event) {
|
|
605
|
-
if (isHotkey('up', event)) {
|
|
606
|
-
event.preventDefault();
|
|
607
|
-
|
|
608
|
-
if (currIndex === 0) {
|
|
609
|
-
return;
|
|
610
|
-
}
|
|
611
|
-
|
|
612
|
-
setSelectedItem(buttons[currIndex - 1].id);
|
|
613
|
-
buttons[currIndex - 1].scrollIntoView({
|
|
614
|
-
block: 'nearest',
|
|
615
|
-
inline: 'start'
|
|
616
|
-
});
|
|
617
|
-
} else if (isHotkey('down', event)) {
|
|
618
|
-
event.preventDefault();
|
|
619
|
-
|
|
620
|
-
if (currIndex === buttons.length - 1) {
|
|
621
|
-
return;
|
|
622
|
-
}
|
|
623
|
-
|
|
624
|
-
setSelectedItem(buttons[currIndex + 1].id);
|
|
625
|
-
buttons[currIndex + 1].scrollIntoView({
|
|
626
|
-
block: 'nearest',
|
|
627
|
-
inline: 'start'
|
|
628
|
-
});
|
|
629
|
-
} else if (isHotkey('enter', event)) {
|
|
630
|
-
event.preventDefault();
|
|
668
|
+
var VALIDATIONS = {
|
|
669
|
+
ENABLED_MARKS: 'enabledMarks',
|
|
670
|
+
ENABLED_NODE_TYPES: 'enabledNodeTypes'
|
|
671
|
+
};
|
|
672
|
+
var DEFAULT_ENABLED_NODE_TYPES = [BLOCKS.DOCUMENT, BLOCKS.PARAGRAPH, 'text'];
|
|
631
673
|
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
674
|
+
var getRichTextValidation = function getRichTextValidation(field, validationType) {
|
|
675
|
+
return flow(function (v) {
|
|
676
|
+
return find(v, validationType);
|
|
677
|
+
}, function (v) {
|
|
678
|
+
return get(v, validationType);
|
|
679
|
+
})(field.validations);
|
|
680
|
+
};
|
|
637
681
|
|
|
638
|
-
|
|
682
|
+
var isFormattingOptionEnabled = function isFormattingOptionEnabled(field, validationType, nodeTypeOrMark) {
|
|
683
|
+
var enabledFormattings = getRichTextValidation(field, validationType); // TODO: In the future, validations will always be opt-in. In that case
|
|
684
|
+
// we don't need this step.
|
|
639
685
|
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
686
|
+
if (enabledFormattings === undefined) {
|
|
687
|
+
return true;
|
|
688
|
+
}
|
|
643
689
|
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
};
|
|
647
|
-
}, [commandItems, container, selectedItem]);
|
|
648
|
-
useEffect(function () {
|
|
649
|
-
var handleClick = function handleClick(event) {
|
|
650
|
-
if (container.current && !container.current.contains(event.target)) {
|
|
651
|
-
setIsOpen(false);
|
|
652
|
-
}
|
|
653
|
-
};
|
|
690
|
+
return DEFAULT_ENABLED_NODE_TYPES.concat(enabledFormattings).includes(nodeTypeOrMark);
|
|
691
|
+
};
|
|
654
692
|
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
return {
|
|
661
|
-
selectedItem: selectedItem,
|
|
662
|
-
isOpen: isOpen
|
|
663
|
-
};
|
|
693
|
+
var isNodeTypeEnabled = function isNodeTypeEnabled(field, nodeType) {
|
|
694
|
+
return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_NODE_TYPES, nodeType);
|
|
695
|
+
};
|
|
696
|
+
var isMarkEnabled = function isMarkEnabled(field, mark) {
|
|
697
|
+
return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_MARKS, mark);
|
|
664
698
|
};
|
|
665
699
|
|
|
666
700
|
var COMMAND_PROMPT = 'command-prompt';
|
|
@@ -1572,38 +1606,124 @@ var removeQuery = function removeQuery(editor) {
|
|
|
1572
1606
|
|
|
1573
1607
|
var useCommands = function useCommands(sdk, query, editor) {
|
|
1574
1608
|
var contentTypes = sdk.space.getCachedContentTypes();
|
|
1609
|
+
var canInsertBlocks = !isNodeTypeSelected(editor, BLOCKS.TABLE);
|
|
1610
|
+
var inlineAllowed = isNodeTypeEnabled(sdk.field, INLINES.EMBEDDED_ENTRY);
|
|
1611
|
+
var entriesAllowed = isNodeTypeEnabled(sdk.field, BLOCKS.EMBEDDED_ENTRY) && canInsertBlocks;
|
|
1612
|
+
var assetsAllowed = isNodeTypeEnabled(sdk.field, BLOCKS.EMBEDDED_ASSET) && canInsertBlocks;
|
|
1575
1613
|
|
|
1576
1614
|
var _useState = useState(function () {
|
|
1577
|
-
var
|
|
1615
|
+
var getEmbedEntry = function getEmbedEntry(contentType) {
|
|
1616
|
+
return {
|
|
1617
|
+
id: contentType.sys.id,
|
|
1618
|
+
label: "Embed " + contentType.name,
|
|
1619
|
+
callback: function callback() {
|
|
1620
|
+
fetchEntries(sdk, contentType, query).then(function (entries) {
|
|
1621
|
+
removeQuery(editor);
|
|
1622
|
+
|
|
1623
|
+
if (!entries.length) {
|
|
1624
|
+
setCommands([{
|
|
1625
|
+
id: 'no-results',
|
|
1626
|
+
label: 'No results'
|
|
1627
|
+
}]);
|
|
1628
|
+
} else {
|
|
1629
|
+
setCommands(entries.map(function (entry) {
|
|
1630
|
+
return {
|
|
1631
|
+
id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
|
|
1632
|
+
label: entry.displayTitle,
|
|
1633
|
+
callback: function callback() {
|
|
1634
|
+
removeCommand(editor);
|
|
1635
|
+
|
|
1636
|
+
if (editor.selection) {
|
|
1637
|
+
var selection = editor.selection;
|
|
1638
|
+
editor.insertSoftBreak();
|
|
1639
|
+
insertBlock(editor, BLOCKS.EMBEDDED_ENTRY, entry.entry);
|
|
1640
|
+
Transforms.select(editor, selection);
|
|
1641
|
+
editor.tracking.onCommandPaletteAction('insert', {
|
|
1642
|
+
nodeType: BLOCKS.EMBEDDED_ENTRY
|
|
1643
|
+
});
|
|
1644
|
+
}
|
|
1645
|
+
}
|
|
1646
|
+
};
|
|
1647
|
+
}));
|
|
1648
|
+
}
|
|
1649
|
+
});
|
|
1650
|
+
}
|
|
1651
|
+
};
|
|
1652
|
+
};
|
|
1653
|
+
|
|
1654
|
+
var getEmbedInline = function getEmbedInline(contentType) {
|
|
1655
|
+
return {
|
|
1656
|
+
id: contentType.sys.id + "-inline",
|
|
1657
|
+
label: "Embed " + contentType.name + " - Inline",
|
|
1658
|
+
callback: function callback() {
|
|
1659
|
+
fetchEntries(sdk, contentType, query).then(function (entries) {
|
|
1660
|
+
removeQuery(editor);
|
|
1661
|
+
|
|
1662
|
+
if (!entries.length) {
|
|
1663
|
+
setCommands([{
|
|
1664
|
+
id: 'no-results',
|
|
1665
|
+
label: 'No results'
|
|
1666
|
+
}]);
|
|
1667
|
+
} else {
|
|
1668
|
+
setCommands(entries.map(function (entry) {
|
|
1669
|
+
return {
|
|
1670
|
+
id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
|
|
1671
|
+
label: entry.displayTitle,
|
|
1672
|
+
callback: function callback() {
|
|
1673
|
+
var inlineNode = createInlineEntryNode(entry.id);
|
|
1674
|
+
removeCommand(editor);
|
|
1675
|
+
Transforms.insertNodes(editor, inlineNode);
|
|
1676
|
+
editor.insertText('');
|
|
1677
|
+
editor.tracking.onCommandPaletteAction('insert', {
|
|
1678
|
+
nodeType: INLINES.EMBEDDED_ENTRY
|
|
1679
|
+
});
|
|
1680
|
+
}
|
|
1681
|
+
};
|
|
1682
|
+
}));
|
|
1683
|
+
}
|
|
1684
|
+
});
|
|
1685
|
+
}
|
|
1686
|
+
};
|
|
1687
|
+
};
|
|
1688
|
+
|
|
1689
|
+
var contentTypeCommands = entriesAllowed || inlineAllowed ? contentTypes.map(function (contentType) {
|
|
1578
1690
|
return {
|
|
1579
1691
|
group: contentType.name,
|
|
1692
|
+
commands: entriesAllowed && inlineAllowed ? [getEmbedEntry(contentType), getEmbedInline(contentType)] : entriesAllowed ? [getEmbedEntry(contentType)] : [getEmbedInline(contentType)]
|
|
1693
|
+
};
|
|
1694
|
+
}) : [];
|
|
1695
|
+
|
|
1696
|
+
if (assetsAllowed) {
|
|
1697
|
+
var assetCommand = {
|
|
1698
|
+
group: 'Assets',
|
|
1580
1699
|
commands: [{
|
|
1581
|
-
id:
|
|
1582
|
-
label:
|
|
1700
|
+
id: 'embed-asset',
|
|
1701
|
+
label: 'Embed Asset',
|
|
1583
1702
|
callback: function callback() {
|
|
1584
|
-
|
|
1703
|
+
fetchAssets(sdk, query).then(function (assets) {
|
|
1585
1704
|
removeQuery(editor);
|
|
1586
1705
|
|
|
1587
|
-
if (!
|
|
1706
|
+
if (!assets.length) {
|
|
1588
1707
|
setCommands([{
|
|
1589
1708
|
id: 'no-results',
|
|
1590
1709
|
label: 'No results'
|
|
1591
1710
|
}]);
|
|
1592
1711
|
} else {
|
|
1593
|
-
setCommands(
|
|
1712
|
+
setCommands(assets.map(function (asset) {
|
|
1594
1713
|
return {
|
|
1595
|
-
id:
|
|
1596
|
-
label:
|
|
1714
|
+
id: asset.id + "-" + asset.displayTitle.replace(/\W+/g, '-').toLowerCase(),
|
|
1715
|
+
label: asset.displayTitle,
|
|
1716
|
+
thumbnail: asset.thumbnail,
|
|
1597
1717
|
callback: function callback() {
|
|
1598
1718
|
removeCommand(editor);
|
|
1599
1719
|
|
|
1600
1720
|
if (editor.selection) {
|
|
1601
1721
|
var selection = editor.selection;
|
|
1602
1722
|
editor.insertSoftBreak();
|
|
1603
|
-
insertBlock(editor, BLOCKS.
|
|
1723
|
+
insertBlock(editor, BLOCKS.EMBEDDED_ASSET, asset.entity);
|
|
1604
1724
|
Transforms.select(editor, selection);
|
|
1605
1725
|
editor.tracking.onCommandPaletteAction('insert', {
|
|
1606
|
-
nodeType: BLOCKS.
|
|
1726
|
+
nodeType: BLOCKS.EMBEDDED_ASSET
|
|
1607
1727
|
});
|
|
1608
1728
|
}
|
|
1609
1729
|
}
|
|
@@ -1612,81 +1732,12 @@ var useCommands = function useCommands(sdk, query, editor) {
|
|
|
1612
1732
|
}
|
|
1613
1733
|
});
|
|
1614
1734
|
}
|
|
1615
|
-
}, {
|
|
1616
|
-
id: contentType.sys.id + "-inline",
|
|
1617
|
-
label: "Embed " + contentType.name + " - Inline",
|
|
1618
|
-
callback: function callback() {
|
|
1619
|
-
fetchEntries(sdk, contentType, query).then(function (entries) {
|
|
1620
|
-
removeQuery(editor);
|
|
1621
|
-
|
|
1622
|
-
if (!entries.length) {
|
|
1623
|
-
setCommands([{
|
|
1624
|
-
id: 'no-results',
|
|
1625
|
-
label: 'No results'
|
|
1626
|
-
}]);
|
|
1627
|
-
} else {
|
|
1628
|
-
setCommands(entries.map(function (entry) {
|
|
1629
|
-
return {
|
|
1630
|
-
id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
|
|
1631
|
-
label: entry.displayTitle,
|
|
1632
|
-
callback: function callback() {
|
|
1633
|
-
var inlineNode = createInlineEntryNode(entry.id);
|
|
1634
|
-
removeCommand(editor);
|
|
1635
|
-
Transforms.insertNodes(editor, inlineNode);
|
|
1636
|
-
editor.insertText('');
|
|
1637
|
-
editor.tracking.onCommandPaletteAction('insert', {
|
|
1638
|
-
nodeType: INLINES.EMBEDDED_ENTRY
|
|
1639
|
-
});
|
|
1640
|
-
}
|
|
1641
|
-
};
|
|
1642
|
-
}));
|
|
1643
|
-
}
|
|
1644
|
-
});
|
|
1645
|
-
}
|
|
1646
1735
|
}]
|
|
1647
1736
|
};
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
group: 'Assets',
|
|
1651
|
-
commands: [{
|
|
1652
|
-
id: 'embed-asset',
|
|
1653
|
-
label: 'Embed Asset',
|
|
1654
|
-
callback: function callback() {
|
|
1655
|
-
fetchAssets(sdk, query).then(function (assets) {
|
|
1656
|
-
removeQuery(editor);
|
|
1657
|
-
|
|
1658
|
-
if (!assets.length) {
|
|
1659
|
-
setCommands([{
|
|
1660
|
-
id: 'no-results',
|
|
1661
|
-
label: 'No results'
|
|
1662
|
-
}]);
|
|
1663
|
-
} else {
|
|
1664
|
-
setCommands(assets.map(function (asset) {
|
|
1665
|
-
return {
|
|
1666
|
-
id: asset.id + "-" + asset.displayTitle.replace(/\W+/g, '-').toLowerCase(),
|
|
1667
|
-
label: asset.displayTitle,
|
|
1668
|
-
thumbnail: asset.thumbnail,
|
|
1669
|
-
callback: function callback() {
|
|
1670
|
-
removeCommand(editor);
|
|
1737
|
+
return [].concat(contentTypeCommands, [assetCommand]);
|
|
1738
|
+
}
|
|
1671
1739
|
|
|
1672
|
-
|
|
1673
|
-
var selection = editor.selection;
|
|
1674
|
-
editor.insertSoftBreak();
|
|
1675
|
-
insertBlock(editor, BLOCKS.EMBEDDED_ASSET, asset.entity);
|
|
1676
|
-
Transforms.select(editor, selection);
|
|
1677
|
-
editor.tracking.onCommandPaletteAction('insert', {
|
|
1678
|
-
nodeType: BLOCKS.EMBEDDED_ASSET
|
|
1679
|
-
});
|
|
1680
|
-
}
|
|
1681
|
-
}
|
|
1682
|
-
};
|
|
1683
|
-
}));
|
|
1684
|
-
}
|
|
1685
|
-
});
|
|
1686
|
-
}
|
|
1687
|
-
}]
|
|
1688
|
-
};
|
|
1689
|
-
return [].concat(contentTypeCommands, [assetCommand]);
|
|
1740
|
+
return contentTypeCommands;
|
|
1690
1741
|
}),
|
|
1691
1742
|
commands = _useState[0],
|
|
1692
1743
|
setCommands = _useState[1];
|
|
@@ -1772,7 +1823,6 @@ var styles = {
|
|
|
1772
1823
|
margin: tokens.spacingXs + " 0"
|
|
1773
1824
|
}),
|
|
1774
1825
|
menuHeader: /*#__PURE__*/css({
|
|
1775
|
-
position: 'sticky',
|
|
1776
1826
|
zIndex: tokens.zIndexDefault,
|
|
1777
1827
|
top: 0,
|
|
1778
1828
|
backgroundColor: tokens.gray100,
|
|
@@ -1871,25 +1921,34 @@ var CommandListItems = function CommandListItems(_ref4) {
|
|
|
1871
1921
|
|
|
1872
1922
|
var CommandList = function CommandList(_ref5) {
|
|
1873
1923
|
var query = _ref5.query,
|
|
1874
|
-
editor = _ref5.editor
|
|
1924
|
+
editor = _ref5.editor,
|
|
1925
|
+
textContainer = _ref5.textContainer;
|
|
1875
1926
|
var sdk = useSdkContext();
|
|
1876
|
-
var
|
|
1927
|
+
var popoverContainer = useRef(null);
|
|
1928
|
+
var popper = usePopper(textContainer, popoverContainer == null ? void 0 : popoverContainer.current, {
|
|
1929
|
+
placement: 'bottom-start'
|
|
1930
|
+
});
|
|
1877
1931
|
var commandItems = useCommands(sdk, query, editor);
|
|
1878
1932
|
|
|
1879
|
-
var _useCommandList = useCommandList(commandItems,
|
|
1933
|
+
var _useCommandList = useCommandList(commandItems, popoverContainer),
|
|
1880
1934
|
selectedItem = _useCommandList.selectedItem,
|
|
1881
1935
|
isOpen = _useCommandList.isOpen;
|
|
1882
1936
|
|
|
1937
|
+
if (!commandItems.length) {
|
|
1938
|
+
return null;
|
|
1939
|
+
}
|
|
1940
|
+
|
|
1883
1941
|
return /*#__PURE__*/createElement("div", {
|
|
1884
1942
|
className: styles.container,
|
|
1885
1943
|
tabIndex: -1,
|
|
1886
|
-
ref: container,
|
|
1887
1944
|
contentEditable: false
|
|
1888
1945
|
}, /*#__PURE__*/createElement("div", {
|
|
1889
1946
|
role: "alert"
|
|
1890
|
-
}, /*#__PURE__*/createElement(ScreenReaderOnly, null, "Richtext commands. Currently focused item: ", selectedItem, ". Press ", /*#__PURE__*/createElement("kbd", null, "enter"), " to select, ", /*#__PURE__*/createElement("kbd", null, "arrows"), " to navigate, ", /*#__PURE__*/createElement("kbd", null, "escape"), " to close.")), /*#__PURE__*/createElement("div", {
|
|
1891
|
-
"aria-hidden": true
|
|
1892
|
-
|
|
1947
|
+
}, /*#__PURE__*/createElement(ScreenReaderOnly, null, "Richtext commands. Currently focused item: ", selectedItem, ". Press ", /*#__PURE__*/createElement("kbd", null, "enter"), " to select, ", /*#__PURE__*/createElement("kbd", null, "arrows"), " to navigate, ", /*#__PURE__*/createElement("kbd", null, "escape"), " to close.")), /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement("div", Object.assign({
|
|
1948
|
+
"aria-hidden": true,
|
|
1949
|
+
ref: popoverContainer,
|
|
1950
|
+
style: popper.styles.popper
|
|
1951
|
+
}, popper.attributes.popper), /*#__PURE__*/createElement(Popover, {
|
|
1893
1952
|
isOpen: isOpen,
|
|
1894
1953
|
usePortal: false,
|
|
1895
1954
|
|
|
@@ -1916,7 +1975,7 @@ var CommandList = function CommandList(_ref5) {
|
|
|
1916
1975
|
padding: "none",
|
|
1917
1976
|
spacing: "spacingS",
|
|
1918
1977
|
className: styles.footerList
|
|
1919
|
-
}, /*#__PURE__*/createElement("li", null, /*#__PURE__*/createElement("kbd", null, "\u2191"), /*#__PURE__*/createElement("kbd", null, "\u2193"), " to navigate"), /*#__PURE__*/createElement("li", null, /*#__PURE__*/createElement("kbd", null, "\u21B5"), " to confirm"), /*#__PURE__*/createElement("li", null, /*#__PURE__*/createElement("kbd", null, "esc"), " to close")))))));
|
|
1978
|
+
}, /*#__PURE__*/createElement("li", null, /*#__PURE__*/createElement("kbd", null, "\u2191"), /*#__PURE__*/createElement("kbd", null, "\u2193"), " to navigate"), /*#__PURE__*/createElement("li", null, /*#__PURE__*/createElement("kbd", null, "\u21B5"), " to confirm"), /*#__PURE__*/createElement("li", null, /*#__PURE__*/createElement("kbd", null, "esc"), " to close"))))))));
|
|
1920
1979
|
};
|
|
1921
1980
|
|
|
1922
1981
|
var CommandPrompt = function CommandPrompt(props) {
|
|
@@ -1924,10 +1983,19 @@ var CommandPrompt = function CommandPrompt(props) {
|
|
|
1924
1983
|
return trimLeadingSlash(props.text.text);
|
|
1925
1984
|
}, [props.text.text]);
|
|
1926
1985
|
var editor = props.editor;
|
|
1927
|
-
|
|
1928
|
-
|
|
1986
|
+
|
|
1987
|
+
var _React$useState = useState(),
|
|
1988
|
+
textElement = _React$useState[0],
|
|
1989
|
+
setTextElement = _React$useState[1];
|
|
1990
|
+
|
|
1991
|
+
return /*#__PURE__*/createElement("span", Object.assign({
|
|
1992
|
+
ref: function ref(e) {
|
|
1993
|
+
setTextElement(e);
|
|
1994
|
+
}
|
|
1995
|
+
}, props.attributes), props.children, /*#__PURE__*/createElement(CommandList, {
|
|
1929
1996
|
query: query,
|
|
1930
|
-
editor: editor
|
|
1997
|
+
editor: editor,
|
|
1998
|
+
textContainer: textElement
|
|
1931
1999
|
}));
|
|
1932
2000
|
};
|
|
1933
2001
|
|
|
@@ -2078,8 +2146,8 @@ function useFetchedEntity(_ref) {
|
|
|
2078
2146
|
var _useEntities = useEntities(),
|
|
2079
2147
|
entries = _useEntities.entries,
|
|
2080
2148
|
assets = _useEntities.assets,
|
|
2081
|
-
|
|
2082
|
-
|
|
2149
|
+
getEntry = _useEntities.getEntry,
|
|
2150
|
+
getAsset = _useEntities.getAsset;
|
|
2083
2151
|
|
|
2084
2152
|
var store = type === 'Entry' ? entries : assets;
|
|
2085
2153
|
|
|
@@ -2097,7 +2165,7 @@ function useFetchedEntity(_ref) {
|
|
|
2097
2165
|
}, [store, entity, id]); // Fetch the entity if needed
|
|
2098
2166
|
|
|
2099
2167
|
useEffect(function () {
|
|
2100
|
-
(type === 'Entry' ?
|
|
2168
|
+
(type === 'Entry' ? getEntry : getAsset)(id); // "getEntry" and "getAsset" instances change with every
|
|
2101
2169
|
// entity store update causing page lag on initial load
|
|
2102
2170
|
// TODO: consider rewriting useEntities() hook to avoid that happening in
|
|
2103
2171
|
// first place.
|
|
@@ -2650,7 +2718,7 @@ var styles$3 = {
|
|
|
2650
2718
|
};
|
|
2651
2719
|
function FetchingWrappedInlineEntryCard(props) {
|
|
2652
2720
|
var _useEntities = useEntities(),
|
|
2653
|
-
|
|
2721
|
+
getEntry = _useEntities.getEntry,
|
|
2654
2722
|
loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
|
|
2655
2723
|
entries = _useEntities.entries;
|
|
2656
2724
|
|
|
@@ -2684,7 +2752,7 @@ function FetchingWrappedInlineEntryCard(props) {
|
|
|
2684
2752
|
}, [entry, contentType, props.sdk.field.locale, props.sdk.locales["default"]]);
|
|
2685
2753
|
React__default.useEffect(function () {
|
|
2686
2754
|
if (!props.entryId) return;
|
|
2687
|
-
|
|
2755
|
+
getEntry(props.entryId); // We don't include getEntry below because it's part of the constate-derived
|
|
2688
2756
|
// useEntities(), not props.
|
|
2689
2757
|
// eslint-disable-next-line -- TODO: explain this disable
|
|
2690
2758
|
}, [props.entryId]);
|
|
@@ -2970,38 +3038,6 @@ function getWithEmbeddedEntryInlineEvents(sdk) {
|
|
|
2970
3038
|
};
|
|
2971
3039
|
}
|
|
2972
3040
|
|
|
2973
|
-
var VALIDATIONS = {
|
|
2974
|
-
ENABLED_MARKS: 'enabledMarks',
|
|
2975
|
-
ENABLED_NODE_TYPES: 'enabledNodeTypes'
|
|
2976
|
-
};
|
|
2977
|
-
var DEFAULT_ENABLED_NODE_TYPES = [BLOCKS.DOCUMENT, BLOCKS.PARAGRAPH, 'text'];
|
|
2978
|
-
|
|
2979
|
-
var getRichTextValidation = function getRichTextValidation(field, validationType) {
|
|
2980
|
-
return flow(function (v) {
|
|
2981
|
-
return find(v, validationType);
|
|
2982
|
-
}, function (v) {
|
|
2983
|
-
return get(v, validationType);
|
|
2984
|
-
})(field.validations);
|
|
2985
|
-
};
|
|
2986
|
-
|
|
2987
|
-
var isFormattingOptionEnabled = function isFormattingOptionEnabled(field, validationType, nodeTypeOrMark) {
|
|
2988
|
-
var enabledFormattings = getRichTextValidation(field, validationType); // TODO: In the future, validations will always be opt-in. In that case
|
|
2989
|
-
// we don't need this step.
|
|
2990
|
-
|
|
2991
|
-
if (enabledFormattings === undefined) {
|
|
2992
|
-
return true;
|
|
2993
|
-
}
|
|
2994
|
-
|
|
2995
|
-
return DEFAULT_ENABLED_NODE_TYPES.concat(enabledFormattings).includes(nodeTypeOrMark);
|
|
2996
|
-
};
|
|
2997
|
-
|
|
2998
|
-
var isNodeTypeEnabled = function isNodeTypeEnabled(field, nodeType) {
|
|
2999
|
-
return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_NODE_TYPES, nodeType);
|
|
3000
|
-
};
|
|
3001
|
-
var isMarkEnabled = function isMarkEnabled(field, mark) {
|
|
3002
|
-
return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_MARKS, mark);
|
|
3003
|
-
};
|
|
3004
|
-
|
|
3005
3041
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _dropdown, _LABELS;
|
|
3006
3042
|
var styles$5 = {
|
|
3007
3043
|
dropdown: (_dropdown = {
|