diff --git a/frontend/src/app/main/data/workspace/texts.cljs b/frontend/src/app/main/data/workspace/texts.cljs index f928c01ce..289800da8 100644 --- a/frontend/src/app/main/data/workspace/texts.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs index 285934422..0ba3a332f 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs +++ b/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") diff --git a/frontend/src/app/util/text_editor.cljs b/frontend/src/app/util/text_editor.cljs index 370f17f2d..c5336cf68 100644 --- a/frontend/src/app/util/text_editor.cljs +++ b/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)) diff --git a/frontend/src/app/util/text_editor_impl.js b/frontend/src/app/util/text_editor_impl.js index 9255ec621..c966f0527 100644 --- a/frontend/src/app/util/text_editor_impl.js +++ b/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; +}