Text Wrap/Coloring on Markdown Tables in Editor Depends on `|`

Bug graveyard
, ,
1

There was a similar bug report marked resolved by v0.7. I am running v0.8.0

I experience this bug with custom.css (“Obsdn-Dark-Rmx” by _ph) and without custom.css (default style)

Steps to reproduce

  • Create a new note.
  • Create a two column table with NO trailing pipe | (e.g. "Header 1 | Header 2 ")
  • Finish the creation of the table (e.g. “-|- \n words | more words”)
  • Duplicate that table (with or without characters in between the two) then add a trailing pipe to the header (e.g. “Header 1 | Header 2 |”) or the header underline (e.g. “-|-|”)

Expected result

These two tables look the same in the editor and the preview, with | and - characters greyed out, the headers bolded, and all text wrapped.

Actual result

The table without a trailing | properly wraps, but the table is not formatted in the editor.

The table with a trailing | is formatted (greyed | and -, headers bold), but the text does not wrap.

Environment

  • Operating system: Windows 10 Pro 1909
  • Obsidian version: v0.8.0

Additional information

Table Bug
Table Bug2902×1370 299 KB

2

I can’t repro. Please, upload the actual markdown file somewhere.

3

I was able to reproduce with standard obsidian.css

Put this into the editor, and then add a | at the end of the title line.

Before:

This title row | does not have a trailing pipe
-|-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Sed scelerisque lacus at tempor tincidunt. Ut purus risus, malesuada in ante quis, bibendum congue velit

After, with addition of a pipe at the end of the title row (and removal of the word “not” so that it says it does have a trailing pipe):

This title row | does have a trailing pipe |
-|-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Sed scelerisque lacus at tempor tincidunt. Ut purus risus, malesuada in ante quis, bibendum congue velit

If you switch between the two, the editor changes how it does line wrapping and colour-coding of table elements (the pipes).

I am on v0.8.0 on macOS, so maybe this was squashed already in 0.8.1? But not listed in 0.8.1 notes.

1 Like
4

ok. thanks

5

Revisiting this, I’ve come to the conclusion that the ability to toggle wrapping on a table is a useful feature. Users may want to see all the text in their table (thus, wrapping) or make their table readable in plain text (thus, no wrapping).

To redress this as a feature, rather than a bug, there would be a few steps required:

  • Make the color adjustments consistent so that the table borders (- and |) are greyed out in either case
  • Clean up handling of unwrapped (off-screen) text. This would include:
    • Clean up visualization of line numbers when scrolling to the right (right now, they just overlap and make things tough to read - this may be a separate bug report)
    • Fix the end key functionality. Currently, the end key does not take you to the end of the line when text runs off-screen. Instead, it takes you to whatever text is on the edge of the window. (also may require a separate bug report)
  • Document the functionality in the Help vault

Example of line number overlap when scrolling, plus the cursor position after hitting the End key is not at the end of the line. Note that I have a custom CSS in this photo, but it happens with or without custom CSS.

image

6

Another update: The dynamics of this wrapping are actually a little more complex than I realized. The reason for this is partially due to me not understanding the standard table syntax for Markdown.

I’ve always made tables without outside borders, e.g.

Concept | Mounting Method | Orientation | Beams 
--------|-----------------|-------------|-------
1       | Bolt            | landscape   | strap 
2       | Bolt            | landscape   | span 
3       | Clamp           | landscape   | strap

As it turns out, the standard syntax includes outside borders, e.g.

| Concept | Mounting Method | Orientation | Beams  |
| --------|-----------------|-------------|------- |
| 1       | Bolt            | landscape   | strap  |
| 2       | Bolt            | landscape   | span   |
| 3       | Clamp           | landscape   | strap  |

Both of these result in a formatted table in the editor - greyed out | and -, no wrapping.

The editor display gets confused when the table has one, but not both, outside borders, e.g.

| Concept | Mounting Method | Orientation | Beams
| --------|-----------------|-------------|------
| 1       | Bolt            | landscape   | strap
| 2       | Bolt            | landscape   | span
| 3       | Clamp           | landscape   | strap

or

Concept | Mounting Method | Orientation | Beams  |
--------|-----------------|-------------|------- |
1       | Bolt            | landscape   | strap  |
2       | Bolt            | landscape   | span   |
3       | Clamp           | landscape   | strap  |

will still show up as a table in the preview, but the editor will treat it as plain text - wrapped, no greying on the | and - characters.

If you fuss with where the pipes are included, the editor will recognize the upper portion of the table (greyed and wrapped), but not the lower portion. For example,

| Concept | Mounting Method | Orientation | Beams  |
| --------|-----------------|-------------|------- |
| 1       | Bolt            | landscape   | strap  |
2       | Bolt            | landscape   | span   |
| 3       | Clamp           | landscape   | strap  |

Will recognize and format the first 3 rows (greyed and wrapped), but the lower two rows are not greyed or wrapped.

In all cases, the Preview still recognizes the entire block as a single table.

This means that on some level the Preview is adhering to a different standard than the Editor when it comes to tables.

This could potentially split into two separate issues:

  1. The option to wrap table contents in the editor
  2. Bringing the Editor and Preview onto the same level, either by:
    • Increasing stringency on the Preview, so it only acknowledges tables with outside borders (or neither outside border)
    • Decreasing stringency in the Editor, so it also recognizes tables with only the left or the right outside border.
1 Like
7

The line wrap breaks for tables in editor mode when in the first column an inline code is.
Minimum example:

a b
a aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

The aaas have to be long enough to be wrapped.