HTML/RTF pasting

mcwumbly · November 4, 2017, 11:59am

Just chiming in to say that we also see a lot of content authored (and discussion take place) in Google Docs that I’d prefer to happen on Discourse.

It’s an interesting, multi-faceted challenge.

notriddle · November 4, 2017, 3:47pm

Selecting your text and clicking the " button in the editor toolbar in Discourse works pretty nice for prefixing every line with a >

alehandrof · November 6, 2017, 1:39pm

Yes! It’s better than clipboard2markdown which doesn’t handle lists at all well.

I haven’t done enough research to know whether the issue is with clipboard2markdown’s implementation (which is over a year old) or with [domchristie/to-markdown), the JS Markdown converter which does the converting.

I don’t mind collaborative authorship on Google Docs. I actually encourage it over sending messages back-and-forth (in whatever medium). If you’re trying to work on a document with another human, there are only two games in town: Google Docs and Quip. I like Quip, but we can’t afford it. We’re a non-profit organization which works with dozens of volunteers and their $$$/user/month model prices us out. (I’ve told them that, and their response was ¯_(ツ)_/¯)

So we use Google Docs a lot, but its discussion features are very limited. I encourage discussions about documents in Discourse or email. This works reasonably well.

My original point was how to help people who draft documents in Google Docs (or MS Word or Evernote or whatever) out of a well-founded fear of typing for a long time in a text box. There’s no easy step between that kind of HTML/RTF document and Discourse. This is for single-author texts, not for collaborative editing. But a solution would help out both cases.

D’oh! So it is! That was not the most important part of the rant in my OP, but the advice is well taken. I’ve been telling people to use [quote]…[/quote] for quoting chunks, but it’s better to suggest the built-in solution (which also happens to be correct Markdown).

vinothkannans · December 4, 2017, 7:19pm

PR created for https://github.com/discourse/discourse/pull/5395

vinothkannans · December 5, 2017, 8:17pm

It is merged. Now when you paste a HTML content it will be converted to Markdown automatically . Also it can be a copied text from a Word document.

If you find any issues then reply here with details and support testing.

Let’s start testing.

Find solutions together

Crowdsource a self-service knowledge hub of common questions, interesting ideas, and great conversations.

Vote up your favorite ideas
Mark solutions as the official answer
Assign topics to yourself or others
Incoming emails create private ticket topics
Collaboratively edit with full revision history

Falco · December 5, 2017, 8:24pm

Copy and paste of our entire readme on Github:

Discourse Readme

Discourse is the 100% open source discussion platform built for the next decade of the Internet. Use it as a:

mailing list
discussion forum
long-form chat room
To learn more about the philosophy and goals of the project, visit discourse.org.

Screenshots

Browse lots more notable Discourse instances.

Development

If you’re brand new to Ruby and Rails, please see Discourse as Your First Rails App or our Discourse Vagrant Developer Guide, which includes a development environment in a virtual machine.
If you’re familiar with how Rails works and are comfortable setting up your own environment, use our Discourse Advanced Developer Guide.

Before you get started, ensure you have the following minimum versions: Ruby 2.3+, PostgreSQL 9.3+, Redis 2.6+. If you’re having trouble, please see our TROUBLESHOOTING GUIDE first!

Setting up Discourse

If you want to set up a Discourse forum for production use, see our Discourse Install Guide.

If you’re looking for business class hosting, see discourse.org/buy.

Requirements

Discourse is built for the next 10 years of the Internet, so our requirements are high:

Browsers
Tablets
Phones
Safari 6.1+
iPad 3+
iOS 8+
Google Chrome 32+
Android 4.3+
Android 4.3+
Internet Explorer 11+
Firefox 27+

Built With

Ruby on Rails — Our back end API is a Rails app. It responds to requests RESTfully in JSON.
Ember.js — Our front end is an Ember.js app that communicates with the Rails API.
PostgreSQL — Our main data store is in Postgres.
Redis — We use Redis as a cache and for transient data.
Plus lots of Ruby Gems, a complete list of which is at /master/Gemfile.

