[Bug][Web] Unwanted space on click and overall space bugs

[MichalNemec]

Bug Description

Im running appflowy_editor in web platform and i encountered issue where multiple lines of text do weird stuff when i click within to edit. It seems like its happening only on web version.
When i load it up:

When i click "unchanged.|":

cursor ends up on " | It was popularised..." and i can just hold backspace, it removes the spaces and then creates the spaces again and this can go forever.

EDIT: also when i click within (ignoring the creation of spaces) and i do cmd+A -> everything is cleared out instead of selecting the text.

How to Reproduce

EDIT: can be reproduced in example of appflowy, just replace example.json with the value of test variable below.

Tested string, used like this:

var test = {
        "document": {
          "type": "page",
          "children": [
            {
              "type": "paragraph",
              "data": {
                "delta": [
                  {
                    "insert":
                        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\r"
                  }
                ]
              }
            },
          ]
        }
      };

EditorState(document: Document.fromJson(test))

Log output when i click within the text:

[DEBUG][editor]: 2025-01-28 17:32:00.602: keyboard service - attach text input service: TextEditingValue(text: ┤Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.├, selection: TextSelection.collapsed(offset: 366, affinity: TextAffinity.downstream, isDirectional: false), composing: TextRange(start: -1, end: -1))
[DEBUG][input]: 2025-01-28 17:32:00.626: attach text editing value: TextEditingValue(text: ┤Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.├, selection: TextSelection.collapsed(offset: 366, affinity: TextAffinity.downstream, isDirectional: false), composing: TextRange(start: -1, end: -1))
[DEBUG][editor]: 2025-01-28 17:32:00.638: keyboard service - request focus
[DEBUG][editor]: 2025-01-28 17:32:00.640: keyboard service - focus changed: true}
[DEBUG][input]: 2025-01-28 17:32:00.668: onReplace: TextEditingDeltaReplacement#2e28e(oldText: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum., textReplaced:, replacementText:
  , replacedRange: TextRange(start: 574, end: 575), selection: TextSelection.collapsed(offset: 366, affinity: TextAffinity.downstream, isDirectional: false), composing: TextRange(start: -1, end: -1))
}]}}]}][editor]: 2025-01-28 17:32:00.677: apply op (local): {op: insert, path: [1], nodes: [{type: paragraph, data: {delta: [{insert:  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
}]}, children: []) at path [1]}32:00.678: insert Node Node(id: 848Fc4, type: paragraph, attributes: {delta: [{insert:  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
[DEBUG][editor]: 2025-01-28 17:32:00.680: apply op (local): {op: update, path: [0], attributes: {delta: [{insert: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.}]}, oldAttributes: {delta: [{insert: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.}]}}
[DEBUG][editor]: 2025-01-28 17:32:00.683: keyboard service - attach text input service: TextEditingValue(text: ┤ It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.├, selection: TextSelection.collapsed(offset: 0, affinity: TextAffinity.downstream, isDirectional: false),
composing: TextRange(start: -1, end: -1))
[DEBUG][input]: 2025-01-28 17:32:00.686: attach text editing value: TextEditingValue(text: ┤ It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.├, selection: TextSelection.collapsed(offset: 0, affinity: TextAffinity.downstream, isDirectional: false), composing:
TextRange(start: -1, end: -1))
[DEBUG][editor]: 2025-01-28 17:32:00.687: keyboard service - selection changed: start = path = [1], offset = 0, end = path = [1], offset = 0
[DEBUG][input]: 2025-01-28 17:32:00.689: keyboard service - handled by character shortcut event: CharacterShortcutEvent(key: insert a new line, character: 
, handler: Closure: (EditorState) => Future<bool> from: editorState => {
        let t$3687;
        let t$goto = 0, t$completer = async._makeAsyncAwaitCompleter(dart_rti._Universe.eval(dart_rti._theUniverse(), "core|bool", true)), t$returnValue, asyncScope = Object.create(null);
        var t$36asyncBody = async._wrapJsFunctionForAsync((t$errorCode, t$result) => {
          if (t$errorCode === 1) return async._asyncRethrow(t$result, t$completer);
          while (true)
            switch (t$goto) {
              case 0:
                // Function start
                if (platform_extension['PlatformExtension|isNotMobile'] && hardware_keyboard.HardwareKeyboard.instance.isShiftPressed) {
                  t$returnValue = false;
                  // goto return
                  t$goto = 2;
                  break;
                }
                asyncScope.selection = (t$3687 = editorState.selection, t$3687 == null ? null : t$3687.normalized);
                if (asyncScope.selection == null) {
                  t$returnValue = false;
                  // goto return
                  t$goto = 2;
                  break;
                }
                t$goto = 3;
                return async._asyncAwait(selection_commands['SelectionTransform|deleteSelection'](editorState, asyncScope.selection), t$36asyncBody, t$completer);
              case 3:
                // returning from await.
                t$goto = 4;
                return async._asyncAwait(text_commands['TextTransforms|insertNewLine'](editorState, {position: asyncScope.selection.start}), t$36asyncBody, t$completer);
              case 4:
                // returning from await.
                t$returnValue = true;
                // goto return
                t$goto = 2;
                break;
              case 2:
                // return
                return async._asyncReturn(t$returnValue, t$completer);
            }
        });
        return async._asyncStartSync(t$36asyncBody, t$completer);
      })
[DEBUG][editor]: 2025-01-28 17:32:00.701: node is rebuilding...: type: page 
[DEBUG][editor]: 2025-01-28 17:32:00.709: node is rebuilding...: type: paragraph 
[DEBUG][editor]: 2025-01-28 17:32:00.725: node is rebuilding...: type: paragraph 
[DEBUG][input]: 2025-01-28 17:32:00.770: onReplace: TextEditingDeltaReplacement#573c9(oldText:  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum., textReplaced:, replacementText:
  , replacedRange: TextRange(start: 208, end: 209), selection: TextSelection.collapsed(offset: 0, affinity: TextAffinity.downstream, isDirectional: false), composing: TextRange(start: -1, end: -1))
}]}}]}][editor]: 2025-01-28 17:32:00.772: apply op (local): {op: insert, path: [2], nodes: [{type: paragraph, data: {delta: [{insert:  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
}]}, children: []) at path [2]}32:00.772: insert Node Node(id: If_YYY, type: paragraph, attributes: {delta: [{insert:  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
}]}}UG][editor]: 2025-01-28 17:32:00.773: apply op (local): {op: update, path: [1], attributes: {delta: []}, oldAttributes: {delta: [{insert:  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
[DEBUG][editor]: 2025-01-28 17:32:00.774: keyboard service - attach text input service: TextEditingValue(text: ┤ It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.├, selection: TextSelection.collapsed(offset: 0, affinity: TextAffinity.downstream, isDirectional: false),
composing: TextRange(start: -1, end: -1))
[DEBUG][input]: 2025-01-28 17:32:00.774: attach text editing value: TextEditingValue(text: ┤ It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.├, selection: TextSelection.collapsed(offset: 0, affinity: TextAffinity.downstream, isDirectional: false), composing:
TextRange(start: -1, end: -1))
[DEBUG][editor]: 2025-01-28 17:32:00.775: keyboard service - selection changed: start = path = [2], offset = 0, end = path = [2], offset = 0
[DEBUG][input]: 2025-01-28 17:32:00.775: keyboard service - handled by character shortcut event: CharacterShortcutEvent(key: insert a new line, character: 
, handler: Closure: (EditorState) => Future<bool> from: editorState => {
        let t$3687;
        let t$goto = 0, t$completer = async._makeAsyncAwaitCompleter(dart_rti._Universe.eval(dart_rti._theUniverse(), "core|bool", true)), t$returnValue, asyncScope = Object.create(null);
        var t$36asyncBody = async._wrapJsFunctionForAsync((t$errorCode, t$result) => {
          if (t$errorCode === 1) return async._asyncRethrow(t$result, t$completer);
          while (true)
            switch (t$goto) {
              case 0:
                // Function start
                if (platform_extension['PlatformExtension|isNotMobile'] && hardware_keyboard.HardwareKeyboard.instance.isShiftPressed) {
                  t$returnValue = false;
                  // goto return
                  t$goto = 2;
                  break;
                }
                asyncScope.selection = (t$3687 = editorState.selection, t$3687 == null ? null : t$3687.normalized);
                if (asyncScope.selection == null) {
                  t$returnValue = false;
                  // goto return
                  t$goto = 2;
                  break;
                }
                t$goto = 3;
                return async._asyncAwait(selection_commands['SelectionTransform|deleteSelection'](editorState, asyncScope.selection), t$36asyncBody, t$completer);
              case 3:
                // returning from await.
                t$goto = 4;
                return async._asyncAwait(text_commands['TextTransforms|insertNewLine'](editorState, {position: asyncScope.selection.start}), t$36asyncBody, t$completer);
              case 4:
                // returning from await.
                t$returnValue = true;
                // goto return
                t$goto = 2;
                break;
              case 2:
                // return
                return async._asyncReturn(t$returnValue, t$completer);
            }
        });
        return async._asyncStartSync(t$36asyncBody, t$completer);
      })
[DEBUG][input]: 2025-01-28 17:32:00.780: onReplace: TextEditingDeltaReplacement#bb5e1(oldText:  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum., textReplaced:, replacementText:
  , replacedRange: TextRange(start: 208, end: 209), selection: TextSelection.collapsed(offset: 0, affinity: TextAffinity.downstream, isDirectional: false), composing: TextRange(start: -1, end: -1))
}]}}]}][editor]: 2025-01-28 17:32:00.783: apply op (local): {op: insert, path: [3], nodes: [{type: paragraph, data: {delta: [{insert:  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
}]}, children: []) at path [3]}32:00.783: insert Node Node(id: UEKp-_, type: paragraph, attributes: {delta: [{insert:  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
}]}}UG][editor]: 2025-01-28 17:32:00.783: apply op (local): {op: update, path: [2], attributes: {delta: []}, oldAttributes: {delta: [{insert:  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
[DEBUG][editor]: 2025-01-28 17:32:00.784: keyboard service - attach text input service: TextEditingValue(text: ┤ It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.├, selection: TextSelection.collapsed(offset: 0, affinity: TextAffinity.downstream, isDirectional: false),
composing: TextRange(start: -1, end: -1))
[DEBUG][input]: 2025-01-28 17:32:00.784: attach text editing value: TextEditingValue(text: ┤ It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.├, selection: TextSelection.collapsed(offset: 0, affinity: TextAffinity.downstream, isDirectional: false), composing:
TextRange(start: -1, end: -1))
[DEBUG][editor]: 2025-01-28 17:32:00.784: keyboard service - selection changed: start = path = [3], offset = 0, end = path = [3], offset = 0
[DEBUG][input]: 2025-01-28 17:32:00.784: keyboard service - handled by character shortcut event: CharacterShortcutEvent(key: insert a new line, character: 
, handler: Closure: (EditorState) => Future<bool> from: editorState => {
        let t$3687;
        let t$goto = 0, t$completer = async._makeAsyncAwaitCompleter(dart_rti._Universe.eval(dart_rti._theUniverse(), "core|bool", true)), t$returnValue, asyncScope = Object.create(null);
        var t$36asyncBody = async._wrapJsFunctionForAsync((t$errorCode, t$result) => {
          if (t$errorCode === 1) return async._asyncRethrow(t$result, t$completer);
          while (true)
            switch (t$goto) {
              case 0:
                // Function start
                if (platform_extension['PlatformExtension|isNotMobile'] && hardware_keyboard.HardwareKeyboard.instance.isShiftPressed) {
                  t$returnValue = false;
                  // goto return
                  t$goto = 2;
                  break;
                }
                asyncScope.selection = (t$3687 = editorState.selection, t$3687 == null ? null : t$3687.normalized);
                if (asyncScope.selection == null) {
                  t$returnValue = false;
                  // goto return
                  t$goto = 2;
                  break;
                }
                t$goto = 3;
                return async._asyncAwait(selection_commands['SelectionTransform|deleteSelection'](editorState, asyncScope.selection), t$36asyncBody, t$completer);
              case 3:
                // returning from await.
                t$goto = 4;
                return async._asyncAwait(text_commands['TextTransforms|insertNewLine'](editorState, {position: asyncScope.selection.start}), t$36asyncBody, t$completer);
              case 4:
                // returning from await.
                t$returnValue = true;
                // goto return
                t$goto = 2;
                break;
              case 2:
                // return
                return async._asyncReturn(t$returnValue, t$completer);
            }
        });
        return async._asyncStartSync(t$36asyncBody, t$completer);
      })
[DEBUG][editor]: 2025-01-28 17:32:00.785: node is rebuilding...: type: page 
[DEBUG][editor]: 2025-01-28 17:32:00.791: node is rebuilding...: type: paragraph 
[DEBUG][editor]: 2025-01-28 17:32:00.797: node is rebuilding...: type: paragraph 
[DEBUG][editor]: 2025-01-28 17:32:00.801: node is rebuilding...: type: paragraph 
[DEBUG][editor]: 2025-01-28 17:32:00.807: node is rebuilding...: type: paragraph 
[DEBUG][editor]: 2025-01-28 17:32:00.987: Seal history item
[DEBUG][editor]: 2025-01-28 17:32:10.421: keyboard service - focus changed: false}

Expected Behavior

Without creating spaces and just work as it should.

Operating System

MacOS - Chrome Version 120.0.6099.216 (Official Build) (arm64)

AppFlowy Editor Version(s)

5.0.0

Screenshots

Shown in the bug description.

Additional Context

No response

[rileyhawk1417]

Any specific reason why '\r' is at the end of the text? I was able to reproduce the bug with the '\r' although when I removed it the bug did not happen.

[MichalNemec]

@rileyhawk1417 oh, yeah this fixed the unwanted spaces. the \r had to be placed there by the editor, i checked other contents and we have \r present in a lot of them.

[rileyhawk1417]

Okay so with using the editor does it place '\r' when you are editing?

[MichalNemec]

@rileyhawk1417 we have section of content, give or take 250 articles that are written by appflowy editor. We started at v 2.4.*, so im not sure how newest version does things, but yeah, it did the \r there. No one touched the json that the editor produces.