@martindilling/ckeditor5-image-extended/src/imageinsert.js

Extended image features for CKEditor 5.

/**
 * @module image-extended/imageinsert
 */

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
// import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

// import {
// 	downcastAttributeToElement
// } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
// import { upcastElementToAttribute } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';
// import LinkCommand from './linkcommand';
// import UnlinkCommand from './unlinkcommand';
// import { createLinkElement } from './utils';
// import bindTwoStepCaretToAttribute from '@ckeditor/ckeditor5-engine/src/utils/bindtwostepcarettoattribute';
// import findLinkRange from './findlinkrange';
import '../theme/link.css';
import ImageInsertCommand from './imageinsertcommand';

// const HIGHLIGHT_CLASS = 'ck-link_selected';

/**
 * The link engine feature.
 *
 * It introduces the `linkHref="url"` attribute in the model which renders to the view as a `<a href="url">` element.
 *
 * @extends module:core/plugin~Plugin
 */
export default class ImageInsert extends Plugin {
	/**
	 * @inheritDoc
	 */
	init() {
		// const editor = this.editor;
		// const t = editor.t;
        //
		// editor.ui.componentFactory.add( 'imageInsert', locale => {
		// 	const view = new ButtonView( locale );
		// 	const command = editor.commands.get( 'imageInsert' );
        //
		// 	view.set( {
		// 		label: 'Insert image',
		// 		icon: imageIcon,
		// 		tooltip: true
		// 	} );
        //
		// 	// Callback executed once the image is clicked.
		// 	view.on( 'execute', () => {
		// 		const imageUrl = prompt( 'Image URL' );
        //
		// 		editor.model.change( writer => {
		// 			const imageElement = writer.createElement( 'image', {
		// 				src: imageUrl
		// 			} );
        //
		// 			// Insert the image in the current selection location.
		// 			editor.model.insertContent( imageElement, editor.model.document.selection );
		// 		} );
		// 	} );
        //
		// 	return view;
		// } );
		/////////////////////////////////
		const editor = this.editor;

		// // Allow link attribute on all inline nodes.
		// editor.model.schema.extend( '$text', { allowAttributes: 'linkHref' } );

		// editor.conversion.for( 'downcast' )
		// 	.add( downcastAttributeToElement( { model: 'linkHref', view: createLinkElement } ) );
        //
		// editor.conversion.for( 'upcast' )
		// 	.add( upcastElementToAttribute( {
		// 		view: {
		// 			name: 'a',
		// 			attributes: {
		// 				href: true
		// 			}
		// 		},
		// 		model: {
		// 			key: 'linkHref',
		// 			value: viewElement => viewElement.getAttribute( 'href' )
		// 		}
		// 	} ) );

		// Create linking commands.
		editor.commands.add( 'insertImage', new ImageInsertCommand( editor ) );
		// editor.commands.add( 'unlink', new UnlinkCommand( editor ) );

		// // Enable two-step caret movement for `linkHref` attribute.
		// bindTwoStepCaretToAttribute( editor.editing.view, editor.model, this, 'linkHref' );

		// // Setup highlight over selected link.
		// this._setupLinkHighlight();
	}

	// /**
	//  * Adds a visual highlight style to a link in which the selection is anchored.
	//  * Together with two-step caret movement, they indicate that the user is typing inside the link.
	//  *
	//  * Highlight is turned on by adding `.ck-link_selected` class to the link in the view:
	//  *
	//  * * the class is removed before conversion has started, as callbacks added with `'highest'` priority
	//  * to {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher} events,
	//  * * the class is added in the view post fixer, after other changes in the model tree were converted to the view.
	//  *
	//  * This way, adding and removing highlight does not interfere with conversion.
	//  *
	//  * @private
	//  */
	// _setupLinkHighlight() {
	// 	const editor = this.editor;
	// 	const view = editor.editing.view;
	// 	const highlightedLinks = new Set();
    //
	// 	// Adding the class.
	// 	view.document.registerPostFixer( writer => {
	// 		const selection = editor.model.document.selection;
    //
	// 		if ( selection.hasAttribute( 'linkHref' ) ) {
	// 			const modelRange = findLinkRange( selection.getFirstPosition(), selection.getAttribute( 'linkHref' ) );
	// 			const viewRange = editor.editing.mapper.toViewRange( modelRange );
    //
	// 			// There might be multiple `a` elements in the `viewRange`, for example, when the `a` element is
	// 			// broken by a UIElement.
	// 			for ( const item of viewRange.getItems() ) {
	// 				if ( item.is( 'a' ) ) {
	// 					writer.addClass( HIGHLIGHT_CLASS, item );
	// 					highlightedLinks.add( item );
	// 				}
	// 			}
	// 		}
	// 	} );
    //
	// 	// Removing the class.
	// 	editor.conversion.for( 'editingDowncast' ).add( dispatcher => {
	// 		// Make sure the highlight is removed on every possible event, before conversion is started.
	// 		dispatcher.on( 'insert', removeHighlight, { priority: 'highest' } );
	// 		dispatcher.on( 'remove', removeHighlight, { priority: 'highest' } );
	// 		dispatcher.on( 'attribute', removeHighlight, { priority: 'highest' } );
	// 		dispatcher.on( 'selection', removeHighlight, { priority: 'highest' } );
    //
	// 		function removeHighlight() {
	// 			view.change( writer => {
	// 				for ( const item of highlightedLinks.values() ) {
	// 					writer.removeClass( HIGHLIGHT_CLASS, item );
	// 					highlightedLinks.delete( item );
	// 				}
	// 			} );
	// 		}
	// 	} );
	// }
}