Contributing

Discourse is 100% free and open source. We encourage and support an active, healthy community that accepts contributions from the public – including you!

Before contributing to Discourse:

Please read the complete mission statements on discourse.org. Yes we actually believe this stuff; you should too.
Read and sign the Electronic Discourse Forums Contribution License Agreement.
Dig into CONTRIBUTING.MD, which covers submitting bugs, requesting new features, preparing your code for a pull request, etc.
Always strive to collaborate with mutual respect.
Not sure what to work on? We’ve got some ideas.
We look forward to seeing your pull requests!

Security

We take security very seriously at Discourse; all our code is 100% open source and peer reviewed. Please read our security guide for an overview of security measures in Discourse, or if you wish to report a security issue.

The Discourse Team

The original Discourse code contributors can be found in AUTHORS.MD. For a complete list of the many individuals that contributed to the design and implementation of Discourse, please refer to the official Discourse blog and GitHub’s list of contributors.

Copyright / License

Licensed under the GNU General Public License Version 2.0 (or later); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:

http://www.gnu.org/licenses/old-licenses/gpl-2.0.txt

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Discourse logo and “Discourse Forum” ®, Civilized Discourse Construction Kit, Inc.

Dedication

Discourse is built with love, Internet style.

Copy and paste of http://bettermotherfuckingwebsite.com

bettermotherfuckingwebsite

This is still a motherfucking website.

And it’s more fucking perfect than the last guy’s.

Seriously, it takes minimal fucking effort to improve this shit.

7 fucking declarations.

That’s how much CSS it took to turn that grotesque pile of shit into this easy-to-read masterpiece. It’s so fucking simple and it still has all the glory of the original perfect-ass website:

Shit’s still lightweight and loads fast
Still fits on all your shitty screens
Still looks the same in all your shitty browsers
The motherfucker’s still accessible to every asshole that visits your site
Shit’s still legible and gets your fucking point across

And guess what, motherfucker:

You never knew it, but it’s easy to improve readability on your site. Here’s how.

Let it breathe

Look at lines 1 and 2 of some shitty website you’re building. Assuming they’re not married they probably shouldn’t be humping. The defaults are trash – pick a minimum line-height: 1.4 for body copy. Headings should be tighter. If you can’t see that…piss off.

If your text hits the side of the browser, fuck off forever. You ever see a book like that? Yes? What a shitty book.

A little less contrast

Black on white? How often do you see that kind of contrast in real life? Tone it down a bit, asshole. I would’ve even made this site’s background a nice #EEEEEE if I wasn’t so focused on keeping declarations to a lean 7 fucking lines.

Size Matters

I know your partner says otherwise, but it’s true. Bump that body copy to render close to 16px or more. Smaller type works well for print, not the screen.

Line-width, motherfucker

Looking at an LCD screen is strainful enough. Don’t make me read a line of text that’s 200 fucking characters long. Keep it to a nice 60-80 and users might actually read more than one sentence of your worthless dribble.

Yes, this is also fucking satire, you fuck

I love what the creator of this site’s inspiration did. What I’m saying is that it’s so, so simple to make sites easier to read. Websites are broken by default, they are functional, high-performing, and accessible, but they’re also fucking ugly. You and all the other web designers out there need to make them not total shit.

“You’re a fucking moron if you use default browser styles.”

Eleanor Roosevelt

Epilogue

Inspired by the geniuses behind motherfuckingwebsite.com and txti.

This page—that isn’t a total fucking eyesore—was created by me with help from him.

OMG this is so cool!

https://i.imgur.com/iZcUNxH.gif(image larger than 4096KB)

notriddle · December 5, 2017, 8:37pm

Why isn’t this a table?

Falco · December 5, 2017, 8:41pm

