fix: editing issue

src/main/frontend/commands.cljs

@@ -4,7 +4,7 @@
             [frontend.date :as date]
             [frontend.db :as db]
             [frontend.db.utils :as db-util]
-            [frontend.handler.draw :as draw-handler]
+            [frontend.handler.draw :as draw]
             [frontend.handler.notification :as notification]
             [frontend.handler.plugin :as plugin-handler]
             [frontend.extensions.video.youtube :as youtube]
@@ -21,7 +21,8 @@
             [logseq.graph-parser.util.page-ref :as page-ref]
             [logseq.graph-parser.util.block-ref :as block-ref]
             [goog.dom :as gdom]
-            [goog.object :as gobj]))
+            [goog.object :as gobj]
+            [promesa.core :as p]))
 
 ;; TODO: move to frontend.handler.editor.commands
 
@@ -155,7 +156,7 @@
   ([type optional]
    (let [format (get (state/get-edit-block) :block/format)
          markdown-src? (and (= format :markdown)
-                       (= (string/lower-case type) "src"))
+                            (= (string/lower-case type) "src"))
          [left right] (cond
                         markdown-src?
                         ["```" "\n```"]
@@ -237,8 +238,7 @@
        ["Upload an asset" [[:editor/click-hidden-file-input :id]] "Upload file types like image, pdf, docx, etc.)"]
 
        (state/deprecated-logged?)
-       ["Upload an image" [[:editor/click-hidden-file-input :id]]]
-       )]
+       ["Upload an image" [[:editor/click-hidden-file-input :id]]])]
 
     (markdown-headings)
 
@@ -283,7 +283,7 @@
      ["Embed HTML " (->inline "html")]
 
      ["Embed Video URL" [[:editor/input "{{video }}" {:last-pattern (state/get-editor-command-trigger)
-                                                    :backward-pos 2}]]]
+                                                      :backward-pos 2}]]]
 
      ["Embed Youtube timestamp" [[:youtube/insert-timestamp]]]
 
@@ -580,10 +580,10 @@
 (defmethod handle-step :editor/insert-properties [[_ _] _format]
   (when-let [input-id (state/get-edit-input-id)]
     (when-let [current-input (gdom/getElement input-id)]
-        (let [format (or (db/get-page-format (state/get-current-page)) (state/get-preferred-format))
-              edit-content (gobj/get current-input "value")
-              new-value (property/insert-property format edit-content "" "")]
-          (state/set-edit-content! input-id new-value)))))
+      (let [format (or (db/get-page-format (state/get-current-page)) (state/get-preferred-format))
+            edit-content (gobj/get current-input "value")
+            new-value (property/insert-property format edit-content "" "")]
+        (state/set-edit-content! input-id new-value)))))
 
 (defmethod handle-step :editor/move-cursor-to-properties [[_]]
   (when-let [input-id (state/get-edit-input-id)]
@@ -630,7 +630,7 @@
         macro (youtube/gen-youtube-ts-macro)]
     (when-let [input (gdom/getElement input-id)]
       (when macro
-       (util/insert-at-current-position! input (str macro " "))))))
+        (util/insert-at-current-position! input (str macro " "))))))
 
 (defmethod handle-step :youtube/insert-timestamp [[_]]
   (let [input-id (state/get-edit-input-id)

src/main/frontend/extensions/excalidraw.cljs

@@ -1,22 +1,38 @@
 (ns frontend.extensions.excalidraw
   (:require [cljs-bean.core :as bean]
+            [clojure.string :as string]
             ;; NOTE: Always use production build of excalidraw
             ;; See-also: https://github.com/excalidraw/excalidraw/pull/3330
             ["@excalidraw/excalidraw/dist/excalidraw.production.min" :as Excalidraw]
+            [frontend.config :as config]
             [frontend.db :as db]
             [frontend.handler.editor :as editor-handler]
-            [frontend.handler.draw :as draw-handler]
+            [frontend.handler.draw :as draw]
+            [frontend.handler.notification :as notification]
             [frontend.handler.ui :as ui-handler]
             [frontend.rum :as r]
             [frontend.state :as state]
+            [frontend.ui :as ui]
             [frontend.util :as util]
-            [frontend.extensions.draw :as draw-common]
             [goog.object :as gobj]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [frontend.mobile.util :as mobile-util]))
 
 (def excalidraw (r/adapt-class (gobj/get Excalidraw "default")))
 (def serialize-as-json (gobj/get Excalidraw "serializeAsJSON"))
 
+(defn from-json
+  [text]
+  (when-not (string/blank? text)
+    (try
+      (js/JSON.parse text)
+      (catch js/Error e
+        (println "from json error:")
+        (js/console.dir e)
+        (notification/show!
+         (util/format "Could not load this invalid excalidraw file")
+         :error)))))
+
 (defn- update-draw-content-width
   [state]
   (when-let [el ^js (rum/dom-node state)]
@@ -91,7 +107,7 @@
                             (when (and (seq elements->clj)
                                        (not= elements->clj @*elements)) ;; not= requires clj collections
                               (reset! *elements elements->clj)
-                              (draw-handler/save-draw!
+                              (draw/save-excalidraw!
                                file
                                (serialize-as-json elements app-state))))))
 
@@ -101,6 +117,47 @@
            :initial-data data
            :theme (excalidraw-theme (state/sub :ui/theme))}))]])))
 
