@contentful/field-editor-markdown 1.2.0 → 1.3.0

package/dist/esm/MarkdownActions.js

@@ -0,0 +1,186 @@
+import { openConfirmInsertAsset } from './dialogs/ConfirmInsertAssetModalDialog';
+import { openEmbedExternalContentDialog } from './dialogs/EmdebExternalContentDialog';
+import { openInsertLinkDialog } from './dialogs/InsertLinkModalDialog';
+import { openInsertTableDialog } from './dialogs/InsertTableModalDialog';
+import { openInsertSpecialCharacter } from './dialogs/SpecialCharacterModalDialog';
+import { openZenMode } from './dialogs/ZenModeModalDialog';
+import { insertAssetLinks } from './utils/insertAssetLinks';
+import * as LinkOrganizer from './utils/linkOrganizer';
+export function createMarkdownActions(props) {
+    const { sdk , editor , locale  } = props;
+    const insertAssetsWithConfirmation = async (assets)=>{
+        if (assets) {
+            const { links , fallbacks  } = await insertAssetLinks(assets, {
+                localeCode: locale,
+                defaultLocaleCode: sdk.locales.default,
+                fallbackCode: sdk.locales.fallbacks[locale]
+            });
+            if (links && links.length > 0) {
+                if (fallbacks) {
+                    const insertAnyway = await openConfirmInsertAsset(sdk.dialogs, {
+                        locale: locale,
+                        assets: fallbacks
+                    });
+                    if (!insertAnyway) {
+                        throw Error('User decided to not use fallbacks');
+                    }
+                }
+                return links.map((link)=>link.asMarkdown).join('\n\n');
+            }
+        }
+        return '';
+    };
+    return {
+        headings: {
+            h1: ()=>{
+                editor?.actions.h1();
+            },
+            h2: ()=>{
+                editor?.actions.h2();
+            },
+            h3: ()=>{
+                editor?.actions.h3();
+            }
+        },
+        simple: {
+            italic: ()=>{
+                editor?.actions.italic();
+            },
+            bold: ()=>{
+                editor?.actions.bold();
+            },
+            quote: ()=>{
+                editor?.actions.quote();
+            },
+            ol: ()=>{
+                editor?.actions.ol();
+            },
+            ul: ()=>{
+                editor?.actions.ul();
+            },
+            strike: ()=>{
+                editor?.actions.strike();
+            },
+            code: ()=>{
+                editor?.actions.code();
+            },
+            hr: ()=>{
+                editor?.actions.hr();
+            },
+            indent: ()=>{
+                editor?.actions.indent();
+            },
+            dedent: ()=>{
+                editor?.actions.dedent();
+            }
+        },
+        history: {
+            undo: ()=>{
+                editor?.actions.undo();
+            },
+            redo: ()=>{
+                editor?.actions.redo();
+            }
+        },
+        insertLink: async ()=>{
+            if (!editor) {
+                return;
+            }
+            editor.usePrimarySelection();
+            const selectedText = editor.getSelectedText();
+            const result = await openInsertLinkDialog(sdk.dialogs, {
+                selectedText
+            });
+            if (result) {
+                editor.actions.link(result.url, selectedText || result.text, result.title);
+            }
+        },
+        insertSpecialCharacter: async ()=>{
+            if (!editor) {
+                return;
+            }
+            const result = await openInsertSpecialCharacter(sdk.dialogs);
+            if (result) {
+                editor.insert(result);
+            }
+        },
+        insertTable: async ()=>{
+            if (!editor) {
+                return;
+            }
+            const result = await openInsertTableDialog(sdk.dialogs);
+            if (result) {
+                editor.actions.table(result);
+            }
+        },
+        organizeLinks: ()=>{
+            if (!editor) {
+                return;
+            }
+            let text = editor.getContent();
+            if (!text) {
+                return;
+            }
+            text = LinkOrganizer.convertInlineToRef(text);
+            text = LinkOrganizer.rewriteRefs(text);
+            editor.setContent(text);
+            sdk.notifier.success('All your links are now references at the bottom of your document.');
+        },
+        embedExternalContent: async ()=>{
+            if (!editor) {
+                return;
+            }
+            const result = await openEmbedExternalContentDialog(sdk.dialogs);
+            if (result) {
+                editor.insert(result);
+            }
+        },
+        addNewMedia: async ()=>{
+            if (!editor) {
+                return;
+            }
+            try {
+                const { entity: asset  } = await sdk.navigator.openNewAsset({
+                    slideIn: {
+                        waitForClose: true
+                    }
+                });
+                const markdownLinks = await insertAssetsWithConfirmation([
+                    asset
+                ]);
+                editor.insert(markdownLinks);
+            } finally{
+                editor.focus();
+            }
+        },
+        linkExistingMedia: async ()=>{
+            if (!editor) {
+                return;
+            }
+            try {
+                const assets = await sdk.dialogs.selectMultipleAssets({
+                    locale: locale
+                });
+                const markdownLinks = await insertAssetsWithConfirmation(assets);
+                editor.insert(markdownLinks);
+            } finally{
+                editor.focus();
+            }
+        },
+        openZenMode: async ()=>{
+            if (!editor) {
+                return;
+            }
+            const result = await openZenMode(sdk.dialogs, {
+                initialValue: editor.getContent(),
+                locale: props.locale
+            });
+            editor.setContent(result.value);
+            if (result.cursor) {
+                editor.setCursor(result.cursor);
+            }
+            editor.focus();
+        },
+        closeZenMode: ()=>{}
+    };
+}

