Spaceweb Editor

v6.2.2

Suggestions

• This is a common feature of Text Editor and HTML Editor. This feature is used when you want to display a custom popup menu when a certain character is inserted in editor. This feature could be helpful when developing features like Mention, HashTags etc.

  In the example shown when we press @ in editor it displays a popup to select options. When an option is selected it inserts a node(Mention) in the editor having some specific styles which is uneditable and atomic.

  Suggestions Example

  JS

  TS

  {
    [TriggerChar: string]: SuggestionProps, 
  }

  You can use multiple triggerChar to display different popup menus. You can also useregisterCallbacks commands for text insertion instead of node insertion (INSERT_SUGGESTION) provided by onAction when an option is selected in the popup menu.

  SuggestionProps

  Name	Type	Default	Description
  allowSpaces	boolean	true	If false, Popup will close when a space is inserted in the query text
  dataType	string		Specifies the value of data-type attribute applied to the Mention node provided to the callback.
  labelRenderer	function		Defines how label should be rendered in editor
  popupPlacement	'auto' | 'topLeft' | 'top' | 'topRight' | 'rightTop' | 'right' | 'rightBottom' | 'bottomRight' | 'bottom' | 'bottomLeft' | 'leftBottom' | 'leftBottom' | 'leftBottom'	top-start	Controls how to position the popover
  renderer	react node		React Component to render as popup when the triggerChar is entered

  React Renderer

  The props provided to the React Renderer are:

  Name	Type	Default	Description
  onAction	function		Handles actions related suggestions, actionTypes could be FOCUS, INSERT_SUGGESTION and DELETE_QUERY. The payload for INSERT_SUGGESTION should be { id?: string, label: string }
  query	string		The query text written after the triggerChar