Created duplicate alert for language tags in editor.

Author: kpinnipa

src/CodeSnippetDisplay.tsx

@@ -1504,15 +1504,17 @@ export class CodeSnippetDisplay extends React.Component<
     editSnip.className = CODE_SNIPPET_MORE_OTPIONS_EDIT;
     editSnip.textContent = 'Edit snippet';
     editSnip.onclick = (): void => {
-      const allTags = this.getActiveTags()[0];
+      const allSnippetTags = this.getActiveTags()[0]; // snippet tags only
+      const allLangTags = this.getActiveTags()[1];
       this.props.openCodeSnippetEditor({
         name: codeSnippet.name,
         description: codeSnippet.description,
         language: codeSnippet.language,
         code: codeSnippet.code,
         id: codeSnippet.id,
-        selectedTags: codeSnippet.tags,
-        allTags: allTags,
+        selectedTags: codeSnippet.tags, // snippet tags
+        allSnippetTags: allSnippetTags,
+        allLangTags: allLangTags,
         fromScratch: false,
       });
       this.removeOptionsNode();
@@ -1563,7 +1565,8 @@ export class CodeSnippetDisplay extends React.Component<
                 code: [],
                 id: this.state.codeSnippets.length,
                 selectedTags: [],
-                allTags: this.getActiveTags()[0],
+                allSnippetTags: this.getActiveTags()[0],
+                allLangTags: this.getActiveTags()[1],
                 fromScratch: true,
               });
             }}

src/CodeSnippetEditor.tsx

@@ -58,7 +58,8 @@ export interface ICodeSnippetEditorMetadata {
   code: string[];
   id: number;
   selectedTags: string[];
-  allTags: string[];
+  allSnippetTags: string[];
+  allLangTags: string[];
   fromScratch: boolean;
 }
 
@@ -489,7 +490,7 @@ export class CodeSnippetEditor extends ReactWidget {
     }
 
     this._codeSnippetEditorMetaData.selectedTags = selectedTags;
-    this._codeSnippetEditorMetaData.allTags = allTags;
+    this._codeSnippetEditorMetaData.allSnippetTags = allTags;
 
     this.saved = false;
   }
@@ -595,7 +596,8 @@ export class CodeSnippetEditor extends ReactWidget {
           <label className={CODE_SNIPPET_EDITOR_LABEL}>Tags</label>
           <CodeSnippetEditorTags
             selectedTags={this.codeSnippetEditorMetadata.selectedTags}
-            tags={this.codeSnippetEditorMetadata.allTags}
+            snippetTags={this.codeSnippetEditorMetadata.allSnippetTags}
+            langTags={this.codeSnippetEditorMetadata.allLangTags}
             handleChange={this.handleChangeOnTag}
           />
         </section>

src/CodeSnippetEditorTags.tsx

@@ -6,8 +6,9 @@ import { checkIcon, addIcon } from '@jupyterlab/ui-components';
 import React from 'react';
 
 interface ICodeSnippetEditorTagProps {
-  selectedTags: string[];
-  tags: string[];
+  selectedTags: string[]; // selected snippet tags only
+  snippetTags: string[]; // snippet tags only
+  langTags: string[];
   handleChange: (selectedTags: string[], allTags: string[]) => void;
 }
 
@@ -44,7 +45,7 @@ export class CodeSnippetEditorTags extends React.Component<
   componentDidMount(): void {
     this.setState({
       selectedTags: this.props.selectedTags ? this.props.selectedTags : [],
-      tags: this.props.tags ? this.props.tags : [],
+      tags: this.props.snippetTags ? this.props.snippetTags : [],
       plusIconShouldHide: false,
       addingNewTag: false,
     });
@@ -54,7 +55,7 @@ export class CodeSnippetEditorTags extends React.Component<
     if (prevProps !== this.props) {
       this.setState({
         selectedTags: this.props.selectedTags ? this.props.selectedTags : [],
-        tags: this.props.tags ? this.props.tags : [],
+        tags: this.props.snippetTags ? this.props.snippetTags : [],
       });
     }
   }
@@ -117,6 +118,13 @@ export class CodeSnippetEditorTags extends React.Component<
         return;
       }
 
+      if (this.props.langTags.includes(inputElement.value)) {
+        alert(
+          'This tag already exists in language tags!\nIf you want to create this tag, lowercase the first letter.'
+        );
+        return;
+      }
+
       const newTag = inputElement.value;
 
       // update state all tag and selected tag

src/FilterTools.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 
 interface IFilterSnippetProps {
   languages: string[];
-  allTags: string[][]; // change to [[snip], lang]]
+  allTags: string[][]; // change to [[snip], [lang]]
   onFilter: (searchValue: string, filterTags: string[]) => void;
 }
 

src/index.ts

@@ -281,7 +281,8 @@ function activateCodeSnippet(
         code: editorMetadata.code,
         id: editorMetadata.id,
         selectedTags: editorMetadata.selectedTags,
-        allTags: editorMetadata.allTags,
+        allSnippetTags: editorMetadata.allSnippetTags,
+        allLangTags: editorMetadata.allLangTags,
         fromScratch: editorMetadata.fromScratch,
       };
     },