toggleMark will also toggle the whitespaces before except Firefox

[Stardusten]

In browser (Firefox), everything is fine:

But in Tauri, something strange happened, the whitespaces before will also be toggled to code:

[Stardusten]

I just tried Electron, and has the same problem.

[marijnh]

What, exactly, are you doing in that video? Pressing a keyboard shortcut to toggle code mark after pressing the space? Does this reproduce in Chrome?

[Stardusten]

I first type aaa<SPACE>, and then press Mod-<BACKTICK> (I bind Mod-<BACKTICK> to toggleMark(pmSchema.marks.code)).

I can reproduce this issue in Electron 28.1 with following code:

<script setup lang="ts">
import "prosemirror-example-setup/style/style.css"
import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
import {Schema} from "prosemirror-model"
import {schema} from "prosemirror-schema-basic"
import {addListNodes} from "prosemirror-schema-list"
import {exampleSetup} from "prosemirror-example-setup"
import {onMounted} from "vue";

const mySchema = new Schema({
  nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
  marks: schema.spec.marks
})

onMounted(() => {
  new EditorView(document.querySelector("#editor"), {
    state: EditorState.create({
      schema: mySchema,
      plugins: exampleSetup({schema: mySchema})
    })
  })
})
</script>

<template>
  <div id="editor"></div>
</template>

[Stardusten]

Does this reproduce in Chrome?

No, I tried the editor on ProseMirror's official website in Chrome, and everything seems fine. I will do some test to clarify this next.

[Stardusten]

I can reproduce this issue in Chrome Version 120.0.6099.71. I create a minimal reproduction repository for this: https://github.com/Stardusten/pm-test

Here are the core codes:

<script setup lang="ts">
import {EditorState} from "prosemirror-state";
import {EditorView} from "prosemirror-view";
import {Schema} from "prosemirror-model";
import {schema} from "prosemirror-schema-basic";
import {addListNodes} from "prosemirror-schema-list";
import {exampleSetup} from "prosemirror-example-setup";
import {onMounted} from "vue";

const mySchema = new Schema({
  nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
  marks: schema.spec.marks
})

onMounted(() => {
  new EditorView(document.querySelector("#editor"), {
    state: EditorState.create({
      schema: mySchema,
      plugins: exampleSetup({schema: mySchema})
    })
  })
})
</script>

<template>
  <div id="editor"></div>
</template>

[marijnh]

That repository (running npm run dev) gives me a weird mess of a page that isn't loading the ProseMirror style sheet. If I fix that, the problem goes away. So I think that's going to be your solution.

[Stardusten]

It works! Thanks a lot.