Socket
Socket
Sign inDemoInstall

codemirror-mongodb

Package Overview
Dependencies
5
Maintainers
27
Versions
26
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    codemirror-mongodb

Use CodeMirror with MongoDB.


Version published
Weekly downloads
19
increased by280%
Maintainers
27
Install size
4.77 MB
Created
Weekly downloads
 

Readme

Source

:construction: codemirror-mongodb travis npm

Use CodeMirror with MongoDB.

Demo

https://mongodb-js.github.io/codemirror-mongodb

Background

I recently took on the project of rewriting the query input for MongoDB Compass. It’s a real pain when writing queries to have to keep the query language and the shape of the data you’re querying against in your working memory. MongoDB users have more important work to do.

Autocompletion for field names is a feature request we hear a lot at MongoDB. We have a sketch in Compass of what the schema probably looks like. Leveraging schema analysis to enable autocompletion is a feature we’ve been wanting to build for a long time.

After weighing my options and researching the existing libraries I could potentially use, I kept coming back to one, CodeMirror.

CodeMirror is the defacto open-source code editor. CodeMirror is used in the devtools for Firefox, Chrome, and Safari, in Light Table, Adobe Brackets, Bitbucket, and over 100 other projects.

Usage

var CodeMirror = require('codemirror');
require('codemirror-mongodb/addon/hint/mongodb-hint');

CodeMirror.fromTextArea(document.getElementById('oneliner'), {
  lineNumbers: false,
  scrollbarStyle: 'null',
  mode: 'javascript',
  autoCloseBrackets: true,
  matchBrackets: true,
  theme: 'mongodb',
  extraKeys: {
    'Ctrl-Space': 'autocomplete',
    'Shift-Enter': 'parse'
  },
  mongodb: {
    fields: {
      _id: 'ObjectId',
      name: 'String',
      age: 'Number',
      number_of_pets: 'Number',
      addresses: 'Array',
      'addresses.street': 'String'
    }
  }
}).on('beforeChange', function formatAsSingleLine(cm, change) {
  if (change.update) {
    var newtext = change.text.join('').replace(/\n/g, '');
    change.update(change.from, change.to, [newtext]);
  }
  return true;
});

React

var React = require('react');
var CodeMirror = require('react-codemirror');
require('codemirror-mongodb/addon/hint/mongodb-hint');

var App = React.createClass({
  getInitialState: function() {
    return {
      code: "{}",
    };
  },
  updateCode: function(newCode) {
    this.setState({
      code: newCode.replace(/\n/g, ''),
    });
  },
  render: function() {
    const options = {
      lineNumbers: false,
      scrollbarStyle: 'null',
      mode: 'javascript',
      autoCloseBrackets: true,
      matchBrackets: true,
      theme: 'mongodb',
      extraKeys: {
        'Ctrl-Space': 'autocomplete'
      },
      mongodb: {
        fields: {
          _id: 'ObjectId',
          name: 'String',
          age: 'Number',
          number_of_pets: 'Number',
          addresses: 'Array',
          'addresses.street': 'String'
        }
      }
    };
    return <CodeMirror value={this.state.code} onChange={this.updateCode} options={options} />
  }
});

React.render(<App />, document.getElementById('app'));

Autocompletion Behavior

below is the user cursor position when autocomplete triggered or the resulting cursor position when a completion is applied.

Current schema of the selected namespace is:

var fields = {
  _id: 'ObjectId',
  name: 'String',
  age: 'Number',
  number_of_pets: 'Number'
};
  • ${fieldPath} A completion for v1
  • ${fieldPath}: █ Maybe nice to add in the future

Blank Slate

Input {█}

Completions

  • _id
  • name
  • age
  • number_of_pets
Extended field based on field type

Input {_id█}

Completions

  • _id
  • _id: ObjectId("█")

List Field Names With Prefix

Input {n█}

2 matching fields

Completions

  • name
  • number_of_pets
Single Field Matched By Name Prefix

Input {na█}

1 matching field so show extended

Completions

  • name
  • name: █ with starter
  • name: "█" open exact match
  • name: /^█/ open prefix regex
Single Field Exact Match By Name

Input {name█}

Still 1 matching field so show extended

Completions

  • name
  • name: █ with starter
  • name: "█" open exact match
  • name: /^█/ open prefix regex

Specify Expression for Field

Input {name: █}

Completions

  • with starter
  • "█" open exact match
  • /^█/ open prefix regex

List Expression Operators for Field

Input {name: {█}}

Completions

  • $gte
  • $gt
  • $lte
  • $lt
  • $eq
  • $ne
  • $type
  • $size
  • $exists
  • $exists: false field not set
  • $exists: true field is set
  • $in
  • $in: ["█"] for strings, $in: [█] for numbers
  • $nin
  • $nin: ["█"] for strings, n$in: [█] for numbers
  • $all

Todo

License

Apache 2.0

FAQs

Last updated on 01 Dec 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc