Merge pull request #150 from estruyf/dev

Merge for 5.1.1

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

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "vscode-front-matter-beta",
-	"version": "5.1.0",
+	"version": "5.1.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

package.json

@@ -3,7 +3,7 @@
   "displayName": "Front Matter",
   "description": "An essential Visual Studio Code extension when you want to manage the markdown pages of your static site like: Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...",
   "icon": "assets/frontmatter-teal-128x128.png",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "preview": false,
   "publisher": "eliostruyf",
   "galleryBanner": {

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} />
               );