@contentful/field-editor-markdown 1.2.0 → 1.3.0

package/dist/esm/dialogs/renderMarkdownDialog.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { MarkdownDialogType } from '../types';
+import { CheatsheetModalDialog } from './CheatsheetModalDialog';
+import { ConfirmInsertAssetModalDialog } from './ConfirmInsertAssetModalDialog';
+import { EmbedExternalContentModal } from './EmdebExternalContentDialog';
+import { InsertLinkModal } from './InsertLinkModalDialog';
+import { InsertTableModal } from './InsertTableModalDialog';
+import { SpecialCharacterModalDialog } from './SpecialCharacterModalDialog';
+import { ZenModeModalDialog } from './ZenModeModalDialog';
+export const renderMarkdownDialog = (sdk)=>{
+    const parameters = sdk.parameters.invocation;
+    if (parameters.type === MarkdownDialogType.cheatsheet) {
+        sdk.window.startAutoResizer();
+        return React.createElement(CheatsheetModalDialog, null);
+    } else if (parameters.type === MarkdownDialogType.insertLink) {
+        const selectedText = parameters.selectedText;
+        sdk.window.startAutoResizer();
+        return React.createElement(InsertLinkModal, {
+            selectedText: selectedText,
+            onClose: sdk.close
+        });
+    } else if (parameters.type === MarkdownDialogType.insertSpecialCharacter) {
+        sdk.window.startAutoResizer();
+        return React.createElement(SpecialCharacterModalDialog, {
+            onClose: sdk.close
+        });
+    } else if (parameters.type === MarkdownDialogType.insertTable) {
+        sdk.window.startAutoResizer();
+        return React.createElement(InsertTableModal, {
+            onClose: sdk.close
+        });
+    } else if (parameters.type === MarkdownDialogType.embedExternalContent) {
+        sdk.window.startAutoResizer();
+        return React.createElement(EmbedExternalContentModal, {
+            onClose: sdk.close
+        });
+    } else if (parameters.type === MarkdownDialogType.confirmInsertAsset) {
+        const locale = parameters.locale;
+        const assets = parameters.assets;
+        sdk.window.startAutoResizer();
+        return React.createElement(ConfirmInsertAssetModalDialog, {
+            onClose: sdk.close,
+            locale: locale,
+            assets: assets
+        });
+    } else if (parameters.type === MarkdownDialogType.zenMode) {
+        const locale = parameters.locale;
+        const initialValue = parameters.initialValue;
+        sdk.window.updateHeight('100%');
+        return React.createElement(ZenModeModalDialog, {
+            onClose: sdk.close,
+            saveValueToSDK: ()=>{},
+            initialValue: initialValue,
+            locale: locale,
+            sdk: sdk
+        });
+    }
+    return React.createElement("div", null);
+};

package/dist/esm/index.js

@@ -0,0 +1,5 @@
+import './codemirrorImports';
+export { MarkdownEditorConnected as MarkdownEditor } from './MarkdownEditor';
+export { MarkdownPreview } from './components/MarkdownPreview';
+export { openMarkdownDialog } from './dialogs/openMarkdownDialog';
+export { renderMarkdownDialog } from './dialogs/renderMarkdownDialog';

package/dist/esm/types.js

@@ -0,0 +1,10 @@
+export var MarkdownDialogType;
+(function(MarkdownDialogType) {
+    MarkdownDialogType["cheatsheet"] = 'markdown-cheatsheet';
+    MarkdownDialogType["insertLink"] = 'markdown-insertLink';
+    MarkdownDialogType["insertSpecialCharacter"] = 'markdown-insertSpecialCharacter';
+    MarkdownDialogType["insertTable"] = 'markdown-insertTable';
+    MarkdownDialogType["embedExternalContent"] = 'markdown-embedExternalContent';
+    MarkdownDialogType["confirmInsertAsset"] = 'markdown-confirmInsertAsset';
+    MarkdownDialogType["zenMode"] = 'markdown-zenMode';
+})(MarkdownDialogType || (MarkdownDialogType = {}));

