Simpliyfied resize logic for math input form and improved css

packages/ckeditor5-math/src/ui/mainformview.ts

@@ -161,14 +161,10 @@ export default class MainFormView extends View {
 		if ( this.element ) {
 			this.keystrokes.listenTo( this.element );
 		}
-
-		this._initResizeSync();
 	}
 
 	public override destroy(): void {
 		super.destroy();
-		this._resizeObserver?.disconnect();
-		document.removeEventListener( 'mouseup', this._onMouseUp );
 	}
 
 	public focus(): void {
@@ -201,80 +197,6 @@ export default class MainFormView extends View {
 		}
 	} );
 
-	private _resizeObserver: ResizeObserver | null = null;
-	private _activeResizeTarget: HTMLElement | null = null;
-
-	private _onMouseUp = () => {
-		this._activeResizeTarget = null;
-		// Re-observe everything to ensure state is reset
-		if ( this.mathLiveInputView.element ) this._resizeObserver?.observe( this.mathLiveInputView.element );
-		if ( this.rawLatexInputView.element ) this._resizeObserver?.observe( this.rawLatexInputView.element );
-	};
-
-	private _onMouseDown( target: HTMLElement ) {
-		this._activeResizeTarget = target;
-
-		// Stop observing the OTHER element to prevent loops and errors while resizing
-		if ( target === this.mathLiveInputView.element ) {
-			if ( this.rawLatexInputView.element ) {
-				this._resizeObserver?.unobserve( this.rawLatexInputView.element );
-			}
-		} else if ( target === this.rawLatexInputView.element ) {
-			if ( this.mathLiveInputView.element ) {
-				this._resizeObserver?.unobserve( this.mathLiveInputView.element );
-			}
-		}
-	}
-
-	private _initResizeSync() {
-		this.listenTo( this.mathLiveInputView, 'mousedown', () => {
-			if ( this.mathLiveInputView.element ) {
-				this._onMouseDown( this.mathLiveInputView.element );
-			}
-		} );
-
-		this.listenTo( this.rawLatexInputView, 'mousedown', () => {
-			if ( this.rawLatexInputView.element ) {
-				this._onMouseDown( this.rawLatexInputView.element );
-			}
-		} );
-
-		document.addEventListener( 'mouseup', this._onMouseUp );
-
-		// Synchronize width between MathLive and Raw LaTeX inputs
-		this._resizeObserver = new ResizeObserver( entries => {
-			if ( !this._activeResizeTarget ) {
-				return;
-			}
-
-			for ( const entry of entries ) {
-				if ( entry.target === this._activeResizeTarget ) {
-					// Use style.width directly to avoid box-sizing issues causing infinite growth
-					const width = ( entry.target as HTMLElement ).style.width;
-
-					if ( !width ) continue;
-
-					const other = entry.target === this.mathLiveInputView.element
-						? this.rawLatexInputView.element
-						: this.mathLiveInputView.element;
-
-					if ( other && other.style.width !== width ) {
-						window.requestAnimationFrame( () => {
-							other.style.width = width;
-						} );
-					}
-				}
-			}
-		} );
-
-		if ( this.mathLiveInputView.element ) {
-			this._resizeObserver.observe( this.mathLiveInputView.element );
-		}
-		if ( this.rawLatexInputView.element ) {
-			this._resizeObserver.observe( this.rawLatexInputView.element );
-		}
-	}
-
 	/**
 	 * Creates the MathLive visual equation editor.
 	 *

packages/ckeditor5-math/src/ui/mathliveinputview.ts

@@ -49,10 +49,7 @@ export default class MathLiveInputView extends View {
 	public override render(): void {
 		super.render();
 
-		// Propagate mousedown event to the view
+		// (Removed global area click-to-focus logic; focusing now relies on direct field interaction.)
-		this.element!.addEventListener( 'mousedown', ( evt ) => {
-			this.fire( 'mousedown', evt );
-		} );
 
 		// Create the MathLive math-field custom element
 		const mathfield = document.createElement( 'math-field' ) as any;

packages/ckeditor5-math/src/ui/rawlatexinputview.ts

@@ -57,10 +57,6 @@ export default class RawLatexInputView extends LabeledFieldView<TextareaView> {
 	public override render(): void {
 		super.render();
 		// All styling is handled via CSS in mathform.css
-
+		// (Removed obsolete mousedown propagation; no longer needed after resize & gray-area click removal.)
-		// Propagate mousedown event to the view
-		this.element!.addEventListener( 'mousedown', ( evt ) => {
-			this.fire( 'mousedown', evt );
-		} );
 	}
 }

packages/ckeditor5-math/theme/mathform.css

@@ -1,208 +1,175 @@
 /**
  * Math equation editor dialog styles
- *
+ * Complete version with scrolling fixes for preview and input
- * This stylesheet provides the layout and styling for the math equation editor,
- * which includes a MathLive visual editor, a raw LaTeX textarea, and control buttons.
- * The dialog is resizable and uses a flexible layout to accommodate different content sizes.
  */
 
 /* ============================================================================
-   Form Layout
+   1. Main Layout Containers (The Skeleton)
    ========================================================================= */
 
 .ck.ck-math-form {
     display: flex;
     flex-direction: column;
     padding: var(--ck-spacing-standard);
-	width: 100%;
-	height: 100%;
     box-sizing: border-box;
+	max-width: 80vw;
+    height: 100%;  /* Never wider than screen */
+    overflow-x: hidden; /* Prevent the main window from scrolling horizontally */
+}
 
