temp

zjffun · May 19, 2024 · a4cbcd4 · a4cbcd4
1 parent c7f8f00
commit a4cbcd4
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -361,7 +361,6 @@
     "compile-web": "webpack --mode production --devtool hidden-source-map",
     "pretest-web": "yarn run compile-web",
     "test-web": "vscode-test-web ./test.temp --browserType=chromium --extensionDevelopmentPath=. --extensionTestsPath=dist/web/test/suite/index.js",
-    "change-registry": "node ./yarn.lock.change-registry.mjs",
     "_vscode:pack": "vsce package",
     "_vscode:install": "ls snippetsmanager-*.vsix | xargs code --install-extension",
     "_vscode:uninstall": "code --uninstall-extension zjffun.snippetsmanager"
@@ -381,6 +380,7 @@
     "@vscode/test-electron": "^2.3.9",
     "@vscode/test-web": "^0.0.34",
     "@vscode/vsce": "^2.26.0",
+    "@yaireo/tagify": "^4.26.5",
     "assert": "^2.0.0",
     "concurrently": "^8.2.2",
     "css-loader": "^6.4.0",
@@ -395,6 +395,7 @@
     "mocha": "^8.4.0",
     "nanoid": "^4.0.0",
     "process": "^0.11.10",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "sass": "^1.62.0",

diff --git a/views/code-snippets-editor/src/common.ts b/views/code-snippets-editor/src/common.ts
@@ -11,3 +11,77 @@ export function getState(): Required<IVscodeState> {
     scrollY: state?.scrollY || 0,
   };
 }
+
+export const langIds = [
+  "abap",
+  "bat",
+  "bibtex",
+  "clojure",
+  "coffeescript",
+  "c",
+  "cpp",
+  "csharp",
+  "dockercompose",
+  "css",
+  "cuda-cpp",
+  "d",
+  "pascal",
+  "diff",
+  "dockerfile",
+  "erlang",
+  "fsharp",
+  "git-commit",
+  "git-rebase",
+  "go",
+  "groovy",
+  "handlebars",
+  "haml",
+  "haskell",
+  "html",
+  "ini",
+  "java",
+  "javascript",
+  "javascriptreact",
+  "json",
+  "jsonc",
+  "julia",
+  "latex",
+  "less",
+  "lua",
+  "makefile",
+  "markdown",
+  "objective-c",
+  "objective-cpp",
+  "ocaml",
+  "pascal",
+  "perl",
+  "perl6",
+  "php",
+  "plaintext",
+  "powershell",
+  "jade",
+  "pug",
+  "python",
+  "r",
+  "razor",
+  "ruby",
+  "rust",
+  "scss",
+  "sass",
+  "shaderlab",
+  "shellscript",
+  "slim",
+  "sql",
+  "stylus",
+  "svelte",
+  "swift",
+  "typescript",
+  "typescriptreact",
+  "tex",
+  "vb",
+  "vue",
+  "vue-html",
+  "xml",
+  "xsl",
+  "yaml",
+];
diff --git a/views/code-snippets-editor/src/components/SnippetItem.scss b/views/code-snippets-editor/src/components/SnippetItem.scss
@@ -36,6 +36,30 @@
         color: var(--badge-foreground);
         padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
       }
