diff --git a/CHANGELOG.md b/CHANGELOG.md index f361d70d..0a09f54b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Change Log +## [2.x.x] - 2020-08-xx + +- [#47](https://github.com/estruyf/vscode-front-matter/issues/#47): Fix when table shows only value `0` +- [#50](https://github.com/estruyf/vscode-front-matter/issues/#50): Fix in the table rendering of rows + ## [2.1.0] - 2020-08-04 - [#44](https://github.com/estruyf/vscode-front-matter/issues/45): Added article creation command diff --git a/package-lock.json b/package-lock.json index a15d6b46..f66e763f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,9 +40,9 @@ } }, "@bendera/vscode-webview-elements": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@bendera/vscode-webview-elements/-/vscode-webview-elements-0.5.0.tgz", - "integrity": "sha512-mlZi8RG+tsqr1bDbA7H82spyWzZyj/tsyHb9eta7kE0xRhvx7ON6w6DG4PONew1rVJv1knTKOAW4iQKVBYQhVQ==", + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/@bendera/vscode-webview-elements/-/vscode-webview-elements-0.6.2.tgz", + "integrity": "sha512-smtr+KvCKV2MwjVrmyvrhonpaXVpxCjTMXUQOwDwWSAQ42x5pnlpjCGElz2dljc5VHS1Mh1ovPSQ/P3jAm7vMQ==", "dev": true, "requires": { "lit-element": "^2.5.1" diff --git a/package.json b/package.json index 67a68bf2..ceeb3e4d 100644 --- a/package.json +++ b/package.json @@ -273,7 +273,7 @@ "clean": "rm -rf dist" }, "devDependencies": { - "@bendera/vscode-webview-elements": "0.5.0", + "@bendera/vscode-webview-elements": "0.6.2", "@iarna/toml": "2.2.3", "@types/glob": "7.1.3", "@types/js-yaml": "3.12.1", diff --git a/src/viewpanel/components/SeoStatus.tsx b/src/viewpanel/components/SeoStatus.tsx index 6eb6e3c7..93411bbf 100644 --- a/src/viewpanel/components/SeoStatus.tsx +++ b/src/viewpanel/components/SeoStatus.tsx @@ -2,11 +2,9 @@ import * as React from 'react'; import { SEO } from '../../models/PanelSettings'; import { ArticleDetails } from './ArticleDetails'; import { Collapsible } from './Collapsible'; -import { SeoDetails } from './SeoDetails'; import { SeoFieldInfo } from './SeoFieldInfo'; import { SeoKeywords } from './SeoKeywords'; -import { ValidInfo } from './ValidInfo'; -import { VsTable, VsTableBody, VsTableCell, VsTableHeader, VsTableHeaderCell, VsTableRow } from './VscodeComponents'; +import { VsTable, VsTableBody, VsTableHeader, VsTableHeaderCell } from './VscodeComponents'; export interface ISeoStatusProps { seo: SEO; @@ -17,6 +15,7 @@ export const SeoStatus: React.FunctionComponent = (props: React const { data, seo } = props; const { title } = data; const [ isOpen, setIsOpen ] = React.useState(true); + const tableRef = React.useRef(); const { descriptionField } = seo; @@ -34,7 +33,7 @@ export const SeoStatus: React.FunctionComponent = (props: React

Recommendations

- + Property Length @@ -73,6 +72,21 @@ export const SeoStatus: React.FunctionComponent = (props: React ); }; + // Workaround for lit components not updating render + React.useEffect(() => { + setTimeout(() => { + let height = 0; + + tableRef.current?.childNodes.forEach((elm: any) => { + height += elm.clientHeight; + }); + + if (height > 0 && tableRef.current) { + tableRef.current.style.height = `${height}px`; + } + }, 10); + }, [title, data[descriptionField], data?.articleDetails?.wordCount]); + return ( setIsOpen(value)}> { renderContent() }