Draft-js: How to programatically trigger indent/outdent?

[kenjiru]

I want to add 2 buttons to indent and outdent nested list items.

I've noticed there are no commands for Tab and Shift + Tab. So how can I do this?

[jan4984]

maybe use custom inline with style "text-intent"

[davidchang]

@kenjiru - ahh, interesting - i didn't realize you were saying that Tab/Shift-Tab doesn't apply to list items. Using the editor here: https://facebook.github.io/draft-js/ makes it work, so it must be possible... i'll see if I can put together a jsfiddle today

[kenjiru]

@davidchang I got it working using the keyboard shortcuts (Tab, Shift + Tab), by handling the onTab for the editor.

But now I want to trigger the same indent/outdent via 2 buttons in the UI.

[davidchang]

sorry for late response. i think the only thing tab changes is the depth property of the block, so maybe try that.

[davidchang]

actually, you should be able to just invoke RichUtils.onTab to do it for you, like here: https://github.com/facebook/draft-js/blob/69890ed57b5f4256cc93ae8e9ea178296851a23e/website/src/draft-js/index.js#L52

[davidchang]

closing as it's been a few days since last correspondence. feel free to reopen or ask in the Draft.js Slack channel if further questions or issues!

[ollydixon]

this.onChange(RichUtils.onTab(e, this.state.editorState, maxDepth));

This doesn't seem to work at all. I copy pasted the rich text example and it's not working. Using draftjs 0.10.5

It seems I can replicate tabbing but I cannot get the lists to auto indent.

[camsjams]

I added some code here that may help some people:
https://github.com/facebook/draft-js/issues/155#issuecomment-475417159

[Sauloxd]

Hey @ollydixon Did you check if the classes like public-DraftStyleDefault-depth1 public-DraftStyleDefault-depth2 were being add? If so, you were just missing some styling from the lib.

import 'draft-js/dist/Draft.css';

[ollydixon]

@Sauloxd I'm using Quill now, it's must simpler and more elegant + works well on mobile devices.

[nsinha91]

In my case, I needed to programmatically fire increase or decrease in indent from their respective buttons in the toolbar, in addition to the onTab functionality already provided in the Draftjs editor which takes care of the Tab and Shift + Tab keyboard press events.

What I found in the draft-js code was the fact that it checks for the value of a boolean flag called shiftKey in the event that is passed to onTab. So, all I did was turned this flag to true in the event before passing it to the RichUtils.onTab() function.

The following is the code that works for me. Note that the handleIncreaseIndentClick and handleDecreaseIndentClick props are passed upwards from the <Toolbar /> component. Both of these are fired when their respective buttons are clicked in the <Toolbar /> component.

...
import 'draft-js/dist/Draft.css'   // Remember this

export default class EditorPane extends Component {
  constructor(props) {
    super(props)
    this.state = {
      editorState: EditorState.createEmpty()
    }
  }

  updateEditorState = (editorState) => {
    this.setState({ editorState })
  }

  changeIndent = (e, indentDirection) => {
    e.preventDefault()
    if(indentDirection && indentDirection === 'decrease'){
      e.shiftKey = true
    }
    const currentBlockType = RichUtils.getCurrentBlockType(this.state.editorState)
    if(currentBlockType === 'ordered-list-item' || currentBlockType === 'unordered-list-item'){
      this.updateEditorState(RichUtils.onTab(e, this.state.editorState, 4))
    }
  }

  render() {
    return (
      <div>
        <Toolbar
          handleIncreaseIndentClick={e => this.changeIndent(e, 'increase')}
          handleDecreaseIndentClick={e => this.changeIndent(e, 'decrease')}
        />
        <Editor
          editorState={this.state.editorState}
          onChange={this.updateEditorState}
          onTab={this.changeIndent}
        />
      </div>
    )
  }
}

[mallikarjuna-sharma]

In my case, I needed to programmatically fire increase or decrease in indent from their respective buttons in the toolbar, in addition to the onTab functionality already provided in the Draftjs editor which takes care of the Tab and Shift + Tab keyboard press events.

What I found in the draft-js code was the fact that it checks for the value of a boolean flag called shiftKey in the event that is passed to onTab. So, all I did was turned this flag to true in the event before passing it to the RichUtils.onTab() function.

The following is the code that works for me. Note that the handleIncreaseIndentClick and handleDecreaseIndentClick props are passed upwards from the <Toolbar /> component. Both of these are fired when their respective buttons are clicked in the <Toolbar /> component.

...
import 'draft-js/dist/Draft.css'   // Remember this

export default class EditorPane extends Component {
  constructor(props) {
    super(props)
    this.state = {
      editorState: EditorState.createEmpty()
    }
  }

  updateEditorState = (editorState) => {
    this.setState({ editorState })
  }

  changeIndent = (e, indentDirection) => {
    e.preventDefault()
    if(indentDirection && indentDirection === 'decrease'){
      e.shiftKey = true
    }
    const currentBlockType = RichUtils.getCurrentBlockType(this.state.editorState)
    if(currentBlockType === 'ordered-list-item' || currentBlockType === 'unordered-list-item'){
      this.updateEditorState(RichUtils.onTab(e, this.state.editorState, 4))
    }
  }

  render() {
    return (
      <div>
        <Toolbar
          handleIncreaseIndentClick={e => this.changeIndent(e, 'increase')}
          handleDecreaseIndentClick={e => this.changeIndent(e, 'decrease')}
        />
        <Editor
          editorState={this.state.editorState}
          onChange={this.updateEditorState}
          onTab={this.changeIndent}
        />
      </div>
    )
  }
}

this solution worked for me , but it gave only 4 indent spaces and i cannot move after 4 spaces

[nsinha91]

@mallikarjuna-sharma I solved the 4-level indent limit by using the draftjs-conductor package which exports a function called blockDepthStyleFn to take care of this issue.