Skip to content

Commit

Permalink
fix: Wrap td contents in div instead of span (#38)
Browse files Browse the repository at this point in the history
  • Loading branch information
@davisagli
davisagli authored Nov 3, 2023
1 parent f92f5c9 commit ae31295
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 103 deletions.
23 changes: 6 additions & 17 deletions src/converters/slate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@ const deserializeChildren = (parent) =>
.flat()
.filter((x) => x);

const createEmptyParagraph = () => jsx('element', { type: 'p' }, []);

const isInline = (n) =>
typeof n === 'string' ||
Text.isText(n) ||
Expand Down Expand Up @@ -111,11 +109,9 @@ const blockTagDeserializer = (tagname) => (el) => {
children.length > 0 &&
typeof children[0] === 'string'
) {
// TODO: should here be handled the cases when there are more strings in
// `children` or when there are besides strings other types of nodes too?
const p = createEmptyParagraph();
p.children[0].text = children[0];
children = [p];
const div = jsx('element', { type: 'div' }, []);
div.children[0].text = children[0];
children = [div];
}

const hasBlockChild = children.filter((n) => !isInline(n)).length > 0;
Expand Down Expand Up @@ -265,7 +261,7 @@ const createCell = (type, value) => {
return {
key: getId(),
type: type,
value: jsx('fragment', {}, value),
value: jsx('fragment', {}, jsx('element', { type: 'div' }, value)),
};
};

Expand Down Expand Up @@ -302,9 +298,7 @@ const slateTableBlock = (elem) => {
*/
let emptyHeaderCells = [];
for (let i = 0; i < tchild.children.length; i++)
emptyHeaderCells.push(
createCell('header', [jsx('element', { type: 'p' }, [''])]),
);
emptyHeaderCells.push(createCell('header', ['']));
rows.push({ key: getId(), cells: emptyHeaderCells });
hideHeaders = true;
}
Expand All @@ -313,12 +307,7 @@ const slateTableBlock = (elem) => {
for (const cell of tchild.children) {
const cellType = cell.tagName === 'TD' ? 'data' : 'header';
const cellValue = deserializeChildren(cell);
const elements = cellValue.map((element) =>
isInline(element)
? jsx('element', { type: 'span' }, [element])
: element,
);
cells.push(createCell(cellType, elements));
cells.push(createCell(cellType, cellValue));
}
rows.push({ key: getId(), cells });
}
Expand Down
174 changes: 88 additions & 86 deletions src/converters/slate.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -719,21 +719,23 @@ describe('slateTableBlock processing a simple table', () => {
expect(rows[0].cells).toHaveLength(1);
expect(rows[0].cells[0].key).toBeDefined();
expect(rows[0].cells[0].type).toBe('header');
expect(rows[0].cells[0].value).toHaveLength(1);
const parentValue0 = rows[0].cells[0].value[0];
expect(parentValue0['type']).toBe('p');
const value0 = parentValue0['children'][0];
expect(value0['text']).toBe('');
expect(rows[0].cells[0].value).toEqual([
{
type: 'div',
children: [{ text: '' }],
},
]);

expect(rows[1].key).toBeDefined();
expect(rows[1].cells).toHaveLength(1);
expect(rows[1].cells[0].key).toBeDefined();
expect(rows[1].cells[0].type).toBe('data');
expect(rows[1].cells[0].value).toHaveLength(1);
const parentValue1 = rows[1].cells[0].value[0];
expect(parentValue1['type']).toBe('span');
const value1 = parentValue1['children'][0];
expect(value1['text']).toBe('A value');
expect(rows[1].cells[0].value).toEqual([
{
type: 'div',
children: [{ text: 'A value' }],
},
]);
});
});

