@gravity-ui/markdown-editor 13.12.0 → 13.12.1

package/build/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/NodeView.js

@@ -51,7 +51,7 @@ class WYfmHtmlBlockNodeView {
         this.view.dispatch(tr);
     }
     renderYfmHtmlBlock() {
-        return (0, react_dom_1.createPortal)(react_1.default.createElement(YfmHtmlBlockView_1.YfmHtmlBlockView, { getPos: this.getPos, node: this.node, onChange: this.onChange.bind(this), sanitize: this.options.sanitize, useConfig: this.options.useConfig, view: this.view }), this.dom);
+        return (0, react_dom_1.createPortal)(react_1.default.createElement(YfmHtmlBlockView_1.YfmHtmlBlockView, { getPos: this.getPos, node: this.node, onChange: this.onChange.bind(this), options: this.options, view: this.view }), this.dom);
     }
 }
 exports.WYfmHtmlBlockNodeView = WYfmHtmlBlockNodeView;

package/build/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { IHTMLIFrameElementConfig } from '@diplodoc/html-extension/runtime';
 import { Node } from 'prosemirror-model';
 import { EditorView } from 'prosemirror-view';
 import { YfmHtmlBlockConsts } from '../YfmHtmlBlockSpecs/const';
+import { YfmHtmlBlockOptions } from '../index';
 export declare const cnYfmHtmlBlock: import("@bem-react/classname").ClassNameFormatter;
 export declare const cnHelper: import("@bem-react/classname").ClassNameFormatter;
 export declare function generateID(): string;
@@ -12,7 +12,6 @@ export declare const YfmHtmlBlockView: React.FC<{
     onChange: (attrs: {
         [YfmHtmlBlockConsts.NodeAttrs.srcdoc]: string;
     }) => void;
-    sanitize?: (dirtyHtml: string) => string;
-    useConfig?: () => IHTMLIFrameElementConfig | undefined;
+    options: YfmHtmlBlockOptions;
     view: EditorView;
 }>;

package/build/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.YfmHtmlBlockView = exports.generateID = exports.cnHelper = exports.cnYfmHtmlBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const html_extension_1 = require("@diplodoc/html-extension");
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
@@ -137,7 +138,7 @@ const CodeEditMode = ({ initialText, onSave, onCancel }) => {
                     react_1.default.createElement(uikit_1.Button, { onClick: () => onSave(text), view: 'action' },
                         react_1.default.createElement("span", { className: (0, exports.cnHelper)({ 'prosemirror-stop-event': true }) }, (0, common_1.i18n)('save'))))))));
 };
-const YfmHtmlBlockView = ({ onChange, node, getPos, view, useConfig, sanitize }) => {
+const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useConfig, sanitize, styles, baseTarget = '_' } }) => {
     const [editing, setEditing, unsetEditing, toggleEditing] = (0, hooks_1.useBooleanState)(Boolean(node.attrs[const_1.YfmHtmlBlockConsts.NodeAttrs.newCreated]));
     const config = useConfig === null || useConfig === void 0 ? void 0 : useConfig();
     const [menuOpen, , , toggleMenuOpen] = (0, hooks_1.useBooleanState)(false);
@@ -151,7 +152,13 @@ const YfmHtmlBlockView = ({ onChange, node, getPos, view, useConfig, sanitize })
                 unsetEditing();
             } }));
     }
