Bug: When a piece of text is configured with both a line-through and an underline, pressing enter between the texts will not be wrapped

[jserTang]

In Android phone, when a piece of text is configured with both a line-through and an underline, pressing enter between the texts will not be wrapped.

There are no errors in the browser console.

This works fine on the pc side of the browser.

Device: Android Chrome

packages: react@17.0.2, tiptap@2.2.4,

DOM Tree:

[marijnh]

That 'DOM tree' link shows nothing. Can you tell me how your line-through and underline marks (assuming they are marks) are defined? And which virtual keyboard you are using?

[jserTang]

That 'DOM tree' link shows nothing. Can you tell me how your line-through and underline marks (assuming they are marks) are defined? And which virtual keyboard you are using?

Thank you for your reply. line-through and underline is implemented using "s" tags and "u" tags. I reuploaded the picture about "DOM Tree", It has a clear dom structure. The virtual keyboard comes with the phone. I tried Samsung and Huawei and both had the problem. This works fine on IOS.

[marijnh]

Are you loading a keymap that binds enter to an actual ProseMirror command, or are you relying on the native behavior? With the code below, I cannot observe the issue — I tried with the stock Android keyboard and with GBoard. I don't have the Samsung or Huawei keyboards.

import { EditorState } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { Schema, DOMParser } from "prosemirror-model";
import { schema } from "prosemirror-schema-basic";
import { exampleSetup } from "prosemirror-example-setup";

const mySchema = new Schema({
  nodes: schema.spec.nodes,
  marks: schema.spec.marks.append({
    strikethrough: {
      parseDOM: [{tag: "s"}],
      toDOM() { return ["s", 0] }
    },
    underline: {
      parseDOM: [{tag: "u"}],
      toDOM() { return ["u", 0] }
    }
  }),
});

let content = document.createElement("div")
content.innerHTML = `<p><s><u>One two three</u></s></p>`

new EditorView(document.body, {
  state: EditorState.create({
    doc: DOMParser.fromSchema(mySchema).parse(content),
    plugins: exampleSetup({schema: mySchema})
  })
})

[jserTang]

Are you loading a keymap that binds enter to an actual ProseMirror command, or are you relying on the native behavior? With the code below, I cannot observe the issue — I tried with the stock Android keyboard and with GBoard. I don't have the Samsung or Huawei keyboards.

import { EditorState } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { Schema, DOMParser } from "prosemirror-model";
import { schema } from "prosemirror-schema-basic";
import { exampleSetup } from "prosemirror-example-setup";

const mySchema = new Schema({
  nodes: schema.spec.nodes,
  marks: schema.spec.marks.append({
    strikethrough: {
      parseDOM: [{tag: "s"}],
      toDOM() { return ["s", 0] }
    },
    underline: {
      parseDOM: [{tag: "u"}],
      toDOM() { return ["u", 0] }
    }
  }),
});

let content = document.createElement("div")
content.innerHTML = `<p><s><u>One two three</u></s></p>`

new EditorView(document.body, {
  state: EditorState.create({
    doc: DOMParser.fromSchema(mySchema).parse(content),
    plugins: exampleSetup({schema: mySchema})
  })
})

It relying on the native behavior. I seem to have located the problem because I have set the css style 'display: inline-flex' on the s tag and the text will not be allowed to wrap when there are any other tags inside the s tag (e.g. the u tag). If the s tag is just plain text, that's fine. This looks like a browser bug. Oddly enough, this is only happens on Android.

[marijnh]

Yeah, you don't want to set flex display on editable content. Browsers handle that very poorly. Also definitely bind some command to Enter (and Backspace and Delete, at least) if you want reasonable editor behavior.