Autocompletion based on JSON schema

[rxxy]

trafficstars

[josdejong]

what?

[rxxy]

Like intellij idea, when schema is specified, input 'n' can be completed to 'name'

[josdejong]

Ah, now I understand you, you mean auto-completion based on a JSON Schema. That's not yet supported but would be very nice to have.

Anyone interested in picking this up?

[developergunny]

I need!

[AlexRMU]

Nice to have

[Kasheftin]

Please share more details about autocomplete in svelte-jsoneditor / vanilla-jsoneditor. As I understand, the previous version, jsoneditor, supports some kind of autocomplete, https://codesandbox.io/s/z65fp?file=/src/App.vue. The newer version uses @codemirror/autocomplete somewhere, but there're no examples and there's nothing about autocomplete in the docs.

Our use case is that we have a schema for createAjvValidator with enums, validation works just fine, but we want to have autocomplete functionality both for keys and enum values.

[josdejong]

@Kasheftin There is no autocompletion for JSON Schema implemented yet in svelte-jsoneditor like there is in jsoneditor, hence this issue. Help would be welcome.

[jy95]

@josdejong If it could help, I saw this project https://github.com/acao/codemirror-json-schema . They might not have the ctrl-space trick users known from monaco-editor but it is better than nothing from what I saw on https://codemirror-json-schema.netlify.app/.

They seem to have documented something for custom usage that could be added to your .create call

// This approach allows you to configure the json mode and parse linter, as well as our linter, hovers, etc more specifically.

import { EditorState } from "@codemirror/state";
import { linter } from "@codemirror/lint";
import { hoverTooltip } from "@codemirror/view";
import { json, jsonLanguage, jsonParseLinter } from "@codemirror/lang-json";
import { jsonCompletion jsonSchemaLinter, jsonSchemaHover } from "codemirror-json-schema";

const schema = {
  type: "object",
  properties: {
    example: {
      type: "boolean",
    },
  },
};

const state = EditorState.create({
  doc: `{ "example": true }`,
  extensions: [
    json(),
    linter(jsonParseLinter(), {
      // default is 750ms
      delay: 300
    }),
    linter(jsonSchemaLinter(schema)),
    jsonLanguage.data.of({
      autocomplete: jsonCompletion(schema),
    }),
    hoverTooltip(jsonSchemaHover(schema)),
  ];
})

Notice : It has currently an open MR called ".js file imports and schema loading as statefield" so that you don't have to provide the schema in the create step

[josdejong]

Thanks for sharing @jy95 , this can be very useful indeed!

Anyone interested in working this out for svelte-jsoneditor?

[jy95]

@josdejong I set up a stackblitz for POC that is uncomplete for the time being , mostly because I am not used to the prop drilling in Svelte codebase (export let schema: any).

[josdejong]

Thanks @jy95!

[jy95]

@josdejong In the meantime, codemirror-json-schema got one interesting release . What do you think ?

extensions: [
  json(),
  linter(jsonParseLinter()),
  linter(jsonSchemaLinter(), {
    needsRefresh: handleRefresh,
  }),
  jsonLanguage.data.of({
    autocomplete: jsonCompletion(),
  }),
  hoverTooltip(jsonSchemaHover()),
  // this is where we pass the schema!
  // very important!!!!
  stateExtensions(schema),
];

[josdejong]

That looks very promising indeed! Either to just use codemirror-json-schema, or to see how they solved autocompletion.

[josdejong]

Moving this idea to the Discussions > Ideas section since we are not actively working on it. Help implementing this would be very welcome.