Home > Java > javaTutorial > body text

How Monaco Editor implements SQL and Java code prompts

PHPz
Release: 2023-05-11 17:31:10
forward
2054 people have browsed it

monaco editor creation

//创建和设置值
if (!this.monacoEditor) {
  this.monacoEditor = monaco.editor.create(this._node, {
    value: value || code,
    language: language,
    ...options
  });
  this.monacoEditor.onDidChangeModelContent(e => {
    const value = this.monacoEditor.getValue(); //使value和其值保持一致
    if (value !== this.value) {
      this.value = value;
      this.props.getValue && this.props.getValue(value)
    }
  });
}
Copy after login
// 设置编辑器语言
  this.completionItemProvider = monaco.languages.registerCompletionItemProvider(
    language,
    {
      triggerCharacters: [' ', '.', ...this.triggerCharacters],
      provideCompletionItems: (model, position) =>
        this.sqlSnippets.provideCompletionItems(model, position)
    }
  )
Copy after login

sql prompt (library table field association)

async provideCompletionItems(model, position) {
  const { lineNumber, column } = position
  // 光标前文本
  const textBeforePointer = model.getValueInRange({
    startLineNumber: lineNumber,
    startColumn: 0,
    endLineNumber: lineNumber,
    endColumn: column
  })
  const textBeforePointerMulti = model.getValueInRange({
    startLineNumber: 1,
    startColumn: 0,
    endLineNumber: lineNumber,
    endColumn: column
  })
  // 光标后文本
  // const textAfterPointer = model.getValueInRange({
  //   startLineNumber: lineNumber,
  //   startColumn: column,
  //   endLineNumber: lineNumber,
  //   endColumn: model.getLineMaxColumn(model.getLineCount())
  // })
  const textAfterPointerMulti = model.getValueInRange({
    startLineNumber: lineNumber,
    startColumn: column,
    endLineNumber: model.getLineCount(),
    endColumn: model.getLineMaxColumn(model.getLineCount())
  })
  // const nextTokens = textAfterPointer.trim().split(/\s+/)
  // const nextToken = nextTokens[0].toLowerCase()
  const tokens = textBeforePointer.trim().split(/\s+/)
  const lastToken = tokens[tokens.length - 1].toLowerCase()
  // 数据库名联想
  if (lastToken === 'database') {
    return {
      suggestions: this.getDataBaseSuggest()
    }
    // <库名>.<表名> || <别名>.<字段>
  } else if (lastToken.endsWith(&#39;.&#39;)) {
    // 去掉点后的字符串
    const tokenNoDot = lastToken.slice(0, lastToken.length - 1)
    if (this.dbSchema.find(db => db.dbName === tokenNoDot.replace(/^.*,/g, &#39;&#39;))) {
      // <库名>.<表名>联想
      return {
        suggestions: [...this.getTableSuggestByDbName(tokenNoDot.replace(/^.*,/g, &#39;&#39;))]
      }
    } else if (this.getTableNameAndTableAlia(textBeforePointerMulti.split(&#39;;&#39;)[textBeforePointerMulti.split(&#39;;&#39;).length - 1] + textAfterPointerMulti.split(&#39;;&#39;)[0])) {
      const tableInfoList = this.getTableNameAndTableAlia(textBeforePointerMulti.split(&#39;;&#39;)[textBeforePointerMulti.split(&#39;;&#39;).length - 1] + textAfterPointerMulti.split(&#39;;&#39;)[0])
      const currentTable = tableInfoList.find(item => item.tableAlia === tokenNoDot.replace(/^.*,/g, &#39;&#39;))
      // <别名>.<字段>联想
      if (currentTable && currentTable.tableName) {
        return {
          suggestions: await this.getTableColumnSuggestByTableAlia(currentTable.tableName)
        }
      } else {
        return {
          suggestions: []
        }
      }
    } else {
      return {
        suggestions: []
      }
    }
    // 库名联想
  } else if (lastToken === &#39;from&#39; || lastToken === &#39;join&#39; || /(from|join)\s+.*?\s?,\s*$/.test(textBeforePointer.replace(/.*?(/gm, &#39;&#39;).toLowerCase())) {
    // const tables = this.getTableSuggest()
    const databases = this.getDataBaseSuggest()
    return {
      suggestions: databases
    }
    // 字段联想
  } else if ([&#39;select&#39;, &#39;where&#39;, &#39;order by&#39;, &#39;group by&#39;, &#39;by&#39;, &#39;and&#39;, &#39;or&#39;, &#39;having&#39;, &#39;distinct&#39;, &#39;on&#39;].includes(lastToken.replace(/.*?(/g, &#39;&#39;)) || (lastToken.endsWith(&#39;.&#39;) && !this.dbSchema.find(db => `${db.dbName}.` === lastToken)) || /(select|where|order by|group by|by|and|or|having|distinct|on)\s+.*?\s?,\s*$/.test(textBeforePointer.toLowerCase())) {
    return {
      suggestions: await this.getTableColumnSuggest()
    }
    // 自定义字段联想
  } else if (this.customKeywords.toString().includes(lastToken)) {
    return {
      suggestions: this.getCustomSuggest(lastToken.startsWith(&#39;$&#39;))
    }
    // 默认联想
  } else {
    return {
      suggestions: [...this.getDataBaseSuggest(), ...this.getTableSuggest(), ...this.getKeywordSuggest()]
    }
  }
}
Copy after login

java custom association

 monaco.languages.registerCompletionItemProvider(
  language,
  {
    triggerCharacters: [&#39;ds.&#39;,&#39;.&#39;],
    provideCompletionItems: (model, position) =>{
      const { lineNumber, column } = position
      // 光标前文本
      const textBeforePointer = model.getValueInRange({
        startLineNumber: lineNumber,
        startColumn: 0,
        endLineNumber: lineNumber,
        endColumn: column
      })
      if([&#39;ds.&#39;].includes(textBeforePointer)){
        return {suggestions: [
            {
              label: &#39;connection("")&#39;, //显示的提示名称
              insertText: &#39;connection("")&#39; //选择后粘贴到编辑器中的文字
            },
            {
              label: &#39;query("","")&#39;,
              insertText: &#39;query("","")&#39;
            },
          ]};
      }
      if([&#39;ds.connection("").&#39;].includes(textBeforePointer)){
        return {suggestions: [
            {
              label: &#39;query("")&#39;,
              insertText: &#39;query("")&#39;,
            },
          ]};
      }
    }
  }
)
Copy after login

The above is the detailed content of How Monaco Editor implements SQL and Java code prompts. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:yisu.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template