How to use the tinymce/tinymce.$ function in tinymce

getPosition( { query } = this.state ) {
		const { editor } = this.props;
		const range = editor.selection.getRng();
		const mentionRange = document.createRange();

		// Set range to start at beginning of mention in order to get accurate positioning values.
		mentionRange.setStart( range.startContainer, range.startOffset - query.length );
		mentionRange.setEnd( range.endContainer, range.endOffset );

		const rectList = mentionRange.getClientRects();
		const position =
			rectList.length > 0 ? last( rectList ) : tinymce.$( editor.selection.getNode() ).offset();

		return pick( position, [ 'left', 'top' ] );
	}

// If the URL is longer that 40 chars, concatenate the beginning (after the domain) and ending with ...
					if (
						url.length > 40 &&
						( index = url.indexOf( '/' ) ) !== -1 &&
						( lastIndex = url.lastIndexOf( '/' ) ) !== -1 &&
						lastIndex !== index
					) {
						// If the beginning + ending are shorter that 40 chars, show more of the ending
						if ( index + url.length - lastIndex < 40 ) {
							lastIndex = -( 40 - ( index + 1 ) );
						}

						url = url.slice( 0, index + 1 ) + '\u2026' + url.slice( lastIndex );
					}

					tinymce
						.$( this.getEl().firstChild )
						.attr( 'href', this.url )
						.text( url );
				}
			},
		} )

settings = editor.settings,
				activeToolbar,
				currentSelection,
				timeout,
				container = editor.getContainer(),
				wpAdminbar = document.getElementById( 'wpadminbar' ),
				mceIframe = document.getElementById( editor.id + '_ifr' ),
				mceToolbar,
				mceStatusbar,
				wpStatusbar,
				isChromeRtl =
					editor.getParam( 'directionality' ) === 'rtl' && /Chrome/.test( navigator.userAgent );

			if ( container ) {
				mceToolbar = tinymce.$( '.mce-toolbar-grp', container )[ 0 ];
				mceStatusbar = tinymce.$( '.mce-statusbar', container )[ 0 ];
			}

			if ( editor.id === 'content' ) {
				wpStatusbar = document.getElementById( 'post-status-info' );
			}

			function create( buttons, bottom ) {
				var toolbar,
					toolbarItems = [],
					buttonGroup;

				each( buttons, function( item ) {
					var itemName;

					function bindSelectorChanged() {
						var selection = editor.selection;

var Factory = tinymce.ui.Factory,
				settings = editor.settings,
				activeToolbar,
				currentSelection,
				timeout,
				container = editor.getContainer(),
				wpAdminbar = document.getElementById( 'wpadminbar' ),
				mceIframe = document.getElementById( editor.id + '_ifr' ),
				mceToolbar,
				mceStatusbar,
				wpStatusbar,
				isChromeRtl =
					editor.getParam( 'directionality' ) === 'rtl' && /Chrome/.test( navigator.userAgent );

			if ( container ) {
				mceToolbar = tinymce.$( '.mce-toolbar-grp', container )[ 0 ];
				mceStatusbar = tinymce.$( '.mce-statusbar', container )[ 0 ];
			}

			if ( editor.id === 'content' ) {
				wpStatusbar = document.getElementById( 'post-status-info' );
			}

			function create( buttons, bottom ) {
				var toolbar,
					toolbarItems = [],
					buttonGroup;

				each( buttons, function( item ) {
					var itemName;

					function bindSelectorChanged() {

updatePosition( state, { left, top } = this.getPosition( state ) ) {
		const { editor, node } = this.props;
		const mceToolbarOffsetHeight = get(
			tinymce.$( '.mce-toolbar-grp', editor.getContainer() )[ 0 ],
			'offsetHeight',
			0
		);
		const range = editor.selection.getRng();
		const rectList = range.getClientRects();
		let height;

		if ( rectList.length > 0 ) {
			height = rectList[ 0 ].height;
		} else {
			height = editor.selection.getNode().offsetHeight;
		}

		this.left = left;
		this.top = top;