1

I'm working on a DSL and try to customize the webEditor. Using the editor works fine as well as the autocompletion when called manually with "Ctrl + Space". Now it would be handy if hinting would be called after any keyup. I found several possible solutions here. Unfortunately, the pop-up window is not shown (but log messages are shown).

Here is my code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Example Web Editor</title>

<link rel="stylesheet" type="text/css" href="webjars/codemirror/5.41.0/lib/codemirror.css" />
<link rel="stylesheet" type="text/css" href="xtext/2.17.0/xtext-codemirror.css" />
<link rel="stylesheet" type="text/css" href="webjars/codemirror/5.41.0/addon/hint/show-hint.css" />

<script type="text/javascript" src="webjars/codemirror/5.41.0/lib/codemirror.js"></script>
<script type="text/javascript" src="webjars/codemirror/5.41.0/addon/hint/show-hint.js"></script>
<script src="webjars/requirejs/2.3.6/require.min.js"></script>

<script type="text/javascript"> 
    var baseUrl = window.location.pathname;
    var fileIndex = baseUrl.indexOf("index.html");
    if (fileIndex > 0)
        baseUrl = baseUrl.slice(0, fileIndex)
    require.config({
        baseUrl : baseUrl,
        paths : {
            "jquery" : "webjars/jquery/3.3.1-1/jquery.min",
            "xtext/xtext-codemirror" : "xtext/2.17.0/xtext-codemirror"
        },
        packages : [ {
            name : "codemirror",
            location : "webjars/codemirror/5.41.0",
            main : "lib/codemirror"
        } ]
    });

    require([ "xtext/xtext-codemirror" ], function(xtext) {
        var editor = xtext.createEditor();

        editor.on('inputRead', function onChange(editor, input) {
            console.log("hey");
            CodeMirror.commands.autocomplete(editor);
        });
    });
</script>


</head>
<body>
    <div class="content">
        <div id="xtext-editor" data-editor-xtext-lang="adv"></div>
    </div>
</body>
</html>

Nothing fancy happens here, I just try to get the autocompletion after any keyup to work.

orangeblend
  • 11
  • 1
  • are you sure you added the codemirror webjar to the pom/build.gradle? – Christian Dietrich Nov 28 '19 at 13:57
  • does the browsers console show any errors? – Christian Dietrich Nov 28 '19 at 13:57
  • I added all dependendencies to the pom. Everything works fine and I don't get any errors. As mentioned, also the log messages are displayed correctly. Only the pop-up window for the autocompletion does not show up if I type anything. Only if I call it via "Ctrl + Space" – orangeblend Nov 28 '19 at 14:05
  • your html looks a bit different than xtext would generate it if you delete the index.html and add `webSupport= { framework="CODEMIRROR" }` to the workflow i also dont know if you have a grammar that produces content assist at all for the place you are testing – Christian Dietrich Nov 28 '19 at 14:13
  • I deleted the old index but still the same. Also the changes between the generated one and mine are minor. What do you mean by a grammar that produces content assist? Since I can call hinting with short cut, a content assist must be generated - or am I wrong? – orangeblend Nov 28 '19 at 14:49
  • e.g. by default there are no proposals for datatype rules. if you try it with hello world grammar and codemirror. does it work for you p.s. i tested with xtext 2.18 since thats the oldest i have available here – Christian Dietrich Nov 28 '19 at 14:53

1 Answers1

0

Just as @Christian Dietrich recommended, I tried the default project (a bit modificated to show a list of possible autocompletions). Unfortunately this results to the same result. Calling autocompletion via "Ctrl + Space" shows the correct list of possible autocompletions but typing anything just creates log messages.

The first image shows that autocompletion works:intended result. The second shows the log messages when typing anything: actual result.

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="en-us">
    <title>Example Web Editor</title>
    <link rel="stylesheet" type="text/css" href="webjars/codemirror/5.41.0/lib/codemirror.css" />
    <link rel="stylesheet" type="text/css" href="webjars/codemirror/5.41.0/addon/hint/show-hint.css" />
    <link rel="stylesheet" type="text/css" href="xtext/2.19.0/xtext-codemirror.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script type="text/javascript" src="webjars/codemirror/5.41.0/lib/codemirror.js"></script>
    <script type="text/javascript" src="webjars/codemirror/5.41.0/addon/hint/show-hint.js"></script>

    <script src="webjars/requirejs/2.3.6/require.min.js"></script>
    <script type="text/javascript">
        var editor = null;
        var baseUrl = window.location.pathname;
        var fileIndex = baseUrl.indexOf("index.html");
        if (fileIndex > 0)
            baseUrl = baseUrl.slice(0, fileIndex);
        require.config({
            baseUrl: baseUrl,
            paths: {
                "jquery": "webjars/jquery/3.4.1/jquery.min",
                "xtext/xtext-codemirror": "xtext/2.19.0/xtext-codemirror"
            },
            packages: [{
                name: "codemirror",
                location: "webjars/codemirror/5.41.0",
                main: "lib/codemirror"
            }]
        });
        require(["xtext-resources/generated/mode-mydsl5", "xtext/xtext-codemirror"], function (mode, xtext) {
            editor = xtext.createEditor({
                baseUrl: baseUrl
            });

            editor.on('inputRead', function onChange(editor, input) {
                console.log("hey");
                CodeMirror.commands.autocomplete(editor);
            });
        });
    </script>
</head>

<body>

    <div class="container">
        <div class="header">
            <h1>Example MyDsl5 Web Editor</h1>
        </div>
        <div class="content">
            <div id="xtext-editor" data-editor-xtext-lang="mydsl5"></div>
        </div>
    </div>

</body>

</html>
orangeblend
  • 11
  • 1
  • what is the actual problem you have? do you want to have auto content assist? – Christian Dietrich Dec 02 '19 at 09:56
  • i am not sure if codemirror supports that (content assist is crtl+space) – Christian Dietrich Dec 02 '19 at 10:10
  • My Problem is: I want to have content assist after any keyup. Contentassit works but I don't want to call it manually. So yes, I want to have auto content assist ( so why does editor.on() not work as expected) – orangeblend Dec 03 '19 at 10:33
  • I guessed that it would be possible after the description in https://stackoverflow.com/questions/13744176/codemirror-autocomplete-after-any-keyup . And it's pretty much what I did. The editor notices the inputRead, so if any character is typed. The only thing left would be to open the autocompltion list. Do you maybe know how it is called via "Strg + Space" ? So what function is called. One could just call this function after "inputRead" (this is the only workaround which comes to my mind) – orangeblend Dec 05 '19 at 12:50
  • The default showHint function is defined in xtext-codemirror.js. Invoking the contentAssistService seems to be the right way (at least I managed it somehow hat autocompletion is shown up by typing). Unfortunately, it does not work yet completely as I want to. But as soon as I manage it to make it work I will post the answer here. – orangeblend Dec 05 '19 at 14:17