-    const dirtyHtml = node.attrs[const_1.YfmHtmlBlockConsts.NodeAttrs.srcdoc];
+    let dirtyHtml = `<base target="${baseTarget}">` + node.attrs[const_1.YfmHtmlBlockConsts.NodeAttrs.srcdoc];
+    if (styles) {
+        const stylesContent = typeof styles === 'string'
+            ? `<link rel="stylesheet" href="${styles}" />`
+            : `<style>${(0, html_extension_1.getStyles)(styles)}</style>`;
+        dirtyHtml = stylesContent + dirtyHtml;
+    }
     const html = sanitize ? sanitize(dirtyHtml) : dirtyHtml;
     return (react_1.default.createElement("div", { className: b(), onDoubleClick: setEditing },
         react_1.default.createElement(uikit_1.Label, { className: b('label'), icon: react_1.default.createElement(uikit_1.Icon, { size: 16, data: icons_1.Eye }) }, (0, common_1.i18n)('preview')),

package/build/cjs/extensions/yfm/YfmHtmlBlock/utils.d.ts

@@ -0,0 +1,7 @@
+import { SanitizeOptions } from '@diplodoc/transform/lib/sanitize';
+export declare const getYfmHtmlBlockOptions: (defaultOptions: SanitizeOptions) => SanitizeOptions;
+export interface GetSanitizeYfmHtmlBlockArgs {
+    options: SanitizeOptions;
+    sanitize?: (html: string, options?: SanitizeOptions) => string;
+}
+export declare const getSanitizeYfmHtmlBlock: ({ options, sanitize }: GetSanitizeYfmHtmlBlockArgs) => (content: string) => string;

package/build/cjs/extensions/yfm/YfmHtmlBlock/utils.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSanitizeYfmHtmlBlock = exports.getYfmHtmlBlockOptions = void 0;
+const tslib_1 = require("tslib");
+const sanitize_1 = tslib_1.__importDefault(require("@diplodoc/transform/lib/sanitize"));
+// yfmHtmlBlock additional css properties white list
+const getYfmHtmlBlockWhiteList = () => {
+    const whiteList = {};
+    whiteList['align-content'] = true; // default: auto
+    whiteList['align-items'] = true; // default: auto
+    whiteList['align-self'] = true; // default: auto
+    whiteList.columns = true; // default: depending on individual properties
+    whiteList['column-count'] = true; // default: auto
+    whiteList['column-fill'] = true; // default: balance
+    whiteList['column-gap'] = true; // default: normal
+    whiteList['column-rule'] = true; // default: depending on individual properties
+    whiteList['column-rule-color'] = true; // default: current color
+    whiteList['column-rule-style'] = true; // default: medium
+    whiteList['column-rule-width'] = true; // default: medium
+    whiteList['column-span'] = true; // default: none
+    whiteList['column-width'] = true; // default: auto
+    whiteList.flex = true; // default: depending on individual properties
+    whiteList['flex-basis'] = true; // default: auto
+    whiteList['flex-direction'] = true; // default: row
+    whiteList['flex-flow'] = true; // default: depending on individual properties
+    whiteList['flex-grow'] = true; // default: 0
+    whiteList['flex-shrink'] = true; // default: 1
+    whiteList['flex-wrap'] = true; // default: nowrap
+    whiteList.gap = true; // default: normal normal
+    whiteList.grid = true; // default: depending on individual properties
+    whiteList['grid-area'] = true; // default: depending on individual properties
+    whiteList['grid-auto-columns'] = true; // default: auto
+    whiteList['grid-auto-flow'] = true; // default: none
+    whiteList['grid-auto-rows'] = true; // default: auto
+    whiteList['grid-column'] = true; // default: depending on individual properties
+    whiteList['grid-column-end'] = true; // default: auto
+    whiteList['grid-column-start'] = true; // default: auto
+    whiteList['grid-row'] = true; // default: depending on individual properties
+    whiteList['grid-row-end'] = true; // default: auto
+    whiteList['grid-row-start'] = true; // default: auto
+    whiteList['grid-template'] = true; // default: depending on individual properties
+    whiteList['grid-template-areas'] = true; // default: none
+    whiteList['grid-template-columns'] = true; // default: none
+    whiteList['grid-template-rows'] = true; // default: none
+    whiteList['justify-content'] = true; // default: auto
+    whiteList['justify-items'] = true; // default: auto
+    whiteList['justify-self'] = true; // default: auto
+    whiteList['line-height'] = true; // default: normal
+    whiteList['object-fit'] = true; // default: fill
+    whiteList['object-position'] = true; // default: 50% 50%
+    whiteList.order = true; // default: 0
+    whiteList.orphans = true; // default: 2
+    whiteList['row-gap'] = true;
+    return whiteList;
+};
+// yfmHtmlBlock additional allowedTags
+const yfmHtmlBlockAllowedTags = ['link', 'base', 'style'];
+// yfmHtmlBlock additional allowedTags
+const yfmHtmlBlockAllowedAttributes = {
+    link: ['rel', 'href'],
+    base: ['target'],
+    style: [],
+};
+const getYfmHtmlBlockOptions = (defaultOptions) => {
+    var _a;
+    const defaultAllowedAttributes = defaultOptions.allowedAttributes;
+    return Object.assign(Object.assign({}, defaultOptions), { allowedAttributes: Object.assign(Object.assign({}, defaultAllowedAttributes), yfmHtmlBlockAllowedAttributes), allowedTags: typeof defaultOptions.allowedTags === 'boolean'
+            ? defaultOptions.allowedTags
+            : [...((_a = defaultOptions.allowedTags) !== null && _a !== void 0 ? _a : []), ...yfmHtmlBlockAllowedTags], cssWhiteList: Object.assign(Object.assign({}, defaultOptions.cssWhiteList), getYfmHtmlBlockWhiteList()) });
+};
+exports.getYfmHtmlBlockOptions = getYfmHtmlBlockOptions;
+const getSanitizeYfmHtmlBlock = ({ options, sanitize = sanitize_1.default }) => (content) => sanitize(content, (0, exports.getYfmHtmlBlockOptions)(options));
+exports.getSanitizeYfmHtmlBlock = getSanitizeYfmHtmlBlock;

package/build/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 /** During build process, the current version will be injected here */
-exports.VERSION = typeof '13.12.0' !== 'undefined' ? '13.12.0' : 'unknown';
+exports.VERSION = typeof '13.12.1' !== 'undefined' ? '13.12.1' : 'unknown';

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/NodeView.js

@@ -47,6 +47,6 @@ export class WYfmHtmlBlockNodeView {
         this.view.dispatch(tr);
     }
     renderYfmHtmlBlock() {
-        return createPortal(React.createElement(YfmHtmlBlockView, { getPos: this.getPos, node: this.node, onChange: this.onChange.bind(this), sanitize: this.options.sanitize, useConfig: this.options.useConfig, view: this.view }), this.dom);
+        return createPortal(React.createElement(YfmHtmlBlockView, { getPos: this.getPos, node: this.node, onChange: this.onChange.bind(this), options: this.options, view: this.view }), this.dom);
     }
 }

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import type { IHTMLIFrameElementConfig } from '@diplodoc/html-extension/runtime';
 import { Node } from 'prosemirror-model';
 import { EditorView } from 'prosemirror-view';
 import { YfmHtmlBlockConsts } from '../YfmHtmlBlockSpecs/const';
+import { YfmHtmlBlockOptions } from '../index';
+import './YfmHtmlBlock.css';
 export declare const cnYfmHtmlBlock: import("@bem-react/classname").ClassNameFormatter;
 export declare const cnHelper: import("@bem-react/classname").ClassNameFormatter;
-import './YfmHtmlBlock.css';
 export declare function generateID(): string;
 export declare const YfmHtmlBlockView: React.FC<{
     getPos: () => number | undefined;
@@ -13,7 +13,6 @@ export declare const YfmHtmlBlockView: React.FC<{
     onChange: (attrs: {
         [YfmHtmlBlockConsts.NodeAttrs.srcdoc]: string;
     }) => void;
-    sanitize?: (dirtyHtml: string) => string;
-    useConfig?: () => IHTMLIFrameElementConfig | undefined;
+    options: YfmHtmlBlockOptions;
     view: EditorView;
 }>;

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { getStyles } from '@diplodoc/html-extension';
 import { Ellipsis as DotsIcon, Eye } from '@gravity-ui/icons';
 import { Button, Icon, Label, Menu, Popup } from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
@@ -8,9 +9,9 @@ import { i18n } from '../../../../i18n/common';
 import { useBooleanState } from '../../../../react-utils/hooks';
 import { removeNode } from '../../../../utils/remove-node';
 import { YfmHtmlBlockConsts } from '../YfmHtmlBlockSpecs/const';
+import './YfmHtmlBlock.css';
 export const cnYfmHtmlBlock = cn('yfm-html-block');
 export const cnHelper = cn('yfm-html-block-helper');
-import './YfmHtmlBlock.css';
 const b = cnYfmHtmlBlock;
 export function generateID() {
     return Math.random().toString(36).substr(2, 8);
@@ -133,7 +134,7 @@ const CodeEditMode = ({ initialText, onSave, onCancel }) => {
                     React.createElement(Button, { onClick: () => onSave(text), view: 'action' },
                         React.createElement("span", { className: cnHelper({ 'prosemirror-stop-event': true }) }, i18n('save'))))))));
 };
