feat: edit multiple prefixes

CHANGELOG.md

@@ -1,3 +1,7 @@
+# v0.3.15
+
+Add feature edit multiple prefixes.
+
 # v0.3.14
 
 - Support open text and snippets editor for a JSON file.

src/CodeSnippetsService.ts

@@ -320,8 +320,14 @@ export class CodeSnippetsService {
     const { disabledInfo, vscodeSnippet } = snippet;
 
     let _prefix: unknown = snippet.prefix;
-    if (disabledInfo?.prefix) {
+    if (disabledInfo?.prefix || !Array.isArray(_prefix)) {
       _prefix = vscodeSnippet?.prefix;
+    } else {
+      if (snippet.prefix.length < 2) {
+        _prefix = snippet.prefix?.[0] || "";
+      } else {
+        _prefix = snippet.prefix;
+      }
     }
 
     let _description: unknown = snippet.description;
@@ -385,12 +391,15 @@ export class CodeSnippetsService {
       scope: true,
     };
 
-    let _prefix = "";
+    let _prefix: string | string[] = [];
     if (prefix === undefined) {
       disabledInfo.prefix = false;
     } else if (isString(prefix)) {
       disabledInfo.prefix = false;
-      _prefix = String(prefix);
+      _prefix = [String(prefix)];
+    } else if (Array.isArray(prefix)) {
+      disabledInfo.prefix = false;
+      _prefix = prefix as string[];
     } else {
       _prefix = jsonStringify({
         data: prefix,

src/commands/searchSnippet.ts

@@ -8,6 +8,17 @@ interface ISnippetQuickPickItem extends vscode.QuickPickItem {
   snippet: ISnippet;
 }
 
+function getPrefixString(prefix: ISnippet["prefix"]): string {
+  if (Array.isArray(prefix)) {
+    if (prefix.length < 2) {
+      return prefix?.[0] || "";
+    }
+    return JSON.stringify(prefix);
+  }
+
+  return prefix;
+}
+
 export default async (type?: SnippetType) => {
   let snippets: ISnippet[];
 
@@ -41,7 +52,7 @@ export default async (type?: SnippetType) => {
     }
 
     quickPickItems.push({
-      label: snippet.prefix ?? "",
+      label: getPrefixString(snippet.prefix) ?? "",
       description: desc.join(" | "),
       detail: snippet.body ?? "",
       snippet: snippet,

src/index.d.ts

@@ -23,7 +23,7 @@ export interface ISnippetExtra {
 export interface ISnippet extends ISnippetExtra {
   body: string;
   description: string;
-  prefix: string;
+  prefix: string | string[];
   scope: string;
 }
 

views/code-snippets-editor/src/components/SnippetItem.scss

@@ -1,3 +1,12 @@
+@mixin tag {
+  // vscode-webview-ui-toolkit tag will uppercase
+  background-color: var(--badge-background);
+  border: calc(var(--border-width) * 1px) solid var(--button-border);
+  border-radius: var(--tag-corner-radius);
+  color: var(--badge-foreground);
+  padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
+}
+
 .code-snippets-editor {
   &-snippet {
     &__top {
@@ -11,11 +20,20 @@
       background: var(--code-snippets-editor-snippet-item-background);
       padding-bottom: 0.5rem;
       &__prefix {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        padding-right: 0.5rem;
-        font-weight: 600;
-        color: var(--vscode-settings-headerForeground);
+        min-width: 6em;
+        flex: 0 1 auto;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+
+        &__item {
+          font-weight: 600;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          @include tag;
+        }
       }
     }
 
@@ -30,12 +48,7 @@
         text-overflow: ellipsis;
         font-size: 0.8em;
 
-        // vscode-webview-ui-toolkit tag will uppercase
-        background-color: var(--badge-background);
-        border: calc(var(--border-width) * 1px) solid var(--button-border);
-        border-radius: var(--tag-corner-radius);
-        color: var(--badge-foreground);
-        padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
+        @include tag;
       }
     }
 

views/code-snippets-editor/src/components/SnippetItem.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import Tags from "@yaireo/tagify/dist/react.tagify.jsx";
 import { getState, langIds } from "../common";
 import getVsCode from "../getVsCode";
@@ -24,13 +24,9 @@ function originalInputValueFormat(
   return values.map((item) => item.value).join(",");
 }
 
-const SnippetItem = ({
-  snippet,
-  readonly,
-  clickEdit,
-  saveEdit,
-  cancelEdit,
-}: Props) => {
+const SnippetItem = (props: Props) => {
+  const { readonly, clickEdit, saveEdit, cancelEdit } = props;
+  const [snippet, setSnippet] = useState<ISnippet>(props.snippet);
   const vscode = getVsCode();
   const keyName = snippet[NAME];
   const editing = snippet[EDIT];
@@ -39,19 +35,24 @@ const SnippetItem = ({
   const saveBtnRef = useRef<HTMLButtonElement | null>(null);
   const cancelBtnRef = useRef<HTMLButtonElement | null>(null);
 
-  const handleChange = () => {
+  const handleChange = (changedData?: { prefix?: string[] }) => {
     if (!formRef.current) {
       return;
     }
 
     const data = new FormData(formRef.current);
-    const newSnippet = {
+    const newRawSnippet = {
       name: data.get("name")?.toString() || "",
-      prefix: data.get("prefix")?.toString() || "",
+      prefix: data.getAll("prefix") as string[],
       scope: data.get("scope")?.toString() || "",
       description: data.get("description")?.toString() || "",
       body: data.get("body")?.toString() || "",
     };
+
+    if (changedData?.prefix) {
+      newRawSnippet.prefix = changedData?.prefix;
+    }
+
     const state = getState();
 
     if (snippet[NEW_ITEM]) {
@@ -63,12 +64,17 @@ const SnippetItem = ({
 
       const currentSnippet = state.addingSnippets[index];
 
-      state.addingSnippets.splice(index, 1, {
+      const newSnippet = {
         ...currentSnippet,
-        ...newSnippet,
-      });
+        ...newRawSnippet,
+      };
+
+      state.addingSnippets.splice(index, 1, newSnippet);
 
       vscode.setState(state);
+
+      setSnippet(newSnippet);
+
       return;
     }
 
@@ -78,22 +84,47 @@ const SnippetItem = ({
         return;
       }
 
-      state.editingSnippetObjMap[keyName] = {
+      const newSnippet = {
         ...snippet,
-        ...newSnippet,
+        ...newRawSnippet,
       };
+
+      state.editingSnippetObjMap[keyName] = newSnippet;
+
       vscode.setState(state);
+
+      setSnippet(newSnippet);
+
       return;
     }
   };
 
+  useEffect(() => {
+    setSnippet(props.snippet);
+  }, [props.snippet]);
+
   return (
     <section id={keyName} className="code-snippets-editor-snippet">
       <div hidden={editing}>
         <div className="code-snippets-editor-snippet__top">
-          <span className="code-snippets-editor-snippet__top__prefix">
-            {snippet.prefix}
-          </span>
+          <div className="code-snippets-editor-snippet__top__prefix">
+            {Array.isArray(snippet.prefix) ? (
+              snippet.prefix.map((prefix, index) => {
+                return (
+                  <div
+                    className="code-snippets-editor-snippet__top__prefix__item"
+                    key={index}
+                  >
+                    {prefix}
+                  </div>
+                );
+              })
+            ) : (
+              <div className="code-snippets-editor-snippet__top__prefix__item">
+                {snippet.prefix}
+              </div>
+            )}
+          </div>
 
           <div style={{ flex: "1 1 0" }}></div>
           {!readonly && (
@@ -203,16 +234,61 @@ const SnippetItem = ({
               >
                 {window.i18nText.name}
               </vscode-text-field>
-              <vscode-text-field
-                name="prefix"
-                value={snippet.prefix}
-                onInput={handleChange}
-                {...{
-                  disabled: snippet?.disabledInfo?.prefix || undefined,
-                }}
-              >
-                {window.i18nText.prefix}
-              </vscode-text-field>
+              {Array.isArray(snippet.prefix) ? (
+                snippet.prefix.map((prefix, index) => {
+                  return (
+                    <vscode-text-field
+                      key={index}
+                      name="prefix"
+                      value={prefix}
+                      onInput={handleChange}
+                      {...{
+                        disabled: snippet?.disabledInfo?.prefix || undefined,
+                      }}
+                    >
+                      {window.i18nText.prefix}
+                      {index === 0 ? (
+                        <vscode-button
+                          slot="end"
+                          appearance="icon"
+                          onClick={() => {
+                            handleChange({
+                              prefix: [...snippet.prefix, ""],
+                            });
+                          }}
+                        >
+                          <span className="codicon codicon-plus"></span>
+                        </vscode-button>
+                      ) : (
+                        <vscode-button
+                          slot="end"
+                          appearance="icon"
+                          onClick={() => {
+                            handleChange({
+                              prefix: (snippet.prefix as string[]).filter(
+                                (_, i) => i !== index,
+                              ),
+                            });
+                          }}
+                        >
+                          <span className="codicon codicon-trash"></span>
+                        </vscode-button>
+                      )}
+                    </vscode-text-field>
+                  );
+                })
+              ) : (
+                <vscode-text-field
+                  name="prefix"
+                  value={snippet.prefix}
+                  onInput={handleChange}
+                  {...{
+                    disabled: snippet?.disabledInfo?.prefix || undefined,
+                  }}
+                >
+                  {window.i18nText.prefix}
+                </vscode-text-field>
+              )}
             </div>
             <div style={{ flex: "1 1 0" }}></div>
             <div className="code-snippets-editor-operation">

views/code-snippets-editor/src/typings.d.ts

@@ -41,7 +41,7 @@ export interface ISnippet extends ISnippetExtra {
   name: string;
   body: string;
   description: string;
-  prefix: string;
+  prefix: string | string[];
   scope: string;
   [NAME]: string;
   [EDIT]?: boolean;