Page MenuHomeWickedGov Phorge
Files F2753601

codemirror.mediawiki.templateFolding.js
No OneTemporary
Actions

Size
8 KB
Referenced Files
None
Subscribers
None

codemirror.mediawiki.templateFolding.js
View Options

const {
EditorState,
Extension,
KeyBinding,
StateField,
SyntaxNode,
Tree,
Tooltip,
codeFolding,
ensureSyntaxTree,
foldEffect,
foldedRanges,
keymap,
showTooltip,
syntaxTree,
unfoldAll,
unfoldEffect
} = require( 'ext.CodeMirror.v6.lib' );
const modeConfig = require( './codemirror.mediawiki.config.js' );
/**
* Check if a SyntaxNode is a template bracket (`{{` or `}}`)
*
* @param {SyntaxNode} node The SyntaxNode to check
* @return {boolean}
* @private
*/
const isBracket = ( node ) => node.name.split( '_' ).includes( modeConfig.tags.templateBracket ),
/**
* Check if a SyntaxNode is a template delimiter (`|`)
*
* @param {SyntaxNode} node The SyntaxNode to check
* @return {boolean}
* @private
*/
isDelimiter = ( node ) => node.name.split( '_' ).includes( modeConfig.tags.templateDelimiter ),
/**
* Check if a SyntaxNode is part of a template, except for the brackets
*
* @param {SyntaxNode} node The SyntaxNode to check
* @return {boolean}
* @private
*/
isTemplate = ( node ) => /-template[a-z\d-]+ground/u.test( node.name ) && !isBracket( node ),
/**
* Update the stack of opening (+) or closing (-) brackets
*
* @param {EditorState} state EditorState instance
* @param {SyntaxNode} node The SyntaxNode of the bracket
* @return {number}
* @private
*/
stackUpdate = ( state, node ) => state.sliceDoc( node.from, node.from + 1 ) === '{' ? 1 : -1;
/**
* If the node is a template, find the range of the template parameters
*
* @param {EditorState} state EditorState instance
* @param {number|SyntaxNode} posOrNode Position or node
* @param {Tree|null} [tree] Syntax tree
* @return {{from: number, to: number}|null}
* @private
*/
const foldable = ( state, posOrNode, tree ) => {
if ( typeof posOrNode === 'number' ) {
tree = ensureSyntaxTree( state, posOrNode );
}
if ( !tree ) {
return null;
}
/** @type {SyntaxNode} */
let node;
if ( typeof posOrNode === 'number' ) {
// Find the initial template node on both sides of the position
node = tree.resolve( posOrNode, -1 );
if ( !isTemplate( node ) ) {
node = tree.resolve( posOrNode, 1 );
}
} else {
node = posOrNode;
}
if ( !isTemplate( node ) ) {
// Not a template
return null;
}
let { prevSibling, nextSibling } = node,
/** The stack of opening (+) or closing (-) brackets */
stack = 1,
/** The first delimiter */
delimiter = isDelimiter( node ) ? node : null;
while ( nextSibling ) {
if ( isBracket( nextSibling ) ) {
stack += stackUpdate( state, nextSibling );
if ( stack === 0 ) {
// The closing bracket of the current template
break;
}
} else if ( !delimiter && stack === 1 && isDelimiter( nextSibling ) ) {
// The first delimiter of the current template so far
delimiter = nextSibling;
}
( { nextSibling } = nextSibling );
}
if ( !nextSibling ) {
// The closing bracket of the current template is missing
return null;
}
stack = -1;
while ( prevSibling ) {
if ( isBracket( prevSibling ) ) {
stack += stackUpdate( state, prevSibling );
if ( stack === 0 ) {
// The opening bracket of the current template
break;
}
} else if ( stack === -1 && isDelimiter( prevSibling ) ) {
// The first delimiter of the current template so far
delimiter = prevSibling;
}
( { prevSibling } = prevSibling );
}
/** The end of the first delimiter */
const from = delimiter && delimiter.to,
/** The start of the closing bracket */
to = nextSibling.from;
if ( from && from < to ) {
return { from, to };
}
return null;
};
/**
* Create a tooltip for folding a template
*
* @param {EditorState} state EditorState instance
* @return {Tooltip|null}
* @private
*/
const create = ( state ) => {
const { selection: { main: { head } } } = state,
range = foldable( state, head );
if ( range ) {
const { from, to } = range;
let folded = false;
// Check if the range is already folded
foldedRanges( state ).between( from, to, ( i, j ) => {
if ( i === from && j === to ) {
folded = true;
}
} );
return folded ?
null :
{
pos: head,
above: true,
create( view ) {
const dom = document.createElement( 'div' );
dom.className = 'cm-tooltip-fold';
dom.textContent = '\uff0d';
dom.title = mw.msg( 'codemirror-fold-template' );
dom.onclick = () => {
view.dispatch( {
effects: foldEffect.of( { from, to } ),
selection: { anchor: to }
} );
dom.remove();
};
return { dom };
}
};
}
return null;
};
/**
* @type {KeyBinding[]}
* @private
*/
const foldKeymap = [
{
// Fold the template at the selection/cursor
key: 'Ctrl-Shift-[',
mac: 'Cmd-Alt-[',
run( view ) {
const { state } = view,
tree = ensureSyntaxTree( state, view.viewport.to );
if ( !tree ) {
return false;
}
const effects = [],
{ selection: { ranges } } = state;
/** The rightmost position of all selections, to be updated with folding */
let anchor = Math.max( ...ranges.map( ( { to } ) => to ) );
for ( const { from, to } of ranges ) {
let node;
if ( from === to ) {
// No selection, try both sides of the cursor position
node = tree.resolve( from, -1 );
}
if ( !node || !isTemplate( node ) ) {
node = tree.resolve( from, 1 );
}
while ( node && node.from <= to ) {
const range = foldable( state, node, tree );
if ( range ) {
effects.push( foldEffect.of( range ) );
node = tree.resolve( range.to, 1 );
// Update the anchor with the end of the last folded range
anchor = Math.max( anchor, range.to );
continue;
}
node = node.nextSibling;
}
}
if ( effects.length > 0 ) {
const dom = view.dom.querySelector( '.cm-tooltip-fold' );
if ( dom ) {
dom.remove();
}
// Fold the template(s) and update the cursor position
view.dispatch( { effects, selection: { anchor } } );
return true;
}
return false;
}
},
{
// Unfold the template at the selection/cursor
key: 'Ctrl-Shift-]',
mac: 'Cmd-Alt-]',
run( view ) {
const { state } = view,
{ selection } = state,
effects = [],
folded = foldedRanges( state );
for ( const { from, to } of selection.ranges ) {
// Unfold any folded range at the selection
folded.between( from, to, ( i, j ) => {
effects.push( unfoldEffect.of( { from: i, to: j } ) );
} );
}
if ( effects.length > 0 ) {
// Unfold the template(s) and redraw the selections
view.dispatch( { effects, selection } );
return true;
}
return false;
}
},
{
// Fold all templates in the document
key: 'Ctrl-Alt-[',
run( view ) {
const { state } = view,
tree = syntaxTree( state ),
effects = [];
/** The rightmost position of all selections, to be updated with folding */
let anchor = Math.max( ...state.selection.ranges.map( ( { to } ) => to ) ),
node = tree.topNode.firstChild;
while ( node ) {
const range = foldable( state, node, tree );
if ( range ) {
effects.push( foldEffect.of( range ) );
const { from, to } = range;
node = tree.resolve( to, 1 );
if ( from <= anchor && to > anchor ) {
// Update the anchor with the end of the last folded range
anchor = to;
}
continue;
}
node = node.nextSibling;
}
if ( effects.length > 0 ) {
const dom = view.dom.querySelector( '.cm-tooltip-fold' );
if ( dom ) {
dom.remove();
}
// Fold the template(s) and update the cursor position
view.dispatch( { effects, selection: { anchor } } );
return true;
}
return false;
}
},
{ key: 'Ctrl-Alt-]', run: unfoldAll }
];
/**
* CodeMirror extension providing
* [template folding](https://www.mediawiki.org/wiki/Help:Extension:CodeMirror#Template_folding)
* for the MediaWiki mode. This automatically applied when using {@link CodeMirrorModeMediaWiki}.
*
* @module CodeMirrorTemplateFolding
* @type {Extension}
*/
const templateFoldingExtension = [
codeFolding( {
placeholderDOM( view ) {
const element = document.createElement( 'span' );
element.textContent = '…';
element.setAttribute( 'aria-label', mw.msg( 'codemirror-folded-code' ) );
element.title = mw.msg( 'codemirror-unfold' );
element.className = 'cm-foldPlaceholder';
element.onclick = ( { target } ) => {
const pos = view.posAtDOM( target ),
{ state } = view,
{ selection } = state;
foldedRanges( state ).between( pos, pos, ( from, to ) => {
if ( from === pos ) {
// Unfold the template and redraw the selections
view.dispatch( { effects: unfoldEffect.of( { from, to } ), selection } );
}
} );
};
return element;
}
} ),
/** @see https://codemirror.net/examples/tooltip/ */
StateField.define( {
create,
update( tooltip, { state, docChanged, selection } ) {
return docChanged || selection ? create( state ) : tooltip;
},
provide( f ) {
return showTooltip.from( f );
}
} ),
keymap.of( foldKeymap )
];
module.exports = templateFoldingExtension;

File Metadata

Mime Type
text/plain
Expires
Fri, Jul 3, 21:28 (16 h, 9 m)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
93/89/e34284f07c6b8888fca85f419b2b
Default Alt Text
codemirror.mediawiki.templateFolding.js (8 KB)

Event Timeline