@gravity-ui/markdown-editor 13.15.0 → 13.16.0

package/build/cjs/bundle/Editor.js

@@ -3,6 +3,7 @@ var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _Edi
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditorImpl = void 0;
 const tslib_1 = require("tslib");
+const view_1 = require("@codemirror/view");
 const prosemirror_state_1 = require("prosemirror-state");
 const core_1 = require("../core");
 const bundle_1 = require("../i18n/bundle");
@@ -265,11 +266,28 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
                 let cmLine = line + 1; // lines in codemirror is 1-based
                 cmLine = Math.max(cmLine, 1);
                 cmLine = Math.min(cmLine, view.state.doc.lines);
+                const yMargin = getTopOffset();
+                const anchor = view.state.doc.line(cmLine).from;
                 view.dispatch({
                     scrollIntoView: true,
-                    selection: { anchor: view.state.doc.line(cmLine).from },
+                    selection: { anchor },
+                    effects: [
+                        view_1.EditorView.scrollIntoView(anchor, { y: 'start', x: 'start', yMargin }),
+                    ],
                 });
                 break;
+                // eslint-disable-next-line no-inner-declarations
+                function getTopOffset() {
+                    const TOOLBAR_HEIGHT = 36; //px
+                    const TOOLBAR_BOTTOM_OFFSET = 8; // px
+                    const TOOLBAR_TOP_ADDITIONAL_OFFSET = 8; // px
+                    const TOOLBAR_TOP_OFFSET_VAR = '--g-md-toolbar-sticky-offset';
+                    const topOffsetValue = window
+                        .getComputedStyle(view.dom)
+                        .getPropertyValue(TOOLBAR_TOP_OFFSET_VAR);
+                    const toolbarTopOffset = calculateCSSNumberValue(topOffsetValue) + TOOLBAR_TOP_ADDITIONAL_OFFSET;
+                    return toolbarTopOffset + TOOLBAR_HEIGHT + TOOLBAR_BOTTOM_OFFSET;
+                }
             }
             case 'wysiwyg': {
                 const node = this.wysiwygEditor.dom.querySelector(`[data-line="${line}"]`);
@@ -292,3 +310,14 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
 }
 exports.EditorImpl = EditorImpl;
 _EditorImpl_markup = new WeakMap(), _EditorImpl_editorMode = new WeakMap(), _EditorImpl_toolbarVisible = new WeakMap(), _EditorImpl_splitModeEnabled = new WeakMap(), _EditorImpl_splitMode = new WeakMap(), _EditorImpl_renderPreview = new WeakMap(), _EditorImpl_wysiwygEditor = new WeakMap(), _EditorImpl_markupEditor = new WeakMap(), _EditorImpl_markupConfig = new WeakMap(), _EditorImpl_escapeConfig = new WeakMap(), _EditorImpl_preset = new WeakMap(), _EditorImpl_allowHTML = new WeakMap(), _EditorImpl_linkify = new WeakMap(), _EditorImpl_linkifyTlds = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_prepareRawMarkup = new WeakMap(), _EditorImpl_beforeEditorModeChange = new WeakMap();
+function calculateCSSNumberValue(cssValue) {
+    const tmp = document.createElement('div');
+    tmp.style.position = 'absolute';
+    tmp.style.top = '-99999px';
+    tmp.style.left = '-99999px';
+    tmp.style.width = `calc(${cssValue})`;
+    document.body.appendChild(tmp);
+    const value = tmp.getBoundingClientRect().width;
+    tmp.remove();
+    return value;
+}

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

