@contentful/field-editor-markdown 1.2.0 → 1.3.0

package/dist/esm/components/MarkdownPreview.js

@@ -0,0 +1,195 @@
+import * as React from 'react';
+import tokens from '@contentful/f36-tokens';
+import DOMPurify from 'dompurify';
+import { css, cx } from 'emotion';
+import Markdown from 'markdown-to-jsx';
+import { replaceMailtoAmp } from '../utils/replaceMailtoAmp';
+const styles = {
+    root: css`
+    border: 1px solid ${tokens.gray400};
+    border-width: 0 1px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    min-height: 300px;
+    padding: ${tokens.spacingL};
+    font-size: ${tokens.fontSizeM};
+    font-family: ${tokens.fontStackPrimary};
+    line-height: ${tokens.lineHeightDefault};
+    color: ${tokens.gray700};
+    white-space: pre-line;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-top: ${tokens.spacingL};
+      margin-bottom: ${tokens.spacingM};
+      color: ${tokens.gray900};
+    }
+
+    h1:first-child,
+    h2:first-child,
+    h3:first-child,
+    h4:first-child,
+    h5:first-child,
+    h6:first-child {
+      margin-top: 0;
+    }
+
+    h1 {
+      font-size: 1.9em;
+    }
+    h2 {
+      font-size: 1.75em;
+    }
+    h3 {
+      font-size: 1.6em;
+    }
+    h4 {
+      font-size: 1.45em;
+    }
+    h5 {
+      font-size: 1.3em;
+    }
+    h6 {
+      font-size: 1.15em;
+    }
+
+    p {
+      margin-top: 0;
+      margin-bottom: ${tokens.spacingM};
+    }
+
+    ul,
+    ol {
+      margin: ${tokens.spacingS} 0;
+      padding-left: ${tokens.spacingM};
+    }
+    ul > li {
+      list-style-type: disc;
+      margin-bottom: 0;
+    }
+
+    ol > li {
+      list-style-type: decimal;
+      margin-bottom: 0;
+    }
+
+    table {
+      table-layout: fixed;
+      border-right-width: 0;
+      border-bottom-width: 0;
+      width: 80%;
+      margin: ${tokens.spacingM} auto;
+      border-spacing: 0;
+      border-collapse: collapse;
+      border: 1px solid ${tokens.gray300};
+    }
+
+    table th,
+    table td {
+      padding: 5px;
+      border-left-width: 0;
+      border-top-width: 0;
+    }
+
+    table th {
+      background: ${tokens.gray200};
+    }
+
+    table td {
+      border: 1px solid ${tokens.gray300};
+    }
+
+    a {
+      color: ${tokens.blue500};
+    }
+
+    hr {
+      margin-top: ${tokens.spacingL};
+      margin-bottom: ${tokens.spacingL};
+      height: 1px;
+      background-color: ${tokens.gray300};
+      border: none;
+    }
+
+    blockquote {
+      border-left: 4px solid ${tokens.gray200};
+      padding-left: ${tokens.spacingL};
+      margin: 0;
+      margin-top: ${tokens.spacingM};
+      font-style: italic;
+    }
+
+    img {
+      margin: ${tokens.spacingM} auto;
+      display: block;
+      max-width: 80%;
+      max-height: 250px;
+    }
+
+    pre code {
+      font-size: ${tokens.fontSizeS};
+      font-family: ${tokens.fontStackMonospace};
+    }
+
+    .embedly-card {
+      margin: ${tokens.spacingM} auto;
+      display: block;
+    }
+  `,
+    framed: css({
+        height: '100%',
+        maxHeight: '500px',
+        overflowY: 'auto'
+    }),
+    zen: css({
+        maxWidth: '650px',
+        margin: '0 auto',
+        border: 'none !important'
+    }),
+    rtl: css({
+        direction: 'rtl'
+    })
+};
+function MarkdownLink(props) {
+    const { Embedly , children , ...rest } = props;
+    if (props.className === 'embedly-card' && Embedly) {
+        return React.createElement(Embedly, {
+            url: props.href
+        });
+    }
+    return React.createElement("a", {
+        ...rest,
+        target: "_blank",
+        rel: "noopener noreferrer"
+    }, children);
+}
+export const MarkdownPreview = React.memo((props)=>{
+    const className = cx(styles.root, props.minHeight !== undefined ? css({
+        minHeight: props.minHeight
+    }) : undefined, props.mode === 'default' ? styles.framed : styles.zen, props.direction === 'rtl' ? styles.rtl : undefined);
+    const cleanHTML = React.useMemo(()=>{
+        return replaceMailtoAmp(DOMPurify.sanitize(props.value));
+    }, [
+        props.value
+    ]);
+    return React.createElement("div", {
+        className: className,
+        "data-test-id": "markdown-preview"
+    }, React.createElement(Markdown, {
+        options: {
+            overrides: {
+                a: {
+                    component: MarkdownLink,
+                    props: {
+                        Embedly: props.previewComponents?.embedly
+                    }
+                }
+            }
+        }
+    }, cleanHTML));
+});
+MarkdownPreview.displayName = 'MarkdownPreview';

