diff --git a/assets/media/styles.css b/assets/media/styles.css index fd384c80..39803fb9 100644 --- a/assets/media/styles.css +++ b/assets/media/styles.css @@ -247,14 +247,6 @@ background-color: var(--vscode-button-secondaryHoverBackground); } -.table__cell { - overflow: hidden; -} - -.table__title { - text-transform: capitalize; -} - .table__cell__seo_details { padding: 10px; } @@ -281,11 +273,6 @@ margin-left: 0.5rem; } -.seo__status__note { - font-size: 10px; - padding: 3px 0; -} - /* Fields */ .field__toggle { position: relative; @@ -364,7 +351,7 @@ input:checked + .field__toggle__slider:before { } /* File list */ -.file_list vscode-label { +.file_list label { border-bottom: 1px solid var(--vscode-foreground); } diff --git a/package-lock.json b/package-lock.json index f2b2f01d..de7ee19e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,6 @@ }, "devDependencies": { "@actions/core": "^1.10.0", - "@bendera/vscode-webview-elements": "0.6.2", "@estruyf/vscode": "^1.1.0", "@headlessui/react": "^1.7.18", "@heroicons/react": "^2.1.1", @@ -38,6 +37,7 @@ "@types/vscode": "^1.73.0", "@typescript-eslint/eslint-plugin": "^5.50.0", "@typescript-eslint/parser": "^5.50.0", + "@vscode-elements/elements": "^1.2.0", "@vscode/l10n": "^0.0.14", "@vscode/webview-ui-toolkit": "^1.2.2", "@webpack-cli/serve": "^1.7.0", @@ -400,15 +400,6 @@ "node": ">=6.9.0" } }, - "node_modules/@bendera/vscode-webview-elements": { - "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, - "dependencies": { - "lit-element": "^2.5.1" - } - }, "node_modules/@ctrl/tinycolor": { "version": "3.6.1", "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz", @@ -764,6 +755,21 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==", "dev": true }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz", + "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==", + "dev": true + }, + "node_modules/@lit/reactive-element": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz", + "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==", + "dev": true, + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0" + } + }, "node_modules/@microsoft/fast-element": { "version": "1.12.0", "resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.12.0.tgz", @@ -2073,6 +2079,12 @@ "integrity": "sha512-bTHG8fcxEqv1M9+TD14P8ok8hjxoOCkfKc8XXLaaD05kI7ohpeI956jtDOD3XHKBQrlyPughUtzm1jtVhHpA5Q==", "dev": true }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "dev": true + }, "node_modules/@types/uglify-js": { "version": "3.17.4", "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.17.4.tgz", @@ -2337,6 +2349,15 @@ "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", "dev": true }, + "node_modules/@vscode-elements/elements": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@vscode-elements/elements/-/elements-1.2.0.tgz", + "integrity": "sha512-aCsf9iEnx+PE2rRfAySjvFTSgqP4NUvHG0nOc5AxFB1FXHyG/ayYA2TN9XpT7zuO024tRAu+XoKREbRC7uAmLA==", + "dev": true, + "dependencies": { + "lit": "^3.1.2" + } + }, "node_modules/@vscode/l10n": { "version": "0.0.14", "resolved": "https://registry.npmjs.org/@vscode/l10n/-/l10n-0.0.14.tgz", @@ -6574,20 +6595,36 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, - "node_modules/lit-element": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.5.1.tgz", - "integrity": "sha512-ogu7PiJTA33bEK0xGu1dmaX5vhcRjBXCFexPja0e7P7jqLhTpNKYRPmE+GmiCaRVAbiQKGkUgkh/i6+bh++dPQ==", + "node_modules/lit": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.2.tgz", + "integrity": "sha512-VZx5iAyMtX7CV4K8iTLdCkMaYZ7ipjJZ0JcSdJ0zIdGxxyurjIn7yuuSxNBD7QmjvcNJwr0JS4cAdAtsy7gZ6w==", "dev": true, "dependencies": { - "lit-html": "^1.1.1" + "@lit/reactive-element": "^2.0.4", + "lit-element": "^4.0.4", + "lit-html": "^3.1.2" + } + }, + "node_modules/lit-element": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.4.tgz", + "integrity": "sha512-98CvgulX6eCPs6TyAIQoJZBCQPo80rgXR+dVBs61cstJXqtI+USQZAbA4gFHh6L/mxBx9MrgPLHLsUgDUHAcCQ==", + "dev": true, + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0", + "@lit/reactive-element": "^2.0.4", + "lit-html": "^3.1.2" } }, "node_modules/lit-html": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.4.1.tgz", - "integrity": "sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==", - "dev": true + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.2.tgz", + "integrity": "sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==", + "dev": true, + "dependencies": { + "@types/trusted-types": "^2.0.2" + } }, "node_modules/load-json-file": { "version": "4.0.0", diff --git a/package.json b/package.json index cf314eba..57cc2362 100644 --- a/package.json +++ b/package.json @@ -2744,7 +2744,6 @@ }, "devDependencies": { "@actions/core": "^1.10.0", - "@bendera/vscode-webview-elements": "0.6.2", "@estruyf/vscode": "^1.1.0", "@headlessui/react": "^1.7.18", "@heroicons/react": "^2.1.1", @@ -2769,6 +2768,7 @@ "@types/vscode": "^1.73.0", "@typescript-eslint/eslint-plugin": "^5.50.0", "@typescript-eslint/parser": "^5.50.0", + "@vscode-elements/elements": "^1.2.0", "@vscode/l10n": "^0.0.14", "@vscode/webview-ui-toolkit": "^1.2.2", "@webpack-cli/serve": "^1.7.0", diff --git a/src/panelWebView/components/ArticleDetails.tsx b/src/panelWebView/components/ArticleDetails.tsx index 1a14e9fa..0fc8cbdb 100644 --- a/src/panelWebView/components/ArticleDetails.tsx +++ b/src/panelWebView/components/ArticleDetails.tsx @@ -1,14 +1,7 @@ import * as React from 'react'; -import { - VsTable, - VsTableBody, - VsTableHeader, - VsTableHeaderCell, - VsTableRow, - VsTableCell -} from './VscodeComponents'; import * as l10n from '@vscode/l10n'; import { LocalizationKey } from '../../localization'; +import { VSCodeTable, VSCodeTableBody, VSCodeTableCell, VSCodeTableHead, VSCodeTableHeader, VSCodeTableRow } from './VSCode/VSCodeTable'; export interface IArticleDetailsProps { details: { @@ -32,52 +25,55 @@ const ArticleDetails: React.FunctionComponent = ({

{l10n.t(LocalizationKey.panelArticleDetailsTitle)}

- - - - {l10n.t(LocalizationKey.panelArticleDetailsType)} - - - {l10n.t(LocalizationKey.panelArticleDetailsTotal)} - - - + + + + + {l10n.t(LocalizationKey.panelArticleDetailsType)} + + + {l10n.t(LocalizationKey.panelArticleDetailsTotal)} + + + + + {details?.headings !== undefined && ( - - {l10n.t(LocalizationKey.panelArticleDetailsHeadings)} - {details.headings} - + + {l10n.t(LocalizationKey.panelArticleDetailsHeadings)} + {details.headings} + )} {details?.paragraphs !== undefined && ( - - {l10n.t(LocalizationKey.panelArticleDetailsParagraphs)} - {details.paragraphs} - + + {l10n.t(LocalizationKey.panelArticleDetailsParagraphs)} + {details.paragraphs} + )} {details?.internalLinks !== undefined && ( - - {l10n.t(LocalizationKey.panelArticleDetailsInternalLinks)} - {details.internalLinks} - + + {l10n.t(LocalizationKey.panelArticleDetailsInternalLinks)} + {details.internalLinks} + )} {details?.externalLinks !== undefined && ( - - {l10n.t(LocalizationKey.panelArticleDetailsExternalLinks)} - {details.externalLinks} - + + {l10n.t(LocalizationKey.panelArticleDetailsExternalLinks)} + {details.externalLinks} + )} {details?.images !== undefined && ( - - {l10n.t(LocalizationKey.panelArticleDetailsImages)} - {details.images} - + + {l10n.t(LocalizationKey.panelArticleDetailsImages)} + {details.images} + )} - - + +
); }; diff --git a/src/panelWebView/components/Collapsible.tsx b/src/panelWebView/components/Collapsible.tsx index bad7f993..5f68ba6a 100644 --- a/src/panelWebView/components/Collapsible.tsx +++ b/src/panelWebView/components/Collapsible.tsx @@ -66,7 +66,7 @@ const Collapsible: React.FunctionComponent = ({ return ( -
+
{children}
diff --git a/src/panelWebView/components/ContentType/ContentTypeValidator.tsx b/src/panelWebView/components/ContentType/ContentTypeValidator.tsx index cf6bf63b..96649bf8 100644 --- a/src/panelWebView/components/ContentType/ContentTypeValidator.tsx +++ b/src/panelWebView/components/ContentType/ContentTypeValidator.tsx @@ -5,9 +5,9 @@ import { useMemo } from 'react'; import { Field } from '../../../models'; import { CommandToCode } from '../../CommandToCode'; import { IMetadata } from '../Metadata'; -import { VsLabel } from '../VscodeComponents'; import * as l10n from '@vscode/l10n'; import { LocalizationKey } from '../../../localization'; +import { VSCodeLabel } from '../VSCode'; export interface IContentTypeValidatorProps { fields: Field[]; @@ -50,7 +50,7 @@ export const ContentTypeValidator: React.FunctionComponent - +
- + {l10n.t(LocalizationKey.panelContentTypeContentTypeValidatorHint).split(`\n`).map(s => (

{s}

))} diff --git a/src/panelWebView/components/DataBlock/DataBlockRecords.tsx b/src/panelWebView/components/DataBlock/DataBlockRecords.tsx index 69073a41..a04093aa 100644 --- a/src/panelWebView/components/DataBlock/DataBlockRecords.tsx +++ b/src/panelWebView/components/DataBlock/DataBlockRecords.tsx @@ -1,12 +1,12 @@ -import { RectangleStackIcon, PlusIcon } from '@heroicons/react/24/outline'; +import { RectangleStackIcon } from '@heroicons/react/24/outline'; import * as React from 'react'; -import { VsLabel } from '../VscodeComponents'; import { DataBlockRecord } from '.'; import { SortableContainer, SortEnd } from 'react-sortable-hoc'; import { useCallback } from 'react'; import { FieldGroup } from '../../../models'; import * as l10n from '@vscode/l10n'; import { LocalizationKey } from '../../../localization'; +import { VSCodeLabel } from '../VSCode'; export interface IDataBlockRecordsProps { fieldGroups?: FieldGroup[]; @@ -52,7 +52,7 @@ export const DataBlockRecords = ({ return (
- +
@@ -61,7 +61,7 @@ export const DataBlockRecords = ({
- + {records.map((v: any, idx: number) => ( diff --git a/src/panelWebView/components/ErrorBoundary/FieldBoundary.tsx b/src/panelWebView/components/ErrorBoundary/FieldBoundary.tsx index 8b6715af..6f921c65 100644 --- a/src/panelWebView/components/ErrorBoundary/FieldBoundary.tsx +++ b/src/panelWebView/components/ErrorBoundary/FieldBoundary.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as Sentry from '@sentry/react'; -import { VsLabel } from '../VscodeComponents'; import * as l10n from '@vscode/l10n'; import { LocalizationKey } from '../../../localization'; +import { VSCodeLabel } from '../VSCode'; export interface IFieldBoundaryProps { fieldName: string; @@ -34,11 +34,11 @@ export default class FieldBoundary extends React.Component< if (this.state.hasError) { return (
- +
{this.props.fieldName}
- +
{l10n.t(LocalizationKey.panelErrorBoundaryFieldBoundaryLabel)} diff --git a/src/panelWebView/components/Fields/FieldTitle.tsx b/src/panelWebView/components/Fields/FieldTitle.tsx index b2b0aa6e..f86a6810 100644 --- a/src/panelWebView/components/Fields/FieldTitle.tsx +++ b/src/panelWebView/components/Fields/FieldTitle.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useMemo } from 'react'; -import { VsLabel } from '../VscodeComponents'; import { RequiredAsterix } from './RequiredAsterix'; +import { VSCodeLabel } from '../VSCode'; export interface IFieldTitleProps { label: string | JSX.Element; @@ -23,7 +23,7 @@ export const FieldTitle: React.FunctionComponent = ({ }, [icon]); return ( - +
{Icon} @@ -33,6 +33,6 @@ export const FieldTitle: React.FunctionComponent = ({ {actionElement}
- + ); }; diff --git a/src/panelWebView/components/FileList.tsx b/src/panelWebView/components/FileList.tsx index 203d3776..d60165b8 100644 --- a/src/panelWebView/components/FileList.tsx +++ b/src/panelWebView/components/FileList.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { FileInfo } from '../../models'; import { FileItem } from './FileItem'; -import { VsLabel } from './VscodeComponents'; import * as l10n from '@vscode/l10n'; import { LocalizationKey } from '../../localization'; +import { VSCodeLabel } from './VSCode'; export interface IFileListProps { folderName: string; @@ -22,9 +22,9 @@ const FileList: React.FunctionComponent = ({ return (
- + {folderName} - {files.length === 1 ? l10n.t(LocalizationKey.panelFileListLabelSingular) : l10n.t(LocalizationKey.panelFileListLabelPlural)}: {totalFiles} - +
    {files && diff --git a/src/panelWebView/components/FolderAndFiles.tsx b/src/panelWebView/components/FolderAndFiles.tsx index ee484911..eaae1155 100644 --- a/src/panelWebView/components/FolderAndFiles.tsx +++ b/src/panelWebView/components/FolderAndFiles.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import { FolderInfo } from '../../models'; import { Collapsible } from './Collapsible'; import { FileList } from './FileList'; -import { VsLabel } from './VscodeComponents'; import * as l10n from '@vscode/l10n'; import { LocalizationKey } from '../../localization'; +import { VSCodeLabel } from './VSCode'; export interface IFolderAndFilesProps { data: FolderInfo[] | undefined; @@ -35,9 +35,9 @@ const FolderAndFiles: React.FunctionComponent = ({ />
) : isBase ? ( - + {folder.title}: {folder.files} {folder.files > 1 ? l10n.t(LocalizationKey.panelFileListLabelPlural) : l10n.t(LocalizationKey.panelFileListLabelSingular)} - + ) : null}
))} diff --git a/src/panelWebView/components/GlobalSettings.tsx b/src/panelWebView/components/GlobalSettings.tsx index 7873cfb8..9819c312 100644 --- a/src/panelWebView/components/GlobalSettings.tsx +++ b/src/panelWebView/components/GlobalSettings.tsx @@ -3,12 +3,12 @@ import { PanelSettings } from '../../models'; import { CommandToCode } from '../CommandToCode'; import { useDebounce } from '../../hooks/useDebounce'; import { Collapsible } from './Collapsible'; -import { VsLabel } from './VscodeComponents'; import useStartCommand from '../hooks/useStartCommand'; import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react'; import { Messenger } from '@estruyf/vscode/dist/client'; import * as l10n from '@vscode/l10n'; import { LocalizationKey } from '../../localization'; +import { VSCodeLabel } from './VSCode'; export interface IGlobalSettingsProps { settings: PanelSettings | undefined; @@ -78,25 +78,25 @@ const GlobalSettings: React.FunctionComponent = ({ title={l10n.t(LocalizationKey.panelGlobalSettingsTitle)} >
- + {l10n.t(LocalizationKey.panelGlobalSettingsActionModifiedDateLabel)} - + {l10n.t(LocalizationKey.panelGlobalSettingsActionModifiedDateDescription)}
- + {l10n.t(LocalizationKey.panelGlobalSettingsActionFrontMatterLabel)} - + {l10n.t(LocalizationKey.panelGlobalSettingsActionFrontMatterDescription)}
- + {l10n.t(LocalizationKey.panelGlobalSettingsActionPreviewLabel)} - + = ({ />
- + {l10n.t(LocalizationKey.panelGlobalSettingsActionServerLabel)} - + = ( - props: React.PropsWithChildren -) => { - return ( - - - - ); -}; diff --git a/src/panelWebView/components/Icons/WarningIcon.tsx b/src/panelWebView/components/Icons/WarningIcon.tsx deleted file mode 100644 index f76ede02..00000000 --- a/src/panelWebView/components/Icons/WarningIcon.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; - -export interface IWarningIconProps {} - -export const WarningIcon: React.FunctionComponent = ( - props: React.PropsWithChildren -) => { - return ( - - - - ); -}; diff --git a/src/panelWebView/components/JsonField/JsonField.tsx b/src/panelWebView/components/JsonField/JsonField.tsx index fe92e843..86954575 100644 --- a/src/panelWebView/components/JsonField/JsonField.tsx +++ b/src/panelWebView/components/JsonField/JsonField.tsx @@ -2,10 +2,10 @@ import * as React from 'react'; import { useState, useMemo, useCallback, useEffect } from 'react'; import { Field, PanelSettings } from '../../../models'; import { PencilIcon } from '@heroicons/react/24/outline'; -import { VsLabel } from '../VscodeComponents'; import { JsonFieldRecords, JsonFieldForm, JsonFieldSelector } from '.'; import { SortEnd } from 'react-sortable-hoc'; import { arrayMoveImmutable } from 'array-move'; +import { VSCodeLabel } from '../VSCode'; export interface IJsonFieldProps { label: string; @@ -101,12 +101,12 @@ export const JsonField: React.FunctionComponent = ({ return (
- +
{' '} {label}
- + - +
@@ -44,7 +44,7 @@ export const JsonFieldRecords = ({
- + {records.map((v: any, idx: number) => ( diff --git a/src/panelWebView/components/SeoDetails.tsx b/src/panelWebView/components/SeoDetails.tsx index ab13f486..0ec6ffea 100644 --- a/src/panelWebView/components/SeoDetails.tsx +++ b/src/panelWebView/components/SeoDetails.tsx @@ -1,14 +1,7 @@ import * as React from 'react'; -import { - VsTable, - VsTableBody, - VsTableHeader, - VsTableHeaderCell, - VsTableRow, - VsTableCell -} from './VscodeComponents'; import * as l10n from '@vscode/l10n'; import { LocalizationKey } from '../../localization'; +import { VSCodeTable, VSCodeTableBody, VSCodeTableCell, VSCodeTableHead, VSCodeTableHeader, VSCodeTableRow } from './VSCode/VSCodeTable'; export interface ISeoDetailsProps { allowedLength: number; @@ -23,30 +16,33 @@ const SeoDetails: React.FunctionComponent = ( ) => { const { allowedLength, title, value, valueTitle, noValidation } = props; - const validate = () => { + const validate = React.useMemo(() => { if (noValidation) { return ''; } return value <= allowedLength ? 'valid' : 'not-valid'; - }; + }, [value, allowedLength, noValidation]); return ( -
+

{title}

- - - {valueTitle} - {l10n.t(LocalizationKey.panelSeoDetailsRecommended)} - - - - {value} - {allowedLength} - - - + + + + {valueTitle} + {l10n.t(LocalizationKey.panelSeoDetailsRecommended)} + + + + + + {value} + {allowedLength} + + +
); }; diff --git a/src/panelWebView/components/SeoFieldInfo.tsx b/src/panelWebView/components/SeoFieldInfo.tsx index f8814bba..8d15a1e4 100644 --- a/src/panelWebView/components/SeoFieldInfo.tsx +++ b/src/panelWebView/components/SeoFieldInfo.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { ValidInfo } from './ValidInfo'; -import { VsTableCell, VsTableRow } from './VscodeComponents'; +import { VSCodeTableCell, VSCodeTableRow } from './VSCode/VSCodeTable'; export interface ISeoFieldInfoProps { title: string; @@ -16,15 +16,11 @@ const SeoFieldInfo: React.FunctionComponent = ({ isValid }: React.PropsWithChildren) => { return ( - - {title} - - {value}/{recommendation} - - - {isValid !== undefined ? : -} - - + + {title} + {value}/{recommendation} + {isValid !== undefined ? : -} + ); }; diff --git a/src/panelWebView/components/SeoKeywordInfo.tsx b/src/panelWebView/components/SeoKeywordInfo.tsx index bcb567ea..38418233 100644 --- a/src/panelWebView/components/SeoKeywordInfo.tsx +++ b/src/panelWebView/components/SeoKeywordInfo.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { ValidInfo } from './ValidInfo'; -import { VsTableCell, VsTableRow } from './VscodeComponents'; import * as l10n from '@vscode/l10n'; import { LocalizationKey } from '../../localization'; +import { VSCodeTableCell, VSCodeTableRow } from './VSCode/VSCodeTable'; export interface ISeoKeywordInfoProps { keyword: string; @@ -71,22 +71,22 @@ const SeoKeywordInfo: React.FunctionComponent = ({ } return ( - - {keyword} - -
+ + {keyword} + +
-
+
-
+
= ({ } />
-
+
- {headings && headings.length > 0 &&
{checkHeadings()}
} - {wordCount &&
{density()}
} - - + {headings && headings.length > 0 && +
{checkHeadings()}
} + {wordCount && +
{density()}
} + + ); }; diff --git a/src/panelWebView/components/SeoKeywords.tsx b/src/panelWebView/components/SeoKeywords.tsx index 0a2ca00f..094a73ed 100644 --- a/src/panelWebView/components/SeoKeywords.tsx +++ b/src/panelWebView/components/SeoKeywords.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { SeoKeywordInfo } from './SeoKeywordInfo'; -import { VsTable, VsTableBody, VsTableHeader, VsTableHeaderCell } from './VscodeComponents'; import { ErrorBoundary } from '@sentry/react'; import * as l10n from '@vscode/l10n'; import { LocalizationKey } from '../../localization'; +import { VSCodeTable, VSCodeTableBody, VSCodeTableHead, VSCodeTableHeader, VSCodeTableRow } from './VSCode/VSCodeTable'; export interface ISeoKeywordsProps { keywords: string[] | null; @@ -54,16 +54,19 @@ const SeoKeywords: React.FunctionComponent = ({

{l10n.t(LocalizationKey.panelSeoKeywordsTitle)}

- - - - {l10n.t(LocalizationKey.panelSeoKeywordsHeaderKeyword)} - - - {l10n.t(LocalizationKey.panelSeoKeywordsHeaderDetails)} - - - + + + + + {l10n.t(LocalizationKey.panelSeoKeywordsHeaderKeyword)} + + + {l10n.t(LocalizationKey.panelSeoKeywordsHeaderDetails)} + + + + + {validateKeywords().map((keyword, index) => { return ( }> @@ -71,11 +74,11 @@ const SeoKeywords: React.FunctionComponent = ({ ); })} - - + + {data.wordCount && ( -
+
{l10n.t(LocalizationKey.panelSeoKeywordsDensity)}
)} diff --git a/src/panelWebView/components/SeoStatus.tsx b/src/panelWebView/components/SeoStatus.tsx index 28677c0b..4da28db3 100644 --- a/src/panelWebView/components/SeoStatus.tsx +++ b/src/panelWebView/components/SeoStatus.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { useEffect } from 'react'; import { SEO } from '../../models/PanelSettings'; import { TagType } from '../TagType'; import { ArticleDetails } from './ArticleDetails'; @@ -9,9 +8,9 @@ import { SymbolKeywordIcon } from './Icons/SymbolKeywordIcon'; import { SeoFieldInfo } from './SeoFieldInfo'; import { SeoKeywords } from './SeoKeywords'; import { TagPicker } from './TagPicker'; -import { VsTable, VsTableBody, VsTableHeader, VsTableHeaderCell } from './VscodeComponents'; import * as l10n from '@vscode/l10n'; import { LocalizationKey } from '../../localization'; +import { VSCodeTable, VSCodeTableBody, VSCodeTableHead, VSCodeTableHeader, VSCodeTableRow } from './VSCode/VSCodeTable'; export interface ISeoStatusProps { seo: SEO; @@ -27,90 +26,61 @@ const SeoStatus: React.FunctionComponent = ({ unsetFocus }: React.PropsWithChildren) => { const { title, slug } = data; - const [isOpen, setIsOpen] = React.useState(true); - const tableRef = React.useRef(); - const pushUpdate = React.useRef((value: boolean) => { - setTimeout(() => { - setIsOpen(value); - }, 10); - }).current; const { descriptionField, titleField } = seo; - // Workaround for lit components not updating render - 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[titleField], data[descriptionField], data?.articleDetails?.wordCount]); - - const renderContent = () => { - if (!isOpen) { - return null; - } - + const tableContent = React.useMemo(() => { return (

{l10n.t(LocalizationKey.panelSeoStatusTitle)}

- - - - {l10n.t(LocalizationKey.panelSeoStatusHeaderProperty)} - - - {l10n.t(LocalizationKey.panelSeoStatusHeaderLength)} - - - {l10n.t(LocalizationKey.panelSeoStatusHeaderValid)} - - - - {data[titleField] && seo.title > 0 && ( + + + + {l10n.t(LocalizationKey.panelSeoStatusHeaderProperty)} + {l10n.t(LocalizationKey.panelSeoStatusHeaderLength)} + {l10n.t(LocalizationKey.panelSeoStatusHeaderValid)} + + + + + {data[titleField] && seo.title > 0 ? ( - )} + ) : null} - {slug && seo.slug > 0 && ( + {slug && seo.slug > 0 ? ( - )} + ) : null} - {data[descriptionField] && seo.description > 0 && ( + {data[descriptionField] && seo.description > 0 ? ( - )} + ) : null} - {seo.content > 0 && data?.articleDetails?.wordCount > 0 && ( + {seo.content > 0 && data?.articleDetails?.wordCount > 0 ? ( - )} - - + ) : null} + +
= ({
); - }; + }, [data, seo, focusElm, unsetFocus]); return ( - + {!title && !data[descriptionField] ? (

@@ -150,7 +120,7 @@ const SeoStatus: React.FunctionComponent = ({

) : ( - renderContent() + tableContent )} ); diff --git a/src/panelWebView/components/VSCode/VSCodeLabel.tsx b/src/panelWebView/components/VSCode/VSCodeLabel.tsx new file mode 100644 index 00000000..6dcee08a --- /dev/null +++ b/src/panelWebView/components/VSCode/VSCodeLabel.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; + +export interface IVSCodeLabelProps { } + +export const VSCodeLabel: React.FunctionComponent = ({ + children +}: React.PropsWithChildren) => { + const DEFAULT_LINE_HEIGHT = 16; + const DEFAULT_FONT_SIZE = 13; + + const INPUT_LINE_HEIGHT_RATIO = DEFAULT_LINE_HEIGHT / DEFAULT_FONT_SIZE; + + return ( + + ); +}; \ No newline at end of file diff --git a/src/panelWebView/components/VSCode/VSCodeTable.tsx b/src/panelWebView/components/VSCode/VSCodeTable.tsx new file mode 100644 index 00000000..4dee145b --- /dev/null +++ b/src/panelWebView/components/VSCode/VSCodeTable.tsx @@ -0,0 +1,103 @@ +import * as React from "react" +import { cn } from "../../../utils/cn" + +const VSCodeTable = React.forwardRef< + HTMLTableElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+ + +)) +VSCodeTable.displayName = "VSCodeTable" + +const VSCodeTableHeader = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +VSCodeTableHeader.displayName = "VSCodeTableHeader" + +const VSCodeTableBody = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +VSCodeTableBody.displayName = "VSCodeTableBody" + +const VSCodeTableFooter = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + tr]:last:border-b-0", + className + )} + {...props} + /> +)) +VSCodeTableFooter.displayName = "VSCodeTableFooter" + +const VSCodeTableRow = React.forwardRef< + HTMLTableRowElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +VSCodeTableRow.displayName = "VSCodeTableRow" + +const VSCodeTableHead = React.forwardRef< + HTMLTableCellElement, + React.ThHTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +VSCodeTableHead.displayName = "VSCodeTableHead" + +const VSCodeTableCell = React.forwardRef< + HTMLTableCellElement, + React.TdHTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +VSCodeTableCell.displayName = "VSCodeTableCell" + +export { + VSCodeTable, + VSCodeTableHeader, + VSCodeTableBody, + VSCodeTableFooter, + VSCodeTableHead, + VSCodeTableRow, + VSCodeTableCell, +} \ No newline at end of file diff --git a/src/panelWebView/components/VSCode/index.ts b/src/panelWebView/components/VSCode/index.ts new file mode 100644 index 00000000..a6f343b3 --- /dev/null +++ b/src/panelWebView/components/VSCode/index.ts @@ -0,0 +1 @@ +export * from './VSCodeLabel'; diff --git a/src/panelWebView/components/ValidInfo.tsx b/src/panelWebView/components/ValidInfo.tsx index 8f23e1a8..2e817775 100644 --- a/src/panelWebView/components/ValidInfo.tsx +++ b/src/panelWebView/components/ValidInfo.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { CheckIcon } from './Icons/CheckIcon'; -import { WarningIcon } from './Icons/WarningIcon'; +import { CheckIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline'; export interface IValidInfoProps { label?: string; @@ -14,13 +13,9 @@ const ValidInfo: React.FunctionComponent = ({ return ( <> {isValid ? ( - - - + ) : ( - - - + )} {label && {label}} diff --git a/src/panelWebView/components/VscodeComponents.ts b/src/panelWebView/components/VscodeComponents.ts index a3128e4d..5fbfc822 100644 --- a/src/panelWebView/components/VscodeComponents.ts +++ b/src/panelWebView/components/VscodeComponents.ts @@ -1,11 +1,5 @@ import { wrapWc } from 'wc-react'; // @bendera/vscode-webview-elements -export const VsTable = wrapWc(`vscode-table`); -export const VsTableHeader = wrapWc(`vscode-table-header`); -export const VsTableHeaderCell = wrapWc(`vscode-table-header-cell`); -export const VsTableBody = wrapWc(`vscode-table-body`); -export const VsTableRow = wrapWc(`vscode-table-row`); -export const VsTableCell = wrapWc(`vscode-table-cell`); export const VsCollapsible = wrapWc(`vscode-collapsible`); -export const VsLabel = wrapWc(`vscode-label`); +// export const VsLabel = wrapWc(`vscode-label`); diff --git a/src/panelWebView/index.tsx b/src/panelWebView/index.tsx index 613ddbbd..5b5a7c70 100644 --- a/src/panelWebView/index.tsx +++ b/src/panelWebView/index.tsx @@ -9,14 +9,8 @@ import { SentryInit } from '../utils/sentryInit'; import './styles.css'; // require('@vscode/codicons/dist/codicon.css'); -import '@bendera/vscode-webview-elements/dist/vscode-table.js'; -import '@bendera/vscode-webview-elements/dist/vscode-table-header.js'; -import '@bendera/vscode-webview-elements/dist/vscode-table-header-cell.js'; -import '@bendera/vscode-webview-elements/dist/vscode-table-body.js'; -import '@bendera/vscode-webview-elements/dist/vscode-table-row.js'; -import '@bendera/vscode-webview-elements/dist/vscode-table-cell.js'; -import '@bendera/vscode-webview-elements/dist/vscode-collapsible.js'; -import '@bendera/vscode-webview-elements/dist/vscode-label.js'; +import '@vscode-elements/elements/dist/vscode-collapsible/index.js'; +// import '@bendera/vscode-webview-elements/dist/vscode-label/index.js'; // import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js'; // import '@vscode/webview-ui-toolkit/dist/esm/checkbox';