fix record bar drag issues

src/main/frontend/components/editor.cljs

@@ -24,8 +24,7 @@
             [goog.dom :as gdom]
             [promesa.core :as p]
             [react-draggable]
-            [rum.core :as rum]
-            [frontend.mobile.footer :as footer]))
+            [rum.core :as rum]))
 
 (rum/defc commands < rum/reactive
   [id format]
@@ -524,12 +523,6 @@
         heading-class (get-editor-style-class content format)]
     [:div.editor-inner {:class (if block "block-editor" "non-block-editor")}
 
-     (when (= (state/sub :editor/record-status) "RECORDING")
-       [:> react-draggable
-        [:div#audio-record-toolbar
-         {:style {:bottom (+ @util/keyboard-height 45)}}
-         (footer/audio-record-cp)]])
-
      (ui/ls-textarea
       {:id                id
        :cacheMeasurements (editor-row-height-unchanged?) ;; check when content updated (as the content variable is binded)

src/main/frontend/components/editor.css

@@ -1,12 +1,12 @@
 #audio-record-toolbar {
     position: fixed;
     background-color: var(--ls-secondary-background-color);
-    width: 88px;
+    width: 90px;
     justify-content: left;
     left: 5px;
     transition: none;
     z-index: 9999;
-    padding: 5px;
+    padding: 5px 5px 5px 8px;
     border-radius: 5px;
 }
 

src/main/frontend/components/sidebar.cljs

@@ -19,25 +19,27 @@
             [frontend.db.model :as db-model]
             [frontend.extensions.pdf.assets :as pdf-assets]
             [frontend.extensions.srs :as srs]
+            [frontend.handler.common :as common-handler]
             [frontend.handler.editor :as editor-handler]
             [frontend.handler.mobile.swipe :as swipe]
             [frontend.handler.page :as page-handler]
             [frontend.handler.route :as route-handler]
             [frontend.handler.user :as user-handler]
-            [frontend.handler.common :as common-handler]
             [frontend.mixins :as mixins]
             [frontend.mobile.action-bar :as action-bar]
             [frontend.mobile.footer :as footer]
-            [frontend.mobile.util :as mobile-util]
             [frontend.mobile.mobile-bar :refer [mobile-bar]]
+            [frontend.mobile.util :as mobile-util]
             [frontend.modules.shortcut.data-helper :as shortcut-dh]
             [frontend.state :as state]
             [frontend.ui :as ui]
             [frontend.util :as util]
+            [frontend.util.cursor :as cursor]
             [goog.dom :as gdom]
             [goog.object :as gobj]
-            [rum.core :as rum]
-            [reitit.frontend.easy :as rfe]))
+            [react-draggable]
+            [reitit.frontend.easy :as rfe]
+            [rum.core :as rum]))
 
 (rum/defc nav-content-item
   [name {:keys [class]} child]
@@ -272,6 +274,22 @@
      (sidebar-nav route-match close-fn left-sidebar-open?)
      [:span.shade-mask {:on-click close-fn}]]))
 