I believe our html_to_markdown library predates markdown table support (markdown-it), so it doesn’t handle it yet.

Johani · December 5, 2017, 8:41pm

From Codepen render window

Name	Age	Weight (kg)	Profession
Carolina Biggleswade	23	65	Jockey
Harry Sparrowhead	34	89	Trainer
Marjorie Doors	32	76	Yard Manager
Earnest Piggington-Smithe	18	98	Groom

codinghorror · December 5, 2017, 10:14pm

This is really really nice, an excellent improvement, @vinothkannans great work

alehandrof · December 5, 2017, 10:23pm

Oh, wow, @vinothkannans – this is amazing work!

I got better results out of regular webpages than out of Google Docs, which would be a likely source of content for me. I don’t know what witchcraft they use over there.

Here is my test document: Testing Markdown paste - Google Docs

The following are converted:

headings
paragraphs
links
lists
images

The following are not converted:

inline formatting (italics, bold)
nested lists
tables

Feel free to mangle the document I linked to above to test other cases.

pfaffman · December 5, 2017, 10:59pm

No. Way. This seemed like a pipe dream not very long ago. Having a few more hands on deck is pretty great!

Nice work, @vinothkannans!

tobiaseigen · December 6, 2017, 12:14am

amazing. nice job. I can’t wait to share the good news with my community. what a gift.

schungx · December 6, 2017, 5:15am

There is a problem pasting from Word:

Document:

Pasted:

My Header

This is the table I’m talking about:

Header 1

Header 2

Bold

⓭

Italics

Yellow BG

Underline

RED

Here’s a list:

Potato

Plain Text in clipboard

My Header
This is the table I’m talking about:
Header 1	Header 2
Bold	⓭
Italics	Yellow BG
Underline	RED

Here’s a list:
1.	Potato
2.	Potato
3.	Potato

HTML in clipboard

<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
...... many lines deleted .......
</head>

<body lang=EN-US style='tab-interval:.5in'>
<!--StartFragment-->

<h1>My Header<o:p></o:p></h1>

<p class=MsoNormal>This is the table I’m talking about:<o:p></o:p></p>

