Prosemirror: Space is eaten by entering next character on Firefox.

Created on 27 May 2017 · 9Comments · Source: ProseMirror/prosemirror

A simple application similar to the 'Getting started' application has spaces being eaten in Firefox.

When typing these characters 'a', ' ', the result is 'a '. Typing in another 'b' gives 'ab'. The space has gone.

This happens with ProseMirror 0.21.0 with Firefox 51. It works fine in Chrome.

var EditorState = require("prosemirror-state").EditorState
var EditorView = require("prosemirror-view").EditorView
var Schema = require("prosemirror-model").Schema

var nodes = {
  doc: {
    content: "paragraph"
  },
  paragraph: {
    content: "inline<_>*",
    parseDOM: [{tag: "p"}],
    toDOM: function toDOM() { return ["p", 0] }
  },
  text: {
    group: "inline"
  },
}

var schema = new Schema({nodes: nodes, marks: {}})
var view = new EditorView(document.body, {
  state: EditorState.create({schema: schema}),
})

<!doctype html>
<meta charset=utf8>
<link rel=stylesheet
  href="path/to/node_modules/prosemirror-view/style/prosemirror.css">
<style>.ProseMirror { background: silver }</style>
<body>
  <script src="main_bundle.js"></script>
</body>

Source

vandenoever

Most helpful comment

Right, the editor depends on whitespace being set to pre-wrap. I'm going to go ahead and consider that a requirement.

marijnh on 6 Jul 2017

👍3 🎉1

All 9 comments

Another observation from Firefox: typing 'a ' followed by backspace removes two characters 'a' and ' '.

vandenoever on 27 May 2017

@vandenoever did you make any headway towards solving this / getting a workaround?

I can see the same phenomenon in our app which means it is pretty much useless for Firefox users right now. I can not find the reason for the issue atm, though.

frederik on 5 Jul 2017

A solution/workaround is to include prosemirror.css.

https://discuss.prosemirror.net/t/firefox-space-insertion-behavior-during-typing/810

vandenoever on 5 Jul 2017

Right, the editor depends on whitespace being set to pre-wrap. I'm going to go ahead and consider that a requirement.

marijnh on 6 Jul 2017

👍3 🎉1

Hi! Any workaround for this to be reopened?

Our textbox whitespace style are using pre-line by default, so by using prosemirror.css it override the textbox original style and it breaks the output because it's using pre-wrap.

Is the bug possible to be fixed on the ProseMirror side to support pre-line on the editing as well for firefox? Much appreciated.

chenxeed on 12 Sep 2018

Is the bug possible to be fixed on the ProseMirror side to support pre-line on the editing

During editing, you really want to be able to see multiple spaces. That is exactly what this issue is about—that editor behavior is awful when whitespace is collapsed. So no, that's not something that I'm interested in supporting.

marijnh on 12 Sep 2018

Hey @marijnh thanks for the response.

The reason why I'm asking for pre-line is due to some unexpected behavior we get when we use pre-wrap, such as:

Align right in pre-wrap doesn't giving the expected outcome, as in pre-wrap it will preserve the white-space when the text breaks based on the container width.

There's some spaces on the right alignment, while supposedly there's no space at all
Align justify is not working in firefox and safari

This screenshot are showcasing our text that's using pre-line, then when we want to edit it, it become pre-wrap and the justify style is gone.

Due to these regression, it's very hard for us to consider using pre-wrap as our text base styles.

chenxeed on 10 Oct 2018

I wasn't aware some browsers are unable to justify and right-align pre-wrap text. That's ... bad.

pre-line wouldn't help at all, though—we're using pre-wrap for the whitespace collapsing, not for preserving newlines. So there's nothing pre-line provides that white-space: normal doesn't also provide.

I don't really have another good solution to the problem of multiple spaces being collapsed. I don't think it's appropriate for the space bar to insert non-breaking spaces in some situations—which seems to be a common approach.

marijnh on 11 Oct 2018

👍2

(Opened https://github.com/ProseMirror/prosemirror/issues/857)

marijnh on 11 Oct 2018

👍2

Was this page helpful?

0 / 5 - 0 ratings