Plugin: Markdown Table - Colorize

hieuthi · 23 October 2021 15:09

While I like taking notes using markdown, its table syntax is extremely messy. I create this plugin to improve the user experiment when dealing with table editing. It marks each column with different colors so you can know what column it belongs to. The colors can be customized with CSS, of course.

While I try my best to follow markdown-it logics, the markdown table parser is more messy than I expected so I will not surprise that there is some bugs that I didn't catch. Please use it with your own risks.

whitewall · 23 October 2021 15:13

Ohh! Wonderful. I had been waiting for someone to build this.

Thanks! I'll give it a try.

Will you add it to the repository?

whitewall · 23 October 2021 15:21

OK! So little setback. Here is the error report:

Summary

Error
The text editor encountered a fatal error and could not continue. The error might be due to a plugin, so please try to disable some of them and try again.

To report the error, please copy the entire content of this page and post it on Joplin forum or GitHub.

If the error persists you may try to restart in safe mode, which will temporarily disable all plugins.

Message
Cannot read property 'length' of undefined

Version info
Joplin for Desktop

Copyright © 2016-2021 Laurent Cozic
Joplin 2.4.9 (prod, win32)

Client ID: 55ce0b2fbc8e4c0c8c573a6923b41b59
Sync Version: 3
Profile Version: 39
Keychain Supported: Yes

Revision: bb44c4e
Plugins
[
{
"id": "joplin.plugin.note.tabs",
"name": "Note Tabs",
"enabled": true,
"version": "1.4.0"
},
{
"id": "joplin.plugin.benji.favorites",
"name": "Favorites",
"enabled": true,
"version": "1.3.0"
},
{
"id": "org.joplinapp.plugins.ToggleSidebars",
"name": "Note list and sidebar toggle buttons",
"enabled": true,
"version": "1.0.3"
},
{
"id": "io.github.jackgruber.backup",
"name": "Simple Backup",
"enabled": true,
"version": "1.0.3"
},
{
"id": "joplin.plugin.benji.persistentLayout",
"name": "Persistent Editor Layout",
"enabled": true,
"version": "2.2.0"
},
{
"id": "joplin-insert-date",
"name": "Insert Date",
"enabled": true,
"version": "1.0.1"
},
{
"id": "plugin.calebjohn.rich-markdown",
"name": "Rich Markdown",
"enabled": true,
"version": "0.7.3"
},
{
"id": "com.whatever.quick-links",
"name": "Quick Links",
"enabled": true,
"version": "1.2.2"
},
{
"id": "joplin.plugin.ambrt.fold-cm",
"name": "Folding in Code Mirror Editor",
"enabled": false,
"version": "2.0.1"
},
{
"id": "com.coderrsid.pasteSpecial",
"name": "Paste Special",
"enabled": true,
"version": "1.1.2"
},
{
"id": "com.shantanugoel.JoplinCMLineNumbersPlugin",
"name": "CodeMirror Line Numbers",
"enabled": true,
"version": "2.0.0"
},
{
"id": "net.rmusin.joplin-table-formatter",
"name": "Table Formatter Plugin",
"enabled": true,
"version": "1.2.1"
},
{
"id": "joplin.marcteyssier.linksmetadata",
"name": "Links Metadata",
"enabled": true,
"version": "1.0.0"
},
{
"id": "io.github.jackgruber.note-overview",
"name": "Note overview",
"enabled": true,
"version": "1.5.4"
},
{
"id": "com.andrejilderda.macOSTheme",
"name": "macOS theme",
"enabled": false,
"version": "1.2.6"
},
{
"id": "outline",
"name": "Outline",
"enabled": true,
"version": "1.2.7"
},
{
"id": "joplin.plugin.templates",
"name": "Templates",
"enabled": true,
"version": "2.2.0"
},
{
"id": "com.hieuthi.joplin.markdown-table-colorize",
"name": "Markdown Table: Colorize",
"enabled": true,
"version": "1.0.0"
}
]
Stack trace
TypeError: Cannot read property 'length' of undefined
at calcState (C:\Users\user.config\joplin-desktop\cache\com.hieuthi.joplin.markdown-table-colorize\mdTableColorize.js:51:50)
at C:\Users\user.config\joplin-desktop\cache\com.hieuthi.joplin.markdown-table-colorize\mdTableColorize.js:180:19
at runInOp (C:\Program Files\Joplin\resources\app.asar\node_modules\codemirror\lib\codemirror.js:3915:18)
at CodeMirror.operation (C:\Program Files\Joplin\resources\app.asar\node_modules\codemirror\lib\codemirror.js:8590:37)
at colorizeTable (C:\Users\user.config\joplin-desktop\cache\com.hieuthi.joplin.markdown-table-colorize\mdTableColorize.js:158:6)
at signal (C:\Program Files\Joplin\resources\app.asar\node_modules\codemirror\lib\codemirror.js:568:61)
at DisplayUpdate.finish (C:\Program Files\Joplin\resources\app.asar\node_modules\codemirror\lib\codemirror.js:4019:16)
at endOperation_finish (C:\Program Files\Joplin\resources\app.asar\node_modules\codemirror\lib\codemirror.js:3908:19)
at endOperations (C:\Program Files\Joplin\resources\app.asar\node_modules\codemirror\lib\codemirror.js:3807:9)
at C:\Program Files\Joplin\resources\app.asar\node_modules\codemirror\lib\codemirror.js:3790:7
Component stack