Expand Down Expand Up @@ -767,131 +769,128 @@ describe('slateTableBlock processing a table with header cells', () => {
expect(rows[0].cells).toHaveLength(1);
expect(rows[0].cells[0].key).toBeDefined();
expect(rows[0].cells[0].type).toBe('header');
expect(rows[0].cells[0].value).toHaveLength(1);
const parentValue0 = rows[0].cells[0].value[0];
expect(parentValue0['type']).toBe('span');
const value0 = parentValue0['children'][0];
expect(value0['text']).toBe('Heading');
expect(rows[0].cells[0].value).toEqual([
{ type: 'div', children: [{ text: 'Heading' }] },
]);

expect(rows[1].key).toBeDefined();
expect(rows[1].cells).toHaveLength(1);
expect(rows[1].cells[0].key).toBeDefined();
expect(rows[1].cells[0].type).toBe('data');
expect(rows[1].cells[0].value).toHaveLength(1);
const parentValue1 = rows[1].cells[0].value[0];
expect(parentValue1['type']).toBe('span');
const value1 = parentValue1['children'][0];
expect(value1['text']).toBe('A value');
expect(rows[1].cells[0].value).toEqual([
{ type: 'div', children: [{ text: 'A value' }] },
]);
});
});

describe('slateTableBlock processing a table with whitespace', () => {
const elem = elementFromString(
'<table><tr><td>A value<br>&nbsp;</td></tr></table>',
'<table><tr><th>A value<br>&nbsp;</th></tr></table>',
);

test('will preserve the whitespace', () => {
const result = slateTableBlock(elem);
const rows = result.table.rows;
expect(rows).toHaveLength(2);
const cells = rows[1].cells;
expect(rows).toHaveLength(1);
const cells = rows[0].cells;
expect(cells).toHaveLength(1);
const cell = cells[0];
const parentValue = cell.value[0];
expect(parentValue['type']).toBe('span');
const value = parentValue['children'][0];
expect(value).toEqual({ text: 'A value' });
expect(cell.value).toEqual([
{ type: 'div', children: [{ text: 'A value\n\u00a0' }] },
]);
});
});

