#273 - Allow single value arrays to be set as a string

estruyf · Oct 24, 2023 · 96c496c · 96c496c
1 parent 7c2a596
commit 96c496c
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 ### 🎨 Enhancements
 
+- [#273](https://github.com/estruyf/vscode-front-matter/issues/273): Allow single value arrays to be set as a string with the `singleValueAsString` field property
 - [#686](https://github.com/estruyf/vscode-front-matter/issues/686): Allow script authors to ask questions during script execution
 - [#688](https://github.com/estruyf/vscode-front-matter/issues/688): Allow to show the scheduled articles in the content dashboard (filter and group)
 

diff --git a/package.json b/package.json
@@ -1272,6 +1272,11 @@
                       "default": 0,
                       "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyLimit.description%"
                     },
+                    "singleValueAsString": {
+                      "type": "boolean",
+                      "default": false,
+                      "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.singleValueAsString.description%"
+                    },
                     "isPublishDate": {
                       "type": "boolean",
                       "default": false,

diff --git a/package.nls.json b/package.nls.json
@@ -190,6 +190,7 @@
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.max.description": "The maximum value",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.step.description": "The step value",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyLimit.description": "Limit the number of taxonomies to select. Set to 0 to allow unlimited.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.singleValueAsString.description": "Specify if you want to store a single array value as a string instead of an array.",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isPublishDate.description": "Specify if the field is the publish date field",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isModifiedDate.description": "Specify if the field is the modified date field",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataFileId.description": "Specify the ID of the data file to use for this field",

diff --git a/src/listeners/panel/TaxonomyListener.ts b/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);
     }

diff --git a/src/models/CustomTaxonomyData.ts b/src/models/CustomTaxonomyData.ts
@@ -6,5 +6,6 @@ export interface CustomTaxonomyData {
   options?: string[] | undefined;
   option?: string | undefined;
   parents?: string[];
+  renderAsString?: boolean;
   blockData?: BlockFieldData;
 }
diff --git a/src/models/PanelSettings.ts b/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;

diff --git a/src/panelWebView/components/Fields/WrapperField.tsx b/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>

diff --git a/src/panelWebView/components/TagPicker.tsx b/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,18 +98,20 @@ 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
       });
     } else if (type === TagType.categories) {
       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