in ForwardRef(Editor) (created by ForwardRef(CodeMirror))
in div (created by ForwardRef(CodeMirror))
in div (created by ForwardRef(CodeMirror))
in div (created by ForwardRef(CodeMirror))
in ErrorBoundary (created by ForwardRef(CodeMirror))
in ForwardRef(CodeMirror) (created by NoteEditor)
in div (created by NoteEditor)
in div (created by NoteEditor)
in div (created by NoteEditor)
in NoteEditor (created by Connect(NoteEditor))
in Connect(NoteEditor) (created by ResizableLayout)
in div (created by styled.div)
in styled.div (created by ResizableLayout)
in div (created by ResizableLayout)
in div (created by ResizableLayout)
in div (created by ResizableLayout)
in ResizableLayout (created by MainScreenComponent)
in div (created by MainScreenComponent)
in MainScreenComponent (created by Connect(MainScreenComponent))
in Connect(MainScreenComponent) (created by NavigatorComponent)
in div (created by NavigatorComponent)
in NavigatorComponent (created by Connect(NavigatorComponent))
in Connect(NavigatorComponent) (created by RootComponent)
in ThemeProvider (created by RootComponent)
in StyleSheetManager (created by RootComponent)
in RootComponent (created by Connect(RootComponent))
in Connect(RootComponent)
in ErrorBoundary

Nacandev · 23 October 2021 15:44

I like the idea! Thanks you!
But one thing, can I just color the text not the background?

hieuthi · 24 October 2021 00:22

Thank for your report. I think I know what the problem is but not sure it will work in your machine or not. Can you try version 1.0.1 and report back if the problem still there?

Sure you can. I prepared a simple theme that not uses background color. You just need to copy the content in this file nobackground.css and paste it to your userchrome.css.

johano · 24 October 2021 01:18

Version 1.0.1 fixes the errors here.

Thanks for the good work

whitewall · 24 October 2021 02:29

Works now!

Not sure if you noticed this, @CalebJohn. I wonder if this functionality could be added to the Rich Markdown plugin. It's good also as a stand alone plugin too.

Thanks so much @hieuthi !

CalebJohn · 24 October 2021 06:52

I did notice this, and updated the rich markdown issue tracker accordingly :).

I won't be adding this functionality to the rich markdown plugin, but I'll probably add a link to the readme to suggest that people install this plugin for a nicer markdown table experience.

Nice work @hieuthi, this is a great addition to the Joplin plugin ecosystem.

