Description

Reference: neo4j/neo4j-browser#614

Added in commit: neo4j/neo4j@2e40338

Reproduce Steps

Type in query on screenshot.

Expected Behavior

WHERE should be handled properly.

First of all, thanks for making this cypher editor available on Github. It works nicely and looks good.

Description

We had a problem with an unrelated library (yFiles) once we started using this library. Turns out that, when loading the cypher-editor-support.min.js file of the npm package, the String prototype is overridden. Specifically, String.prototype.hashCode is overridden and this causes a problem withthe other library, because it behaves differently from the standard hashCode function.

Reproduce Steps

Create a simple application with yFiles, then load cypher-editor-support.min.js (or see below at Current Behaviour).

Expected Behavior

Loading Cypher Editor Support should not pollute the global namespace.

Current Behavior

This piece of code demonstrates that the hashCode changes after loading the Cypher Editor Support library.

const hashCode = String.prototype.hashCode;
require('cypher-editor-support/dist/cypher-editor-support.min.js');
console.log(hashCode === String.prototype.hashCode); // logs `false`

Can you propose a solution?

I cannot find any String prototype overrides in the source code of Cypher Editor Support itself, only in the cypher-editor-support.min.js. Therefore, I think one of its dependencies is doing this. The authors of yFiles have encountered a similar problem with antlr. According to them, "this hashCode patching is actually not necessary" so they created a patched fork. If indeed this is indeed the dependency in your library that is polluting the String prototype, perhaps you could use the same one: https://github.com/yWorks/antlr-javascript-runtime

Your Environment

The antlr4 package used by this project for the cypher grammar has several issues with its packaging.

This issue is to track the current state of those issues to facilitate any future work to address them.

We are currently using version 4.10.1 which provides all source files with nothing but es6 exports, but unfortunately that doesn't support commonjs, and also doesn't provide separate entry points for consumption by node vs browser.

This is why the current @neo4j/antlr-browser package exists, as a hack to remove the node specific code so that we can use it for the web.

The newer latest version is 4.12.0 in which they made an attempt to provide separate entry points for node vs browser, but unfortunately they decided to use webpack to bundle the code for both, resulting in massive bloat to the dependency size (>100KB !) and also prevents any tree-shaking optimizations since they ship everything as 1 file.

