fix: update iframe size on textarea size change

umputun · Dec 3, 2022 · 68b8468 · 68b8468
1 parent 6fe373d
commit 68b8468
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 26 deletions.
diff --git a/frontend/apps/remark42/app/components/comment-form/__field/comment-form__field.css b/frontend/apps/remark42/app/components/comment-form/__field/comment-form__field.css
@@ -13,6 +13,7 @@
   line-height: 1.4;
   border: 0;
   resize: none;
+  overflow: hidden; /* prevent scrollbar from appearing */
   backface-visibility: hidden; /* let's try to fix blinking in Safari */
   transform: translateZ(0); /* let's try to fix blinking in Safari, again */
 

diff --git a/frontend/apps/remark42/app/components/comment-form/comment-form.tsx b/frontend/apps/remark42/app/components/comment-form/comment-form.tsx
@@ -19,6 +19,7 @@ import { SubscribeByRSS } from './__subscribe-by-rss';
 import { MarkdownToolbar } from './markdown-toolbar';
 import { TextExpander } from './text-expander';
 import { updatePersistedComments, getPersistedComment, removePersistedComment } from './comment-form.persist';
+import { updateIframeHeight } from 'utils/post-message';
 
 export type Props = {
   id: string;
@@ -452,6 +453,7 @@ export class CommentForm extends Component<Props, State> {
               disabled={isDisabled}
               autofocus={!!autofocus}
               spellcheck={true}
+              onResize={updateIframeHeight}
             />
           </TextExpander>
           {charactersLeft < 100 && <span className="comment-form__counter">{charactersLeft}</span>}

diff --git a/frontend/apps/remark42/app/components/root/root.tsx b/frontend/apps/remark42/app/components/root/root.tsx
@@ -36,7 +36,7 @@ import { ConnectedComment as Comment } from 'components/comment/connected-commen
 import { uploadImage, getPreview } from 'common/api';
 import { isUserAnonymous } from 'utils/isUserAnonymous';
 import { bindActions } from 'utils/actionBinder';
-import { postMessageToParent, parseMessage } from 'utils/post-message';
+import { postMessageToParent, parseMessage, updateIframeHeight } from 'utils/post-message';
 import { useActions } from 'hooks/useAction';
 import { setCollapse } from 'store/thread/actions';
 
@@ -287,10 +287,6 @@ export class Root extends Component<Props, State> {
   }
 }
 
-function updateIframeHeight() {
-  postMessageToParent({ height: document.body.offsetHeight });
-}
-
 interface CommentsProps {
   isLoading: boolean;
   topComments: string[];

diff --git a/frontend/apps/remark42/app/components/textarea-autosize.tsx b/frontend/apps/remark42/app/components/textarea-autosize.tsx
@@ -2,36 +2,43 @@ import { h, JSX } from 'preact';
 import { forwardRef } from 'preact/compat';
 import { useEffect, useRef } from 'preact/hooks';
 
-function autoResize(textarea: HTMLTextAreaElement) {
+function autoResize(textarea: HTMLTextAreaElement, onResize?: () => void) {
   textarea.style.height = '';
   textarea.style.height = `${textarea.scrollHeight}px`;
+  // Call on rezie callback after textarea height is changed
+  if (onResize) {
+    window.requestAnimationFrame(onResize);
+  }
 }
 
 type Props = Omit<JSX.HTMLAttributes<HTMLTextAreaElement>, 'onInput'> & {
-  onInput?: (evt: JSX.TargetedEvent<HTMLTextAreaElement, Event>) => void;
+  onInput?(evt: JSX.TargetedEvent<HTMLTextAreaElement, Event>): void;
+  onResize?(): void;
 };
 
-export const TextareaAutosize = forwardRef<HTMLTextAreaElement, Props>(({ onInput, value, ...props }, externalRef) => {
-  const localRef = useRef<HTMLTextAreaElement>(null);
-  const ref = externalRef || localRef;
+export const TextareaAutosize = forwardRef<HTMLTextAreaElement, Props>(
+  ({ onInput, value, onResize, ...props }, externalRef) => {
+    const localRef = useRef<HTMLTextAreaElement>(null);
+    const ref = externalRef || localRef;
 
-  const handleInput: JSX.GenericEventHandler<HTMLTextAreaElement> = (evt) => {
-    if (!ref.current) {
-      return;
-    }
+    const handleInput: JSX.GenericEventHandler<HTMLTextAreaElement> = (evt) => {
+      if (!ref.current) {
+        return;
+      }
 
-    if (onInput) {
-      return onInput(evt);
-    }
+      if (onInput) {
+        return onInput(evt);
+      }
 
-    autoResize(ref.current);
-  };
+      autoResize(ref.current, onResize);
+    };
 
-  useEffect(() => {
-    if (ref.current) {
-      autoResize(ref.current);
-    }
-  }, [value, ref]);
+    useEffect(() => {
+      if (ref.current) {
+        autoResize(ref.current, onResize);
+      }
+    }, [onResize, value, ref]);
 
-  return <textarea {...props} data-testid={props.id} onInput={handleInput} value={value} ref={ref} />;
-});
+    return <textarea {...props} data-testid={props.id} onInput={handleInput} value={value} ref={ref} />;
+  }
+);
diff --git a/frontend/apps/remark42/app/utils/post-message.ts b/frontend/apps/remark42/app/utils/post-message.ts
@@ -61,3 +61,10 @@ export function parseMessage({ data }: MessageEvent): AllMessages {
 
   return data as AllMessages;
 }
+
+/**
+ * Sends size of the iframe to parent window
+ */
+export function updateIframeHeight() {
+  postMessageToParent({ height: document.body.offsetHeight });
+}