Handle Tab key command with event listener

I have to force the tab key event since it is not working with the Editor handleKeyCommand handler

packages/strapi-helper-plugin/lib/src/components/Wysiwyg/constants.js

@@ -1,26 +1,11 @@
 export const SELECT_OPTIONS = [
   { id: 'Add a title', value: '' },
-  { id: 'Title H1', value: '# innerText.H1' },
+  { id: 'Title H1', value: '#' },
-  { id: 'Title H2', value: '## innerText.H2' },
+  { id: 'Title H2', value: '##' },
-  { id: 'Title H3', value: '### innerText.H3' },
+  { id: 'Title H3', value: '###' },
-  { id: 'Title H4', value: '#### innerText.H4'},
+  { id: 'Title H4', value: '####'},
-  { id: 'Title H5', value: '##### innerText.H5' },
+  { id: 'Title H5', value: '#####' },
-  { id: 'Title H6', value: '###### innerText.H6' },
+  { id: 'Title H6', value: '######' },
-];
-
-// NOTE: I leave that as a reminder
-export const CONTROLS = [
-  [
-    {label: 'B', style: 'BOLD', handler: 'toggleInlineStyle' },
-    {label: 'I', style: 'ITALIC', className: 'styleButtonItalic', handler: 'toggleInlineStyle' },
-    {label: 'U', style: 'UNDERLINE', handler: 'toggleInlineStyle' },
-    {label: 'UL', style: 'unordered-list-item', className: 'styleButtonUL', hideLabel: true, handler: 'toggleBlockType' },
-    {label: 'OL', style: 'ordered-list-item', className: 'styleButtonOL', hideLabel: true, handler: 'toggleBlockType' },
-  ],
-  [
-    {label: '<>', style: 'code-block', handler: 'toggleBlockType' },
-    {label: 'quotes', style: 'blockquote', className: 'styleButtonBlockQuote', hideLabel: true, handler: 'toggleBlockType' },
-  ],
 ];
 
 export const NEW_CONTROLS = [

packages/strapi-helper-plugin/lib/src/components/Wysiwyg/helpers.js

@@ -29,24 +29,6 @@ export function getInnerText(style) {
     case 'UNDERLINE':
       innerText = '__text underlined__';
       break;
-    case 'H1':
-      innerText = '# ';
-      break;
-    case 'H2':
-      innerText = '## ';
-      break;
-    case 'H3':
-      innerText = '### ';
-      break;
-    case 'H4':
-      innerText = '#### ';
-      break;
-    case 'H5':
-      innerText = '##### ';
-      break;
-    case 'H6':
-      innerText = '###### ';
-      break;
     case 'code-block':
       innerText = '```code block```';
       break;

packages/strapi-helper-plugin/lib/src/components/Wysiwyg/index.js

@@ -57,6 +57,7 @@ class Wysiwyg extends React.Component {
     if (!isEmpty(this.props.value)) {
       this.setInitialValue(this.props);
     }
+    document.addEventListener('keydown', this.handleTabKey);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -70,8 +71,13 @@ class Wysiwyg extends React.Component {
     }
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleTabKey);
+  }
+
   onChange = (editorState) => {
-    this.setState({ editorState });
+    // Update the state and force the focus
+    this.setState({ editorState }, () => { this.focus(); });
     this.props.onChange({ target: {
       value: editorState.getCurrentContent().getPlainText(),
       name: this.props.name,
@@ -108,8 +114,13 @@ class Wysiwyg extends React.Component {
 
   handleChangeSelect = ({ target }) => {
     this.setState({ headerValue: target.value });
-    const splitData = target.value.split('.');
+    const selectedText = this.getSelectedText();
-    this.addEntity(splitData[0], splitData[1]);
+    const title = selectedText === '' ? `${target.value} ` : `${target.value} ${selectedText}`;
+    const newBlock = this.createNewBlock(title, 'block-ul');
+    const newContentState = this.createNewContentStateFromBlock(newBlock);
+    const newEditorState = this.createNewEditorState(newContentState, title);
+
+    return this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState), headerValue: '' });
   }
 
   handleDragEnter = (e) => {
@@ -172,6 +183,17 @@ class Wysiwyg extends React.Component {
     return false;
   }
 
+
+  handleTabKey = (e) => {
+    if (e.keyCode === 9 /* TAB */ && this.state.isFocused) {
+      e.preventDefault();
+      const textWithEntity =  Modifier.replaceText(this.getEditorState().getCurrentContent(), this.getSelection(), '  ');
+      const newEditorState = EditorState.push(this.getEditorState(), textWithEntity, 'insert-characters');
+
+      return this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState) });
+    }
+  }
+
   mapKeyToEditorCommand = (e) => {
     if (e.keyCode === 9 /* TAB */) {
       const newEditorState = RichUtils.onTab(
@@ -278,16 +300,6 @@ class Wysiwyg extends React.Component {
     });
   }
 
-  addUlBlock = () => {
-    const selectedText = this.getSelectedText();
-    const li = selectedText === '' ? '- ' : `- ${selectedText}`;
-    const newBlock = this.createNewBlock(li, 'block-ul');
-    const newContentState = this.createNewContentStateFromBlock(newBlock);
-    const newEditorState = this.createNewEditorState(newContentState, li);
-
-    return this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState) });
-  }
-
   addOlBlock = () => {
     const previousBlockKey = last(Object.keys(this.getCurrentBlockMap()));
     const previousContent = this.getEditorState().getCurrentContent().getBlockForKey(previousBlockKey).getText();
@@ -302,6 +314,16 @@ class Wysiwyg extends React.Component {
     return this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState) });
   }
 
+  addUlBlock = () => {
+    const selectedText = this.getSelectedText();
+    const li = selectedText === '' ? '- ' : `- ${selectedText}`;
+    const newBlock = this.createNewBlock(li, 'block-ul');
+    const newContentState = this.createNewContentStateFromBlock(newBlock);
+    const newEditorState = this.createNewEditorState(newContentState, li);
+
+    return this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState) });
+  }
+
   toggleFullScreen = (e) => {
     e.preventDefault();
     this.setState({