Hide ToolBar - Performance

[yang-cloudlet]

Hi

Just some thoughts about the Hide toolbar feature. Instead of visually hide the toolbar through CSS, Do you think you can completely stop rendering the Toolbar if HideToolbar props is passed. This can improve the performance of rendering.

Great library 💯

[jpuri]

Hey @yangyu0311ugroop:

Not rendering the toolbar at all was my initial though also for this case, but it was creating troubles like this: https://github.com/jpuri/react-draft-wysiwyg/issues/389. Thus I changed it to use CSS properties.

I am glad you liked the lib 😄

[DennisKo]

A hidden toolbar has visibility: hidden. Wouldn't it be better to have display: none ?

[jpuri]

Thats is a good idea @DennisKo , I will make this change.

[jpuri]

I am finding that using display: none in this case may prevent users from using this property for toolbar. visibility:hidden works well in this case as floating toolbars are usually positioned absolutely. And even if they are not we do not want change in their visibility to change page layout.

[DennisKo]

Maybe give the option to toggle between display:none and visibility:hidden then. I guess both have valid use cases..

[DennisKo]

I just noticed that the visibility: hidden is getting set inline. Maybe introduce a class for that like editorToolbar-hidden

[dkwebtec]

visibility: hidden causes that toolbar is not visible, but there is still blank space occupied by the toolbar and not usable by the editor text. also clicking in this blank area does not fire focus

[dimitrisnl]

I'm facing a similar issue. I want to completely hide the toolbar area, but instead there is still a blank space.

I would like a display:none option. Although a simple wrapper component fixes this issue, it could be a nice addition.

[jpuri]

Please look at example above here: https://jpuri.github.io/react-draft-wysiwyg/#/demo. It does not takes any space.

[Qaaj]

I'm sorry but it definitely takes space when toolbarHidden is enabled

[jpuri]

I am working to fix this issue for toolbarHidden property. For toolbarOnFocus property I would suggest using absolute styling like I mentioned above.

[imoris11]

After a couple attempts, a work-around to this is by adding a class to the toolbar with a display of none.

.hide-toolbar { display:none !important; }

And then toolbarClassName='hide-toolbar'

Hope this helps till the issue is resolved. @jpuri thanks, this is awesome!

[nyn0x]

My solution in css : .rdw-editor-toolbar[aria-hidden="true"] { display: none !important; }

[Hereward]

I'm trying to find a solution to this problem. Is absolute positioning the recommended approach now? The other suggestion mentioned above eg. .hide-toolbar { display:none !important; } does not work because then the toolbar is always hidden (lol).

[Hereward]

I tried the absolute positioning approach but it unfortunately creates a different problem as the toolbar now sits on top of everything.

There needs to be a way to set display:none / display block so that the toolbar will go into the page layout and push the rest of the html down. Visibility:hidden just leaves a big blank space.

This should be pretty simple? Is it necessary to hack the code?

[Hereward]

In your demo the problem where the absolutely positioned toolbar sits on top of (and obscures) the underlying content can clearly be seen.

[Hereward]

I came up with this solution (using a state variable which is toggled by the onFocus and OnBlur callbacks):

toolbarClassName={hideToolbar ? classes.toolbarHidden : classes.toolbar}
onFocus={() => {this.setState({hideToolbar: false});}}
onBlur={() => {this.setState({hideToolbar: true});}}

[astrosam21]

i figured it out with the idea of @Hereward , and came up to the final solution which is given below.

`import React, { Component } from "react";

import { EditorState } from "draft-js";

import { Editor } from "react-draft-wysiwyg"; import "../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

class TextEditor extends Component { constructor(props) { super(props);

this.state = {
  editorState: EditorState.createEmpty(),
  hideToolbar: true
};

}

onEditorStateChange = editorState => { this.setState({ editorState }); };

onContentStateChange = contentState => { this.setState({ contentState }); };

render() { const { editorState } = this.state;

return (
  <Editor
    editorState={editorState}
    toolbarOnFocus={!this.state.hideToolbar}
    toolbarHidden={this.state.hideToolbar}
    wrapperClassName="demo-wrapper"
    editorClassName="demo-editor"
    toolbarClassName="toolbar-class"
    onFocus={() => {
      this.setState({ hideToolbar: false });
    }}
    onBlur={() => {
      this.setState({ hideToolbar: true });
    }}
    onEditorStateChange={this.onEditorStateChange}
    onContentStateChange={this.onContentStateChange}
    placeholder={"  Write Here"}
    editorStyle={{
      backgroundColor: "#fff",
      padding: 0,
      borderWidth: 0,
      borderColor: "transparent",
      height: 60
    }}
  />
);

} }

export default TextEditor; `

[Yossri21]

@astrosam21 great solution ! Thank you

[tkozuch]

I was thinking about pure css solution for toggling the toolbar visibility, and this is how far I've got:

.rdw-editor-toolbar.rich-text__toolbar {  
   display: none; 
}
.rdw-editor-main:focus-within + .rdw-editor-toolbar.rich-text__toolbarr {
  display: flex;
}

The first one actually works (.rich-text__toolbar is a class added in the Editor component just for bigger specificity)

but unfortunatelly the second one for some reason doesn't work and I have no idea why... Anyone?

The astrosam's answer is working of course, but I would argue that the above proposed solution would be a bit cleaner.

[tkozuch]

Okay - fully working solution for ToolbarToggle:

<Editor toolbarClassName="rich-text__toolbar"></Editor>

in CSS:

.rdw-editor-toolbar.rich-text__toolbar {
  display: none;
}

.rdw-editor-wrapper:focus-within .rich-text__toolbar {
  display: flex;
}

no need to store new state, no need to create new React Component almost no need to write any JS

[himanshua790]

@tkozuch Nice work man!

[ganesh2054]

draft JS Editor accepts props toolbarClassName. You can conditionally add a class to determine whether you need to display the toolbar or not. To hide the toolbar with display none, pass prop toolbarClassName as,

<Editor
        editorState={editorState}
        toolbarClassName={`${needToolbar ? "" : 'hide-toolbar'}`}
</Editor>

style is  .hide-toolbar { display:none !important; }