@gravity-ui/markdown-editor 13.21.3 → 13.22.0

package/README.md

@@ -52,13 +52,13 @@ function Editor({onSubmit}) {
 }
 ```
 Read more:
-- [How to connect the editor in the Create React App](docs/how-to-add-editor-with-create-react-app.md)
-- [How to add preview for markup mode](docs/how-to-add-preview.md)
-- [How to add HTML extension](docs/how-to-connect-html-extension.md)
-- [How to add Latex extension](docs/how-to-connect-latex-extension.md)
-- [How to add Mermaid extension](docs/how-to-connect-mermaid-extension.md)
-- [How to write extension](docs/how-to-create-extension.md)
-- [How to add GPT extension](docs/how-to-connect-gpt-extensions.md)
+- [How to connect the editor in the Create React App](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-add-editor-with-create-react-app.md)
+- [How to add preview for markup mode](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-add-preview.md)
+- [How to add HTML extension](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-connect-html-extension.md)
+- [How to add Latex extension](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-connect-latex-extension.md)
+- [How to add Mermaid extension](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-connect-mermaid-extension.md)
+- [How to write extension](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-create-extension.md)
+- [How to add GPT extension](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-connect-gpt-extensions.md)
 
 
 ### i18n

package/build/cjs/bundle/Editor.js

@@ -267,7 +267,7 @@ 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 yMargin = getTopOffset(view.dom);
                 const anchor = view.state.doc.line(cmLine).from;
                 view.dispatch({
                     scrollIntoView: true,
@@ -278,24 +278,16 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
                 });
                 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}"]`);
-                if (node) {
-                    const position = this._wysiwygView.posAtDOM(node, 0);
+                const elem = this.wysiwygEditor.dom.querySelector(`[data-line="${line}"]`);
+                if (elem) {
+                    const elemTop = elem.getBoundingClientRect().top;
+                    const topOffset = getTopOffset(this.wysiwygEditor.dom);
+                    window.scrollTo({ top: elemTop + window.scrollY - topOffset });
+                    const position = this._wysiwygView.posAtDOM(elem, 0);
                     const { tr } = this._wysiwygView.state;
-                    this._wysiwygView.dispatch(tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, position)).scrollIntoView());
+                    this._wysiwygView.dispatch(tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, position)));
                 }
                 break;
             }
