updates dante & handles return on chatbox

chaskiq · Jul 16, 2020 · ac57d0b · ac57d0b
1 parent 38ab432
commit ac57d0b
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 11 deletions.
diff --git a/app/javascript/src/components/conversations/Editor.js b/app/javascript/src/components/conversations/Editor.js
@@ -60,6 +60,7 @@ const EditorWrapper = styled.div`
 export default class ConversationEditor extends Component {
   state = {
     loading: false,
+    sendMode: 'enter'
   };
 
   fallbackEditor = false;
@@ -86,6 +87,12 @@ export default class ConversationEditor extends Component {
     });
   };
 
+  toggleSendMode = (e)=>{
+    this.setState({
+      sendMode: this.state.sendMode === 'enter' ? '' : 'enter'
+    })
+  }
+
   handleTyping = (content) => {
     // means if content empty
     if (content.html === '<p className="graf graf--p"></p>') return;
@@ -108,6 +115,7 @@ export default class ConversationEditor extends Component {
               insertAppBlockComment={this.props.insertAppBlockComment}
               submitData={(formats) => this.submitData(formats, opts)}
               saveContentCallback={(content) => this.handleTyping(content)}
+              sendMode={ this.state.sendMode }
               {...this.props}
             />
           ) : null}
@@ -126,6 +134,25 @@ export default class ConversationEditor extends Component {
       <Tabs
         tabs={tabs}
         onSelect={(tab, index) => console.log("Selected Tab", index + 1)}
+        buttons={()=>(
+          <div className="flex flex-grow items-center justify-end pr-3">
+
+            <input
+              id="send_mode"
+              type="checkbox"
+              checked={this.state.sendMode === 'enter'}
+              onChange={(e)=>{ this.toggleSendMode(e)}}
+              className="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"
+            />
+            <label
+              htmlFor="send_mode"
+              className="ml-2 block text-xs leading-5 text-gray-900"
+            >
+              {I18n.t('common.send_on_enter')}
+            </label>
+
+          </div>
+        )}
       />
     );
   }

diff --git a/app/javascript/src/components/conversations/newEditor.js b/app/javascript/src/components/conversations/newEditor.js
@@ -125,7 +125,8 @@ const SubmitButton = function (props) {
         `flex w-1/6 justify-center
         bg-white hover:bg-gray-100 
         text-gray-800 font-semibold py-2 
-        px-3 border-l border-gray-400 shadow items-center`
+        px-3 border-l border-gray-400 shadow items-center m-2 
+        rounded border`
       }
       onClick={props.onClick}
       disabled={props.disabled}
@@ -371,9 +372,16 @@ export default class ChatEditor extends Component {
                 loading={this.props.loading}
                 setDisabled={this.setDisabled}
                 read_only={this.state.read_only}
+                handleReturn={(e, isEmptyDraft)=>{
+                  if(isEmptyDraft) return
+                  if (this.props.sendMode == 'enter' && !e.nativeEvent.shiftKey) {
+                    return this.handleSubmit()
+                  }
+                }}
                 toggleEditable={() => {
                   this.setState({ read_only: !this.state.read_only });
                 }}
+
                 appendWidgets={[
                   AppPackageBlockConfig({
                     handleFunc: this.handleAppFunc,
@@ -400,10 +408,13 @@ export default class ChatEditor extends Component {
             )}
           </ChatEditorInput>
 
-          <SubmitButton
-            onClick={this.handleSubmit}
-            disabled={this.state.disabled}
-          />
+          {
+            this.props.sendMode != 'enter' && <SubmitButton
+              onClick={this.handleSubmit}
+              disabled={this.state.disabled}
+            />
+          }
+
         </EditorContainer>
       </ThemeProvider>
     );

diff --git a/app/javascript/src/components/conversations/tabs.js b/app/javascript/src/components/conversations/tabs.js
@@ -4,7 +4,7 @@ function TabContainer (props) {
   return <p component="div">{props.children}</p>
 }
 
-export default function SimpleTabs ({ tabs }) {
+export default function SimpleTabs ({ tabs, buttons }) {
   const [value, setValue] = React.useState(0)
 
   function handleChange (event, newValue) {
@@ -25,6 +25,11 @@ export default function SimpleTabs ({ tabs }) {
               {o.label}
             </a>
           ))}
+
+          {
+            buttons && buttons()
+          }
+
         </nav>
       </div>
 

diff --git a/app/javascript/src/components/textEditor/index.js b/app/javascript/src/components/textEditor/index.js
@@ -155,6 +155,18 @@ export default class ArticleEditor extends Component {
     this.initialContent = this.defaultContent();
   }
 
+  isEmptyDraftJs = () => {
+    if (!this.props.serializedContent) { 
+      // filter undefined and {}
+      return true;
+    }
+    const raw = JSON.parse(this.props.serializedContent)
+    const contentState = convertFromRaw(raw);
+
+    return !(contentState.hasText() && (contentState.getPlainText().trim() !== ''));
+  };
+
+
   emptyContent = () => {
     return {
       entityMap: {},
@@ -675,6 +687,10 @@ export default class ArticleEditor extends Component {
                 url: "/",
                 save_handler: this.saveHandler,
               }}
+              handleReturn={(e)=>{
+                return this.props.handleReturn && this.props.handleReturn(
+                  e, this.isEmptyDraftJs())
+              }}
               onChange={(e) => {
                 this.dante_editor = e;
               }}

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -29,6 +29,7 @@ en:
       es: Spanish
       redirecting: Redirecting
       select_language: Select Language
+    send_on_enter: Publish on enter
   home:
     welcome: Welcome to
     welcome_site: Chaskiq

diff --git a/config/locales/es.yml b/config/locales/es.yml
@@ -30,6 +30,8 @@
         es: Español
         redirecting: Redireccionando
         select_language: Seleccionar Idioma
+      send_on_enter: Publicar presionando "enter"
+
 
     home:
       welcome: Bienvenido a

diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "@nivo/pie": "^0.42.1",
     "@rails/activestorage": "^6.0.0",
     "@rails/webpacker": "5.0.1",
-    "Dante2": "0.5.0-rc25",
+    "Dante2": "0.5.0-rc26",
     "actioncable": "^5.2.4-1",
     "activestorage": "^5.2.3",
     "add": "^2.0.6",

diff --git a/yarn.lock b/yarn.lock
@@ -1784,10 +1784,10 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-Dante2@0.5.0-rc25:
-  version "0.5.0-rc25"
-  resolved "https://registry.yarnpkg.com/Dante2/-/Dante2-0.5.0-rc25.tgz#e216587de46a208a4b127ac9b1b65e5d7108a4fb"
-  integrity sha512-P6VEHdVeJSwIJlG0OHK2PLamdoOnnEijqYt93pogEySy6qbZfbhVzQ6585oLn0VqKlTm6y5qMCbzuEqgEtATjg==
+Dante2@0.5.0-rc26:
+  version "0.5.0-rc26"
+  resolved "https://registry.yarnpkg.com/Dante2/-/Dante2-0.5.0-rc26.tgz#c5057ad133c875d69f5abfa6c0d6d74c9adebb29"
+  integrity sha512-CatJfDzjb2QoKhgwS/HmJS2arNV7WFjk3CDiXqtpj6A5SIKwH1IL+YwlQLRXzCaqdZNj/TQi+FG2wy71wo/gBw==
   dependencies:
     axios "^0.18.0"
     draft-convert "^2.1.2"