Add `table-input` feature #3598

cheap-glitch · 2020-09-26T18:06:39Z

Thanks for contributing! 🍄

LINKED ISSUES: Closes Improve <table> input in the comment field #2875
TEST URLS:

SCREENSHOT:

Managed to get this done in just under 80 lines, don't know how it could be reduced but it's probably possible. A few notes/questions:

I couldn't find a "table" icon in the octokit, so I used the next best thing (although it's pretty close and with some slight modifications it could make a passable icon).
You can't get rid of the table header or the parser won't recognize the table. I chose to add the header on top of whatever size the user selected. Thoughts?
The cells have whitespace in them, it makes the table more visually appealing when it's empty but could prove annoying during edition?
I didn't use observeElement (I got started by copying and hacking collapsible-content-button which doesn't use it either). Does it even makes sense to use it here?

source/features/table-input.tsx

source/features/table-input.css

source/features/table-input.tsx

Co-authored-by: Federico <me@fregante.com>

cheap-glitch · 2020-09-27T11:29:42Z

Applied most suggestions from @fregante and @sindresorhus
Rewrote the CSS to use Grid (getting Flexbox to make a perfect grid is a pita) but removed duplicated constraints
Tables are now closed to prevent successive tables from "swallowing" each other
Slightly improved the UI

source/features/table-input.tsx

source/helpers/smart-block-wrap.ts

source/features/table-input.tsx

source/helpers/smart-block-wrap.ts

source/features/table-input.tsx

Co-authored-by: Sindre Sorhus <sindresorhus@gmail.com>

fregante · 2020-09-27T18:58:33Z

You can customize the SVG directly and inline it instead of importing it. Just pass it through SVGO if you edit it with Illustrator. The plus can indeed be change to look like a table

source/features/table-input.tsx

source/features/table-input.css

Co-authored-by: Federico <me@fregante.com>

cheap-glitch · 2020-09-29T12:36:17Z

Uploading a GIF for the feature demo

fregante

Merci!

Co-authored-by: Federico <me@fregante.com> Co-authored-by: Sindre Sorhus <sindresorhus@gmail.com>

yakov116 · 2020-10-07T04:20:00Z

source/features/table-input.tsx

