@contentful/field-editor-rich-text 2.1.2 → 2.2.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 +18 -0
- package/dist/field-editor-rich-text.cjs.development.js +287 -226
- 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 +287 -226
- 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/hooks/useCommandList.d.ts +1 -0
- package/dist/plugins/CommandPalette/useCommands.d.ts +2 -2
- package/dist/plugins/Tracking/createTrackingPlugin.d.ts +1 -1
- package/package.json +4 -2
|
@@ -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,112 +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
|
-
useEffect(function () {
|
|
581
|
-
if (!(container != null && container.current)) {
|
|
582
|
-
return;
|
|
583
|
-
}
|
|
584
|
-
|
|
585
|
-
var buttons = Array.from(container.current.querySelectorAll('button'));
|
|
586
|
-
var currBtn = buttons.find(function (btn) {
|
|
587
|
-
return btn.id === selectedItem;
|
|
588
|
-
});
|
|
589
|
-
var currIndex = currBtn ? buttons.indexOf(currBtn) : 0;
|
|
590
|
-
var shouldSelectFirstBtn = !currBtn && buttons.length;
|
|
591
|
-
|
|
592
|
-
if (shouldSelectFirstBtn) {
|
|
593
|
-
setSelectedItem(buttons[0].id);
|
|
594
|
-
buttons[0].scrollIntoView({
|
|
595
|
-
block: 'nearest',
|
|
596
|
-
inline: 'start'
|
|
597
|
-
});
|
|
598
|
-
}
|
|
599
|
-
|
|
600
|
-
function handleKeyDown(event) {
|
|
601
|
-
if (isHotkey('up', event)) {
|
|
602
|
-
event.preventDefault();
|
|
603
|
-
|
|
604
|
-
if (currIndex === 0) {
|
|
605
|
-
return;
|
|
606
|
-
}
|
|
607
|
-
|
|
608
|
-
setSelectedItem(buttons[currIndex - 1].id);
|
|
609
|
-
buttons[currIndex - 1].scrollIntoView({
|
|
610
|
-
block: 'nearest',
|
|
611
|
-
inline: 'start'
|
|
612
|
-
});
|
|
613
|
-
} else if (isHotkey('down', event)) {
|
|
614
|
-
event.preventDefault();
|
|
615
|
-
|
|
616
|
-
if (currIndex === buttons.length - 1) {
|
|
617
|
-
return;
|
|
618
|
-
}
|
|
668
|
+
var VALIDATIONS = {
|
|
669
|
+
ENABLED_MARKS: 'enabledMarks',
|
|
670
|
+
ENABLED_NODE_TYPES: 'enabledNodeTypes'
|
|
671
|
+
};
|
|
672
|
+
var DEFAULT_ENABLED_NODE_TYPES = [BLOCKS.DOCUMENT, BLOCKS.PARAGRAPH, 'text'];
|
|
619
673
|
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
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
|
+
};
|
|
627
681
|
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
}
|
|
632
|
-
} //TODO: handle shift+enter, which must be detected using separate events
|
|
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.
|
|
633
685
|
|
|
634
|
-
|
|
686
|
+
if (enabledFormattings === undefined) {
|
|
687
|
+
return true;
|
|
688
|
+
}
|
|
635
689
|
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
}
|
|
690
|
+
return DEFAULT_ENABLED_NODE_TYPES.concat(enabledFormattings).includes(nodeTypeOrMark);
|
|
691
|
+
};
|
|
639
692
|
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
return
|
|
645
|
-
selectedItem: selectedItem
|
|
646
|
-
};
|
|
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);
|
|
647
698
|
};
|
|
648
699
|
|
|
649
700
|
var COMMAND_PROMPT = 'command-prompt';
|
|
@@ -1555,36 +1606,125 @@ var removeQuery = function removeQuery(editor) {
|
|
|
1555
1606
|
|
|
1556
1607
|
var useCommands = function useCommands(sdk, query, editor) {
|
|
1557
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;
|
|
1558
1613
|
|
|
1559
1614
|
var _useState = useState(function () {
|
|
1560
|
-
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) {
|
|
1561
1690
|
return {
|
|
1562
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',
|
|
1563
1699
|
commands: [{
|
|
1564
|
-
id:
|
|
1565
|
-
label:
|
|
1700
|
+
id: 'embed-asset',
|
|
1701
|
+
label: 'Embed Asset',
|
|
1566
1702
|
callback: function callback() {
|
|
1567
|
-
|
|
1703
|
+
fetchAssets(sdk, query).then(function (assets) {
|
|
1568
1704
|
removeQuery(editor);
|
|
1569
1705
|
|
|
1570
|
-
if (!
|
|
1706
|
+
if (!assets.length) {
|
|
1571
1707
|
setCommands([{
|
|
1572
1708
|
id: 'no-results',
|
|
1573
1709
|
label: 'No results'
|
|
1574
1710
|
}]);
|
|
1575
1711
|
} else {
|
|
1576
|
-
setCommands(
|
|
1712
|
+
setCommands(assets.map(function (asset) {
|
|
1577
1713
|
return {
|
|
1578
|
-
id:
|
|
1579
|
-
label:
|
|
1714
|
+
id: asset.id + "-" + asset.displayTitle.replace(/\W+/g, '-').toLowerCase(),
|
|
1715
|
+
label: asset.displayTitle,
|
|
1716
|
+
thumbnail: asset.thumbnail,
|
|
1580
1717
|
callback: function callback() {
|
|
1581
1718
|
removeCommand(editor);
|
|
1582
1719
|
|
|
1583
1720
|
if (editor.selection) {
|
|
1584
1721
|
var selection = editor.selection;
|
|
1585
1722
|
editor.insertSoftBreak();
|
|
1586
|
-
insertBlock(editor, BLOCKS.
|
|
1723
|
+
insertBlock(editor, BLOCKS.EMBEDDED_ASSET, asset.entity);
|
|
1587
1724
|
Transforms.select(editor, selection);
|
|
1725
|
+
editor.tracking.onCommandPaletteAction('insert', {
|
|
1726
|
+
nodeType: BLOCKS.EMBEDDED_ASSET
|
|
1727
|
+
});
|
|
1588
1728
|
}
|
|
1589
1729
|
}
|
|
1590
1730
|
};
|
|
@@ -1592,75 +1732,12 @@ var useCommands = function useCommands(sdk, query, editor) {
|
|
|
1592
1732
|
}
|
|
1593
1733
|
});
|
|
1594
1734
|
}
|
|
1595
|
-
}, {
|
|
1596
|
-
id: contentType.sys.id + "-inline",
|
|
1597
|
-
label: "Embed " + contentType.name + " - Inline",
|
|
1598
|
-
callback: function callback() {
|
|
1599
|
-
fetchEntries(sdk, contentType, query).then(function (entries) {
|
|
1600
|
-
removeQuery(editor);
|
|
1601
|
-
|
|
1602
|
-
if (!entries.length) {
|
|
1603
|
-
setCommands([{
|
|
1604
|
-
id: 'no-results',
|
|
1605
|
-
label: 'No results'
|
|
1606
|
-
}]);
|
|
1607
|
-
} else {
|
|
1608
|
-
setCommands(entries.map(function (entry) {
|
|
1609
|
-
return {
|
|
1610
|
-
id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
|
|
1611
|
-
label: entry.displayTitle,
|
|
1612
|
-
callback: function callback() {
|
|
1613
|
-
var inlineNode = createInlineEntryNode(entry.id);
|
|
1614
|
-
removeCommand(editor);
|
|
1615
|
-
Transforms.insertNodes(editor, inlineNode);
|
|
1616
|
-
editor.insertText('');
|
|
1617
|
-
}
|
|
1618
|
-
};
|
|
1619
|
-
}));
|
|
1620
|
-
}
|
|
1621
|
-
});
|
|
1622
|
-
}
|
|
1623
1735
|
}]
|
|
1624
1736
|
};
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
group: 'Assets',
|
|
1628
|
-
commands: [{
|
|
1629
|
-
id: 'embed-asset',
|
|
1630
|
-
label: 'Embed Asset',
|
|
1631
|
-
callback: function callback() {
|
|
1632
|
-
fetchAssets(sdk, query).then(function (assets) {
|
|
1633
|
-
removeQuery(editor);
|
|
1634
|
-
|
|
1635
|
-
if (!assets.length) {
|
|
1636
|
-
setCommands([{
|
|
1637
|
-
id: 'no-results',
|
|
1638
|
-
label: 'No results'
|
|
1639
|
-
}]);
|
|
1640
|
-
} else {
|
|
1641
|
-
setCommands(assets.map(function (asset) {
|
|
1642
|
-
return {
|
|
1643
|
-
id: asset.id + "-" + asset.displayTitle.replace(/\W+/g, '-').toLowerCase(),
|
|
1644
|
-
label: asset.displayTitle,
|
|
1645
|
-
thumbnail: asset.thumbnail,
|
|
1646
|
-
callback: function callback() {
|
|
1647
|
-
removeCommand(editor);
|
|
1737
|
+
return [].concat(contentTypeCommands, [assetCommand]);
|
|
1738
|
+
}
|
|
1648
1739
|
|
|
1649
|
-
|
|
1650
|
-
var selection = editor.selection;
|
|
1651
|
-
editor.insertSoftBreak();
|
|
1652
|
-
insertBlock(editor, BLOCKS.EMBEDDED_ASSET, asset.entity);
|
|
1653
|
-
Transforms.select(editor, selection);
|
|
1654
|
-
}
|
|
1655
|
-
}
|
|
1656
|
-
};
|
|
1657
|
-
}));
|
|
1658
|
-
}
|
|
1659
|
-
});
|
|
1660
|
-
}
|
|
1661
|
-
}]
|
|
1662
|
-
};
|
|
1663
|
-
return [].concat(contentTypeCommands, [assetCommand]);
|
|
1740
|
+
return contentTypeCommands;
|
|
1664
1741
|
}),
|
|
1665
1742
|
commands = _useState[0],
|
|
1666
1743
|
setCommands = _useState[1];
|
|
@@ -1746,7 +1823,6 @@ var styles = {
|
|
|
1746
1823
|
margin: tokens.spacingXs + " 0"
|
|
1747
1824
|
}),
|
|
1748
1825
|
menuHeader: /*#__PURE__*/css({
|
|
1749
|
-
position: 'sticky',
|
|
1750
1826
|
zIndex: tokens.zIndexDefault,
|
|
1751
1827
|
top: 0,
|
|
1752
1828
|
backgroundColor: tokens.gray100,
|
|
@@ -1845,29 +1921,35 @@ var CommandListItems = function CommandListItems(_ref4) {
|
|
|
1845
1921
|
|
|
1846
1922
|
var CommandList = function CommandList(_ref5) {
|
|
1847
1923
|
var query = _ref5.query,
|
|
1848
|
-
editor = _ref5.editor
|
|
1924
|
+
editor = _ref5.editor,
|
|
1925
|
+
textContainer = _ref5.textContainer;
|
|
1849
1926
|
var sdk = useSdkContext();
|
|
1850
|
-
var
|
|
1927
|
+
var popoverContainer = useRef(null);
|
|
1928
|
+
var popper = usePopper(textContainer, popoverContainer == null ? void 0 : popoverContainer.current, {
|
|
1929
|
+
placement: 'bottom-start'
|
|
1930
|
+
});
|
|
1851
1931
|
var commandItems = useCommands(sdk, query, editor);
|
|
1852
1932
|
|
|
1853
|
-
var _useCommandList = useCommandList(commandItems,
|
|
1854
|
-
selectedItem = _useCommandList.selectedItem
|
|
1933
|
+
var _useCommandList = useCommandList(commandItems, popoverContainer),
|
|
1934
|
+
selectedItem = _useCommandList.selectedItem,
|
|
1935
|
+
isOpen = _useCommandList.isOpen;
|
|
1855
1936
|
|
|
1856
|
-
if (commandItems.length
|
|
1937
|
+
if (!commandItems.length) {
|
|
1857
1938
|
return null;
|
|
1858
1939
|
}
|
|
1859
1940
|
|
|
1860
1941
|
return /*#__PURE__*/createElement("div", {
|
|
1861
1942
|
className: styles.container,
|
|
1862
1943
|
tabIndex: -1,
|
|
1863
|
-
ref: container,
|
|
1864
1944
|
contentEditable: false
|
|
1865
1945
|
}, /*#__PURE__*/createElement("div", {
|
|
1866
1946
|
role: "alert"
|
|
1867
|
-
}, /*#__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", {
|
|
1868
|
-
"aria-hidden": true
|
|
1869
|
-
|
|
1870
|
-
|
|
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, {
|
|
1952
|
+
isOpen: isOpen,
|
|
1871
1953
|
usePortal: false,
|
|
1872
1954
|
|
|
1873
1955
|
/* eslint-disable-next-line jsx-a11y/no-autofocus -- we want to keep focus on text input*/
|
|
@@ -1893,7 +1975,7 @@ var CommandList = function CommandList(_ref5) {
|
|
|
1893
1975
|
padding: "none",
|
|
1894
1976
|
spacing: "spacingS",
|
|
1895
1977
|
className: styles.footerList
|
|
1896
|
-
}, /*#__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"))))))));
|
|
1897
1979
|
};
|
|
1898
1980
|
|
|
1899
1981
|
var CommandPrompt = function CommandPrompt(props) {
|
|
@@ -1901,10 +1983,19 @@ var CommandPrompt = function CommandPrompt(props) {
|
|
|
1901
1983
|
return trimLeadingSlash(props.text.text);
|
|
1902
1984
|
}, [props.text.text]);
|
|
1903
1985
|
var editor = props.editor;
|
|
1904
|
-
|
|
1905
|
-
|
|
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, {
|
|
1906
1996
|
query: query,
|
|
1907
|
-
editor: editor
|
|
1997
|
+
editor: editor,
|
|
1998
|
+
textContainer: textElement
|
|
1908
1999
|
}));
|
|
1909
2000
|
};
|
|
1910
2001
|
|
|
@@ -1915,6 +2006,7 @@ var createOnKeyDown = function createOnKeyDown() {
|
|
|
1915
2006
|
var _setMarks;
|
|
1916
2007
|
|
|
1917
2008
|
setMarks(editor, (_setMarks = {}, _setMarks[COMMAND_PROMPT] = true, _setMarks));
|
|
2009
|
+
editor.tracking.onCommandPaletteAction('openRichTextCommandPalette');
|
|
1918
2010
|
}
|
|
1919
2011
|
|
|
1920
2012
|
var isActive = isMarkActive(editor, COMMAND_PROMPT);
|
|
@@ -1944,6 +2036,7 @@ var createOnKeyDown = function createOnKeyDown() {
|
|
|
1944
2036
|
key: COMMAND_PROMPT,
|
|
1945
2037
|
at: _range
|
|
1946
2038
|
});
|
|
2039
|
+
editor.tracking.onCommandPaletteAction('cancelRichTextCommandPalette');
|
|
1947
2040
|
}
|
|
1948
2041
|
}
|
|
1949
2042
|
};
|
|
@@ -2945,38 +3038,6 @@ function getWithEmbeddedEntryInlineEvents(sdk) {
|
|
|
2945
3038
|
};
|
|
2946
3039
|
}
|
|
2947
3040
|
|
|
2948
|
-
var VALIDATIONS = {
|
|
2949
|
-
ENABLED_MARKS: 'enabledMarks',
|
|
2950
|
-
ENABLED_NODE_TYPES: 'enabledNodeTypes'
|
|
2951
|
-
};
|
|
2952
|
-
var DEFAULT_ENABLED_NODE_TYPES = [BLOCKS.DOCUMENT, BLOCKS.PARAGRAPH, 'text'];
|
|
2953
|
-
|
|
2954
|
-
var getRichTextValidation = function getRichTextValidation(field, validationType) {
|
|
2955
|
-
return flow(function (v) {
|
|
2956
|
-
return find(v, validationType);
|
|
2957
|
-
}, function (v) {
|
|
2958
|
-
return get(v, validationType);
|
|
2959
|
-
})(field.validations);
|
|
2960
|
-
};
|
|
2961
|
-
|
|
2962
|
-
var isFormattingOptionEnabled = function isFormattingOptionEnabled(field, validationType, nodeTypeOrMark) {
|
|
2963
|
-
var enabledFormattings = getRichTextValidation(field, validationType); // TODO: In the future, validations will always be opt-in. In that case
|
|
2964
|
-
// we don't need this step.
|
|
2965
|
-
|
|
2966
|
-
if (enabledFormattings === undefined) {
|
|
2967
|
-
return true;
|
|
2968
|
-
}
|
|
2969
|
-
|
|
2970
|
-
return DEFAULT_ENABLED_NODE_TYPES.concat(enabledFormattings).includes(nodeTypeOrMark);
|
|
2971
|
-
};
|
|
2972
|
-
|
|
2973
|
-
var isNodeTypeEnabled = function isNodeTypeEnabled(field, nodeType) {
|
|
2974
|
-
return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_NODE_TYPES, nodeType);
|
|
2975
|
-
};
|
|
2976
|
-
var isMarkEnabled = function isMarkEnabled(field, mark) {
|
|
2977
|
-
return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_MARKS, mark);
|
|
2978
|
-
};
|
|
2979
|
-
|
|
2980
3041
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _dropdown, _LABELS;
|
|
2981
3042
|
var styles$5 = {
|
|
2982
3043
|
dropdown: (_dropdown = {
|