Skip to content

Commit

Permalink
fix: lowercase block names when copied (#93)
Browse files Browse the repository at this point in the history 
* fix: lowercase block names when copied

* fix: assume lowercase out of pipeline

* fix: rename getAuthorFriendlyName to normalizeBlockName
  • Loading branch information
@dylandepass
dylandepass authored Dec 13, 2023
1 parent b88e44b commit f0b5656
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 27 deletions.
13 changes: 6 additions & 7 deletions src/plugins/blocks/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,8 @@ function getPreferedForegroundColor() {
.getPropertyValue('--sk-table-fg-color') || '#ffffff';
}

export function getAuthorFriendlyName(name) {
return name.replace(/-/g, ' ')
.replace(/\b\w/g, char => char.toUpperCase());
export function normalizeBlockName(name) {
return name.replace(/-/g, ' ');
}

export async function convertBlockToTable(context, block, name, path) {
Expand All @@ -131,7 +130,7 @@ export async function convertBlockToTable(context, block, name, path) {
table.setAttribute('style', 'width:100%;');

const headerRow = document.createElement('tr');
headerRow.append(createTag('td', { colspan: maxCols, style: `background-color: ${getPreferedBackgroundColor()}; color: ${getPreferedForegroundColor()};` }, getAuthorFriendlyName(name)));
headerRow.append(createTag('td', { colspan: maxCols, style: `background-color: ${getPreferedBackgroundColor()}; color: ${getPreferedForegroundColor()};` }, normalizeBlockName(name)));
table.append(headerRow);
for (const row of rows) {
const columns = [...row.children];
Expand Down Expand Up @@ -171,7 +170,7 @@ export function convertObjectToTable(name, object) {
table.setAttribute('style', 'width:100%;');

const headerRow = document.createElement('tr');
headerRow.append(createTag('td', { colspan: 2, style: `background-color: ${getPreferedBackgroundColor()}; color: ${getPreferedForegroundColor()};` }, getAuthorFriendlyName(name)));
headerRow.append(createTag('td', { colspan: 2, style: `background-color: ${getPreferedBackgroundColor()}; color: ${getPreferedForegroundColor()};` }, normalizeBlockName(name)));
table.append(headerRow);

for (const [key, value] of Object.entries(object)) {
Expand Down Expand Up @@ -355,7 +354,7 @@ async function getSectionMetadata(context, block, baseURL) {
return convertBlockToTable(
context,
sectionMetadata,
'Section metadata',
'section metadata',
baseURL,
);
}
Expand Down Expand Up @@ -538,7 +537,7 @@ export async function copyPageToClipboard(context, wrapper, blockURL, pageMetada
}

if (pageMeta) {
const pageMetadataTable = convertObjectToTable('Metadata', pageMeta);
const pageMetadataTable = convertObjectToTable('metadata', pageMeta);
wrapperClone.append(pageMetadataTable);
}

Expand Down
28 changes: 14 additions & 14 deletions test/plugins/blocks/blocks.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -532,9 +532,9 @@ describe('Blocks Plugin', () => {

expect(copiedHTML.querySelectorAll(':scope > div').length).to.eq(1);
expect(copiedHTML.querySelectorAll(':scope table').length).to.eq(3);
expect(copiedHTML.querySelector('table:nth-of-type(1) tr td').textContent).to.eq('Z Pattern');
expect(copiedHTML.querySelector('table:nth-of-type(2) tr td').textContent).to.eq('Banner (Small, Left)');
expect(copiedHTML.querySelector('table:nth-of-type(3) tr td').textContent).to.eq('Section Metadata');
expect(copiedHTML.querySelector('table:nth-of-type(1) tr td').textContent).to.eq('z pattern');
expect(copiedHTML.querySelector('table:nth-of-type(2) tr td').textContent).to.eq('banner (small, left)');
expect(copiedHTML.querySelector('table:nth-of-type(3) tr td').textContent).to.eq('section metadata');

return copiedHTML;
}
Expand Down Expand Up @@ -581,8 +581,8 @@ describe('Blocks Plugin', () => {
const copiedHTML = createTag('div', undefined, clipboardHTML);
expect(copiedHTML.querySelectorAll(':scope > div').length).to.eq(2);
expect(copiedHTML.querySelectorAll(':scope table').length).to.eq(3);
expect(copiedHTML.querySelector('table:nth-of-type(1) tr td').textContent).to.eq('Blockquote');
expect(copiedHTML.querySelector('table:nth-of-type(2) tr td').textContent).to.eq('Section Metadata');
expect(copiedHTML.querySelector('table:nth-of-type(1) tr td').textContent).to.eq('blockquote');
expect(copiedHTML.querySelector('table:nth-of-type(2) tr td').textContent).to.eq('section metadata');

// eslint-disable-next-line max-len
// expect(copiedHTML.querySelector('table:nth-of-type(2) tr td').textContent).to.eq('Metadata');
Expand All @@ -591,7 +591,7 @@ describe('Blocks Plugin', () => {
// There should be 3 tables as per assert above.
copiedHTML.querySelectorAll(':scope table').forEach((table, index) => {
if (index === 2) {
expect(table.querySelector('tr td').textContent).to.eq('Metadata');
expect(table.querySelector('tr td').textContent).to.eq('metadata');
}
});

Expand Down Expand Up @@ -634,7 +634,7 @@ describe('Blocks Plugin', () => {

// Make sure section metadata was copied
const tds = copiedHTML.querySelectorAll('td');
const targetTd = Array.from(tds).find(td => td.textContent.trim() === 'Section Metadata');
const targetTd = Array.from(tds).find(td => td.textContent.trim() === 'section metadata');
expect(targetTd).to.exist;

return copiedHTML;
Expand Down Expand Up @@ -685,7 +685,7 @@ describe('Blocks Plugin', () => {

// Make sure section metadata was copied
const tds = copiedHTML.querySelectorAll('td');
const targetTd = Array.from(tds).find(td => td.textContent.trim() === 'Section Metadata');
const targetTd = Array.from(tds).find(td => td.textContent.trim() === 'section metadata');
expect(targetTd).to.exist;

return copiedHTML;
Expand Down Expand Up @@ -770,9 +770,9 @@ describe('Blocks Plugin', () => {
expect(copiedHTML.querySelectorAll(':scope > div').length).to.eq(1);
expect(copiedHTML.querySelectorAll(':scope table').length).to.eq(3);
expect(copiedHTML.querySelector(':scope h2').textContent).to.eq('Heading');
expect(copiedHTML.querySelector('table:nth-of-type(1) tr td').textContent).to.eq('Z Pattern');
expect(copiedHTML.querySelector('table:nth-of-type(2) tr td').textContent).to.eq('Banner (Small, Left)');
expect(copiedHTML.querySelector('table:nth-of-type(3) tr td').textContent).to.eq('Section Metadata');
expect(copiedHTML.querySelector('table:nth-of-type(1) tr td').textContent).to.eq('z pattern');
expect(copiedHTML.querySelector('table:nth-of-type(2) tr td').textContent).to.eq('banner (small, left)');
expect(copiedHTML.querySelector('table:nth-of-type(3) tr td').textContent).to.eq('section metadata');

return copiedHTML;
}
Expand Down Expand Up @@ -814,13 +814,13 @@ describe('Blocks Plugin', () => {
expect(copiedHTML.querySelectorAll(':scope > div').length).to.eq(2);
expect(copiedHTML.querySelectorAll(':scope table').length).to.eq(3);
expect(copiedHTML.querySelector(':scope h1').textContent).to.eq('My blog post about a subject');
expect(copiedHTML.querySelector('table:nth-of-type(1) tr td').textContent).to.eq('Blockquote');
expect(copiedHTML.querySelector('table:nth-of-type(2) tr td').textContent).to.eq('Section Metadata');
expect(copiedHTML.querySelector('table:nth-of-type(1) tr td').textContent).to.eq('blockquote');
expect(copiedHTML.querySelector('table:nth-of-type(2) tr td').textContent).to.eq('section metadata');

// See above for this sillyness
copiedHTML.querySelectorAll(':scope table').forEach((table, index) => {
if (index === 2) {
expect(table.querySelector('tr td').textContent).to.eq('Metadata');
expect(table.querySelector('tr td').textContent).to.eq('metadata');
}
});

Expand Down
12 changes: 6 additions & 6 deletions test/plugins/blocks/utils.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
/* eslint-disable no-unused-expressions */

import { expect } from '@open-wc/testing';
import { getBlockName, getAuthorFriendlyName, convertBlockToTable } from '../../../src/plugins/blocks/utils.js';
import { getBlockName, normalizeBlockName, convertBlockToTable } from '../../../src/plugins/blocks/utils.js';
import { mockBlock } from '../../fixtures/blocks.js';
import { CARDS_DEFAULT_STUB, CARDS_WITH_ALIGNMENT_STUB } from '../../fixtures/stubs/cards.js';

Expand Down Expand Up @@ -43,12 +43,12 @@ describe('Blocks Util', () => {
expect(blockName).to.equal('cards');
});
});
describe('getAuthorFriendlyName()', () => {
describe('normalizeBlockName()', () => {
it('returns author friendly names', async () => {
expect(getAuthorFriendlyName('hero-main')).to.equal('Hero Main');
expect(getAuthorFriendlyName('hero-main (layer-1)')).to.equal('Hero Main (Layer 1)');
expect(getAuthorFriendlyName('hero-main (layer-1, Bold-italic)')).to.equal('Hero Main (Layer 1, Bold Italic)');
expect(getAuthorFriendlyName('hero-main-foo-bar (layer-1, bold-italic, Underline)')).to.equal('Hero Main Foo Bar (Layer 1, Bold Italic, Underline)');
expect(normalizeBlockName('hero-main')).to.equal('hero main');
expect(normalizeBlockName('hero-main (layer-1)')).to.equal('hero main (layer 1)');
expect(normalizeBlockName('hero-main (layer-1, bold-italic)')).to.equal('hero main (layer 1, bold italic)');
expect(normalizeBlockName('hero-main-foo-bar (layer-1, bold-italic, underline)')).to.equal('hero main foo bar (layer 1, bold italic, underline)');
});
});

Expand Down

0 comments on commit f0b5656

Please sign in to comment.