@contentful/field-editor-markdown 1.2.0 → 1.3.0

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

@@ -0,0 +1,218 @@
+import max from 'lodash/max';
+import min from 'lodash/min';
+import range from 'lodash/range';
+import times from 'lodash/times';
+import repeat from 'lodash/repeat';
+function createPrefixToggleFn(prefix) {
+    return (editor)=>{
+        if (editor.lineStartsWith(prefix)) {
+            editor.removeFromLineBeginning(prefix.length);
+        } else {
+            editor.insertAtLineBeginning(prefix);
+        }
+    };
+}
+function wrapSelection(editor, marker, emptyText) {
+    return ()=>{
+        editor.usePrimarySelection();
+        if (editor.getSelection()) {
+            const selectedText = editor.getSelectedText();
+            if (selectedText.startsWith(marker) && selectedText.endsWith(marker)) {
+                const markerLength = marker.length;
+                const textWithoutMarker = selectedText.slice(markerLength, selectedText.length - markerLength);
+                editor.replaceSelectedText(textWithoutMarker);
+            } else {
+                editor.wrapSelection(marker);
+            }
+        } else {
+            editor.insertAtCursor(marker + emptyText + marker);
+            editor.selectBackwards(marker.length, emptyText.length);
+        }
+    };
+}
+const HEADER_CHAR = '#';
+const quoteToggleFn = createPrefixToggleFn('> ');
+const codeToggleFn = createPrefixToggleFn('    ');
+export function create(editor) {
+    return {
+        bold: wrapSelection(editor, '__', 'text in bold'),
+        italic: wrapSelection(editor, '*', 'text in italic'),
+        strike: wrapSelection(editor, '~~', 'striked out'),
+        quote: modifySelection(editor, quoteToggleFn),
+        code: modifySelection(editor, codeToggleFn),
+        link,
+        h1: toggleHeader(editor, 1),
+        h2: toggleHeader(editor, 2),
+        h3: toggleHeader(editor, 3),
+        ul: modifySelection(editor, ulToggleFn, true),
+        ol: modifySelection(editor, olToggleFn, true),
+        undo: function() {
+            editor.cmd('undo');
+        },
+        redo: function() {
+            editor.cmd('redo');
+        },
+        hr,
+        indent,
+        dedent,
+        table
+    };
+    function hr() {
+        editor.moveIfNotEmpty();
+        const nl = editor.getNl();
+        const markup = nl + '---' + nl + nl;
+        editor.insertAtCursor(markup);
+    }
+    function indent() {
+        editor.insertAtLineBeginning(editor.getIndentation());
+    }
+    function dedent() {
+        const indentation = editor.getIndentation();
+        if (editor.lineStartsWith(indentation)) {
+            editor.removeFromLineBeginning(indentation.length);
+        }
+    }
+    function table(config) {
+        const nl = editor.getNl();
+        editor.moveIfNotEmpty();
+        editor.insertAtCursor(nl);
+        const line = editor.getCurrentLineNumber();
+        editor.insertAtCursor(tableTemplate(config.rows, config.cols).join(nl));
+        editor.insertAtCursor(nl + nl);
+        editor.restoreCursor(2, line);
+    }
+    function link(url, text, title) {
+        editor.usePrimarySelection();
+        const linkTitle = title ? ' "' + title + '"' : '';
+        const link = text ? '[' + text + '](' + url + linkTitle + ')' : '<' + url + '>';
+        editor.replaceSelectedText(link, 'around');
+    }
+}
+function modifySelection(editor, toggleFn, isList) {
+    return ()=>{
+        editor.usePrimarySelection();
+        const selection = editor.getSelection();
+        if (selection) {
+            forLineIn(selection, (lineNumber, listNumber)=>{
+                editor.moveToLineBeginning(lineNumber);
+                toggleFn(editor, listNumber);
+            });
+            editor.moveToLineEnd();
+        } else {
+            if (isList && !getListNumber(editor) && !editor.lineStartsWith('- ')) {
+                prepareListWhitespace(editor);
+            }
+            toggleFn(editor);
+        }
+    };
+}
+function forLineIn(selection, cb) {
+    const lines = [
+        selection.anchor.line,
+        selection.head.line
+    ];
+    const maxNumber = max(lines);
+    const minNumber = min(lines);
+    const lineRange = range(minNumber || 0, maxNumber !== undefined ? maxNumber + 1 : undefined);
+    lineRange.forEach((lineNumber, i)=>{
+        cb(lineNumber, i + 1);
+    });
+}
+function prepareListWhitespace(editor) {
+    const line = editor.getCurrentLineNumber();
+    const isCurrentLineEmpty = editor.isLineEmpty(line);
+    const isPrevLineEmpty = line > 0 ? editor.isLineEmpty(line - 1) : false;
+    const isNextLineEmpty = line < editor.getLinesCount() - 1 ? editor.isLineEmpty(line + 1) : true;
+    let linesToInsert = isCurrentLineEmpty ? 2 : 4;
+    if (isPrevLineEmpty) {
+        linesToInsert = linesToInsert - 1;
+    }
+    if (isNextLineEmpty) {
+        linesToInsert = linesToInsert - 1;
+    }
+    editor.moveToLineEnd();
+    editor.insertAtCursor(editor.getNl(linesToInsert));
+    editor.restoreCursor(0, isCurrentLineEmpty ? line : line + 2);
+}
+function getListNumber(editor) {
+    const result = editor.getCurrentLine().match(/^(\d+\. )/);
+    return result ? result[1] : null;
+}
+function ulToggleFn(editor) {
+    if (editor.lineStartsWith('- ')) {
+        editor.removeFromLineBeginning(2);
+    } else {
+        const listNumber = getListNumber(editor);
+        if (listNumber) {
+            editor.removeFromLineBeginning(listNumber.length);
+        }
+        editor.insertAtLineBeginning('- ');
+    }
+}
+function olToggleFn(editor, n) {
+    const listNumber = getListNumber(editor);
+    if (listNumber) {
+        editor.removeFromLineBeginning(listNumber.length);
+    } else {
+        if (editor.lineStartsWith('- ')) {
+            editor.removeFromLineBeginning(2);
+        }
+        editor.insertAtLineBeginning((n || 1) + '. ');
+    }
+}
+function tableTemplate(nrows, ncols) {
+    const cellWidth = new Array(11);
+    const cell = ' ' + cellWidth.join(' ') + ' |';
+    const separatorCell = ' ' + cellWidth.join('-') + ' |';
+    let baseRow = '|';
+    let separatorRow = '|';
+    times(ncols, ()=>{
+        baseRow += cell;
+        separatorRow += separatorCell;
+    });
+    const bodyRows = range(nrows).map(()=>baseRow.replace(/\| {5}/g, '| Cell'));
+    const headerRow = baseRow.replace(/\| {7}/g, '| Header');
+    return [
+        headerRow,
+        separatorRow
+    ].concat(bodyRows);
+}
+function toggleHeader(editor, level) {
+    return ()=>{
+        const initialCh = editor.getCurrentCharacter();
+        const currentHeader = selectHeader(editor);
+        const prefix = repeat(HEADER_CHAR, level);
+        if (!currentHeader) {
+            editor.moveToLineBeginning();
+            editor.insertAtCursor(prefix + ' ');
+            editor.restoreCursor(initialCh + prefix.length + 1);
+            return;
+        }
+        if (editor.getSelectedText() === prefix) {
+            editor.extendSelectionBy(1);
+            const removedCh = editor.getSelectionLength();
+            editor.removeSelectedText();
+            editor.restoreCursor(initialCh - removedCh);
+            return;
+        }
+        const diff = prefix.length - editor.getSelectionLength();
+        editor.replaceSelectedText(prefix);
+        editor.restoreCursor(initialCh + diff);
+    };
+}
+function selectHeader(editor) {
+    const result = editor.getCurrentLine().match(/^( {0,3})(#{1,6}) /);
+    if (!result) {
+        return null;
+    }
+    const indentation = result[1];
+    const header = result[2];
+    editor.select(getPos(0), getPos(header.length));
+    return editor.getSelection();
+    function getPos(modifier) {
+        return {
+            line: editor.getCurrentLineNumber(),
+            ch: indentation.length + modifier
+        };
+    }
+}

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

@@ -0,0 +1,136 @@
+import React, { useRef, useEffect, useState } from 'react';
+import tokens from '@contentful/f36-tokens';
+import { css, cx } from 'emotion';
+import { createMarkdownEditor } from './createMarkdownEditor';
+const styles = {
+    root: css`
+    border: 1px solid ${tokens.gray400};
+    border-width: 0 1px;
+    overflow-y: auto;
+    height: auto;
+    min-height: 300px;
+
+    .CodeMirror {
+      height: auto;
+      line-height: ${tokens.lineHeightDefault};
+    }
+    .CodeMirror-lines {
+      color: ${tokens.gray700};
+      padding: ${tokens.spacingL};
+    }
+    .CodeMirror-code {
+      font-family: ${tokens.fontStackMonospace};
+      font-size: ${tokens.fontSizeM};
+    }
+    .CodeMirror-scroll {
+      min-height: '6rem';
+    }
+
+    .cm-header {
+      color: ${tokens.gray900};
+    }
+    span.cm-variable-2 {
+      color: ${tokens.gray700};
+    }
+    .cm-header-1 {
+      font-size: 1.9em;
+    }
+    .cm-header-2 {
+      font-size: 1.75em;
+    }
+    .cm-header-3 {
+      font-size: 1.6em;
+    }
+    .cm-header-4 {
+      font-size: 1.45em;
+    }
+    .cm-header-5 {
+      font-size: 1.3em;
+    }
+    .cm-header-6 {
+      font-size: 1.15em;
+    }
+
+    span.cm-tag,
+    span.cm-string,
+    span.cm-attribute {
+      color: ${tokens.red600};
+    }
+    span.cm-string {
+      text-decoration: none !important;
+    }
+    span.cm-quote,
+    span.cm-comment {
+      color: ${tokens.gray600};
+    }
+    span.cm-link,
+    span.cm-url {
+      color: ${tokens.blue500} !important;
+    }
+    span.cm-link {
+      text-decoration: underline;
+    }
+  `,
+    framed: css({
+        '.CodeMirror': {
+            maxHeight: '500px'
+        }
+    }),
+    zen: css({
+        border: 'none !important',
+        '.CodeMirror-lines': {
+            maxWidth: '650px',
+            margin: '0 auto'
+        }
+    }),
+    disabled: css`
+    .CodeMirror {
+      background: ${tokens.gray100};
+      cursor: 'not-allowed';
+    }
+    .CodeMirror-cursors {
+      visibility: hidden !important;
+    }
+    .CodeMirror-scroll,
+    .CodeMirror-sizer,
+    .CodeMirror-lines {
+      cursor: not-allowed;
+    }
+  `
+};
+export const MarkdownTextarea = React.memo((props)=>{
+    const hostRef = useRef(null);
+    const [editor, setEditor] = useState(null);
+    useEffect(()=>{
+        if (hostRef.current) {
+            setEditor(createMarkdownEditor(hostRef.current, Object.assign({}, {
+                direction: props.direction,
+                readOnly: true
+            }, props.mode === 'zen' ? {
+                fixedHeight: true,
+                height: '100%'
+            } : {}, props.minHeight !== undefined ? {
+                height: props.minHeight
+            } : {})));
+        }
+    }, []);
+    useEffect(()=>{
+        if (editor) {
+            props.onReady(editor);
+        }
+    }, [
+        editor
+    ]);
+    const className = cx(styles.root, props.minHeight !== undefined ? css({
+        minHeight: props.minHeight
+    }) : undefined, props.mode === 'default' ? styles.framed : styles.zen, props.disabled && styles.disabled);
+    return React.createElement("div", {
+        className: className,
+        ref: hostRef,
+        "data-test-id": "markdown-textarea",
+        style: {
+            display: props.visible ? 'block' : 'none'
+        }
+    });
+});
+MarkdownTextarea.displayName = 'MarkdownTextarea';

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

@@ -0,0 +1,52 @@
+import * as CodeMirrorWrapper from './CodeMirrorWrapper';
+import * as Commands from './MarkdownCommands';
+export function createMarkdownEditor(host, options) {
+    const editor = CodeMirrorWrapper.create(host, options);
+    function wrapChange(fn) {
+        return (e, ch)=>{
+            fn(editor.getValue(), e, ch);
+        };
+    }
+    const api = {
+        actions: Commands.create(editor),
+        history: {
+            hasUndo: function() {
+                return editor.getHistorySize('undo') > 0;
+            },
+            hasRedo: function() {
+                return editor.getHistorySize('redo') > 0;
+            }
+        },
+        events: {
+            onScroll: function(fn) {
+                editor.attachEvent('scroll', fn, 150);
+            },
+            onChange: function(fn) {
+                editor.attachEvent('change', wrapChange(fn), 0);
+            },
+            onPaste: function(fn) {
+                editor.attachEvent('paste', fn, 0);
+            }
+        },
+        insert: editor.insertAtCursor,
+        focus: editor.focus,
+        getContent: editor.getValue,
+        destroy: editor.destroy,
+        setContent: editor.setValue,
+        getSelectedText: editor.getSelectedText,
+        usePrimarySelection: editor.usePrimarySelection,
+        setReadOnly: editor.setReadOnly,
+        selectBackwards: editor.selectBackwards,
+        getCursor: editor.getCursor,
+        setCursor: editor.setCursor,
+        clear: ()=>editor.setValue(''),
+        selectAll: editor.selectAll,
+        setFullsize: editor.setFullsize,
+        refresh: editor.refresh
+    };
+    editor.addKeyShortcuts({
+        B: api.actions.bold,
+        I: api.actions.italic
+    });
+    return api;
+}