wix-incubator / react-native-zss-rich-text-editor

React Native rich text editor based on ZSSRichTextEditor
Other
841 stars 310 forks source link

How to hide the toolbar when focused on title? #125

Open rasselll opened 6 years ago

rasselll commented 6 years ago

as the title suggests

ezhozhe commented 5 years ago

Just use the setFocusHandlers() function in the sample.

Add a tag in the state,

    this.state = {
      titleData:'',
      contentData:'',
      loaded:false,
      focusTitle:false, // this line
    };

Then in the function setFocusHandlers()

  setFocusHandlers() {
    this.richtext.setTitleFocusHandler(() => {
      //alert('title focus');
      this.setState({focusTitle:true})
    });
    this.richtext.setContentFocusHandler(() => {
      //alert('content focus');
      this.setState({focusTitle:false})
    });
  }

After that, in the render() part

           {this.state.focusTitle === false && 
              <RichTextToolbar
                getEditor={() => this.richtext}
                actions={
                  [
                    actions.insertImage,
                    actions.setBold,
                  ]
                }
              />
           }