Remove the restrictions in name and description of a snippet and fixed a bug in codeSnippetEditor

Author: jahn96

src/CodeSnippetDisplay.tsx

@@ -94,6 +94,7 @@ import {
   qsharpIcon,
   sasIcon,
 } from './CodeSnippetLanguages';
+import { ICodeSnippetEditorMetadata } from './CodeSnippetEditor';
 
 /**
  * The CSS class added to code snippet widget.
@@ -153,7 +154,7 @@ interface ICodeSnippetDisplayProps {
   codeSnippetManager: CodeSnippetService;
   app: JupyterFrontEnd;
   getCurrentWidget: () => Widget;
-  openCodeSnippetEditor: (args: any) => void;
+  openCodeSnippetEditor: (args: ICodeSnippetEditorMetadata) => void;
   editorServices: IEditorServices;
   updateCodeSnippetWidget: () => void;
 }
@@ -631,7 +632,6 @@ export class CodeSnippetDisplay extends React.Component<
   ): void {
     const target = event.target as HTMLElement;
     let top: number;
-    console.log(target.tagName);
     if (target.tagName === 'path') {
       top = target.getBoundingClientRect().top + 10;
     } else {
@@ -1476,7 +1476,8 @@ export class CodeSnippetDisplay extends React.Component<
                 description: '',
                 language: 'Python',
                 code: [],
-                id: 0,
+                id: this.state.codeSnippets.length,
+                selectedTags: [],
                 allTags: this.getActiveTags(),
                 fromScratch: true,
               });

src/CodeSnippetEditor.tsx

@@ -49,11 +49,6 @@ const CODE_SNIPPET_EDITOR_MIRROR = 'jp-codeSnippetInput-editor';
 const CODE_SNIPPET_EDITOR_INPUTAREA = 'jp-codeSnippetInputArea';
 const CODE_SNIPPET_EDITOR_INPUTAREA_MIRROR = 'jp-codeSnippetInputArea-editor';
 
-const CODE_SNIPPET_EDITOR_INPUTNAME_VALIDITY =
-  'jp-codeSnippet-inputName-validity';
-const CODE_SNIPPET_EDITOR_INPUTDESC_VALIDITY =
-  'jp-codeSnippet-inputDesc-validity';
-
 const EDITOR_DIRTY_CLASS = 'jp-mod-dirty';
 
 export interface ICodeSnippetEditorMetadata {
@@ -85,7 +80,6 @@ export class CodeSnippetEditor extends ReactWidget {
     args: ICodeSnippetEditorMetadata
   ) {
     super();
-
     this.addClass(CODE_SNIPPET_EDITOR);
     this.contentsService = CodeSnippetService.getCodeSnippetService();
     this.editorServices = editorServices;
@@ -364,18 +358,6 @@ export class CodeSnippetEditor extends ReactWidget {
       message += 'Name must be filled out\n';
       status = false;
     }
-    if (name.match(/[^a-zA-Z0-9_]+/)) {
-      message += 'Wrong format of the name\n';
-      status = false;
-    }
-    // if (description === '') {
-    //   message += 'Description must be filled out\n';
-    //   status = false;
-    // }
-    if (description.match(/[^a-zA-Z0-9_ ,.?!]+/)) {
-      message += 'Wrong format of the description\n';
-      status = false;
-    }
     if (language === '') {
       message += 'Language must be filled out';
       status = false;
@@ -579,10 +561,9 @@ export class CodeSnippetEditor extends ReactWidget {
           <input
             className={CODE_SNIPPET_EDITOR_NAME_INPUT}
             defaultValue={this._codeSnippetEditorMetaData.name}
-            placeholder={'Ex. starter_code'}
+            placeholder={'Ex. starter code'}
             type="text"
             required
-            pattern={'[a-zA-Z0-9_]+'}
             onMouseDown={(
               event: React.MouseEvent<HTMLInputElement, MouseEvent>
             ): void => this.activeFieldState(event)}
@@ -591,11 +572,6 @@ export class CodeSnippetEditor extends ReactWidget {
             }}
             onBlur={this.handleOnBlur}
           ></input>
-          <p className={CODE_SNIPPET_EDITOR_INPUTNAME_VALIDITY}>
-            {
-              'Name of the code snippet MUST be alphanumeric or composed of underscore(_)'
-            }
-          </p>
           <label className={CODE_SNIPPET_EDITOR_LABEL}>
             Description (optional)
           </label>
@@ -604,7 +580,6 @@ export class CodeSnippetEditor extends ReactWidget {
             defaultValue={this._codeSnippetEditorMetaData.description}
             placeholder={'Description'}
             type="text"
-            pattern={'[a-zA-Z0-9_ ,.?!]+'}
             onMouseDown={(
               event: React.MouseEvent<HTMLInputElement, MouseEvent>
             ): void => this.activeFieldState(event)}
@@ -613,11 +588,6 @@ export class CodeSnippetEditor extends ReactWidget {
             }}
             onBlur={this.handleOnBlur}
           ></input>
-          <p className={CODE_SNIPPET_EDITOR_INPUTDESC_VALIDITY}>
-            {
-              'Description of the code snippet MUST be alphanumeric but can include space or punctuation'
-            }
-          </p>
           <label className={CODE_SNIPPET_EDITOR_LABEL}>
             Language (required)
           </label>

src/CodeSnippetInputDialog.ts

@@ -27,8 +27,6 @@ const FILE_DIALOG_CLASS = 'jp-codeSnippet-fileDialog';
  */
 const CODE_SNIPPET_DIALOG_INPUT = 'jp-codeSnippet-dialog-input';
 const CODE_SNIPPET_INPUTTAG_PLUS_ICON = 'jp-codeSnippet-inputTag-plusIcon';
