indicate and hide overflow + always keep on top

src/css/style.css

@@ -31,6 +31,12 @@ body {
   display: none;
 }
 
+.overflowing {
+  box-shadow: 0 0px 16px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  background-color: white;
+}
+
 /* Non-tldraw stuff */
 
 main {

src/shapes/HTMLShapeUtil.tsx

@@ -1,5 +1,5 @@
-import { Rectangle2d, resizeBox, TLBaseShape, TLOnResizeHandler } from '@tldraw/tldraw';
+import { Rectangle2d, resizeBox, TLBaseShape, TLOnBeforeUpdateHandler, TLOnResizeHandler } from '@tldraw/tldraw';
-import { HTMLContainer, ShapeUtil } from 'tldraw'
+import { ShapeUtil } from 'tldraw'
 
 export type HTMLShape = TLBaseShape<'html', { w: number; h: number, html: string }>
 
@@ -18,7 +18,26 @@ export class HTMLShapeUtil extends ShapeUtil<HTMLShape> {
     }
   }
 
-  override onResize: TLOnResizeHandler<any> = (shape, info) => {
+  override onTranslate: TLOnBeforeUpdateHandler<HTMLShape> = (prev, next) => {
+    if (prev.x !== next.x || prev.y !== next.y) {
+      this.editor.bringToFront([next.id]);
+    }
+  }
+
+  override onResize: TLOnResizeHandler<HTMLShape> = (shape: HTMLShape, info) => {
+    const element = document.getElementById(shape.id);
+    if (!element || !element.parentElement) return resizeBox(shape, info);
+    const { width, height } = element.parentElement.getBoundingClientRect();
+    if (element) {
+      console.log(element);
+
+      const isOverflowing = element.scrollWidth > width || element.scrollHeight > height;
+      if (isOverflowing) {
+        element.parentElement?.classList.add('overflowing');
+      } else {
+        element.parentElement?.classList.remove('overflowing');
+      }
+    }
     return resizeBox(shape, info)
   }
 
@@ -31,7 +50,7 @@ export class HTMLShapeUtil extends ShapeUtil<HTMLShape> {
   }
 
   component(shape: HTMLShape) {
-    return <div dangerouslySetInnerHTML={{ __html: shape.props.html }}></div>
+    return <div id={shape.id} dangerouslySetInnerHTML={{ __html: shape.props.html }} />
 
   }