code_editor.py

import json

def code_editor(value: str = "", issue_num: int = 0, elem_id: str = None, key: str = None) -> str:
    """
    Returns an HTML snippet for a CodeMirror-based code editor.

    Args:
        value (str): Initial content for the code editor.
        issue_num (int): The issue number to identify the editor instance.
        elem_id (str, optional): ID for the HTML element.
        key (str, optional): Unique key for the component.

    Returns:
        str: HTML string that embeds a CodeMirror editor.
    """
    # Use elem_id if provided, otherwise use issue_num for the container ID
    container_id = elem_id if elem_id else f"code-editor-container-{issue_num}"
    
    html = f"""
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/theme/material-darker.min.css">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/mode/python/python.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/mode/javascript/javascript.min.js"></script>
    
    <style>
      /* Basic styling for the editor container */
      #{container_id} {{
          border: 1px solid #ccc;
          border-radius: 4px;
          overflow: hidden;
          margin: 0 auto;
      }}
      .CodeMirror {{
          height: auto;
          min-height: 300px;
      }}
    </style>
    
    <div id="{container_id}">
        <textarea id="code-editor-{issue_num}">{value}</textarea>
    </div>
    
    <script>
      // Initialize CodeMirror on the textarea after it is loaded
      document.addEventListener("DOMContentLoaded", function() {{
          var editor = CodeMirror.fromTextArea(document.getElementById("code-editor-{issue_num}"), {{
              lineNumbers: true,
              mode: "python",  // Change this to "javascript" or any other mode as needed
              theme: "material-darker",
              tabSize: 4
          }});
          
          // Expose the editor globally so we can interact with it elsewhere if needed
          window._codeEditorInstance{issue_num} = editor;

          // Handle changes and send updates to the server
          editor.on("change", function() {{
              const delta = editor.getValue();
              const message = JSON.stringify({{
                  type: "code_update",
                  issue_num: {issue_num},
                  delta: delta
              }});
              // Send the updated code to the WebSocket server
              collabWs.send(message);
          }});
      }});
    </script>
    """
    return html