@contentful/field-editor-markdown 1.2.1 → 1.3.1

package/dist/cjs/components/MarkdownPreview.js

@@ -0,0 +1,249 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MarkdownPreview", {
+    enumerable: true,
+    get: function() {
+        return MarkdownPreview;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _dompurify = _interop_require_default(require("dompurify"));
+const _emotion = require("emotion");
+const _markdowntojsx = _interop_require_default(require("markdown-to-jsx"));
+const _replaceMailtoAmp = require("../utils/replaceMailtoAmp");
+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;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    min-height: 300px;
+    padding: ${_f36tokens.default.spacingL};
+    font-size: ${_f36tokens.default.fontSizeM};
+    font-family: ${_f36tokens.default.fontStackPrimary};
+    line-height: ${_f36tokens.default.lineHeightDefault};
+    color: ${_f36tokens.default.gray700};
+    white-space: pre-line;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-top: ${_f36tokens.default.spacingL};
+      margin-bottom: ${_f36tokens.default.spacingM};
+      color: ${_f36tokens.default.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: ${_f36tokens.default.spacingM};
+    }
+
+    ul,
+    ol {
+      margin: ${_f36tokens.default.spacingS} 0;
+      padding-left: ${_f36tokens.default.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: ${_f36tokens.default.spacingM} auto;
+      border-spacing: 0;
+      border-collapse: collapse;
+      border: 1px solid ${_f36tokens.default.gray300};
+    }
+
+    table th,
+    table td {
+      padding: 5px;
+      border-left-width: 0;
+      border-top-width: 0;
+    }
+
+    table th {
+      background: ${_f36tokens.default.gray200};
+    }
+
+    table td {
+      border: 1px solid ${_f36tokens.default.gray300};
+    }
+
+    a {
+      color: ${_f36tokens.default.blue500};
+    }
+
+    hr {
+      margin-top: ${_f36tokens.default.spacingL};
+      margin-bottom: ${_f36tokens.default.spacingL};
+      height: 1px;
+      background-color: ${_f36tokens.default.gray300};
+      border: none;
+    }
+
+    blockquote {
+      border-left: 4px solid ${_f36tokens.default.gray200};
+      padding-left: ${_f36tokens.default.spacingL};
+      margin: 0;
+      margin-top: ${_f36tokens.default.spacingM};
+      font-style: italic;
+    }
+
+    img {
+      margin: ${_f36tokens.default.spacingM} auto;
+      display: block;
+      max-width: 80%;
+      max-height: 250px;
+    }
+
+    pre code {
+      font-size: ${_f36tokens.default.fontSizeS};
+      font-family: ${_f36tokens.default.fontStackMonospace};
+    }
+
+    .embedly-card {
+      margin: ${_f36tokens.default.spacingM} auto;
+      display: block;
+    }
+  `,
+    framed: (0, _emotion.css)({
+        height: '100%',
+        maxHeight: '500px',
+        overflowY: 'auto'
+    }),
+    zen: (0, _emotion.css)({
+        maxWidth: '650px',
+        margin: '0 auto',
+        border: 'none !important'
+    }),
+    rtl: (0, _emotion.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);
+}
+const MarkdownPreview = _react.memo((props)=>{
+    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.direction === 'rtl' ? styles.rtl : undefined);
+    const cleanHTML = _react.useMemo(()=>{
+        return (0, _replaceMailtoAmp.replaceMailtoAmp)(_dompurify.default.sanitize(props.value));
+    }, [
+        props.value
+    ]);
+    return _react.createElement("div", {
+        className: className,
+        "data-test-id": "markdown-preview"
+    }, _react.createElement(_markdowntojsx.default, {
+        options: {
+            overrides: {
+                a: {
+                    component: MarkdownLink,
+                    props: {
+                        Embedly: props.previewComponents?.embedly
+                    }
+                }
+            }
+        }
+    }, cleanHTML));
+});
+MarkdownPreview.displayName = 'MarkdownPreview';

package/dist/cjs/components/MarkdownTabs.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MarkdownTabs", {
+    enumerable: true,
+    get: function() {
+        return MarkdownTabs;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+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)({
+        display: 'flex',
+        zIndex: 10,
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        overflow: 'hidden',
+        marginBottom: '-1px',
+        fontSize: _f36tokens.default.fontSizeM
+    }),
+    tab: (0, _emotion.css)({
+        cursor: 'pointer',
+        color: _f36tokens.default.gray700,
+        padding: _f36tokens.default.spacingXs,
+        minWidth: '70px',
+        border: `1px solid ${_f36tokens.default.gray400}`,
+        borderTopLeftRadius: _f36tokens.default.borderRadiusSmall,
+        borderTopRightRadius: _f36tokens.default.borderRadiusSmall,
+        marginLeft: _f36tokens.default.spacingXs,
+        textAlign: 'center',
+        backgroundColor: _f36tokens.default.gray100,
+        borderBottomColor: _f36tokens.default.gray100,
+        outline: 'none',
+        '&:focus': {
+            boxShadow: _f36tokens.default.boxShadowHeavy
+        },
+        transition: `all ${_f36tokens.default.transitionEasingDefault} ${_f36tokens.default.transitionDurationShort}`
+    }),
+    inactiveTab: (0, _emotion.css)({
+        background: _f36tokens.default.gray200,
+        borderBottomColor: _f36tokens.default.gray400,
+        '&:hover': {
+            background: _f36tokens.default.gray300
+        }
+    })
+};
+function MarkdownTabItem(props) {
+    return _react.createElement("div", {
+        className: (0, _emotion.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);
+}
+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"));
+}