[visual] Add coordsAt to decoration widgets (#19577)

GitOrigin-RevId: d445e68a14bbe819e126b6bf6a2328a00520c39a

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/begin-theorem.ts

@@ -33,6 +33,10 @@ export class BeginTheoremWidget extends BeginWidget {
     )
   }
 
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
+
   buildName(nameElement: HTMLSpanElement, view: EditorView) {
     nameElement.textContent = this.name
     if (this.argumentNode) {

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/begin.ts

@@ -41,6 +41,10 @@ export class BeginWidget extends WidgetType {
     return event.type !== 'mouseup'
   }
 
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
+
   buildName(name: HTMLSpanElement, view: EditorView) {
     name.textContent = this.environment
   }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/brace.ts

@@ -21,4 +21,8 @@ export class BraceWidget extends WidgetType {
   eq(widget: BraceWidget) {
     return widget.content === this.content
   }
+
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
 }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/character.ts

@@ -24,6 +24,10 @@ export class CharacterWidget extends WidgetType {
   ignoreEvent(event: Event) {
     return event.type !== 'mousedown' && event.type !== 'mouseup'
   }
+
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
 }
 
 export const COMMAND_SUBSTITUTIONS = new Map([

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/description-item.ts

@@ -25,6 +25,10 @@ export class DescriptionItemWidget extends WidgetType {
     return event.type !== 'mousedown' && event.type !== 'mouseup'
   }
 
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
+
   setProperties(element: HTMLElement) {
     element.style.setProperty('--list-depth', String(this.listDepth))
   }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/divider.ts

@@ -14,4 +14,8 @@ export class DividerWidget extends WidgetType {
   updateDOM(): boolean {
     return true
   }
+
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
 }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/editable-graphics.ts

@@ -41,6 +41,10 @@ export class EditableGraphicsWidget extends GraphicsWidget {
     return true
   }
 
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
+
   createEditButton(view: EditorView) {
     const button = document.createElement('button')
     button.setAttribute('aria-label', view.state.phrase('edit_figure'))

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/editable-inline-graphics.ts

@@ -40,6 +40,10 @@ export class EditableInlineGraphicsWidget extends EditableGraphicsWidget {
     return event.type !== 'mousedown' && event.type !== 'mouseup'
   }
 
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
+
   // We set the actual figure width on the span rather than the img element
   getFigureWidth(): string {
     return '100%'

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/end-document.ts

@@ -21,6 +21,10 @@ export class EndDocumentWidget extends WidgetType {
     return true
   }
 
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
+
   get estimatedHeight() {
     return 30
   }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/end.ts

@@ -10,4 +10,8 @@ export class EndWidget extends WidgetType {
   eq(widget: EndWidget) {
     return true
   }
+
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
 }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/environment-line.ts

@@ -39,4 +39,8 @@ export class EnvironmentLineWidget extends WidgetType {
   ignoreEvent(event: Event): boolean {
     return event.type !== 'mousedown' && event.type !== 'mouseup'
   }
+
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
 }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/footnote.ts

@@ -32,4 +32,8 @@ export class FootnoteWidget extends WidgetType {
   ignoreEvent(event: Event) {
     return event.type !== 'mousedown' && event.type !== 'mouseup'
   }
+
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
 }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/frame.ts

@@ -74,4 +74,8 @@ export class FrameWidget extends WidgetType {
   ignoreEvent(event: Event) {
     return event.type !== 'mouseup'
   }
+
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
 }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/graphics.ts

@@ -74,6 +74,10 @@ export class GraphicsWidget extends WidgetType {
     this.destroyed = true
   }
 
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
+
   get estimatedHeight(): number {
     return this.height
   }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/icon-brace.ts

@@ -27,4 +27,8 @@ export class IconBraceWidget extends WidgetType {
     element.textContent = this.content ?? ''
     return true
   }
+
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
 }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/indicator.ts

@@ -24,4 +24,8 @@ export class IndicatorWidget extends WidgetType {
   ignoreEvent(event: Event) {
     return event.type !== 'mousedown' && event.type !== 'mouseup'
   }
+
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
 }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/inline-graphics.ts

@@ -16,4 +16,8 @@ export class InlineGraphicsWidget extends GraphicsWidget {
   ignoreEvent(event: Event) {
     return event.type !== 'mousedown' && event.type !== 'mouseup'
   }
+
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
 }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/item.ts

@@ -51,6 +51,10 @@ export class ItemWidget extends WidgetType {
     return event.type !== 'mousedown' && event.type !== 'mouseup'
   }
 
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
+
   setProperties(element: HTMLElement) {
     element.style.setProperty('--list-depth', String(this.listDepth))
     element.style.setProperty('--list-ordinal', String(this.ordinal))

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/latex.ts

@@ -15,4 +15,8 @@ export class LaTeXWidget extends WidgetType {
   ignoreEvent(event: Event) {
     return event.type !== 'mousedown' && event.type !== 'mouseup'
   }
+
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
 }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/maketitle.ts

@@ -51,6 +51,10 @@ export class MakeTitleWidget extends WidgetType {
     this.destroyed = true
   }
 
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
+
   buildContent(view: EditorView, element: HTMLElement) {
     if (this.preamble.title) {
       const titleElement = buildTitleElement(

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/math.ts

@@ -65,6 +65,10 @@ export class MathWidget extends WidgetType {
     this.destroyed = true
   }
 
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
+
   async renderMath(element: HTMLElement) {
     const MathJax = await loadMathJax()
 

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/preamble.ts

@@ -84,6 +84,10 @@ export class PreambleWidget extends WidgetType {
     return this.expanded === other.expanded
   }
 
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
+
   get estimatedHeight() {
     return this.expanded ? -1 : 54
   }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/space.ts

@@ -24,6 +24,10 @@ export class SpaceWidget extends WidgetType {
   ignoreEvent(event: Event) {
     return event.type !== 'mousedown' && event.type !== 'mouseup'
   }
+
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
 }
 
 // https://tex.stackexchange.com/a/74354

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/table-rendering-error.ts

@@ -40,4 +40,8 @@ export class TableRenderingErrorWidget extends WidgetType {
     }
     return element
   }
+
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
 }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/tabular.tsx

@@ -59,6 +59,10 @@ export class TabularWidget extends WidgetType {
     return true
   }
 
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
+
   get estimatedHeight() {
     return this.parsedTableData.table.rows.length * 50
   }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/tex.ts

@@ -15,4 +15,8 @@ export class TeXWidget extends WidgetType {
   ignoreEvent(event: Event) {
     return event.type !== 'mousedown' && event.type !== 'mouseup'
   }
+
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
 }

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/tilde.ts

@@ -10,4 +10,8 @@ export class TildeWidget extends WidgetType {
   eq() {
     return true
   }
+
+  coordsAt(element: HTMLElement) {
+    return element.getBoundingClientRect()
+  }
 }