wikimedia/mediawiki-extensions-CodeMirror
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeMirror synced 2024-09-24 10:48:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Support WikiEditor's realtime-preview feature

Browse source 
Add support for enabling, resizing, and disabling the new
realtime-preview feature.

Bug: T293347
Bug: T303767
Change-Id: I8c8c25fe56be55a61f4b8d1d2ef8cf74483aa241
This commit is contained in:
Sam Wilson 2022-02-16 15:53:23 +08:00
parent bec93b7b5a
commit 1310fbf645
2 changed files with 51 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
resources/ext.CodeMirror.js
View file

@ -102,6 +102,55 @@
'ext.CodeMirror.mode.mediawiki'
];
/**
* Set the size of the CodeMirror element,
* and react to changes coming from WikiEditor (including Realtime Preview if its enabled).
*/
function setupSizing() {
var $codeMirror = $( codeMirror.getWrapperElement() );
// Only add jQuery UI's resizing corner if realtime preview is not enabled,
// because that feature provides height resizing (even when preview isn't used).
if ( mw.loader.getState( 'ext.wikiEditor.realtimepreview' ) === 'ready' ) {
codeMirror.setSize( '100%', $textbox1.parent().height() );
} else {
// RL module jquery.ui
$codeMirror.resizable( {
handles: 'se',
resize: function ( event, ui ) {
ui.size.width = ui.originalSize.width;
}
} );
// Match the height of the textarea.
codeMirror.setSize( null, $textbox1.height() );
}
var $resizableHandle = $codeMirror.find( '.ui-resizable-handle' );
mw.hook( 'ext.WikiEditor.realtimepreview.enable' ).add( function ( realtimePreview ) {
// CodeMirror may have been turned on and then off again before realtimepreview is enabled, in which case it will be null.
if ( !codeMirror ) {
return;
}
// Get rid of the corner resize handle, because realtimepreview provides its own.
$resizableHandle.hide();
// Add listener for CodeMirror keyups.
realtimePreview.addPreviewListener( $codeMirror );
// Fix the width and height of the CodeMirror area.
codeMirror.setSize( '100%', realtimePreview.twoPaneLayout.$element.height() );
} );
mw.hook( 'ext.WikiEditor.realtimepreview.resize' ).add( function ( resizingBar ) {
// CodeMirror may have been turned off after realtimepreview was opened, in which case it will be null.
if ( !codeMirror ) {
return;
}
// Keep in sync with the height of the pane.
codeMirror.setSize( '100%', resizingBar.getResizedPane().height() );
} );
mw.hook( 'ext.WikiEditor.realtimepreview.disable' ).add( function () {
// Re-show the corner resize handle.
$resizableHandle.show();
} );
}
/**
* Replaces the default textarea with CodeMirror
*/
@ -168,13 +217,7 @@
// CodeMirror. We unregister this when switching to normal textarea mode.
$textbox1.textSelection( 'register', cmTextSelection );
// RL module jquery.ui
$codeMirror.resizable( {
handles: 'se',
resize: function ( event, ui ) {
ui.size.width = ui.originalSize.width;
}
} );
setupSizing( $textbox1, codeMirror );
if ( hasFocus ) {
codeMirror.focus();
@ -200,9 +243,6 @@
// T194102: UniversalLanguageSelector integration is buggy, disabling it completely
.addClass( 'noime' );
// set the height of the textarea
codeMirror.setSize( null, $textbox1.height() );
if ( mw.config.get( 'wgCodeMirrorAccessibilityColors' ) ) {
$codeMirror.addClass( 'cm-mw-accessible-colors' );
}

1
resources/ext.CodeMirror.less
View file

@ -14,6 +14,7 @@
line-height: 1.5em;
padding: 0.1em;
clear: both;
box-sizing: border-box;
pre,
.CodeMirror-lines {