enhance: simplify page title

src/main/frontend/components/page.cljs

@@ -288,33 +288,31 @@
                     :else
                     (state/set-modal! (confirm-fn)))
                   (util/stop e))]
-    [:span.absolute.inset-0.edit-input-wrapper.z-10
-     {:class (util/classnames [{:editing @*edit?}])}
-     [:input.edit-input
-      {:type          "text"
-       :ref           input-ref
-       :auto-focus    true
-       :style         {:outline "none"
-                       :width "100%"
-                       :font-weight "inherit"}
-       :auto-complete (if (util/chrome?) "chrome-off" "off") ; off not working here
-       :value         (rum/react *input-value)
-       :on-change     (fn [^js e]
-                        (let [value (util/evalue e)]
-                          (reset! *title-value (string/trim value))
-                          (reset! *input-value value)))
-       :on-blur       blur-fn
-       :on-key-down   (fn [^js e]
-                        (when (= (gobj/get e "key") "Enter")
-                          (blur-fn e)))
-       :placeholder   (when untitled? (t :untitled))
-       :on-key-up     (fn [^js e]
+    [:input.edit-input.p-0.focus:outline-none.ring-none
+     {:type          "text"
+      :ref           input-ref
+      :auto-focus    true
+      :style         {:outline "none"
+                      :width "100%"
+                      :font-weight "inherit"}
+      :auto-complete (if (util/chrome?) "chrome-off" "off") ; off not working here
+      :value         (rum/react *input-value)
+      :on-change     (fn [^js e]
+                       (let [value (util/evalue e)]
+                         (reset! *title-value (string/trim value))
+                         (reset! *input-value value)))
+      :on-blur       blur-fn
+      :on-key-down   (fn [^js e]
+                       (when (= (gobj/get e "key") "Enter")
+                         (blur-fn e)))
+      :placeholder   (when untitled? (t :untitled))
+      :on-key-up     (fn [^js e]
                             ;; Esc
-                        (when (= 27 (.-keyCode e))
-                          (reset! *title-value old-name)
-                          (reset! *edit? false)))
-       :on-focus (fn []
-                   (when untitled? (reset! *title-value "")))}]]))
+                       (when (= 27 (.-keyCode e))
+                         (reset! *title-value old-name)
+                         (reset! *edit? false)))
+      :on-focus (fn []
+                  (when untitled? (reset! *title-value "")))}]))
 
 (rum/defc page-tags <
   [page tags-property *hover? *configuring?]
@@ -453,7 +451,7 @@
             icon)])
 
        [:div.flex.flex-1.flex-row.flex-wrap.items-center.gap-4
-        [:h1.page-title.flex.cursor-pointer.gap-1
+        [:h1.page-title.flex-1.cursor-pointer.gap-1
          {:class (when-not whiteboard-page? "title")
           :on-mouse-down (fn [e]
                            (when (util/right-click? e)
@@ -475,31 +473,29 @@
                             (reset! *input-value (if untitled? "" old-name))
                             (reset! *edit? true)))))}
 
-         [:div.page-title-sizer-wrapper.relative
-          (when @*edit?
-            (page-title-editor {:*title-value *title-value
-                                :*edit? *edit?
-                                :*input-value *input-value
-                                :title title
-                                :page-name page-name
-                                :old-name old-name
-                                :untitled? untitled?
-                                :whiteboard-page? whiteboard-page?
-                                :preview? preview?}))
-          [:span.title.block
-           {:on-click (fn []
-                        (when (and (state/home?) (not preview?))
-                          (route-handler/redirect-to-page! page-name)))
-            :data-value @*input-value
-            :data-ref   page-name
-            :style      {:opacity (when @*edit? 0)}}
-           (let [nested? (and (string/includes? title page-ref/left-brackets)
-                              (string/includes? title page-ref/right-brackets))]
-             (cond @*edit? [:span {:style {:white-space "pre"}} (rum/react *input-value)]
-                   untitled? [:span.opacity-50 (t :untitled)]
-                   nested? (component-block/map-inline {} (gp-mldoc/inline->edn title (gp-mldoc/default-config
-                                                                                       (:block/format page))))
-                   :else title))]]]
+         (if @*edit?
+           (page-title-editor {:*title-value *title-value
+                               :*edit? *edit?
+                               :*input-value *input-value
+                               :title title
+                               :page-name page-name
+                               :old-name old-name
+                               :untitled? untitled?
+                               :whiteboard-page? whiteboard-page?
+                               :preview? preview?})
+           [:span.title.block
+            {:on-click (fn []
+                         (when (and (state/home?) (not preview?))
+                           (route-handler/redirect-to-page! page-name)))
+             :data-value @*input-value
+             :data-ref   page-name
+             :style      {:opacity (when @*edit? 0)}}
+            (let [nested? (and (string/includes? title page-ref/left-brackets)
+                               (string/includes? title page-ref/right-brackets))]
+              (cond untitled? [:span.opacity-50 (t :untitled)]
+                    nested? (component-block/map-inline {} (gp-mldoc/inline->edn title (gp-mldoc/default-config
+                                                                                        (:block/format page))))
+                    :else title))])]
         (when (and db-based? (seq (:block/tags page)))
           [:div.page-tags.ml-4
            (pv/property-value page tags-property (map :block/uuid (:block/tags page))

src/main/frontend/components/page.css

@@ -255,18 +255,6 @@
   .edit-input {
     width: 100%;
     border: none;
-    box-shadow: none;
-    padding-left: 5px;
-    padding-top: 5px;
-    padding-bottom: 4px;
-
-    &-wrapper {
-      @apply rounded;
-
-      &.editing {
-        background-color: var(--ls-secondary-background-color);
-      }
-    }
   }
 }
 
@@ -279,22 +267,6 @@ a.page-title {
   margin-bottom: 0;
 }
 
-.page-title-sizer-wrapper {
-  @apply w-full overflow-x-auto overflow-y-hidden;
-
-  :empty::before {
-    content: '\200b';
-  }
-
-  > .title {
-    @apply w-full overflow-hidden overflow-ellipsis;
-  }
-
-  .edit-input {
-    padding-right: 4px;
-  }
-}
-
 html.is-native-android,
 html.is-native-ipad,
 html.is-native-iphone,
@@ -404,3 +376,7 @@ html.is-native-ios {
 .class-parent .form-select {
   line-height: 1rem;
 }
+
+.ring-none {
+    @apply focus:ring-0 focus:ring-offset-0;
+}

src/main/frontend/components/whiteboard.css

@@ -160,12 +160,9 @@ input.tl-text-input {
     overflow: hidden;
   }
 
-  .page-title-sizer-wrapper {
-    width: calc(100% - 20px);
-
-    > .title {
-      @apply whitespace-nowrap min-w-[100px];
-    }
+  .ls-page-title {
+      padding: 0;
+      margin: 0;
   }
 
   .edit-input {