Skip to content

Rich Text Editor Plugin Components

Plugin Component is a resource which allow to register feature allows to edit text content.

Plugin component should provide configuration in JSON format:

{  
  "type": ...,  
  "configuration":  {...}  
}

Where type should point script with plugin definition and configuration contains all aditional properties used by plugin.

RichText editor is based on TipTap and plugins are responsible for interaction with TipTap Editor.

Plugin defintinon should provide methods:

const  Plugin  =  (configuration)  =>  {  

  return  {  
    getTipTapExtensions:  ()  =>  {  
      return  [...]  
    },    
    getAction:  (context)  =>  {  
      return  {
        execute:  (state)  =>  {}
      }  
    },  
    getState:  (context)  =>  {  
      return  {...}  
    }  
  }  
}  

export  default  Plugin;

Where:

  • getTipTapExtensions - should return TipTap extensions required by plugin.

  • getAction - should return object with execute method. This method will be executed by UI Component. It can get current state as a paramater.

  • getState - should return an object with properties required to build proper state of UI Component. Object with this same structure is expected in execute method.

  • configuration - contains data from JCR config

  • context - Contains key editor referencing Tip Tap editor.

  • state - Object with same structure as returned by getState

Available plugins

Plugin Example Usage
Bold
wcm/dialogs/components
/richtext/plugin/bold		 "plugin": {
  "sling:resourceType": "wcm/dialogs/components/richtext/plugin/bold"
}
Italic
wcm/dialogs/components
/richtext/plugin/italic		 "plugin": {
  "sling:resourceType": "wcm/dialogs/components/richtext/plugin/italic"
}
Underline
wcm/dialogs/components
/richtext/plugin/underline		 "plugin": {
  "sling:resourceType": "wcm/dialogs/components/richtext/plugin/underline"
}
Strikethrough
wcm/dialogs/components
/richtext/plugin/strikethrough		 "plugin": {
  "sling:resourceType": "wcm/dialogs/components/richtext/plugin/strikethrough"
}
BulletList
wcm/dialogs/components
/richtext/plugin/bulletlist		 "plugin": {
  "sling:resourceType": "wcm/dialogs/components/richtext/plugin/bulletlist"
}
OrderedList
wcm/dialogs/components
/richtext/plugin/orderedlist		 "plugin": {
  "sling:resourceType": "wcm/dialogs/components/richtext/plugin/orderedlist"
}
Paragraph
wcm/dialogs/components
/richtext/plugin/paragraph		 "plugin": {
  "sling:resourceType": "wcm/dialogs/components/richtext/plugin/paragraph"
}`
Heading
wcm/dialogs/components
/richtext/plugin/heading		 "plugin": {
  "sling:resourceType": "wcm/dialogs/components/richtext/plugin/heading",
  "level": "3""
}
level
  - number (default: 1)
   - Heading level (1-6)
Link
wcm/dialogs/components
/richtext/plugin/link		 "plugin": {
  "sling:resourceType": "wcm/dialogs/components/richtext/plugin/link""
}
UnsetLink
wcm/dialogs/components
/richtext/plugin/unsetlink		 "plugin": {
  "sling:resourceType": "wcm/dialogs/components/richtext/plugin/unsetlink""
}
ClearFormatting
wcm/dialogs/components
/richtext/plugin/clearformatting		 "plugin": {
  "sling:resourceType": "wcm/dialogs/components/richtext/plugin/clearformatting""
}
HardBreak
wcm/dialogs/components
/richtext/plugin/hardbreak		 "plugin": {
  "sling:resourceType": "wcm/dialogs/components/richtext/plugin/hardbreak""
}
TextAlign
wcm/dialogs/components
/richtext/plugin/textalign		 "plugin": {
  "sling:resourceType": "wcm/dialogs/components/richtext/plugin/textalignment",
  "alignment": "right""
}
alignment
  - string (default: 'left')
  - Text alignment ('left', ‘center', ‘right', 'justify')
Undo
wcm/dialogs/components
/richtext/plugin/undo		 "plugin": {
  "sling:resourceType": "wcm/dialogs/components/richtext/plugin/undo"
}
Redo
wcm/dialogs/components
/richtext/plugin/redo		 "plugin": {
  "sling:resourceType": "wcm/dialogs/components/richtext/plugin/redo"
}

Interfaces

All the plugins provides some interfaces that should be met by UI components:

Plugin getAction getState
Bold
Italic
Underline
Strikethrough
BulletList
OrderedList
Paragraph
Heading
TextAlign
 { execute({}) => {...} } { isActive: ... }
UnsetLink
Undo
Redo		 { execute({}) => {...} } { isDisabled: ... }
ClearFormatting
HardBreak		 { execute({}) => {...} } {}
Link { execute({ href, target }) => {...}} { isActive: ..., href: ..., target: ... }