A couple of PRs were made to antlr4 to address this (antlr/antlr4#4193 and antlr/antlr4#4199) but unfortunately the antlr4 maintainers didn't accept it.

Someone else did make a PR (antlr/antlr4#4217) that got merged to add yet another webpack bundle output which may help us somewhat, so we should try it once it's released (probably in 4.12.1) and evaluate if it's worth upgrading to despite the fact that it will increase our bundle size by >100KB.

Also relevant, lots of people are hitting similar problems to the ones we've faced, as shown in this issue: antlr/antlr4#4218

Description

Current editor's instance ref types are not correctly generated.

The correct ref typings can help with advanced use cases, as an example uncontrolled state management or invoking actions, reflect how many lines we may have in the code-editor without explicit state management etc etc.

Added also an example where we may want to focus on the editor programmatically (for example using Spotlighting for guides), and this can be done, but with TS complaining.

Reproduce Steps

Check the Codesandbox link here

Expected Behavior

Check the codesandbox link, what is logged in the console, versus what TS is complaining about.

Current Behavior

Currently the ref types only include native class component methods, if not mistaken.

Additional Information

Discovered this issue when we needed to integrate CypherEditor in Needle 🪡

Also maybe adding arbitraty props, everything HTMLDivElement expects would be great, as then the editor would be able to accept style or data-testid etc etc as props.

I tried the cypher antlr grammar:

https://github.com/neo4j/cypher-editor/blob/6f476d6e4d73eacb12f922ebe5e6d2c7e11d67df/packages/antlr4/src/Cypher.g4#L149C14-L149C14

It seems the grammar is outdated and does not consider subqueries. It fails to parse the following queries, e.g.:

UNWIND [0, 1, 2] AS x
CALL {
  RETURN 'hello' AS innerReturn
}
RETURN innerReturn

(from https://neo4j.com/docs/cypher-manual/current/clauses/call-subquery/ )

as well as

MATCH (person:Person)
WHERE EXISTS {
    (person)-[:HAS_DOG]->(:Dog)
}
RETURN person.name AS name

and

MATCH (person:Person)
WHERE EXISTS {
  MATCH (person)-[:HAS_DOG]->(dog:Dog)
  WHERE person.name = dog.name
}
RETURN person.name AS name

(from https://neo4j.com/docs/cypher-manual/current/syntax/expressions/#existential-subquery-simple-case )

Suggestion:
Include subqueryclauses like this

subqueryClause :  CALL SP? '{' SP? query? SP? '}' ;

and add the exists sub query to the expressions:

expression : orExpression | existsSubQuery;

existsSubQuery : EXISTS SP? existsSubQueryBody;

existsSubQueryBody: subquery | subqueryPatternBody ;

subqueryPatternBody: '{' SP? pattern ( hint )* ( SP? where )? SP? '}' ;

Note that I am not a cypher expert so the above may be wrong or incomplete.

Reproduce Steps

use Node v-14.20.0
try running : yarn add neo4j-cypher/antlr4

Expected Behavior

it should ideally install the dependencies, but it says

error @neo4j-cypher/[email protected]: The engine "node" is incompatible with this module. Expected version ">=16". Got "14.20.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

if same is being installed using npm it installs with no errors on same node v-14.20.0

Can you propose a solution?

What needs to be done to address this issue? Ideally, provide a pull request with a fix.

Your Environment

Demo down is the project still alive?

Description

I'm trying to use cypher-codemirror in a react project. I copied the react CypherCodeMirror component and succesfully setup my site displaying the editor. Syntax highlighting is working but I don't seem to get the autocomplete to work. What configuration is necessary activate the autocomplete feature?

This is my component:

import * as React from 'react';
import { createCypherEditor } from 'cypher-codemirror';


//taken from :https://github.com/neo4j-contrib/cypher-editor/blob/master/cypher-codemirror/src/react/CypherCodeMirror.js

require('codemirror/lib/codemirror.css');
require('cypher-codemirror/src/css/completion.css')
require('cypher-codemirror/src/css/editor.css')
require('cypher-codemirror/src/css/syntax.css')

export default class CypherCodeMirror extends React.Component {

  constructor(props) {
    super(props);
    this.settings = props.settings || {};
    this.schema = props.schema || {};

    if (props.theme) {
      this.theme = props.theme;
      this.settings.theme = props.theme;
    }

    this.input = null;
    this.editorSupport = null;
    this.editor = null;
  }

  componentDidMount() {
    const { editor, editorSupport } = createCypherEditor(this.input, this.settings);
    this.editor = editor;
    this.editorSupport = editorSupport;
    this.editor.on('change', this.triggerAutocompletion.bind(this));
    this.editorSupport.setSchema(this.schema);
  }

  componentWillUpdate(nextProps) {
    if (nextProps.schema) {
      this.schema = nextProps.schema;
      this.editorSupport.setSchema(nextProps.schema);
    }

    if (nextProps.theme) {
      this.theme = nextProps.theme;
      this.settings.theme = nextProps.theme;
      this.editor.setOption('theme', this.theme);
    }
  }

  triggerAutocompletion(cm, changed) {
    this.props.queryCallback(cm.getValue())
    if (changed.text.length !== 1) {
      return;
    }

    const text = changed.text[0];
    const triggerAutocompletion = text === '.' ||
      text === ':' ||
      text === '[]' ||
      text === '()' ||
      text === '{}' ||
      text === '[' ||
      text === '(' ||
      text === '{' ||
      text === '$'
    if (triggerAutocompletion) {
      cm.execCommand('autocomplete');
    }
  }

  render() {
    const setInput = (input) => {
      this.input = input;
    };
    return <div className="Codemirror-Container" ref={setInput}/>;
  }
}

Reproduce Steps

Setup a react project and use the above component to display a cypher editor field.

Expected Behavior

I expected the autocompletion hints to popup when pressing one of the triggering buttons.

Current Behavior

cm.execCommand('autocomplete'); Is triggered but nothing happens with the component.

Your Environment

Description

I really like the work here. Do you plan to migrate to CodeMirror v6?

Description

Implementing this in Needle Codeblock and we face a react type issue:

TS2786: 'CypherEditor' cannot be used as a JSX component.   
Its instance type 'CypherEditor' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import(".../Neo4j/neo4j-design/node_modules/@types/react-table/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.

The types are @types/[email protected]. Maybe this is an inconsistency with react v18 provided types, not sure if other products are having an issue yet.

Expected Behavior

Work out of the box for react v17.

Can you propose a solution?

I can see Workspace, OpsManager and Console are still using v17, so we could consider fixing the types to the v17 for some time until products start using v18?

Additional Information

For reproduction pull this commit: https://github.com/neo4j/neo4j-design/pull/496/commits/ccfc7beeadd91bfade8b0b132b5f36125fb20875 and then yarn to install packages and go to CypherCodeblock.tsx

I am trying to run a simple test on the "createCypherEditor" function :

    test(' createCypherEditor func ', () => {
        let text = document.createElement("text");
        let settings = {}
        createCypherEditor(text, settings)
    });

But I get this exception :

TypeError: document.body.createTextRange is not a function

at range (A:\frontend\node_modules\codemirror\lib\codemirror.js:94:25)
at hasBadBidiRects (A:\frontend\node_modules\codemirror\lib\codemirror.js:1343:12)
at buildLineContent (A:\frontend\node_modules\codemirror\lib\codemirror.js:1838:9)
at updateExternalMeasurement (A:\frontend\node_modules\codemirror\lib\codemirror.js:2442:28)
at prepareMeasureForLine (A:\frontend\node_modules\codemirror\lib\codemirror.js:2478:14)
at measureChar (A:\frontend\node_modules\codemirror\lib\codemirror.js:2451:34)
at endOperation_R2 (A:\frontend\node_modules\codemirror\lib\codemirror.js:3766:24)
at endOperations (A:\frontend\node_modules\codemirror\lib\codemirror.js:3732:7)
at A:\frontend\node_modules\codemirror\lib\codemirror.js:3719:5
at finishOperation (A:\frontend\node_modules\codemirror\lib\codemirror.js:2132:5)
at endOperation (A:\frontend\node_modules\codemirror\lib\codemirror.js:3716:3)
at new CodeMirror$1 (A:\frontend\node_modules\codemirror\lib\codemirror.js:7448:3)
at CodeMirror$1 (A:\frontend\node_modules\codemirror\lib\codemirror.js:7389:49)
at createCypherEditor (A:\frontend\node_modules\cypher-codemirror\dist\webpack:\src\codemirror-cypher.js:103:18)
at Object.<anonymous> (A:\frontend\src\modules\useCases\__test__\CypherCodeMirror.test.js:47:9)
at Object.asyncFn (A:\frontend\node_modules\jest-jasmine2\build\jasmine_async.js:82:37)

what am I doing wrong?

Wouldn’t it be awesome to have this functionality straight in VS Code? I am willing to put some hours of work into it but honestly I don’t know the inner working of this lib and have never built a VS Code extension 🥴

Mia it feasible to use this lib?