Skip to content

Commit df43679

Browse files
aemaem
authored
Merge pull request #6 from aem/inline-styles
Add support for underlines
2 parents 77e68cb + bd055cb commit df43679

File tree

5 files changed

+51
-33
lines changed

5 files changed

+51
-33
lines changed

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ This project was developed for use in a client-side project. To use in a Node en
55

66
### Exported API
77
```js
8+
export default docsSoap(html: string) -> string;
89
export {
910
docsSoap(html: string) -> string,
1011
parseHTML(html: string) -> HTMLElement
11-
}
12+
};
1213
```
1314

1415
### Testing

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "docs-soap",
3-
"version": "0.1.1",
3+
"version": "0.1.2",
44
"description": "A utility for cleaning Google Docs clipboard content into valid HTML",
55
"author": "aem <[email protected]>",
66
"keywords": [

‎src/docsSoap.js

+43-28
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
const parseHTML = require('./parseHTML');
22

3-
const DOCS_BOLD_WEIGHT = '700';
4-
const ITALIC_STYLE = 'italic';
3+
const styles = {
4+
BOLD: '700',
5+
ITALIC: 'italic',
6+
UNDERLINE: 'underline'
7+
};
8+
9+
const elements = {
10+
BOLD: 'strong',
11+
ITALIC: 'i',
12+
UNDERLINE: 'u'
13+
};
514

615
const wrapNodeAnchor = (node, href) => {
716
const anchor = document.createElement('a');
@@ -10,16 +19,10 @@ const wrapNodeAnchor = (node, href) => {
1019
return anchor;
1120
};
1221

13-
const wrapNodeItalic = node => {
14-
const italic = document.createElement('i');
15-
italic.appendChild(node.cloneNode(true));
16-
return italic;
17-
};
18-
19-
const wrapNodeStrong = node => {
20-
const strong = document.createElement('strong');
21-
strong.appendChild(node.cloneNode(true));
22-
return strong;
22+
const wrapNodeInline = (node, style) => {
23+
const el = document.createElement(style);
24+
el.appendChild(node.cloneNode(true));
25+
return el;
2326
};
2427

2528
const applyBlockStyles = dirty => {
@@ -28,18 +31,24 @@ const applyBlockStyles = dirty => {
2831
if (node.childNodes[0] && node.childNodes[0].nodeName === 'A') {
2932
newNode = wrapNodeAnchor(newNode.cloneNode(true), node.childNodes[0].href);
3033
const inner = node.childNodes[0].childNodes[0];
31-
if (inner && inner.style && inner.style.fontWeight === DOCS_BOLD_WEIGHT) {
32-
newNode = wrapNodeStrong(newNode);
34+
if (inner && inner.style && inner.style.fontWeight === styles.BOLD) {
35+
newNode = wrapNodeInline(newNode, elements.BOLD);
3336
}
34-
if (inner && inner.style && inner.style.fontStyle === ITALIC_STYLE) {
35-
newNode = wrapNodeItalic(newNode);
37+
if (inner && inner.style && inner.style.fontStyle === styles.ITALIC) {
38+
newNode = wrapNodeInline(newNode, elements.ITALIC);
3639
}
40+
if (inner && inner.style && inner.style.textDecoration === styles.UNDERLINE) {
41+
newNode = wrapNodeInline(newNode, elements.UNDERLINE);
42+
}
43+
}
44+
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontWeight === styles.BOLD) {
45+
newNode = wrapNodeInline(newNode, elements.BOLD);
3746
}
38-
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontWeight === DOCS_BOLD_WEIGHT) {
39-
newNode = wrapNodeStrong(newNode);
47+
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontStyle === styles.ITALIC) {
48+
newNode = wrapNodeInline(newNode, elements.ITALIC);
4049
}
41-
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontStyle === ITALIC_STYLE) {
42-
newNode = wrapNodeItalic(newNode);
50+
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.textDecoration === styles.UNDERLINE) {
51+
newNode = wrapNodeInline(newNode, elements.UNDERLINE);
4352
}
4453
return newNode;
4554
};
@@ -49,18 +58,24 @@ const applyInlineStyles = dirty => {
4958
let newNode = document.createTextNode(node.textContent);
5059
if (node.nodeName === 'A') {
5160
newNode = wrapNodeAnchor(newNode, node.href);
52-
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontWeight === DOCS_BOLD_WEIGHT) {
53-
newNode = wrapNodeStrong(newNode);
61+
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontWeight === styles.BOLD) {
62+
newNode = wrapNodeInline(newNode, elements.BOLD);
5463
}
55-
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontStyle === ITALIC_STYLE) {
56-
newNode = wrapNodeItalic(newNode);
64+
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontStyle === styles.ITALIC) {
65+
newNode = wrapNodeInline(newNode, elements.ITALIC);
5766
}
67+
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.textDecoration === styles.UNDERLINE) {
68+
newNode = wrapNodeInline(newNode, elements.UNDERLINE);
69+
}
70+
}
71+
if (node.style && node.style.fontWeight === styles.BOLD) {
72+
newNode = wrapNodeInline(newNode, elements.BOLD);
5873
}
59-
if (node.style && node.style.fontWeight === DOCS_BOLD_WEIGHT) {
60-
newNode = wrapNodeStrong(newNode);
74+
if (node.style && node.style.fontStyle === styles.ITALIC) {
75+
newNode = wrapNodeInline(newNode, elements.ITALIC);
6176
}
62-
if (node.style && node.style.fontStyle === ITALIC_STYLE) {
63-
newNode = wrapNodeItalic(newNode);
77+
if (node.style && node.style.textDecoration === styles.UNDERLINE) {
78+
newNode = wrapNodeInline(newNode, elements.UNDERLINE);
6479
}
6580
return newNode;
6681
};

‎test/docsSoapSpec.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use es6';
22

33
import documents from './fixtures/documents';
4-
import docsSoap from '../src/index';
4+
import docsSoap from '../dist/index';
55
import expect from 'expect';
66
import jsdom from 'mocha-jsdom';
77
import parseHTML from '../src/parseHTML';
@@ -13,9 +13,11 @@ describe('Google Docs Converter', () => {
1313
const rawContents = parseHTML(documents.inlineStyles);
1414
expect(rawContents.querySelectorAll('strong').length).toBe(0);
1515
expect(rawContents.querySelectorAll('i').length).toBe(0);
16+
expect(rawContents.querySelectorAll('u').length).toBe(0);
1617
const doc = parseHTML(docsSoap(documents.inlineStyles));
1718
expect(doc.querySelectorAll('strong').length).toBe(1);
1819
expect(doc.querySelectorAll('i').length).toBe(1);
20+
expect(doc.querySelectorAll('u').length).toBe(1);
1921
});
2022

2123
it('converts links from google docs properly', () => {

‎test/fixtures/documents.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"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>",
3-
"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>"
2+
"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>",
3+
"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>"
44
}

0 commit comments

Comments
 (0)