-(rum/defc draw
+(rum/defcs draw-container < rum/reactive
+  {:init (fn [state]
+           (let [[option] (:rum/args state)
+                 file (:file option)
+                 *data (atom nil)
+                 *loading? (atom true)]
+             (when file
+               (draw/load-excalidraw-file
+                file
+                (fn [data]
+                  (let [data (from-json data)]
+                    (reset! *data data)
+                    (reset! *loading? false)))))
+             (assoc state
+                    ::data *data
+                    ::loading? *loading?)))}
+  [state option]
+  (let [*data (get state ::data)
+        *loading? (get state ::loading?)
+        loading? (rum/react *loading?)
+        data (rum/react *data)
+        db-restoring? (state/sub :db/restoring?)]
+    (when (:file option)
+      (cond
+        db-restoring?
+        [:div.ls-center
+         (ui/loading "Loading")]
+
+        (false? loading?)
+        (draw-inner data option)
+
+        :else
+        nil))))
+
+(rum/defc draw < rum/reactive
   [option]
-  (draw-common/draw-wrapper option draw-inner))
+  (let [repo (state/get-current-repo)
+        granted? (state/sub [:nfs/user-granted? repo])]
+    ;; Web granted
+    (when-not (and (config/local-db? repo)
+                   (not granted?)
+                   (not (util/electron?))
+                   (not (mobile-util/native-platform?)))
+      (draw-container option))))

src/main/frontend/handler/draw.cljs

@@ -19,7 +19,7 @@
        (fn [_result] nil)
        (fn [_error] nil)))))
 
-(defn save-draw!
+(defn save-excalidraw!
   [file data]
   (let [path file
         repo (state/get-current-repo)]
@@ -38,7 +38,7 @@
                     (prn "Write file failed, path: " path ", data: " data)
                     (js/console.dir error))))))))
 
-(defn load-draw-file
+(defn load-excalidraw-file
   [file ok-handler]
   (when-let [repo (state/get-current-repo)]
     (util/p-handle
@@ -49,28 +49,19 @@
        (println "Error loading " file ": "
                 error)))))
 
-(defonce default-excalidraw-content
+(defonce default-content
   (util/format
    "{\n  \"type\": \"excalidraw\",\n  \"version\": 2,\n  \"source\": \"%s\",\n  \"elements\": [],\n  \"appState\": {\n    \"viewBackgroundColor\": \"#FFF\",\n    \"gridSize\": null\n  }\n}"
    config/website))
 
-(defn- file-name
-  [ext]
-  (str (date/get-date-time-string-2) ext))
+(defn file-name
+  []
+  (str (date/get-date-time-string-2) ".excalidraw"))
 
-(defn- create-draw-with-default-content
-  [current-file content]
+(defn create-draw-with-default-content
+  [current-file]
   (when-let [repo (state/get-current-repo)]
     (p/let [exists? (fs/file-exists? (config/get-repo-dir repo)
                                      (str gp-config/default-draw-directory current-file))]
       (when-not exists?
-        (save-draw! current-file content)))))
-
-(defn initialize-excalidarw-file
-  []
-  (let [file (file-name ".excalidraw")
-        path (str gp-config/default-draw-directory "/" file)
-        text (util/format "[[%s]]" path)]
-    (p/let [_ (create-draw-with-default-content path default-excalidraw-content)]
-      (println "excalidraw file created, " path))
-    text))
+        (save-excalidraw! current-file default-content)))))

