From 3ad106cd204ef7ab6e7f5763a95cbf5a4073d8c5 Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Thu, 8 Aug 2019 17:01:32 -0700
Subject: [PATCH] refactor onSelectionChange to class scope

---
 components/Carbon.js | 42 ++++++++++++++++++++----------------------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/components/Carbon.js b/components/Carbon.js
index 50d99f9..d431e9f 100644
--- a/components/Carbon.js
+++ b/components/Carbon.js
@@ -108,6 +108,25 @@ class Carbon extends React.PureComponent {
     }
   }
 
+  onSelectionChange = changes => {
+    if (this.currentSelection) {
+      const css = [
+        `font-weight: ${changes.bold ? 'bold' : 'initial'}`,
+        `font-style: ${changes.italics ? 'italic' : 'initial'}`,
+        `text-decoration: ${changes.underline ? 'underline' : 'initial'}`,
+        changes.color && `color: ${changes.color} !important`,
+        ''
+      ]
+        .filter(Boolean)
+        .join('; ')
+      this.props.editorRef.current.editor.doc.markText(
+        this.currentSelection.from,
+        this.currentSelection.to,
+        { css }
+      )
+    }
+  }
+
   render() {
     const config = { ...DEFAULT_SETTINGS, ...this.props.config }
 
@@ -282,28 +301,7 @@ class Carbon extends React.PureComponent {
           <div className="twitter-png-fix" />
         </div>
         {this.state.selectionAt && (
-          <SelectionEditor
-            position={this.state.selectionAt}
-            onChange={changes => {
-              if (this.currentSelection) {
-                const css = [
-                  `font-weight: ${changes.bold ? 'bold' : 'initial'}`,
-                  `font-style: ${changes.italics ? 'italic' : 'initial'}`,
-                  `text-decoration: ${changes.underline ? 'underline' : 'initial'}`,
-                  changes.color && `color: ${changes.color} !important`,
-                  ''
-                ]
-                  .filter(Boolean)
-                  .join('; ')
-
-                this.props.editorRef.current.editor.doc.markText(
-                  this.currentSelection.from,
-                  this.currentSelection.to,
-                  { css }
-                )
-              }
-            }}
-          />
+          <SelectionEditor position={this.state.selectionAt} onChange={this.onSelectionChange} />
         )}
         <style jsx>
           {`