-const CODE_SNIPPET_INPUTNAME_VALIDITY = 'jp-codeSnippet-inputName-validity';
-const CODE_SNIPPET_INPUTDESC_VALIDITY = 'jp-codeSnippet-inputDesc-validity';
 const CODE_SNIPPET_INPUTTAG_LIST = 'jp-codeSnippet-inputTagList';
 const CODE_SNIPPET_INPUT_TAG = 'jp-codeSnippet-inputTag';
 const CODE_SNIPPET_INPUT_TAG_CHECK = 'jp-codeSnippet-inputTag-check';
@@ -229,23 +227,12 @@ export function validateForm(
   let status = true;
   let message = '';
   const name = input.value[0];
-  const description = input.value[1];
   const language = input.value[2];
 
   if (name === '') {
     message += 'Name must be filled out\n';
     status = false;
   }
-  if (name.match(/[^a-zA-Z0-9_]+/)) {
-    //allow lowercase, uppercase, alphanumeric, and underscore
-    message += 'Wrong format of the name\n';
-    status = false;
-  }
-  if (description.match(/[^a-zA-Z0-9_ ,.?!]+/)) {
-    //alphanumeric but can include space or punctuation
-    message += 'Wrong format of the description\n';
-    status = false;
-  }
   if (language === '') {
     message += 'Language must be filled out\n';
     status = false;
@@ -254,6 +241,7 @@ export function validateForm(
     message += 'Language must be one of the options';
     status = false;
   }
+  // TODO: change it to a better UI
   if (status === false) {
     alert(message);
   }
@@ -315,29 +303,20 @@ class Private {
   static createInputNode(tags: string[]): HTMLElement {
     Private.allTags = tags;
     const body = document.createElement('form');
-    const nameValidity = document.createElement('p');
-    nameValidity.textContent =
-      'Name of the code snippet MUST be alphanumeric, or composed of underscore(_)';
-    nameValidity.className = CODE_SNIPPET_INPUTNAME_VALIDITY;
-
-    const descriptionValidity = document.createElement('p');
-    descriptionValidity.textContent =
-      'Description of the code snippet MUST be alphanumeric but can include space or punctuation';
-    descriptionValidity.className = CODE_SNIPPET_INPUTDESC_VALIDITY;
 
     const nameTitle = document.createElement('label');
     nameTitle.textContent = 'Snippet Name (required)';
     const name = document.createElement('input');
     name.className = CODE_SNIPPET_DIALOG_INPUT;
     name.required = true;
-    name.pattern = '[a-zA-Z0-9_]+';
+    name.placeholder = 'Ex. starter code';
     name.onblur = Private.handleOnBlur;
 
     const descriptionTitle = document.createElement('label');
     descriptionTitle.textContent = 'Description (optional)';
     const description = document.createElement('input');
     description.className = CODE_SNIPPET_DIALOG_INPUT;
-    description.pattern = '[a-zA-Z0-9_ ,.?!]+';
+    description.placeholder = 'Description';
     description.onblur = Private.handleOnBlur;
 
     const languageTitle = document.createElement('label');
@@ -391,10 +370,8 @@ class Private {
 
     body.appendChild(nameTitle);
     body.appendChild(name);
-    body.appendChild(nameValidity);
     body.appendChild(descriptionTitle);
     body.appendChild(description);
-    body.appendChild(descriptionValidity);
     body.appendChild(languageTitle);
     body.appendChild(languageInput);
     body.appendChild(languageOption);

src/CodeSnippetWidget.tsx

@@ -336,7 +336,7 @@ export class CodeSnippetWidget extends ReactWidget {
               codeSnippetManager={this.codeSnippetManager}
               app={this.app}
               getCurrentWidget={this.getCurrentWidget}
-              openCodeSnippetEditor={this.openCodeSnippetEditor.bind(this)}
+              openCodeSnippetEditor={this.openCodeSnippetEditor}
               editorServices={this.editorServices}
               updateCodeSnippetWidget={this.updateCodeSnippetWidget}
             />

src/index.ts

@@ -40,8 +40,6 @@ import {
   ICodeSnippetEditorMetadata,
 } from './CodeSnippetEditor';
 import { CodeSnippetService } from './CodeSnippetService';
-// import { ServerConnection, SettingManager } from '@jupyterlab/services';
-// import { URLExt } from '@jupyterlab/coreutils';
 
 const CODE_SNIPPET_EXTENSION_ID = 'code-snippet-extension';
 
@@ -104,12 +102,14 @@ function activateCodeSnippet(
     // codeSnippetEditors are in the main area
     const widgetId = `jp-codeSnippet-editor-${args.id}`;
 
+    // when the editor is already open
     const openEditor = find(
       app.shell.widgets('main'),
       (widget: Widget, _: number) => {
         return widget.id === widgetId;
       }
     );
+
     if (openEditor) {
       app.shell.activateById(widgetId);
       return;
@@ -199,15 +199,18 @@ function activateCodeSnippet(
             resultArray.push(indexedInput[i]); //push cell code lines into result
           }
         }
-        CodeSnippetInputDialog(codeSnippetWidget, resultArray, 0);
+        CodeSnippetInputDialog(
+          codeSnippetWidget,
+          resultArray,
+          codeSnippetWidget.codeSnippetManager.snippets.length
+        );
       } else {
         CodeSnippetInputDialog(
           codeSnippetWidget,
           highlightedCode.split('\n'),
-          0
+          codeSnippetWidget.codeSnippetManager.snippets.length
         );
       }
-      // if highlightedCode is empty, check the code of the entire cell.
     },
   });
 
@@ -266,6 +269,7 @@ function activateCodeSnippet(
         id: editorMetadata.id,
         selectedTags: editorMetadata.selectedTags,
         allTags: editorMetadata.allTags,
+        fromScratch: editorMetadata.fromScratch,
       };
     },
     name: (widget) => {

style/base.css

@@ -245,7 +245,7 @@
   margin-left: 2%;
   margin-bottom: 5px;
   font-size: var(--jp-ui-font-size1);
-  color: var(--jp-ui-font-color2);
+  color: var(--jp-ui-font-color0);
 }
 
 .jp-codeSnippet-editor-name,
@@ -270,6 +270,7 @@
   -webkit-appearance: none;
   -moz-appearance: none;
   margin-top: 5px;
+  margin-bottom: 15px;
 }
 
 .jp-codeSnippet-editor-language {
@@ -376,7 +377,7 @@
 }
 
 .jp-codeSnippetInputArea .saveBtn {
-  width: 8%;
+  width: 10%;
   background: var(--jp-brand-color1);
   color: var(--jp-ui-inverse-font-color0);
   align-self: flex-end;
@@ -513,9 +514,6 @@ mark.jp-codeSnippet-search-bolding {
   width: 50px;
 }
 
-/* Cell tag styling */
-/* @import url('~@jupyterlab/celltags/style/base.css'); */
-
 .jp-codeSnippet-tags {
   margin-top: 8px;
 }
@@ -555,6 +553,11 @@ mark.jp-codeSnippet-search-bolding {
   border: var(--jp-border-width) solid var(--jp-error-color1);
 }
 
+.jp-codeSnippet-dialog-input.jp-mod-styled {
+  margin-bottom: 10px;
+  font-size: var(--jp-ui-font-size1);
+}
+
 .jp-codeSnippet-inputName-validity,
 .jp-codeSnippet-inputDesc-validity {
   font-size: var(--jp-ui-font-size0);