wikimedia/mediawiki-extensions-CodeMirror
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeMirror synced 2024-11-13 17:27:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

ve.ui.CodeMirror.v6: use DOMRect width when updating gutter width

Browse source 
This fixes some Chromium-specific issues where offsetWidth was rounded
up and could cause misalignment issues. It does not fix all alignment
issues, but should hopefully be an improvement in most cases.

Other changes:
* Add Core VE padding to match CM5 variant (doesn't affect WMF cluster)
* Remove redundant margin rules from VE surface
* Minor code cleanup

Bug: T357482
Change-Id: Ic4246c0b8c39914021bbc2a84d52b332dafec20a
This commit is contained in:
MusikAnimal 2024-11-05 20:15:22 -05:00
parent 0ebd773243
commit f4cf12b383
2 changed files with 10 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
resources/ve-cm/ve.ui.CodeMirror.v6.less
View file

@ -11,6 +11,9 @@
top: 0;
width: 100%;
// Core VE default padding
padding: 1.5em;
// Skin specific paddings
.skin-vector & {
padding: 0 1rem;
@ -112,16 +115,6 @@
font-weight: inherit;
}
.ext-codemirror-wrapper .mw-content-ltr .ve-ce-paragraphNode {
/* @noflip */
margin-left: 6px !important; /* stylelint-disable-line declaration-no-important */
}
.ext-codemirror-wrapper .mw-content-rtl .ve-ce-paragraphNode {
/* @noflip */
margin-right: 6px !important; /* stylelint-disable-line declaration-no-important */
}
.cm-activeLineGutter {
background-color: transparent;
border-right: 0;

15
resources/ve-cm/ve.ui.CodeMirrorAction.v6.js
View file

@ -158,13 +158,13 @@ ve.ui.CodeMirrorAction.prototype.toggle = function ( enable ) {
* @param {string} dir Document direction
*/
ve.ui.CodeMirrorAction.prototype.updateGutterWidth = function ( dir ) {
const guttersWidth = this.surface.mirror.view.dom.querySelector( '.cm-gutters' ).offsetWidth;
const guttersWidth = this.surface.mirror.view.dom.querySelector( '.cm-gutters' ).getBoundingClientRect().width;
this.surface.getView().$documentNode.css( {
'margin-left': dir === 'rtl' ? 0 : guttersWidth - 6,
'margin-right': dir === 'rtl' ? guttersWidth - 6 : 0
'margin-left': dir === 'rtl' ? 0 : guttersWidth,
'margin-right': dir === 'rtl' ? guttersWidth : 0
} );
// Also update width of .cm-content due to apparent Chromium bug.
this.surface.mirror.view.contentDOM.style.width = 'calc(100% - ' + ( guttersWidth + 1 ) + 'px)';
this.surface.mirror.view.contentDOM.style.width = 'calc(100% - ' + guttersWidth + 'px)';
};
/**
@ -218,7 +218,6 @@ ve.ui.CodeMirrorAction.prototype.onSelect = function ( selection ) {
*/
ve.ui.CodeMirrorAction.prototype.onDocumentPrecommit = function ( tx ) {
const replacements = [],
action = this,
store = this.surface.getModel().getDocument().getStore();
let offset = 0;
@ -227,8 +226,8 @@ ve.ui.CodeMirrorAction.prototype.onDocumentPrecommit = function ( tx ) {
offset += op.length;
} else if ( op.type === 'replace' ) {
replacements.push( {
from: action.surface.getModel().getSourceOffsetFromOffset( offset ),
to: action.surface.getModel().getSourceOffsetFromOffset( offset + op.remove.length ),
from: this.surface.getModel().getSourceOffsetFromOffset( offset ),
to: this.surface.getModel().getSourceOffsetFromOffset( offset + op.remove.length ),
insert: new ve.dm.ElementLinearData( store, op.insert ).getSourceText()
} );
offset += op.remove.length;
@ -240,7 +239,7 @@ ve.ui.CodeMirrorAction.prototype.onDocumentPrecommit = function ( tx ) {
this.surface.mirror.view.dispatch( { changes: replacements[ i ] } );
}
action.updateGutterWidth( this.surface.getView().getDocument().getDir() );
this.updateGutterWidth( this.surface.getView().getDocument().getDir() );
};
/* Registration */