package/dist/esm/components/MarkdownTabs.js

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import tokens from '@contentful/f36-tokens';
+import { css, cx } from 'emotion';
+const styles = {
+    root: css({
+        display: 'flex',
+        zIndex: 10,
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        overflow: 'hidden',
+        marginBottom: '-1px',
+        fontSize: tokens.fontSizeM
+    }),
+    tab: css({
+        cursor: 'pointer',
+        color: tokens.gray700,
+        padding: tokens.spacingXs,
+        minWidth: '70px',
+        border: `1px solid ${tokens.gray400}`,
+        borderTopLeftRadius: tokens.borderRadiusSmall,
+        borderTopRightRadius: tokens.borderRadiusSmall,
+        marginLeft: tokens.spacingXs,
+        textAlign: 'center',
+        backgroundColor: tokens.gray100,
+        borderBottomColor: tokens.gray100,
+        outline: 'none',
+        '&:focus': {
+            boxShadow: tokens.boxShadowHeavy
+        },
+        transition: `all ${tokens.transitionEasingDefault} ${tokens.transitionDurationShort}`
+    }),
+    inactiveTab: css({
+        background: tokens.gray200,
+        borderBottomColor: tokens.gray400,
+        '&:hover': {
+            background: tokens.gray300
+        }
+    })
+};
+function MarkdownTabItem(props) {
+    return React.createElement("div", {
+        className: cx(styles.tab, {
+            [styles.inactiveTab]: props.isActive === false
+        }),
+        onClick: ()=>{
+            props.onSelect(props.name);
+        },
+        onKeyDown: (e)=>{
+            if (e.keyCode === 13) {
+                props.onSelect(props.name);
+            }
+        },
+        tabIndex: 0,
+        role: "tab",
+        "aria-controls": props.name,
+        "aria-selected": props.isActive === true,
+        "data-test-id": props.testId
+    }, props.children);
+}
+export function MarkdownTabs(props) {
+    return React.createElement("div", {
+        className: styles.root
+    }, React.createElement(MarkdownTabItem, {
+        name: "editor",
+        onSelect: props.onSelect,
+        isActive: props.active === 'editor',
+        testId: "markdown-tab-md"
+    }, "Editor"), React.createElement(MarkdownTabItem, {
+        name: "preview",
+        onSelect: props.onSelect,
+        isActive: props.active === 'preview',
+        testId: "markdown-tab-preview"
+    }, "Preview"));
+}

package/dist/esm/components/MarkdownTextarea/CodeMirrorWrapper.js

