Skip to content

Commit 4dfee64

Browse files
aemaem
authored
support all inline styles (#7)
* support all inline styles * eof newline
1 parent df43679 commit 4dfee64

File tree

5 files changed

+78
-28
lines changed

5 files changed

+78
-28
lines changed

‎package.json‎

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

‎src/constants.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export const styles = {
2+
BOLD: '700',
3+
ITALIC: 'italic',
4+
UNDERLINE: 'underline',
5+
STRIKETHROUGH: 'line-through',
6+
SUPERSCRIPT: 'super',
7+
SUBSCRIPT: 'sub'
8+
};
9+
10+
export const elements = {
11+
ANCHOR: 'a',
12+
BOLD: 'strong',
13+
ITALIC: 'em',
14+
UNDERLINE: 'u',
15+
STRIKETHROUGH: 'del',
16+
SUPERSCRIPT: 'sup',
17+
SUBSCRIPT: 'sub'
18+
};

‎src/docsSoap.js‎

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,8 @@
1-
const parseHTML = require('./parseHTML');
2-
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-
};
1+
import { elements, styles } from './constants';
2+
import parseHTML from './parseHTML';
143

154
const wrapNodeAnchor = (node, href) => {
16-
const anchor = document.createElement('a');
5+
const anchor = document.createElement(elements.ANCHOR);
176
anchor.href = href;
187
anchor.appendChild(node.cloneNode(true));
198
return anchor;
@@ -40,6 +29,15 @@ const applyBlockStyles = dirty => {
4029
if (inner && inner.style && inner.style.textDecoration === styles.UNDERLINE) {
4130
newNode = wrapNodeInline(newNode, elements.UNDERLINE);
4231
}
32+
if (inner && inner.style && inner.style.textDecoration === styles.STRIKETHROUGH) {
33+
newNode = wrapNodeInline(newNode, elements.STRIKETHROUGH);
34+
}
35+
if (inner && inner.style && inner.style.verticalAlign === styles.SUPERSCRIPT) {
36+
newNode = wrapNodeInline(newNode, elements.SUPERSCRIPT);
37+
}
38+
if (inner && inner.style && inner.style.verticalAlign === styles.SUBSCRIPT) {
39+
newNode = wrapNodeInline(newNode, elements.SUBSCRIPT);
40+
}
4341
}
4442
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.fontWeight === styles.BOLD) {
4543
newNode = wrapNodeInline(newNode, elements.BOLD);
@@ -50,6 +48,15 @@ const applyBlockStyles = dirty => {
5048
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.textDecoration === styles.UNDERLINE) {
5149
newNode = wrapNodeInline(newNode, elements.UNDERLINE);
5250
}
51+
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.textDecoration === styles.STRIKETHROUGH) {
52+
newNode = wrapNodeInline(newNode, elements.STRIKETHROUGH);
53+
}
54+
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.verticalAlign === styles.SUPERSCRIPT) {
55+
newNode = wrapNodeInline(newNode, elements.SUPERSCRIPT);
56+
}
57+
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.verticalAlign === styles.SUBSCRIPT) {
58+
newNode = wrapNodeInline(newNode, elements.SUBSCRIPT);
59+
}
5360
return newNode;
5461
};
5562

