Feat: record audio on mobile (#4766)

* feat(audio): render audio link as component

* refactor frontend/component/block/inline

* fix audio component on mobile

* Fix(iOS): allow clock to replay audio

* feat(mobile): audio record

* add permission request code on record

* rename `editor/recording?` to `editor/record-status`

* move `get-asset-path` into handler/editor.cljs

* add android settings

* support sharing audio file from some apps

* enhance(record): insert audio link in a new block if non-editing

* feat(audio): allow cancelling record

* fix lints

* feat(iOS): add a tab bar

* tweak some css on mobile

* fix lints

* fix https://github.com/logseq/logseq/issues/4798

* enable tab bar on Android

* fix landscape height of tab bar

* add :reuse-last-block? option

* dont't show tab bar when editing mirror code

* tweak code-editor css

* increase width for more functional buttons

* fix card preview css on iPad

* add document-mode to tab bar

* remove tabbar when editing code and tweak textarea resize cursor behavior

* reduce SplashScreen launch screen duration

* don't show tabbar when editing page title

* enhance: float timer

* fix lint

* fix tabbar height on iPhone without notch

* remove .embed-page width

* fix lint

Co-authored-by: Andelf <andelf@gmail.com>

src/main/frontend/extensions/code.cljs

@@ -252,14 +252,16 @@
         (.on editor "blur" (fn [cm e]
                              (when e (util/stop e))
                              (when-not (gobj/get cm "escPressed")
-                               (save-file-or-block-when-blur-or-esc! editor textarea config state))))
+                               (save-file-or-block-when-blur-or-esc! editor textarea config state))
+                             (state/set-block-component-editing-mode! false)))
+        (.on editor "focus" (fn [_e]
+                              (state/set-block-component-editing-mode! true)))
         (.addEventListener element "mousedown"
                            (fn [e]
                              (state/clear-selection!)
                              (when-let [block (and (:block/uuid config) (into {} (db/get-block-by-uuid (:block/uuid config))))]
                                (state/set-editing! id (.getValue editor) block nil false))
-                             (util/stop e)
-                             (state/set-block-component-editing-mode! true)))
+                             (util/stop e)))
         (.save editor)
         (.refresh editor)
         (when default-open?
@@ -297,7 +299,7 @@
      (when-not (= mode "calc")
        [:div.extensions__code-lang
         (string/lower-case mode)]))
-   [:div.flex.flex-1.flex-row.w-full.mt-6
+   [:div.code-editor.flex.flex-1.flex-row.w-full
     [:textarea (merge {:id id
                        ;; Expose the textarea associated with the CodeMirror instance via
                        ;; ref so that we can autofocus into the CodeMirror instance later.