@@ -6,6 +6,7 @@ const sanitize_1 = tslib_1.__importDefault(require("@diplodoc/transform/lib/sani
 // yfmHtmlBlock additional css properties white list
 const getYfmHtmlBlockWhiteList = () => {
     const whiteList = {};
+    // flex, grid, column
     whiteList['align-content'] = true; // default: auto
     whiteList['align-items'] = true; // default: auto
     whiteList['align-self'] = true; // default: auto
@@ -51,6 +52,24 @@ const getYfmHtmlBlockWhiteList = () => {
     whiteList.order = true; // default: 0
     whiteList.orphans = true; // default: 2
     whiteList['row-gap'] = true;
+    // position, opacity, overflow
+    whiteList['all'] = true; // default: depending on individual properties
+    whiteList['bottom'] = true; // default: auto
+    whiteList['content'] = true; // default: normal
+    whiteList['cursor'] = true; // default: auto
+    whiteList['direction'] = true; // default: ltr
+    whiteList['left'] = true; // default: auto
+    whiteList['line-break'] = true; // default: auto
+    whiteList['opacity'] = true; // default: 1
+    whiteList['overflow'] = true; // default: depending on individual properties
+    whiteList['overflow-wrap'] = true; // default: normal
+    whiteList['overflow-x'] = true; // default: visible
+    whiteList['overflow-y'] = true; // default: visible
+    whiteList['position'] = true; // default: static
+    whiteList['right'] = true; // default: auto
+    whiteList['top'] = true; // default: auto
+    whiteList['white-space'] = true; // default: normal
+    whiteList['z-index'] = true; // default: auto
     return whiteList;
 };
 // yfmHtmlBlock additional allowedTags

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.15.0' !== 'undefined' ? '13.15.0' : 'unknown';
+exports.VERSION = typeof '13.16.0' !== 'undefined' ? '13.16.0' : 'unknown';

package/build/esm/bundle/Editor.js

@@ -1,5 +1,6 @@
 var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _EditorImpl_splitModeEnabled, _EditorImpl_splitMode, _EditorImpl_renderPreview, _EditorImpl_wysiwygEditor, _EditorImpl_markupEditor, _EditorImpl_markupConfig, _EditorImpl_escapeConfig, _EditorImpl_preset, _EditorImpl_allowHTML, _EditorImpl_linkify, _EditorImpl_linkifyTlds, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_prepareRawMarkup, _EditorImpl_beforeEditorModeChange;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __rest } from "tslib";
+import { EditorView as CMEditorView } from '@codemirror/view';
 import { TextSelection } from 'prosemirror-state';
 import { WysiwygEditor } from '../core';
 import { i18n } from '../i18n/bundle';
@@ -262,11 +263,28 @@ export class EditorImpl extends SafeEventEmitter {
                 let cmLine = line + 1; // lines in codemirror is 1-based
                 cmLine = Math.max(cmLine, 1);
                 cmLine = Math.min(cmLine, view.state.doc.lines);
+                const yMargin = getTopOffset();
+                const anchor = view.state.doc.line(cmLine).from;
                 view.dispatch({
                     scrollIntoView: true,
-                    selection: { anchor: view.state.doc.line(cmLine).from },
+                    selection: { anchor },
+                    effects: [
+                        CMEditorView.scrollIntoView(anchor, { y: 'start', x: 'start', yMargin }),
+                    ],
                 });
                 break;
+                // eslint-disable-next-line no-inner-declarations
+                function getTopOffset() {
+                    const TOOLBAR_HEIGHT = 36; //px
+                    const TOOLBAR_BOTTOM_OFFSET = 8; // px
+                    const TOOLBAR_TOP_ADDITIONAL_OFFSET = 8; // px
+                    const TOOLBAR_TOP_OFFSET_VAR = '--g-md-toolbar-sticky-offset';
+                    const topOffsetValue = window
+                        .getComputedStyle(view.dom)
+                        .getPropertyValue(TOOLBAR_TOP_OFFSET_VAR);
+                    const toolbarTopOffset = calculateCSSNumberValue(topOffsetValue) + TOOLBAR_TOP_ADDITIONAL_OFFSET;
+                    return toolbarTopOffset + TOOLBAR_HEIGHT + TOOLBAR_BOTTOM_OFFSET;
+                }
             }
             case 'wysiwyg': {
                 const node = this.wysiwygEditor.dom.querySelector(`[data-line="${line}"]`);
@@ -288,3 +306,14 @@ export class EditorImpl extends SafeEventEmitter {
     }
 }
 _EditorImpl_markup = new WeakMap(), _EditorImpl_editorMode = new WeakMap(), _EditorImpl_toolbarVisible = new WeakMap(), _EditorImpl_splitModeEnabled = new WeakMap(), _EditorImpl_splitMode = new WeakMap(), _EditorImpl_renderPreview = new WeakMap(), _EditorImpl_wysiwygEditor = new WeakMap(), _EditorImpl_markupEditor = new WeakMap(), _EditorImpl_markupConfig = new WeakMap(), _EditorImpl_escapeConfig = new WeakMap(), _EditorImpl_preset = new WeakMap(), _EditorImpl_allowHTML = new WeakMap(), _EditorImpl_linkify = new WeakMap(), _EditorImpl_linkifyTlds = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_prepareRawMarkup = new WeakMap(), _EditorImpl_beforeEditorModeChange = new WeakMap();
+function calculateCSSNumberValue(cssValue) {
+    const tmp = document.createElement('div');
+    tmp.style.position = 'absolute';
+    tmp.style.top = '-99999px';
+    tmp.style.left = '-99999px';
+    tmp.style.width = `calc(${cssValue})`;
+    document.body.appendChild(tmp);
+    const value = tmp.getBoundingClientRect().width;
+    tmp.remove();
+    return value;
+}

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

@@ -2,6 +2,7 @@ import diplodocSanitize from '@diplodoc/transform/lib/sanitize';
 // yfmHtmlBlock additional css properties white list
 const getYfmHtmlBlockWhiteList = () => {
     const whiteList = {};
+    // flex, grid, column
     whiteList['align-content'] = true; // default: auto
     whiteList['align-items'] = true; // default: auto
     whiteList['align-self'] = true; // default: auto
@@ -47,6 +48,24 @@ const getYfmHtmlBlockWhiteList = () => {
     whiteList.order = true; // default: 0
     whiteList.orphans = true; // default: 2
     whiteList['row-gap'] = true;
+    // position, opacity, overflow
+    whiteList['all'] = true; // default: depending on individual properties
+    whiteList['bottom'] = true; // default: auto
+    whiteList['content'] = true; // default: normal
+    whiteList['cursor'] = true; // default: auto
+    whiteList['direction'] = true; // default: ltr
+    whiteList['left'] = true; // default: auto
+    whiteList['line-break'] = true; // default: auto
+    whiteList['opacity'] = true; // default: 1
+    whiteList['overflow'] = true; // default: depending on individual properties
+    whiteList['overflow-wrap'] = true; // default: normal
+    whiteList['overflow-x'] = true; // default: visible
+    whiteList['overflow-y'] = true; // default: visible
+    whiteList['position'] = true; // default: static
+    whiteList['right'] = true; // default: auto
+    whiteList['top'] = true; // default: auto
+    whiteList['white-space'] = true; // default: normal
+    whiteList['z-index'] = true; // default: auto
     return whiteList;
 };
 // yfmHtmlBlock additional allowedTags

package/build/esm/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.15.0",
+  "version": "13.16.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {