Merge pull request #55 from jahn96/editorRestore

Render code mirror to code snippet editor and restore state when the …

Author: kpinnipa

src/CodeSnippetContentsService.ts

@@ -7,7 +7,6 @@ export interface ICodeSnippet {
  language: string;
  // code separated by new line
  code: string[];
- bookmarked: boolean;
  id: number;
  tags?: string[];
 }

src/CodeSnippetDisplay.tsx

@@ -63,6 +63,19 @@ const CODE_SNIPPET_ITEM = 'elyra-codeSnippet-item';
  */
 const JUPYTER_CELL_MIME = 'application/vnd.jupyter.cells';
 
+/**
+ * Icons used for snippet
+ */
+const insertIcon = new LabIcon({
+ name: 'custom-ui-compnents:insert',
+ svgstr: insertSVGstr
+});
+
+const previewIcon = new LabIcon({
+ name: 'custom-ui-compnents:preview',
+ svgstr: carrotSVGstr
+});
+
 /**
  * CodeSnippetDisplay props.
  */
@@ -313,9 +326,6 @@ export class CodeSnippetDisplay extends React.Component<
 
  // add CSS style
  this._dragData.dragImage.classList.add('jp-codesnippet-drag-image');
-
- console.log('draggin');
- console.log(event);
  target.addEventListener('mouseup', this._evtMouseUp, true);
  target.addEventListener('mousemove', this.handleDragMove, true);
 
@@ -327,8 +337,6 @@ export class CodeSnippetDisplay extends React.Component<
  event.preventDefault();
  event.stopPropagation();
 
- console.log('cancelled');
-
  const target = event.target as HTMLElement;
 
  target.removeEventListener('mousemove', this.handleDragMove, true);
@@ -341,18 +349,6 @@ export class CodeSnippetDisplay extends React.Component<
  // event.stopPropagation();
  const data = this._dragData;
 
