Karbon/code_editor_ui.py at main · ProTecGames/Karbon · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
import tkinter as tk
from tkinter import filedialog
from tkhtmlview import HTMLLabel
from tkcode import CodeEditor
import zipfile
import os
import json
from datetime import datetime
from utils.project_io import create_project_data, save_project_to_file
def save_as_html():
    html_code = code_input.get("1.0", tk.END)
    file_path = filedialog.asksaveasfilename(defaultextension=".html", filetypes=[("HTML files", "*.html")])
    if file_path:
        with open(file_path, "w", encoding="utf-8") as f:
            f.write(html_code)
def save_as_zip():
    html_code = code_input.get("1.0", tk.END)
    zip_path = filedialog.asksaveasfilename(defaultextension=".zip", filetypes=[("ZIP files", "*.zip")])
    if zip_path:
        html_filename = "index.html"
        temp_path = os.path.join(os.path.dirname(zip_path), html_filename)
        with open(temp_path, "w", encoding="utf-8") as f:
            f.write(html_code)
        with zipfile.ZipFile(zip_path, 'w') as zipf:
            zipf.write(temp_path, arcname=html_filename)
        os.remove(temp_path)
# ---------------- UI Setup ----------------
root = tk.Tk()
root.title("Karbon Code Editor")
root.geometry("1200x700")
# ---------- Top Save Buttons ----------
button_frame = tk.Frame(root)
button_frame.pack(anchor="nw", padx=10, pady=10)
save_zip_btn = tk.Button(button_frame, text="📦 Save as ZIP", command=save_as_zip)
save_zip_btn.pack(side="left", padx=5)
def load_ai_code():
    generated_code = """<!DOCTYPE html>
<html>
  <head>
    <title>Generated by AI</title>
    <style>
    </style>
  </head>
  <body>
    <h1>This HTML code was inserted by the AI</h1>
  </body>
</html>"""
    code_input.delete("1.0", tk.END)
    code_input.insert("1.0", generated_code)
    update_preview(None)
def load_project():
    file_path = filedialog.askopenfilename(
        defaultextension=".karbonproject",
        filetypes=[("Karbon Project Files", "*.karbonproject"), ("All Files", "*.*")]
    )
    if file_path:
        with open(file_path, "r", encoding="utf-8") as f:
            project_data = json.load(f)
        full_code = project_data.get("full_code", "")
        code_input.delete("1.0", tk.END)
        code_input.insert("1.0", full_code)
        update_preview(None)
        # Auto-save to autosave/index.html
        autosave_path = os.path.join("autosave", "index.html")
        with open(autosave_path, "w", encoding="utf-8") as f:
            f.write(full_code)
load_ai_btn = tk.Button(button_frame, text="⚡ Load AI Code", command=load_ai_code)
load_ai_btn.pack(side="left", padx=5)
load_project_btn = tk.Button(button_frame, text="📂 Load Project", command=load_project)
load_project_btn.pack(side="left", padx=5)
# ---------- Main Editor Layout ----------
main_frame = tk.Frame(root)
main_frame.pack(fill=tk.BOTH, expand=True)
# ---------- Code Editor (left) ----------
code_input = CodeEditor(
    main_frame,
    language="html",
    background="black",
    highlighter="dracula",
    font="Courier 12",
    blockcursor=True,
    autofocus=True,
    insertbackground="white"  # Cursor color
)
autosave_path = os.path.join("autosave", "index.html")
if os.path.exists(autosave_path):
    with open(autosave_path, "r", encoding="utf-8") as f:
        last_code = f.read()
else:
    last_code = """<!DOCTYPE html>
<html>
  <head>
    <title>Karbon</title>
    <style>
    </style>
  </head>
  <body>
    <h1>Hello! Welcome to Karbon's live code editor</h1>
  </body>
</html>"""
code_input.insert("1.0", last_code)
code_input.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
# ---------- Live Preview (right) ----------
preview_frame = tk.Frame(main_frame, bg="white", width=600)
preview_frame.pack(side=tk.RIGHT, fill=tk.BOTH)
HTMLLabel._default_style = ""
def clean_html(raw_html):
    """Removes tkhtmlview's injected default styles if present."""
    unwanted_style = '<style>body { background-color: white; font-family: Courier; }</style>'
    return raw_html.replace(unwanted_style, "")
html_content = HTMLLabel(
    preview_frame,
    html=clean_html(code_input.get("1.0", tk.END)),
    background="white",
)
html_content.pack(fill=tk.BOTH, expand=True)
def update_preview(event):
    html_content.set_html(clean_html(code_input.get("1.0", tk.END)))
code_input.bind("<KeyRelease>", update_preview)


def save_project(code_input):
    html_code = code_input.get("1.0", tk.END)
    file_path = filedialog.asksaveasfilename(
        defaultextension=".karbonproject",
        filetypes=[("Karbon Project Files", "*.karbonproject")]
    )
    if file_path:
        project_data = {
            "full_code": html_code
        }
        with open(file_path, "w", encoding="utf-8") as f:
            json.dump(project_data, f, indent=2)


save_project_btn = tk.Button(button_frame, text="💾 Save Project", command=lambda: save_project(code_input))
save_project_btn.pack(side="left", padx=5)

# ---------- Launch ----------
root.mainloop()