Obsidian Table Enhancer
Manipulate markdown tables without touching the source code in Obsidian.
TOC
Quick Demo
How to Install
Please Refer: How to install Obsidian Plugins
Key Features
-
You can open a table generator by clicking the
Create new table
command in a right-click menu, which allows you to swiftly create an empty table with the specified shape under current cursor. -
You can click a table cell to edit it directly, and the cell being edited will be highlighted. You can press
Enter
orEsc
or click anywhere outside the table to exit the edit mode. -
When editing a table cell, content in the table cell will be converted to original Markdown code, and it will be rendered when you exit the edit mode.
-
In the table cell, you can write anything except the format conflicting with Markdown, such as
|
. Try to add HTML\Tags\Img to it. -
Use
up
anddown
arrow keys to move between cells. Andtab
key can be used to move between cells, whileshift + tab
can be used to move between cells in the opposite direction. -
Use
left
andright
arrow keys to move between characters in the cell. And when your cursor is on the front of the table cell or the end of the table cell, you can useleft
andright
arrow keys to move between cells. -
Right-click on any table cell, and you will see a panel of buttons at the top of the pop-out menu. Try hovering your mouse over a button, and you will see a tooltip that tells you what the button does.
FAQ
Implementation Notes
The implementation of this plugin is actually quite simple. Just intercept any click event, when any click on table cell is intercepted, then set the cell "contenteditable", allowing people to edit the cell in wyswyg way. When any click is intercepted elsewhere (or other events such as esc being pressed), persist all the editing cells (set "content editable").
Q: How do we know which cell in which table is editing by a intercepted click event? And how do we persist a changed table element to the editor?
A: When we click a table cell, we can use evt.targetNode
to get the clicked cell. And we can also get it's parent table element. Using EditorView.posAtDom(tableEl)
provided by CM6, we can get the start line number of a table element. This allows us to build a mapping between table elements and their markdown source code: using editor.getLine()
, we can get the markdown source code of the table, then do some parse and replace, we can calculate the markdown source code after the changes.