@flowdrop/flowdrop 1.5.0 → 1.7.0

package/dist/components/form/FormTextarea.stories.svelte

@@ -1,37 +1,34 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import FormTextarea from "./FormTextarea.svelte";
-  import { fn } from "storybook/test";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import FormTextarea from './FormTextarea.svelte';
+  import { fn } from 'storybook/test';
 
   const { Story } = defineMeta({
-    title: "Form/FormTextarea",
+    title: 'Form/FormTextarea',
     component: FormTextarea,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     argTypes: {
-      value: { control: "text" },
-      placeholder: { control: "text" },
-      rows: { control: { type: "number", min: 1, max: 20 } },
-      required: { control: "boolean" },
-      disabled: { control: "boolean" },
+      value: { control: 'text' },
+      placeholder: { control: 'text' },
+      rows: { control: { type: 'number', min: 1, max: 20 } },
+      required: { control: 'boolean' },
+      disabled: { control: 'boolean' }
     },
     args: {
-      id: "demo-textarea",
-      value: "",
-      onChange: fn(),
-    },
+      id: 'demo-textarea',
+      value: '',
+      onChange: fn()
+    }
   });
 </script>
 
-<Story name="Default" args={{ placeholder: "Enter your message..." }} />
+<Story name="Default" args={{ placeholder: 'Enter your message...' }} />
 
-<Story
-  name="Custom Rows"
-  args={{ rows: 8, placeholder: "Larger text area..." }}
-/>
+<Story name="Custom Rows" args={{ rows: 8, placeholder: 'Larger text area...' }} />
 
 <Story
   name="With Value"
-  args={{ value: "This is a multiline\ntext content\nwith several lines." }}
+  args={{ value: 'This is a multiline\ntext content\nwith several lines.' }}
 />
 
-<Story name="Disabled" args={{ value: "Read-only content", disabled: true }} />
+<Story name="Disabled" args={{ value: 'Read-only content', disabled: true }} />

package/dist/components/form/FormTextarea.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const FormTextarea: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import FormTextarea from "./FormTextarea.svelte";
+import FormTextarea from './FormTextarea.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/form/FormTextarea.svelte

@@ -30,13 +30,13 @@
 
   let {
     id,
-    value = "",
-    placeholder = "",
+    value = '',
+    placeholder = '',
     rows = 4,
     required = false,
     disabled = false,
     ariaDescribedBy,
-    onChange,
+    onChange
   }: Props = $props();
 
   /**
@@ -51,7 +51,7 @@
 <textarea
   {id}
   class="form-textarea"
-  value={value ?? ""}
+  value={value ?? ''}
   {placeholder}
   {rows}
   {disabled}

package/dist/components/form/FormToggle.stories.svelte

@@ -1,23 +1,23 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import FormToggle from "./FormToggle.svelte";
-  import { fn } from "storybook/test";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import FormToggle from './FormToggle.svelte';
+  import { fn } from 'storybook/test';
 
   const { Story } = defineMeta({
-    title: "Form/FormToggle",
+    title: 'Form/FormToggle',
     component: FormToggle,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     argTypes: {
-      value: { control: "boolean" },
-      onLabel: { control: "text" },
-      offLabel: { control: "text" },
-      disabled: { control: "boolean" },
+      value: { control: 'boolean' },
+      onLabel: { control: 'text' },
+      offLabel: { control: 'text' },
+      disabled: { control: 'boolean' }
     },
     args: {
-      id: "demo-toggle",
+      id: 'demo-toggle',
       value: false,
-      onChange: fn(),
-    },
+      onChange: fn()
+    }
   });
 </script>
 
@@ -25,9 +25,6 @@
 
 <Story name="On" args={{ value: true }} />
 
-<Story
-  name="Custom Labels"
-  args={{ value: true, onLabel: "Yes", offLabel: "No" }}
-/>
+<Story name="Custom Labels" args={{ value: true, onLabel: 'Yes', offLabel: 'No' }} />
 
 <Story name="Disabled" args={{ value: true, disabled: true }} />

package/dist/components/form/FormToggle.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const FormToggle: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import FormToggle from "./FormToggle.svelte";
+import FormToggle from './FormToggle.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/form/FormToggle.svelte

@@ -29,11 +29,11 @@
   let {
     id,
     value = false,
-    onLabel = "Enabled",
-    offLabel = "Disabled",
+    onLabel = 'Enabled',
+    offLabel = 'Disabled',
     disabled = false,
     ariaDescribedBy,
-    onChange,
+    onChange
   }: Props = $props();
 
   /**

package/dist/components/form/FormUISchemaRenderer.svelte

@@ -12,18 +12,13 @@
 -->
 
 <script lang="ts">
-  import type { UISchemaElement } from "../../types/uischema.js";
-  import type {
-    ConfigSchema,
-    WorkflowNode,
-    WorkflowEdge,
-    AuthProvider,
-  } from "../../types/index.js";
-  import type { FieldSchema } from "./types.js";
-  import { resolveScopeToKey } from "../../utils/uischema.js";
-  import FormField from "./FormField.svelte";
-  import FormFieldset from "./FormFieldset.svelte";
-  import Self from "./FormUISchemaRenderer.svelte";
+  import type { UISchemaElement } from '../../types/uischema.js';
+  import type { ConfigSchema, WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
+  import type { FieldSchema } from './types.js';
+  import { resolveScopeToKey } from '../../utils/uischema.js';
+  import FormField from './FormField.svelte';
+  import FormFieldset from './FormFieldset.svelte';
+  import Self from './FormUISchemaRenderer.svelte';
 
   interface Props {
     /** The UISchema element to render */