+/* Mobile responsiveness */
 @media screen and (max-width: 600px) {
+    .ck.ck-math-form {
         flex-wrap: wrap;
     }
 }
 
-
-/* ============================================================================
-   Button Row
-   ========================================================================= */
-
-/* Button row */
-.ck-math-button-row {
-	display: flex;
-	gap: var(--ck-spacing-standard);
-	flex-shrink: 0;
-	margin-top: var(--ck-spacing-standard);
-	width: fit-content;
-}
-
-/* Scrollable content area */
-.ck-math-scroll {
-	display: flex;
-	flex-direction: column;
-	flex: 1 1 auto;
-	min-height: 0;
-	min-width: 0;
-	overflow: hidden;
-}
-
-/* ============================================================================
-   Math Panel Layout
-   ========================================================================= */
-
-/* Math panel layout */
 .ck-math-view {
     display: flex;
     flex-direction: column;
-	gap: var(--ck-spacing-standard);
     flex: 1 1 auto;
+    gap: var(--ck-spacing-standard);
     min-height: fit-content;
+    min-width: 0;
+    width: 100%;
+}
+
+.ck-math-button-row {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--ck-spacing-standard);
+    margin-top: var(--ck-spacing-standard);
+    width: fit-content;
+    max-width: 100%;
+    flex-wrap: wrap;
 }
 
 /* ============================================================================
-   MathLive Integration
+   2. Shared Styling (Applies to Input AND Preview)
    ========================================================================= */
 