- // console.log(data);
- // console.log(event);
- // console.log(this);
- // console.log(
- // this.shouldStartDrag(
- // data.pressX,
- // data.pressY,
- // event.clientX,
- // event.clientY
- // )
- // );
-
  if (
  data &&
  this.shouldStartDrag(
@@ -362,8 +358,6 @@ export class CodeSnippetDisplay extends React.Component<
  event.clientY
  )
  ) {
- console.log('moving start');
-
  const idx = (event.target as HTMLElement).id;
  const codeSnippet = this.state.codeSnippets[parseInt(idx)];
 
@@ -397,36 +391,8 @@ export class CodeSnippetDisplay extends React.Component<
  clientX: number,
  clientY: number
  ): Promise<void> {
- /**
- * TODO: check what the current widget is
- */
- // const widget = this.props.getCurrentWidget();
  const target = event.target as HTMLElement;
 
- // if (widget instanceof NotebookPanel) {
- // const notebookWidget = widget as NotebookPanel;
-
- // const kernelInfo = await notebookWidget.sessionContext.session?.kernel
- // ?.info;
- // const kernelLanguage: string = kernelInfo?.language_info.name || '';
-
- // if (
- // kernelLanguage &&
- // codeSnippet.language.toLowerCase() !== kernelLanguage.toLowerCase()
- // ) {
- // const result = await this.showWarnDialog(
- // kernelLanguage,
- // codeSnippet.displayName
- // );
- // if (!result.button.accept) {
- // target.removeEventListener('mousemove', this.handleDragMove, true);
- // target.removeEventListener('mouseup', this._evtMouseUp, true);
- // this._dragData = null;
- // return;
- // }
- // }
- // }
-
  const modelFactory = new ModelFactory();
  const model = modelFactory.createCodeCell({});
  model.value.text = codeSnippet.code.join('\n');
@@ -446,8 +412,6 @@ export class CodeSnippetDisplay extends React.Component<
  const textContent = codeSnippet.code.join('\n');
  this._drag.mimeData.setData('text/plain', textContent);
 
- console.log('removing events');
-
  // Remove mousemove and mouseup listeners and start the drag.
  target.removeEventListener('mousemove', this.handleDragMove, true);
  target.removeEventListener('mouseup', this._evtMouseUp, true);
@@ -469,17 +433,6 @@ export class CodeSnippetDisplay extends React.Component<
  const buttonClasses = [ELYRA_BUTTON_CLASS, BUTTON_CLASS].join(' ');
  const displayName =
  '[' + codeSnippet.language + '] ' + codeSnippet.displayName;
- //this.boldNameOnSearch(this.state.filterValue,displayName,parseInt(id,10));
-
- const insertIcon = new LabIcon({
- name: 'custom-ui-compnents:insert',
- svgstr: insertSVGstr
- });
-
- const previewIcon = new LabIcon({
- name: 'custom-ui-compnents:preview',
- svgstr: carrotSVGstr
- });
 
  const actionButtons = [
  {

src/CodeSnippetEditor.tsx

@@ -4,13 +4,10 @@ import { ReactWidget, showDialog, Dialog } from '@jupyterlab/apputils';
 import React from 'react';
 import { Message } from '@lumino/messaging';
 import { Button } from '@jupyterlab/ui-components';
+// import { DocumentWidget } from '@jupyterlab/docregistry';
 // import { Widget } from '@lumino/widgets';
 
-interface ICodeSnippetEditor {
- namespace: string;
- codeSnippet: ICodeSnippet;
- // onSave: () => void;
-}
+// const CODE_SNIPPET_EDITOR_ID = 'jp-codeSnippet-editor';
 
 export class CodeSnippetEditor extends ReactWidget {
  editorServices: IEditorServices;
@@ -25,17 +22,17 @@ export class CodeSnippetEditor extends ReactWidget {
  this._deactivateField(e, target, label)*/
  editor: CodeEditor.IEditor;
  saved: boolean;
- namespace: string;
  codeSnippet: ICodeSnippet;
+ _hasRefreshedSinceAttach: boolean;
 
- constructor(editorServices: IEditorServices, args: ICodeSnippetEditor) {
+ constructor(editorServices: IEditorServices, args: ICodeSnippet) {
  super();
  // this.id = 'Code-Snippet-Edit';
 
  this.editorServices = editorServices;
- this.namespace = args.namespace;
- this.codeSnippet = args.codeSnippet;
+ this.codeSnippet = args;
  this.saved = false;
+ this._hasRefreshedSinceAttach = false;
 
  this.renderCodeInput = this.renderCodeInput.bind(this);
  }
@@ -45,7 +42,6 @@ export class CodeSnippetEditor extends ReactWidget {
  target: HTMLElement,
  label: HTMLElement
  ): void {
- console.log(e.target);
  const clickedElement = e.target as HTMLElement;
  if (clickedElement.className !== target.className) {
  target.classList.remove('jp-snippet-editor-active');
@@ -66,12 +62,9 @@ export class CodeSnippetEditor extends ReactWidget {
  const label = document.getElementsByClassName(
  labelClassName
  )[0] as HTMLElement;
- console.log(target.classList);
  if (!target.classList.contains('jp-snippet-editor-active')) {
- console.log('YES REAChed.');
  target.classList.add('jp-snippet-editor-active');
  label.classList.add('jp-snippet-editor-label-active');
- console.log(labelClassName);
  }
  window.addEventListener(
  'click',
@@ -80,31 +73,27 @@ export class CodeSnippetEditor extends ReactWidget {
  );
  }
 
- /**
- * Gets called by update() call or when first rendered
- * @param msg
- */
- onActivateRequest(msg: Message): void {
- super.onActivateRequest(msg);
- console.log('updating');
+ // updateCodeSnippetCode(): void {
+
+ // }
+
+ // /**
+ // * Gets called by update() call or when first rendered
+ // * @param msg
+ // */
+ onUpdateRequest(msg: Message): void {
+ super.onUpdateRequest(msg);
+
  if (
  !this.editor &&
  document.getElementById('code-' + this.codeSnippet.id)
  ) {
  const editorFactory = this.editorServices.factoryService.newInlineEditor;
-
  const getMimeTypeByLanguage = this.editorServices.mimeTypeService
  .getMimeTypeByLanguage;
- if (typeof this.codeSnippet === 'string') {
- this.codeSnippet = JSON.parse(this.codeSnippet);
- }
- console.log(this);
- // console.log(this.args);
- const editor = editorFactory({
- // config: { readOnly: false, rulers: [1, 2, 3, 4] },
- host: document.querySelector(
- `#code-${this.codeSnippet.id}`
- ) as HTMLElement,
+
+ this.editor = editorFactory({
+ host: document.getElementById('code-' + this.codeSnippet.id),
  model: new CodeEditor.Model({
  value: this.codeSnippet.code.join('\n'),
  mimeType: getMimeTypeByLanguage({
@@ -113,10 +102,40 @@ export class CodeSnippetEditor extends ReactWidget {
  })
  })
  });
- this.editor = editor;
+ // this.editor.model.value.changed.connect((args: any) => {
+ // this.
+ // })
+ // console.log(document.querySelector(`#code-${this.codeSnippet.id}`));
+ }
+ if (this.isVisible) {
+ this._hasRefreshedSinceAttach = true;
+ this.editor.refresh();
  }
  }
 
+ onAfterAttach(msg: Message): void {
+ super.onAfterAttach(msg);
+
+ this._hasRefreshedSinceAttach = false;
+ if (this.isVisible) {
+ this.update();
+ }
+ }
+
+ onAfterShow(msg: Message): void {
+ if (!this._hasRefreshedSinceAttach) {
+ this.update();
+ }
+ }
+
+ /**
+ * Initial focus on the editor when it gets activated!
+ * @param msg
+ */
+ onActivateRequest(msg: Message): void {
+ this.editor.focus();
+ }
+
  onCloseRequest(msg: Message): void {
  if (this.saved) {
  showDialog({
@@ -150,7 +169,6 @@ export class CodeSnippetEditor extends ReactWidget {
  let target = event.target as HTMLElement;
  while (target && target.parentElement) {
  if (target.classList.contains('jp-codeSnippetInput-editor')) {
- // console.log('hello');
  break;
  }
  target = target.parentElement;
@@ -244,15 +262,19 @@ export class CodeSnippetEditor extends ReactWidget {
  <input
  className="jp-snippet-editor-name"
  defaultValue={this.codeSnippet.displayName}
- onClick={(event): void => this.activeFieldState(event)}
+ onClick={(
+ event: React.MouseEvent<HTMLInputElement, MouseEvent>
+ ): void => this.activeFieldState(event)}
  ></input>
  <label className="jp-snippet-editor-description-label">
  Description
  </label>
  <input
  className="jp-snippet-editor-description"
  defaultValue={this.codeSnippet.description}
- onClick={(event): void => this.activeFieldState(event)}
+ onClick={(
+ event: React.MouseEvent<HTMLInputElement, MouseEvent>
+ ): void => this.activeFieldState(event)}
  ></input>
  {/* <input
  className="jp-snippet-editor-language"

src/CodeSnippetForm.ts

@@ -77,8 +77,7 @@ export function inputDialog(
  description: result.value[1],
  language: result.value[2],
  code: code,
- id: idx,
- bookmarked: false
+ id: idx
  };
  /**
  * TODO: NEED in memory data store instead of making request every time.

src/CodeSnippetWidget.tsx

@@ -104,7 +104,7 @@ export class CodeSnippetWidget extends ReactWidget {
  const paths: string[] = [];
 
  // Clear the current snippets
- // this._codeSnippetWidgetModel.clearSnippets();
+ this._codeSnippetWidgetModel.clearSnippets();
 
  // const data: ICodeSnippet[] = [];
  if (this._codeSnippets.length === 0) {
@@ -132,6 +132,7 @@ export class CodeSnippetWidget extends ReactWidget {
 
  updateCodeSnippets(): void {
  this.fetchData().then((codeSnippets: ICodeSnippet[]) => {
+ console.log(codeSnippets);
  if (codeSnippets !== null) {
  this.renderCodeSnippetsSignal.emit(codeSnippets);
  }

src/CodeSnippetWidgetModel.ts

@@ -66,6 +66,10 @@ export class CodeSnippetWidgetModel implements ICodeSnippetWidgetModel {
  }
  }
 
+ clearSnippets(): void {
+ this._snippets = [];
+ }
+
  updateSnippetContents(): void {
  console.log('updating snippets!');
  this._snippets.forEach(snippet => {

src/PreviewSnippet.tsx

@@ -425,10 +425,7 @@ export namespace Preview {
  editButton.removeClass('jp-Preview-button-hover');
  };
  editButton.node.onclick = (): void => {
- openCodeSnippetEditor({
- namespace: codeSnippet.name,
- codeSnippet: codeSnippet
- });
+ openCodeSnippetEditor(codeSnippet);
  document
  .getElementsByClassName('drag-hover')
  [prev._id].classList.remove('drag-hover-clicked');