Merge pull request #140 from 10play/add-dynamic-height

Add dynamic height

src/RichText/RichText.tsx

@@ -13,6 +13,7 @@ import { useKeyboard } from '../utils';
 import type { EditorBridge } from '../types';
 import { getInjectedJS, getInjectedJSBeforeContentLoad } from './utils';
 import { isFabric } from '../utils/misc';
+import { CoreEditorActionType } from '../bridges/core';
 
 interface RichTextProps extends WebViewProps {
   editor: EditorBridge;
@@ -36,6 +37,7 @@ const DEV_SERVER_URL = 'http://localhost:3000';
 const TOOLBAR_HEIGHT = 44;
 
 export const RichText = ({ editor, ...props }: RichTextProps) => {
+  const [editorHeight, setEditorHeight] = useState(0);
   const [loaded, setLoaded] = useState(isFabric());
   const { keyboardHeight: iosKeyboardHeight, isKeyboardUp } = useKeyboard();
   const source: WebViewProps['source'] = editor.DEV
@@ -49,6 +51,9 @@ export const RichText = ({ editor, ...props }: RichTextProps) => {
     const { data } = event.nativeEvent;
     // Parse the message sent from the editor
     const { type, payload } = JSON.parse(data) as EditorMessage;
+    if (type === CoreEditorActionType.DocumentHeight) {
+      setEditorHeight(payload);
+    }
     editor.bridgeExtensions?.forEach((e) => {
       e.onEditorMessage && e.onEditorMessage({ type, payload }, editor);
     });
@@ -108,6 +113,7 @@ export const RichText = ({ editor, ...props }: RichTextProps) => {
         style={[
           RichTextStyles.fullScreen,
           { display: loaded ? 'flex' : 'none' },
+          { height: editor.dynamicHeight ? editorHeight : undefined },
           editor.theme.webview,
         ]}
         containerStyle={editor.theme.webviewContainer}

src/RichText/useEditorBridge.tsx

@@ -29,6 +29,7 @@ export const useEditorBridge = (options?: {
   avoidIosKeyboard?: boolean;
   customSource?: string;
   webviewBaseURL?: string;
+  dynamicHeight?: boolean;
   editable?: boolean;
   onChange?: () => void;
   DEV?: boolean;
@@ -127,6 +128,7 @@ export const useEditorBridge = (options?: {
     bridgeExtensions,
     initialContent: options?.initialContent,
     autofocus: options?.autofocus,
+    dynamicHeight: options?.dynamicHeight,
     avoidIosKeyboard: options?.avoidIosKeyboard,
     customSource: options?.customSource,
     editable,

src/RichText/utils.ts

@@ -66,6 +66,7 @@ export const getInjectedJSBeforeContentLoad = (editor: EditorBridge) => {
       : ''
   }
     window.editable = ${editor.editable};
+    window.dynamicHeight = ${editor.dynamicHeight};
   `);
 };
 

src/bridges/core.ts

@@ -52,6 +52,7 @@ export enum CoreEditorActionType {
   EditorReady = 'editor-ready',
   UpdateScrollThresholdAndMargin = 'update-scroll-threshold-and-margin',
   ContentUpdate = 'content-update',
+  DocumentHeight = 'document-height',
   SetEditable = 'set-editable',
 }
 
@@ -135,6 +136,10 @@ export type CoreMessages =
       type: CoreEditorActionType.ContentUpdate;
       payload: undefined;
     }
+  | {
+      type: CoreEditorActionType.DocumentHeight;
+      payload: number;
+    }
   | {
       type: CoreEditorActionType.SetEditable;
       payload: boolean;

src/simpleWebEditor/Tiptap.tsx

@@ -12,5 +12,10 @@ let tenTapExtensions = TenTapStartKit.filter(
 export default function Tiptap() {
   const editor = useTenTap({ bridges: tenTapExtensions });
 
-  return <EditorContent editor={editor} />;
+  return (
+    <EditorContent
+      editor={editor}
+      className={window.dynamicHeight ? 'dynamic-height' : undefined}
+    />
+  );
 }

src/simpleWebEditor/index.html

@@ -11,17 +11,24 @@
       padding: 0;
     }
     #root > div:nth-of-type(1) {
-      overflow: auto;
-      height: 100%;
       position: absolute;
+      height: 100%;
+      overflow: auto;
       width: 100%;
       top: 0;
       bottom: 0;
     }
+    #root > div.dynamic-height {
+      height: unset;
+    }
+
     #root div .ProseMirror {
       height: 100%;
       overflow: auto;
     }
+    #root div.dynamic-height .ProseMirror {
+      height: unset;
+    }
     .ProseMirror:focus {
       outline: none;
     }

src/types/EditorBridge.ts

@@ -11,6 +11,7 @@ export interface EditorBridge {
   webviewBaseURL?: string;
   DEV?: boolean;
   DEV_SERVER_URL?: string;
+  dynamicHeight?: boolean;
   autofocus: boolean;
   focus: (pos?: 'start' | 'end' | 'all' | number | boolean | null) => void;
   initialContent?: string;
@@ -20,6 +21,7 @@ export interface EditorBridge {
   _updateEditorState: (state: BridgeState) => void;
   _subscribeToEditorStateUpdate: Subscription<BridgeState>;
   _onContentUpdate: () => void;
+  _onContentHeightUpdate: (height: number) => void;
   _subscribeToContentUpdate: Subscription<void>;
   bridgeExtensions?: BridgeExtension<unknown, unknown, unknown>[];
 }

src/webEditorUtils/contentHeight.tsx

@@ -0,0 +1,40 @@
+// For some reason on expo, this file is parsed on native, and then we get an error
+import { isExpo } from '../utils/misc';
+
+class ContentHeightListener {
+  public connected = false;
+  private resizeObserver: ResizeObserver | null = null;
+  private currentHeight: number | null = null;
+
+  public connect(element: Element, cb: (height: number) => void) {
+    this.connected = true;
+    this.currentHeight = element.getBoundingClientRect().height;
+    cb(this.currentHeight);
+
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        const newHeight = entry.target.getBoundingClientRect().height;
+        if (this.currentHeight !== newHeight) {
+          this.currentHeight = newHeight;
+          cb(newHeight);
+        }
+      }
+    });
+
+    this.resizeObserver.observe(element);
+  }
+
+  public disconnect() {
+    this.resizeObserver?.disconnect();
+  }
+
+  public get height() {
+    return this.currentHeight;
+  }
+}
+
+// when bundling because "document" does not exist. This is a hack to "shim" focusListener on expo
+const shimmedHeightListener = { height: 0, connect: () => {}, connected: true };
+export const contentHeightListener = isExpo()
+  ? shimmedHeightListener
+  : new ContentHeightListener();

src/webEditorUtils/useTenTap.tsx

@@ -7,12 +7,14 @@ import { type BridgeState } from '../types/EditorBridge';
 import type BridgeExtension from '../bridges/base';
 import { CoreEditorActionType } from '../bridges/core';
 import { blueBackgroundPlugin } from '../bridges/HighlightSelection';
+import { contentHeightListener } from './contentHeight';
 declare global {
   interface Window {
     initialContent: string;
     editable: string;
     bridgeExtensionConfigMap: string;
     whiteListBridgeExtensions: string[];
+    dynamicHeight?: boolean;
     ReactNativeWebView: { postMessage: (message: string) => void };
   }
 }
@@ -128,5 +130,18 @@ export const useTenTap = (options?: useTenTapArgs) => {
     };
   }, [editor, bridges]);
 
+  useEffect(() => {
+    if (editor && !contentHeightListener.connected && window.dynamicHeight)
+      contentHeightListener.connect(
+        document.querySelector('.ProseMirror')!,
+        (height) => {
+          sendMessage({
+            type: CoreEditorActionType.DocumentHeight,
+            payload: height,
+          });
+        }
+      );
+  }, [editor]);
+
   return editor;
 };

website/docs/api/useEditorBridge.md

@@ -30,6 +30,12 @@ when true the editor will auto focus
 <u>default</u>: `false`<br />
 This helps us keep the cursor right above the keyboard when the editor is full-screen and the virtual keyboard hides the bottom portion of the editor.
 
+#### dynamicHeight
+
+`boolean`  
+<u>default</u>: `false`<br />
+when true the editor's webview will keep the same height as the content height
+
 #### theme
 
 `EditorTheme`