#246 - Support to add multiple tags/keywords/taxonomy via comma separated values

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### 🎨 Enhancements
 
+- [#246](https://github.com/estruyf/vscode-front-matter/issues/246): Support to add multiple tags/keywords/taxonomy via comma separated values
 - [#293](https://github.com/estruyf/vscode-front-matter/issues/293): Support added for setting preview images in block fields
 - [#294](https://github.com/estruyf/vscode-front-matter/issues/294): Full-text search allows you to search through all your page content
 

src/panelWebView/components/TagPicker.tsx

@@ -149,6 +149,43 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
     return !selected.includes(option) && option.toLowerCase().includes((inputValue || "").toLowerCase());
   };
 
+  /**
+   * Add the new item to the data
+   * @param e 
+   */
+  const onEnterData = useCallback((e: React.KeyboardEvent<HTMLInputElement>, closeMenu: Function) => {
+    if (e.key === "Enter" && e.type === "keydown") {
+      const value = inputRef.current?.value.trim();
+      if (!value) {
+        return;
+      }
+
+      // Split the value by comma
+      const newValues: string[] = [];
+      const values = value.split(",");
+      for (let crntValue of values) {
+        crntValue = crntValue.trim();
+        if (crntValue) {
+          const item = options.find(o => o?.toLowerCase() === crntValue?.toLowerCase());
+          if (item) {
+            newValues.push(item);
+          } else if (freeform) {
+            newValues.push(crntValue);
+          }
+        }
+      }
+
+      const uniqValues = Array.from(new Set([...selected, ...newValues]));
+      setSelected(uniqValues);
+      sendUpdate(uniqValues);
+      setInputValue("");
+      closeMenu();
+    }
+  }, [options, inputRef, selected, freeform]);
+
+  /**
+   * Check if the input is disabled
+   */
   const checkIsDisabled = useCallback(() => {
     if (!limit) {
       return false;
@@ -199,6 +236,7 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
                             ref: inputRef, 
                             onFocus: openMenu as any, 
                             onClick: openMenu as any,
+                            onKeyDown: (e) => onEnterData(e, closeMenu),
                             onBlur: () => { 
                               closeMenu(); 
                               unsetFocus();