How to use @ckeditor/ckeditor5-widget - 10 common examples

view: ( modelElement, viewWriter ) => {
				// Create the widget view element.
				const div = toWidget( createSuperFieldElement( viewWriter, modelElement ), viewWriter );

				// Create a wrapper for custom UI (must use UIElement!).
				const renderFunction = createCustomUIRenderer( editor, modelElement );
				const customUIWrapper = viewWriter.createUIElement( 'div', {}, renderFunction );

				// And insert it inside the widget element.
				viewWriter.insert( viewWriter.createPositionAt( div, 0 ), customUIWrapper );

				// Returns the following structure:
				//
				// 	<div>				   // widget element
				//		<div>			   // UIElement (wrapper for the custom UI)
				//			<button>
				//			<input>      // will be turned into a jQuery date picker
				//			
				//		</button></div></div>

export function isCustomWidget( widget, viewElement ) {
  // const symbol = symbols[widget]
  if (typeof viewElement !== 'undefined' && viewElement !== null) {
     // return !!viewElement.getCustomProperty( symbol ) && isWidget( viewElement );
     return !!viewElement.getCustomProperty( formSymbol ) && isWidget( viewElement );
  } else {
    return false
  }
}

export function toFormWidget( widget, viewElement ) {

  // const symbol = Symbol(widget);
  // symbols[widget] = symbol
  viewElement.setCustomProperty( formSymbol, true );
  const label = 'form'
  // return toWidget( viewElement, { label: labelCreator } );
  return toWidget( viewElement, { label: label } );

  // function labelCreator() {
  //   const imgElement = viewElement.getChild( 0 );
  //   const imgSrc = imgElement.getAttribute( 'img-src' );
  //
  //   return imgSrc ? `${ imgSrc } ${ label }` : label;
  // }
}

function renameViewTableCell( tableCell, desiredCellElementName, conversionApi, asWidget ) {
	const viewWriter = conversionApi.writer;
	const viewCell = conversionApi.mapper.toViewElement( tableCell );

	// View cell might be not yet converted - skip it as it will be properly created by cell converter later on.
	if ( !viewCell ) {
		return;
	}

	let renamedCell;

	if ( asWidget ) {
		const editable = viewWriter.createEditableElement( desiredCellElementName, viewCell.getAttributes() );
		renamedCell = toWidgetEditable( editable, viewWriter );

		viewWriter.insert( viewWriter.createPositionAfter( viewCell ), renamedCell );
		viewWriter.move( viewWriter.createRangeIn( viewCell ), viewWriter.createPositionAt( renamedCell, 0 ) );
		viewWriter.remove( viewWriter.createRangeOn( viewCell ) );
	} else {
		renamedCell = viewWriter.rename( desiredCellElementName, viewCell );
	}

	conversionApi.mapper.unbindViewElement( viewCell );
	conversionApi.mapper.bindElements( tableCell, renamedCell );
}

export function insertImage( writer, model, attributes = {} ) {
	const imageElement = writer.createElement( 'image', attributes );

	const insertAtSelection = findOptimalInsertionPosition( model.document.selection, model );

	model.insertContent( imageElement, insertAtSelection );

	// Inserting an image might've failed due to schema regulations.
	if ( imageElement.parent ) {
		writer.setSelection( imageElement, 'on' );
	}
}

it( 'should be widgetized', () => {
			expect( isWidget( element ) ).to.be.true;
		} );

it( 'should set element\'s label', () => {
			expect( getLabel( element ) ).to.equal( 'image widget' );
		} );

view: ( modelElement, viewWriter ) => {
					const viewContainerElement = viewWriter.createContainerElement( 'div', { class: 'media' } );

					toWidget( viewContainerElement, viewWriter );

					const viewMediaElement = viewWriter.createUIElement( 'div', { class: 'media-preview' }, function( domDocument ) {
						const domElement = this.toDomElement( domDocument );

						domElement.innerText = 'PLACEHOLDER';

						if ( modelElement.hasAttribute( 'id' ) ) {
							previewService
								.get( modelElement.getAttribute( 'id' ) )
								.then( preview => {
									domElement.innerText = preview;
								} );
						}

						return domElement;
					} );

view: ( modelItem, writer ) => {
					const b = writer.createAttributeElement( 'b' );
					const div = writer.createContainerElement( 'div' );

					writer.insert( ViewPosition._createAt( div, 0 ), b );

					return toWidget( div, writer, { label: 'element label' } );
				}
			} )

view: ( modelItem, viewWriter ) => {
				const widgetElement = viewWriter.createContainerElement( 'figure', { class: 'fancy-widget' } );
				viewWriter.insert( viewWriter.createPositionAt( widgetElement, 0 ), viewWriter.createText( 'widget' ) );

				return toWidget( widgetElement, viewWriter );
			}
		} );