✨ Moves cursor to position when clicking in the text box

frontend/src/app/main/data/workspace/texts.cljs

@@ -101,6 +101,13 @@
     (update [_ state]
       (d/update-in-when state [:workspace-editor-state id] ted/editor-select-all))))
 
+(defn cursor-to-end
+  [{:keys [id] :as shape}]
+  (ptk/reify ::cursor-to-end
+    ptk/UpdateEvent
+    (update [_ state]
+      (d/update-in-when state [:workspace-editor-state id] ted/cursor-to-end))))
+
 ;; --- Helpers
 
 (defn- shape-current-values

frontend/src/app/main/ui/workspace/shapes/text/editor.cljs

@@ -126,7 +126,13 @@
          (fn [_ state]
            (st/emit! (dwt/update-editor-state shape (ted/editor-split-block state)))
            "handled"))
-        ]
+
+        on-click
+        (mf/use-callback
+         (fn [event]
+           (when (dom/class? (dom/get-target event) "DraftEditor-root")
+             (st/emit! (dwt/cursor-to-end shape)))
+           (st/emit! (dwt/focus-editor))))]
 
     (mf/use-layout-effect on-mount)
 
@@ -135,7 +141,7 @@
       :style {:cursor cur/text
               :width (:width shape)
               :height (:height shape)}
-      :on-click (st/emitf (dwt/focus-editor))
+      :on-click on-click
       :class (dom/classnames
               :align-top    (= (:vertical-align content "top") "top")
               :align-center (= (:vertical-align content) "center")

frontend/src/app/util/text_editor.cljs

@@ -92,3 +92,7 @@
 (defn remove-editor-blur-selection
   [state]
   (impl/removeBlurSelectionEntity state))
+
+(defn cursor-to-end
+  [state]
+  (impl/cursorToEnd state))

frontend/src/app/util/text_editor_impl.js

@@ -56,6 +56,18 @@ function getSelectAllSelection(state) {
   });
 }
 
+function getCursorInEndPosition(state) {
+  const content = state.getCurrentContent();
+  const lastBlock = content.getBlockMap().last();
+
+  return new SelectionState({
+    "anchorKey": lastBlock.getKey(),
+    "anchorOffset": lastBlock.getLength(),
+    "focusKey": lastBlock.getKey(),
+    "focusOffset": lastBlock.getLength()
+  });
+}
+
 export function selectAll(state) {
   return EditorState.forceSelection(state, getSelectAllSelection(state));
 }
@@ -209,3 +221,16 @@ export function removeInlineStylePrefix(contentState, selectionState, stylePrefi
     return block.set("characterList", chars);
   });
 }
+
+export function cursorToEnd(state) {
+  const newSelection = getCursorInEndPosition(state);
+  const selection = state.getSelection();
+
+  let content = state.getCurrentContent();
+  content = Modifier.applyEntity(content, newSelection, null);
+
+  state = EditorState.forceSelection(state, newSelection);
+  state = EditorState.push(state, content, "apply-entity");
+
+  return state;
+}