package/dist/esm/MarkdownEditor.js

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import tokens from '@contentful/f36-tokens';
+import { FieldConnector } from '@contentful/field-editor-shared';
+import { css } from 'emotion';
+import { MarkdownBottomBar, MarkdownHelp } from './components/MarkdownBottomBar';
+import { MarkdownConstraints } from './components/MarkdownConstraints';
+import { MarkdownPreview } from './components/MarkdownPreview';
+import { MarkdownTabs } from './components/MarkdownTabs';
+import { MarkdownTextarea } from './components/MarkdownTextarea/MarkdownTextarea';
+import { MarkdownToolbar } from './components/MarkdownToolbar';
+import { openCheatsheetModal } from './dialogs/CheatsheetModalDialog';
+import { createMarkdownActions } from './MarkdownActions';
+const styles = {
+    container: css({
+        display: 'flex',
+        flexDirection: 'column',
+        fontFamily: tokens.fontStackPrimary
+    })
+};
+export function MarkdownEditor(props) {
+    const [currentValue, setCurrentValue] = React.useState(props.initialValue ?? '');
+    const [selectedTab, setSelectedTab] = React.useState('editor');
+    const [editor, setEditor] = React.useState(null);
+    const [canUploadAssets, setCanUploadAssets] = React.useState(false);
+    React.useEffect(()=>{
+        if (editor && props.onReady) {
+            props.onReady(editor);
+            setTimeout(()=>{
+                editor.refresh();
+            }, 1);
+        }
+    }, [
+        editor
+    ]);
+    React.useEffect(()=>{
+        props.sdk.access.can('create', 'Asset').then((value)=>{
+            setCanUploadAssets(value);
+        });
+    }, []);
+    React.useEffect(()=>{
+        if (editor) {
+            editor.setReadOnly(props.disabled);
+        }
+    }, [
+        editor,
+        props.disabled
+    ]);
+    const isActionDisabled = editor === null || props.disabled || selectedTab !== 'editor';
+    const direction = props.sdk.locales.direction[props.sdk.field.locale] ?? 'ltr';
+    const actions = React.useMemo(()=>{
+        return createMarkdownActions({
+            sdk: props.sdk,
+            editor,
+            locale: props.sdk.field.locale
+        });
+    }, [
+        editor
+    ]);
+    const openMarkdownHelp = React.useCallback(()=>{
+        openCheatsheetModal(props.sdk.dialogs);
+    }, []);
+    return React.createElement("div", {
+        className: styles.container,
+        "data-test-id": "markdown-editor"
+    }, React.createElement(MarkdownTabs, {
+        active: selectedTab,
+        onSelect: (tab)=>{
+            setSelectedTab(tab);
+        }
+    }), React.createElement(MarkdownToolbar, {
+        mode: "default",
+        disabled: isActionDisabled,
+        canUploadAssets: canUploadAssets,
+        actions: actions
+    }), React.createElement(MarkdownTextarea, {
+        minHeight: props.minHeight,
+        mode: "default",
+        visible: selectedTab === 'editor',
+        disabled: isActionDisabled,
+        direction: direction,
+        onReady: (editor)=>{
+            editor.setContent(props.initialValue ?? '');
+            editor.setReadOnly(props.disabled);
+            setEditor(editor);
+            editor.events.onChange((value)=>{
+                const trimmedValue = value.replace(/^\s+$/gm, '');
+                props.saveValueToSDK(trimmedValue);
+                setCurrentValue(value);
+            });
+        }
+    }), selectedTab === 'preview' && React.createElement(MarkdownPreview, {
+        direction: direction,
+        minHeight: props.minHeight,
+        mode: "default",
+        value: currentValue,
+        previewComponents: props.previewComponents
+    }), React.createElement(MarkdownBottomBar, null, React.createElement(MarkdownHelp, {
+        onClick: openMarkdownHelp
+    })), React.createElement(MarkdownConstraints, {
+        sdk: props.sdk,
+        value: currentValue
+    }));
+}
+export function MarkdownEditorConnected(props) {
+    return React.createElement(FieldConnector, {
+        throttle: 300,
+        field: props.sdk.field,
+        isInitiallyDisabled: props.isInitiallyDisabled
+    }, ({ value , disabled , setValue , externalReset  })=>{
+        return React.createElement(MarkdownEditor, {
+            ...props,
+            key: `markdown-editor-${externalReset}`,
+            initialValue: value,
+            disabled: disabled,
+            saveValueToSDK: setValue
+        });
+    });
+}

