Merge branch 'dev' of github.com:estruyf/vscode-front-matter into dev

src/listeners/panel/TaxonomyListener.ts

@@ -28,6 +28,7 @@ export class TaxonomyListener extends BaseListener {
           msg.payload?.fieldName,
           msg.payload?.values || [],
           msg.payload?.parents || [],
+          typeof msg.payload?.renderAsString !== 'undefined' ? msg.payload?.renderAsString : false,
           msg.payload?.blockData
         );
         break;
@@ -36,6 +37,7 @@ export class TaxonomyListener extends BaseListener {
           msg.payload?.fieldName,
           msg.payload?.values || [],
           msg.payload?.parents || [],
+          typeof msg.payload?.renderAsString !== 'undefined' ? msg.payload?.renderAsString : false,
           msg.payload?.blockData
         );
         break;
@@ -134,6 +136,7 @@ export class TaxonomyListener extends BaseListener {
     fieldName: string,
     values: string[],
     parents: string[],
+    renderAsString: boolean,
     blockData?: BlockFieldData
   ) {
     const editor = window.activeTextEditor;
@@ -145,7 +148,17 @@ export class TaxonomyListener extends BaseListener {
     if (article && article.data) {
       const parentObj = DataListener.getParentObject(article.data, article, parents, blockData);
 
-      parentObj[fieldName] = values || [];
+      if (renderAsString) {
+        if (values.length === 0) {
+          parentObj[fieldName] = '';
+        } else if (values.length === 1) {
+          parentObj[fieldName] = values[0];
+        } else {
+          parentObj[fieldName] = values || [];
+        }
+      } else {
+        parentObj[fieldName] = values || [];
+      }
       ArticleHelper.update(editor, article);
       DataListener.pushMetadata(article!.data);
     }
@@ -174,7 +187,18 @@ export class TaxonomyListener extends BaseListener {
         data.blockData
       );
 
-      parentObj[data.name] = data.options || [];
+      if (data.renderAsString) {
+        if (!data.options || data.options.length === 0) {
+          parentObj[data.name] = '';
+        } else if (data.options.length === 1) {
+          parentObj[data.name] = data.options[0];
+        } else {
+          parentObj[data.name] = data.options || [] || [];
+        }
+      } else {
+        parentObj[data.name] = data.options || [];
+      }
+
       ArticleHelper.update(editor, article);
       DataListener.pushMetadata(article!.data);
     }

src/models/CustomTaxonomyData.ts

@@ -6,5 +6,6 @@ export interface CustomTaxonomyData {
   options?: string[] | undefined;
   option?: string | undefined;
   parents?: string[];
+  renderAsString?: boolean;
   blockData?: BlockFieldData;
 }

src/models/PanelSettings.ts

@@ -108,6 +108,7 @@ export interface Field {
   fieldGroup?: string | string[];
   dataType?: string | string[];
   taxonomyLimit?: number;
+  singleValueAsString?: boolean;
   fileExtensions?: string[];
   editable?: boolean;
   required?: boolean;

src/panelWebView/components/Fields/WrapperField.tsx

@@ -311,6 +311,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
           parents={parentFields}
           blockData={blockData}
           limit={field.taxonomyLimit}
+          renderAsString={field.singleValueAsString}
           required={!!field.required}
         />
       </FieldBoundary>
@@ -335,6 +336,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
           parents={parentFields}
           blockData={blockData}
           limit={field.taxonomyLimit}
+          renderAsString={field.singleValueAsString}
           required={!!field.required}
         />
       </FieldBoundary>
@@ -356,6 +358,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
           parents={parentFields}
           blockData={blockData}
           limit={field.taxonomyLimit}
+          renderAsString={field.singleValueAsString}
           required={!!field.required}
         />
       </FieldBoundary>

src/panelWebView/components/TagPicker.tsx

@@ -35,6 +35,7 @@ export interface ITagPickerProps {
   taxonomyId?: string;
   limit?: number;
   required?: boolean;
+  renderAsString?: boolean;
 }
 
 const TagPicker: React.FunctionComponent<ITagPickerProps> = ({
@@ -53,7 +54,8 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = ({
   parents,
   blockData,
   limit,
-  required
+  required,
+  renderAsString
 }: React.PropsWithChildren<ITagPickerProps>) => {
   const [selected, setSelected] = React.useState<string[]>([]);
   const [inputValue, setInputValue] = React.useState<string>('');
@@ -96,11 +98,12 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = ({
    * Send an update to VSCode
    * @param values
    */
-  const sendUpdate = (values: string[]) => {
+  const sendUpdate = useCallback((values: string[]) => {
     if (type === TagType.tags) {
       Messenger.send(CommandToCode.updateTags, {
         fieldName,
         values,
+        renderAsString,
         parents,
         blockData
       });
@@ -108,6 +111,7 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = ({
       Messenger.send(CommandToCode.updateCategories, {
         fieldName,
         values,
+        renderAsString,
         parents,
         blockData
       });
@@ -121,11 +125,12 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = ({
         id: taxonomyId,
         name: fieldName,
         options: values,
+        renderAsString,
         parents,
         blockData
       } as CustomTaxonomyData);
     }
-  };
+  }, [renderAsString]);
 
   /**
    * Triggers the focus to the input when command is executed