StackExchange / StackExchange/Stacks-Editor

Cannot use a `|` character in table header

Open
#229 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug commonmark
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\|\|Pipes Maybe 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 shows I|Like||Pipes and then I|Like|Pipes and 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

  1. Try to create a table where one of the headers has a | in it. Example:
| Column1 | I\|Like\|Pipes |
| ------- | -------------- |
| tables  | r fun          |
  1. Switch to preview mode to ensure the escapes worked as I'd expect and see I|Like|Pipes in the preview.
  2. 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
editor-table-pipe-bug

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.