@jupyterlab/codeeditor - npm Package Compare versions

Comparing version 0.19.1 to 1.0.0-alpha.0

lib/editor.d.ts

@@ -265,3 +265,3 @@ import { JSONObject } from '@phosphor/coreutils';
      */
-    type EdgeLocation = 'top' | 'bottom';
+    type EdgeLocation = 'top' | 'topLine' | 'bottom';
     /**
@@ -487,2 +487,10 @@ * A widget that provides a code editor.
         wordWrapColumn: number;
+        /**
+         * Column index at which rulers should be added.
+         */
+        rulers: Array<number>;
+        /**
+         * Wheter to allow code folding
+         */
+        codeFolding: boolean;
     }
@@ -489,0 +497,0 @@ /**

lib/editor.js

@@ -94,2 +94,3 @@ "use strict";
             this._isDisposed = true;
+            this.value.text = '';
             signaling_1.Signal.clearData(this);
@@ -120,4 +121,6 @@ }
         matchBrackets: true,
-        autoClosingBrackets: true
+        autoClosingBrackets: true,
+        rulers: [],
+        codeFolding: false
     };
 })(CodeEditor = exports.CodeEditor || (exports.CodeEditor = {}));

lib/jsoneditor.d.ts

@@ -26,29 +26,29 @@ import { IObservableJSON } from '@jupyterlab/observables';
     /**
-     * The title of the editor.
+     * The editor host node used by the JSON editor.
      */
-    editorTitle: string;
+    readonly headerNode: HTMLDivElement;
     /**
-     * Get the editor host node used by the JSON editor.
+     * The editor host node used by the JSON editor.
      */
-    readonly editorHostNode: HTMLElement;
+    readonly editorHostNode: HTMLDivElement;
     /**
-     * Get the header node used by the JSON editor.
+     * The title node used by the JSON editor.
      */
-    readonly headerNode: HTMLElement;
+    readonly titleNode: HTMLSpanElement;
     /**
-     * Get the title node used by the JSON editor.
+     * Get the collapser node used by the JSON editor.
      */
-    readonly titleNode: HTMLElement;
+    readonly collapserNode: HTMLSpanElement;
     /**
-     * Get the collapser node used by the JSON editor.
+     * The revert button used by the JSON editor.
      */
-    readonly collapserNode: HTMLElement;
+    readonly revertButtonNode: HTMLSpanElement;
     /**
-     * Get the revert button used by the JSON editor.
+     * The commit button used by the JSON editor.
      */
-    readonly revertButtonNode: HTMLElement;
+    readonly commitButtonNode: HTMLSpanElement;
     /**
-     * Get the commit button used by the JSON editor.
+     * The title of the editor.
      */