package/dist/esm/__fixtures__/FakeSdk.js

@@ -0,0 +1,173 @@
+import { createFakeCMAAdapter, createFakeFieldAPI, createFakeLocalesAPI, createFakeSpaceAPI } from '@contentful/field-editor-test-utils';
+import { assets, contentTypes, entries, locales as localesFixtures, spaces } from './fixtures';
+const newLink = (linkType, id)=>({
+        sys: {
+            id,
+            linkType,
+            type: 'Link'
+        }
+    });
+export function newReferenceEditorFakeSdk(props) {
+    const rawInitialValue = window.localStorage.getItem('initialValue');
+    const initialValue = rawInitialValue ? JSON.parse(rawInitialValue) : props?.initialValue;
+    const rawValidations = window.localStorage.getItem('fieldValidations');
+    const validations = rawValidations ? JSON.parse(rawValidations) : props?.validations;
+    const customizeMock = (field)=>{
+        return validations ? {
+            ...field,
+            validations
+        } : field;
+    };
+    const [field, mitt] = createFakeFieldAPI(customizeMock, initialValue);
+    const space = createFakeSpaceAPI();
+    const locales = createFakeLocalesAPI();
+    const entryLinks = [
+        newLink('Entry', entries.published.sys.id),
+        newLink('Entry', entries.changed.sys.id),
+        newLink('Entry', entries.empty.sys.id)
+    ];
+    const assetLinks = [
+        newLink('Asset', assets.published.sys.id),
+        newLink('Asset', assets.changed.sys.id),
+        newLink('Asset', assets.empty.sys.id)
+    ];
+    let selectorCounter = 0;
+    const delay = (ms)=>{
+        return new Promise((resolve)=>setTimeout(resolve, ms));
+    };
+    const localizeContentTypes = (contentTypes)=>{
+        return contentTypes.map((contentType)=>({
+                ...contentType,
+                fields: contentType.fields.map((field)=>({
+                        ...field,
+                        localized: true
+                    }))
+            }));
+    };
+    const sdk = {
+        field,
+        locales,
+        cmaAdapter: createFakeCMAAdapter({
+            Entry: {
+                get: async ({ entryId  })=>{
+                    if (props?.fetchDelay) {
+                        await delay(props.fetchDelay);
+                    }
+                    if (entryId === entries.empty.sys.id) {
+                        return entries.empty;
+                    }
+                    if (entryId === entries.published.sys.id) {
+                        return entries.published;
+                    }
+                    if (entryId === entries.changed.sys.id) {
+                        return entries.changed;
+                    }
+                    return Promise.reject({});
+                }
+            },
+            Asset: {
+                get: async ({ assetId  })=>{
+                    if (props?.fetchDelay) {
+                        await delay(props.fetchDelay);
+                    }
+                    if (assetId === assets.empty.sys.id) {
+                        return assets.empty;
+                    }
+                    if (assetId === assets.published.sys.id) {
+                        return assets.published;
+                    }
+                    if (assetId === assets.changed.sys.id) {
+                        return assets.changed;
+                    }
+                    return Promise.reject({});
+                }
+            },
+            Space: {
+                get: async (params)=>{
+                    if (params.spaceId === spaces.indifferent.sys.id) {
+                        return spaces.indifferent;
+                    }
+                    return Promise.reject({});
+                }
+            },
+            ContentType: {
+                get: async ({ contentTypeId  })=>{
+                    if (contentTypeId === contentTypes.published.sys.id) {
+                        return contentTypes.published;
+                    }
+                    return Promise.reject({});
+                }
+            },
+            Locale: {
+                getMany: async ()=>localesFixtures.list
+            }
+        }),
+        space: {
+            ...space,
+            getCachedContentTypes () {
+                return localizeContentTypes(space.getCachedContentTypes());
+            },
+            getContentTypes () {
+                return Promise.resolve(space.getContentTypes().then((response)=>{
+                    return {
+                        ...response,
+                        items: localizeContentTypes(response.items)
+                    };
+                }));
+            },
+            async getEntityScheduledActions () {
+                return [];
+            }
+        },
+        dialogs: {
+            selectSingleAsset: async ()=>{
+                selectorCounter++;
+                return assetLinks[selectorCounter % assetLinks.length];
+            },
+            selectMultipleAssets: async ()=>{
+                selectorCounter++;
+                return selectorCounter % 2 ? assetLinks.slice(0, 2) : [
+                    assetLinks[2]
+                ];
+            },
+            selectSingleEntry: async ()=>{
+                selectorCounter++;
+                return entryLinks[selectorCounter % entryLinks.length];
+            },
+            selectMultipleEntries: async ()=>{
+                selectorCounter++;
+                return selectorCounter % 2 ? entryLinks.slice(0, 2) : [
+                    entryLinks[2]
+                ];
+            }
+        },
+        navigator: {
+            openNewAsset: async ()=>({
+                    entity: newLink('Asset', assets.empty.sys.id)
+                }),
+            openAsset: async ()=>{
+                alert('open Asset in slide in');
+                return {};
+            },
+            openNewEntry: async ()=>({
+                    entity: newLink('Entry', entries.empty.sys.id)
+                }),
+            openEntry: async ()=>{
+                alert('open entry in slide in');
+                return {};
+            },
+            onSlideInNavigation: ()=>()=>({})
+        },
+        access: {
+            can: async ()=>true
+        },
+        ids: {
+            space: 'space-id',
+            environment: 'environment-id'
+        }
+    };
+    return [
+        sdk,
+        mitt
+    ];
+}