+(rum/defc recording-bar
+  []
+  [:> react-draggable
+   {:onStart (fn [_event]
+               (when-let [pos (some-> (state/get-input) cursor/pos)]
+                 (state/set-editor-last-pos! pos)))
+    :onStop (fn [_event]
+              (when-let [block (get-in @state/state [:editor/block :block/uuid])]
+                (editor-handler/edit-block! block :max (:block/uuid block))
+                (when-let [input (state/get-input)]
+                  (when-let [saved-cursor (state/get-editor-last-pos)]
+                    (cursor/move-cursor-to input saved-cursor)))))}
+   [:div#audio-record-toolbar
+    {:style {:bottom (+ @util/keyboard-height 45)}}
+    (footer/audio-record-cp)]])
+
 (rum/defc main <
   {:did-mount (fn [state]
                 (when-let [element (gdom/getElement "main-content-container")]
@@ -284,7 +302,7 @@
                                 (editor-handler/upload-asset id files format editor-handler/*asset-uploading? true))))})
                   (common-handler/listen-to-scroll! element))
                 state)}
-  [{:keys [route-match global-graph-pages? route-name indexeddb-support? db-restoring? main-content show-action-bar?]}]
+  [{:keys [route-match global-graph-pages? route-name indexeddb-support? db-restoring? main-content show-action-bar? show-recording-bar?]}]
   (let [left-sidebar-open? (state/sub :ui/left-sidebar-open?)
         onboarding-and-home? (and (or (nil? (state/get-current-repo)) (config/demo-graph?))
                                   (not config/publishing?)
@@ -306,9 +324,12 @@
         :data-is-full-width         (or global-graph-pages?
                                         (contains? #{:all-files :all-pages :my-publishing} route-name))}
 
+       (when show-recording-bar?
+         (recording-bar))
+
        (mobile-bar)
        (footer/footer)
-
+       
        (when (and (not (mobile-util/native-platform?))
                   (contains? #{:page :home} route-name))
          (widgets/demo-graph-alert))
@@ -516,7 +537,8 @@
         edit? (:editor/editing? @state/state)
         default-home (get-default-home-if-valid)
         logged? (user-handler/logged-in?)
-        show-action-bar? (state/sub :mobile/show-action-bar?)]
+        show-action-bar? (state/sub :mobile/show-action-bar?)
+        show-recording-bar? (state/sub :mobile/show-recording-bar?)]
     (theme/container
      {:t             t
       :theme         theme
@@ -559,7 +581,8 @@
                :light?              light?
                :db-restoring?       db-restoring?
                :main-content        main-content
-               :show-action-bar?    show-action-bar?})]
+               :show-action-bar?    show-action-bar?
+               :show-recording-bar? show-recording-bar?})]
 
        (right-sidebar/sidebar)
 

src/main/frontend/handler/events.cljs

@@ -294,6 +294,8 @@
     (state/set-state! :mobile/show-tabbar? false)
     (state/set-state! :mobile/show-toolbar? true)
     (state/set-state! :mobile/show-action-bar? false)
+    (when (= (state/sub :editor/record-status) "RECORDING")
+      (state/set-state! :mobile/show-recording-bar? true))
     (when (mobile-util/native-ios?)
       (reset! util/keyboard-height keyboard-height)
       (set! (.. main-node -style -marginBottom) (str keyboard-height "px"))
@@ -303,9 +305,6 @@
         (set! (.. right-sidebar-node -style -paddingBottom) (str (+ 150 keyboard-height) "px")))
       (when-let [card-preview-el (js/document.querySelector ".cards-review")]
         (set! (.. card-preview-el -style -marginBottom) (str keyboard-height "px")))
-      (when (= (state/sub :editor/record-status) "RECORDING")
-        (when-let [record-node (gdom/getElement "audio-record-toolbar")]
-          (set! (.. record-node -style -bottom) (str (+ 45 keyboard-height) "px"))))
       (js/setTimeout (fn []
                        (let [toolbar (.querySelector main-node "#mobile-editor-toolbar")]
                          (set! (.. toolbar -style -bottom) (str keyboard-height "px"))))
@@ -315,6 +314,8 @@
   (let [main-node (util/app-scroll-container-node)]
     (state/set-state! :mobile/show-toolbar? false)
     (state/set-state! :mobile/show-tabbar? true)
+    (when (= (state/sub :editor/record-status) "RECORDING")
+      (state/set-state! :mobile/show-recording-bar? false))
     (when (mobile-util/native-ios?)
       (when-let [card-preview-el (js/document.querySelector ".cards-review")]
         (set! (.. card-preview-el -style -marginBottom) "0px"))
@@ -322,10 +323,7 @@
       (when-let [left-sidebar-node (gdom/getElement "left-sidebar")]
         (set! (.. left-sidebar-node -style -bottom) "0px"))
       (when-let [right-sidebar-node (gdom/getElementByClass "sidebar-item-list")]
-        (set! (.. right-sidebar-node -style -paddingBottom) "150px"))
-      (when (= (state/sub :editor/record-status) "RECORDING")
-        (when-let [record-node (gdom/getElement "audio-record-toolbar")]
-          (set! (.. record-node -style -bottom) "45px"))))))
+        (set! (.. right-sidebar-node -style -paddingBottom) "150px")))))
 
 (defmethod handle :plugin/consume-updates [[_ id pending? updated?]]
   (let [downloading? (:plugin/updates-downloading? @state/state)]

src/main/frontend/mobile/footer.cljs

@@ -39,11 +39,12 @@
   (if (= (state/sub :editor/record-status) "NONE")
     (mobile-bar-command #(do (record/start-recording)
                              (reset! *record-start (js/Date.now))) "microphone")
-    [:div.flex.flex-row.items-center.pl-1
-     (mobile-bar-command #(do (record/stop-recording)
-                              (reset! *record-start nil))
+    [:div.flex.flex-row.items-center
+     (mobile-bar-command #(do (reset! *record-start nil)
+                              (state/set-state! :mobile/show-recording-bar? false)
+                              (record/stop-recording))
                          "player-stop")
-     [:div.timer.pl-2
+     [:div.timer.ml-2
       {:on-click record/stop-recording}
       (seconds->minutes:seconds (/ (- (js/Date.now) @*record-start) 1000))]]))
 

src/main/frontend/mobile/mobile_bar.cljs

@@ -7,8 +7,6 @@
             [frontend.handler.history :as history]
             [frontend.handler.page :as page-handler]
             [frontend.mobile.camera :as mobile-camera]
-            [frontend.mobile.footer :as footer]
-            [frontend.mobile.record :as record]
             [frontend.state :as state]
             [frontend.ui :as ui]
             [frontend.util :as util]
@@ -16,7 +14,7 @@
             [rum.core :as rum]))
 
 (def ^:private icons-keywords
-  [:checkbox :brackets :parentheses :command :tag :a-b :list :camera :microphone
+  [:checkbox :brackets :parentheses :command :tag :a-b :list :camera
    :brand-youtube :link :rotate :rotate-clockwise :calendar :code :bold :italic :strikethrough :paint])
 
 (def ^:private commands-stats
@@ -104,9 +102,6 @@
              (command editor-handler/cycle-priority! "a-b" true)
              (command editor-handler/toggle-list! "list" true)
              (command #(mobile-camera/embed-photo parent-id) "camera" true)
-             (command #(do (record/start-recording)
-                           (reset! footer/*record-start (js/Date.now)))
-                      "microphone" true)
              (command commands/insert-youtube-timestamp "brand-youtube" true)
              (command editor-handler/html-link-format! "link" true)
              (command history/undo! "rotate" true true)

src/main/frontend/state.cljs

@@ -148,6 +148,7 @@
      :mobile/show-action-bar?               false
      :mobile/actioned-block                 nil
      :mobile/show-toolbar?                  false
+     :mobile/show-recording-bar?            false
      ;;; toolbar icon doesn't update correctly when clicking after separate it from box,
      ;;; add a random in (<= 1000000) to observer its update
      :mobile/toolbar-update-observer        0
@@ -572,12 +573,12 @@
     (when-let [input-id (get-edit-input-id)]
       (when-let [input (gdom/getElement input-id)]
         (let [value (gobj/get input "value")
-              new-value (str value append-text)
-              new-value (if (or (= (last value) " ")
+              new-value (if (or (string/blank? value)
+                                (= (last value) " ")
                                 (= (last value) "\n"))
-                          new-value
-                          (str "\n" new-value))]
-          (js/document.execCommand "insertText" false append-text)
+                          (str value append-text)
+                          (str value "\n" append-text))]
+          (util/set-change-value input new-value)
           (update-state! :editor/content (fn [m]
                                            (assoc m input-id new-value))))))))