src/main/frontend/handler/editor.cljs

@@ -30,10 +30,6 @@
             [frontend.search :as search]
             [frontend.state :as state]
             [frontend.template :as template]
-            [logseq.graph-parser.text :as text]
-            [logseq.graph-parser.utf8 :as utf8]
-            [logseq.graph-parser.property :as gp-property]
-            [logseq.graph-parser.block :as gp-block]
             [frontend.util :as util :refer [profile]]
             [frontend.util.clock :as clock]
             [frontend.util.cursor :as cursor]
@@ -49,14 +45,15 @@
             [goog.dom.classes :as gdom-classes]
             [goog.object :as gobj]
             [lambdaisland.glogi :as log]
-            [promesa.core :as p]
-            [logseq.graph-parser.util :as gp-util]
-            [logseq.graph-parser.util.block-ref :as block-ref]
-            [logseq.graph-parser.util.page-ref :as page-ref]
+            [logseq.db.schema :as db-schema]
+            [logseq.graph-parser.block :as gp-block]
             [logseq.graph-parser.mldoc :as gp-mldoc]
+            [logseq.graph-parser.property :as gp-property]
             [logseq.graph-parser.text :as text]
             [logseq.graph-parser.utf8 :as utf8]
             [logseq.graph-parser.util :as gp-util]
+            [logseq.graph-parser.util.block-ref :as block-ref]
+            [logseq.graph-parser.util.page-ref :as page-ref]
             [promesa.core :as p]
             [rum.core :as rum]))
 

src/main/frontend/handler/route.cljs

@@ -44,8 +44,8 @@
    (recent-handler/add-page-to-recent! (state/get-current-repo) page-name
                                        click-from-recent?)
    (let [m (cond->
-             {:to :page
-              :path-params {:name (str page-name)}}
+            {:to :page
+             :path-params {:name (str page-name)}}
              anchor
              (assoc :query-params {:anchor anchor})
              push
@@ -56,7 +56,7 @@
   ([name]
    (redirect-to-whiteboard! name nil))
   ([name {:keys [block-id]}]
-   (recent-handler/add-page-to-recent! (state/get-current-repo) name)
+   (recent-handler/add-page-to-recent! (state/get-current-repo) name false)
    (redirect! {:to :whiteboard
                :path-params {:name (str name)}
                :query-params (merge {:block-id block-id})})))

tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -231,16 +231,15 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
       const uuid = handlers?.addNewBlock(content)
       if (uuid) {
         finishCreating(uuid)
-        app.setEditingShape(this)
         // wait until the editor is mounted
         setTimeout(() => {
           // @ts-expect-error ???
-          if (window.logseq) {
-            // @ts-expect-error ???
-            const logseqApi = window.logseq.api as any
+          const logseqApi = window.logseq?.api as any
+          if (logseqApi) {
+            app.setEditingShape(this)
             logseqApi.edit_block(uuid)
           }
-        }, 100)
+        })
       }
     }, [])
 

tldraw/apps/tldraw-logseq/src/styles.css

@@ -518,8 +518,9 @@
 }
 
 .tl-logseq-portal-container {
-  width: 100%;
+  width: calc(100% - 2px);
   height: 100%;
+  transform: translate(1px, 1px);
   overscroll-behavior: none;
   display: flex;
   flex-direction: column;

tldraw/packages/core/src/lib/tools/TLSelectTool/states/PointingCanvasState.ts

@@ -14,6 +14,7 @@ export class PointingCanvasState<
     const { shiftKey } = this.app.inputs
     if (!shiftKey) {
       this.app.setSelectedShapes([])
+      this.app.clearEditingShape()
     }
   }