<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width=147
 style='width:110.0pt;border-collapse:collapse;mso-yfti-tbllook:1184;
 mso-padding-alt:0in 5.4pt 0in 5.4pt'>
 <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;height:14.25pt'>
  <td width=73 nowrap valign=bottom style='width:55.0pt;border:solid black 1.0pt;
  mso-border-top-alt:1.0pt;mso-border-left-alt:.5pt;mso-border-bottom-alt:1.0pt;
  mso-border-right-alt:.5pt;mso-border-color-alt:black;mso-border-style-alt:
  solid;background:black;padding:0in 5.4pt 0in 5.4pt;height:14.25pt'>
  <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  normal'><b><span style='mso-ascii-font-family:Calibri;mso-fareast-font-family:
  "Times New Roman";mso-hansi-font-family:Calibri;mso-bidi-font-family:Calibri;
  color:white'>Header 1<o:p></o:p></span></b></p>
  </td>
  <td width=73 nowrap valign=bottom style='width:55.0pt;border:solid black 1.0pt;
  border-left:none;mso-border-left-alt:solid black .5pt;mso-border-top-alt:
  1.0pt;mso-border-left-alt:.5pt;mso-border-bottom-alt:1.0pt;mso-border-right-alt:
  .5pt;mso-border-color-alt:black;mso-border-style-alt:solid;background:black;
  padding:0in 5.4pt 0in 5.4pt;height:14.25pt'>
  <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  normal'><b><span style='mso-ascii-font-family:Calibri;mso-fareast-font-family:
  "Times New Roman";mso-hansi-font-family:Calibri;mso-bidi-font-family:Calibri;
  color:white'>Header 2<o:p></o:p></span></b></p>
  </td>
 </tr>
 <tr style='mso-yfti-irow:1;height:14.25pt'>
  <td width=73 nowrap valign=bottom style='width:55.0pt;border:solid black 1.0pt;
  border-top:none;mso-border-top-alt:solid black .5pt;mso-border-alt:solid black .5pt;
  background:#D9D9D9;padding:0in 5.4pt 0in 5.4pt;height:14.25pt'>
  <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  normal'><b><span style='mso-ascii-font-family:Calibri;mso-fareast-font-family:
  "Times New Roman";mso-hansi-font-family:Calibri;mso-bidi-font-family:Calibri;
  color:black'>Bold<o:p></o:p></span></b></p>
  </td>
  <td width=73 nowrap valign=bottom style='width:55.0pt;border-top:none;
  border-left:none;border-bottom:solid black 1.0pt;border-right:solid black 1.0pt;
  mso-border-top-alt:solid black .5pt;mso-border-left-alt:solid black .5pt;
  mso-border-alt:solid black .5pt;background:#D9D9D9;padding:0in 5.4pt 0in 5.4pt;
  height:14.25pt'>
  <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  normal'><span style='mso-ascii-font-family:Calibri;mso-fareast-font-family:
  "Times New Roman";mso-hansi-font-family:Calibri;mso-bidi-font-family:Calibri;
  color:black'>⓭<o:p></o:p></span></p>
  </td>
 </tr>
 <tr style='mso-yfti-irow:2;height:14.25pt'>
  <td width=73 nowrap valign=bottom style='width:55.0pt;border:solid black 1.0pt;
  border-top:none;mso-border-top-alt:solid black .5pt;mso-border-alt:solid black .5pt;
  padding:0in 5.4pt 0in 5.4pt;height:14.25pt'>
  <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  normal'><i><span style='mso-ascii-font-family:Calibri;mso-fareast-font-family:
  "Times New Roman";mso-hansi-font-family:Calibri;mso-bidi-font-family:Calibri;
  color:black'>Italics<o:p></o:p></span></i></p>
  </td>
  <td width=73 nowrap valign=bottom style='width:55.0pt;border-top:none;
  border-left:none;border-bottom:solid black 1.0pt;border-right:solid black 1.0pt;
  mso-border-top-alt:solid black .5pt;mso-border-left-alt:solid black .5pt;
  mso-border-alt:solid black .5pt;background:yellow;padding:0in 5.4pt 0in 5.4pt;
  height:14.25pt'>
  <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  normal'><span style='mso-ascii-font-family:Calibri;mso-fareast-font-family:
  "Times New Roman";mso-hansi-font-family:Calibri;mso-bidi-font-family:Calibri;
  color:black'>Yellow BG<o:p></o:p></span></p>
  </td>
 </tr>
 <tr style='mso-yfti-irow:3;mso-yfti-lastrow:yes;height:14.25pt'>
  <td width=73 nowrap valign=bottom style='width:55.0pt;border:solid black 1.0pt;
  border-top:none;mso-border-top-alt:solid black .5pt;mso-border-alt:solid black .5pt;
  mso-border-bottom-alt:solid black 1.0pt;background:#D9D9D9;padding:0in 5.4pt 0in 5.4pt;
  height:14.25pt'>
  <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  normal'><u><span style='mso-ascii-font-family:Calibri;mso-fareast-font-family:
  "Times New Roman";mso-hansi-font-family:Calibri;mso-bidi-font-family:Calibri;
  color:black'>Underline<o:p></o:p></span></u></p>
  </td>
  <td width=73 nowrap valign=bottom style='width:55.0pt;border-top:none;
  border-left:none;border-bottom:solid black 1.0pt;border-right:solid black 1.0pt;
  mso-border-top-alt:solid black .5pt;mso-border-left-alt:solid black .5pt;
  mso-border-alt:solid black .5pt;mso-border-bottom-alt:solid black 1.0pt;
  background:#D9D9D9;padding:0in 5.4pt 0in 5.4pt;height:14.25pt'>
  <p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
  normal'><span style='mso-ascii-font-family:Calibri;mso-fareast-font-family:
  "Times New Roman";mso-hansi-font-family:Calibri;mso-bidi-font-family:Calibri;
  color:red'>RED<o:p></o:p></span></p>
  </td>
 </tr>