describe('slateTableBlock processing a table with a link', () => {
const elem = elementFromString(
'<table><tr><td><a href="https://plone.org">Plone</a></td></tr></table>',
'<table><tr><th><a href="https://plone.org">Plone</a></th></tr></table>',
);

test('will have @type as slateTable', () => {
const result = slateTableBlock(elem);
expect(result['@type']).toBe('slateTable');
});

test('will have 2 rows with 1 cell with link value', () => {
test('will have 1 row with 1 cell with link value', () => {
const result = slateTableBlock(elem);
const rows = result.table.rows;
expect(rows).toHaveLength(2);
expect(rows[1].cells).toHaveLength(1);
expect(rows[1].cells[0].type).toBe('data');
expect(rows[1].cells[0].value).toHaveLength(1);
const parentValue = rows[1].cells[0].value[0];
expect(parentValue['type']).toBe('span');
const value = parentValue['children'][0];
expect(value['type']).toBe('link');
expect(value['data']['url']).toBe('https://plone.org');
expect(value['children'][0]['text']).toBe('Plone');
expect(rows).toHaveLength(1);
expect(rows[0].cells).toHaveLength(1);
expect(rows[0].cells[0].type).toBe('header');
expect(rows[0].cells[0].value).toHaveLength(1);
const value = rows[0].cells[0].value;
expect(value).toEqual([
{
type: 'div',
children: [
{
type: 'link',
data: { target: null, title: null, url: 'https://plone.org' },
children: [{ text: 'Plone' }],
},
],
},
]);
});
});

describe('slateTableBlock processing a table with a link', () => {
describe('slateTableBlock processing a table with text + link', () => {
const elem = elementFromString(
'<table><tr><td>Plone <a href="https://plone.org">site</a></td></tr></table>',
'<table><tr><th>Plone <a href="https://plone.org">site</a></th></tr></table>',
);

test('will have @type as slateTable', () => {
const result = slateTableBlock(elem);
expect(result['@type']).toBe('slateTable');
});

test('will have 2 rows with 1 cell with 2 children values', () => {
test('will have 1 row with 1 cell', () => {
const result = slateTableBlock(elem);
const rows = result.table.rows;
expect(rows).toHaveLength(2);
expect(rows[1].cells).toHaveLength(1);
expect(rows[1].cells[0].type).toBe('data');
expect(rows[1].cells[0].value).toHaveLength(2);
});

test('first value is a text', () => {
const result = slateTableBlock(elem);
const rows = result.table.rows;
const parentValue = rows[1].cells[0].value[0];
expect(parentValue['type']).toBe('span');
const value = parentValue['children'][0];
expect(value['text']).toBe('Plone ');
expect(rows).toHaveLength(1);
expect(rows[0].cells).toHaveLength(1);
});

test('second value is the span with the link', () => {
test('will have a cell value with text + link', () => {
const result = slateTableBlock(elem);
const rows = result.table.rows;
const parentValue = rows[1].cells[0].value[1];
expect(parentValue['type']).toBe('span');
const value = parentValue['children'][0];
expect(value['type']).toBe('link');
expect(value['data']['url']).toBe('https://plone.org');
expect(value['children'][0]['text']).toBe('site');
const value = rows[0].cells[0].value;
expect(value).toEqual([
{
type: 'div',
children: [
{ text: 'Plone ' },
{
type: 'link',
data: { target: null, title: null, url: 'https://plone.org' },
children: [{ text: 'site' }],
},
],
},
]);
});
});

describe('slateTableBlock processing a table with text + sup', () => {
const elem = elementFromString(
'<table><tr><td>10<sup>2</sup></td></tr></table>',
'<table><tr><th>10<sup>2</sup></th></tr></table>',
);

test('will keep sup inline', () => {
const result = slateTableBlock(elem);
const cell = result.table.rows[1].cells[0];
expect(cell.value).toHaveLength(2);
expect(cell.value[0]).toEqual({
type: 'span',
children: [{ text: '10' }],
});
expect(cell.value[1]).toEqual({
type: 'span',
children: [
{
type: 'sup',
children: [{ text: '2' }],
},
],
});
const cell = result.table.rows[0].cells[0];
expect(cell.value).toEqual([
{
type: 'div',
children: [
{ text: '10' },
{
type: 'sup',
children: [{ text: '2' }],
},
],
},
]);
});
});

Expand All @@ -900,12 +899,12 @@ describe('slateTableBlock processing a table with a div', () => {
'<table><tr><td><div><strong>text</strong></div></td></tr></table>',
);

test('will replace the div with a paragraph', () => {
test('will use the contents of the div', () => {
const result = slateTableBlock(elem);
const cell = result.table.rows[1].cells[0];
expect(cell.value).toEqual([
{
type: 'span',
type: 'div',
children: [{ type: 'strong', children: [{ text: 'text' }] }],
},
]);
Expand All @@ -923,9 +922,13 @@ describe('slateTableBlock parsing table with bold text', () => {
expect(rows).toHaveLength(2);
const cells = rows[1]['cells'];
expect(cells).toHaveLength(1);
const value = cells[0]['value'][0];
expect(value['type']).toEqual('span');
expect(value['children'][0]['type']).toEqual('strong');
const value = cells[0]['value'];
expect(value).toEqual([
{
type: 'div',
children: [{ type: 'strong', children: [{ text: 'Text1' }] }],
},
]);
});
});

Expand All @@ -940,9 +943,8 @@ describe('slateTableBlock parsing table with line break', () => {
expect(rows).toHaveLength(2);
const cells = rows[1]['cells'];
expect(cells).toHaveLength(1);
const value = cells[0]['value'][0];
expect(value['type']).toEqual('span');
expect(value['children'][0]['text']).toEqual('\n');
const value = cells[0]['value'];
expect(value).toEqual([{ type: 'div', children: [{ text: '\nText' }] }]);
});
});

Expand Down

0 comments on commit ae31295

Please sign in to comment.