mkromik

TipTap Collaboration Bug: Why Marks (Bold, Italic, Underline) Disappear When Two Users Type Together

A subtle but frustrating issue in real-time collaborative editors — and the clean fix that solves it.

---

If you've built a real-time collaborative editor with TipTap and Hocuspocus (or any y-prosemirror-based sync), you may have encountered this maddening bug:

User 2 clicks Bold (or Italic, or Underline, or any custom mark) in the toolbar, starts typing — and nothing comes out formatted.

mkromik

Script	Command	Description
Build	npm run build	Compiles TypeScript files to JavaScript
Publish Local	npm run publish-local	Builds and publishes nodes to local n8n installation

mkromik

{"name":"PHP Developer","snippets":"{\"snippets\":{\"romik.code-snippets\":\"{\\n\\t\\\"Echo print\\\": {\\n\\t\\t\\\"scope\\\": \\\"php\\\",\\n\\t\\t\\\"prefix\\\": \\\"ec\\\",\\n\\t\\t\\\"body\\\": [\\n\\t\\t\\t\\\"echo '<pre>';\\\",\\n\\t\\t\\t\\\"print_r($1);\\\",\\n\\t\\t\\t\\\"echo '</pre>';\\\",\\n\\t\\t\\t\\\"exit;\\\"\\n\\t\\t],\\n\\t\\t\\\"description\\\": \\\"\\\"\\n\\t},\\n\\t\\\"arrmap\\\": {\\n\\t\\t\\\"scope\\\": \\\"php\\\",\\n\\t\\t\\\"prefix\\\": \\\"arrmap\\\",\\n\\t\\t\\\"body\\\": [\\n\\t\\t\\t\\\"$$1 = array_map(function($$2){\\\",\\n\\t\\t\\t\\\"return $$2;\\\",\\n\\t\\t\\t\\\"}, $$1);\\\",\\n\\t\\t],\\n\\t\\t\\\"description\\\": \\\"\\\"\\n\\t},\\n\\t\\\"arrfilter\\\": {\\n\\t\\t\\\"scope\\\": \\\"php\\\",\\n\\t\\t\\\"prefix\\\": \\\"arrfilter\\\",\\n\\t\\t\\\"body\\\": [\\n\\t\\t\\t\\\"$$1 = array_filter($$1, function($$2){\\\",\\n\\t\\t\\t\\\"return $$2;\\\",\\n\\t\\t\\t\\\"});\\\",\\n\\t\\t],\\n\\t\\t\\\"description\\\": \\\"\\\"\\n\\t},\\n\\t\\\"dbdate\\\": {\\n\\t\\t\\\"scope\\\":

mkromik

{"name":"Frontend Development","settings":"{\"settings\":\"{\\n    \\\"workbench.startupEditor\\\": \\\"none\\\",\\n    \\\"diffEditor.ignoreTrimWhitespace\\\": false,\\n    \\\"security.workspace.trust.untrustedFiles\\\": \\\"open\\\"\\n}\"}","snippets":"{\"snippets\":{\"romik.code-snippets\":\"{\\n\\t\\\"Echo print\\\": {\\n\\t\\t\\\"scope\\\": \\\"php\\\",\\n\\t\\t\\\"prefix\\\": \\\"ec\\\",\\n\\t\\t\\\"body\\\": [\\n\\t\\t\\t\\\"echo '<pre>';\\\",\\n\\t\\t\\t\\\"print_r($1);\\\",\\n\\t\\t\\t\\\"echo '</pre>';\\\",\\n\\t\\t\\t\\\"exit;\\\"\\n\\t\\t],\\n\\t\\t\\\"description\\\": \\\"\\\"\\n\\t},\\n\\t\\\"arrmap\\\": {\\n\\t\\t\\\"scope\\\": \\\"php\\\",\\n\\t\\t\\\"prefix\\\": \\\"arrmap\\\",\\n\\t\\t\\\"body\\\": [\\n\\t\\t\\t\\\"$$1 = array_map(function($$2){\\\",\\n\\t\\t\\t\\\"return $$2;\\\",\\n\\t\\t\\t\\\"}, $$1);\\\",\\n\\t\\t],\\n\\t\\t\\\"description\\\": \\\"\\\"\\n\\t},\\n\\t\\\"arrfilter\\\": {\\n\\t\\t\\\"scope\\\": \\\"php\\\",\\n\\t\\t\\\"prefix\\\": \\\"arrfilter\\\",\\n\\t\\t\\\"body\\\":

mkromik

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}