-/* MathLive input container */
+/* This targets both the top input AND the bottom preview */
+.ck.ck-math-form math-field,
+.ck.ck-math-form textarea {
+    box-sizing: border-box;
+    padding: var(--ck-spacing-small);
+    background: var(--ck-color-input-background) !important;
+    color: var(--ck-color-input-text, inherit);
+    font-size: var(--ck-font-size-base);
+    border: none !important;
+    border-radius: var(--ck-border-radius, 6px);
+    outline: 3px solid transparent;
+    outline-offset: 6px;
+}
+
+/* SPECIFIC FIX FOR PREVIEW SCROLLING */
+.ck.ck-math-form math-field {
+    display: block !important;
+    width: 100%;
+
+    /* 3. Stop it from growing infinite */
+    max-width: 100%;
+
+    /* 4. Enable scrollbars for the red matrix area */
+    overflow-x: auto !important;
+
+    /* Theme overrides */
+    --selection-background-color: rgba(33, 150, 243, 0.2);
+    --selection-color: inherit;
+    --contains-highlight-background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* ============================================================================
+   3. MathLive Input Specifics (The Top Box)
+   ========================================================================= */
+
+/* Wrapper for the editable input at the top */
 .ck.ck-mathlive-input {
     display: inline-block;
     flex: 0 0 auto;
-	width: auto;
+    width: 100%;
-	min-width: 100%;
+    max-width: 100%; /* Safety */
-	min-height: 140px;
+    min-height: fit-content;
-	max-height: 70vh;
+    max-height: 80vh;
-	resize: both;
     overflow: auto;
     padding-bottom: var(--ck-spacing-small);
-	box-sizing: border-box;
+    resize: none;
 }
 
-/* MathLive field styling */
+/* Shadow DOM Layout adjustments (Keep your existing logic) */
-.ck.ck-mathlive-input math-field {
-	display: block !important;
-	width: 100%;
-	height: 100%;
-	min-height: 140px;
-	box-sizing: border-box;
-	resize: none !important;
-	overflow: hidden !important;
-}
-
-/* Style MathLive shadow DOM parts so the whole area is interactive */
 .ck.ck-math-form math-field::part(container),
 .ck.ck-math-form math-field::part(content),
 .ck.ck-math-form math-field::part(field) {
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
-	min-height: 100%;
     height: 100%;
     align-items: flex-start;
     justify-content: flex-start;
 }
 
-
+/* UI Buttons positions */
-/* Position MathLive virtual keyboard toggle button */
+.ck.ck-math-form math-field::part(virtual-keyboard-toggle),
-.ck.ck-math-form math-field::part(virtual-keyboard-toggle) {
-	position: absolute;
-	right: 8px;
-	top: 8px;
-}
-
-/* Position MathLive menu toggle button and ensure it's always visible */
 .ck.ck-math-form math-field::part(menu-toggle) {
     position: absolute;
+    top: 8px;
+}
+.ck.ck-math-form math-field::part(virtual-keyboard-toggle) { right: 40px; }
+.ck.ck-math-form math-field::part(menu-toggle) {
     right: 8px;
-	top: 48px;
-	/* Force visibility even when field is empty */
     display: flex !important;
     visibility: visible !important;
 }
 
-
 /* ============================================================================
-	Raw LaTeX Integration
+   4. Raw LaTeX Integration (The Middle Box)
    ========================================================================= */
 
-/* Mirror MathLive container behavior for the labeled textarea wrapper */
-
-
 .ck-math-view .ck-labeled-field-view {
     display: flex;
     flex-direction: column;
     flex: 0 0 auto;
-	width: 100%;
     min-width: 100%;
+
+    /* Allow the middle box to shrink if needed */
+    width: 100%;
+    max-width: 100%;
+
     min-height: 140px;
     max-height: 70vh;
     resize: both;
     overflow: auto;
-	padding-bottom: 0;
-	box-sizing: border-box;
     background: transparent;
-	border: none;
-	border-radius: 0;
-	outline: none;
 }
 
-/* Let the internal wrapper stretch so the textarea can fill the space */
+/* Hide label */
+.ck-math-view .ck-labeled-field-view .ck-label {
+    display: none !important;
+}
+
+/* Internal wrapper */
 .ck-math-view .ck-labeled-field-view .ck-labeled-field-view__input-wrapper {
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
     width: 100%;
-	height: auto;
     min-height: 100px;
-	margin: 0;
+    height: auto;
     padding: 0;
-	background: transparent;
     border: none;
+    background: transparent;
     box-shadow: none;
 }
 
-/* Ensure the raw textarea fills its wrapper like MathLive's math-field */
+/* The Textarea */
 .ck-math-view .ck-labeled-field-view textarea {
     display: block;
-	width: 100% !important;
     flex: 1 1 auto;
+    width: 100% !important;
     height: 100%;
     min-height: 140px;
-	box-sizing: border-box;
     resize: none !important;
-	overflow: hidden !important;
-}
-
-
-/* ============================================================================
-   Shared Input Styling (MathLive & Raw LaTeX)
-   ========================================================================= */
-
-/* Base styling for both MathLive field and raw LaTeX textarea */
-.ck.ck-math-form math-field,
-.ck.ck-math-form textarea {
-	padding: var(--ck-spacing-small);
-	border: none !important;
-	border-radius: var(--ck-border-radius, 6px);
-	font-size: var(--ck-font-size-base);
-	box-sizing: border-box;
-	background: var(--ck-color-input-background) !important;
-	color: var(--ck-color-input-text, inherit);
-	outline: 3px solid transparent;
-	outline-offset: 6px;
-}
-
-/* Override MathLive selection colors to prevent dark blocks in light mode */
-.ck.ck-math-form math-field {
-	--selection-background-color: rgba(33, 150, 243, 0.2);
-	--selection-color: inherit;
-	--contains-highlight-background-color: rgba(0, 0, 0, 0.05);
-}
-
-/* Make the raw LaTeX textarea flat (no rounded corners or hover animation) */
-.ck-math-view .ck-labeled-field-view textarea {
     border-radius: 0 !important;
-	outline: none !important;
     box-shadow: none !important;
     transition: none !important;
 }
@@ -210,18 +177,6 @@
 .ck-math-view .ck-labeled-field-view textarea:hover,
 .ck-math-view .ck-labeled-field-view textarea:focus {
     background: var(--ck-color-input-background) !important;
-	color: var(--ck-color-input-text, inherit) !important;
     outline: none !important;
     box-shadow: none !important;
-	transition: none !important;
 }
-
-/* Hide the internal label (we use a separate label element for better layout control) */
-.ck-math-view .ck-labeled-field-view .ck-label {
-	display: none !important;
-}
-
-
-
-
-