[$100] Better format to input table and copy table from excel to forum

[jmgasper]

@atelomycterus - I'm assuming this is something that will need investigation and may not be possible. Let me know if we need to adjust anything or bump the payment here, thanks!

Issue

1. It is not possible to copy-paste tables from excel to the forum while maintaining the format.

Expectation:

Reality:

1. Also, it is difficult to add a new table with the option provided in the section:
   

Importance
Many a times in data science competition, one needs to share subtables and tables that will help a lot in enhancing the understanding and clarifying the doubts.

[jmgasper]

Challenge https://www.topcoder.com/challenges/a06b9b28-4ff1-4079-8b4e-2f6983c11ff1 has been created for this ticket.

This is an automated message for ghostar via Topcoder X

[jmgasper]

Challenge https://www.topcoder.com/challenges/a06b9b28-4ff1-4079-8b4e-2f6983c11ff1 has been assigned to obog.

This is an automated message for ghostar via Topcoder X

[atelomycterus]

@jmgasper Yes, it's possible with Clipboard API. Clipboard API provides the ability to respond to clipboard commands (cut, copy, and paste).

[jmgasper]

@atelomycterus - Ok, let's do it, thanks!

[atelomycterus]

@jmgasper Implemented. Please apply PR-topcoder-platform/forums-topcoder-editor-plugin#23. Thanks!

The algorithm for determining when to format as a table is very simple. This is done to allow the user to paste text into the editor.
Step 1. Split data using special characters.
Using standard \r=CR, \n=LF and Unicode special characters:
u2028 = line separator
u2029 = paragraph separator
u0085 = next line.
Step 2. if count of rows >= 2 and each row has the same count of column, count of column > 1. Data should be formatted as a table.

Testing

Please clear browser cache before testig.

Excel

Before changes:

With the PR:
Edit Mode:

View Mode:

Formatting tables (JFYI)

Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | text aligned | $1600 |
| col 2 is      | centered      |  $12 |
| col1 is |  text    | $1 |

Output:

We can also improve the formatting of the table. In view mode, data is displayed as html. CSS styles might be applied.

Copy-paste image feature (JFYI)

I've noticed a copy-paste image feature in EasyMDE. If user is allowed to upload a file then it generates an png image of a selected area/data.

Uploading a file is allowed:

Uploading a file isn't allowed:

[jmgasper]

Payment task has been updated: https://www.topcoder.com/challenges/a06b9b28-4ff1-4079-8b4e-2f6983c11ff1
Payments Complete
Winner: obog
Copilot: ghostar
Challenge a06b9b28-4ff1-4079-8b4e-2f6983c11ff1 has been paid and closed.

This is an automated message for ghostar via Topcoder X

[sdgun]

@atelomycterus I verified this after clearing browser cache, but I don't see the background colors and line formatting being copied from excel, and in Firefox even the table structure is not rendered.

Screencast.2021-04-22.mp4

[atelomycterus]

@jmgasper Please apply PR- topcoder-platform/forums-topcoder-editor-plugin#24. Thanks!

@sdgun Thanks for testing! Fixed the issue in Firefox. I've tested it with Opera/Chrome/Firefox. Let me know if you observe any issues.

I don't see the background colors and line formatting being copied from excel.

Not supported. When copying cells from Excel and other spreadsheet applications, this data is stored in your browser clipboard.
The destination (topcoder editor textarea ) is not capable of handling the xls format. So it's copied as plain text.
Pasting a table from Excel will keep the formatting in Word.

The official Markdown does not provide any special syntax for tables. We are using GFM Markdown (Github Flavored Markdown) . This table syntax is quite simple. No styles (background, border), etc.

|   |   |   |   |   |
|---|---|---|---|---|
|   |   |   |   |   |

[sdgun]

Verified in Firefox/Chrome/Edge in Dev.

https://vanilla.topcoder-dev.com/discussion/1639/welcome

[sdgun]

Verified in production.