package/dist/esm/utils/insertAssetLinks.js

@@ -0,0 +1,99 @@
+import get from 'lodash/get';
+import isObject from 'lodash/isObject';
+function normalizeWhiteSpace(str) {
+    if (str) {
+        return str.trim().replace(/\s{2,}/g, ' ');
+    } else {
+        return str;
+    }
+}
+function removeExtension(str) {
+    return str.replace(/\.\w+$/g, '');
+}
+function fileNameToTitle(str) {
+    return normalizeWhiteSpace(removeExtension(str).replace(/_/g, ' '));
+}
+export function replaceAssetDomain(fileUrl) {
+    const assetDomainMap = {
+        images: 'images.ctfassets.net',
+        assets: 'assets.ctfassets.net',
+        downloads: 'downloads.ctfassets.net',
+        videos: 'videos.ctfassets.net'
+    };
+    return fileUrl.replace(/(images|assets|downloads|videos).contentful.com/, (_, p1)=>{
+        return assetDomainMap[p1];
+    });
+}
+function makeAssetLink(asset, { localeCode , fallbackCode , defaultLocaleCode  }) {
+    const localizedFile = get(asset, [
+        'fields',
+        'file',
+        localeCode
+    ]);
+    const fallbackFile = fallbackCode ? get(asset, [
+        'fields',
+        'file',
+        fallbackCode
+    ]) : null;
+    const defaultFile = get(asset, [
+        'fields',
+        'file',
+        defaultLocaleCode
+    ]);
+    const file = localizedFile || fallbackFile || defaultFile;
+    if (isObject(file) && file.url) {
+        const title = get(asset, [
+            'fields',
+            'title',
+            localeCode
+        ]) || get(asset, [
+            'fields',
+            'title',
+            fallbackCode || ''
+        ]) || get(asset, [
+            'fields',
+            'title',
+            defaultLocaleCode
+        ]) || fileNameToTitle(file.fileName);
+        const fileUrl = replaceAssetDomain(file.url);
+        return {
+            title,
+            asset,
+            url: fileUrl,
+            isLocalized: Boolean(localizedFile),
+            isFallback: Boolean(fallbackFile),
+            asMarkdown: `![${title}](${fileUrl})`
+        };
+    } else {
+        return null;
+    }
+}
+export async function insertAssetLinks(assets, locales) {
+    const otherLocales = assets.filter((asset)=>{
+        return !get(asset, [
+            'fields',
+            'file',
+            locales.localeCode
+        ]);
+    });
+    const linksWithMeta = assets.map((asset)=>makeAssetLink(asset, locales)).filter((asset)=>asset !== null);
+    if (otherLocales.length > 0) {
+        const fallbackAssets = linksWithMeta.filter(({ isLocalized  })=>!isLocalized).map(({ title , isFallback , asset  })=>{
+            const code = isFallback ? locales.fallbackCode : locales.defaultLocaleCode;
+            return {
+                title,
+                thumbnailUrl: asset.fields.file[code].url,
+                thumbnailAltText: title,
+                description: isFallback ? `Fallback locale (${code})` : `Default locale (${code})`,
+                asset: asset
+            };
+        });
+        return {
+            fallbacks: fallbackAssets,
+            links: linksWithMeta
+        };
+    }
+    return {
+        links: linksWithMeta
+    };
+}

package/dist/esm/utils/insertAssetLinks.spec.js

@@ -0,0 +1,18 @@
+import { replaceAssetDomain } from './insertAssetLinks';
+describe('replaceAssetDomain', ()=>{
+    it('should replace contentful.com domains to ctfassets.net', ()=>{
+        expect(replaceAssetDomain('//images.contentful.com/image.jpg')).toBe('//images.ctfassets.net/image.jpg');
+        expect(replaceAssetDomain('//videos.contentful.com/video.mp4')).toBe('//videos.ctfassets.net/video.mp4');
+        expect(replaceAssetDomain('//downloads.contentful.com/file.doc')).toBe('//downloads.ctfassets.net/file.doc');
+        expect(replaceAssetDomain('//assets.contentful.com/file.doc')).toBe('//assets.ctfassets.net/file.doc');
+        expect(replaceAssetDomain('https://images.contentful.com/image.jpg')).toBe('https://images.ctfassets.net/image.jpg');
+        expect(replaceAssetDomain('https://videos.contentful.com/video.mp4')).toBe('https://videos.ctfassets.net/video.mp4');
+        expect(replaceAssetDomain('https://downloads.contentful.com/file.doc')).toBe('https://downloads.ctfassets.net/file.doc');
+        expect(replaceAssetDomain('https://assets.contentful.com/file.doc')).toBe('https://assets.ctfassets.net/file.doc');
+    });
+    it('should not replace domains not listed on the map', ()=>{
+        expect(replaceAssetDomain('//documents.contentful.com/image.jpg')).toBe('//documents.contentful.com/image.jpg');
+        expect(replaceAssetDomain('anyotherdomain.com/file.doc')).toBe('anyotherdomain.com/file.doc');
+        expect(replaceAssetDomain('https://anyotherdomain.com/file.doc')).toBe('https://anyotherdomain.com/file.doc');
+    });
+});

package/dist/esm/utils/isValidUrl.js

@@ -0,0 +1,4 @@
+export const urlRegex = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?$/;
+export function isValidUrl(value) {
+    return urlRegex.test(value);
+}

package/dist/esm/utils/linkOrganizer.js

@@ -0,0 +1,152 @@
+import extend from 'lodash/extend';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
+import max from 'lodash/max';
+import isFinite from 'lodash/isFinite';
+import forEach from 'lodash/forEach';
+function extractTitle(title) {
+    title = title || '';
+    title = title.replace(/^ *('|"|\()*/, '');
+    title = title.replace(/('|"|\))* *$/, '');
+    return title;
+}
+function head(text) {
+    return text.split(' ').shift();
+}
+function tail(text) {
+    const segments = text.split(' ');
+    segments.shift();
+    return segments.join(' ');
+}
+const PROCESSORS = {
+    inline: function(match) {
+        return {
+            match: match[0],
+            text: match[1],
+            href: head(match[2]),
+            title: extractTitle(tail(match[2]))
+        };
+    },
+    ref: function(match) {
+        return {
+            match: match[0],
+            text: match[1],
+            id: match[2]
+        };
+    },
+    label: function(match) {
+        return {
+            match: match[0],
+            id: match[1],
+            href: head(match[2]),
+            title: extractTitle(tail(match[2]))
+        };
+    }
+};
+const REGEXS = {
+    inline: /\[([^\r\n[\]]+)]\(([^\r\n)]+)\)/,
+    ref: /\[([^\r\n[\]]+)] ?\[([^\r\n[\]]+)]/,
+    label: /^ {0,3}\[([^\r\n[\]]+)]:\s+(.+)$/
+};
+export const findInline = makeFinder('inline');
+export const findRefs = makeFinder('ref');
+export const findLabels = makeFinder('label');
+export function convertInlineToRef(text) {
+    let id = findMaxLabelId(text);
+    forEach(findInline(text), (inline)=>{
+        id += 1;
+        text = text.replace(inline.match, buildRef(inline, id));
+        text += '\n' + buildLabel(inline, id);
+    });
+    return text;
+}
+function mergeLabels(text) {
+    const byHref = {};
+    const byOldId = {};
+    forEach(findLabels(text), (label)=>{
+        const alreadyAdded = byHref[label.href];
+        const current = extend({}, label);
+        if (!alreadyAdded) {
+            byHref[current.href] = current;
+        } else if (hasTitle(current) && !hasTitle(alreadyAdded)) {
+            alreadyAdded.title = current.title;
+        }
+        byOldId[current.id] = alreadyAdded || current;
+    });
+    return {
+        byHref: byHref,
+        byOldId: byOldId
+    };
+}
+export function rewriteRefs(text) {
+    const merged = mergeLabels(text);
+    const hrefToRefId = {};
+    const labels = [];
+    const rewrites = [];
+    let i = 1;
+    forEach(findRefs(text), (ref)=>{
+        const oldLabel = merged.byOldId[ref.id];
+        if (!oldLabel) {
+            return;
+        }
+        const href = oldLabel.href;
+        let newRefId = hrefToRefId[href];
+        if (!newRefId) {
+            hrefToRefId[href] = newRefId = i;
+            i += 1;
+            labels.push(extend({
+                newId: newRefId
+            }, oldLabel));
+        }
+        rewrites.push(extend({
+            newId: newRefId
+        }, ref));
+    });
+    forEach(findLabels(text), (label)=>{
+        text = text.replace(label.match, '');
+    });
+    text = text.replace(/[\r\n\s]*$/, '');
+    text += '\n\n';
+    forEach(rewrites, (ref)=>{
+        text = text.replace(ref.match, buildRef(ref, ref.newId));
+    });
+    forEach(labels, (label)=>{
+        text += '\n' + buildLabel(label, label.newId);
+    });
+    return text;
+}
+function makeFinder(type) {
+    return (text)=>findAll(text, type).map(PROCESSORS[type]);
+}
+export function findMaxLabelId(textOrLabels) {
+    if (isString(textOrLabels)) {
+        textOrLabels = findLabels(textOrLabels);
+    }
+    const ids = textOrLabels.map((x)=>x.id).map((x)=>parseInt(x, 10)).filter((x)=>isFinite(x) && x > 0);
+    return ids.length > 0 ? max(ids) || 0 : 0;
+}
+function findAll(text, type) {
+    const flags = 'g' + (type === 'label' ? 'm' : '');
+    const matches = [];
+    const re = new RegExp(REGEXS[type].source, flags);
+    let found = re.exec(text);
+    while(found){
+        matches.push(found);
+        re.lastIndex = found.index + found[0].length;
+        found = re.exec(text);
+    }
+    return matches;
+}
+function hasTitle(link) {
+    return isObject(link) && isString(link.title) && link.title.length > 0;
+}
+function buildLabel(link, id) {
+    let markup = '[' + id + ']: ' + link.href;
+    if (hasTitle(link)) {
+        markup += ' "' + link.title + '"';
+    }
+    return markup;
+}
+function buildRef(link, id) {
+    return '[' + link.text + '][' + id + ']';
+}

package/dist/esm/utils/linkOrganizer.spec.js

@@ -0,0 +1,53 @@
+import * as LinkOrganizer from './linkOrganizer';
+describe('Link organizer', ()=>{
+    describe('Inline link finder', ()=>{
+        it('Finds all inline links in text', ()=>{
+            const subject = 'test [link](http://url.com) test [link2](http://url2.com) test [link3](http://url.com)';
+            const found = LinkOrganizer.findInline(subject);
+            expect(found).toHaveLength(3);
+            expect(found[0].match).toBe('[link](http://url.com)');
+            expect(found[0].text).toBe('link');
+            expect(found[0].href).toBe('http://url.com');
+            expect(found[0].title).toBe('');
+        });
+        it('Finds and standardizes title', ()=>{
+            const subject = 'test [x](http://url.com   "title!") [y](http://xyz.com title 2   )';
+            const found = LinkOrganizer.findInline(subject);
+            expect(found).toHaveLength(2);
+            expect(found[0].title).toBe('title!');
+            expect(found[1].title).toBe('title 2');
+        });
+    });
+    describe('Reference finder', ()=>{
+        it('Finds all references in text', ()=>{
+            const subject = 'test [x][1] test [y][2] [with space separator] [3]';
+            const found = LinkOrganizer.findRefs(subject);
+            expect(found).toHaveLength(3);
+            expect(found[0].match).toBe('[x][1]');
+            expect(found[2].match).toBe('[with space separator] [3]');
+            expect(found[1].text).toBe('y');
+            expect(found[1].id).toBe('2');
+        });
+    });
+    describe('Label finder', ()=>{
+        const subject = [
+            '[1]:  http://test.com',
+            '[2]: http://url.com',
+            '[string]: http://url.com',
+            '[4]: http://test.com  "Hello world"'
+        ].join('\n');
+        it('Finds all labels', ()=>{
+            const found = LinkOrganizer.findLabels(subject);
+            expect(found).toHaveLength(4);
+            expect(found[0].id).toBe('1');
+            expect(found[2].id).toBe('string');
+            expect(found[0].href).toBe('http://test.com');
+            expect(found[3].href).toBe('http://test.com');
+            expect(found[1].title).toBe('');
+            expect(found[3].title).toBe('Hello world');
+        });
+        it('Finds max label id', ()=>{
+            expect(LinkOrganizer.findMaxLabelId(subject)).toBe(4);
+        });
+    });
+});

package/dist/esm/utils/replaceMailtoAmp.js

@@ -0,0 +1,5 @@
+export const replaceMailtoAmp = (string)=>{
+    return string.replace(/href="mailto:[^"]*&/g, function(match) {
+        return match.replace(/&/g, '&');
+    });
+};

package/dist/esm/utils/replaceMailtoAmp.spec.js

@@ -0,0 +1,18 @@
+import { replaceMailtoAmp } from './replaceMailtoAmp';
+describe('replace inside mailto', ()=>{
+    let str = '<a href="mailto:example@example.com?subject=Hello&amp;body=Hello%20world">Send Email</a>';
+    test('replace &amp; with &', ()=>{
+        const newStr = replaceMailtoAmp(str);
+        expect(newStr).toBe('<a href="mailto:example@example.com?subject=Hello&body=Hello%20world">Send Email</a>');
+    });
+    test('no replace if not inside mailto', ()=>{
+        str = '<a href="https://example.com?subject=Hello&amp;body=Hello%20world">Visit Website</a>';
+        const newStr = replaceMailtoAmp(str);
+        expect(newStr).toBe('<a href="https://example.com?subject=Hello&amp;body=Hello%20world">Visit Website</a>');
+    });
+    test('no replace if no &amp;', ()=>{
+        str = '<a href="mailto:example@example.com?subject=Hello">Send Email</a>';
+        const newStr = replaceMailtoAmp(str);
+        expect(newStr).toBe('<a href="mailto:example@example.com?subject=Hello">Send Email</a>');
+    });
+});

package/dist/esm/utils/specialCharacters.js

@@ -0,0 +1,218 @@
+export const specialCharacters = [
+    {
+        code: 180,
+        desc: 'acute accent'
+    },
+    {
+        code: 38,
+        desc: 'ampersand'
+    },
+    {
+        code: 166,
+        desc: 'broken vertical bar'
+    },
+    {
+        code: 8226,
+        desc: 'bullet'
+    },
+    {
+        code: 184,
+        desc: 'cedilla'
+    },
+    {
+        code: 162,
+        desc: 'cent'
+    },
+    {
+        code: 169,
+        desc: 'copyright'
+    },
+    {
+        code: 176,
+        desc: 'degree'
+    },
+    {
+        code: 247,
+        desc: 'division'
+    },
+    {
+        code: 189,
+        desc: 'fraction half'
+    },
+    {
+        code: 188,
+        desc: 'fraction quarter'
+    },
+    {
+        code: 190,
+        desc: 'fraction three quarters'
+    },
+    {
+        code: 62,
+        desc: 'greater than'
+    },
+    {
+        code: 161,
+        desc: 'inverted exclamation mark'
+    },
+    {
+        code: 191,
+        desc: 'inverted question mark'
+    },
+    {
+        code: 171,
+        desc: 'left-pointing double angle quotation mark'
+    },
+    {
+        code: 60,
+        desc: 'less than'
+    },
+    {
+        code: 175,
+        desc: 'macron'
+    },
+    {
+        code: 181,
+        desc: 'micro'
+    },
+    {
+        code: 160,
+        desc: 'non-breaking space'
+    },
+    {
+        code: 172,
+        desc: 'not'
+    },
+    {
+        code: 182,
+        desc: 'paragraph'
+    },
+    {
+        code: 177,
+        desc: 'plus-minus'
+    },
+    {
+        code: 34,
+        desc: 'quotation mark'
+    },
+    {
+        code: 174,
+        desc: 'registered'
+    },
+    {
+        code: 187,
+        desc: 'right-pointing double angle quotation mark'
+    },
+    {
+        code: 167,
+        desc: 'section'
+    },
+    {
+        code: 168,
+        desc: 'umlaut/diaeresis'
+    },
+    {
+        code: 215,
+        desc: 'multiplication'
+    },
+    {
+        code: 8482,
+        desc: 'trade mark'
+    },
+    {
+        code: 8364,
+        desc: 'euro'
+    },
+    {
+        code: 163,
+        desc: 'pound'
+    },
+    {
+        code: 165,
+        desc: 'yen'
+    },
+    {
+        code: 8222,
+        desc: 'double low-9 quotation mark'
+    },
+    {
+        code: 710,
+        desc: 'modifier circumflex accent'
+    },
+    {
+        code: 8224,
+        desc: 'dagger'
+    },
+    {
+        code: 8225,
+        desc: 'double dagger'
+    },
+    {
+        code: 8230,
+        desc: 'horizontal ellipsis'
+    },
+    {
+        code: 8220,
+        desc: 'left double quotation mark'
+    },
+    {
+        code: 8249,
+        desc: 'single left-pointing angle quotation mark'
+    },
+    {
+        code: 8216,
+        desc: 'left single quotation mark'
+    },
+    {
+        code: 183,
+        desc: 'middle dot'
+    },
+    {
+        code: 8212,
+        desc: 'em dash'
+    },
+    {
+        code: 8211,
+        desc: 'en dash'
+    },
+    {
+        code: 8240,
+        desc: 'per mille'
+    },
+    {
+        code: 8250,
+        desc: 'single right-pointing angle quotation mark'
+    },
+    {
+        code: 8217,
+        desc: 'right single quotation mark'
+    },
+    {
+        code: 8218,
+        desc: 'single low-9 quotation mark'
+    },
+    {
+        code: 170,
+        desc: 'feminine ordinal indicator'
+    },
+    {
+        code: 186,
+        desc: 'masculine ordinal indicator'
+    },
+    {
+        code: 8221,
+        desc: 'right double quotation mark'
+    },
+    {
+        code: 732,
+        desc: 'small tilde'
+    },
+    {
+        code: 9829,
+        desc: 'black heart'
+    },
+    {
+        code: 9830,
+        desc: 'diamond'
+    }
+];

package/dist/esm/utils/userAgent.js

@@ -0,0 +1,13 @@
+import get from 'lodash/get';
+const userAgent = get(window, 'navigator.userAgent', '');
+const platform = get(window, 'navigator.platform', '');
+let ctrlKey = 'Ctrl';
+const tests = {
+    ios: /(iphone os|ipad|iphone|ipod)/i.test(userAgent) && !window.MSStream
+};
+if (tests.ios || /mac(68k|ppc|intel)/i.test(platform)) {
+    ctrlKey = 'Cmd';
+}
+export function getCtrlKey() {
+    return ctrlKey;
+}