make it work for react 18

src/controls/BlockType/index.js

@@ -16,14 +16,22 @@ class BlockType extends Component {
 
   constructor(props) {
     super(props);
-    const { editorState, modalHandler } = props;
+    const { editorState } = props;
     this.state = {
       expanded: false,
       currentBlockType: editorState
         ? getSelectedBlocksType(editorState)
         : 'unstyled',
     };
-    modalHandler.registerCallBack(this.expandCollapse);
+  }
+
+  componentDidMount() {
+    const { modalHandler } = this.props;
+
+    if (this.registerCallBack) {
+      modalHandler.registerCallBack(this.expandCollapse);
+    }
+    this.registerCallBack = true;
   }
 
   componentDidUpdate(prevProps) {
@@ -42,12 +50,12 @@ class BlockType extends Component {
 
   onExpandEvent = () => {
     this.signalExpanded = !this.state.expanded;
-  };
-
-  expandCollapse = () => {
     this.setState({
       expanded: this.signalExpanded,
     });
+  };
+
+  expandCollapse = () => {
     this.signalExpanded = false;
   };
 

src/controls/ColorPicker/index.js

@@ -24,7 +24,7 @@ class ColorPicker extends Component {
 
   constructor(props) {
     super(props);
-    const { editorState, modalHandler } = props;
+    const { editorState } = props;
     const state = {
       expanded: false,
       currentColor: undefined,
@@ -39,7 +39,15 @@ class ColorPicker extends Component {
       ]).BGCOLOR;
     }
     this.state = state;
-    modalHandler.registerCallBack(this.expandCollapse);
+  }
+
+  componentDidMount() {
+    const { modalHandler } = this.props;
+
+    if (this.registerCallBack) {
+      modalHandler.registerCallBack(this.expandCollapse);
+    }
+    this.registerCallBack = true;
   }
 
   componentDidUpdate(prevProps) {
@@ -61,12 +69,12 @@ class ColorPicker extends Component {
 
   onExpandEvent = () => {
     this.signalExpanded = !this.state.expanded;
-  };
-
-  expandCollapse = () => {
     this.setState({
       expanded: this.signalExpanded,
     });
+  };
+
+  expandCollapse = () => {
     this.signalExpanded = false;
   };
 

src/controls/Embedded/index.js

@@ -19,7 +19,11 @@ class Embedded extends Component {
 
   componentDidMount() {
     const { modalHandler } = this.props;
-    modalHandler.registerCallBack(this.expandCollapse);
+
+    if (this.registerCallBack) {
+      modalHandler.registerCallBack(this.expandCollapse);
+    }
+    this.registerCallBack = true;
   }
 
   componentWillUnmount() {
@@ -29,12 +33,12 @@ class Embedded extends Component {
 
   onExpandEvent = () => {
     this.signalExpanded = !this.state.expanded;
-  };
-
-  expandCollapse = () => {
     this.setState({
       expanded: this.signalExpanded,
     });
+  };
+
+  expandCollapse = () => {
     this.signalExpanded = false;
   };
 

src/controls/Emoji/index.js

@@ -19,7 +19,11 @@ export default class Emoji extends Component {
 
   componentDidMount() {
     const { modalHandler } = this.props;
-    modalHandler.registerCallBack(this.expandCollapse);
+
+    if (this.registerCallBack) {
+      modalHandler.registerCallBack(this.expandCollapse);
+    }
+    this.registerCallBack = true;
   }
 
   componentWillUnmount() {
@@ -29,12 +33,12 @@ export default class Emoji extends Component {
 
   onExpandEvent = () => {
     this.signalExpanded = !this.state.expanded;
-  };
-
-  expandCollapse = () => {
     this.setState({
       expanded: this.signalExpanded,
     });
+  };
+
+  expandCollapse = () => {
     this.signalExpanded = false;
   };
 

src/controls/FontFamily/Component/index.js

@@ -26,7 +26,7 @@ class LayoutComponent extends Component {
   componentDidMount(): void {
     const editorElm = document.getElementsByClassName('DraftEditor-root');
     if (editorElm && editorElm.length > 0) {
-      const editorStyles = window.getComputedStyle(editorElm[0]);
+      const editorStyles = (typeof window !== "undefined") ? window.getComputedStyle(editorElm[0]) : undefined;
       const defaultFontFamily = editorStyles.getPropertyValue('font-family');
       this.setState({ // eslint-disable-line react/no-did-mount-set-state
         defaultFontFamily,

src/controls/FontFamily/index.js

@@ -18,14 +18,22 @@ export default class FontFamily extends Component {
 
   constructor(props) {
     super(props);
-    const { editorState, modalHandler } = props;
+    const { editorState } = props;
     this.state = {
       expanded: undefined,
       currentFontFamily: editorState
         ? getSelectionCustomInlineStyle(editorState, ['FONTFAMILY']).FONTFAMILY
         : undefined,
     };
-    modalHandler.registerCallBack(this.expandCollapse);
+  }
+
+  componentDidMount() {
+    const { modalHandler } = this.props;
+
+    if (this.registerCallBack) {
+      modalHandler.registerCallBack(this.expandCollapse);
+    }
+    this.registerCallBack = true;
   }
 
   componentDidUpdate(prevProps) {
@@ -46,12 +54,12 @@ export default class FontFamily extends Component {
 
   onExpandEvent = () => {
     this.signalExpanded = !this.state.expanded;
-  };
-
-  expandCollapse = () => {
     this.setState({
       expanded: this.signalExpanded,
     });
+  };
+
+  expandCollapse = () => {
     this.signalExpanded = false;
   };
 

src/controls/FontSize/Component/index.js

@@ -26,7 +26,7 @@ export default class LayoutComponent extends Component {
   componentDidMount(): void {
     const editorElm = document.getElementsByClassName('DraftEditor-root');
     if (editorElm && editorElm.length > 0) {
-      const editorStyles = window.getComputedStyle(editorElm[0]);
+      const editorStyles = (typeof window !== "undefined") ? window.getComputedStyle(editorElm[0]) : undefined;
       let defaultFontSize = editorStyles.getPropertyValue('font-size');
       defaultFontSize = defaultFontSize.substring(0, defaultFontSize.length - 2);
       this.setState({ // eslint-disable-line react/no-did-mount-set-state

src/controls/FontSize/index.js

@@ -18,14 +18,22 @@ export default class FontSize extends Component {
 
   constructor(props) {
     super(props);
-    const { editorState, modalHandler } = props;
+    const { editorState } = props;
     this.state = {
-      expanded: undefined,
+      expanded: false,
       currentFontSize: editorState
         ? getSelectionCustomInlineStyle(editorState, ['FONTSIZE']).FONTSIZE
         : undefined,
     };
-    modalHandler.registerCallBack(this.expandCollapse);
+  }
+
+  componentDidMount() {
+    const { modalHandler } = this.props;
+
+    if (this.registerCallBack) {
+      modalHandler.registerCallBack(this.expandCollapse);
+    }
+    this.registerCallBack = true;
   }
 
   componentDidUpdate(prevProps) {
@@ -46,12 +54,12 @@ export default class FontSize extends Component {
 
   onExpandEvent = () => {
     this.signalExpanded = !this.state.expanded;
-  };
-
-  expandCollapse = () => {
     this.setState({
       expanded: this.signalExpanded,
     });
+  };
+
+  expandCollapse = () => {
     this.signalExpanded = false;
   };
 

src/controls/Image/index.js

@@ -15,11 +15,18 @@ class ImageControl extends Component {
 
   constructor(props) {
     super(props);
-    const { modalHandler } = this.props;
     this.state = {
       expanded: false,
     };
-    modalHandler.registerCallBack(this.expandCollapse);
+  }
+
+  componentDidMount() {
+    const { modalHandler } = this.props;
+
+    if (this.registerCallBack) {
+      modalHandler.registerCallBack(this.expandCollapse);
+    }
+    this.registerCallBack = true;
   }
 
   componentWillUnmount() {
@@ -29,6 +36,13 @@ class ImageControl extends Component {
 
   onExpandEvent = () => {
     this.signalExpanded = !this.state.expanded;
+    this.setState({
+      expanded: this.signalExpanded,
+    });
+  };
+
+  expandCollapse = () => {
+    this.signalExpanded = false;
   };
 
   doExpand = () => {
@@ -43,13 +57,6 @@ class ImageControl extends Component {
     });
   };
 
-  expandCollapse = () => {
-    this.setState({
-      expanded: this.signalExpanded,
-    });
-    this.signalExpanded = false;
-  };
-
   addImage = (src, height, width, alt) => {
     const { editorState, onChange, config } = this.props;
     const entityData = { src, height, width };

src/controls/Link/index.js

@@ -30,14 +30,22 @@ class Link extends Component {
 
   constructor(props) {
     super(props);
-    const { editorState, modalHandler } = this.props;
+    const { editorState } = this.props;
     this.state = {
       expanded: false,
       link: undefined,
       selectionText: undefined,
       currentEntity: editorState ? getSelectionEntity(editorState) : undefined,
     };
-    modalHandler.registerCallBack(this.expandCollapse);
+  }
+
+  componentDidMount() {
+    const { modalHandler } = this.props;
+
+    if (this.registerCallBack) {
+      modalHandler.registerCallBack(this.expandCollapse);
+    }
+    this.registerCallBack = true;
   }
 
   componentDidUpdate(prevProps) {
@@ -52,10 +60,6 @@ class Link extends Component {
     modalHandler.deregisterCallBack(this.expandCollapse);
   }
 
-  onExpandEvent = () => {
-    this.signalExpanded = !this.state.expanded;
-  };
-
   onChange = (action, title, target, targetOption) => {
     const {
       config: { linkCallback },
@@ -99,10 +103,14 @@ class Link extends Component {
     });
   };
 
-  expandCollapse = () => {
+  onExpandEvent = () => {
+    this.signalExpanded = !this.state.expanded;
     this.setState({
       expanded: this.signalExpanded,
     });
+  };
+
+  expandCollapse = () => {
     this.signalExpanded = false;
   };
 

src/decorators/Link/index.js

@@ -33,7 +33,7 @@ function getLinkComponent(config) {
     openLink: Function = () => {
       const { entityKey, contentState } = this.props;
       const { url } = contentState.getEntity(entityKey).getData();
-      const linkTab = window.open(ensureSafeUrl(url), 'blank'); // eslint-disable-line no-undef
+      const linkTab = (typeof window !== "undefined") ? window.open(ensureSafeUrl(url), 'blank') : undefined; // eslint-disable-line no-undef
       // linkTab can be null when the window failed to open.
       if (linkTab) {
         linkTab.focus();