aem/docs-soap

Library to clean up the clipboard contents generated by google docs

docs-soap's Issues

All block and inline styles should be supported

Currently the parser only supports bold, italics, links, and ordered lists. We should aim to support all styles to allow this to be used in more environments.

Support flow type checking

Dealing with HTMLElements and their APIs can be confusing, I'd like to add https://flowtype.org to this repo to clarify things and make development a little easier

Move to a stable 1.0.0 version marker

I didn't want to push this to 1.0.0 until we had support for all styles and were confident in implementation, but the build seems stable. If no issues come in by 15/8/2016 we'll stabilize the API.

Line Breaks Get Stripped

Provide a detailed description of the issue
<br> tags are removed and, I believe, replaced with <span> tags.

Steps to reproduce

1. Copy something like

There's

missing

breaks

from Google Docs
2. Run the HTML through docsSoap
3. Either read the HTML or insert it into a contenteditable

Expected behavior
Linebreaks are preserved

Actual behavior
<br> is not preserved

Code example or screenshot if applicable
Here's where I think brs are managed:
https://github.com/aem/docs-soap/blob/master/src/docsSoap.js#L109

@aem

Support nested lists and ordered lists

Currently this only supports unordered lists and all bullets will be flattened to a depth of 0. We should both support ordered lists and bullets shouldn't be flattened.

Package is ES6 in NPM.

Provide a detailed description of the issue

Code is compiled to ES6 in Npm package, but I noticed your webpack build doesn't do this. Not actually a problem, but it makes it a bit hard to install with certain webpack setups (Uglifying the package), in particular "create-react-app"

The fix is to add in package.json

"build-lib": "babel src --out-dir lib --plugins=transform-flow-strip-types",

becomes

"build-lib": "babel src --out-dir lib --plugins=transform-flow-strip-types" --presets=es2015,

Or you can add a .babelrc

and to install

npm install --save-dev babel-preset-es2015

and finally edit index.js to be ES5 compliant - ie. (fix the { docsSoap } shorthand to { docsSoap: docsSoap })

@aem - Thanks a bunch for your work mate :). Really helpful

Fix webpack "this seems to be a pre-built JavaScript file" error

Provide a detailed description of the issue
When requiring docs-soap in a Webpack build, the following error message appears:

./~/docs-soap/dist/index.js
Critical dependencies:
1:481-488 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/docs-soap/dist/index.js 1:481-488

Steps to reproduce

1. Use Webpack
2. Require docs-soap
3. :(

@afhole thanks for reporting this. It's concerning because it looks as though this only occurs on Browserify-built files, but any other bundler will not trigger the warning. Going to look into alternative solutions to figure out how to suppress this error. The good news is that other than the fact that it's annoying, it shouldn't have an impact on your project.

Pasting on Windows adds text `EndFragment`

Provide a detailed description of the issue

Whenever I use Chrome on Windows and I paste some simple text from google docs using docs-soap, I always get some extra text at the end EndFragment

Steps to reproduce

1. Copy text from Gdocs
2. Paste it into draft-js using docs-soap to handle the HTML
3. At least using Chrome on Windows, the text EndFragment is added to the pasted chunk

Expected behavior

No text should be added

Actual behavior

Text is added

Code example or screenshot if applicable

See this video I made https://drive.google.com/file/d/1TrBHr3ylyDz2nyExXgW3KzeTnQJT-jPe/view

@aem

Example doesn't seem to work

Steps to reproduce

Invoking the default docsSoap() function on Node 7 with jsdom and jsdom-global, with a string like <span style="font-weight:700">bold text</span><span style="font-style:italic">some italic text</span> appears to get returned as-is without transformation.

Expected behavior

I'd expect it to return <strong>some bold text</strong><i>some italic text</i> or <b>some bold text</b><i>some italic text</i>.

Code example or screenshot if applicable

Exact example from readme, at https://runkit.com/krinkle/5a383fead05daa0011f5ac4d.

require('jsdom');
require('jsdom-global')();
var docsSoap = require("docs-soap").default;

const html = '<body><b><span style="font-weight:700">bold text</span><span style="font-style:italic">some italic text</span></b></body>';
const clean = docsSoap(html);
console.log(clean);
// <body><b><span style="font-weight:700">bold text</span><span style="font-style:italic">some italic text</span></b></body>

More simplified, at https://runkit.com/embed/c1tdmaet1778

require('jsdom');
require('jsdom-global')();
var docsSoap = require("docs-soap").default;

const html = '<span style="font-weight:700">bold text</span><span style="font-style:italic">some italic text</span>';
const clean = docsSoap(html);
console.log(clean);
// <body><span style="font-weight:700">bold text</span><span style="font-style:italic">some italic text</span></body>

@aem I suspected this might be a Runkit or Node specific issue, but I experience the same on CodePen, in the browser. Paste at https://codepen.io/Krinkle/pen/vpLMaB

<script src="https://unpkg.com/[email protected]/dist/docs-soap.min.js"></script>

var docsSoap = window.docsSoap.default;
const html = '<body><b><span style="font-weight:700">bold text</span><span style="font-style:italic">some italic text</span></b></body>';
const clean = docsSoap(html);
console.log(clean);
// Expected: <body><strong>some bold text</strong><i>some italic text</i></body>
// Actual: <body><b><span style="font-weight:700">bold text</span><span style="font-style:italic">some italic text</span></b></body>