Skip to content

Commit

Permalink
fix: Avoid unnecessary spans
Browse files Browse the repository at this point in the history
  • Loading branch information
@davisagli
davisagli committed Jan 6, 2024
1 parent a5c964c commit 485ede0
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 53 deletions.
17 changes: 17 additions & 0 deletions src/converters/fromHtml.test.js
View file
Expand Up @@ -537,6 +537,23 @@ describe('convertFromHTML parsing image', () => {
});

describe('convertFromHTML parsing nested tags', () => {
test('with a span inside a link', () => {
const html = '<a href="link"><span>text</span></a>';
const result = convertFromHTML(html, 'slate');
expect(result).toEqual([
{
'@type': 'slate',
plaintext: 'text',
value: [
{
type: 'link',
data: { url: 'link', target: null, title: null },
children: [{ text: 'text' }],
},
],
},
]);
});
test('with an image and without line breaks', () => {
const html = `<div>
<div><p><span><img src="image.jpg" /></span></p></div>
Expand Down
2 changes: 1 addition & 1 deletion src/converters/slate.js
View file
Expand Up @@ -92,7 +92,7 @@ const spanTagDeserializer = (el) => {
// Handle Google Docs' <sup> formatting
children = jsx('element', { type: 'sup' }, children);
}
return jsx('element', { type: 'span' }, children);
return jsx('fragment', {}, children);
}
};

Expand Down
78 changes: 26 additions & 52 deletions src/converters/slate.test.js
View file
Expand Up @@ -40,33 +40,19 @@ describe('slateTextBlock processing a paragraph', () => {
);
});

test('will have a nested structure in the value with 2 elements', () => {
const result = slateTextBlock(elem);
const valueElement = result.value[0];
expect(valueElement['type']).toBe('p');
expect(valueElement.children).toHaveLength(2);
});

test('will have a nested structure, and the first element of the value will be a p', () => {
const result = slateTextBlock(elem);
const valueElement = result.value[0].children[0];
expect(valueElement['type']).toBe('span');
expect(valueElement.children).toHaveLength(2);
expect(valueElement.children[0]['type']).toBe('strong');
expect(valueElement.children[0]['children'][0]['text']).toBe(
'Arrival by car:',
);
expect(valueElement.children[1]['text']).toContain(
'1 Autobahn network (East and West) easily accessible',
);
});

test('will have a nested structure, and the first element of the value will be a span', () => {
test('will have a nested structure in the value', () => {
const result = slateTextBlock(elem);
const valueElement = result.value[0].children[1];
expect(valueElement['type']).toBe('span');
expect(valueElement.children).toHaveLength(1);
expect(valueElement.children[0]['text']).toBe('L5122 till Neidling ');
expect(result.value).toEqual([
{
type: 'p',
children: [
{ type: 'strong', children: [{ text: 'Arrival by car:' }] },
{
text: ' A 1 Autobahn network (East and West) easily accessible from all directions (toll sticker - compulsory „Vignette“ - required on all motorways!) to St. Pölten then take the L5122 till Neidling ',
},
],
},
]);
});
});

Expand Down Expand Up @@ -257,16 +243,13 @@ describe('slateTextBlock processing a span', () => {
test('with a text value', () => {
const elem = elementFromString('<span>Hello world!</span>');
const result = slateTextBlock(elem);
const valueElement = result.value[0];
expect(valueElement['type']).toBe('span');
expect(valueElement['children'][0]['text']).toBe('Hello world!');
expect(result.value).toEqual([{ text: 'Hello world!' }]);
});

test('with an empty text value', () => {
const elem = elementFromString('<span>\n</span>');
const result = slateTextBlock(elem);
const valueElement = result.value[0];
expect(valueElement['text']).toBe(' ');
expect(result.value).toEqual([{ text: ' ' }]);
});

test('without children nodes will return undefined', () => {
Expand All @@ -281,46 +264,37 @@ describe('slateTextBlock processing a span', () => {
'<span>Hello <strong>world</strong>!</span>',
);
const result = slateTextBlock(elem);
const valueElement = result.value[0];
expect(valueElement['type']).toBe('span');
expect(valueElement['children'][0]['text']).toBe('Hello ');
expect(valueElement['children'][1]['type']).toBe('strong');
expect(valueElement['children'][1]['children'][0]['text']).toBe('world');
expect(valueElement['children'][2]['text']).toBe('!');
expect(result.value).toEqual([
{ text: 'Hello ' },
{ type: 'strong', children: [{ text: 'world' }] },
{ text: '!' },
]);
});

test('with google docs style for sup', () => {
const elem = elementFromString(
'<span style="vertical-align:sup">Hello world!</span>',
);
const result = slateTextBlock(elem);
const valueElement = result.value[0];
expect(valueElement['type']).toBe('span');
const supElement = valueElement.children[0];
expect(supElement['type']).toBe('sup');
expect(supElement['children'][0]['text']).toBe('Hello world!');
expect(result.value).toEqual([
{ type: 'sup', children: [{ text: 'Hello world!' }] },
]);
});

test('with google docs style for sub', () => {
const elem = elementFromString(
'<span style="vertical-align:sub">Hello world!</span>',
);
const result = slateTextBlock(elem);
const valueElement = result.value[0];
expect(valueElement['type']).toBe('span');
const supElement = valueElement.children[0];
expect(supElement['type']).toBe('sub');
expect(supElement['children'][0]['text']).toBe('Hello world!');
expect(result.value).toEqual([
{ type: 'sub', children: [{ text: 'Hello world!' }] },
]);
});

test('inside another element with an empty value will drop empty span', () => {
const elem = elementFromString('<p><span>Foo</span><span></span></p>');
const result = slateTextBlock(elem);
const valueElement = result.value[0];
expect(valueElement['type']).toBe('p');
expect(valueElement['children']).toHaveLength(1);
expect(valueElement['children'][0]['type']).toBe('span');
expect(valueElement['children'][0]['children'][0]['text']).toBe('Foo');
expect(result.value).toEqual([{ type: 'p', children: [{ text: 'Foo' }] }]);
});
});

Expand Down

0 comments on commit 485ede0

Please sign in to comment.