chat: move cursor to end of line

- also fix possible loss of data when editing a reply to a chat and
  scrolling around

src/packages/frontend/chat/input.tsx

@@ -66,7 +66,7 @@ export default function ChatInput({
  () => redux.getStore("account").get_account_id(),
  [],
  );
-
+ const controlRef = useRef<any>(null);
  const [input, setInput] = useState<string>("");
  useEffect(() => {
  const dbInput = syncdb
@@ -80,12 +80,20 @@ export default function ChatInput({
  // the db version is used when you refresh your browser while editing, or scroll up and down
  // thus unmounting and remounting the currently editing message (due to virtualization).
  // See https://github.com/sagemathinc/cocalc/issues/6415
- setInput(dbInput ?? propsInput);
+ const input = dbInput ?? propsInput;
+ setInput(input);
+ if (input?.trim()) {
+ // have to wait until it's all rendered -- i hate code like this...
+ for (const n of [1, 10, 50]) {
+ setTimeout(() => {
+ controlRef.current?.moveCursorToEndOfLine();
+ }, n);
+ }
+ }
  }, [date, sender_id, propsInput]);
 
  const currentInputRef = useRef<string>(input);
  const saveOnUnmountRef = useRef<boolean>(true);
-
  const isMountedRef = useIsMountedRef();
  const lastSavedRef = useRef<string>(input);
  const saveChat = useDebouncedCallback(
@@ -142,7 +150,7 @@ export default function ChatInput({
  // Note: it is still slightly annoying, due to loss of focus... however, data
  // loss is NOT ok, whereas loss of focus is.
  const input = currentInputRef.current;
- if (input == null || syncdb == null) {
+ if (!input || syncdb == null) {
  return;
  }
  if (
@@ -212,6 +220,7 @@ export default function ChatInput({
  onBlur={onBlur}
  cacheId={cacheId}
  value={input}
+ controlRef={controlRef}
  enableUpload={true}
  enableMentions={true}
  submitMentionsRef={submitMentionsRef}

src/packages/frontend/editors/markdown-input/multimode.tsx

@@ -134,54 +134,56 @@ interface Props {
  overflowEllipsis?: boolean; // if true, show "..." button popping up all menu entries
 
  dirtyRef?: MutableRefObject<boolean>; // a boolean react ref that gets set to true whenever document changes for any reason (client should explicitly set this back to false).
+
+ controlRef?: MutableRefObject<any>;
 }
 
-export default function MultiMarkdownInput(props: Props) {
- const {
-  autoFocus,
-  cacheId,
-  cmOptions,
-  compact,
-  cursors,
-  defaultMode,
-  dirtyRef,
-  editBarStyle,
-  editorDivRef,
-  enableMentions,
-  enableUpload = true,
-  extraHelp,
-  fixedMode,
-  fontSize,
-  getValueRef,
-  height = "auto",
-  hideHelp,
-  isFocused,
-  minimal,
-  modeSwitchStyle,
-  noVfill,
-  onBlur,
-  onChange,
-  onCursorBottom,
-  onCursors,
-  onCursorTop,
-  onFocus,
-  onModeChange,
-  onRedo,
-  onSave,
-  onShiftEnter,
-  onUndo,
-  onUploadEnd,
-  onUploadStart,
-  overflowEllipsis = false,
-  placeholder,
-  refresh,
-  registerEditor,
-  saveDebounceMs = SAVE_DEBOUNCE_MS,
-  style,
-  submitMentionsRef,
-  unregisterEditor,
-  value,
- } = props;
+export default function MultiMarkdownInput({
+ autoFocus,
+ cacheId,
+ cmOptions,
+ compact,
+ cursors,
+ defaultMode,
+ dirtyRef,
+ editBarStyle,
+ editorDivRef,
+ enableMentions,
+ enableUpload = true,
+ extraHelp,
+ fixedMode,
+ fontSize,
+ getValueRef,
+ height = "auto",
+ hideHelp,
+ isFocused,
+ minimal,
+ modeSwitchStyle,
+ noVfill,
+ onBlur,
+ onChange,
+ onCursorBottom,
+ onCursors,
+ onCursorTop,
+ onFocus,
+ onModeChange,
+ onRedo,
+ onSave,
+ onShiftEnter,
+ onUndo,
+ onUploadEnd,
+ onUploadStart,
+ overflowEllipsis = false,
+ placeholder,
+ refresh,
+ registerEditor,
+ saveDebounceMs = SAVE_DEBOUNCE_MS,
+ style,
+ submitMentionsRef,
+ unregisterEditor,
+ value,
+ controlRef,
+}: Props) {
  const {
  isFocused: isFocusedFrame,
  isVisible,
@@ -529,6 +531,7 @@ export default function MultiMarkdownInput(props: Props) {
  submitMentionsRef={submitMentionsRef}
  editBar2={editBar2}
  dirtyRef={dirtyRef}
+ controlRef={controlRef}
  />
  </div>
  ) : undefined}

src/packages/frontend/editors/slate/editable-markdown.tsx

@@ -33,6 +33,7 @@ import { markdown_to_html } from "@cocalc/frontend/markdown";
 import Fragment, { FragmentId } from "@cocalc/frontend/misc/fragment-id";
 import { Descendant, Editor, Range, Transforms, createEditor } from "slate";
 import { resetSelection } from "./control";
+import * as control from "./control";
 import { useBroadcastCursors, useCursorDecorate } from "./cursors";
 import { EditBar, useLinkURL, useListProperties, useMarks } from "./edit-bar";
 import { Element } from "./element";
@@ -121,6 +122,9 @@ interface Props {
  editBar2?: MutableRefObject<JSX.Element | undefined>;
  dirtyRef?: MutableRefObject<boolean>;
  minimal?: boolean;
+ controlRef?: MutableRefObject<{
+ moveCursorToEndOfLine: () => void;
+ } | null>;
 }
 
 export const EditableMarkdown: React.FC<Props> = React.memo((props: Props) => {
@@ -159,6 +163,7 @@ export const EditableMarkdown: React.FC<Props> = React.memo((props: Props) => {
  submitMentionsRef,
  unregisterEditor,
  value,
+ controlRef,
  } = props;
  const { project_id, path, desc, isVisible } = useFrameContext();
  const isMountedRef = useIsMountedRef();
@@ -246,6 +251,12 @@ export const EditableMarkdown: React.FC<Props> = React.memo((props: Props) => {
  };
  }
 
+ if (controlRef != null) {
+ controlRef.current = {
+ moveCursorToEndOfLine: () => control.moveCursorToEndOfLine(ed),
+ };
+ }
+
  ed.onCursorBottom = onCursorBottom;
  ed.onCursorTop = onCursorTop;