package/dist/esm/__fixtures__/asset/index.js

@@ -0,0 +1,6 @@
+import changed from './changed_asset.json';
+import created from './created_asset.json';
+import empty from './empty_asset.json';
+import invalid from './invalid_asset.json';
+import published from './published_asset.json';
+export { changed, empty, published, invalid, created };

package/dist/esm/__fixtures__/content-type/index.js

@@ -0,0 +1,2 @@
+import published from './published_content_type.json';
+export { published };

package/dist/esm/__fixtures__/entry/index.js

@@ -0,0 +1,5 @@
+import changed from './changed_entry.json';
+import empty from './empty_entry.json';
+import invalid from './invalid_entry.json';
+import published from './published_entry.json';
+export { changed, empty, published, invalid };

package/dist/esm/__fixtures__/fixtures.js

@@ -0,0 +1,6 @@
+import * as assets from './asset';
+import * as contentTypes from './content-type';
+import * as entries from './entry';
+import * as locales from './locale';
+import * as spaces from './space';
+export { assets, contentTypes, entries, locales, spaces };

package/dist/esm/__fixtures__/locale/index.js

@@ -0,0 +1,15 @@
+import englishDefault from './english_default_locale.json';
+import german from './german_locale.json';
+const list = {
+    sys: {
+        type: 'Array'
+    },
+    total: 2,
+    skip: 0,
+    limit: 100,
+    items: [
+        englishDefault,
+        german
+    ]
+};
+export { englishDefault, german, list };

package/dist/esm/__fixtures__/space/index.js

@@ -0,0 +1,2 @@
+import indifferent from './indifferent_space.json';
+export { indifferent };

package/dist/esm/codemirrorImports.js

@@ -0,0 +1,5 @@
+import 'codemirror/mode/markdown/markdown';
+import 'codemirror/mode/xml/xml';
+import 'codemirror/addon/edit/continuelist';
+import 'codemirror/addon/mode/overlay';
+import 'codemirror/addon/display/autorefresh';

package/dist/esm/components/HeadingSelector.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Menu } from '@contentful/f36-components';
+export const HeadingSelector = (props)=>{
+    const handleMenuClick = (heading)=>{
+        props.onSelect(heading);
+    };
+    return React.createElement(Menu, null, React.createElement(Menu.Trigger, null, props.children), React.createElement(Menu.List, null, React.createElement(Menu.Item, {
+        testId: "markdown-action-button-heading-h1",
+        onClick: ()=>handleMenuClick('h1')
+    }, "Heading 1"), React.createElement(Menu.Item, {
+        testId: "markdown-action-button-heading-h2",
+        onClick: ()=>handleMenuClick('h2')
+    }, "Heading 2"), React.createElement(Menu.Item, {
+        testId: "markdown-action-button-heading-h3",
+        onClick: ()=>handleMenuClick('h3')
+    }, "Heading 3")));
+};