-export const YfmHtmlBlockView = ({ onChange, node, getPos, view, useConfig, sanitize }) => {
+export const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useConfig, sanitize, styles, baseTarget = '_' } }) => {
     const [editing, setEditing, unsetEditing, toggleEditing] = useBooleanState(Boolean(node.attrs[YfmHtmlBlockConsts.NodeAttrs.newCreated]));
     const config = useConfig === null || useConfig === void 0 ? void 0 : useConfig();
     const [menuOpen, , , toggleMenuOpen] = useBooleanState(false);
@@ -147,7 +148,13 @@ export const YfmHtmlBlockView = ({ onChange, node, getPos, view, useConfig, sani
                 unsetEditing();
             } }));
     }
-    const dirtyHtml = node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc];
+    let dirtyHtml = `<base target="${baseTarget}">` + node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc];
+    if (styles) {
+        const stylesContent = typeof styles === 'string'
+            ? `<link rel="stylesheet" href="${styles}" />`
+            : `<style>${getStyles(styles)}</style>`;
+        dirtyHtml = stylesContent + dirtyHtml;
+    }
     const html = sanitize ? sanitize(dirtyHtml) : dirtyHtml;
     return (React.createElement("div", { className: b(), onDoubleClick: setEditing },
         React.createElement(Label, { className: b('label'), icon: React.createElement(Icon, { size: 16, data: Eye }) }, i18n('preview')),

package/build/esm/extensions/yfm/YfmHtmlBlock/utils.d.ts

@@ -0,0 +1,7 @@
+import { SanitizeOptions } from '@diplodoc/transform/lib/sanitize';
+export declare const getYfmHtmlBlockOptions: (defaultOptions: SanitizeOptions) => SanitizeOptions;
+export interface GetSanitizeYfmHtmlBlockArgs {
+    options: SanitizeOptions;
+    sanitize?: (html: string, options?: SanitizeOptions) => string;
+}
+export declare const getSanitizeYfmHtmlBlock: ({ options, sanitize }: GetSanitizeYfmHtmlBlockArgs) => (content: string) => string;

package/build/esm/extensions/yfm/YfmHtmlBlock/utils.js

@@ -0,0 +1,67 @@
+import diplodocSanitize from '@diplodoc/transform/lib/sanitize';
+// yfmHtmlBlock additional css properties white list
+const getYfmHtmlBlockWhiteList = () => {
+    const whiteList = {};
+    whiteList['align-content'] = true; // default: auto
+    whiteList['align-items'] = true; // default: auto
+    whiteList['align-self'] = true; // default: auto
+    whiteList.columns = true; // default: depending on individual properties
+    whiteList['column-count'] = true; // default: auto
+    whiteList['column-fill'] = true; // default: balance
+    whiteList['column-gap'] = true; // default: normal
+    whiteList['column-rule'] = true; // default: depending on individual properties
+    whiteList['column-rule-color'] = true; // default: current color
+    whiteList['column-rule-style'] = true; // default: medium
+    whiteList['column-rule-width'] = true; // default: medium
+    whiteList['column-span'] = true; // default: none
+    whiteList['column-width'] = true; // default: auto
+    whiteList.flex = true; // default: depending on individual properties
+    whiteList['flex-basis'] = true; // default: auto
+    whiteList['flex-direction'] = true; // default: row
+    whiteList['flex-flow'] = true; // default: depending on individual properties
+    whiteList['flex-grow'] = true; // default: 0
+    whiteList['flex-shrink'] = true; // default: 1
+    whiteList['flex-wrap'] = true; // default: nowrap
+    whiteList.gap = true; // default: normal normal
+    whiteList.grid = true; // default: depending on individual properties
+    whiteList['grid-area'] = true; // default: depending on individual properties
+    whiteList['grid-auto-columns'] = true; // default: auto
+    whiteList['grid-auto-flow'] = true; // default: none
+    whiteList['grid-auto-rows'] = true; // default: auto
+    whiteList['grid-column'] = true; // default: depending on individual properties
+    whiteList['grid-column-end'] = true; // default: auto
+    whiteList['grid-column-start'] = true; // default: auto
+    whiteList['grid-row'] = true; // default: depending on individual properties
+    whiteList['grid-row-end'] = true; // default: auto
+    whiteList['grid-row-start'] = true; // default: auto
+    whiteList['grid-template'] = true; // default: depending on individual properties
+    whiteList['grid-template-areas'] = true; // default: none
+    whiteList['grid-template-columns'] = true; // default: none
+    whiteList['grid-template-rows'] = true; // default: none
+    whiteList['justify-content'] = true; // default: auto
+    whiteList['justify-items'] = true; // default: auto
+    whiteList['justify-self'] = true; // default: auto
+    whiteList['line-height'] = true; // default: normal
+    whiteList['object-fit'] = true; // default: fill
+    whiteList['object-position'] = true; // default: 50% 50%
+    whiteList.order = true; // default: 0
+    whiteList.orphans = true; // default: 2
+    whiteList['row-gap'] = true;
+    return whiteList;
+};
+// yfmHtmlBlock additional allowedTags
+const yfmHtmlBlockAllowedTags = ['link', 'base', 'style'];
+// yfmHtmlBlock additional allowedTags
+const yfmHtmlBlockAllowedAttributes = {
+    link: ['rel', 'href'],
+    base: ['target'],
+    style: [],
+};
+export const getYfmHtmlBlockOptions = (defaultOptions) => {
+    var _a;
+    const defaultAllowedAttributes = defaultOptions.allowedAttributes;
+    return Object.assign(Object.assign({}, defaultOptions), { allowedAttributes: Object.assign(Object.assign({}, defaultAllowedAttributes), yfmHtmlBlockAllowedAttributes), allowedTags: typeof defaultOptions.allowedTags === 'boolean'
+            ? defaultOptions.allowedTags
+            : [...((_a = defaultOptions.allowedTags) !== null && _a !== void 0 ? _a : []), ...yfmHtmlBlockAllowedTags], cssWhiteList: Object.assign(Object.assign({}, defaultOptions.cssWhiteList), getYfmHtmlBlockWhiteList()) });
+};
+export const getSanitizeYfmHtmlBlock = ({ options, sanitize = diplodocSanitize }) => (content) => sanitize(content, getYfmHtmlBlockOptions(options));

package/build/esm/version.js

@@ -1,2 +1,2 @@
 /** During build process, the current version will be injected here */
-export const VERSION = typeof '13.12.0' !== 'undefined' ? '13.12.0' : 'unknown';
+export const VERSION = typeof '13.12.1' !== 'undefined' ? '13.12.1' : 'unknown';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.12.0",
+  "version": "13.12.1",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -200,7 +200,7 @@
   },
   "devDependencies": {
     "@diplodoc/folding-headings-extension": "0.1.0",
-    "@diplodoc/html-extension": "1.3.1",
+    "@diplodoc/html-extension": "1.3.3",
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
     "@diplodoc/transform": "4.22.0",
@@ -223,6 +223,7 @@
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@types/rimraf": "3.0.2",
+    "@types/sanitize-html": "2.11.0",
     "bem-cn-lite": "4.1.0",
     "esbuild-sass-plugin": "2.15.0",
     "eslint": "8.56.0",