Skip to content

Commit

Permalink
Merge pull request #6 from aem/inline-styles
Browse files Browse the repository at this point in the history 
Add support for underlines
  • Loading branch information
@aem
aem authored Jun 28, 2016
2 parents 77e68cb + bd055cb commit df43679
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 33 deletions.
3 changes: 2 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@ This project was developed for use in a client-side project. To use in a Node en

### Exported API
```js
export default docsSoap(html: string) -> string;
export {
docsSoap(html: string) -> string,
parseHTML(html: string) -> HTMLElement
}
};
```

### Testing
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "docs-soap",
"version": "0.1.1",
"version": "0.1.2",
"description": "A utility for cleaning Google Docs clipboard content into valid HTML",
"author": "aem <amarkon895@gmail.com>",
"keywords": [
Expand Down
71 changes: 43 additions & 28 deletions src/docsSoap.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
const parseHTML = require('./parseHTML');

const DOCS_BOLD_WEIGHT = '700';
const ITALIC_STYLE = 'italic';
const styles = {
BOLD: '700',
ITALIC: 'italic',
UNDERLINE: 'underline'
};

const elements = {
BOLD: 'strong',
ITALIC: 'i',
UNDERLINE: 'u'
};

const wrapNodeAnchor = (node, href) => {
const anchor = document.createElement('a');
Expand All @@ -10,16 +19,10 @@ const wrapNodeAnchor = (node, href) => {
return anchor;
};

const wrapNodeItalic = node => {
const italic = document.createElement('i');
italic.appendChild(node.cloneNode(true));
return italic;
};

const wrapNodeStrong = node => {
const strong = document.createElement('strong');
strong.appendChild(node.cloneNode(true));
return strong;
const wrapNodeInline = (node, style) => {
const el = document.createElement(style);
el.appendChild(node.cloneNode(true));
return el;
};

const applyBlockStyles = dirty => {
Expand All @@ -28,18 +31,24 @@ const applyBlockStyles = dirty => {
if (node.childNodes[0] && node.childNodes[0].nodeName === 'A') {
newNode = wrapNodeAnchor(newNode.cloneNode(true), node.childNodes[0].href);
const inner = node.childNodes[0].childNodes[0];
if (inner && inner.style && inner.style.fontWeight === DOCS_BOLD_WEIGHT) {
newNode = wrapNodeStrong(newNode);
if (inner && inner.style && inner.style.fontWeight === styles.BOLD) {
newNode = wrapNodeInline(newNode, elements.BOLD);
}
if (inner && inner.style && inner.style.fontStyle === ITALIC_STYLE) {
newNode = wrapNodeItalic(newNode);
if (inner && inner.style && inner.style.fontStyle === styles.ITALIC) {
newNode = wrapNodeInline(newNode, elements.ITALIC);
}
if (inner && inner.style && inner.style.textDecoration === styles.UNDERLINE) {
newNode = wrapNodeInline(newNode, elements.UNDERLINE);
}
}
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontWeight === styles.BOLD) {
newNode = wrapNodeInline(newNode, elements.BOLD);
}
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontWeight === DOCS_BOLD_WEIGHT) {
newNode = wrapNodeStrong(newNode);
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontStyle === styles.ITALIC) {
newNode = wrapNodeInline(newNode, elements.ITALIC);
}
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontStyle === ITALIC_STYLE) {
newNode = wrapNodeItalic(newNode);
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.textDecoration === styles.UNDERLINE) {
newNode = wrapNodeInline(newNode, elements.UNDERLINE);
}
return newNode;
};
Expand All @@ -49,18 +58,24 @@ const applyInlineStyles = dirty => {
let newNode = document.createTextNode(node.textContent);
if (node.nodeName === 'A') {
newNode = wrapNodeAnchor(newNode, node.href);
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontWeight === DOCS_BOLD_WEIGHT) {
newNode = wrapNodeStrong(newNode);
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontWeight === styles.BOLD) {
newNode = wrapNodeInline(newNode, elements.BOLD);
}
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontStyle === ITALIC_STYLE) {
newNode = wrapNodeItalic(newNode);
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontStyle === styles.ITALIC) {
newNode = wrapNodeInline(newNode, elements.ITALIC);
}
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.textDecoration === styles.UNDERLINE) {
newNode = wrapNodeInline(newNode, elements.UNDERLINE);
}
}
if (node.style && node.style.fontWeight === styles.BOLD) {
newNode = wrapNodeInline(newNode, elements.BOLD);
}
if (node.style && node.style.fontWeight === DOCS_BOLD_WEIGHT) {
newNode = wrapNodeStrong(newNode);
if (node.style && node.style.fontStyle === styles.ITALIC) {
newNode = wrapNodeInline(newNode, elements.ITALIC);
}
if (node.style && node.style.fontStyle === ITALIC_STYLE) {
newNode = wrapNodeItalic(newNode);
if (node.style && node.style.textDecoration === styles.UNDERLINE) {
newNode = wrapNodeInline(newNode, elements.UNDERLINE);
}
return newNode;
};
Expand Down
4 changes: 3 additions & 1 deletion test/docsSoapSpec.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use es6';

import documents from './fixtures/documents';
import docsSoap from '../src/index';
import docsSoap from '../dist/index';
import expect from 'expect';
import jsdom from 'mocha-jsdom';
import parseHTML from '../src/parseHTML';
Expand All @@ -13,9 +13,11 @@ describe('Google Docs Converter', () => {
const rawContents = parseHTML(documents.inlineStyles);
expect(rawContents.querySelectorAll('strong').length).toBe(0);
expect(rawContents.querySelectorAll('i').length).toBe(0);
expect(rawContents.querySelectorAll('u').length).toBe(0);
const doc = parseHTML(docsSoap(documents.inlineStyles));
expect(doc.querySelectorAll('strong').length).toBe(1);
expect(doc.querySelectorAll('i').length).toBe(1);
expect(doc.querySelectorAll('u').length).toBe(1);
});

it('converts links from google docs properly', () => {
Expand Down
4 changes: 2 additions & 2 deletions test/fixtures/documents.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"inlineStyles": "<body><b style='font-weight:normal;' id='docs-internal-guid-496f1ac9-ff87-40ea-8a1f-c41463c67fb7'><p dir='ltr' style='line-height:1.38;margin-top:0pt;margin-bottom:0pt;'><span style='font-size:14.666666666666666px;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;'>Some bold text</span></p><span style='font-size:14.666666666666666px;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;'>Some italicized text</span></b></body>",
"links": "<body><b style='font-weight:normal;' id='docs-internal-guid-839dd5dd-30a0-81b2-a59c-6b97288cf0ee'><p dir='ltr' style='line-height:1.38;margin-top:0pt;margin-bottom:0pt;'><a href='https://www.example.com' style='text-decoration:none;'><span style='font-size:14.666666666666666px;font-family:Arial;color:#1155cc;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;'>this is a link</span></a></p><p dir='ltr' style='line-height:1.38;margin-top:0pt;margin-bottom:0pt;'><a href='https://www.example.com' style='text-decoration:none;'><span style='font-size:14.666666666666666px;font-family:Arial;color:#1155cc;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;'>this is a bold link</span></a></p><p dir='ltr' style='line-height:1.38;margin-top:0pt;margin-bottom:0pt;'><a href='https://www.example.com' style='text-decoration:none;'><span style='font-size:14.666666666666666px;font-family:Arial;color:#1155cc;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;'>this is an italicized link</span></a></p><a href='https://www.example.com' style='text-decoration:none;'><span style='font-size:14.666666666666666px;font-family:Arial;color:#1155cc;background-color:transparent;font-weight:700;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;'>this is a bold, italicized link</span></a></b></body>"
"inlineStyles": "<b style='font-weight:normal;' id='docs-internal-guid-8947de85-9825-af91-ff3b-70358a99c571'><p dir='ltr' style='line-height:1.38;margin-top:0pt;margin-bottom:0pt;'><span style='font-size:14.666666666666666px;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;'>Some bold text</span></p><p dir='ltr' style='line-height:1.38;margin-top:0pt;margin-bottom:0pt;'><span style='font-size:14.666666666666666px;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;'>Some italicized text</span></p><span style='font-size:14.666666666666666px;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;'>Some underlined text</span></b>",
"links": "<b style='font-weight:normal;' id='docs-internal-guid-839dd5dd-30a0-81b2-a59c-6b97288cf0ee'><p dir='ltr' style='line-height:1.38;margin-top:0pt;margin-bottom:0pt;'><a href='https://www.example.com' style='text-decoration:none;'><span style='font-size:14.666666666666666px;font-family:Arial;color:#1155cc;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;'>this is a link</span></a></p><p dir='ltr' style='line-height:1.38;margin-top:0pt;margin-bottom:0pt;'><a href='https://www.example.com' style='text-decoration:none;'><span style='font-size:14.666666666666666px;font-family:Arial;color:#1155cc;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;'>this is a bold link</span></a></p><p dir='ltr' style='line-height:1.38;margin-top:0pt;margin-bottom:0pt;'><a href='https://www.example.com' style='text-decoration:none;'><span style='font-size:14.666666666666666px;font-family:Arial;color:#1155cc;background-color:transparent;font-weight:400;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;'>this is an italicized link</span></a></p><a href='https://www.example.com' style='text-decoration:none;'><span style='font-size:14.666666666666666px;font-family:Arial;color:#1155cc;background-color:transparent;font-weight:700;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;'>this is a bold, italicized link</span></a></b>"
}

0 comments on commit df43679

Please sign in to comment.