@@ -311,6 +303,15 @@ 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 getTopOffset(elem) {
+    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(elem).getPropertyValue(TOOLBAR_TOP_OFFSET_VAR);
+    const toolbarTopOffset = calculateCSSNumberValue(topOffsetValue) + TOOLBAR_TOP_ADDITIONAL_OFFSET;
+    return toolbarTopOffset + TOOLBAR_HEIGHT + TOOLBAR_BOTTOM_OFFSET;
+}
 function calculateCSSNumberValue(cssValue) {
     const tmp = document.createElement('div');
     tmp.style.position = 'absolute';

package/build/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.d.ts

@@ -1,4 +1,4 @@
-import { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
+import { PluginOptions } from '@diplodoc/html-extension/plugin';
 import type { ExtensionNodeSpec } from '../../../../core';
 export { yfmHtmlBlockNodeName } from './const';
 export interface YfmHtmlBlockSpecsOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {

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

@@ -1,4 +1,4 @@
-import { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
+import { PluginOptions } from '@diplodoc/html-extension/plugin';
 import type { IHTMLIFrameElementConfig } from '@diplodoc/html-extension/runtime';
 import { Action, ExtensionAuto } from '../../../core';
 import { YfmHtmlBlockAction } from './YfmHtmlBlockSpecs/const';

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.21.3' !== 'undefined' ? '13.21.3' : 'unknown';
+exports.VERSION = typeof '13.22.0' !== 'undefined' ? '13.22.0' : 'unknown';

package/build/cjs/view/hocs/withYfmHtml/types.d.ts

@@ -1,3 +1,3 @@
-import type { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
+import type { PluginOptions } from '@diplodoc/html-extension/plugin';
 export type { TransformMeta } from '../../types';
 export declare type PluginRuntime = PluginOptions['runtimeJsPath'];

package/build/esm/bundle/Editor.js

@@ -264,7 +264,7 @@ 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 yMargin = getTopOffset(view.dom);
                 const anchor = view.state.doc.line(cmLine).from;
                 view.dispatch({
                     scrollIntoView: true,
@@ -275,24 +275,16 @@ export class EditorImpl extends SafeEventEmitter {
                 });
                 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}"]`);
-                if (node) {
-                    const position = this._wysiwygView.posAtDOM(node, 0);
+                const elem = this.wysiwygEditor.dom.querySelector(`[data-line="${line}"]`);
+                if (elem) {
+                    const elemTop = elem.getBoundingClientRect().top;
+                    const topOffset = getTopOffset(this.wysiwygEditor.dom);
+                    window.scrollTo({ top: elemTop + window.scrollY - topOffset });
+                    const position = this._wysiwygView.posAtDOM(elem, 0);
                     const { tr } = this._wysiwygView.state;
-                    this._wysiwygView.dispatch(tr.setSelection(TextSelection.create(tr.doc, position)).scrollIntoView());
+                    this._wysiwygView.dispatch(tr.setSelection(TextSelection.create(tr.doc, position)));
                 }
                 break;
             }
@@ -307,6 +299,15 @@ 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 getTopOffset(elem) {
+    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(elem).getPropertyValue(TOOLBAR_TOP_OFFSET_VAR);
+    const toolbarTopOffset = calculateCSSNumberValue(topOffsetValue) + TOOLBAR_TOP_ADDITIONAL_OFFSET;
+    return toolbarTopOffset + TOOLBAR_HEIGHT + TOOLBAR_BOTTOM_OFFSET;
+}
 function calculateCSSNumberValue(cssValue) {
     const tmp = document.createElement('div');
     tmp.style.position = 'absolute';

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.d.ts

@@ -1,4 +1,4 @@
-import { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
+import { PluginOptions } from '@diplodoc/html-extension/plugin';
 import type { ExtensionNodeSpec } from '../../../../core';
 export { yfmHtmlBlockNodeName } from './const';
 export interface YfmHtmlBlockSpecsOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {

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

@@ -1,4 +1,4 @@
-import { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
+import { PluginOptions } from '@diplodoc/html-extension/plugin';
 import type { IHTMLIFrameElementConfig } from '@diplodoc/html-extension/runtime';
 import { Action, ExtensionAuto } from '../../../core';
 import { YfmHtmlBlockAction } from './YfmHtmlBlockSpecs/const';

package/build/esm/version.js

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

package/build/esm/view/hocs/withYfmHtml/types.d.ts

@@ -1,3 +1,3 @@
-import type { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
+import type { PluginOptions } from '@diplodoc/html-extension/plugin';
 export type { TransformMeta } from '../../types';
 export declare type PluginRuntime = PluginOptions['runtimeJsPath'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.21.3",
+  "version": "13.22.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -201,7 +201,7 @@
   },
   "devDependencies": {
     "@diplodoc/folding-headings-extension": "0.1.0",
-    "@diplodoc/html-extension": "2.1.0",
+    "@diplodoc/html-extension": "2.3.2",
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
     "@diplodoc/transform": "4.22.0",
@@ -276,7 +276,7 @@
   },
   "peerDependencies": {
     "@diplodoc/folding-headings-extension": "^0.1.0",
-    "@diplodoc/html-extension": "2.1.0",
+    "@diplodoc/html-extension": "2.3.2",
     "@diplodoc/latex-extension": "^1.0.3",
     "@diplodoc/mermaid-extension": "^1.0.0",
     "@diplodoc/transform": ">=4.5.0 <4.19.0",