@@ -0,0 +1,329 @@
+import CodeMirror from 'codemirror';
+import 'codemirror/addon/edit/matchbrackets';
+import throttle from 'lodash/throttle';
+import transform from 'lodash/transform';
+import * as userAgent from '../../utils/userAgent';
+function stripUnit(value) {
+    if (typeof value !== 'string') return value;
+    const cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
+    const matchedValue = value.match(cssRegex);
+    if (!matchedValue) {
+        throw new Error("Couldn't match unit in given string");
+    }
+    return parseFloat(value);
+}
+export function create(host, options) {
+    const { direction , fixedHeight , height , readOnly  } = options || {};
+    let initializedWithValue = false;
+    const LF = '\n';
+    const EDITOR_SIZE = {
+        min: height ? stripUnit(height) : 300,
+        max: 500,
+        shift: 50
+    };
+    const cm = CodeMirror(host, {
+        direction,
+        readOnly,
+        mode: 'markdown',
+        lineNumbers: false,
+        undoDepth: 200,
+        matchBrackets: true,
+        lineWrapping: true,
+        lineSeparator: null,
+        theme: 'elegant',
+        tabSize: 2,
+        indentWithTabs: false,
+        indentUnit: 2,
+        autoRefresh: true,
+        spellcheck: true,
+        inputStyle: 'contenteditable'
+    });
+    cm.setSize('100%', EDITOR_SIZE.min);
+    if (!fixedHeight) {
+        cm.on('change', throttle(assureHeight, 150));
+    }
+    cm.setOption('extraKeys', {
+        Tab: function() {
+            replaceSelectedText(getIndentation());
+        },
+        Enter: 'newlineAndIndentContinueMarkdownList',
+        Esc: ()=>{
+            cm.getInputField().blur();
+        }
+    });
+    return {
+        destroy,
+        disable,
+        enable,
+        attachEvent,
+        addKeyShortcuts,
+        setValue,
+        cmd,
+        moveToLineBeginning,
+        moveIfNotEmpty,
+        restoreCursor,
+        moveToLineEnd,
+        usePrimarySelection,
+        focus,
+        select,
+        selectBackwards,
+        selectAll: ()=>cm.execCommand('selectAll'),
+        extendSelectionBy,
+        insertAtCursor,
+        insertAtLineBeginning,
+        wrapSelection,
+        removeFromLineBeginning,
+        removeSelectedText,
+        replaceSelectedText,
+        getCursor,
+        setCursor,
+        getSelection,
+        getLine,
+        isLineEmpty,
+        getSelectedText,
+        getSelectionLength,
+        getCurrentLine,
+        getCurrentLineNumber,
+        getCurrentCharacter,
+        getCurrentLineLength,
+        lineStartsWith,
+        getIndentation,
+        getNl,
+        getValue,
+        getLinesCount,
+        getHistorySize,
+        setReadOnly: (value)=>cm.setOption('readOnly', value),
+        getHistory: ()=>cm.getHistory(),
+        setHistory: (history)=>cm.setHistory(history),
+        setFullsize: ()=>{
+            cm.setSize('100%', '100%');
+            cm.refresh();
+        },
+        refresh: ()=>cm.refresh()
+    };
+    function destroy() {
+        cm.toTextArea();
+    }
+    function disable() {
+        cm.setOption('readOnly', 'nocursor');
+    }
+    function enable() {
+        cm.setOption('readOnly', false);
+    }
+    function assureHeight() {
+        const current = cm.heightAtLine(cm.lastLine(), 'local') + EDITOR_SIZE.shift;
+        let next = current;
+        if (current < EDITOR_SIZE.min) {
+            next = EDITOR_SIZE.min;
+        }
+        if (current > EDITOR_SIZE.max) {
+            next = EDITOR_SIZE.max;
+        }
+        cm.setSize('100%', next);
+    }
+    function attachEvent(name, fn, throttleInterval) {
+        if (throttleInterval) {
+            fn = throttle(fn, throttleInterval);
+        }
+        cm.on(name, fn);
+    }
+    function addKeyShortcuts(map) {
+        const ctrlKey = userAgent.getCtrlKey();
+        cm.addKeyMap(transform(map, (acc, value, key)=>{
+            acc[ctrlKey + '-' + key] = value;
+        }, {}));
+    }
+    function setValue(value) {
+        value = value || '';
+        if (getValue() === value) {
+            return;
+        }
+        const line = getCurrentLineNumber();
+        const ch = getCurrentCharacter();
+        cm.setValue(value);
+        restoreCursor(ch, line, true);
+        if (!initializedWithValue) {
+            cm.clearHistory();
+            initializedWithValue = true;
+        }
+    }
+    function cmd(name) {
+        cm.execCommand(name);
+        cm.focus();
+    }
+    function moveToLineBeginning(lineNumber) {
+        cm.setCursor({
+            line: defaultToCurrentLineNumber(lineNumber),
+            ch: 0
+        });
+        cm.focus();
+    }
+    function moveIfNotEmpty() {
+        if (getCurrentLineLength() < 1) {
+            return;
+        }
+        const next = getCurrentLineNumber() + 1;
+        if (cm.lastLine() < next) {
+            moveToLineEnd();
+            insertAtCursor(getNl());
+        }
+        moveToLineBeginning(next);
+    }
+    function restoreCursor(character, lineNumber, noFocus) {
+        cm.setCursor(defaultToCurrentLineNumber(lineNumber), character, {
+            scroll: !noFocus
+        });
+        if (!noFocus) {
+            cm.focus();
+        }
+    }
+    function moveToLineEnd(lineNumber) {
+        cm.setCursor({
+            line: defaultToCurrentLineNumber(lineNumber),
+            ch: getCurrentLineLength()
+        });
+        cm.focus();
+    }
+    function defaultToCurrentLineNumber(lineNumber) {
+        if (lineNumber === 0 || lineNumber !== undefined && lineNumber > 0) {
+            return lineNumber;
+        }
+        return getCurrentLineNumber();
+    }
+    function usePrimarySelection() {
+        cmd('singleSelection');
+    }
+    function focus() {
+        cm.focus();
+    }
+    function select(from, to) {
+        cm.setSelection(from, to);
+        cm.focus();
+    }
+    function selectBackwards(skip, len) {
+        select(getPos(-skip - len), getPos(-skip));
+        function getPos(modifier) {
+            return {
+                line: getCurrentLineNumber(),
+                ch: getCurrentCharacter() + modifier
+            };
+        }
+    }
+    function extendSelectionBy(modifier) {
+        select(getPos('anchor', 0), getPos('head', modifier));
+        function getPos(prop, modifier) {
+            const selection = getSelection();
+            if (!selection) {
+                return {
+                    line: 0,
+                    ch: 0
+                };
+            }
+            return {
+                line: selection[prop].line,
+                ch: selection[prop].ch + modifier
+            };
+        }
+    }
+    function insertAtCursor(text) {
+        cm.replaceRange(text, cm.getCursor());
+        cm.focus();
+    }
+    function insertAtLineBeginning(text) {
+        const initialCh = getCurrentCharacter();
+        moveToLineBeginning();
+        insertAtCursor(text);
+        restoreCursor(initialCh + text.length);
+        cm.focus();
+    }
+    function wrapSelection(wrapper) {
+        const replacement = wrapper + getSelectedText() + wrapper;
+        const selection = getSelection();
+        if (selection) {
+            cm.replaceRange(replacement, selection.anchor, selection?.head);
+            cm.focus();
+        }
+    }
+    function removeFromLineBeginning(charCount) {
+        const lineNumber = getCurrentLineNumber();
+        cm.replaceRange('', {
+            line: lineNumber,
+            ch: 0
+        }, {
+            line: lineNumber,
+            ch: charCount
+        });
+        cm.focus();
+    }
+    function removeSelectedText() {
+        cm.replaceSelection('');
+        cm.focus();
+    }
+    function replaceSelectedText(replacement, select) {
+        cm.replaceSelection(replacement, select);
+        cm.focus();
+    }
+    function getCursor() {
+        return cm.getCursor();
+    }
+    function setCursor(cursor) {
+        cm.setCursor(cursor);
+    }
+    function getSelection() {
+        const selections = cm.listSelections();
+        if (!cm.somethingSelected() || !selections || selections.length < 1) {
+            return null;
+        }
+        return selections[0];
+    }
+    function getLine(lineNumber) {
+        return cm.getLine(lineNumber) || '';
+    }
+    function isLineEmpty(lineNumber) {
+        const n = defaultToCurrentLineNumber(lineNumber);
+        return n > -1 && getLine(n).length < 1 && n < cm.lineCount();
+    }
+    function getLinesCount() {
+        return cm.lineCount();
+    }
+    function getSelectedText() {
+        return getSelection() ? cm.getSelection() : '';
+    }
+    function getSelectionLength() {
+        return getSelectedText().length;
+    }
+    function getCurrentLine() {
+        return getLine(getCurrentLineNumber());
+    }
+    function getCurrentLineNumber() {
+        return cm.getCursor().line;
+    }
+    function getCurrentCharacter() {
+        return cm.getCursor().ch;
+    }
+    function getCurrentLineLength() {
+        return getCurrentLine().length;
+    }
+    function lineStartsWith(text) {
+        return getCurrentLine().startsWith(text);
+    }
+    function getIndentation() {
+        return repeat(' ', cm.getOption('indentUnit') ?? 0);
+    }
+    function getNl(n = 1) {
+        if (n < 1) {
+            return '';
+        }
+        return repeat(LF, n);
+    }
+    function getValue() {
+        return cm.getValue() || '';
+    }
+    function getHistorySize(which) {
+        const history = cm.historySize();
+        return which ? history[which] : history;
+    }
+    function repeat(what, n) {
+        return new Array(n + 1).join(what);
+    }
+}