@contentful/field-editor-markdown 1.2.0 → 1.3.0

package/dist/cjs/components/MarkdownTextarea/MarkdownTextarea.js

@@ -0,0 +1,190 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MarkdownTextarea", {
+    enumerable: true,
+    get: function() {
+        return MarkdownTextarea;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+const _createMarkdownEditor = require("./createMarkdownEditor");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const styles = {
+    root: (0, _emotion.css)`
+    border: 1px solid ${_f36tokens.default.gray400};
+    border-width: 0 1px;
+    overflow-y: auto;
+    height: auto;
+    min-height: 300px;
+
+    .CodeMirror {
+      height: auto;
+      line-height: ${_f36tokens.default.lineHeightDefault};
+    }
+    .CodeMirror-lines {
+      color: ${_f36tokens.default.gray700};
+      padding: ${_f36tokens.default.spacingL};
+    }
+    .CodeMirror-code {
+      font-family: ${_f36tokens.default.fontStackMonospace};
+      font-size: ${_f36tokens.default.fontSizeM};
+    }
+    .CodeMirror-scroll {
+      min-height: '6rem';
+    }
+
+    .cm-header {
+      color: ${_f36tokens.default.gray900};
+    }
+    span.cm-variable-2 {
+      color: ${_f36tokens.default.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: ${_f36tokens.default.red600};
+    }
+    span.cm-string {
+      text-decoration: none !important;
+    }
+    span.cm-quote,
+    span.cm-comment {
+      color: ${_f36tokens.default.gray600};
+    }
+    span.cm-link,
+    span.cm-url {
+      color: ${_f36tokens.default.blue500} !important;
+    }
+    span.cm-link {
+      text-decoration: underline;
+    }
+  `,
+    framed: (0, _emotion.css)({
+        '.CodeMirror': {
+            maxHeight: '500px'
+        }
+    }),
+    zen: (0, _emotion.css)({
+        border: 'none !important',
+        '.CodeMirror-lines': {
+            maxWidth: '650px',
+            margin: '0 auto'
+        }
+    }),
+    disabled: (0, _emotion.css)`
+    .CodeMirror {
+      background: ${_f36tokens.default.gray100};
+      cursor: 'not-allowed';
+    }
+    .CodeMirror-cursors {
+      visibility: hidden !important;
+    }
+    .CodeMirror-scroll,
+    .CodeMirror-sizer,
+    .CodeMirror-lines {
+      cursor: not-allowed;
+    }
+  `
+};
+const MarkdownTextarea = _react.default.memo((props)=>{
+    const hostRef = (0, _react.useRef)(null);
+    const [editor, setEditor] = (0, _react.useState)(null);
+    (0, _react.useEffect)(()=>{
+        if (hostRef.current) {
+            setEditor((0, _createMarkdownEditor.createMarkdownEditor)(hostRef.current, Object.assign({}, {
+                direction: props.direction,
+                readOnly: true
+            }, props.mode === 'zen' ? {
+                fixedHeight: true,
+                height: '100%'
+            } : {}, props.minHeight !== undefined ? {
+                height: props.minHeight
+            } : {})));
+        }
+    }, []);
+    (0, _react.useEffect)(()=>{
+        if (editor) {
+            props.onReady(editor);
+        }
+    }, [
+        editor
+    ]);
+    const className = (0, _emotion.cx)(styles.root, props.minHeight !== undefined ? (0, _emotion.css)({
+        minHeight: props.minHeight
+    }) : undefined, props.mode === 'default' ? styles.framed : styles.zen, props.disabled && styles.disabled);
+    return _react.default.createElement("div", {
+        className: className,
+        ref: hostRef,
+        "data-test-id": "markdown-textarea",
+        style: {
+            display: props.visible ? 'block' : 'none'
+        }
+    });
+});
+MarkdownTextarea.displayName = 'MarkdownTextarea';

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

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createMarkdownEditor", {
+    enumerable: true,
+    get: function() {
+        return createMarkdownEditor;
+    }
+});
+const _CodeMirrorWrapper = _interop_require_wildcard(require("./CodeMirrorWrapper"));
+const _MarkdownCommands = _interop_require_wildcard(require("./MarkdownCommands"));
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function createMarkdownEditor(host, options) {
+    const editor = _CodeMirrorWrapper.create(host, options);
+    function wrapChange(fn) {
+        return (e, ch)=>{
+            fn(editor.getValue(), e, ch);
+        };
+    }
+    const api = {
+        actions: _MarkdownCommands.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;
+}

package/dist/cjs/components/MarkdownToolbar.js

@@ -0,0 +1,367 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DefaultMarkdownToolbar: function() {
+        return DefaultMarkdownToolbar;
+    },
+    ZenMarkdownToolbar: function() {
+        return ZenMarkdownToolbar;
+    },
+    MarkdownToolbar: function() {
+        return MarkdownToolbar;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+const _HeadingSelector = require("./HeadingSelector");
+const _icons = _interop_require_wildcard(require("./icons"));
+const _InsertLinkSelector = require("./InsertLinkSelector");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const styles = {
+    root: (0, _emotion.css)({
+        position: 'relative',
+        zIndex: Number(_f36tokens.default.zIndexWorkbenchHeader),
+        border: `1px solid ${_f36tokens.default.gray400}`,
+        backgroundColor: _f36tokens.default.gray100,
+        padding: _f36tokens.default.spacingXs,
+        borderTopLeftRadius: _f36tokens.default.borderRadiusSmall,
+        overflow: 'hidden'
+    }),
+    button: (0, _emotion.css)({
+        height: '30px',
+        width: '36px',
+        marginLeft: _f36tokens.default.spacing2Xs,
+        marginRight: _f36tokens.default.spacing2Xs
+    }),
+    icon: (0, _emotion.css)({
+        fill: _f36tokens.default.gray700,
+        verticalAlign: 'middle'
+    }),
+    zenButton: (0, _emotion.css)({
+        marginLeft: _f36tokens.default.spacingXs
+    }),
+    zenButtonPressed: (0, _emotion.css)({
+        backgroundColor: _f36tokens.default.gray400
+    }),
+    tooltip: (0, _emotion.css)({
+        zIndex: Number(_f36tokens.default.zIndexTooltip)
+    })
+};
+const ToolbarButton = _react.forwardRef((props, ref)=>{
+    const { tooltip , onClick , children , className , variant ='transparent' , tooltipPlace ='top' , isDisabled =false , ...otherProps } = props;
+    return _react.createElement(_f36components.Tooltip, {
+        className: styles.tooltip,
+        placement: tooltipPlace,
+        content: tooltip
+    }, _react.createElement(_f36components.IconButton, {
+        ...otherProps,
+        ref: ref,
+        className: (0, _emotion.cx)(styles.button, className),
+        isDisabled: isDisabled,
+        onClick: onClick,
+        variant: variant,
+        size: "small",
+        icon: children,
+        "aria-label": tooltip
+    }));
+});
+ToolbarButton.displayName = 'ToolbarButton';
+function MainButtons(props) {
+    const tooltipPlace = props.mode === 'zen' ? 'bottom' : 'top';
+    return _react.createElement(_react.Fragment, null, _react.createElement(_HeadingSelector.HeadingSelector, {
+        onSelect: (heading)=>{
+            if (heading && props.actions.headings[heading]) {
+                props.actions.headings[heading]();
+            }
+        }
+    }, _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-heading",
+        tooltip: "Headings",
+        tooltipPlace: tooltipPlace
+    }, _react.createElement(_f36icons.HeadingIcon, {
+        "aria-label": "Headings",
+        className: styles.icon
+    }))), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-bold",
+        tooltip: "Bold",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.bold
+    }, _react.createElement(_f36icons.FormatBoldIcon, {
+        "aria-label": "Bold",
+        className: styles.icon
+    })), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-italic",
+        tooltip: "Italic",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.italic
+    }, _react.createElement(_f36icons.FormatItalicIcon, {
+        "aria-label": "Italic",
+        className: styles.icon
+    })), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-quote",
+        tooltip: "Quote",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.quote
+    }, _react.createElement(_f36icons.QuoteIcon, {
+        "aria-label": "Quote",
+        className: styles.icon
+    })), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-ul",
+        tooltip: "Unordered list",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.ul
+    }, _react.createElement(_f36icons.ListBulletedIcon, {
+        "aria-label": "Unordered list",
+        className: styles.icon
+    })), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-ol",
+        tooltip: "Ordered list",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.ol
+    }, _react.createElement(_f36icons.ListNumberedIcon, {
+        "aria-label": "Ordered list",
+        className: styles.icon
+    })), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-link",
+        tooltip: "Link",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.insertLink
+    }, _react.createElement(_f36icons.LinkIcon, {
+        "aria-label": "Link",
+        className: styles.icon
+    })));
+}
+function AdditionalButtons(props) {
+    const tooltipPlace = props.mode === 'zen' ? 'bottom' : 'top';
+    return _react.createElement(_react.Fragment, null, _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-strike",
+        tooltip: "Strike out",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.strike
+    }, _react.createElement(_icons.Strikethrough, {
+        label: "Strike out",
+        className: styles.icon
+    })), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-code",
+        tooltip: "Code block",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.code
+    }, _react.createElement(_f36icons.CodeIcon, {
+        "aria-label": "Code block",
+        className: styles.icon
+    })), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-hr",
+        tooltip: "Horizontal rule",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.hr
+    }, _react.createElement(_f36icons.HorizontalRuleIcon, {
+        "aria-label": "Horizontal rule",
+        className: styles.icon
+    })), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-indent",
+        tooltip: "Increase indentation",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.indent
+    }, _react.createElement(_icons.Indent, {
+        label: "Increase indentation",
+        className: styles.icon
+    })), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-dedent",
+        tooltip: "Decrease indentation",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.dedent
+    }, _react.createElement(_icons.Dedent, {
+        label: "Decrease indentation",
+        className: styles.icon
+    })), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-embed",
+        tooltip: "Embed external content",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.embedExternalContent
+    }, _react.createElement(_icons.Cubes, {
+        label: "Embed external content",
+        className: styles.icon
+    })), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-table",
+        tooltip: "Insert table",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.insertTable
+    }, _react.createElement(_icons.Table, {
+        label: "Insert table",
+        className: styles.icon
+    })), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-special",
+        tooltip: "Insert special character",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.insertSpecialCharacter
+    }, _react.createElement(_icons.SpecialChar, {
+        label: "Insert special character",
+        className: styles.icon
+    })), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-organizeLinks",
+        tooltip: "Organize links",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.organizeLinks
+    }, _react.createElement(_icons.OrgLinks, {
+        label: "Organize links",
+        className: styles.icon
+    })), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-undo",
+        tooltip: "Undo",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.history.undo
+    }, _react.createElement(_icons.Undo, {
+        label: "Undo",
+        className: styles.icon
+    })), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-redo",
+        tooltip: "Redo",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.history.redo
+    }, _react.createElement(_icons.Redo, {
+        label: "Redo",
+        className: styles.icon
+    })));
+}
+function DefaultMarkdownToolbar(props) {
+    const [showAdditional, setShowAdditional] = _react.useState(false);
+    return _react.createElement("div", {
+        className: styles.root
+    }, _react.createElement(_f36components.Flex, {
+        justifyContent: "space-between",
+        flexWrap: "wrap"
+    }, _react.createElement(_f36components.Flex, {
+        flexWrap: "wrap"
+    }, _react.createElement(MainButtons, props), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-toggle-additional",
+        tooltip: showAdditional ? 'Hide additional actions' : 'More actions',
+        onClick: ()=>{
+            setShowAdditional(!showAdditional);
+        }
+    }, _react.createElement(_f36icons.MoreHorizontalIcon, {
+        className: styles.icon
+    }))), _react.createElement(_f36components.Flex, null, _react.createElement(_InsertLinkSelector.InsertLinkSelector, {
+        disabled: props.disabled,
+        onSelectExisting: props.actions.linkExistingMedia,
+        onAddNew: props.actions.addNewMedia,
+        canAddNew: props.canUploadAssets
+    }), _react.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-zen",
+        variant: "secondary",
+        onClick: props.actions.openZenMode,
+        className: styles.zenButton,
+        tooltip: "Expand"
+    }, _react.createElement(_icons.Zen, {
+        label: "Expand",
+        className: styles.icon
+    })))), showAdditional && _react.createElement(_f36components.Flex, {
+        justifyContent: "space-between",
+        marginTop: "spacingXs"
+    }, _react.createElement(_f36components.Flex, null, _react.createElement(AdditionalButtons, props))));
+}
+function ZenMarkdownToolbar(props) {
+    return _react.createElement("div", {
+        className: styles.root
+    }, _react.createElement(_f36components.Flex, {
+        justifyContent: "space-between"
+    }, _react.createElement(_f36components.Flex, null, _react.createElement(MainButtons, props), _react.createElement(AdditionalButtons, props)), _react.createElement(_f36components.Flex, null, _react.createElement(_InsertLinkSelector.InsertLinkSelector, {
+        disabled: props.disabled,
+        onSelectExisting: props.actions.linkExistingMedia,
+        onAddNew: props.actions.addNewMedia,
+        canAddNew: props.canUploadAssets
+    }), _react.createElement(_f36components.IconButton, {
+        testId: "markdown-action-button-zen-close",
+        variant: "secondary",
+        size: "small",
+        className: (0, _emotion.cx)(styles.zenButton, styles.zenButtonPressed),
+        onClick: ()=>{
+            props.actions.closeZenMode();
+        },
+        icon: _react.createElement(_icons.Zen, {
+            label: "Collapse",
+            className: styles.icon
+        }),
+        "aria-label": "Collapse"
+    }))));
+}
+const MarkdownToolbar = _react.memo((props)=>{
+    if (props.mode === 'zen') {
+        return _react.createElement(ZenMarkdownToolbar, props);
+    }
+    return _react.createElement(DefaultMarkdownToolbar, props);
+});
+MarkdownToolbar.displayName = 'MarkdownToolbar';