Add jgclark output options to tag/mention chooser also

Author: dwertheimer

dwertheimer.Forms/CHANGELOG.md

@@ -4,6 +4,11 @@
 
 See Plugin [README](https://github.com/NotePlan/plugins/blob/main/dwertheimer.Forms/README.md) for details on available commands and use case.
 
+## [1.0.27] 2026-02-08 @dwertheimer
+
+### Added
+- tagChooser and mentionChooser now support a `valueSeparator` option: `comma` (value1,value2), `commaSpace` (value1, value2 — default for readability), or `space` (value1 value2). Form Builder includes a Value Separator dropdown; type definitions, renderer, test examples, and docs updated.
+
 ## [1.0.26] 2026-02-08 @dwertheimer
 
 ### Added

dwertheimer.Forms/README.md

@@ -660,7 +660,8 @@ All fields support these properties:
   key: 'tags',
   label: 'Tags',
   type: 'tag-chooser',
-  returnAsArray: false // false=comma-separated, true=array
+  returnAsArray: false,
+  valueSeparator: 'commaSpace' // when string: 'comma' | 'commaSpace' | 'space' (default: commaSpace)
 }
 ```
 
@@ -670,7 +671,8 @@ All fields support these properties:
   key: 'people',
   label: 'People',
   type: 'mention-chooser',
-  returnAsArray: false
+  returnAsArray: false,
+  valueSeparator: 'commaSpace' // when string: 'comma' | 'commaSpace' | 'space' (default: commaSpace)
 }
 ```
 

dwertheimer.Forms/plugin.json

@@ -4,7 +4,7 @@
   "noteplan.minAppVersion": "3.4.0",
   "plugin.id": "dwertheimer.Forms",
   "plugin.name": "📝 Template Forms",
-  "plugin.version": "1.0.26",
+  "plugin.version": "1.0.27",
   "plugin.releaseStatus": "beta",
   "plugin.lastUpdateInfo": "FolderChooser now shows all folders. Frontmatter Key Chooser supports valueSeparator option -- space, comma, or commaSpace. Thx @jgclark!",
   "plugin.description": "Dynamic Forms for NotePlan using Templating -- fill out a multi-field form and have the data sent to a template for processing",

dwertheimer.Forms/src/FormFieldRenderTest.js

@@ -1261,11 +1261,21 @@ export async function testFormFieldRender(): Promise<void> {
       },
       {
         type: 'tag-chooser',
-        label: 'Tag Chooser (default: string format)',
+        label: 'Tag Chooser (comma+space string)',
         key: 'testTagChooser',
         placeholder: 'Type to search hashtags...',
-        description: 'Multi-select hashtag chooser. Returns comma-separated string like "#tag1,#tag2"',
+        description: 'Multi-select hashtag chooser. Returns string like "#tag1, #tag2" (valueSeparator: commaSpace).',
         returnAsArray: false,
+        valueSeparator: 'commaSpace',
+      },
+      {
+        type: 'tag-chooser',
+        label: 'Tag Chooser (space-separated)',
+        key: 'testTagChooserSpace',
+        placeholder: 'Type to search hashtags...',
+        description: 'Same with valueSeparator: space — returns "#tag1 #tag2".',
+        returnAsArray: false,
+        valueSeparator: 'space',
       },
       {
         type: 'mention-chooser',
@@ -1275,6 +1285,15 @@ export async function testFormFieldRender(): Promise<void> {
         description: 'Multi-select mention chooser. Returns array like ["@mention1", "@mention2"]',
         returnAsArray: true,
       },
+      {
+        type: 'mention-chooser',
+        label: 'Mention Chooser (comma+space string)',
+        key: 'testMentionChooserCommaSpace',
+        placeholder: 'Type to search mentions...',
+        description: 'Returns string like "@user1, @user2" (valueSeparator: commaSpace).',
+        returnAsArray: false,
+        valueSeparator: 'commaSpace',
+      },
       {
         type: 'heading',
         label: 'Frontmatter Key Chooser',

dwertheimer.Forms/src/components/FieldEditor.jsx

@@ -1790,7 +1790,23 @@ export function FieldEditor({ field, allFields, onSave, onCancel, requestFromPlu
                   />
                   Return as Array
                 </label>
-                <div className="field-editor-help">If checked, returns selected values as an array. Otherwise, returns as comma-separated string.</div>
+                <div className="field-editor-help">If checked, returns selected values as an array. Otherwise, returns as string (format set by Value Separator below).</div>
+              </div>
+              <div className="field-editor-row">
+                <label>Value Separator (when not returning array):</label>
+                <select
+                  value={((editedField: any): { valueSeparator?: string }).valueSeparator || 'commaSpace'}
+                  onChange={(e) => {
+                    const updated = { ...editedField }
+                    ;(updated: any).valueSeparator = e.target.value || undefined
+                    setEditedField(updated)
+                  }}
+                >
+                  <option value="comma">Comma (no space) — value1,value2</option>
+                  <option value="commaSpace">Comma with space — value1, value2</option>
+                  <option value="space">Space — value1 value2</option>
+                </select>
+                <div className="field-editor-help">How to join multiple selected values when not returning as array. Comma with space is default for readability.</div>
               </div>
               <div className="field-editor-row">
                 <label>

helpers/react/DynamicDialog/CREATING_NEW_DYNAMICDIALOG_FIELD_TYPES.md

@@ -279,7 +279,7 @@ If your field has custom properties that need to be edited in the Form Builder,
 ) : null}
 ```
 
-For `frontmatter-key-chooser`, the Form Item Editor includes a **Value Separator** dropdown (when not returning as array): Comma (no space), Comma with space, or Space. Look for similar patterns in the file for other field types to see how to add editor UI.
+For multi-select choosers that return a string (`tag-chooser`, `mention-chooser`, `frontmatter-key-chooser`), the Form Item Editor includes a **Value Separator** dropdown (when not returning as array): Comma (no space), Comma with space, or Space. Look for similar patterns in the file for other field types to see how to add editor UI.
 
 ### 7. Test/Examples
 

helpers/react/DynamicDialog/DynamicDialog.jsx

@@ -206,7 +206,7 @@ export type TSettingItem = {
   allowCreate?: boolean, // for tag-chooser and mention-chooser, if true, show "+New" button to create new items (default: true)
   singleValue?: boolean, // for tag-chooser, mention-chooser, and frontmatter-key-chooser, if true, allow selecting only one value (no checkboxes, returns single value) (default: false)
   renderAsDropdown?: boolean, // for tag-chooser, mention-chooser, and frontmatter-key-chooser, if true and singleValue is true, render as dropdown-select instead of filterable chooser (default: false)
-  valueSeparator?: 'comma' | 'commaSpace' | 'space', // for frontmatter-key-chooser (and choosers using ContainedMultiSelectChooser): when returnAsArray false, how to join values: 'comma'=no space, 'commaSpace'=comma+space, 'space'=space-separated
+  valueSeparator?: 'comma' | 'commaSpace' | 'space', // for tag-chooser, mention-chooser, frontmatter-key-chooser: when returnAsArray false, how to join values: 'comma'=no space, 'commaSpace'=comma+space, 'space'=space-separated
   // frontmatter-key-chooser options
   frontmatterKey?: string, // for frontmatter-key-chooser, the frontmatter key to get values for (can be fixed or from sourceKeyKey)
   sourceKeyKey?: string, // Value dependency: for frontmatter-key-chooser, key of another field to get the frontmatter key from dynamically

helpers/react/DynamicDialog/MentionChooser.jsx

@@ -17,7 +17,8 @@ export type MentionChooserProps = {
   disabled?: boolean,
   compactDisplay?: boolean,
   placeholder?: string,
-  returnAsArray?: boolean, // If true, return as array, otherwise return as comma-separated string (default: false)
+  returnAsArray?: boolean, // If true, return as array, otherwise return as string (default: false)
+  valueSeparator?: 'comma' | 'commaSpace' | 'space', // When returnAsArray false: 'comma'=no space, 'commaSpace'=comma+space, 'space'=space-separated (default: 'commaSpace')
   defaultChecked?: boolean, // If true, all items checked by default (default: false)
   includePattern?: string, // Regex pattern to include mentions
   excludePattern?: string, // Regex pattern to exclude mentions
@@ -47,6 +48,7 @@ export function MentionChooser({
   compactDisplay = false,
   placeholder = 'Type to search mentions...',
   returnAsArray = false,
+  valueSeparator = 'commaSpace',
   defaultChecked = false,
   includePattern = '',
   excludePattern = '',
@@ -73,7 +75,7 @@ export function MentionChooser({
   const [loaded, setLoaded] = useState<boolean>(hasInitialMentions) // If preloaded, mark as loaded
   const [loading, setLoading] = useState<boolean>(false)
   // Ref to track if component is mounted (prevents callbacks after unmount)
-  const isMountedRef = useRef<boolean>(true)
+  const isMountedRef = React.useRef<boolean>(true)
 
   // Track mount state to prevent callbacks after unmount
   useEffect(() => {
@@ -207,6 +209,7 @@ export function MentionChooser({
         items={mentions}
         getItemDisplayLabel={getItemDisplayLabel}
         returnAsArray={returnAsArray}
+        valueSeparator={valueSeparator}
         defaultChecked={defaultChecked}
         includePattern={includePattern}
         excludePattern={excludePattern}

helpers/react/DynamicDialog/TagChooser.jsx

@@ -4,7 +4,7 @@
 // A multi-select chooser for hashtags using ContainedMultiSelectChooser
 //--------------------------------------------------------------------------
 
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useRef } from 'react'
 import ContainedMultiSelectChooser from './ContainedMultiSelectChooser.jsx'
 import { DropdownSelectChooser, type DropdownOption } from './DropdownSelectChooser.jsx'
 import { logDebug, logError } from '@helpers/react/reactDev.js'
@@ -17,7 +17,8 @@ export type TagChooserProps = {
   disabled?: boolean,
   compactDisplay?: boolean,
   placeholder?: string,
-  returnAsArray?: boolean, // If true, return as array, otherwise return as comma-separated string (default: false)
+  returnAsArray?: boolean, // If true, return as array, otherwise return as string (default: false)
+  valueSeparator?: 'comma' | 'commaSpace' | 'space', // When returnAsArray false: 'comma'=no space, 'commaSpace'=comma+space, 'space'=space-separated (default: 'commaSpace')
   defaultChecked?: boolean, // If true, all items checked by default (default: false)
   includePattern?: string, // Regex pattern to include tags
   excludePattern?: string, // Regex pattern to exclude tags
@@ -47,6 +48,7 @@ export function TagChooser({
   compactDisplay = false,
   placeholder = 'Type to search hashtags...',
   returnAsArray = false,
+  valueSeparator = 'commaSpace',
   defaultChecked = false,
   includePattern = '',
   excludePattern = '',
@@ -144,27 +146,24 @@ export function TagChooser({
   // Handle creating a new tag
   // Note: Tags in NotePlan are derived from notes, so we can't "create" them in DataStore
   // Instead, we add the new tag to our local list so it can be selected and used in the form
-  const handleCreateTag = useCallback(
-    async (newTag: string): Promise<void> => {
-      // Remove # prefix if present (we store tags without prefix internally)
-      const cleanedTag = newTag.startsWith('#') ? newTag.substring(1) : newTag
-      const trimmedTag = cleanedTag.trim()
+  const handleCreateTag = useCallback(async (newTag: string): Promise<void> => {
+    // Remove # prefix if present (we store tags without prefix internally)
+    const cleanedTag = newTag.startsWith('#') ? newTag.substring(1) : newTag
+    const trimmedTag = cleanedTag.trim()
 
-      if (!trimmedTag) {
-        return
-      }
+    if (!trimmedTag) {
+      return
+    }
 
-      // Add the new tag to our local list if it doesn't already exist
-      setHashtags((prev) => {
-        if (!prev.includes(trimmedTag)) {
-          logDebug('TagChooser', `Added new tag to local list: ${trimmedTag}`)
-          return [...prev, trimmedTag]
-        }
-        return prev
-      })
-    },
-    [],
-  )
+    // Add the new tag to our local list if it doesn't already exist
+    setHashtags((prev) => {
+      if (!prev.includes(trimmedTag)) {
+        logDebug('TagChooser', `Added new tag to local list: ${trimmedTag}`)
+        return [...prev, trimmedTag]
+      }
+      return prev
+    })
+  }, [])
 
   // If renderAsDropdown is true and singleValue is true, render as dropdown
   if (renderAsDropdown && singleValue) {
@@ -207,6 +206,7 @@ export function TagChooser({
         items={hashtags}
         getItemDisplayLabel={getItemDisplayLabel}
         returnAsArray={returnAsArray}
+        valueSeparator={valueSeparator}
         defaultChecked={defaultChecked}
         includePattern={includePattern}
         excludePattern={excludePattern}

helpers/react/DynamicDialog/dialogElementRenderer.js

@@ -1157,6 +1157,7 @@ export function renderItem({
         const compactDisplay = item.compactDisplay || false
         const currentValue = item.value || item.default || ''
         const returnAsArray = (item: any).returnAsArray ?? false
+        const valueSeparator = (item: any).valueSeparator ?? 'commaSpace'
         const defaultChecked = (item: any).defaultChecked ?? false
         const includePattern = (item: any).includePattern || ''
         const excludePattern = (item: any).excludePattern || ''
@@ -1185,6 +1186,7 @@ export function renderItem({
               compactDisplay={compactDisplay}
               placeholder={item.placeholder || 'Type to search hashtags...'}
               returnAsArray={returnAsArray}
+              valueSeparator={valueSeparator}
               defaultChecked={defaultChecked}
               includePattern={includePattern}
               excludePattern={excludePattern}
@@ -1207,6 +1209,7 @@ export function renderItem({
         const compactDisplay = item.compactDisplay || false
         const currentValue = item.value || item.default || ''
         const returnAsArray = (item: any).returnAsArray ?? false
+        const valueSeparator = (item: any).valueSeparator ?? 'commaSpace'
         const defaultChecked = (item: any).defaultChecked ?? false
         const includePattern = (item: any).includePattern || ''
         const excludePattern = (item: any).excludePattern || ''
@@ -1235,6 +1238,7 @@ export function renderItem({
               compactDisplay={compactDisplay}
               placeholder={item.placeholder || 'Type to search mentions...'}
               returnAsArray={returnAsArray}
+              valueSeparator={valueSeparator}
               defaultChecked={defaultChecked}
               includePattern={includePattern}
               excludePattern={excludePattern}