/** * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or http://ckeditor.com/license */ /** * @fileOverview Rich code snippets for CKEditor. */ 'use strict'; ( function() { var isBrowserSupported = !CKEDITOR.env.ie || CKEDITOR.env.version > 8; CKEDITOR.plugins.add( 'codesnippet', { requires: 'widget,dialog', lang: 'ar,bg,ca,cs,da,de,de-ch,el,en,en-gb,eo,es,et,eu,fa,fi,fr,fr-ca,gl,he,hr,hu,id,it,ja,km,ko,ku,lt,lv,nb,nl,no,pl,pt,pt-br,ro,ru,sk,sl,sq,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE% icons: 'codesnippet', // %REMOVE_LINE_CORE% hidpi: true, // %REMOVE_LINE_CORE% beforeInit: function( editor ) { editor._.codesnippet = {}; /** * Sets the custom syntax highlighter. See {@link CKEDITOR.plugins.codesnippet.highlighter} * to learn how to register a custom highlighter. * * **Note**: * * * This method can only be called while initialising plugins (in one of * the three callbacks). * * This method is accessible through the `editor.plugins.codesnippet` namespace only. * * @since 4.4 * @member CKEDITOR.plugins.codesnippet * @param {CKEDITOR.plugins.codesnippet.highlighter} highlighter */ this.setHighlighter = function( highlighter ) { editor._.codesnippet.highlighter = highlighter; var langs = editor._.codesnippet.langs = editor.config.codeSnippet_languages || highlighter.languages; // We might escape special regex chars below, but we expect that there // should be no crazy values used as lang keys. editor._.codesnippet.langsRegex = new RegExp( '(?:^|\\s)language-(' + CKEDITOR.tools.objectKeys( langs ).join( '|' ) + ')(?:\\s|$)' ); }; }, onLoad: function() { CKEDITOR.dialog.add( 'codeSnippet', this.path + 'dialogs/codesnippet.js' ); }, init: function( editor ) { editor.ui.addButton && editor.ui.addButton( 'CodeSnippet', { label: editor.lang.codesnippet.button, command: 'codeSnippet', toolbar: 'insert,10' } ); }, afterInit: function( editor ) { var path = this.path; registerWidget( editor ); // At the very end, if no custom highlighter was set so far (by plugin#setHighlighter) // we will set default one. if ( !editor._.codesnippet.highlighter ) { var hljsHighlighter = new CKEDITOR.plugins.codesnippet.highlighter( { languages: { apache: 'Apache', bash: 'Bash', coffeescript: 'CoffeeScript', cpp: 'C++', cs: 'C#', css: 'CSS', diff: 'Diff', html: 'HTML', http: 'HTTP', ini: 'INI', java: 'Java', javascript: 'JavaScript', json: 'JSON', makefile: 'Makefile', markdown: 'Markdown', nginx: 'Nginx', objectivec: 'Objective-C', perl: 'Perl', php: 'PHP', python: 'Python', ruby: 'Ruby', sql: 'SQL', vbscript: 'VBScript', xhtml: 'XHTML', xml: 'XML' }, init: function( callback ) { var that = this; if ( isBrowserSupported ) { CKEDITOR.scriptLoader.load( path + 'lib/highlight/highlight.pack.js', function() { that.hljs = window.hljs; callback(); } ); } // Method is available only if wysiwygarea exists. if ( editor.addContentsCss ) { editor.addContentsCss( path + 'lib/highlight/styles/' + editor.config.codeSnippet_theme + '.css' ); } }, highlighter: function( code, language, callback ) { var highlighted = this.hljs.highlightAuto( code, this.hljs.getLanguage( language ) ? [ language ] : undefined ); if ( highlighted ) callback( highlighted.value ); } } ); this.setHighlighter( hljsHighlighter ); } } } ); /** * Global helpers and classes of the Code Snippet plugin. * * For more information see the [Code Snippet Guide](#!/guide/dev_codesnippet). * * @class * @singleton */ CKEDITOR.plugins.codesnippet = { highlighter: Highlighter }; /** * A Code Snippet highlighter. It can be set as a default highlighter * using {@link CKEDITOR.plugins.codesnippet#setHighlighter}, for example: * * // Create a new plugin which registers a custom code highlighter * // based on customEngine in order to replace the one that comes * // with the Code Snippet plugin. * CKEDITOR.plugins.add( 'myCustomHighlighter', { * afterInit: function( editor ) { * // Create a new instance of the highlighter. * var myHighlighter = new CKEDITOR.plugins.codesnippet.highlighter( { * init: function( ready ) { * // Asynchronous code to load resources and libraries for customEngine. * customEngine.loadResources( function() { * // Let the editor know that everything is ready. * ready(); * } ); * }, * highlighter: function( code, language, callback ) { * // Let the customEngine highlight the code. * customEngine.highlight( code, language, function() { * callback( highlightedCode ); * } ); * } * } ); * * // Check how it performs. * myHighlighter.highlight( 'foo()', 'javascript', function( highlightedCode ) { * console.log( highlightedCode ); // -> foo() * } ); * * // From now on, myHighlighter will be used as a Code Snippet * // highlighter, overwriting the default engine. * editor.plugins.codesnippet.setHighlighter( myHighlighter ); * } * } ); * * @since 4.4 * @class CKEDITOR.plugins.codesnippet.highlighter * @extends CKEDITOR.plugins.codesnippet * @param {Object} def Highlighter definition. See {@link #highlighter}, {@link #init} and {@link #languages}. */ function Highlighter( def ) { CKEDITOR.tools.extend( this, def ); /** * A queue of {@link #highlight} jobs to be * done once the highlighter is {@link #ready}. * * @readonly * @property {Array} [=[]] */ this.queue = []; // Async init – execute jobs when ready. if ( this.init ) { this.init( CKEDITOR.tools.bind( function() { // Execute pending jobs. var job; while ( ( job = this.queue.pop() ) ) job.call( this ); this.ready = true; }, this ) ); } else { this.ready = true; } /** * If specified, this function should asynchronously load highlighter-specific * resources and execute `ready` when the highlighter is ready. * * @property {Function} [init] * @param {Function} ready The function to be called once * the highlighter is {@link #ready}. */ /** * A function which highlights given plain text `code` in a given `language` and, once done, * calls the `callback` function with highlighted markup as an argument. * * @property {Function} [highlighter] * @param {String} code Code to be formatted. * @param {String} lang Language to be used ({@link CKEDITOR.config#codeSnippet_languages}). * @param {Function} callback Function which accepts highlighted String as an argument. */ /** * Defines languages supported by the highlighter. * They can be restricted with the {@link CKEDITOR.config#codeSnippet_languages} configuration option. * * **Note**: If {@link CKEDITOR.config#codeSnippet_languages} is set, **it will * overwrite** the languages listed in `languages`. * * languages: { * coffeescript: 'CoffeeScript', * cpp: 'C++', * cs: 'C#', * css: 'CSS' * } * * More information on how to change the list of languages is available * in the [Code Snippet documentation](#!/guide/dev_codesnippet-section-changing-languages-list). * * @property {Object} languages */ /** * A flag which indicates whether the highlighter is ready to do jobs * from the {@link #queue}. * * @readonly * @property {Boolean} ready */ } /** * Executes the {@link #highlighter}. If the highlighter is not ready, it defers the job ({@link #queue}) * and executes it when the highlighter is {@link #ready}. * * @param {String} code Code to be formatted. * @param {String} lang Language to be used ({@link CKEDITOR.config#codeSnippet_languages}). * @param {Function} callback Function which accepts highlighted String as an argument. */ Highlighter.prototype.highlight = function() { var arg = arguments; // Highlighter is ready – do it now. if ( this.ready ) this.highlighter.apply( this, arg ); // Queue the job. It will be done once ready. else { this.queue.push( function() { this.highlighter.apply( this, arg ); } ); } }; // Encapsulates snippet widget registration code. // @param {CKEDITOR.editor} editor function registerWidget( editor ) { var codeClass = editor.config.codeSnippet_codeClass, newLineRegex = /\r?\n/g, textarea = new CKEDITOR.dom.element( 'textarea' ), lang = editor.lang.codesnippet; editor.widgets.add( 'codeSnippet', { allowedContent: 'pre; code(language-*)', // Actually we need both - pre and code, but ACF does not make it possible // to defire required content with "and" operator. requiredContent: 'pre', styleableElements: 'pre', template: '
',
dialog: 'codeSnippet',
pathName: lang.pathName,
mask: true,
parts: {
pre: 'pre',
code: 'code'
},
highlight: function() {
var that = this,
widgetData = this.data,
callback = function( formatted ) {
// IE8 (not supported browser) have issue with new line chars, when using innerHTML.
// It will simply strip it.
that.parts.code.setHtml( isBrowserSupported ?
formatted : formatted.replace( newLineRegex, '...
upcast: function( el, data ) {
if ( el.name != 'pre' )
return;
var childrenArray = getNonEmptyChildren( el ),
code;
if ( childrenArray.length != 1 || ( code = childrenArray[ 0 ] ).name != 'code' )
return;
// Upcast with text only: http://dev.ckeditor.com/ticket/11926#comment:4
if ( code.children.length != 1 || code.children[ 0 ].type != CKEDITOR.NODE_TEXT )
return;
// Read language-* from class attribute.
var matchResult = editor._.codesnippet.langsRegex.exec( code.attributes[ 'class' ] );
if ( matchResult )
data.lang = matchResult[ 1 ];
// Use textarea to decode HTML entities (#11926).
textarea.setHtml( code.getHtml() );
data.code = textarea.getValue();
code.addClass( codeClass );
return el;
},
// Downcasts to ...
downcast: function( el ) {
var code = el.getFirst( 'code' );
// Remove pretty formatting from ...
.
code.children.length = 0;
// Remove config#codeSnippet_codeClass.
code.removeClass( codeClass );
// Set raw text inside ...
.
code.add( new CKEDITOR.htmlParser.text( CKEDITOR.tools.htmlEncode( this.data.code ) ) );
return el;
}
} );
// Returns an **array** of child elements, with whitespace-only text nodes
// filtered out.
// @param {CKEDITOR.htmlParser.element} parentElement
// @return Array - array of CKEDITOR.htmlParser.node
var whitespaceOnlyRegex = /^[\s\n\r]*$/;
function getNonEmptyChildren( parentElement ) {
var ret = [],
preChildrenList = parentElement.children,
curNode;
// Filter out empty text nodes.
for ( var i = preChildrenList.length - 1; i >= 0; i-- ) {
curNode = preChildrenList[ i ];
if ( curNode.type != CKEDITOR.NODE_TEXT || !curNode.value.match( whitespaceOnlyRegex ) )
ret.push( curNode );
}
return ret;
}
}
} )();
/**
* A CSS class of the `` element used internally for styling
* (by default [highlight.js](http://highlightjs.org) themes, see
* {@link CKEDITOR.config#codeSnippet_theme config.codeSnippet_theme}),
* which means that it is **not present** in the editor output data.
*
* // Changes the class to "myCustomClass".
* config.codeSnippet_codeClass = 'myCustomClass';
*
* **Note**: The class might need to be changed when you are using a custom
* highlighter (the default is [highlight.js](http://highlightjs.org)).
* See {@link CKEDITOR.plugins.codesnippet.highlighter} to read more.
*
* Read more in the [documentation](#!/guide/dev_codesnippet)
* and see the [SDK sample](http://sdk.ckeditor.com/samples/codesnippet.html).
*
* @since 4.4
* @cfg {String} [codeSnippet_codeClass='hljs']
* @member CKEDITOR.config
*/
CKEDITOR.config.codeSnippet_codeClass = 'hljs';
/**
* Restricts languages available in the "Code Snippet" dialog window.
* An empty value is always added to the list.
*
* **Note**: If using a custom highlighter library (the default is [highlight.js](http://highlightjs.org)),
* you may need to refer to external documentation to set `config.codeSnippet_languages` properly.
*
* Read more in the [documentation](#!/guide/dev_codesnippet-section-changing-supported-languages)
* and see the [SDK sample](http://sdk.ckeditor.com/samples/codesnippet.html).
*
* // Restricts languages to JavaScript and PHP.
* config.codeSnippet_languages = {
* javascript: 'JavaScript',
* php: 'PHP'
* };
*
* @since 4.4
* @cfg {Object} [codeSnippet_languages=null]
* @member CKEDITOR.config
*/
/**
* A theme used to render code snippets. See [available themes](http://highlightjs.org/static/test.html).
*
* **Note**: This will only work with the default highlighter
* ([highlight.js](http://highlightjs.org/static/test.html)).
*
* Read more in the [documentation](#!/guide/dev_codesnippet-section-changing-highlighter-theme)
* and see the [SDK sample](http://sdk.ckeditor.com/samples/codesnippet.html).
*
* // Changes the theme to "pojoaque".
* config.codeSnippet_theme = 'pojoaque';
*
* @since 4.4
* @cfg {String} [codeSnippet_theme='default']
* @member CKEDITOR.config
*/
CKEDITOR.config.codeSnippet_theme = 'default';