mirror of
https://github.com/zadam/trilium.git
synced 2025-12-04 14:34:24 +01:00
Simpliyfied resize logic for math input form and improved css
This commit is contained in:
meinzzzz
parent
4f044c4a57
commit
d5e601eae9
@ -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.
|
||||
*
|
||||
|
||||
@ -49,10 +49,7 @@ export default class MathLiveInputView extends View {
|
||||
public override render(): void {
|
||||
super.render();
|
||||
|
||||
// Propagate mousedown event to the view
|
||||
this.element!.addEventListener( 'mousedown', ( evt ) => {
|
||||
this.fire( 'mousedown', evt );
|
||||
} );
|
||||
// (Removed global area click-to-focus logic; focusing now relies on direct field interaction.)
|
||||
|
||||
// Create the MathLive math-field custom element
|
||||
const mathfield = document.createElement( 'math-field' ) as any;
|
||||
|
||||
@ -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
|
||||
|
||||
// Propagate mousedown event to the view
|
||||
this.element!.addEventListener( 'mousedown', ( evt ) => {
|
||||
this.fire( 'mousedown', evt );
|
||||
} );
|
||||
// (Removed obsolete mousedown propagation; no longer needed after resize & gray-area click removal.)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,227 +1,182 @@
|
||||
/**
|
||||
* Math equation editor dialog styles
|
||||
*
|
||||
* 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.
|
||||
* Complete version with scrolling fixes for preview and input
|
||||
*/
|
||||
|
||||
/* ============================================================================
|
||||
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;
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--ck-spacing-standard);
|
||||
box-sizing: border-box;
|
||||
max-width: 80vw;
|
||||
height: 100%; /* Never wider than screen */
|
||||
overflow-x: hidden; /* Prevent the main window from scrolling horizontally */
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================================
|
||||
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;
|
||||
/* Mobile responsiveness */
|
||||
@media screen and (max-width: 600px) {
|
||||
.ck.ck-math-form {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
min-height: fit-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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;
|
||||
min-width: 100%;
|
||||
min-height: 140px;
|
||||
max-height: 70vh;
|
||||
resize: both;
|
||||
overflow: auto;
|
||||
padding-bottom: var(--ck-spacing-small);
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
max-width: 100%; /* Safety */
|
||||
min-height: fit-content;
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
padding-bottom: var(--ck-spacing-small);
|
||||
resize: none;
|
||||
}
|
||||
|
||||
/* MathLive field styling */
|
||||
.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 */
|
||||
/* Shadow DOM Layout adjustments (Keep your existing logic) */
|
||||
.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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
|
||||
/* Position MathLive virtual keyboard toggle button */
|
||||
.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 */
|
||||
/* UI Buttons positions */
|
||||
.ck.ck-math-form math-field::part(virtual-keyboard-toggle),
|
||||
.ck.ck-math-form math-field::part(menu-toggle) {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 48px;
|
||||
/* Force visibility even when field is empty */
|
||||
display: flex !important;
|
||||
visibility: visible !important;
|
||||
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;
|
||||
display: flex !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================================
|
||||
Raw LaTeX Integration
|
||||
========================================================================= */
|
||||
|
||||
/* 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%;
|
||||
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 */
|
||||
.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;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Ensure the raw textarea fills its wrapper like MathLive's math-field */
|
||||
.ck-math-view .ck-labeled-field-view textarea {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
min-height: 140px;
|
||||
box-sizing: border-box;
|
||||
resize: none !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================================
|
||||
Shared Input Styling (MathLive & Raw LaTeX)
|
||||
4. Raw LaTeX Integration (The Middle Box)
|
||||
========================================================================= */
|
||||
|
||||
/* 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;
|
||||
.ck-math-view .ck-labeled-field-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 auto;
|
||||
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;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
/* Hide label */
|
||||
.ck-math-view .ck-labeled-field-view .ck-label {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Make the raw LaTeX textarea flat (no rounded corners or hover animation) */
|
||||
/* 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%;
|
||||
min-height: 100px;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* The Textarea */
|
||||
.ck-math-view .ck-labeled-field-view textarea {
|
||||
border-radius: 0 !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
transition: none !important;
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
min-height: 140px;
|
||||
resize: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
background: var(--ck-color-input-background) !important;
|
||||
outline: none !important;
|
||||
box-shadow: 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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user