#149 - Fix keywords

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## [5.1.1] - 2021-10-14
+
+- [#149](https://github.com/estruyf/vscode-front-matter/issues/149): Fix panel rendering when incorrect type for keywords is provided
+
 ## [5.1.0] - 2021-10-13
 
 ### 🎨 Enhancements

src/panelWebView/components/Metadata.tsx

@@ -186,14 +186,17 @@ export const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, met
       }
 
       {
-        <TagPicker type={TagType.keywords} 
-                   icon={<SymbolKeywordIcon />}
-                   crntSelected={metadata.keywords as string[] || []} 
-                   options={[]} 
-                   freeform={true} 
-                   focussed={focusElm === TagType.keywords}
-                   unsetFocus={unsetFocus}
-                   disableConfigurable />
+        <FieldBoundary fieldName={`Keywords`}>
+          <TagPicker 
+            type={TagType.keywords} 
+            icon={<SymbolKeywordIcon />}
+            crntSelected={metadata.keywords as string[] || []} 
+            options={[]} 
+            freeform={true} 
+            focussed={focusElm === TagType.keywords}
+            unsetFocus={unsetFocus}
+            disableConfigurable />
+        </FieldBoundary>
       }
     </Collapsible>
   );

src/panelWebView/components/SeoKeywords.tsx

@@ -13,6 +13,22 @@ export interface ISeoKeywordsProps {
 
 export const SeoKeywords: React.FunctionComponent<ISeoKeywordsProps> = ({keywords, ...data}: React.PropsWithChildren<ISeoKeywordsProps>) => {
 
+  const validateKeywords = () => {
+    if (!keywords) {
+      return [];
+    }
+
+    if (typeof keywords === 'string') {
+      return [keywords];
+    }
+
+    if (Array.isArray(keywords)) {
+      return keywords;
+    }
+
+    return [];
+  }
+
   if (!keywords || keywords.length === 0) {
     return null;
   }
@@ -31,7 +47,7 @@ export const SeoKeywords: React.FunctionComponent<ISeoKeywordsProps> = ({keyword
         </VsTableHeader>
         <VsTableBody slot="body">
           {
-            keywords.map((keyword, index) => {
+            validateKeywords().map((keyword, index) => {
               return (
                 <SeoKeywordInfo key={index} keyword={keyword} {...data} />
               );