mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-28 16:20:52 +00:00
e148234c29
Moved annotation rendering from ce.Textnode into the new
ce.ContentBranchNode class. This allows us to render annotations that
span across multiple nodes.
* Add ce.ContentBranchNode, inheriting ce.BranchNode
* Make ce.{Paragraph,Heading,Preformatted}Node inherit ce.ContentBranchNode
* Made ce.ContentBranchNode render its child nodes with anntations,
using .getAnnotatedHtml() on the child nodes
* Put a default implementation for .getAnnotatedHtml() in ce.LeafNode
* Override this in ce.TextNode to do escaping and whitespace handling
* Removed rendering code from ce.TextNode (this.$ is now unused there)
* Removed ce.TextNode.onUpdate() and ce.BranchNode.clean(), now unneeded
* Have ce.BranchNode propagate update events from children, so
ce.ContentBranchNode can rerender when its children change
* Update tests, add test case for escaping of &<>'"
Change-Id: I4600e984b287c6ff9267f4281d2f09bab9e1ad95
361 lines
16 KiB
PHP
361 lines
16 KiB
PHP
<?php
|
|
/**
|
|
* VisualEditor standalone demo
|
|
*
|
|
* @file
|
|
* @ingroup Extensions
|
|
* @copyright 2011-2012 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
$path = dirname( __FILE__ ) . '/pages';
|
|
$pages = glob( $path . '/*.html' );
|
|
$page = current( $pages );
|
|
if ( isset( $_GET['page'] ) && in_array( $path . '/' . $_GET['page'] . '.html', $pages ) ) {
|
|
$page = $path . '/' . $_GET['page'] . '.html';
|
|
}
|
|
$html = '<div>' . file_get_contents( $page ) . '</div>';
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>VisualEditor Standalone Demo</title>
|
|
|
|
<!-- Generated by maintenance/makeStaticLoader.php -->
|
|
<!-- Standalone Init -->
|
|
<link rel=stylesheet href="../../modules/ve/init/sa/styles/ve.init.sa.css">
|
|
<!-- ext.visualEditor.core -->
|
|
<link rel=stylesheet href="../../modules/ve/ce/styles/ve.ce.DocumentNode.css">
|
|
<link rel=stylesheet href="../../modules/ve/ce/styles/ve.ce.Node.css">
|
|
<link rel=stylesheet href="../../modules/ve/ce/styles/ve.ce.Surface.css">
|
|
<link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Context.css">
|
|
<link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Inspector.css">
|
|
<link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Menu.css">
|
|
<link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Surface.css">
|
|
<link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Toolbar.css">
|
|
<link rel=stylesheet href="../../modules/ve/ui/styles/ve.ui.Tool.css">
|
|
|
|
<script>
|
|
if ( window.devicePixelRatio > 1 ) {
|
|
document.write( '<link rel="stylesheet" href="../../modules/ve/ui/styles/ve.ui.Icons-vector.css">' );
|
|
} else {
|
|
document.write( '<link rel="stylesheet" href="../../modules/ve/ui/styles/ve.ui.Icons-raster.css">' );
|
|
}
|
|
</script>
|
|
|
|
<!-- demo -->
|
|
<link rel="stylesheet" href="demo.css">
|
|
</head>
|
|
<body>
|
|
<ul class="ve-demo-docs">
|
|
<?php foreach( $pages as $page ): ?>
|
|
<li>
|
|
<a href="./?page=<?php echo basename( $page, '.html' ); ?>">
|
|
<?php echo basename( $page, '.html' ); ?>
|
|
</a>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
<div class="ve-demo-content"></div>
|
|
|
|
<!-- Generated by maintenance/makeStaticLoader.php -->
|
|
<!-- Dependencies -->
|
|
<script src="../../modules/jquery/jquery.js"></script>
|
|
<script src="../../modules/jquery/jquery.json.js"></script>
|
|
<script src="../../modules/jquery/jquery.multiSuggest.js"></script>
|
|
<script src="../../modules/rangy/rangy-core.js"></script>
|
|
<script src="../../modules/rangy/rangy-position.js"></script>
|
|
<!-- ext.visualEditor.base -->
|
|
<script src="../../modules/ve/ve.js"></script>
|
|
<script src="../../modules/ve/ve.EventEmitter.js"></script>
|
|
<script src="../../modules/ve/init/ve.init.js"></script>
|
|
<script src="../../modules/ve/init/ve.init.Platform.js"></script>
|
|
<script src="../../modules/ve/ve.debug.js"></script>
|
|
<!-- Standalone Init -->
|
|
<script src="../../modules/ve/init/sa/ve.init.sa.js"></script>
|
|
<script src="../../modules/ve/init/sa/ve.init.sa.Platform.js"></script>
|
|
|
|
<!-- i18n -->
|
|
<script>
|
|
<?php
|
|
include( dirname( dirname( dirname( __FILE__ ) ) ) . '/VisualEditor.i18n.php' );
|
|
echo 've.init.platform.addMessages( ' . json_encode( $messages['en'] ) . ');';
|
|
?>
|
|
ve.init.platform.setModulesUrl( '../../modules' );
|
|
</script>
|
|
|
|
<!-- Generated by maintenance/makeStaticLoader.php (cont.) -->
|
|
<!-- ext.visualEditor.core -->
|
|
<script src="../../modules/ve/ve.Registry.js"></script>
|
|
<script src="../../modules/ve/ve.Factory.js"></script>
|
|
<script src="../../modules/ve/ve.Position.js"></script>
|
|
<script src="../../modules/ve/ve.Command.js"></script>
|
|
<script src="../../modules/ve/ve.CommandRegistry.js"></script>
|
|
<script src="../../modules/ve/ve.Range.js"></script>
|
|
<script src="../../modules/ve/ve.Node.js"></script>
|
|
<script src="../../modules/ve/ve.BranchNode.js"></script>
|
|
<script src="../../modules/ve/ve.LeafNode.js"></script>
|
|
<script src="../../modules/ve/ve.Surface.js"></script>
|
|
<script src="../../modules/ve/ve.Document.js"></script>
|
|
<script src="../../modules/ve/ve.OrderedHashSet.js"></script>
|
|
<script src="../../modules/ve/ve.AnnotationSet.js"></script>
|
|
<script src="../../modules/ve/ve.Action.js"></script>
|
|
<script src="../../modules/ve/ve.ActionFactory.js"></script>
|
|
<script src="../../modules/ve/actions/ve.AnnotationAction.js"></script>
|
|
<script src="../../modules/ve/actions/ve.ContentAction.js"></script>
|
|
<script src="../../modules/ve/actions/ve.FormatAction.js"></script>
|
|
<script src="../../modules/ve/actions/ve.HistoryAction.js"></script>
|
|
<script src="../../modules/ve/actions/ve.IndentationAction.js"></script>
|
|
<script src="../../modules/ve/actions/ve.InspectorAction.js"></script>
|
|
<script src="../../modules/ve/actions/ve.ListAction.js"></script>
|
|
<script src="../../modules/ve/dm/ve.dm.js"></script>
|
|
<script src="../../modules/ve/dm/ve.dm.NodeFactory.js"></script>
|
|
<script src="../../modules/ve/dm/ve.dm.AnnotationFactory.js"></script>
|
|
<script src="../../modules/ve/dm/ve.dm.Node.js"></script>
|
|
<script src="../../modules/ve/dm/ve.dm.BranchNode.js"></script>
|
|
<script src="../../modules/ve/dm/ve.dm.LeafNode.js"></script>
|
|
<script src="../../modules/ve/dm/ve.dm.Annotation.js"></script>
|
|
<script src="../../modules/ve/dm/ve.dm.TransactionProcessor.js"></script>
|
|
<script src="../../modules/ve/dm/ve.dm.Transaction.js"></script>
|
|
<script src="../../modules/ve/dm/ve.dm.Surface.js"></script>
|
|
<script src="../../modules/ve/dm/ve.dm.SurfaceFragment.js"></script>
|
|
<script src="../../modules/ve/dm/ve.dm.Document.js"></script>
|
|
<script src="../../modules/ve/dm/ve.dm.DocumentSynchronizer.js"></script>
|
|
<script src="../../modules/ve/dm/ve.dm.Converter.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.AlienInlineNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.AlienBlockNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.BreakNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.CenterNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.DefinitionListItemNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.DefinitionListNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.DocumentNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.HeadingNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.ImageNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.ListItemNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.ListNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.MetaBlockNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.MetaInlineNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.MWEntityNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.ParagraphNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.PreformattedNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.TableCellNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.TableNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.TableRowNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.TableSectionNode.js"></script>
|
|
<script src="../../modules/ve/dm/nodes/ve.dm.TextNode.js"></script>
|
|
<script src="../../modules/ve/dm/annotations/ve.dm.LinkAnnotation.js"></script>
|
|
<script src="../../modules/ve/dm/annotations/ve.dm.MWExternalLinkAnnotation.js"></script>
|
|
<script src="../../modules/ve/dm/annotations/ve.dm.MWInternalLinkAnnotation.js"></script>
|
|
<script src="../../modules/ve/dm/annotations/ve.dm.TextStyleAnnotation.js"></script>
|
|
<script src="../../modules/ve/ce/ve.ce.js"></script>
|
|
<script src="../../modules/ve/ce/ve.ce.NodeFactory.js"></script>
|
|
<script src="../../modules/ve/ce/ve.ce.Document.js"></script>
|
|
<script src="../../modules/ve/ce/ve.ce.Node.js"></script>
|
|
<script src="../../modules/ve/ce/ve.ce.BranchNode.js"></script>
|
|
<script src="../../modules/ve/ce/ve.ce.ContentBranchNode.js"></script>
|
|
<script src="../../modules/ve/ce/ve.ce.LeafNode.js"></script>
|
|
<script src="../../modules/ve/ce/ve.ce.Surface.js"></script>
|
|
<script src="../../modules/ve/ce/ve.ce.SurfaceObserver.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.AlienNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.AlienInlineNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.AlienBlockNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.BreakNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.CenterNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.DefinitionListItemNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.DefinitionListNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.DocumentNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.HeadingNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.ImageNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.ListItemNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.ListNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.MetaBlockNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.MetaInlineNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.MWEntityNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.ParagraphNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.PreformattedNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.TableCellNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.TableNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.TableRowNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.TableSectionNode.js"></script>
|
|
<script src="../../modules/ve/ce/nodes/ve.ce.TextNode.js"></script>
|
|
<script src="../../modules/ve/ui/ve.ui.js"></script>
|
|
<script src="../../modules/ve/ui/ve.ui.Context.js"></script>
|
|
<script src="../../modules/ve/ui/ve.ui.Frame.js"></script>
|
|
<script src="../../modules/ve/ui/ve.ui.Inspector.js"></script>
|
|
<script src="../../modules/ve/ui/ve.ui.InspectorFactory.js"></script>
|
|
<script src="../../modules/ve/ui/ve.ui.Menu.js"></script>
|
|
<script src="../../modules/ve/ui/ve.ui.Tool.js"></script>
|
|
<script src="../../modules/ve/ui/ve.ui.Toolbar.js"></script>
|
|
<script src="../../modules/ve/ui/ve.ui.ToolFactory.js"></script>
|
|
<script src="../../modules/ve/ui/inspectors/ve.ui.LinkInspector.js"></script>
|
|
<script src="../../modules/ve/ui/tools/ve.ui.ButtonTool.js"></script>
|
|
<script src="../../modules/ve/ui/tools/ve.ui.AnnotationButtonTool.js"></script>
|
|
<script src="../../modules/ve/ui/tools/ve.ui.InspectorButtonTool.js"></script>
|
|
<script src="../../modules/ve/ui/tools/ve.ui.IndentationButtonTool.js"></script>
|
|
<script src="../../modules/ve/ui/tools/ve.ui.ListButtonTool.js"></script>
|
|
<script src="../../modules/ve/ui/tools/ve.ui.DropdownTool.js"></script>
|
|
<script src="../../modules/ve/ui/tools/buttons/ve.ui.BoldButtonTool.js"></script>
|
|
<script src="../../modules/ve/ui/tools/buttons/ve.ui.ItalicButtonTool.js"></script>
|
|
<script src="../../modules/ve/ui/tools/buttons/ve.ui.ClearButtonTool.js"></script>
|
|
<script src="../../modules/ve/ui/tools/buttons/ve.ui.LinkButtonTool.js"></script>
|
|
<script src="../../modules/ve/ui/tools/buttons/ve.ui.BulletButtonTool.js"></script>
|
|
<script src="../../modules/ve/ui/tools/buttons/ve.ui.NumberButtonTool.js"></script>
|
|
<script src="../../modules/ve/ui/tools/buttons/ve.ui.IndentButtonTool.js"></script>
|
|
<script src="../../modules/ve/ui/tools/buttons/ve.ui.OutdentButtonTool.js"></script>
|
|
<script src="../../modules/ve/ui/tools/buttons/ve.ui.RedoButtonTool.js"></script>
|
|
<script src="../../modules/ve/ui/tools/buttons/ve.ui.UndoButtonTool.js"></script>
|
|
<script src="../../modules/ve/ui/tools/dropdowns/ve.ui.FormatDropdownTool.js"></script>
|
|
|
|
<!-- demo -->
|
|
<script>
|
|
$(document).ready( function () {
|
|
new ve.Surface(
|
|
$( '.ve-demo-content' ),
|
|
$( <?php echo json_encode( $html ) ?> )[0]
|
|
);
|
|
$( '.ve-ce-documentNode' ).focus();
|
|
} );
|
|
</script>
|
|
|
|
<div style="margin-left: 2em; margin-right: 2em; margin-bottom: 1em;">
|
|
<labe>Start</label>
|
|
<input type="text" style="width: 3em" id="ve-debug-start"/>
|
|
<labe>End</label>
|
|
<input type="text" style="width: 3em" id="ve-debug-end"/>
|
|
<br/>
|
|
<a href="#" id="ve-get-range">Get range from the editor</a>
|
|
<br/>
|
|
<a href="#" id="ve-dump-data">Dump data to the console</a>
|
|
<br/>
|
|
<a href="#" id="ve-dump-all">Dump all data</a>
|
|
<br/>
|
|
<a href="#" id="ve-validate">Validate (DOM Data vs. Model Data)</a>
|
|
<br/><br/>
|
|
<table id="ve-dump" border="1" width="100%" style="display: none;">
|
|
<tr>
|
|
<td>Linear model</td>
|
|
<td>View tree</td>
|
|
<td>Model tree</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="30%" id="ve-linear-model-dump"></td>
|
|
<td id="ve-view-tree-dump" style="vertical-align: top;"></td>
|
|
<td id="ve-model-tree-dump" style="vertical-align: top;"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<script>
|
|
$( function () {
|
|
$( '#ve-validate' ).on( "click", function ( e ) {
|
|
var failed = false;
|
|
$('.ve-ce-branchNode').each( function ( index, element ) {
|
|
var $element = $( element ),
|
|
view = $element.data( 'node' );
|
|
if ( view.canContainContent() ) {
|
|
var nodeRange = view.model.getRange();
|
|
var textModel = ve.instances[0].view.model.getDocument().getText( nodeRange );
|
|
var textDom = ve.ce.getDomText( view.$[0] );
|
|
if ( textModel !== textDom ) {
|
|
failed = true;
|
|
console.log('Inconsistent data', {
|
|
'textModel' : textModel,
|
|
'textDom' : textDom,
|
|
'element' : element
|
|
} );
|
|
}
|
|
}
|
|
});
|
|
if ( failed ) {
|
|
alert( 'Not valid - check JS console for details' );
|
|
} else {
|
|
alert( 'Valid' );
|
|
}
|
|
e.preventDefault();
|
|
return false;
|
|
} );
|
|
$( '#ve-dump-all' ).on( "click", function ( e ) {
|
|
// linear model dump
|
|
var $ol = $('<ol start="0"></ol>'),
|
|
$li,
|
|
element,
|
|
html,
|
|
annotations;
|
|
|
|
for ( var i = 0; i < ve.instances[0].documentModel.data.length; i++ ) {
|
|
$li = $('<li>');
|
|
element = ve.instances[0].documentModel.data[i];
|
|
if ( element.type ) {
|
|
text = element.type;
|
|
annotations = element.annotations;
|
|
} else if ( element.length > 1 ){
|
|
text = element[0];
|
|
annotations = element[1];
|
|
} else {
|
|
text = element;
|
|
annotations = undefined;
|
|
}
|
|
if ( annotations ) {
|
|
text += ' [' + annotations.get().map(
|
|
function( ann ) {
|
|
return ann.name;
|
|
} ).join(', ') + ']';
|
|
}
|
|
|
|
$li.text( text );
|
|
$ol.append($li);
|
|
}
|
|
$('#ve-linear-model-dump').html($ol);
|
|
|
|
// tree dump
|
|
var getKids = function ( obj ) {
|
|
var $ol = $('<ol start="0"></ol>'),
|
|
$li;
|
|
for( var i = 0; i < obj.children.length; i++ ) {
|
|
$li = $('<li>');
|
|
if ( obj.children[i].length !== undefined ) {
|
|
$li.text(
|
|
obj.children[i].type + ' (' +
|
|
obj.children[i].length + ')'
|
|
);
|
|
} else {
|
|
$li.text( obj.children[i].type );
|
|
}
|
|
|
|
if ( obj.children[i].children ) {
|
|
$li.append(getKids(obj.children[i]));
|
|
}
|
|
|
|
|
|
$ol.append($li);
|
|
}
|
|
return $ol;
|
|
}
|
|
$('#ve-model-tree-dump').html(getKids(ve.instances[0].documentModel.documentNode));
|
|
$('#ve-view-tree-dump').html(getKids(ve.instances[0].view.documentView.documentNode));
|
|
$('#ve-dump').show();
|
|
e.preventDefault();
|
|
return false;
|
|
} );
|
|
$( '#ve-get-range' ).on( "click", function ( e ) {
|
|
var range = ve.instances[0].view.model.getSelection();
|
|
$( '#ve-debug-start' ).val( range.start );
|
|
$( '#ve-debug-end' ).val( range.end );
|
|
e.preventDefault();
|
|
return false;
|
|
} );
|
|
$( '#ve-dump-data' ).on( "click", function ( e ) {
|
|
var start = $( '#ve-debug-start' ).val(),
|
|
end = $( '#ve-debug-end' ).val();
|
|
// TODO: Validate input
|
|
console.dir( ve.instances[0].view.documentView.model.data.slice( start, end ) );
|
|
e.preventDefault();
|
|
return false;
|
|
} );
|
|
} );
|
|
</script>
|
|
</body>
|
|
</html>
|