AIContainerCustom

The configuration of the AI user interface container in the custom mode.

In this mode, integrator is responsible for rendering the AI user interface in the web page.

• Use view to access the view of the AI user interface,
• Use getTabIds to read available IDs of individual tabs in the AI user interface,
• Use getTab to access individual tab views in the AI user interface,
• Use addTab to add a new tab to the AI user interface,
• Use activateTab to switch between tabs from the code,
• Use container to tell the AI features which DOM tree they were mounted in.

For example, to integrate the AI user interface with custom containers on the web page, use the following code:

const tabsPlugin = editor.plugins.get( 'AITabs' );

	for ( const id of tabsPlugin.view.getTabIds() ) {
		const tab = tabsPlugin.view.getTab( id );

		// Display tab button and panel in a custom container.
		myButtonsContainer.appendChild( tab.button.element );
		myPanelContainer.appendChild( tab.panel.element );
	}

	// Tells the AI features which DOM tree their floating UI belongs in.
	tabsPlugin.container = myPanelContainer;

Setting container is required in this mode. The floating user interface of the AI features – their balloons, dialogs, and dropdowns – is mounted in the DOM tree the AI user interface lives in, and in this mode only the integration knows which tree that is. Until it is set, the floating user interface is not displayed at all.

Alternatively, point the config.ai.overlayContainer option at a container of your own. It takes precedence over the container above, and is the better choice when the container the AI user interface was placed in is positioned, scrollable, or clipping.