feat(mobile): embed a photo in block

The seleted photo will be stored in assets folder.

android/app/capacitor.build.gradle

@@ -12,6 +12,7 @@ dependencies {
     implementation project(':capacitor-app')
     implementation project(':capacitor-filesystem')
     implementation project(':capacitor-splash-screen')
+    implementation project(':capacitor-camera')
 
 }
 

android/app/src/main/assets/capacitor.plugins.json

@@ -10,5 +10,9 @@
 	{
 		"pkg": "@capacitor/splash-screen",
 		"classpath": "com.capacitorjs.plugins.splashscreen.SplashScreenPlugin"
+	},
+	{
+		"pkg": "@capacitor/camera",
+		"classpath": "com.capacitorjs.plugins.camera.CameraPlugin"
 	}
 ]

android/capacitor.settings.gradle

@@ -10,3 +10,6 @@ project(':capacitor-filesystem').projectDir = new File('../node_modules/@capacit
 
 include ':capacitor-splash-screen'
 project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capacitor/splash-screen/android')
+
+include ':capacitor-camera'
+project(':capacitor-camera').projectDir = new File('../node_modules/@capacitor/camera/android')

package.json

@@ -69,6 +69,7 @@
         "@capacitor/filesystem": "1.0.6",
         "@capacitor/ios": "3.2.2",
         "@capacitor/splash-screen": "1.1.3",
+        "@capacitor/camera": "1.2.1", 
         "@excalidraw/excalidraw": "0.4.2",
         "@kanru/rage-wasm": "0.2.1",
         "@sentry/browser": "6.4.1",

src/main/frontend/components/editor.cljs

@@ -7,6 +7,7 @@
             [frontend.components.datetime :as datetime-comp]
             [frontend.components.search :as search]
             [frontend.components.svg :as svg]
+            [frontend.mobile.camera :as mobile-camera]
             [frontend.config :as config]
             [frontend.db :as db]
             [frontend.extensions.zotero :as zotero]
@@ -218,7 +219,14 @@
 (rum/defc mobile-bar < rum/reactive
   [parent-state parent-id]
   [:div#mobile-editor-toolbar.bg-base-2.fix-ios-fixed-bottom
-   [:div.flex.justify-around.w-full
+   [:div.flex.overflow-scroll
+    [:div
+     [:button.bottom-action
+      {:on-mouse-down (fn [e]
+                        (util/stop e)
+                        (mobile-camera/embed-photo parent-id))}
+      (ui/icon "camera"
+               {:style {:fontSize ui/icon-size}})]]
     [:div
      [:button.bottom-action
       {:on-mouse-down (fn [e]
@@ -237,14 +245,14 @@
      [:button.bottom-action
       {:on-mouse-down (fn [e]
                         (util/stop e)
-                        ((editor-handler/move-up-down true)))}
+                        (editor-handler/move-up-down true))}
       (ui/icon "arrow-bar-to-up"
                {:style {:fontSize ui/icon-size}})]]
     [:div
      [:button.bottom-action
       {:on-mouse-down (fn [e]
                         (util/stop e)
-                        ((editor-handler/move-up-down false)))}
+                        (editor-handler/move-up-down false))}
       (ui/icon "arrow-bar-to-down"
                {:style {:fontSize ui/icon-size}})]]
     [:div

src/main/frontend/mobile/camera.cljs

@@ -0,0 +1,33 @@
+(ns frontend.mobile.camera
+  (:require ["@capacitor/camera" :refer [Camera CameraResultType]]
+            ["@capacitor/filesystem" :refer [Filesystem Directory Encoding]]
+            [promesa.core :as p]
+            [frontend.handler.editor :as editor-handler]
+            [frontend.state :as state]
+            [frontend.date :as date]
+            [frontend.util :as util]
+            [frontend.commands :as commands]))
+
+(defn- get-photo []
+  (p/let [photo (.getPhoto Camera (clj->js
+                                   {:quality 90
+                                    :allowEditing false
+                                    :saveToGallery true
+                                    :resultType (.-Uri CameraResultType)}))
+          photo-buffer (.readFile Filesystem (clj->js {:path (.-path photo)}))
+          [repo-dir assets-dir] (editor-handler/ensure-assets-dir! (state/get-current-repo))
+          filename (str (date/get-date-time-string-2) ".jpeg")
+          path (str "file://" repo-dir "/" assets-dir "/" filename)
+          _file (.writeFile Filesystem (clj->js
+                                         {:data (.-data photo-buffer)
+                                          :path path}))]
+    (p/resolved filename)))
+
+(defn embed-photo [id]
+  (let [block (state/get-edit-block)
+        format (:block/format block)]
+    (p/let [filename (get-photo)]
+      (commands/simple-insert!
+       id
+       (util/format "[[../assets/%s]]" filename)
+       {}))))