fix text selection state (#948)

components/Carbon.js

@@ -113,13 +113,15 @@ class Carbon extends React.PureComponent {
   onSelectionChange = changes => {
     if (this.state.selectionAt) {
       const css = [
-        `font-weight: ${changes.bold ? 'bold' : 'initial'}`,
+        changes.bold && `font-weight: ${changes.bold ? 'bold' : 'initial'}`,
-        `font-style: ${changes.italics ? 'italic' : 'initial'}`,
+        changes.italics && `font-style: ${changes.italics ? 'italic' : 'initial'}`,
-        `text-decoration: ${changes.underline ? 'underline' : 'initial'}`,
+        changes.underline && `text-decoration: ${changes.underline ? 'underline' : 'initial'}`,
         changes.color && `color: ${changes.color} !important`
       ]
         .filter(Boolean)
         .join('; ')
+
+      if (css) {
         this.props.editorRef.current.editor.doc.markText(
           this.state.selectionAt.from,
           this.state.selectionAt.to,
@@ -127,6 +129,7 @@ class Carbon extends React.PureComponent {
         )
       }
     }
+  }
 
   render() {
     const config = { ...DEFAULT_SETTINGS, ...this.props.config }

components/SelectionEditor.js

@@ -56,9 +56,9 @@ function SelectionEditor({ onChange }) {
   useKeyboardListener('Escape', () => setOpen(false))
 
   const [state, dispatch] = React.useReducer(reducer, {
-    bold: false,
+    bold: null,
-    italics: false,
+    italics: null,
-    underline: false,
+    underline: null,
     color: null
   })