+
+function init(): void {
+	delegate(document, '.rgh-table-input-cell', 'click', addTable);
+	delegate(document, '.rgh-table-input-cell', 'mouseenter', highlightSquares, {capture: true});


This line causes

Uncaught TypeError: event.target.closest is not a function at HTMLDocument.listenerFn (refined-github.js:1164) listenerFn @ refined-github.js:1164

on every mouse enter

Tested in latest Firefox on Arch Linux, didn't see any errors.
Edit: I see the error in Chromium, so it seems this is a browser-specific bug.

fregante/delegate-it#20

KaKi87 · 2023-03-08T15:47:02Z

Hello,
Why HTML instead of Markdown ?
Thanks

fregante · 2023-03-08T16:31:09Z

#2875 (comment)

KaKi87 · 2023-03-08T17:45:23Z

How about letting the user choose, then ?
Thanks

fregante · 2023-03-16T06:35:15Z

How about letting the user choose, then ?

No options allowed:

https://github.com/refined-github/refined-github/wiki/%22Can-you-add-this-feature%3F%22#3-it-doesnt-require-options

Also:

Discourage commenting on old, closed, or super-active threads #5934

Good news, though

Markdown tables are now available natively on GitHub: https://github.com/orgs/community/discussions/40299

table-input will stay here however as it's vastly superior in every way (except keyboard accessibility):

Add input in editor to quickly insert GFM table

f0a8dd9

fregante requested changes Sep 26, 2020

View reviewed changes

fregante reviewed Sep 26, 2020

View reviewed changes

source/features/table-input.tsx Outdated Show resolved Hide resolved

fregante added the enhancement label Sep 26, 2020

sindresorhus requested changes Sep 26, 2020

View reviewed changes

cheap-glitch and others added 15 commits September 27, 2020 11:27

Switch to HTML tables

0890197

Co-authored-by: Federico <me@fregante.com>

Simplify CSS

f731358

Co-authored-by: Federico <me@fregante.com>

Simplify highlightSquares()

5c83080

Co-authored-by: Federico <me@fregante.com>

Improve markup clarity

e36c62b

Co-authored-by: Federico <me@fregante.com>

Simplify grid markup generation

b88467a

Co-authored-by: Federico <me@fregante.com>

Improve CSS

a228eb0

Remove unnecessary code

e27a8b2

Fix TypeScript errors

12bed85

Fix class names

ee52be4

Allow grid buttons to close popup

dc3f5b8

Fix linter errors

7dbc9fe

Extract and use smartBlockWrap()

be3d5b7

Close HTML table to prevent multiple tables from "swallowing" each other

5e41ee7

Place cursor in the first cell after inserting table

07b509d

Improve feature description

b2842b0

cheap-glitch requested a review from fregante September 27, 2020 11:32

sindresorhus requested changes Sep 27, 2020

View reviewed changes

sindresorhus reviewed Sep 27, 2020

View reviewed changes

source/features/table-input.tsx Outdated Show resolved Hide resolved

cheap-glitch commented Sep 27, 2020

View reviewed changes

source/features/table-input.tsx Outdated Show resolved Hide resolved

cheap-glitch commented Sep 27, 2020

View reviewed changes

source/helpers/smart-block-wrap.ts Outdated Show resolved Hide resolved

cheap-glitch commented Sep 27, 2020

View reviewed changes

source/features/table-input.tsx Outdated Show resolved Hide resolved

cheap-glitch and others added 2 commits September 27, 2020 14:45

Apply suggestions from code review

8ba459d

Co-authored-by: Sindre Sorhus <sindresorhus@gmail.com>

Fix build errors

d2df57b

This comment has been minimized.

Sign in to view

Rename CSS class to be more consistent

ac2b749

cheap-glitch and others added 4 commits September 27, 2020 23:15

Replace octicon with inline SVG

0b34c2f

Simplify typing

370f424

Reduce CSS

c54d1e1

Make table creation more readable (shorter lines)

d770127

fregante requested changes Sep 28, 2020

View reviewed changes

fregante and others added 4 commits September 27, 2020 19:59

Lint

e5edd66

Apply suggestions from code review

32bb4ba

Co-authored-by: Federico <me@fregante.com>

Improve custom SVG icon

9cdaf0c

Use mouseenter instead of mouseover

cfed0e5

Co-authored-by: Federico <me@fregante.com>

cheap-glitch requested review from fregante and sindresorhus September 29, 2020 12:20

Add feature to readme

a98e922

cheap-glitch mentioned this pull request Sep 29, 2020

Focus field after using collapsible-content-button #3600

Merged

fregante approved these changes Sep 29, 2020

View reviewed changes

Merge branch 'master' into add-table-input

1005f13

fregante changed the title ~~Add input in editor to quickly insert GFM table~~ Add table-input feature Oct 2, 2020

fregante merged commit cc96ac6 into refined-github:master Oct 2, 2020

cheap-glitch deleted the add-table-input branch October 7, 2020 07:14

kidonng pushed a commit to kidonng/refined-github that referenced this pull request Oct 7, 2020

Add table-input feature (refined-github#3598)

6e431e5

Co-authored-by: Federico <me@fregante.com> Co-authored-by: Sindre Sorhus <sindresorhus@gmail.com>

yakov116 reviewed Oct 7, 2020

View reviewed changes

yakov116 mentioned this pull request Oct 7, 2020

Meta: Validate feature descriptions and functionality #3621

Merged

refined-github locked and limited conversation to collaborators Mar 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `table-input` feature #3598

Add `table-input` feature #3598

cheap-glitch commented Sep 26, 2020 •

edited

Loading

cheap-glitch commented Sep 27, 2020 •

edited

Loading

This comment has been minimized.

fregante commented Sep 27, 2020 •

edited

Loading

cheap-glitch commented Sep 29, 2020

fregante left a comment

yakov116 Oct 7, 2020

cheap-glitch Oct 7, 2020 •

edited

Loading

fregante Oct 7, 2020

KaKi87 commented Mar 8, 2023

fregante commented Mar 8, 2023

KaKi87 commented Mar 8, 2023

fregante commented Mar 16, 2023 •

edited

Loading

Add table-input feature #3598

Add table-input feature #3598

Conversation

cheap-glitch commented Sep 26, 2020 • edited Loading

cheap-glitch commented Sep 27, 2020 • edited Loading

This comment has been minimized.

fregante commented Sep 27, 2020 • edited Loading

cheap-glitch commented Sep 29, 2020

fregante left a comment

Choose a reason for hiding this comment

yakov116 Oct 7, 2020

Choose a reason for hiding this comment

cheap-glitch Oct 7, 2020 • edited Loading

Choose a reason for hiding this comment

fregante Oct 7, 2020

Choose a reason for hiding this comment

KaKi87 commented Mar 8, 2023

fregante commented Mar 8, 2023

KaKi87 commented Mar 8, 2023

fregante commented Mar 16, 2023 • edited Loading

Good news, though

Add `table-input` feature #3598

Add `table-input` feature #3598

cheap-glitch commented Sep 26, 2020 •

edited

Loading

cheap-glitch commented Sep 27, 2020 •

edited

Loading

fregante commented Sep 27, 2020 •

edited

Loading

cheap-glitch Oct 7, 2020 •

edited

Loading

fregante commented Mar 16, 2023 •

edited

Loading