Completion is not working while other options work well

[delaprada]

Hello, in my project, completion is not workfing while other options work well. It is strange and i can't figure it out what the problem is.

Here is my code:

import React, { FC, useEffect, useRef } from 'react';
import { editor, Environment } from 'monaco-editor/esm/vs/editor/editor.api';
import { setDiagnosticsOptions } from 'monaco-yaml';
import 'monaco-editor';
// eslint-disable-next-line import/no-webpack-loader-syntax
import EditorWorker from 'worker-loader!monaco-editor/esm/vs/editor/editor.worker.js';
// eslint-disable-next-line import/no-webpack-loader-syntax
import YamlWorker from 'worker-loader!monaco-yaml/lib/esm/yaml.worker.js';

import classes from './editeNodeAttr.module.less';

declare global {
  interface Window {
    MonacoEnvironment: Environment;
  }
}

window.MonacoEnvironment = {
  getWorker(moduleId, label) {
    if (label === 'yaml') {
      return new YamlWorker();
    }
    return new EditorWorker();
  },
};

setDiagnosticsOptions({
  validate: true,
  enableSchemaRequest: true,
  format: true,
  hover: true,
  completion: true,
  schemas: [
    {
      uri: 'http://myserver/foo-schema.json',
      fileMatch: ['*'],
      schema: {
        id: 'http://myserver/foo-schema.json',
        type: 'object',
        properties: {
          boolean: {
            description: 'Are boolean supported?',
            type: 'boolean',
          },
          enum: {
            description: 'Pick your starter',
            enum: ['Bulbasaur', 'Squirtle', 'Charmander', 'Pikachu'],
          },
        },
      },
    },
  ],
});

const YamlEditTest: FC = () => {
  const ref = useRef(null);

  const defaultValue = `enum: `;

  useEffect(() => {
    const yamlInstance = editor.create(ref.current, {
      automaticLayout: true,
      value: defaultValue,
      language: 'yaml',
      fontSize: 15,
    });

    yamlInstance.onDidChangeModelContent(event => {
      const markers = editor.getModelMarkers({});
      console.log(markers);
    });
  }, [defaultValue]);

  return <div className={classes.yamlEdite} ref={ref} style={{ border: '1px solid #d9d9d9' }} />;
};

export default YamlEditTest;

when i hover, it shows the tips:

But it can not complete the value according to the enum configuration, like the example in the monaco-yaml.js.org:

The version of monaco-editor is 0.27.0 and monaco-yaml is 3.0.1.

[remcohaszing]

From what I can tell, your code looks fine.

The cursor needs to be after the space after the colon in order to trigger the completion. Did you try that when testing your own code? I.e. even on https://monaco-yaml.js.org when you put your cursor between the colon and the space, this won’t trigger the completion.

[delaprada]

I try your suggestion, but it still not work. Changing the cursor position can't solve the problem😢.

[delaprada]

I test the options. Validate option and format option work well, which means when i change their value into false, they won't function any more. But when i change hover to false, it still shows the hover tips like below:

The completion option doesn't work no matter what the value is😭.

[remcohaszing]

I probably have time to have a look at this later today. Could you setup a repository which reproduces the problem? That would help a lot.

[delaprada]

Thank you very much. So sorry that i can't push the code to github for some reasons😢.
In my repository, I just generate a normal react project with CRA and install monaco-editor, monaco-yaml and worker-loader. Add these code into App.js:

import React, { useState, useEffect, createRef } from "react";
import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
import { setDiagnosticsOptions } from 'monaco-yaml';
import 'monaco-editor';
// eslint-disable-next-line import/no-webpack-loader-syntax
import EditorWorker from 'worker-loader!monaco-editor/esm/vs/editor/editor.worker.js';
// eslint-disable-next-line import/no-webpack-loader-syntax
import YamlWorker from 'worker-loader!monaco-yaml/lib/esm/yaml.worker.js';

window.MonacoEnvironment = {
  getWorker(workerId, label) {
    if (label === "yaml") {
      return new YamlWorker();
    }
    return new EditorWorker();
  },
};

setDiagnosticsOptions({
  validate: true,
  enableSchemaRequest: true,
  hover: true,
  completion: true,
  schemas: [
    {
      // Id of the first schema
      uri: "http://myserver/foo-schema.json",
      // Associate with our model
      fileMatch: ["*"],
      schema: {
        // Id of the first schema
        id: "http://myserver/foo-schema.json",
        type: "object",
        properties: {
          p1: {
            enum: ["v1", "v2"],
          },
        },
      },
    },
  ],
});

function App() {
  const [editorValue, setEditorValue] = useState();

  const ref = createRef();

  const defaultValue = `p1:`;

  useEffect(() => {
    const editorValue = editor.create(ref.current, {
      automaticLayout: true,
      value: defaultValue,
      language: "yaml",
    });
    setEditorValue(editorValue);
  }, [defaultValue]);

  return (
    <div>
      <div ref={ref} style={{ width: 800, height: 600 }} />
    </div>
  );
}