-    readonly commitButtonNode: HTMLElement;
+    editorTitle: string;
     /**
@@ -55,0 +55,0 @@ * The observable source.

lib/jsoneditor.js

 "use strict";
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const coreutils_1 = require("@phosphor/coreutils");
 const widgets_1 = require("@phosphor/widgets");
-const React = __importStar(require("react"));
-const ReactDOM = __importStar(require("react-dom"));
 const editor_1 = require("./editor");
@@ -72,4 +63,26 @@ /**
         this.addClass(JSONEDITOR_CLASS);
-        ReactDOM.render(Private.createEditorContent(options), this.node);
-        let host = this.editorHostNode;
+        this.headerNode = document.createElement('div');
+        this.headerNode.className = HEADER_CLASS;
+        this.titleNode = document.createElement('span');
+        this.titleNode.className = TITLE_CLASS;
+        this.titleNode.textContent = options.title || '';
+        this.collapserNode = document.createElement('span');
+        this.collapserNode.className = COLLAPSER_CLASS;
+        if (options.collapsible) {
+            this.collapserNode.classList.add(COLLAPSE_ENABLED_CLASS);
+        }
+        this.revertButtonNode = document.createElement('span');
+        this.revertButtonNode.className = REVERT_CLASS;
+        this.revertButtonNode.title = 'Revert changes to data';
+        this.commitButtonNode = document.createElement('span');
+        this.commitButtonNode.className = COMMIT_CLASS;
+        this.commitButtonNode.title = 'Commit changes to data';
+        this.editorHostNode = document.createElement('div');
+        this.editorHostNode.className = HOST_CLASS;
+        this.headerNode.appendChild(this.titleNode);
+        this.headerNode.appendChild(this.collapserNode);
+        this.headerNode.appendChild(this.revertButtonNode);
+        this.headerNode.appendChild(this.commitButtonNode);
+        this.node.appendChild(this.headerNode);
+        this.node.appendChild(this.editorHostNode);
         let model = new editor_1.CodeEditor.Model();
@@ -80,3 +93,3 @@ model.value.text = 'No data!';
         this.model = model;
-        this.editor = options.editorFactory({ host, model });
+        this.editor = options.editorFactory({ host: this.editorHostNode, model });
         this.editor.setOption('readOnly', true);
@@ -95,38 +108,2 @@ this.collapsible = !!options.collapsible;
     /**
-     * Get the editor host node used by the JSON editor.
-     */
-    get editorHostNode() {
-        return this.node.getElementsByClassName(HOST_CLASS)[0];
-    }
-    /**
-     * Get the header node used by the JSON editor.
-     */
-    get headerNode() {
-        return this.node.getElementsByClassName(HEADER_CLASS)[0];
-    }
-    /**
-     * Get the title node used by the JSON editor.
-     */
-    get titleNode() {
-        return this.node.getElementsByClassName(TITLE_CLASS)[0];
-    }
-    /**
-     * Get the collapser node used by the JSON editor.
-     */
-    get collapserNode() {
-        return this.node.getElementsByClassName(COLLAPSER_CLASS)[0];
-    }
-    /**
-     * Get the revert button used by the JSON editor.
-     */
-    get revertButtonNode() {
-        return this.node.getElementsByClassName(REVERT_CLASS)[0];
-    }
-    /**
-     * Get the commit button used by the JSON editor.
-     */
-    get commitButtonNode() {
-        return this.node.getElementsByClassName(COMMIT_CLASS)[0];
-    }
-    /**
      * The observable source.
@@ -355,26 +332,1 @@ */
 exports.JSONEditor = JSONEditor;
-/**
- * The namespace for module private data.
- */
-var Private;
-(function (Private) {
-    /**
-     * Create the JSON Editor node's content.
-     */
-    function createEditorContent(options) {
-        const revertTitle = 'Revert changes to data';
-        const confirmTitle = 'Commit changes to data';
-        const title = options.title || '';
-        const collapseClass = options.collapsible
-            ? `${COLLAPSER_CLASS} ${COLLAPSE_ENABLED_CLASS}`
-            : COLLAPSER_CLASS;
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: HEADER_CLASS },
-                React.createElement("span", { className: TITLE_CLASS }, title),
-                React.createElement("span", { className: collapseClass }),
-                React.createElement("span", { className: REVERT_CLASS, title: revertTitle }),
-                React.createElement("span", { className: COMMIT_CLASS, title: confirmTitle })),
-            React.createElement("div", { className: HOST_CLASS })));
-    }
-    Private.createEditorContent = createEditorContent;
-})(Private || (Private = {}));

lib/widget.d.ts

@@ -25,2 +25,13 @@ import { Message } from '@phosphor/messaging';
     /**
+     * Handle the DOM events for the widget.
+     *
+     * @param event - The DOM event sent to the widget.
+     *
+     * #### Notes
+     * This method implements the DOM `EventListener` interface and is
+     * called in response to events on the notebook panel's node. It should
+     * not be called directly by user code.
+     */
+    handleEvent(event: Event): void;
+    /**
      * Handle `'activate-request'` messages.
@@ -34,2 +45,6 @@ */
     /**
+     * Handle `before-detach` messages for the widget.
+     */
+    protected onBeforeDetach(msg: Message): void;
+    /**
      * A message handler invoked on an `'after-show'` message.
@@ -50,2 +65,19 @@ */
     private _onSelectionsChanged;
+    /**
+     * Handle the `'p-dragenter'` event for the widget.
+     */
+    private _evtDragEnter;
+    /**
+     * Handle the `'p-dragleave'` event for the widget.
+     */
+    private _evtDragLeave;
+    /**
+     * Handle the `'p-dragover'` event for the widget.
+     */
+    private _evtDragOver;
+    /**
+     * Handle the `'p-drop'` event for the widget.
+     */
+    private _evtDrop;
+    private _updateOnShow;
 }
@@ -84,3 +116,7 @@ /**
         selectionStyle?: CodeEditor.ISelectionStyle;
+        /**
+         * Whether to send an update request to the editor when it is shown.
+         */
+        updateOnShow?: boolean;
     }
 }