@@ -64,7 +59,7 @@
     nodes,
     edges,
     workflowId,
-    authProvider,
+    authProvider
   }: Props = $props();
 
   function isRequired(key: string): boolean {
@@ -72,12 +67,10 @@
   }
 </script>
 
-{#if element.type === "Control"}
+{#if element.type === 'Control'}
   {@const key = resolveScopeToKey(element.scope)}
   {#if key && schema.properties[key]}
-    {@const fieldSchema = toFieldSchema(
-      schema.properties[key] as Record<string, unknown>,
-    )}
+    {@const fieldSchema = toFieldSchema(schema.properties[key] as Record<string, unknown>)}
     <FormField
       fieldKey={key}
       schema={fieldSchema}
@@ -92,7 +85,7 @@
       onChange={(val) => onFieldChange(key, val)}
     />
   {/if}
-{:else if element.type === "VerticalLayout"}
+{:else if element.type === 'VerticalLayout'}
   <div class="form-uischema-layout form-uischema-layout--vertical">
     {#each element.elements as child, idx (idx)}
       <Self
@@ -111,7 +104,7 @@
       />
     {/each}
   </div>
-{:else if element.type === "Group"}
+{:else if element.type === 'Group'}
   <FormFieldset group={element}>
     <div class="form-uischema-layout form-uischema-layout--vertical">
       {#each element.elements as child, idx (idx)}

package/dist/components/form/FormUISchemaRenderer.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { UISchemaElement } from "../../types/uischema.js";
-import type { ConfigSchema, WorkflowNode, WorkflowEdge, AuthProvider } from "../../types/index.js";
-import type { FieldSchema } from "./types.js";
+import type { UISchemaElement } from '../../types/uischema.js';
+import type { ConfigSchema, WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
+import type { FieldSchema } from './types.js';
 interface Props {
     /** The UISchema element to render */
     element: UISchemaElement;

package/dist/components/form/index.d.ts

@@ -29,22 +29,22 @@
  * />
  * ```
  */
-export type { FieldType, FieldFormat, FieldOption, OneOfItem, BaseFieldProps, TextFieldProps, TextareaFieldProps, NumberFieldProps, ToggleFieldProps, RangeFieldProps, SelectFieldProps, CheckboxGroupFieldProps, ArrayFieldProps, CodeEditorFieldProps, MarkdownEditorFieldProps, TemplateEditorFieldProps, AutocompleteFieldProps, FieldSchema, FormFieldFactoryProps, FormFieldWrapperProps, SchemaFormProps, AutocompleteConfig, } from "./types.js";
-export { isFieldOptionArray, isOneOfArray, oneOfToOptions, normalizeOptions, getSchemaOptions, } from "./types.js";
-export { default as FormField } from "./FormField.svelte";
-export { default as FormFieldWrapper } from "./FormFieldWrapper.svelte";
-export { default as FormTextField } from "./FormTextField.svelte";
-export { default as FormTextarea } from "./FormTextarea.svelte";
-export { default as FormNumberField } from "./FormNumberField.svelte";
-export { default as FormRangeField } from "./FormRangeField.svelte";
-export { default as FormToggle } from "./FormToggle.svelte";
-export { default as FormSelect } from "./FormSelect.svelte";
-export { default as FormCheckboxGroup } from "./FormCheckboxGroup.svelte";
-export { default as FormArray } from "./FormArray.svelte";
-export { default as FormCodeEditor } from "./FormCodeEditor.svelte";
-export { default as FormMarkdownEditor } from "./FormMarkdownEditor.svelte";
-export { default as FormTemplateEditor } from "./FormTemplateEditor.svelte";
-export { default as FormAutocomplete } from "./FormAutocomplete.svelte";
-export { default as FormFieldset } from "./FormFieldset.svelte";
-export { default as FormUISchemaRenderer } from "./FormUISchemaRenderer.svelte";
-export { createTemplateAutocomplete } from "./templateAutocomplete.js";
+export type { FieldType, FieldFormat, FieldOption, OneOfItem, BaseFieldProps, TextFieldProps, TextareaFieldProps, NumberFieldProps, ToggleFieldProps, RangeFieldProps, SelectFieldProps, CheckboxGroupFieldProps, ArrayFieldProps, CodeEditorFieldProps, MarkdownEditorFieldProps, TemplateEditorFieldProps, AutocompleteFieldProps, FieldSchema, FormFieldFactoryProps, FormFieldWrapperProps, SchemaFormProps, AutocompleteConfig } from './types.js';
+export { isFieldOptionArray, isOneOfArray, oneOfToOptions, normalizeOptions, getSchemaOptions } from './types.js';
+export { default as FormField } from './FormField.svelte';
+export { default as FormFieldWrapper } from './FormFieldWrapper.svelte';
+export { default as FormTextField } from './FormTextField.svelte';
+export { default as FormTextarea } from './FormTextarea.svelte';
+export { default as FormNumberField } from './FormNumberField.svelte';
+export { default as FormRangeField } from './FormRangeField.svelte';
+export { default as FormToggle } from './FormToggle.svelte';
+export { default as FormSelect } from './FormSelect.svelte';
+export { default as FormCheckboxGroup } from './FormCheckboxGroup.svelte';
+export { default as FormArray } from './FormArray.svelte';
+export { default as FormCodeEditor } from './FormCodeEditor.svelte';
+export { default as FormMarkdownEditor } from './FormMarkdownEditor.svelte';
+export { default as FormTemplateEditor } from './FormTemplateEditor.svelte';
+export { default as FormAutocomplete } from './FormAutocomplete.svelte';
+export { default as FormFieldset } from './FormFieldset.svelte';
+export { default as FormUISchemaRenderer } from './FormUISchemaRenderer.svelte';
+export { createTemplateAutocomplete } from './templateAutocomplete.js';

package/dist/components/form/index.js

@@ -29,26 +29,26 @@
  * />
  * ```
  */
-export { isFieldOptionArray, isOneOfArray, oneOfToOptions, normalizeOptions, getSchemaOptions, } from "./types.js";
+export { isFieldOptionArray, isOneOfArray, oneOfToOptions, normalizeOptions, getSchemaOptions } from './types.js';
 // Main factory component
-export { default as FormField } from "./FormField.svelte";
+export { default as FormField } from './FormField.svelte';
 // Wrapper component
-export { default as FormFieldWrapper } from "./FormFieldWrapper.svelte";
+export { default as FormFieldWrapper } from './FormFieldWrapper.svelte';
 // Individual field components
-export { default as FormTextField } from "./FormTextField.svelte";
-export { default as FormTextarea } from "./FormTextarea.svelte";
-export { default as FormNumberField } from "./FormNumberField.svelte";
-export { default as FormRangeField } from "./FormRangeField.svelte";
-export { default as FormToggle } from "./FormToggle.svelte";
-export { default as FormSelect } from "./FormSelect.svelte";
-export { default as FormCheckboxGroup } from "./FormCheckboxGroup.svelte";
-export { default as FormArray } from "./FormArray.svelte";
-export { default as FormCodeEditor } from "./FormCodeEditor.svelte";
-export { default as FormMarkdownEditor } from "./FormMarkdownEditor.svelte";
-export { default as FormTemplateEditor } from "./FormTemplateEditor.svelte";
-export { default as FormAutocomplete } from "./FormAutocomplete.svelte";
+export { default as FormTextField } from './FormTextField.svelte';
+export { default as FormTextarea } from './FormTextarea.svelte';
+export { default as FormNumberField } from './FormNumberField.svelte';
+export { default as FormRangeField } from './FormRangeField.svelte';
+export { default as FormToggle } from './FormToggle.svelte';
+export { default as FormSelect } from './FormSelect.svelte';
+export { default as FormCheckboxGroup } from './FormCheckboxGroup.svelte';
+export { default as FormArray } from './FormArray.svelte';
+export { default as FormCodeEditor } from './FormCodeEditor.svelte';
+export { default as FormMarkdownEditor } from './FormMarkdownEditor.svelte';
+export { default as FormTemplateEditor } from './FormTemplateEditor.svelte';
+export { default as FormAutocomplete } from './FormAutocomplete.svelte';
 // UISchema rendering components
-export { default as FormFieldset } from "./FormFieldset.svelte";
-export { default as FormUISchemaRenderer } from "./FormUISchemaRenderer.svelte";
+export { default as FormFieldset } from './FormFieldset.svelte';
+export { default as FormUISchemaRenderer } from './FormUISchemaRenderer.svelte';
 // Template autocomplete utilities
-export { createTemplateAutocomplete } from "./templateAutocomplete.js";
+export { createTemplateAutocomplete } from './templateAutocomplete.js';

package/dist/components/form/templateAutocomplete.d.ts

@@ -10,8 +10,8 @@
  *
  * @module components/form/templateAutocomplete
  */
-import type { Extension } from "@codemirror/state";
-import type { VariableSchema } from "../../types/index.js";
+import type { Extension } from '@codemirror/state';
+import type { VariableSchema } from '../../types/index.js';
 /**
  * Creates a CodeMirror extension for template variable autocomplete.
  *

package/dist/components/form/templateAutocomplete.js

@@ -10,20 +10,20 @@
  *
  * @module components/form/templateAutocomplete
  */
-import { autocompletion, } from "@codemirror/autocomplete";
-import { getChildVariables, getArrayIndexSuggestions, isArrayVariable, hasChildren, } from "../../services/variableService.js";
+import { autocompletion } from '@codemirror/autocomplete';
+import { getChildVariables, getArrayIndexSuggestions, isArrayVariable, hasChildren } from '../../services/variableService.js';
 /**
  * Icon type hints for different variable types in autocomplete dropdown.
  */
 const TYPE_ICONS = {
-    string: "𝑆",
-    number: "#",
-    integer: "#",
-    float: "#",
-    boolean: "☑",
-    array: "[]",
-    object: "{}",
-    mixed: "⋯",
+    string: '𝑆',
+    number: '#',
+    integer: '#',
+    float: '#',
+    boolean: '☑',
+    array: '[]',
+    object: '{}',
+    mixed: '⋯'
 };
 /**
  * Extracts the current variable path being typed inside {{ }}.
@@ -43,16 +43,12 @@ function extractVariablePath(text, pos) {
     let searchPos = pos - 1;
     while (searchPos >= 0) {
         // Check for opening {{
-        if (text[searchPos] === "{" &&
-            searchPos > 0 &&
-            text[searchPos - 1] === "{") {
+        if (text[searchPos] === '{' && searchPos > 0 && text[searchPos - 1] === '{') {
             openBracePos = searchPos - 1;
             break;
         }
         // Check for closing }} - means we're outside an expression
-        if (text[searchPos] === "}" &&
-            searchPos > 0 &&
-            text[searchPos - 1] === "}") {
+        if (text[searchPos] === '}' && searchPos > 0 && text[searchPos - 1] === '}') {
             return null;
         }
         searchPos--;
@@ -70,9 +66,8 @@ function extractVariablePath(text, pos) {
     return {
         path: content,
         startPos: contentStart +
-            (text.slice(contentStart, pos).length -
-                text.slice(contentStart, pos).trimStart().length),
-        isInsideExpression: true,
+            (text.slice(contentStart, pos).length - text.slice(contentStart, pos).trimStart().length),
+        isInsideExpression: true
     };
 }
 /**
@@ -83,35 +78,35 @@ function extractVariablePath(text, pos) {
  */
 function getCompletionType(path) {
     // Empty or only whitespace - show top-level variables
-    if (path.trim() === "") {
-        return { type: "top-level" };
+    if (path.trim() === '') {
+        return { type: 'top-level' };
     }
     // Ends with [ - show array indices
-    if (path.endsWith("[")) {
+    if (path.endsWith('[')) {
         const parentPath = path.slice(0, -1);
-        return { type: "array-index", parentPath };
+        return { type: 'array-index', parentPath };
     }
     // Ends with . - show child properties
-    if (path.endsWith(".")) {
+    if (path.endsWith('.')) {
         const parentPath = path.slice(0, -1);
-        return { type: "property", parentPath };
+        return { type: 'property', parentPath };
     }
     // Otherwise, we're typing a variable name - show matching options
-    const lastDotIndex = path.lastIndexOf(".");
-    const lastBracketIndex = path.lastIndexOf("[");
+    const lastDotIndex = path.lastIndexOf('.');
+    const lastBracketIndex = path.lastIndexOf('[');
     const lastSeparator = Math.max(lastDotIndex, lastBracketIndex);
     if (lastSeparator === -1) {
         // Typing at top level
-        return { type: "top-level" };
+        return { type: 'top-level' };
     }
     // Extract parent path based on separator
     if (lastDotIndex > lastBracketIndex) {
         // Last separator was a dot
-        return { type: "property", parentPath: path.slice(0, lastDotIndex) };
+        return { type: 'property', parentPath: path.slice(0, lastDotIndex) };
     }
     else {
         // Last separator was a bracket
-        return { type: "array-index", parentPath: path.slice(0, lastBracketIndex) };
+        return { type: 'array-index', parentPath: path.slice(0, lastBracketIndex) };
     }
 }
 /**
@@ -121,23 +116,23 @@ function getCompletionType(path) {
  * @param prefix - Prefix to add to the completion label
  * @returns A CodeMirror Completion object
  */
-function variableToCompletion(variable, prefix = "") {
+function variableToCompletion(variable, prefix = '') {
     const icon = TYPE_ICONS[variable.type] ?? TYPE_ICONS.mixed;
     const hasChildProps = variable.properties && Object.keys(variable.properties).length > 0;
-    const isArray = variable.type === "array";
+    const isArray = variable.type === 'array';
     // Add indicator if variable can be drilled into
-    let suffix = "";
+    let suffix = '';
     if (hasChildProps)
-        suffix = ".";
+        suffix = '.';
     else if (isArray)
-        suffix = "[";
+        suffix = '[';
     return {
         label: `${prefix}${variable.name}`,
-        displayLabel: `${icon} ${variable.label ?? variable.name}${suffix ? " " + suffix : ""}`,
+        displayLabel: `${icon} ${variable.label ?? variable.name}${suffix ? ' ' + suffix : ''}`,
         detail: variable.type,
         info: variable.description,
-        type: "variable",
-        boost: hasChildProps || isArray ? 1 : 0, // Boost drillable variables
+        type: 'variable',
+        boost: hasChildProps || isArray ? 1 : 0 // Boost drillable variables
     };
 }
 /**
@@ -155,13 +150,13 @@ function createTemplateCompletionSource(schema) {
         if (!pathInfo) {
             // Check if user just typed {{
             const beforeCursor = text.slice(Math.max(0, pos - 2), pos);
-            if (beforeCursor === "{{") {
+            if (beforeCursor === '{{') {
                 // Show top-level variables
                 const options = Object.values(schema.variables).map((v) => variableToCompletion(v));
                 return {
                     from: pos,
                     options,
-                    validFor: /^[\w.[\]]*$/,
+                    validFor: /^[\w.[\]]*$/
                 };
             }
             return null;
@@ -171,46 +166,42 @@ function createTemplateCompletionSource(schema) {
         let options = [];
         let from = pos;
         switch (completionType.type) {
-            case "top-level": {
+            case 'top-level': {
                 // Show all top-level variables
                 const currentWord = path.trim();
                 options = Object.values(schema.variables)
-                    .filter((v) => currentWord === "" ||
-                    v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
+                    .filter((v) => currentWord === '' || v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
                     .map((v) => variableToCompletion(v));
                 // Calculate from position for replacement
                 from = startPos + (path.length - path.trimStart().length);
                 break;
             }
-            case "property": {
+            case 'property': {
                 // Show child properties of the parent
                 const children = getChildVariables(schema, completionType.parentPath);
-                const currentWord = path.slice(path.lastIndexOf(".") + 1);
+                const currentWord = path.slice(path.lastIndexOf('.') + 1);
                 options = children
-                    .filter((v) => currentWord === "" ||
-                    v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
+                    .filter((v) => currentWord === '' || v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
                     .map((v) => variableToCompletion(v));
                 // From should be right after the last dot
-                from = startPos + path.lastIndexOf(".") + 1;
+                from = startPos + path.lastIndexOf('.') + 1;
                 break;
             }
-            case "array-index": {
+            case 'array-index': {
                 // Check if the parent is actually an array
                 if (isArrayVariable(schema, completionType.parentPath)) {
                     const indices = getArrayIndexSuggestions(5);
-                    const currentIndex = path.slice(path.lastIndexOf("[") + 1);
+                    const currentIndex = path.slice(path.lastIndexOf('[') + 1);
                     options = indices
-                        .filter((idx) => currentIndex === "" || idx.startsWith(currentIndex))
+                        .filter((idx) => currentIndex === '' || idx.startsWith(currentIndex))
                         .map((idx) => ({
                         label: idx,
-                        displayLabel: idx === "*]" ? "* (all items)" : `[${idx}`,
-                        detail: idx === "*]"
-                            ? "Iterate all items"
-                            : `Index ${idx.slice(0, -1)}`,
-                        type: "keyword",
+                        displayLabel: idx === '*]' ? '* (all items)' : `[${idx}`,
+                        detail: idx === '*]' ? 'Iterate all items' : `Index ${idx.slice(0, -1)}`,
+                        type: 'keyword'
                     }));
                     // From should be right after the [
-                    from = startPos + path.lastIndexOf("[") + 1;
+                    from = startPos + path.lastIndexOf('[') + 1;
                 }
                 break;
             }
@@ -221,7 +212,7 @@ function createTemplateCompletionSource(schema) {
         return {
             from,
             options,
-            validFor: /^[\w\]*]*$/,
+            validFor: /^[\w\]*]*$/
         };
     };
 }
@@ -244,20 +235,20 @@ export function createTemplateAutocomplete(schema) {
         override: [createTemplateCompletionSource(schema)],
         activateOnTyping: true,
         defaultKeymap: true,
-        optionClass: () => "cm-template-autocomplete-option",
+        optionClass: () => 'cm-template-autocomplete-option',
         icons: false, // We use our own icons in displayLabel
         addToOptions: [
             {
                 render: (completion) => {
-                    const el = document.createElement("span");
-                    el.className = "cm-template-autocomplete-info";
+                    const el = document.createElement('span');
+                    el.className = 'cm-template-autocomplete-info';
                     if (completion.info) {
                         el.textContent = String(completion.info);
                     }
                     return el;
                 },
-                position: 100,
-            },
-        ],
+                position: 100
+            }
+        ]
     });
 }