export default App;

and run npm run eject to solve the conflict in webpack.config.js by changing static/js/bundle.js into static/js/[name].bundle.js

// config/webpack.config.js
...
output: {
      // The build folder.
      path: isEnvProduction ? paths.appBuild : undefined,
      // Add /* filename */ comments to generated require()s in the output.
      pathinfo: isEnvDevelopment,
      // There will be one main bundle, and one file per asynchronous chunk.
      // In development, it does not produce real files.
      filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/[name].bundle.js',  // change static/js/bundle.js into static/js/[name].bundle.js
      ...
}
...

When runing npm run start, the page would be like this:

[remcohaszing]

I ran the following:

yarn create react-app .
yarn eject
yarn add worker-loader monaco-editor monaco-yaml

I made the modification as you stated in config/webpack.config.js

        filename: isEnvProduction
          ? 'static/js/[name].[contenthash:8].js'
-       : isEnvDevelopment && 'static/js/bundle.js',
+       : isEnvDevelopment && 'static/js/[name].bundle.js',
        // TODO: remove this when upgrading to webpack 5
        futureEmitAssets: true,

I replaced App.jsx with the following content (your first snippet with typings removed and less replaced with inline styling)

import React, { FC, useEffect, useRef } from 'react';
import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
import { setDiagnosticsOptions } from 'monaco-yaml';
import 'monaco-editor';
// eslint-disable-next-line import/no-webpack-loader-syntax
import EditorWorker from 'worker-loader!monaco-editor/esm/vs/editor/editor.worker.js';
// eslint-disable-next-line import/no-webpack-loader-syntax
import YamlWorker from 'worker-loader!monaco-yaml/lib/esm/yaml.worker.js';


window.MonacoEnvironment = {
  getWorker(moduleId, label) {
    if (label === 'yaml') {
      return new YamlWorker();
    }
    return new EditorWorker();
  },
};

setDiagnosticsOptions({
  validate: true,
  enableSchemaRequest: true,
  format: true,
  hover: true,
  completion: true,
  schemas: [
    {
      uri: 'http://myserver/foo-schema.json',
      fileMatch: ['*'],
      schema: {
        id: 'http://myserver/foo-schema.json',
        type: 'object',
        properties: {
          boolean: {
            description: 'Are boolean supported?',
            type: 'boolean',
          },
          enum: {
            description: 'Pick your starter',
            enum: ['Bulbasaur', 'Squirtle', 'Charmander', 'Pikachu'],
          },
        },
      },
    },
  ],
});

const YamlEditTest: FC = () => {
  const ref = useRef(null);

  const defaultValue = `enum: `;

  useEffect(() => {
    const yamlInstance = editor.create(ref.current, {
      automaticLayout: true,
      value: defaultValue,
      language: 'yaml',
      fontSize: 15,
    });

    yamlInstance.onDidChangeModelContent(event => {
      const markers = editor.getModelMarkers({});
      console.log(markers);
    });
  }, [defaultValue]);

  return <div ref={ref} style={{ width: 800, height: 600, border: '1px solid #d9d9d9' }} />;
};

export default YamlEditTest;

It now works as expected. If I place the cursor after the space after the colon, pressing CTRL+Space will trigger the enum options.

I’m still guessing you positioned the cursor between the colon and the space, whereas it needs to be positioned after the space after the colon.

Also thanks! This proves monaco-yaml works with CRA, which is what some other users were having issues with as well.

[delaprada]

Thanks for your kindly reply.

I put my cursor here and press Ctrl + Space, but it still doesn't trigger the enum options:

It is strange 😢 and I guess I didn't misunderstand your meaning?

In monaco-yaml.js.org, I can trigger enum options by just pressing Space rather than Ctrl + Space.

In macbook, Ctrl + Space will trigger the input sources switch, like switching english to chinese. In my react app, pressing Ctrl + Space just trigger switching input sources but not enum options 🤣. I guess maybe it's the problem of the device.

Anyway, thank you very much.

[kduraiswami]

Hey, thank you for providing this example. Just so I understand, is it possible to include intellisense for the yaml nodes themselves or only the valid values inside?

[GuySerfaty]

Thanks for your kindly reply.

I put my cursor here and press Ctrl + Space, but it still doesn't trigger the enum options:

It is strange 😢 and I guess I didn't misunderstand your meaning?

In monaco-yaml.js.org, I can trigger enum options by just pressing Space rather than Ctrl + Space.

In macbook, Ctrl + Space will trigger the input sources switch, like switching english to chinese. In my react app, pressing Ctrl + Space just trigger switching input sources but not enum options 🤣. I guess maybe it's the problem of the device.

Anyway, thank you very much.

not sure if relevant but for me it was becouse I forget to add:
import 'monaco-editor'; - I guess that's adding styles that shows the suggestion popup

btw - for mac option + Escape