hieuthi · 24 October 2021 08:29

Thank everyone. I made plugin mostly for my own uses, but I'm glad that people find it useful for themselves.

bogdahn-fr · 24 October 2021 10:58

Wow great, i will try it when i can !

Nacandev · 25 October 2021 08:48

@hieuthi Is it possiable to give the whole table a parant container?

hieuthi · 25 October 2021 09:12

Yeah, I also run into that question while developing this plugin. I assumed CodeMirror should already have something like that it place but turn out it is not, table text is just normal code text. So it is possible, but I don't think there is a recommended way to do it. It is better to keep the code simple and as less intrusive as possible so it will not interfere with other plugin. I may consider an update with some minor tweaks that allow more sophisticated theme-ing in future.

Nacandev · 25 October 2021 09:46

As you said, "markdown table syntax is messy." I definitely agree with that, but I have one other concern is too much color on the markdown editor is just like another kind of messy. So, in my situtation, I'm trying to figure out how can I reduce the use of unnecessary colors.

I'm happy to see you post this plugin, after a few trys I want to share 2 of my thoughts:

Keep the markdown table text color simple, I think user don't need it showing all the colors at the same time
Only light up the whole related column when user are typing on that column or hovering on that column

Overall, I think that would looks more clean. Would you have any similary solution?

hieuthi · 25 October 2021 09:55

That sounds like a good idea. It just looks to be a lot of work that I willing to take. That being said what you told seem to be achievable with some advanced CSS and the current version of the plugin. So maybe you can give it a try.

Nacandev · 25 October 2021 11:06

Ya, I'm still trying on it and I hope that's work

madpipeline · 2 November 2021 18:11

I've created a PR with a transparent background, so that I can keep the font the same as now, and the color is just hinting the column.

github.com/hieuthi/joplin-plugin-markdown-table-colorize

Create transparent_background.css

hieuthi:main ← madpipeline:patch-1

opened 06:10PM - 02 Nov 21 UTC

madpipeline

+43 -0

Added a transparent background theme that does not require changing the text col…or and is easier on the eyes. ![Screenshot_20211102_200821](https://user-images.githubusercontent.com/3527534/139921308-5c626c4e-981b-4f42-bb02-70e97acdc462.png) I've kept the original colors, though I had to change column 6, since transparent almost white... is not very visible. I'd also change the green (column 5) a bit, since it's very close to the grey of column 6.

Please give feedback.

hieuthi · 3 November 2021 00:11

Thanks @madpipeline for the nice theme. I don't accept PR for themes at the moment as future version will likely introduce new CSS classes and there are so many different ways to customize it to each person's preference.

So how about you share your css in this thread so people can use it when they are browsing through this thread.

hieuthi · 4 November 2021 14:56

Spend some times to refactor the source code and add some simple css classes for more customization. Also changed the default color to more subdue scheme and move more advanced customization to optional themes instead.

New CSS classes mark the first, the last, and the pipe characters. I can add more classes for even more dynamic interactions but that requires some actual coding which I don't think it is worth the trouble. Probably I will just focus on developing new plugins for now.

madpipeline · 11 November 2021 07:31

There is no point in sharing my theme since you already adopted that idea in the Colorize theme.

This is not very nice: to refuse a PR and then implement that change your self. You could have just said that you wanted to implement that idea in a different way, and I would be totally fine with it.

madpipeline · 11 November 2021 07:37

OK, it's not the Colorize theme. None of the themes in your themes/ matches the first screenshot in the README.md.

It's the default theme now. Which is great for the project, I love it.

Topic		Replies	Views
Tables - colour filling cells Features	2	54	5 October 2024
Plugin: Markdown Table Formatter Plugins	38	11072	11 February 2022
Plugin: Highlighter Plugins	9	5422	15 May 2021
Suggestion: Markdown Formatting Features	3	835	16 October 2020
Table cell color in joplin 2.11.11? Support	6	803	19 August 2023

Plugin: Markdown Table - Colorize

Related topics