Adding editor support for tables

Implementation
1

I love markdown, but something that makes me uncomfortable using markdown is bummer about having to write any table, I would have to start row by row and column by column. Another problem I notice is that if you have a lot of content, writing line by line and column by column becomes more and more boring and difficult. Try teaching how to use Markdown to some close friends and they noticed a difficulty in the syntax of rows and columns. I’m not saying row and column syntax is ugly and pointless. The central question would be how to make this syntax easy for people who don’t know Markdown and also for people who even know Markdown but have difficulties.

1024×606 86 KB

Now that we’ve mentioned the problems, let’s list some possible solutions:

  1. We don’t need to change the syntax of Markdown, we can for example have keyboard shortcuts built into Markdown to insert rows and columns easily. An example of this are programs like Vim.
  2. We can have a real-time and runtime engine in Markdown to create tables quickly and dynamically.
  3. As well, we might have a tooltips mechanism for that or even a context menu mechanism.

Why make this easier? Why improve this Markdown implementation?

  1. Ease the use of creating tables by built-in hotkeys in markdown
  2. Bringing the user who knows and has contact with excel and google spreadsheets closer to the correct use of markdown tables
  3. Most applications that use markdown have their own implementation to generate a table. The idea is to avoid this kind of differentiated implementation for a real and more concrete implementation of markdown through the use of tooltip, keyboard shortcuts.
  4. You don’t need to create a rendering engine to view the table in 'markdown. It would be better if the engine were realtime and runtime.
2

how to make this implementation?

  1. Markdown offers the possibility to click and insert the table[ row, column] automatically via built-in hotkeys. Example:


  1. Markdown provides a tooltip mechanism for inserting row and column. Example:


  1. Markdown provides a context menu mechanism for inserting rows and columns. Example:

757×500 52.3 KB


Resolutions for each case.

  1. It was requested that Markdown offers the possibility to click and insert the table [row, column] automatically via built-in hotkeys and we gave an example. On top of that, here are keyboard shortcuts:
Shortcut Keys Description
Space New column
Enter New row
Tab Space row only
Tab Tab Space row and column
Ctrl+k Space column

  1. Markdown was asked to provide a tooltip mechanism for inserting rows and columns and we gave an example. A possible implementation would be

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="" data-original-title="Insert Row">Insert row</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="" data-original-title="Insert column">Insert row</button>

my references

3

Hi. What you are describing are features for a Markdown editor, not Markdown itself. There exist Markdown editors that make table creation and modification easy much as you describe. For example, Typora, Mark Text and Zettlr. If you search for “Markdown editor” you’ll find plenty more.

Markdown itself is just a plain text format for writing structured documents – which means that everything it represents must be describable and editable using plain text. So any support for tables will always be via a plain text syntax, which will always support editing using a generic plain text editor, which of course will not be like using a word processor or spreadsheet program. But unlike say, Excel, you have the option of editing in plain text, or using a fancy editor that does things such as you describe.

If none of the many Markdown editors meet your needs, you might propose your ideas to them. This forum is devoted solely to the Markdown format, specifically the CommonMark specification of it, so proposing editor ideas here won’t do much good.

2 Likes
4

My idea was to do something like this:


document.onkeyup = function(e) {
  if(e.ctrlKey && e.which == 77){
    console.log("Ctrl + M = new column");
    console.log(parseMarkdown(text))
  }
  else if(e.ctrlKey && e.which == 89){
    console.log("Ctrl + Y = new row ");
    console.log(parseMarkdown(text))
  }
};

const text = `
# Hello World
**This is a bold text**
`

function parseMarkdown(markdownText) {
	const htmlText = markdownText
		.replace(/^### (.*$)/gim, '<h3>$1</h3>')
		.replace(/^## (.*$)/gim, '<h2>$1</h2>')
		.replace(/^# (.*$)/gim, '<h1>$1</h1>')
		.replace(/^\> (.*$)/gim, '<blockquote>$1</blockquote>')
		.replace(/\*\*(.*)\*\*/gim, '<b>$1</b>')
		.replace(/\*(.*)\*/gim, '<i>$1</i>')
		.replace(/!\[(.*?)\]\((.*?)\)/gim, "<img alt='$1' src='$2' />")
		.replace(/\[(.*?)\]\((.*?)\)/gim, "<a href='$2'>$1</a>")
		.replace(/\n$/gim, '<br />')

	return htmlText.trim()
}
  • Ctrl + M: new collumn
  • Ctrl + Y: new row
5

Could markdown not have a parser with hotkeys?

6

@anon60592718, It doesn’t seem like you understood what I wrote. Again, you are describing editor functionality. It can’t and won’t be part of a syntax specification, and as such does not belong on this forum. As I pointed out your idea should be pitched elsewhere.

1 Like
7

I understand, just a question what do you think of my idea?

8

In truth, there is nothing novel about your idea, and as I said before it’s already a feature of some (many? most?) Markdown editors that support tables. Try Typora, which I mentioned before. It does WYSIWYG editing, which is what I presume you mean by some of your language (which honestly, is hard to understand, so I am guessing).