@@ -67,6 +74,15 @@ const applyInlineStyles = dirty => {
6774
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.textDecoration === styles.UNDERLINE) {
6875
newNode = wrapNodeInline(newNode, elements.UNDERLINE);
6976
}
77+
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.textDecoration === styles.STRIKETHROUGH) {
78+
newNode = wrapNodeInline(newNode, elements.STRIKETHROUGH);
79+
}
80+
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.verticalAlign === styles.SUPERSCRIPT) {
81+
newNode = wrapNodeInline(newNode, elements.SUPERSCRIPT);
82+
}
83+
if (node.childNodes[0] && node.childNodes[0].style && node.childNodes[0].style.verticalAlign === styles.SUBSCRIPT) {
84+
newNode = wrapNodeInline(newNode, elements.SUBSCRIPT);
85+
}
7086
}
7187
if (node.style && node.style.fontWeight === styles.BOLD) {
7288
newNode = wrapNodeInline(newNode, elements.BOLD);
@@ -77,6 +93,15 @@ const applyInlineStyles = dirty => {
7793
if (node.style && node.style.textDecoration === styles.UNDERLINE) {
7894
newNode = wrapNodeInline(newNode, elements.UNDERLINE);
7995
}
96+
if (node.style && node.style.textDecoration === styles.STRIKETHROUGH) {
97+
newNode = wrapNodeInline(newNode, elements.STRIKETHROUGH);
98+
}
99+
if (node.style && node.style.verticalAlign === styles.SUPERSCRIPT) {
100+
newNode = wrapNodeInline(newNode, elements.SUPERSCRIPT);
101+
}
102+
if (node.style && node.style.verticalAlign === styles.SUBSCRIPT) {
103+
newNode = wrapNodeInline(newNode, elements.SUBSCRIPT);
104+
}
80105
return newNode;
81106
};
82107

‎test/docsSoapSpec.js‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
'use es6';
22

3+
import { elements } from '../src/constants'
34
import documents from './fixtures/documents';
45
import docsSoap from '../dist/index';
56
import expect from 'expect';
@@ -11,23 +12,29 @@ describe('Google Docs Converter', () => {
1112

1213
it('converts inline styles from google docs properly', () => {
1314
const rawContents = parseHTML(documents.inlineStyles);
14-
expect(rawContents.querySelectorAll('strong').length).toBe(0);
15-
expect(rawContents.querySelectorAll('i').length).toBe(0);
16-
expect(rawContents.querySelectorAll('u').length).toBe(0);
15+
expect(rawContents.querySelectorAll(elements.BOLD).length).toBe(0);
16+
expect(rawContents.querySelectorAll(elements.ITALIC).length).toBe(0);
17+
expect(rawContents.querySelectorAll(elements.UNDERLINE).length).toBe(0);
18+
expect(rawContents.querySelectorAll(elements.STRIKETHROUGH).length).toBe(0);
19+
expect(rawContents.querySelectorAll(elements.SUPERSCRIPT).length).toBe(0);
20+
expect(rawContents.querySelectorAll(elements.SUBSCRIPT).length).toBe(0);
1721
const doc = parseHTML(docsSoap(documents.inlineStyles));
18-
expect(doc.querySelectorAll('strong').length).toBe(1);
19-
expect(doc.querySelectorAll('i').length).toBe(1);
20-
expect(doc.querySelectorAll('u').length).toBe(1);
22+
expect(doc.querySelectorAll(elements.BOLD).length).toBe(1);
23+
expect(doc.querySelectorAll(elements.ITALIC).length).toBe(1);
24+
expect(doc.querySelectorAll(elements.UNDERLINE).length).toBe(1);
25+
expect(doc.querySelectorAll(elements.STRIKETHROUGH).length).toBe(1);
26+
expect(doc.querySelectorAll(elements.SUPERSCRIPT).length).toBe(1);
27+
expect(doc.querySelectorAll(elements.SUBSCRIPT).length).toBe(1);
2128
});
2229

2330
it('converts links from google docs properly', () => {
2431
const rawContents = parseHTML(documents.links);
25-
expect(rawContents.querySelectorAll('strong').length).toBe(0);
26-
expect(rawContents.querySelectorAll('i').length).toBe(0);
27-
expect(rawContents.querySelectorAll('a').length).toBe(4);
32+
expect(rawContents.querySelectorAll(elements.BOLD).length).toBe(0);
33+
expect(rawContents.querySelectorAll(elements.ITALIC).length).toBe(0);
34+
expect(rawContents.querySelectorAll(elements.ANCHOR).length).toBe(4);
2835
const doc = parseHTML(docsSoap(documents.links));
29-
expect(doc.querySelectorAll('strong').length).toBe(2);
30-
expect(doc.querySelectorAll('i').length).toBe(2);
31-
expect(doc.querySelectorAll('a').length).toBe(4);
36+
expect(doc.querySelectorAll(elements.BOLD).length).toBe(2);
37+
expect(doc.querySelectorAll(elements.ITALIC).length).toBe(2);
38+
expect(doc.querySelectorAll(elements.ANCHOR).length).toBe(4);
3239
});
3340
});

‎test/fixtures/documents.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
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>",
2+
"inlineStyles": "<b style='font-weight:normal;' id='docs-internal-guid-8947de85-9847-a581-2846-773abcb0b8ff'><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><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:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap;'>Some underlined 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:normal;font-variant:normal;text-decoration:line-through;vertical-align:baseline;white-space:pre-wrap;'>Some strikethrough text</span></p><p dir='ltr' style='line-height:1.38;margin-top:0pt;margin-bottom:0pt;'><span style='font-size:8.799999999999999px;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:super;white-space:pre-wrap;'>Some superscript</span></p><span style='font-size:8.799999999999999px;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:sub;white-space:pre-wrap;'>Some subscript</span></b>",
33
"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)