+
+      .tags-input {
+        background: var(--input-background);
+        .tagify {
+          --tags-border-color: none;
+          --tags-hover-border-color: none;
+          --tags-focus-border-color: none;
+          --tag-bg: var(--badge-background);
+          --tag-hover: var(--badge-background);
+          --tag-text-color: var(--badge-foreground);
+          --tag-text-color--edit: var(--badge-foreground);
+          --tag-invalid-bg: var(--badge-background);
+          --tag-invalid-color: var(--vscode-errorForeground);
+          --tag-remove-bg: var(--badge-background);
+          --tag-remove-btn-color: var(--badge-foreground);
+          --tag-remove-btn-bg: none;
+          --tag-remove-btn-bg--hover: none;
+          --input-color: var(--input-foreground);
+          --placeholder-color: rgba(0, 0, 0, 0.4);
+          --placeholder-color-focus: rgba(0, 0, 0, 0.25);
+          --loader-size: 0.8em;
+          --readonly-striped: 1;
+        }
+      }
     }
 
     &__desc {

diff --git a/views/code-snippets-editor/src/components/SnippetItem.tsx b/views/code-snippets-editor/src/components/SnippetItem.tsx
@@ -1,9 +1,11 @@
 import { useRef } from "react";
-import { getState } from "../common";
+import Tags from "@yaireo/tagify/dist/react.tagify.jsx";
+import { getState, langIds } from "../common";
 import getVsCode from "../getVsCode";
 import { EDIT, NAME, NEW_ITEM } from "../symbols";
 import { ISnippet } from "../typings";
 
+import "@yaireo/tagify/dist/tagify.css";
 import "./SnippetItem.scss";
 
 interface Props {
@@ -191,15 +193,6 @@ const SnippetItem = ({
               >
                 {window.i18nText.prefix}
               </vscode-text-field>
-              <vscode-text-field
-                name="scope"
-                value={snippet.scope}
-                onInput={handleChange}
-                tab-goto-key={`${keyName}-scope-input`}
-                tab-goto={`[tab-goto-key="${keyName}-description-input"]`}
-              >
-                {window.i18nText.scope}
-              </vscode-text-field>
             </div>
             <div style={{ flex: "1 1 0" }}></div>
             <div className="code-snippets-editor-operation">
@@ -222,6 +215,29 @@ const SnippetItem = ({
               </vscode-button>
             </div>
           </div>
+
+          {/* <vscode-text-field
+                name="scope"
+                value={snippet.scope}
+                onInput={handleChange}
+                tab-goto-key={`${keyName}-scope-input`}
+                tab-goto={`[tab-goto-key="${keyName}-description-input"]`}
+              >
+                {window.i18nText.scope}
+              </vscode-text-field> */}
+          <div
+            className="code-snippets-editor-snippet__scope"
+            tab-goto-key={`${keyName}-scope-input`}
+            tab-goto={`[tab-goto-key="${keyName}-description-input"]`}
+          >
+            <Tags
+              name="scope"
+              whitelist={langIds}
+              placeholder="Add Scopes"
+              defaultValue={snippet.scope} // initial value
+            />
+          </div>
+
           <div className="code-snippets-editor-snippet__desc">
             <vscode-text-field
               name="description"

diff --git a/views/code-snippets-editor/src/global.d.ts b/views/code-snippets-editor/src/global.d.ts
@@ -0,0 +1 @@
+declare module "@yaireo/tagify/dist/react.tagify.jsx";
diff --git a/views/code-snippets-editor/webpack.config.js b/views/code-snippets-editor/webpack.config.js
@@ -50,6 +50,15 @@ const config = {
           "sass-loader",
         ],
       },
+      {
+        test: /\.css$/i,
+        use: [
+          // Creates `style` nodes from JS strings
+          MiniCssExtractPlugin.loader,
+          // Translates CSS into CommonJS
+          "css-loader",
+        ],
+      },
     ],
   },
   resolve: {

diff --git a/yarn.lock b/yarn.lock
@@ -834,6 +834,11 @@
   resolved "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+"@yaireo/tagify@^4.26.5":
+  version "4.26.5"
+  resolved "https://registry.npmjs.org/@yaireo/tagify/-/tagify-4.26.5.tgz#d9293ff0a0dfde0e8b1422383b87820e43f85151"
+  integrity sha512-WcNQFjmH7/Llfr81NGZnalUpry4PrgDN2bdrgQcN51gNdMC8zUsR1AmAHL6yW4qmeGFg0ZLbtjVpsgKHG+MIww==
+
 accepts@^1.3.5, accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
   version "1.3.8"
   resolved "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
@@ -4372,7 +4377,7 @@ log-symbols@4.0.0:
   dependencies:
     chalk "^4.0.0"
 
-loose-envify@^1.1.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -5372,6 +5377,15 @@ progress@^2.0.0:
   resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -5470,6 +5484,11 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"