diff --git a/src/panelWebView/components/SeoKeywordInfo.tsx b/src/panelWebView/components/SeoKeywordInfo.tsx index fdd2cfe7..8714f071 100644 --- a/src/panelWebView/components/SeoKeywordInfo.tsx +++ b/src/panelWebView/components/SeoKeywordInfo.tsx @@ -1,8 +1,13 @@ import * as React from 'react'; import { ValidInfo } from './ValidInfo'; import { VSCodeTableCell, VSCodeTableRow } from './VSCode/VSCodeTable'; +import { Tag } from './Tag'; +import { LocalizationKey, localize } from '../../localization'; +import { Messenger } from '@estruyf/vscode/dist/client'; +import { CommandToCode } from '../CommandToCode'; export interface ISeoKeywordInfoProps { + keywords: string[]; keyword: string; title: string; description: string; @@ -14,6 +19,7 @@ export interface ISeoKeywordInfoProps { const SeoKeywordInfo: React.FunctionComponent = ({ keyword, + keywords, title, description, slug, @@ -64,13 +70,32 @@ const SeoKeywordInfo: React.FunctionComponent = ({ return 0} />; }; + const onRemove = React.useCallback((tag: string) => { + const newSelection = keywords.filter((s) => s !== tag); + Messenger.send(CommandToCode.updateKeywords, { + values: newSelection, + parents: undefined + }); + }, [keywords]); + if (!keyword || typeof keyword !== 'string') { return null; } return ( - {keyword} + +
+ void 0} + title={localize(LocalizationKey.panelTagsTagWarning, keyword)} + disableConfigurable={true} + /> +
+
= ({ return []; }; + const validKeywords = React.useMemo(() => { + return validateKeywords(); + }, [keywords]); + // Workaround for lit components not updating render React.useEffect(() => { setIsReady(false); @@ -54,7 +58,7 @@ const SeoKeywords: React.FunctionComponent = ({ } return ( -
+

{localize(LocalizationKey.panelSeoKeywordsTitle)}

@@ -159,10 +163,10 @@ const SeoKeywords: React.FunctionComponent = ({ - {validateKeywords().map((keyword, index) => { + {validKeywords.map((keyword, index) => { return ( }> - + ); })} diff --git a/src/panelWebView/components/SeoStatus.tsx b/src/panelWebView/components/SeoStatus.tsx index 5f7c06e3..98322c5d 100644 --- a/src/panelWebView/components/SeoStatus.tsx +++ b/src/panelWebView/components/SeoStatus.tsx @@ -38,7 +38,7 @@ const SeoStatus: React.FunctionComponent = ({ const descriptionFieldName = contentType?.fields.find(f => f.name === descriptionField)?.title || descriptionField; return ( -
+

{localize(LocalizationKey.panelSeoStatusTitle)}

@@ -85,28 +85,30 @@ const SeoStatus: React.FunctionComponent = ({
- - - - } - crntSelected={(metadata.keywords as string[]) || []} - options={[]} - freeform={true} - focussed={focusElm === TagType.keywords} - unsetFocus={unsetFocus} - disableConfigurable +
+ - + + + } + crntSelected={(metadata.keywords as string[]) || []} + options={[]} + freeform={true} + focussed={focusElm === TagType.keywords} + unsetFocus={unsetFocus} + disableConfigurable + /> + +
); }, [contentType, metadata, seo, focusElm, unsetFocus]); diff --git a/src/panelWebView/components/Tag.tsx b/src/panelWebView/components/Tag.tsx index abf70759..652e10e9 100644 --- a/src/panelWebView/components/Tag.tsx +++ b/src/panelWebView/components/Tag.tsx @@ -1,7 +1,6 @@ import { PlusIcon, XMarkIcon } from '@heroicons/react/24/outline'; import * as React from 'react'; -import * as l10n from '@vscode/l10n'; -import { LocalizationKey } from '../../localization'; +import { LocalizationKey, localize } from '../../localization'; export interface ITagProps { className: string; @@ -14,16 +13,14 @@ export interface ITagProps { onRemove: (tags: string) => void; } -const Tag: React.FunctionComponent = (props: React.PropsWithChildren) => { - const { value, title, onRemove, onCreate, disableConfigurable } = props; - +const Tag: React.FunctionComponent = ({ value, title, onRemove, onCreate, disableConfigurable, className }: React.PropsWithChildren) => { return ( <> -
+
{!disableConfigurable && onCreate && (