StackExchange / StackExchange/Stacks-Editor
Cannot use a `|` character in table header
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 437
- Forks
- 61
- Avg merge
- 16h 2m
- Merged PRs (30d)
- 8
Description
Describe the bug
The stacks-editor overwrites/parses markdown when switching between preview and markdown views which is not allowing me to put a | character into a header. Some variations that I've tried:
- Add
\to escape the pipes. the editor strips out my escapes. - Use the HTML character code
|. This also gets parsed out and translated to just | which loses the escape - Combine the above 2 approaches -
I\|Like\|\|PipesMaybe we can escape the character code and escape the escapes! Toggling between markdown and preview modes progressively modifies the markdown source until the table is broken as in, it renders a proper table but showsI|Like||Pipesand thenI|Like|Pipesand then broken table. - Try editing in the preview mode instead of the markdown. So build the table and then add the pipes in from the preview mode. Also doesn't work.
To Reproduce
- Try to create a table where one of the headers has a | in it. Example:
| Column1 | I\|Like\|Pipes |
| ------- | -------------- |
| tables | r fun |
- Switch to preview mode to ensure the escapes worked as I'd expect and see
I|Like|Pipesin the preview. - Either post or switch back to markdown view and see that the table no longer renders correctly.
Expected behavior
I should be able to put a | character into a table header if I'd like either by escaping them or using |. I'd expect toggling between view modes not to produce different results.
Screenshots

Desktop (please complete the following information):
- OS: [e.g. iOS] Windows
- Browser [e.g. chrome, safari] chrome
- Version [e.g. 22] 107.0.5304.63
Smartphone (please complete the following information):
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
Additional context
- The old editor supported both escaping and
|. - The loss of content between switching views seems related to https://github.com/StackExchange/Stacks-Editor/issues/151
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue in the editor by creating the provided table and switching between markdown and preview views. Compare the markdown source after each toggle; done means escaped pipe characters or the provided HTML entity remain intact and the table continues to render correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100