Space (whitespace) gets deleted after pressing any other key #873

rvetrsek · 2020-10-23T14:09:38Z

Describe the bug
Space gets deleted after pressing any other key.

Steps to Reproduce / Codesandbox Example
Steps to reproduce the behavior:

In an empty editor put eg. "abc"
Press the spacebar
Press eg. "d"

Expected behavior
Whitespace should not get deleted

Screenshots

This is with the most barebones include of the editor and it still doesn't work for me.

Environment

Version 1.30.0

glavdir · 2020-10-24T09:21:27Z

I fixed this bug in my project by next code:

.my-editor >>> .ProseMirror{ white-space: normal; word-break: break-word; }

rvetrsek · 2020-10-26T05:13:12Z

Thank you for your suggestion @glavdir, but this didn't work for me.

I'm looking at the Vue dev tools and the editor value (by getHTML()) looks like this after pressing the spacebar:
"abc "
and after presing another key:
"abcd"

hisem · 2020-11-18T16:46:52Z

Hi @obsessen,

I was having the exact same problem, and found #168 which helped me solve the problem.

You can pass the following option to the Editor constructor:

new Editor({
[...]
    parseOptions: {
        preserveWhitespace: true
    }
[...]
});

Hope this helps!

rvetrsek · 2020-11-19T05:54:36Z

Hello @hisem,

yes, I saw that issue and tried the suggested fix but for me, the issue still persists.

I also tried the 'full' option for the preserveWhitespace with no improvement.

Edit:
I ended up fixing the issue with the combination of your suggestions with a little twist. So thank you @hisem and @glavdir.

To anyone who ends up here with the same problem here is the solution:

.ProseMirror * {
  white-space: pre-wrap;
  word-wrap: break-word;
}

and add this to the Editor options object for good measure (the CSS should be enough by itself):

new Editor({
  ...
  parseOptions: 
      preserveWhitespace: 'full'
  }
  ...
});

Tilesto · 2021-03-24T11:31:33Z

Hello @hisem,

yes, I saw that issue and tried the suggested fix but for me, the issue still persists.

I also tried the 'full' option for the preserveWhitespace with no improvement.

Edit:
I ended up fixing the issue with the combination of your suggestions with a little twist. So thank you @hisem and @glavdir.

To anyone who ends up here with the same problem here is the solution:
.ProseMirror * {
  white-space: pre-wrap;
  word-wrap: break-word;
}
and add this to the Editor options object for good measure (the CSS should be enough by itself):
new Editor({
  ...
  parseOptions: 
      preserveWhitespace: 'full'
  }
  ...
});

preserveWhitespace: 'full' - really works for me! But "true" - not working.
Thanks a lot!

bsor-dev · 2022-03-28T12:26:51Z

I'm using react tiptap latest version as of now. All solutions above not working for me

react
  const edtor = useEditor({
    content,
    extensions,
    editable,
    parseOptions: {
      preserveWhitespace: 'full',
    },
    onUpdate: async ({ editor }) => {
      setEditorHtmlContent(editor.getHTML())
    },
  })
  
  useEffect(() => {
    console.log(projectDescription)
    if (!edtor?.isDestroyed) {
       edtor?.commands.setContent(projectDescription, false)
    }
  }, [projectDescription])