package/dist/esm/components/InsertLinkSelector.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Button, Menu } from '@contentful/f36-components';
+import { AssetIcon, ChevronDownIcon } from '@contentful/f36-icons';
+export const InsertLinkSelector = (props)=>{
+    if (props.canAddNew) {
+        return React.createElement(MultipleMediaContextMenu, props);
+    } else {
+        return React.createElement(Button, {
+            isDisabled: props.disabled,
+            startIcon: React.createElement(AssetIcon, null),
+            testId: "markdownEditor.linkExistingAssets",
+            size: "small",
+            variant: "secondary",
+            onClick: ()=>{
+                props.onSelectExisting();
+            }
+        }, "Insert media");
+    }
+};
+const MultipleMediaContextMenu = (props)=>{
+    return React.createElement(Menu, {
+        placement: "bottom-end"
+    }, React.createElement(Menu.Trigger, null, React.createElement(Button, {
+        endIcon: React.createElement(ChevronDownIcon, null),
+        isDisabled: props.disabled,
+        startIcon: React.createElement(AssetIcon, null),
+        testId: "markdownEditor.insertMediaDropdownTrigger",
+        size: "small",
+        variant: "secondary"
+    }, "Insert media")), React.createElement(Menu.List, null, React.createElement(Menu.Item, {
+        testId: "markdownEditor.uploadAssetsAndLink",
+        onClick: ()=>props.onAddNew()
+    }, "Add new media and link"), React.createElement(Menu.Item, {
+        testId: "markdownEditor.linkExistingAssets",
+        onClick: ()=>props.onSelectExisting()
+    }, "Link existing media")));
+};

package/dist/esm/components/MarkdownBottomBar.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Paragraph, TextLink } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+const styles = {
+    root: css({
+        display: 'flex',
+        justifyContent: 'space-between',
+        background: tokens.gray100,
+        border: `1px solid ${tokens.gray400}`,
+        borderBottomLeftRadius: tokens.borderRadiusSmall,
+        borderBottomRightRadius: tokens.borderRadiusSmall,
+        padding: `${tokens.spacingXs} ${tokens.spacingS}`
+    }),
+    help: css({
+        color: tokens.gray700,
+        fontSize: tokens.fontSizeS,
+        button: {
+            fontSize: tokens.fontSizeS,
+            lineHeight: 'inherit'
+        }
+    })
+};
+export function MarkdownCounter(props) {
+    return React.createElement(Paragraph, {
+        marginBottom: "none",
+        className: styles.help
+    }, props.words, " ", props.words !== 1 ? 'words' : 'word', ", ", props.characters, ' ', props.characters !== 1 ? 'characters' : 'character');
+}
+export function MarkdownHelp(props) {
+    return React.createElement(Paragraph, {
+        marginBottom: "none",
+        className: styles.help
+    }, "Format your text like a pro with the", ' ', React.createElement(TextLink, {
+        as: "button",
+        testId: "open-markdown-cheatsheet-button",
+        onClick: ()=>{
+            props.onClick();
+        }
+    }, "markdown cheatsheet"), ".");
+}
+export function MarkdownBottomBar(props) {
+    return React.createElement("div", {
+        className: styles.root
+    }, props.children);
+}

package/dist/esm/components/MarkdownConstraints.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import tokens from '@contentful/f36-tokens';
+import { CharCounter, CharValidation, ConstraintsUtils } from '@contentful/field-editor-shared';
+import { css } from 'emotion';
+const styles = {
+    root: css({
+        display: 'flex',
+        justifyContent: 'space-between',
+        fontSize: tokens.fontSizeM,
+        marginTop: tokens.spacingXs,
+        color: tokens.gray700
+    })
+};
+export function MarkdownConstraints(props) {
+    const constraints = ConstraintsUtils.fromFieldValidations(props.sdk.field.validations, props.sdk.field.type);
+    const checkConstraint = ConstraintsUtils.makeChecker(constraints);
+    return React.createElement("div", {
+        className: styles.root
+    }, React.createElement(CharCounter, {
+        value: props.value,
+        checkConstraint: checkConstraint
+    }), React.createElement(CharValidation, {
+        constraints: constraints
+    }));
+}