@contentful/field-editor-rich-text 2.1.3 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/field-editor-rich-text.cjs.development.js +292 -245
- 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 +292 -245
- 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/dist/plugins/Tracking/createTrackingPlugin.d.ts +1 -1
- 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,36 +1606,125 @@ 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);
|
|
1725
|
+
editor.tracking.onCommandPaletteAction('insert', {
|
|
1726
|
+
nodeType: BLOCKS.EMBEDDED_ASSET
|
|
1727
|
+
});
|
|
1605
1728
|
}
|
|
1606
1729
|
}
|
|
1607
1730
|
};
|
|
@@ -1609,75 +1732,12 @@ var useCommands = function useCommands(sdk, query, editor) {
|
|
|
1609
1732
|
}
|
|
1610
1733
|
});
|
|
1611
1734
|
}
|
|
1612
|
-
}, {
|
|
1613
|
-
id: contentType.sys.id + "-inline",
|
|
1614
|
-
label: "Embed " + contentType.name + " - Inline",
|
|
1615
|
-
callback: function callback() {
|
|
1616
|
-
fetchEntries(sdk, contentType, query).then(function (entries) {
|
|
1617
|
-
removeQuery(editor);
|
|
1618
|
-
|
|
1619
|
-
if (!entries.length) {
|
|
1620
|
-
setCommands([{
|
|
1621
|
-
id: 'no-results',
|
|
1622
|
-
label: 'No results'
|
|
1623
|
-
}]);
|
|
1624
|
-
} else {
|
|
1625
|
-
setCommands(entries.map(function (entry) {
|
|
1626
|
-
return {
|
|
1627
|
-
id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
|
|
1628
|
-
label: entry.displayTitle,
|
|
1629
|
-
callback: function callback() {
|
|
1630
|
-
var inlineNode = createInlineEntryNode(entry.id);
|
|
1631
|
-
removeCommand(editor);
|
|
1632
|
-
Transforms.insertNodes(editor, inlineNode);
|
|
1633
|
-
editor.insertText('');
|
|
1634
|
-
}
|
|
1635
|
-
};
|
|
1636
|
-
}));
|
|
1637
|
-
}
|
|
1638
|
-
});
|
|
1639
|
-
}
|
|
1640
1735
|
}]
|
|
1641
1736
|
};
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
group: 'Assets',
|
|
1645
|
-
commands: [{
|
|
1646
|
-
id: 'embed-asset',
|
|
1647
|
-
label: 'Embed Asset',
|
|
1648
|
-
callback: function callback() {
|
|
1649
|
-
fetchAssets(sdk, query).then(function (assets) {
|
|
1650
|
-
removeQuery(editor);
|
|
1651
|
-
|
|
1652
|
-
if (!assets.length) {
|
|
1653
|
-
setCommands([{
|
|
1654
|
-
id: 'no-results',
|
|
1655
|
-
label: 'No results'
|
|
1656
|
-
}]);
|
|
1657
|
-
} else {
|
|
1658
|
-
setCommands(assets.map(function (asset) {
|
|
1659
|
-
return {
|
|
1660
|
-
id: asset.id + "-" + asset.displayTitle.replace(/\W+/g, '-').toLowerCase(),
|
|
1661
|
-
label: asset.displayTitle,
|
|
1662
|
-
thumbnail: asset.thumbnail,
|
|
1663
|
-
callback: function callback() {
|
|
1664
|
-
removeCommand(editor);
|
|
1737
|
+
return [].concat(contentTypeCommands, [assetCommand]);
|
|
1738
|
+
}
|
|
1665
1739
|
|
|
1666
|
-
|
|
1667
|
-
var selection = editor.selection;
|
|
1668
|
-
editor.insertSoftBreak();
|
|
1669
|
-
insertBlock(editor, BLOCKS.EMBEDDED_ASSET, asset.entity);
|
|
1670
|
-
Transforms.select(editor, selection);
|
|
1671
|
-
}
|
|
1672
|
-
}
|
|
1673
|
-
};
|
|
1674
|
-
}));
|
|
1675
|
-
}
|
|
1676
|
-
});
|
|
1677
|
-
}
|
|
1678
|
-
}]
|
|
1679
|
-
};
|
|
1680
|
-
return [].concat(contentTypeCommands, [assetCommand]);
|
|
1740
|
+
return contentTypeCommands;
|
|
1681
1741
|
}),
|
|
1682
1742
|
commands = _useState[0],
|
|
1683
1743
|
setCommands = _useState[1];
|
|
@@ -1763,7 +1823,6 @@ var styles = {
|
|
|
1763
1823
|
margin: tokens.spacingXs + " 0"
|
|
1764
1824
|
}),
|
|
1765
1825
|
menuHeader: /*#__PURE__*/css({
|
|
1766
|
-
position: 'sticky',
|
|
1767
1826
|
zIndex: tokens.zIndexDefault,
|
|
1768
1827
|
top: 0,
|
|
1769
1828
|
backgroundColor: tokens.gray100,
|
|
@@ -1862,25 +1921,34 @@ var CommandListItems = function CommandListItems(_ref4) {
|
|
|
1862
1921
|
|
|
1863
1922
|
var CommandList = function CommandList(_ref5) {
|
|
1864
1923
|
var query = _ref5.query,
|
|
1865
|
-
editor = _ref5.editor
|
|
1924
|
+
editor = _ref5.editor,
|
|
1925
|
+
textContainer = _ref5.textContainer;
|
|
1866
1926
|
var sdk = useSdkContext();
|
|
1867
|
-
var
|
|
1927
|
+
var popoverContainer = useRef(null);
|
|
1928
|
+
var popper = usePopper(textContainer, popoverContainer == null ? void 0 : popoverContainer.current, {
|
|
1929
|
+
placement: 'bottom-start'
|
|
1930
|
+
});
|
|
1868
1931
|
var commandItems = useCommands(sdk, query, editor);
|
|
1869
1932
|
|
|
1870
|
-
var _useCommandList = useCommandList(commandItems,
|
|
1933
|
+
var _useCommandList = useCommandList(commandItems, popoverContainer),
|
|
1871
1934
|
selectedItem = _useCommandList.selectedItem,
|
|
1872
1935
|
isOpen = _useCommandList.isOpen;
|
|
1873
1936
|
|
|
1937
|
+
if (!commandItems.length) {
|
|
1938
|
+
return null;
|
|
1939
|
+
}
|
|
1940
|
+
|
|
1874
1941
|
return /*#__PURE__*/createElement("div", {
|
|
1875
1942
|
className: styles.container,
|
|
1876
1943
|
tabIndex: -1,
|
|
1877
|
-
ref: container,
|
|
1878
1944
|
contentEditable: false
|
|
1879
1945
|
}, /*#__PURE__*/createElement("div", {
|
|
1880
1946
|
role: "alert"
|
|
1881
|
-
}, /*#__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", {
|
|
1882
|
-
"aria-hidden": true
|
|
1883
|
-
|
|
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, {
|
|
1884
1952
|
isOpen: isOpen,
|
|
1885
1953
|
usePortal: false,
|
|
1886
1954
|
|
|
@@ -1907,7 +1975,7 @@ var CommandList = function CommandList(_ref5) {
|
|
|
1907
1975
|
padding: "none",
|
|
1908
1976
|
spacing: "spacingS",
|
|
1909
1977
|
className: styles.footerList
|
|
1910
|
-
}, /*#__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"))))))));
|
|
1911
1979
|
};
|
|
1912
1980
|
|
|
1913
1981
|
var CommandPrompt = function CommandPrompt(props) {
|
|
@@ -1915,10 +1983,19 @@ var CommandPrompt = function CommandPrompt(props) {
|
|
|
1915
1983
|
return trimLeadingSlash(props.text.text);
|
|
1916
1984
|
}, [props.text.text]);
|
|
1917
1985
|
var editor = props.editor;
|
|
1918
|
-
|
|
1919
|
-
|
|
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, {
|
|
1920
1996
|
query: query,
|
|
1921
|
-
editor: editor
|
|
1997
|
+
editor: editor,
|
|
1998
|
+
textContainer: textElement
|
|
1922
1999
|
}));
|
|
1923
2000
|
};
|
|
1924
2001
|
|
|
@@ -1929,6 +2006,7 @@ var createOnKeyDown = function createOnKeyDown() {
|
|
|
1929
2006
|
var _setMarks;
|
|
1930
2007
|
|
|
1931
2008
|
setMarks(editor, (_setMarks = {}, _setMarks[COMMAND_PROMPT] = true, _setMarks));
|
|
2009
|
+
editor.tracking.onCommandPaletteAction('openRichTextCommandPalette');
|
|
1932
2010
|
}
|
|
1933
2011
|
|
|
1934
2012
|
var isActive = isMarkActive(editor, COMMAND_PROMPT);
|
|
@@ -1958,6 +2036,7 @@ var createOnKeyDown = function createOnKeyDown() {
|
|
|
1958
2036
|
key: COMMAND_PROMPT,
|
|
1959
2037
|
at: _range
|
|
1960
2038
|
});
|
|
2039
|
+
editor.tracking.onCommandPaletteAction('cancelRichTextCommandPalette');
|
|
1961
2040
|
}
|
|
1962
2041
|
}
|
|
1963
2042
|
};
|
|
@@ -2067,8 +2146,8 @@ function useFetchedEntity(_ref) {
|
|
|
2067
2146
|
var _useEntities = useEntities(),
|
|
2068
2147
|
entries = _useEntities.entries,
|
|
2069
2148
|
assets = _useEntities.assets,
|
|
2070
|
-
|
|
2071
|
-
|
|
2149
|
+
getEntry = _useEntities.getEntry,
|
|
2150
|
+
getAsset = _useEntities.getAsset;
|
|
2072
2151
|
|
|
2073
2152
|
var store = type === 'Entry' ? entries : assets;
|
|
2074
2153
|
|
|
@@ -2086,7 +2165,7 @@ function useFetchedEntity(_ref) {
|
|
|
2086
2165
|
}, [store, entity, id]); // Fetch the entity if needed
|
|
2087
2166
|
|
|
2088
2167
|
useEffect(function () {
|
|
2089
|
-
(type === 'Entry' ?
|
|
2168
|
+
(type === 'Entry' ? getEntry : getAsset)(id); // "getEntry" and "getAsset" instances change with every
|
|
2090
2169
|
// entity store update causing page lag on initial load
|
|
2091
2170
|
// TODO: consider rewriting useEntities() hook to avoid that happening in
|
|
2092
2171
|
// first place.
|
|
@@ -2639,7 +2718,7 @@ var styles$3 = {
|
|
|
2639
2718
|
};
|
|
2640
2719
|
function FetchingWrappedInlineEntryCard(props) {
|
|
2641
2720
|
var _useEntities = useEntities(),
|
|
2642
|
-
|
|
2721
|
+
getEntry = _useEntities.getEntry,
|
|
2643
2722
|
loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
|
|
2644
2723
|
entries = _useEntities.entries;
|
|
2645
2724
|
|
|
@@ -2673,7 +2752,7 @@ function FetchingWrappedInlineEntryCard(props) {
|
|
|
2673
2752
|
}, [entry, contentType, props.sdk.field.locale, props.sdk.locales["default"]]);
|
|
2674
2753
|
React__default.useEffect(function () {
|
|
2675
2754
|
if (!props.entryId) return;
|
|
2676
|
-
|
|
2755
|
+
getEntry(props.entryId); // We don't include getEntry below because it's part of the constate-derived
|
|
2677
2756
|
// useEntities(), not props.
|
|
2678
2757
|
// eslint-disable-next-line -- TODO: explain this disable
|
|
2679
2758
|
}, [props.entryId]);
|
|
@@ -2959,38 +3038,6 @@ function getWithEmbeddedEntryInlineEvents(sdk) {
|
|
|
2959
3038
|
};
|
|
2960
3039
|
}
|
|
2961
3040
|
|
|
2962
|
-
var VALIDATIONS = {
|
|
2963
|
-
ENABLED_MARKS: 'enabledMarks',
|
|
2964
|
-
ENABLED_NODE_TYPES: 'enabledNodeTypes'
|
|
2965
|
-
};
|
|
2966
|
-
var DEFAULT_ENABLED_NODE_TYPES = [BLOCKS.DOCUMENT, BLOCKS.PARAGRAPH, 'text'];
|
|
2967
|
-
|
|
2968
|
-
var getRichTextValidation = function getRichTextValidation(field, validationType) {
|
|
2969
|
-
return flow(function (v) {
|
|
2970
|
-
return find(v, validationType);
|
|
2971
|
-
}, function (v) {
|
|
2972
|
-
return get(v, validationType);
|
|
2973
|
-
})(field.validations);
|
|
2974
|
-
};
|
|
2975
|
-
|
|
2976
|
-
var isFormattingOptionEnabled = function isFormattingOptionEnabled(field, validationType, nodeTypeOrMark) {
|
|
2977
|
-
var enabledFormattings = getRichTextValidation(field, validationType); // TODO: In the future, validations will always be opt-in. In that case
|
|
2978
|
-
// we don't need this step.
|
|
2979
|
-
|
|
2980
|
-
if (enabledFormattings === undefined) {
|
|
2981
|
-
return true;
|
|
2982
|
-
}
|
|
2983
|
-
|
|
2984
|
-
return DEFAULT_ENABLED_NODE_TYPES.concat(enabledFormattings).includes(nodeTypeOrMark);
|
|
2985
|
-
};
|
|
2986
|
-
|
|
2987
|
-
var isNodeTypeEnabled = function isNodeTypeEnabled(field, nodeType) {
|
|
2988
|
-
return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_NODE_TYPES, nodeType);
|
|
2989
|
-
};
|
|
2990
|
-
var isMarkEnabled = function isMarkEnabled(field, mark) {
|
|
2991
|
-
return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_MARKS, mark);
|
|
2992
|
-
};
|
|
2993
|
-
|
|
2994
3041
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _dropdown, _LABELS;
|
|
2995
3042
|
var styles$5 = {
|
|
2996
3043
|
dropdown: (_dropdown = {
|