css
.ProseMirror * {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

gillisig · 2022-07-12T22:30:19Z

The problem with this solution is that when the text is right-aligned It's not sitting flush agains the right border. I also don't think the CSS justifies this bug being present. When "white-space" is anything but "pre-wrap" it simply doesn't work to add a space at the end of the line.

JahnoelRondon · 2023-06-27T00:07:33Z

React solution using tiptaps content options

Yeah no this is the actual solution when setting content. You just have to use the options parameter and set the white spaces. they are false by default so you need to set it to true however if you want all spaces to pass then "full" is the better bet.

   editor.commands.setContent(cleanText, false, {preserveWhitespace: "full"});

szymekjanaczek · 2024-01-16T14:34:08Z

Unfortunately, I've found another problem.
Let's consider text like below:

<h1>My test header</h1>
<p>This is my test <em>paragraph <strong>with</strong></em> <strong>text</strong></p>

While trying to set it as content - even using code from @JahnoelRondon (thanks!), TipTap shows it in this way:

It looks like TipTap trims spaces anyway.

krokhale · 2024-02-18T17:08:40Z

This worked for me:

editor.commands.setContent(cleanText, false, {preserveWhitespace: "full"});

Also, it seems like one can add a line break using shift + enter.

nsch0e · 2024-03-27T08:11:07Z

@szymekjanaczek I recently also had the same problem and I just updated all tiptap related packages to the most recent version (2.2.4) and for me the spaces between tags now stay.

szymekjanaczek · 2024-03-27T08:26:09Z

@nsch0e, yep - it was fixed in #4792, and now works correctly ;). But thanks anyway!

…ioning in Tiptap editor Related to: ueberdosis/tiptap#873, ueberdosis/tiptap#2216

miketalley · 2024-04-23T20:15:43Z

I'm still seeing this issue in Firefox (125.0.2 (64-bit)) using @tiptap v2.3.0.

    "@tiptap/extension-floating-menu": "^2.3.0",
    "@tiptap/extension-table": "^2.3.0",
    "@tiptap/extension-table-cell": "^2.3.0",
    "@tiptap/extension-table-header": "^2.3.0",
    "@tiptap/extension-table-row": "^2.3.0",
    "@tiptap/extension-underline": "^2.3.0",
    "@tiptap/pm": "^2.3.0",
    "@tiptap/starter-kit": "^2.3.0",
    "@tiptap/vue-3": "^2.3.0",

poplevente · 2024-04-25T15:51:52Z

same for me. i have the same issue and the proposed fixed don't work anymore. Anyone else having the same? i think the bug needs to be reopened. any other solution that we could try? (using the react version)

jittarao · 2024-09-17T12:38:36Z

React solution using tiptaps content options

Yeah no this is the actual solution when setting content. You just have to use the options parameter and set the white spaces. they are false by default so you need to set it to true however if you want all spaces to pass then "full" is the better bet.
   editor.commands.setContent(cleanText, false, {preserveWhitespace: "full"});

This solution worked for me. Thanks!

GondarMD · 2024-10-22T09:10:18Z

This worked for me:

editor.commands.setContent(cleanText, false, {preserveWhitespace: "full"});

Also, it seems like one can add a line break using shift + enter.

This worked for me with a Vue 3 app using the "Gutentap" editor (https://github.com/johnpuddephatt/gutentap/tree/main), implemented with TipTap.

looping67 · 2024-11-12T08:43:40Z

I'm using react tiptap latest version as of now. All solutions above not working for me

react
  const edtor = useEditor({
    content,
    extensions,
    editable,
    parseOptions: {
      preserveWhitespace: 'full',
    },
    onUpdate: async ({ editor }) => {
      setEditorHtmlContent(editor.getHTML())
    },
  })
  
  useEffect(() => {
    console.log(projectDescription)
    if (!edtor?.isDestroyed) {
       edtor?.commands.setContent(projectDescription, false)
    }
  }, [projectDescription])


css
.ProseMirror * {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

preserveWhitespace: 'full', it works for me

chasemcdo · 2025-01-20T15:12:37Z

I am still running into this issue when re-loading the Editor content from saved text (from editor.getText). Specifically if my first action within the editor is anything other than adding a newline using return (on Mac), then all newlines get removed.

My flow is as follows:

user enter stuffs into editor
content is saved in its text format
saved text is loaded into the content
user can edit and resave content (this is where I am having issues)

Has anyone discovered a fix for this or do I need to be reloading fromgetHTML? I am using getText, since the text is used such that we don't need/want the HTML content within it. (ie if we reload from getHTML we will still be saving getText)

Screen.Recording.2025-01-20.at.10.10.19.AM.mov

chasemcdo · 2025-01-20T19:54:29Z

Found a solution for my above issue. If you're using more complex formatting you'll likely want to simply use the getHTML function as seems to be the recommended method, but for my purpose (and maybe anyone looking at this in the future), I chose to hydrate the text on load.

ie replacing newlines with linebreaks via something like content.replace(/\n/g, " ") with a similar process for hydrating mentions.

Note that this requires the hardbreak extension and the use of blockSeparator: "\n" when running getText or else you'll find that extra newlines get inserted when saving (another reason why using HTML directly would be preferable for most use cases).

Also note: this is in combination with preserveWhitespace: "full" whenever setting the content

rvetrsek added the Type: Bug The issue or pullrequest is related to a bug label Oct 23, 2020

rvetrsek closed this as completed Nov 19, 2020

do0ori added a commit to do0ori/web-editor-project that referenced this issue Apr 5, 2024

fix(editor): Resolve issues with whitespace trimming and cursor posit…

088854e

…ioning in Tiptap editor Related to: ueberdosis/tiptap#873, ueberdosis/tiptap#2216

do0ori mentioned this issue Apr 5, 2024

Tiptap Editor 오류 수정 및 노트 api와 hook 업데이트 do0ori/web-editor-project#4

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Space (whitespace) gets deleted after pressing any other key #873

Space (whitespace) gets deleted after pressing any other key #873

rvetrsek commented Oct 23, 2020

glavdir commented Oct 24, 2020

rvetrsek commented Oct 26, 2020

hisem commented Nov 18, 2020

rvetrsek commented Nov 19, 2020 •

edited

Loading

Tilesto commented Mar 24, 2021

bsor-dev commented Mar 28, 2022 •

edited

Loading

gillisig commented Jul 12, 2022

JahnoelRondon commented Jun 27, 2023 •

edited

Loading

szymekjanaczek commented Jan 16, 2024 •

edited

Loading

krokhale commented Feb 18, 2024

nsch0e commented Mar 27, 2024

szymekjanaczek commented Mar 27, 2024

miketalley commented Apr 23, 2024

poplevente commented Apr 25, 2024 •

edited

Loading

jittarao commented Sep 17, 2024

React solution using tiptaps content options

GondarMD commented Oct 22, 2024

looping67 commented Nov 12, 2024

chasemcdo commented Jan 20, 2025

chasemcdo commented Jan 20, 2025 •

edited

Loading

Space (whitespace) gets deleted after pressing any other key #873

Space (whitespace) gets deleted after pressing any other key #873

Comments

rvetrsek commented Oct 23, 2020

glavdir commented Oct 24, 2020

rvetrsek commented Oct 26, 2020

hisem commented Nov 18, 2020

rvetrsek commented Nov 19, 2020 • edited Loading

Tilesto commented Mar 24, 2021

bsor-dev commented Mar 28, 2022 • edited Loading

gillisig commented Jul 12, 2022

JahnoelRondon commented Jun 27, 2023 • edited Loading

React solution using tiptaps content options

szymekjanaczek commented Jan 16, 2024 • edited Loading

krokhale commented Feb 18, 2024

nsch0e commented Mar 27, 2024

szymekjanaczek commented Mar 27, 2024

miketalley commented Apr 23, 2024

poplevente commented Apr 25, 2024 • edited Loading

jittarao commented Sep 17, 2024

React solution using tiptaps content options

GondarMD commented Oct 22, 2024

looping67 commented Nov 12, 2024

chasemcdo commented Jan 20, 2025

chasemcdo commented Jan 20, 2025 • edited Loading

rvetrsek commented Nov 19, 2020 •

edited

Loading

bsor-dev commented Mar 28, 2022 •

edited

Loading

JahnoelRondon commented Jun 27, 2023 •

edited

Loading

szymekjanaczek commented Jan 16, 2024 •

edited

Loading

poplevente commented Apr 25, 2024 •

edited

Loading

chasemcdo commented Jan 20, 2025 •

edited

Loading