main

分支 (1)

管理

管理

main

3d-graph
/
test.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Monaco Editor - Bracket Auto-Completion</title>
    <!-- Load Monaco Editor -->
    <script src="https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs/loader.js"></script>
    <style>
      #container {
        width: 800px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>

    <script>
      require.config({
        paths: {
          vs: "https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs",
        },
      });
      require(["vs/editor/editor.main"], function () {
        var editor = monaco.editor.create(
          document.getElementById("container"),
          {
            value: "",
            language: "javascript",
          }
        );

        // Register bracket auto-completion snippet
        monaco.languages.registerCompletionItemProvider("javascript", {
          provideCompletionItems: function (model, position) {
            var textUntilPosition = model.getValueInRange({
              startLineNumber: position.lineNumber,
              startColumn: 1,
              endLineNumber: position.lineNumber,
              endColumn: position.column,
            });
            var match = textUntilPosition.match(/(\()|(\[)|({)/);
            if (!match) return [];

            var bracketType = match[0];
            var closingBracket = "";
            switch (bracketType) {
              case "(":
                closingBracket = ")";
                break;
              case "[":
                closingBracket = "]";
                break;
              case "{":
                closingBracket = "}";
                break;
              default:
                break;
            }

            var suggestion = {
              label: closingBracket,
              kind: monaco.languages.CompletionItemKind.Snippet,
              insertText: closingBracket,
              range: new monaco.Range(
                position.lineNumber,
                position.column,
                position.lineNumber,
                position.column
              ),
            };

            return [suggestion];
          },
        });
      });
    </script>
  </body>
</html>