lib/widget.js

@@ -16,2 +16,6 @@ "use strict";
 /**
+ * A class used to indicate a drop target.
+ */
+const DROP_TARGET_CLASS = 'jp-mod-dropTarget';
+/**
  * RegExp to test for leading whitespace
@@ -37,2 +41,3 @@ */
         editor.model.selections.changed.connect(this._onSelectionsChanged, this);
+        this._updateOnShow = options.updateOnShow !== false;
     }
@@ -56,2 +61,30 @@ /**
     /**
+     * Handle the DOM events for the widget.
+     *
+     * @param event - The DOM event sent to the widget.
+     *
+     * #### Notes
+     * This method implements the DOM `EventListener` interface and is
+     * called in response to events on the notebook panel's node. It should
+     * not be called directly by user code.
+     */
+    handleEvent(event) {
+        switch (event.type) {
+            case 'p-dragenter':
+                this._evtDragEnter(event);
+                break;
+            case 'p-dragleave':
+                this._evtDragLeave(event);
+                break;
+            case 'p-dragover':
+                this._evtDragOver(event);
+                break;
+            case 'p-drop':
+                this._evtDrop(event);
+                break;
+            default:
+                break;
+        }
+    }
+    /**
      * Handle `'activate-request'` messages.
@@ -67,2 +100,7 @@ */
         super.onAfterAttach(msg);
+        let node = this.node;
+        node.addEventListener('p-dragenter', this);
+        node.addEventListener('p-dragleave', this);
+        node.addEventListener('p-dragover', this);
+        node.addEventListener('p-drop', this);
         if (this.isVisible) {
@@ -73,6 +111,18 @@ this.update();
     /**
+     * Handle `before-detach` messages for the widget.
+     */
+    onBeforeDetach(msg) {
+        let node = this.node;
+        node.removeEventListener('p-dragenter', this);
+        node.removeEventListener('p-dragleave', this);
+        node.removeEventListener('p-dragover', this);
+        node.removeEventListener('p-drop', this);
+    }
+    /**
      * A message handler invoked on an `'after-show'` message.
      */
     onAfterShow(msg) {
-        this.update();
+        if (this._updateOnShow) {
+            this.update();
+        }
     }
@@ -120,3 +170,100 @@ /**
     }
+    /**
+     * Handle the `'p-dragenter'` event for the widget.
+     */
+    _evtDragEnter(event) {
+        if (this.editor.getOption('readOnly') === true) {
+            return;
+        }
+        const data = Private.findTextData(event.mimeData);
+        if (data === undefined) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.addClass('jp-mod-dropTarget');
+    }
+    /**
+     * Handle the `'p-dragleave'` event for the widget.
+     */
+    _evtDragLeave(event) {
+        this.removeClass(DROP_TARGET_CLASS);
+        if (this.editor.getOption('readOnly') === true) {
+            return;
+        }
+        const data = Private.findTextData(event.mimeData);
+        if (data === undefined) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /**
+     * Handle the `'p-dragover'` event for the widget.
+     */
+    _evtDragOver(event) {
+        this.removeClass(DROP_TARGET_CLASS);
+        if (this.editor.getOption('readOnly') === true) {
+            return;
+        }
+        const data = Private.findTextData(event.mimeData);
+        if (data === undefined) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        event.dropAction = 'copy';
+        this.addClass(DROP_TARGET_CLASS);
+    }
+    /**
+     * Handle the `'p-drop'` event for the widget.
+     */
+    _evtDrop(event) {
+        if (this.editor.getOption('readOnly') === true) {
+            return;
+        }
+        const data = Private.findTextData(event.mimeData);
+        if (data === undefined) {
+            return;
+        }
+        this.removeClass(DROP_TARGET_CLASS);
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.proposedAction === 'none') {
+            event.dropAction = 'none';
+            return;
+        }
+        const coordinate = {
+            top: event.y,
+            bottom: event.y,
+            left: event.x,
+            right: event.x,
+            x: event.x,
+            y: event.y,
+            width: 0,
+            height: 0
+        };
+        const position = this.editor.getPositionForCoordinate(coordinate);
+        const offset = this.editor.getOffsetAt(position);
+        this.model.value.insert(offset, data);
+    }
 }
 exports.CodeEditorWrapper = CodeEditorWrapper;
