@skbkontur/markdown 1.4.0 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/markdown",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"

package/src/Markdown/Markdown.js

@@ -32,7 +32,7 @@ import { MarkdownActions } from './MarkdownActions';
 import { MarkdownEditor } from './MarkdownEditor';
 import { usePasteFromClipboard } from './MarkdownHelpers/markdownHelpers';
 import { getMentionValue, mentionActions } from './MarkdownHelpers/markdownMentionHelpers';
-import { getCursorCoordinates, getFullscreenHorizontalPadding, useListenTextareaScroll, } from './MarkdownHelpers/markdownTextareaHelpers';
+import { getCursorCoordinates, useFullscreenHorizontalPadding, useListenTextareaScroll, } from './MarkdownHelpers/markdownTextareaHelpers';
 import { MarkdownMention } from './MarkdownMention';
 import { ViewMode } from './types';
 import { Guid } from './utils/guid';
@@ -68,7 +68,7 @@ export var Markdown = function (props) {
             textareaNode.selectionEnd = selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0;
         }
     }, [fullscreen, isEditMode, selectionEnd, selectionStart]);
-    var fullscreenTextareaPadding = getFullscreenHorizontalPadding(fullscreen, initialWidth);
+    var fullscreenTextareaPadding = useFullscreenHorizontalPadding(fullscreen, initialWidth);
     var horizontalPaddings = {
         panelPadding: panelHorizontalPadding,
         fullscreenPadding: fullscreenTextareaPadding,

package/src/Markdown/MarkdownHelpers/markdownTextareaHelpers.d.ts

@@ -7,5 +7,5 @@ export declare const getCursorCoordinates: (textArea: HTMLTextAreaElement, id: s
     y: number;
 };
 export declare const useListenTextareaScroll: (setMention: (value: undefined) => void, textarea?: Textarea | null) => void;
-export declare const getFullscreenHorizontalPadding: (fullscreen: boolean, textareaWidth: number) => number | undefined;
+export declare const useFullscreenHorizontalPadding: (fullscreen: boolean, textareaWidth?: number) => number | undefined;
 export declare const getPastedHtml: (html: string, event: ClipboardEvent, textArea: HTMLTextAreaElement) => void;

package/src/Markdown/MarkdownHelpers/markdownTextareaHelpers.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { setMarkdownPastedHtml } from './markdownHelpers';
 import { MENTION_WRAPPER_ID_POSTFIX } from '../constants';
 import { turndownService } from '../utils/htmlToMd';
@@ -72,10 +72,22 @@ export var useListenTextareaScroll = function (setMention, textarea) {
         return window.removeEventListener('scroll', resetMention);
     }, [resetMention]);
 };
-export var getFullscreenHorizontalPadding = function (fullscreen, textareaWidth) {
-    if (fullscreen) {
-        return (document.body.clientWidth - textareaWidth) / 2;
-    }
+export var useFullscreenHorizontalPadding = function (fullscreen, textareaWidth) {
+    var _a = useState(), padding = _a[0], setPadding = _a[1];
+    useEffect(function () {
+        if (fullscreen && textareaWidth) {
+            var observable = document.body;
+            var handleChangeWidth_1 = function (width) { return setPadding((width - textareaWidth) / 2); };
+            handleChangeWidth_1(observable.clientWidth);
+            var observer_1 = new ResizeObserver(function (entries) { return entries.forEach(function (e) { return handleChangeWidth_1(e.contentRect.width); }); });
+            observer_1.observe(observable);
+            return function () { return observer_1.disconnect(); };
+        }
+        else {
+            setPadding(0);
+        }
+    }, [fullscreen, textareaWidth]);
+    return padding;
 };
 export var getPastedHtml = function (html, event, textArea) {
     /** Игнорируем Google Docs/Tables/Presentations **/