Skip to content

Commit f458ea0

Browse files
thedaviddiasthedaviddias
authored
feat: convert classes to data attributes (#12)
1 parent 5d6069f commit f458ea0

File tree

2 files changed

+30
-26
lines changed

2 files changed

+30
-26
lines changed

‎src/__tests__/utils/convert-blocks.test.ts‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,31 +16,31 @@ describe('Convert blocks', () => {
1616
it('should return the bold class', () => {
1717
const bold = filterCssClasses({ ...defaultAnnotations, bold: true })
1818

19-
expect(bold).toEqual('gs-bold')
19+
expect(bold).toEqual('data-notion-annotation="bold"')
2020
})
2121

2222
it('should return the italic class', () => {
2323
const bold = filterCssClasses({ ...defaultAnnotations, italic: true })
2424

25-
expect(bold).toEqual('gs-italic')
25+
expect(bold).toEqual('data-notion-annotation="italic"')
2626
})
2727

2828
it('should return the strikethrough class', () => {
2929
const bold = filterCssClasses({ ...defaultAnnotations, strikethrough: true })
3030

31-
expect(bold).toEqual('gs-strikethrough')
31+
expect(bold).toEqual('data-notion-annotation="strikethrough"')
3232
})
3333

3434
it('should return the underline class', () => {
3535
const bold = filterCssClasses({ ...defaultAnnotations, underline: true })
3636

37-
expect(bold).toEqual('gs-underline')
37+
expect(bold).toEqual('data-notion-annotation="underline"')
3838
})
3939

4040
it('should return the code class', () => {
4141
const bold = filterCssClasses({ ...defaultAnnotations, code: true })
4242

43-
expect(bold).toEqual('gs-code')
43+
expect(bold).toEqual('data-notion-annotation="code"')
4444
})
4545

4646
it('should not return any class if color is default', () => {
@@ -52,13 +52,13 @@ describe('Convert blocks', () => {
5252
it('should the color class', () => {
5353
const bold = filterCssClasses({ ...defaultAnnotations, color: 'brown' })
5454

55-
expect(bold).toEqual('gs-brown')
55+
expect(bold).toEqual('data-notion-color="brown"')
5656
})
5757

5858
it('should return bold and color class', () => {
5959
const bold = filterCssClasses({ ...defaultAnnotations, bold: true, color: 'orange' })
6060

61-
expect(bold).toEqual('gs-bold gs-orange')
61+
expect(bold).toEqual('data-notion-annotation="bold" data-notion-color="orange"')
6262
})
6363
})
6464

@@ -76,39 +76,39 @@ describe('Convert blocks', () => {
7676

7777
const fn = convertBlockToHTML(emptyParagraph, defaultPluginConfigRes)
7878

79-
expect(fn).toBe('<p><span class=gs-undefined></span></p>')
79+
expect(fn).toBe('<p><span></span></p>')
8080
})
8181

8282
it('should return a paragraph with text', () => {
8383
const paragraph = [MockParagraph]
8484

8585
const fn = convertBlockToHTML(paragraph, defaultPluginConfigRes)
8686

87-
expect(fn).toBe('<p><span class=gs-undefined>Lorem Ipsum Lorem Ipsum</span></p>')
87+
expect(fn).toBe('<p><span>Lorem Ipsum Lorem Ipsum</span></p>')
8888
})
8989

9090
it('should return a heading level 2 when Notion sends a heading level 1', () => {
9191
const headingOne = [MockHeadingOne]
9292

9393
const fn = convertBlockToHTML(headingOne, defaultPluginConfigRes)
9494

95-
expect(fn).toBe('<h2><span class=gs-undefined>Heading one</span></h2>')
95+
expect(fn).toBe('<h2><span>Heading one</span></h2>')
9696
})
9797

9898
it('should return a heading level 3 when Notion sends a heading level 2', () => {
9999
const headingTwo = [MockHeadingTwo]
100100

101101
const fn = convertBlockToHTML(headingTwo, defaultPluginConfigRes)
102102

103-
expect(fn).toBe('<h3><span class=gs-undefined>Heading two</span></h3>')
103+
expect(fn).toBe('<h3><span>Heading two</span></h3>')
104104
})
105105

106106
it('should return a heading level 3 when Notion sends a heading level 2', () => {
107107
const headingThree = [MockHeadingThree]
108108

109109
const fn = convertBlockToHTML(headingThree, defaultPluginConfigRes)
110110

111-
expect(fn).toBe('<h4><span class=gs-undefined>Heading three</span></h4>')
111+
expect(fn).toBe('<h4><span>Heading three</span></h4>')
112112
})
113113

114114
it('should return an unchecked todo item', () => {
@@ -117,7 +117,7 @@ describe('Convert blocks', () => {
117117
const fn = convertBlockToHTML(todoItemUnchecked, defaultPluginConfigRes)
118118

119119
expect(fn).toBe(
120-
'<div class="gs-todo"><label for="657e68c6-1b09-478f-9912-c647e17077b8"><input type="checkbox" id="657e68c6-1b09-478f-9912-c647e17077b8" /> <span class=gs-undefined>Lorem Ipsum Lorem Ipsum</span></label></div>'
120+
'<div data-notion="todo"><label for="657e68c6-1b09-478f-9912-c647e17077b8"><input type="checkbox" id="657e68c6-1b09-478f-9912-c647e17077b8" /> <span>Lorem Ipsum Lorem Ipsum</span></label></div>'
121121
)
122122
})
123123

@@ -127,7 +127,7 @@ describe('Convert blocks', () => {
127127
const fn = convertBlockToHTML(todoItemChecked, defaultPluginConfigRes)
128128

129129
expect(fn).toBe(
130-
'<div class="gs-todo"><label for="657e68c6-1b09-478f-9912-c647e17077b8"><input type="checkbox" id="657e68c6-1b09-478f-9912-c647e17077b8" checked /> <span class=gs-undefined>Lorem Ipsum Lorem Ipsum</span></label></div>'
130+
'<div data-notion="todo"><label for="657e68c6-1b09-478f-9912-c647e17077b8"><input type="checkbox" id="657e68c6-1b09-478f-9912-c647e17077b8" checked /> <span>Lorem Ipsum Lorem Ipsum</span></label></div>'
131131
)
132132
})
133133

@@ -137,7 +137,7 @@ describe('Convert blocks', () => {
137137
const fn = convertBlockToHTML(toggle, defaultPluginConfigRes)
138138

139139
expect(fn).toBe(
140-
'<details class="gs-toggle"><summary><span class=gs-undefined>Lorem Ipsum Lorem Ipsum</span></summary>It\'s a toggle!</details>'
140+
'<details data-notion="toggle"><summary><span>Lorem Ipsum Lorem Ipsum</span></summary>It\'s a toggle!</details>'
141141
)
142142
})
143143

@@ -146,7 +146,7 @@ describe('Convert blocks', () => {
146146

147147
const fn = convertBlockToHTML(childPage, defaultPluginConfigRes)
148148

149-
expect(fn).toBe('<p class="gs-child-page">This is a child page</p>')
149+
expect(fn).toBe('<p data-notion="child-page">This is a child page</p>')
150150
})
151151

152152
it('should return empty if block is not supported', () => {

‎src/utils/convert-blocks.ts‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,15 @@ export const filterCssClasses = ({
99
strikethrough,
1010
underline,
1111
}: Annotations): string => {
12+
const isDefaultColor = color === 'default' || color === undefined
13+
1214
const annotationsList = [
13-
bold ? 'gs-bold' : '',
14-
code ? 'gs-code' : '',
15-
italic ? 'gs-italic' : '',
16-
strikethrough ? 'gs-strikethrough' : '',
17-
underline ? 'gs-underline' : '',
18-
color !== 'default' ? `gs-${color}` : '',
15+
bold ? 'data-notion-annotation="bold"' : '',
16+
code ? 'data-notion-annotation="code"' : '',
17+
italic ? 'data-notion-annotation="italic"' : '',
18+
strikethrough ? 'data-notion-annotation="strikethrough"' : '',
19+
underline ? 'data-notion-annotation="underline"' : '',
20+
!isDefaultColor ? `data-notion-color="${color}"` : '',
1921
]
2022
.filter(Boolean)
2123
.join(' ')
@@ -34,7 +36,9 @@ const convertToHTML = (texts): string => {
3436
const classes = filterCssClasses(annotations)
3537
const content = text.content.replace(/^\s+|\s+$/g, '')
3638

37-
return `<span ${classes.length ? `class=${classes}` : ''}>${
39+
const dataAttr = classes.length > 0 ? ` data-notion=${classes}` : ''
40+
41+
return `<span${dataAttr}>${
3842
text.link ? `<a href=${text.link.url}>${content}</a>` : content
3943
}</span>`
4044
})
@@ -60,15 +64,15 @@ export const convertBlockToHTML = (blocks, options: ICreatePluginConfigRes): str
6064
case BlockType.NUMBERED_LIST:
6165
return `<li>${convertToHTML(value.text)}</li>`
6266
case BlockType.TO_DO:
63-
return `<div class="gs-todo"><label for="${id}"><input type="checkbox" id="${id}" ${
67+
return `<div data-notion="todo"><label for="${id}"><input type="checkbox" id="${id}" ${
6468
value.checked ? 'checked' : ''
6569
} />${' '}${convertToHTML(value.text)}</label></div>`
6670
case BlockType.TOGGLE:
67-
return `<details class="gs-toggle"><summary>${convertToHTML(
71+
return `<details data-notion="toggle"><summary>${convertToHTML(
6872
value.text
6973
)}</summary>It's a toggle!</details>`
7074
case BlockType.CHILD_PAGE:
71-
return `<p class="gs-child-page">${value.title}</p>`
75+
return `<p data-notion="child-page">${value.title}</p>`
7276
default:
7377
return options.get('unsupported')
7478
? `❌ Unsupported block (${type === 'unsupported' ? 'unsupported by Notion API' : type})`

0 commit comments

Comments
 (0)