+/**
+ * A namespace for private functionality.
+ */
+var Private;
+(function (Private) {
+    /**
+     * Given a MimeData instance, extract the first text data, if any.
+     */
+    function findTextData(mime) {
+        const types = mime.types();
+        const textType = types.find(t => t.indexOf('text') === 0);
+        if (textType === undefined) {
+            return undefined;
+        }
+        return mime.getData(textType);
+    }
+    Private.findTextData = findTextData;
+})(Private || (Private = {}));

package.json

 {
   "name": "@jupyterlab/codeeditor",
-  "version": "0.19.1",
+  "version": "1.0.0-alpha.0",
   "description": "JupyterLab - Abstract Code Editor",
@@ -34,16 +34,15 @@ "homepage": "https://github.com/jupyterlab/jupyterlab",
   "dependencies": {
-    "@jupyterlab/coreutils": "^2.2.1",
-    "@jupyterlab/observables": "^2.1.1",
+    "@jupyterlab/coreutils": "^3.0.0-alpha.0",
+    "@jupyterlab/observables": "^2.2.0-alpha.0",
     "@phosphor/coreutils": "^1.3.0",
     "@phosphor/disposable": "^1.1.2",
+    "@phosphor/dragdrop": "^1.3.0",
     "@phosphor/messaging": "^1.2.2",
     "@phosphor/signaling": "^1.2.2",
-    "@phosphor/widgets": "^1.6.0",
-    "react": "~16.4.2",
-    "react-dom": "~16.4.2"
+    "@phosphor/widgets": "^1.6.0"
   },
   "devDependencies": {
     "rimraf": "~2.6.2",
-    "typedoc": "~0.12.0",
-    "typescript": "~3.1.1"
+    "typedoc": "^0.14.2",
+    "typescript": "~3.3.1"
   },
@@ -53,3 +52,3 @@ "publishConfig": {
   },
-  "gitHead": "7fc900168981e58051253ecc66a18015a052cd2f"
+  "gitHead": "31f68f6d1717b58c344a5fb4f4baf3b123b7c75c"
 }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53638

increased by9.5%

Dependency count

8

decreased by-11.11%

Lines of code

1694

increased by9.72%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@phosphor/dragdrop@^1.3.0

• + Added@jupyterlab/coreutils@3.2.0(transitive)

• + Addedajv@6.12.6(transitive)

• + Addedfast-deep-equal@3.1.3(transitive)

• + Addedfast-json-stable-stringify@2.1.0(transitive)

• + Addedjson-schema-traverse@0.4.1(transitive)

• + Addedjson5@2.2.3(transitive)

• + Addedmoment@2.30.1(transitive)

• + Addedpunycode@2.3.1(transitive)

• + Addeduri-js@4.4.1(transitive)

• - Removedreact@~16.4.2

• - Removedreact-dom@~16.4.2

• - Removed@jupyterlab/coreutils@2.2.1(transitive)

• - Removedajv@5.1.6(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedcall-bind@1.0.8(transitive)

• - Removedcall-bind-apply-helpers@1.0.2(transitive)

• - Removedcall-bound@1.0.3(transitive)

• - Removedco@4.6.0(transitive)

• - Removedcomment-json@1.1.3(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removeddefine-data-property@1.1.4(transitive)

• - Removeddunder-proto@1.0.1(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedes-define-property@1.0.1(transitive)

• - Removedes-errors@1.3.0(transitive)

• - Removedes-object-atoms@1.1.1(transitive)

• - Removedesprima@2.7.3(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removedfunction-bind@1.1.2(transitive)

• - Removedget-intrinsic@1.3.0(transitive)

• - Removedget-proto@1.0.1(transitive)

• - Removedgopd@1.2.0(transitive)

• - Removedhas-property-descriptors@1.0.2(transitive)

• - Removedhas-symbols@1.1.0(transitive)

• - Removedhasown@2.0.2(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisarray@2.0.5(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedjson-parser@1.1.5(transitive)

• - Removedjson-schema-traverse@0.3.1(transitive)

• - Removedjson-stable-stringify@1.2.1(transitive)

• - Removedjsonify@0.0.1(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedmath-intrinsics@1.1.0(transitive)

• - Removedmoment@2.21.0(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedobject-keys@1.1.1(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.4.2(transitive)

• - Removedreact-dom@16.4.2(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedset-function-length@1.2.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.40(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updated@jupyterlab/coreutils@^3.0.0-alpha.0

• Updated@jupyterlab/observables@^2.2.0-alpha.0