</table>

<p class=MsoNormal><o:p>&nbsp;</o:p></p>

<p class=MsoNormal><b style='mso-bidi-font-weight:normal'><i style='mso-bidi-font-style:
normal'>Here’s a list:<o:p></o:p></i></b></p>

<p class=MsoListParagraphCxSpFirst style='text-indent:-.25in;mso-list:l0 level1 lfo1'><![if !supportLists]><span
style='mso-fareast-font-family:Calibri;mso-fareast-theme-font:minor-latin;
mso-bidi-font-family:Calibri;mso-bidi-theme-font:minor-latin'><span
style='mso-list:Ignore'>1.<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span></span><![endif]>Potato<o:p></o:p></p>

<p class=MsoListParagraphCxSpMiddle style='text-indent:-.25in;mso-list:l0 level1 lfo1'><![if !supportLists]><span
style='mso-fareast-font-family:Calibri;mso-fareast-theme-font:minor-latin;
mso-bidi-font-family:Calibri;mso-bidi-theme-font:minor-latin'><span
style='mso-list:Ignore'>2.<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span></span><![endif]>Potato<o:p></o:p></p>

<p class=MsoListParagraphCxSpLast style='text-indent:-.25in;mso-list:l0 level1 lfo1'><![if !supportLists]><span
style='mso-fareast-font-family:Calibri;mso-fareast-theme-font:minor-latin;
mso-bidi-font-family:Calibri;mso-bidi-theme-font:minor-latin'><span
style='mso-list:Ignore'>3.<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span></span><![endif]>Potato<o:p></o:p></p>

<p class=MsoNormal><o:p>&nbsp;</o:p></p>

<!--EndFragment-->
</body>

</html>

So it doesn’t seem to be working because Microsoft Word doesn’t convert bullet/numbered lists to <ol> or <ul> tags.

codinghorror · December 6, 2017, 5:56am

How is this in scope in any form? Colors, etc, are not Markdown features. If you want that, screenshot and paste an image.

schungx · December 6, 2017, 6:47am

Just threw them in for testing. I believe BOLD and italics are MarkDown.

There is a plugin that will give font colors with [color] codes. Not official, I know, but would be nice.

Also, I’m just pointing out to the fact that lists in Word doesn’t come through, which is definitely in scope. Not a fault of the system but Word (it doesn’t translate lists to the appropriate HTML tags), but still needs handling just because it is Office, you know.

EDIT: And the table embedded in Word is not converted correctly also. But this is already addressed:

codinghorror · December 6, 2017, 7:41am

Yeah, I can repro – a list in Word doesn’t come through as a list, neither bulleted nor numbered.

Paragraph

1.      This

2.      Is a

3.      Numbered list

Paragraph

-         This

-         Is a

-         Bulleted list

Paragraph

Would be good to preserve lists from Word pastes, I can agree with that @vinothkannans – the issue is the hidden tab character that Word is inserting here:

vinothkannans · December 6, 2017, 7:47am

Okay I will look at these issues

schungx · December 6, 2017, 7:57am

How did you get the plain text to paste?

When I paste, I get this:

This is a list

1.      
Potato

2.      
Potato

3.      
Potato

because it is using the HTML version instead of the plain-text version, and Word’s HTML version converts lists to <p> tags.

Pasting the plain-text version in the clipboard will get this:

This is a list

Potato
Potato
Potato

which works fine even with the tab characters.

user_checker · December 6, 2017, 8:16am

Test 1 (select 3 paragraph and delete 1 + 3 in reply):

This is a list 1. Potato 2. Potato 3. Potato

Test 2 (select only text in code):

This is a list 1. Potato 2. Potato 3. Potato