main.py

"""

HTML Editor v2.0.0

"""

# Imports from PySide6
from PySide6.QtCore import Qt, QRegularExpression, QUrl, Signal, QRect, QSize
from PySide6.QtWidgets import (
    QApplication, QWidget, QVBoxLayout, QHBoxLayout, QSplitter,
    QLabel, QTextEdit, QToolButton, QTabBar, QStackedWidget,
    QSizePolicy, QGridLayout, QMessageBox, QDialog,
    QTextBrowser, QPushButton, QFileDialog, QInputDialog,
    QPlainTextEdit, QColorDialog, QFontDialog, QComboBox,
    QLineEdit 
)
from PySide6.QtGui import (
    QColor, QTextCharFormat, QFont, QSyntaxHighlighter, 
    QIcon, QPixmap, QCursor, QDesktopServices,
    QShortcut, QKeySequence, QTextFormat, QPainter,
    QTextCursor
)
from PySide6.QtWebEngineWidgets import QWebEngineView

# Try the modern import first (Qt 6.7+)
try:
    from PySide6.QtWebEngineCore import QWebEnginePage
except ImportError:
    print("Debug: Falling back to QtWebEngineWidgets (Legacy support)")
    # Fallback for older versions
    from PySide6.QtWebEngineWidgets import QWebEnginePage

# General Imports
import webbrowser
import os
import sys
import re
import subprocess




def resource_path(relative_path: str) -> str:
    if hasattr(sys, "_MEIPASS"):
        base_path = sys._MEIPASS
    else:
        base_path = os.path.abspath(".")
    return os.path.join(base_path, relative_path)






# init filepaths
current_html_path = None
current_css_path = None


















class CustomWebEnginePage(QWebEnginePage):
    jsMessage = Signal(str, str)  # (level, message)

    def javaScriptConsoleMessage(self, level, message, lineNumber, sourceID):
        # level: QWebEnginePage.JavaScriptConsoleMessageLevel
        level_name = {
            QWebEnginePage.InfoMessageLevel: "LOG",
            QWebEnginePage.WarningMessageLevel: "WARN",
            QWebEnginePage.ErrorMessageLevel: "ERROR"
        }.get(level, "UNKNOWN")

        formatted = f"[{level_name}] Line {lineNumber}: {message}"
        self.jsMessage.emit(level_name, formatted)





class JSErrorDialog(QDialog):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.setWindowTitle("JavaScript Console")
        self.resize(650, 320)
        self.setWindowFlag(Qt.Window)
        self.setWindowFlag(Qt.WindowStaysOnTopHint, False)

        layout = QVBoxLayout(self)
        layout.setContentsMargins(10, 10, 10, 10)
        layout.setSpacing(8)

        self.log = QTextEdit()
        self.log.setReadOnly(True)
        self.log.setStyleSheet("""
            QTextEdit {
                background-color: #1e1e1e;
                color: #d4d4d4;
                font-family: Consolas, monospace;
                font-size: 12px;
                border: 1px solid #444;
            }
        """)
        layout.addWidget(self.log)

        clear_btn = QPushButton("Clear")
        clear_btn.clicked.connect(self.log.clear)
        layout.addWidget(clear_btn, alignment=Qt.AlignRight)

    def add_message(self, level: str, message: str):
        color = {
            "LOG": "#cccccc",
            "WARN": "#e6b800",
            "ERROR": "#ff5555"
        }.get(level, "#aaaaaa")

        self.log.append(f'<span style="color:{color}">{message}</span>')

    def clear_errors(self):
        self.log.clear()




















class HTMLHighlighter(QSyntaxHighlighter):
    def __init__(self, document):
        super().__init__(document)
        self.highlight_rules = []

        def fmt(color, bold=False, italic=False):
            f = QTextCharFormat()
            f.setForeground(QColor(color))
            if bold:
                f.setFontWeight(QFont.Bold)
            if italic:
                f.setFontItalic(True)
            return f

        # === HTML FORMATS ===
        self.tag_format = fmt("#569CD6", bold=True)
        self.attr_format = fmt("#9CDCFE")
        self.value_format = fmt("#CE9178")
        self.comment_format = fmt("#6A9955", italic=True)
        self.symbol_format = fmt("#D4D4D4")

        # === JavaScript FORMATS ===
        self.js_keyword_format = fmt("#C586C0", bold=True)
        self.js_string_format = fmt("#CE9178")
        self.js_number_format = fmt("#B5CEA8")
        self.js_comment_format = fmt("#6A9955", italic=True)
        self.js_function_format = fmt("#DCDCAA")

        # === CSS FORMATS ===
        self.css_selector_fmt = fmt("#569CD6", bold=True)
        self.css_property_fmt = fmt("#D7BA7D")
        self.css_value_fmt = fmt("#B5CEA8")
        self.css_comment_fmt = fmt("#6A9955", italic=True)
        self.css_punctuation_fmt = fmt("#D4D4D4")

        # HTML highlighting patterns
        self.html_rules = [
            (QRegularExpression(r"</?[a-zA-Z0-9\-]+"), self.tag_format),
            (QRegularExpression(r"\b[a-zA-Z-:]+(?=\=)"), self.attr_format),
            (QRegularExpression(r"\"[^\"]*\""), self.value_format),
            (QRegularExpression(r"<!--[^>]*-->"), self.comment_format),
            (QRegularExpression(r"[<>/]"), self.symbol_format),
        ]

        # JavaScript patterns
        js_keywords = (
            "var|let|const|if|else|for|while|do|function|return|class|extends|"
            "new|this|super|try|catch|finally|throw|break|continue|switch|case|"
            "default|import|export|from|async|await|typeof|in|of|instanceof|delete|void"
        )
        self.js_rules = [
            (QRegularExpression(rf"\b({js_keywords})\b"), self.js_keyword_format),
            (QRegularExpression(r"//[^\n]*"), self.js_comment_format),
            (QRegularExpression(r"/\*.*\*/"), self.js_comment_format),
            (QRegularExpression(r"\"[^\"]*\"|'[^']*'"), self.js_string_format),
            (QRegularExpression(r"\b[0-9]+\b"), self.js_number_format),
            (QRegularExpression(r"\b[A-Za-z_][A-Za-z0-9_]*(?=\s*\()"), self.js_function_format),
        ]

        # CSS patterns
        self.css_rules = [
            (QRegularExpression(r"[a-zA-Z0-9.#:_-]+(?=\s*\{)"), self.css_selector_fmt),
            (QRegularExpression(r"\b[a-zA-Z-]+(?=\s*:)"), self.css_property_fmt),
            (QRegularExpression(r"(?::\s*)([^;]+)(?=;)"), self.css_value_fmt),
            (QRegularExpression(r"[{}:;]"), self.css_punctuation_fmt),
            (QRegularExpression(r"/\*.*\*/"), self.css_comment_fmt),
        ]

    def highlightBlock(self, text):
        """Apply HTML, JS, and CSS highlighting depending on tag context."""
        prev_state = self.previousBlockState()

        inside_script = (prev_state == 1)
        inside_style = (prev_state == 2)

        script_open = text.find("<script")
        script_close = text.find("</script>")
        style_open = text.find("<style")
        style_close = text.find("</style>")

        for pattern, fmt in self.html_rules:
            it = pattern.globalMatch(text)
            while it.hasNext():
                m = it.next()
                self.setFormat(m.capturedStart(), m.capturedLength(), fmt)

        if script_open != -1 and script_close != -1 and script_close > script_open:
            js_start = text.find(">", script_open) + 1
            js_end = script_close
            js_snippet = text[js_start:js_end]
            for pattern, fmt in self.js_rules:
                it = pattern.globalMatch(js_snippet)
                while it.hasNext():
                    m = it.next()
                    start = js_start + m.capturedStart()
                    self.setFormat(start, m.capturedLength(), fmt)
            self.setCurrentBlockState(0)
            return

        if style_open != -1 and style_close != -1 and style_close > style_open:
            css_start = text.find(">", style_open) + 1
            css_end = style_close
            css_snippet = text[css_start:css_end]
            for pattern, fmt in self.css_rules:
                it = pattern.globalMatch(css_snippet)
                while it.hasNext():
                    m = it.next()
                    start = css_start + m.capturedStart()
                    self.setFormat(start, m.capturedLength(), fmt)
            self.setCurrentBlockState(0)
            return

        if inside_script:
            for pattern, fmt in self.js_rules:
                it = pattern.globalMatch(text)
                while it.hasNext():
                    m = it.next()
                    self.setFormat(m.capturedStart(), m.capturedLength(), fmt)
            self.setCurrentBlockState(0 if script_close != -1 else 1)

        elif inside_style:
            for pattern, fmt in self.css_rules:
                it = pattern.globalMatch(text)
                while it.hasNext():
                    m = it.next()
                    self.setFormat(m.capturedStart(), m.capturedLength(), fmt)
            self.setCurrentBlockState(0 if style_close != -1 else 2)

        else:
            if script_open != -1 and script_close == -1:
                self.setCurrentBlockState(1)
            elif style_open != -1 and style_close == -1:
                self.setCurrentBlockState(2)
            else:
                self.setCurrentBlockState(0)























class CSSHighlighter(QSyntaxHighlighter):
    def __init__(self, document):
        super().__init__(document)
        self.highlight_rules = []

        def fmt(color, bold=False, italic=False):
            f = QTextCharFormat()
            f.setForeground(QColor(color))
            if bold:
                f.setFontWeight(QFont.Bold)
            if italic:
                f.setFontItalic(True)
            return f

        selector_fmt = fmt("#569CD6", bold=True)
        property_fmt = fmt("#D7BA7D")
        value_fmt = fmt("#B5CEA8")
        comment_fmt = fmt("#6A9955", italic=True)
        punctuation_fmt = fmt("#D4D4D4")

        self.highlight_rules.append((QRegularExpression(r"^[^{]+(?=\{)"), selector_fmt))
        self.highlight_rules.append((QRegularExpression(r"\b[a-zA-Z-]+(?=\s*:)"), property_fmt))
        self.highlight_rules.append((QRegularExpression(r"(?::\s*)([^;]+)(?=;)"), value_fmt))
        self.highlight_rules.append((QRegularExpression(r"[{}:;]"), punctuation_fmt))
        self.highlight_rules.append((QRegularExpression(r"/\*.*\*/"), comment_fmt))

    def highlightBlock(self, text):
        for pattern, fmt in self.highlight_rules:
            it = pattern.globalMatch(text)
            while it.hasNext():
                match = it.next()
                self.setFormat(match.capturedStart(), match.capturedLength(), fmt)

















class LineNumberArea(QWidget):
    def __init__(self, editor):
        super().__init__(editor)
        self.editor = editor

    def sizeHint(self):
        return QSize(self.editor.line_number_area_width(), 0)

    def paintEvent(self, event):
        self.editor.line_number_area_paint_event(event)















class CodeEditor(QPlainTextEdit):
    def __init__(self):
        super().__init__()
        font = QFont("Consolas", 11)
        self.setFont(font)
        self.setTabStopDistance(self.fontMetrics().horizontalAdvance(' ') * 4)

        self.line_number_area = LineNumberArea(self)
        self.blockCountChanged.connect(self.update_line_number_area_width)
        self.updateRequest.connect(self.update_line_number_area)
        self.cursorPositionChanged.connect(self.highlight_current_line)
        self.update_line_number_area_width(0)

        self.setStyleSheet("""
            CodeEditor {
                background-color: #1e1e1e;
                color: #d4d4d4;
                border: none;
                selection-background-color: #264f78;
                selection-color: #ffffff;
            }
        """)
        self.highlighter = HTMLHighlighter(self.document())

    def line_number_area_width(self):
        digits = len(str(self.blockCount()))
        return 10 + self.fontMetrics().horizontalAdvance('9') * digits

    def update_line_number_area_width(self, _):
        self.setViewportMargins(self.line_number_area_width(), 0, 0, 0)

    def update_line_number_area(self, rect, dy):
        if dy:
            self.line_number_area.scroll(0, dy)
        else:
            self.line_number_area.update(0, rect.y(), self.line_number_area.width(), rect.height())
        if rect.contains(self.viewport().rect()):
            self.update_line_number_area_width(0)

    def resizeEvent(self, event):
        super().resizeEvent(event)
        cr = self.contentsRect()
        self.line_number_area.setGeometry(QRect(cr.left(), cr.top(), self.line_number_area_width(), cr.height()))

    def line_number_area_paint_event(self, event):
        painter = QPainter(self.line_number_area)
        painter.fillRect(event.rect(), QColor("#252526"))

        block = self.firstVisibleBlock()
        block_number = block.blockNumber()
        top = self.blockBoundingGeometry(block).translated(self.contentOffset()).top()
        bottom = top + self.blockBoundingRect(block).height()

        while block.isValid() and top <= event.rect().bottom():
            if block.isVisible() and bottom >= event.rect().top():
                number = str(block_number + 1)
                painter.setPen(QColor("#858585"))
                painter.drawText(
                    0, int(top), self.line_number_area.width() - 4, self.fontMetrics().height(),
                    Qt.AlignRight, number
                )
            block = block.next()
            top = bottom
            bottom = top + self.blockBoundingRect(block).height()
            block_number += 1

    def highlight_current_line(self):
        extra_selections = []
        if not self.isReadOnly():
            selection = QTextEdit.ExtraSelection()
            line_color = QColor("#2a2d2e")
            selection.format.setBackground(line_color)
            selection.format.setProperty(QTextFormat.FullWidthSelection, True)
            selection.cursor = self.textCursor()
            selection.cursor.clearSelection()
            extra_selections.append(selection)
        self.setExtraSelections(extra_selections)

    

    def keyPressEvent(self, event):
        cursor = self.textCursor()
        key = event.key()
        modifiers = event.modifiers()

        if key == Qt.Key_Tab:
            if cursor.hasSelection():
                start_block = self.document().findBlock(cursor.selectionStart())
                end_block = self.document().findBlock(cursor.selectionEnd())
                block = start_block

                cursor.beginEditBlock()
                while block.isValid() and block.position() <= end_block.position():
                    block_cursor = QTextCursor(block)
                    block_cursor.movePosition(QTextCursor.StartOfBlock)
                    block_cursor.insertText(" " * 4)
                    block = block.next()
                cursor.endEditBlock()
            else:
                cursor.insertText(" " * 4)
            return

        elif key == Qt.Key_Backtab:
            if cursor.hasSelection():
                start_block = self.document().findBlock(cursor.selectionStart())
                end_block = self.document().findBlock(cursor.selectionEnd())
                block = start_block

                cursor.beginEditBlock()
                while block.isValid() and block.position() <= end_block.position():
                    line_text = block.text()
                    if line_text.startswith(" " * 4):
                        block_cursor = QTextCursor(block)
                        block_cursor.movePosition(QTextCursor.StartOfBlock)
                        block_cursor.movePosition(QTextCursor.NextCharacter, QTextCursor.KeepAnchor, 4)
                        block_cursor.removeSelectedText()
                    elif line_text.startswith(" "):
                        leading_spaces = len(line_text) - len(line_text.lstrip(" "))
                        block_cursor = QTextCursor(block)
                        block_cursor.movePosition(QTextCursor.StartOfBlock)
                        block_cursor.movePosition(QTextCursor.NextCharacter, QTextCursor.KeepAnchor, leading_spaces)
                        block_cursor.removeSelectedText()
                    block = block.next()
                cursor.endEditBlock()
            return

        if key in (Qt.Key_Return, Qt.Key_Enter):
            block_text = cursor.block().text()

            next_block = cursor.block().next()
            next_line = next_block.text().strip() if next_block.isValid() else ""

            space_count = 0
            for ch in block_text:
                if ch == ' ':
                    space_count += 1
                elif ch == '\t':
                    space_count += 4
                else:
                    break
            indent_level = space_count // 4
            indent_spaces = ' ' * (indent_level * 4)

            before_cursor = self.document().toPlainText()[:cursor.position()]
            after_cursor = self.document().toPlainText()[cursor.position():]
            inside_pair = (
                re.search(r"<([a-zA-Z0-9:_\-]+)[^>]*>$", before_cursor)
                and re.match(r"^</([a-zA-Z0-9:_\-]+)>", after_cursor)
            )

            super().keyPressEvent(event)

            if inside_pair:
                self.insertPlainText(' ' * ((indent_level + 1) * 4))
                self.insertPlainText('\n' + indent_spaces)
                cursor = self.textCursor()
                cursor.movePosition(QTextCursor.Up)
                cursor.movePosition(QTextCursor.EndOfBlock)
                self.setTextCursor(cursor)
            else:
                self.insertPlainText(indent_spaces)
            return

        elif event.text() == '>':
            super().keyPressEvent(event)

            lookbehind = 100
            cursor = self.textCursor()
            cursor.movePosition(QTextCursor.Left, QTextCursor.KeepAnchor, lookbehind)
            context_text = cursor.selectedText()
            cursor.movePosition(QTextCursor.Right, QTextCursor.MoveAnchor, lookbehind)

            match = re.search(r"<([a-zA-Z0-9:_\-]+)(?![^<>]*\/)>$", context_text)
            if match:
                tag = match.group(1)
                void_tags = {
                    "br", "img", "hr", "meta", "input", "link",
                    "source", "area", "base", "col", "embed"
                }
                if tag.lower() not in void_tags:
                    closing_tag = f"</{tag}>"
                    self.insertPlainText(closing_tag)
                    cursor = self.textCursor()
                    for _ in range(len(closing_tag)):
                        cursor.movePosition(QTextCursor.Left)
                    self.setTextCursor(cursor)
            return

        # default
        super().keyPressEvent(event)






class StylesEditor(CodeEditor):
    def __init__(self):
        super().__init__()

        font = QFont("Consolas", 11)
        self.setFont(font)

        self.highlighter = CSSHighlighter(self.document())

        self.setStyleSheet("""
            StylesEditor {
                background-color: #1e1e1e;
                color: #dcdcdc;
                border: none;
                font-size: 11pt;
            }
        """)
        self.setPlaceholderText("/* Write your CSS styles here */")

    def keyPressEvent(self, event):
        if event.key() in (Qt.Key_Return, Qt.Key_Enter):
            cursor = self.textCursor()
            block_text = cursor.block().text()

            ends_with_open_brace = block_text.strip().endswith("{")
            ends_with_close_brace = block_text.strip().startswith("}")

            space_count = 0
            for ch in block_text:
                if ch == ' ':
                    space_count += 1
                elif ch == '\t':
                    space_count += 4
                else:
                    break
            base_level = space_count // 4
            extra_level = 1 if ends_with_open_brace else 0
            total_level = max(0, base_level + extra_level)
            indent_spaces = ' ' * (total_level * 4)

            QPlainTextEdit.keyPressEvent(self, event)

            if ends_with_close_brace:
                indent_spaces = ' ' * (max(0, base_level - 1) * 4)

            self.insertPlainText(indent_spaces)
            return

        elif event.key() == Qt.Key_BraceRight:
            cursor = self.textCursor()
            block_text = cursor.block().text()
            leading_spaces = len(block_text) - len(block_text.lstrip(' '))

            if leading_spaces >= 4:
                cursor.movePosition(QTextCursor.StartOfBlock)
                cursor.movePosition(QTextCursor.NextCharacter, QTextCursor.KeepAnchor, 4)
                cursor.removeSelectedText()

            super().keyPressEvent(event)
            return

        super().keyPressEvent(event)





















class ElementInserter:
    def __init__(self, html_editor, css_editor, preview):
        self.html = html_editor
        self.css = css_editor
        self.preview = preview

    def insert_snippet(self, html_snippet, css_snippet=None):
        cursor = self.html.textCursor()
        cursor.insertText(html_snippet.strip() + "\n")

        if css_snippet:
            css_text = self.css.toPlainText()
            new_css = css_snippet.strip()

            match = re.match(r"([.#]?[a-zA-Z0-9_-]+)\s*\{", new_css)
            selector = match.group(1) if match else None

            if selector and re.search(rf"{re.escape(selector)}\s*\{{", css_text):
                return

            if css_text.strip():
                self.css.appendPlainText("\n\n" + new_css)
            else:
                self.css.setPlainText(new_css)











    def insert_image(self):
        html = '<img src="images/example.jpg" alt="Example image" class="image">\n'
        css = """.image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}"""
        self.insert_snippet(html, css)

    def insert_button(self):
        html = '<button class="btn">Click Me</button>\n'
        css = """.btn {
    background-color: #2f6ad8;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 4px;
    cursor: pointer;
}
.btn:hover {
    background-color: #1f4fb0;
}"""
        self.insert_snippet(html, css)

    def insert_video(self):
        html = '<video controls class="video">\n  <source src="video.mp4" type="video/mp4">\n</video>\n'
        css = """.video {
    width: 100%;
    border-radius: 6px;
    margin: 10px 0;
}"""
        self.insert_snippet(html, css)

    def insert_table(self):
        html = """<table class="styled-table">
  <thead>
    <tr><th>Header 1</th><th>Header 2</th></tr>
  </thead>
  <tbody>
    <tr><td>Row 1</td><td>Data</td></tr>
  </tbody>
</table>\n"""
        css = """.styled-table {
    border-collapse: collapse;
    width: 100%;
}
.styled-table th, .styled-table td {
    border: 1px solid #ccc;
    padding: 8px;
}"""
        self.insert_snippet(html, css)

    def insert_paragraph(self):
        self.insert_snippet("<p>This is a sample paragraph.</p>\n")

    def insert_divider(self):
        self.insert_snippet("<hr>\n")

    def insert_list(self):
        self.insert_snippet("""<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>\n""")

    def insert_link(self):
        html = '<a href="#" class="link">Click here</a>\n'
        css = """.link {
    color: #2f6ad8;
    text-decoration: none;
}
.link:hover {
    text-decoration: underline;
}"""
        self.insert_snippet(html, css)

    def insert_base_structure(self):
        html = """<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>\n"""
        self.insert_snippet(html)

    def insert_advanced_structure(self):
        html = """<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Welcome to my webpage!">
    <meta name="author" content="Sample author">
    <link rel="icon" type="image/x-icon" href="favicon.png">
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>\n"""
        self.insert_snippet(html)

    def insert_script_block(self):
        self.insert_snippet("<script>\n  console.log('Hello!');\n</script>\n")

    def insert_script_link(self):
        self.insert_snippet('<script src="script.js"></script>\n')

    def insert_description(self):
        self.insert_snippet('<meta name="description" content="Welcome to my webpage!">\n')

    def insert_favicon(self):
        self.insert_snippet('<link rel="icon" type="image/x-icon" href="favicon.png">\n')


    def insert_section(self):
        self.insert_snippet("<section>\n  <h2>Section Title</h2>\n  <p>Content here...</p>\n</section>\n")

    def insert_head(self):
        self.insert_snippet("<head></head>\n")

    def insert_body(self):
        self.insert_snippet("<body>\n  <p>Body content...</p>\n</body>\n")

    def insert_main(self):
        self.insert_snippet("<main>\n  <h2>Main Content</h2>\n  <p>Write something here.</p>\n</main>\n")

    def insert_div(self):
        self.insert_snippet('<div class="container">\n  <p>Content inside a div.</p>\n</div>\n', 
                            """.container {
    padding: 20px;
    background-color: #f2f2f2;
}""")

    def insert_navigation(self):
        html = """<nav class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>\n"""
        css = """.nav {
    background-color: #1f4fb0;
    padding: 10px;
}
.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}
.nav a {
    color: white;
    text-decoration: none;
}
.nav a:hover {
    text-decoration: underline;
}"""
        self.insert_snippet(html, css)

    def insert_sidebar(self):
        html = """<aside class="sidebar">
  <h3>Sidebar</h3>
  <p>Additional content here.</p>
</aside>\n"""
        css = """.sidebar {
    background-color: #f0f0f0;
    padding: 15px;
    width: 25%;
    float: right;
    box-sizing: border-box;
}"""
        self.insert_snippet(html, css)

    def insert_go_to_top(self):
        html = """<button onclick="window.scrollTo({top: 0, behavior: 'smooth'});" class="go-top">↑ Top</button>\n"""
        css = """.go-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 14px;
    background-color: #2f6ad8;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.go-top:hover {
    background-color: #1f4fb0;
}"""
        self.insert_snippet(html, css)

    def insert_left_div(self):
        html = '<div class="left-div">Left aligned content</div>\n'
        css = """.left-div {
    float: left;
    width: 30%;
    background-color: #f2f2f2;
    padding: 10px;
}"""
        self.insert_snippet(html, css)

    def insert_right_div(self):
        html = '<div class="right-div">Right aligned content</div>\n'
        css = """.right-div {
    float: right;
    width: 30%;
    background-color: #f2f2f2;
    padding: 10px;
}"""
        self.insert_snippet(html, css)

    def insert_centered_div(self):
        html = '<div class="center-div">Centered content</div>\n'
        css = """.center-div {
    width: 60%;
    margin: 0 auto;
    text-align: center;
}"""
        self.insert_snippet(html, css)

    def insert_header(self):
        html = """<header class="page-header">
  <h1>Website Title</h1>
</header>\n"""
        css = """.page-header {
    background-color: #1f4fb0;
    color: white;
    padding: 20px;
    text-align: center;
}"""
        self.insert_snippet(html, css)

    def insert_footer(self):
        html = """<footer class="page-footer">
  <p>© 2025 My Website</p>
</footer>\n"""
        css = """.page-footer {
    background-color: #2f6ad8;
    color: white;
    padding: 10px;
    text-align: center;
}"""
        self.insert_snippet(html, css)

    def insert_topnav(self):
        html = """<nav class="topnav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>\n"""
        css = """.topnav {
    background-color: #1f4fb0;
    overflow: hidden;
}
.topnav a {
    float: left;
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}
.topnav a:hover {
    background-color: #3b7cff;
}"""
        self.insert_snippet(html, css)

























def update_preview():
    html = editor.toPlainText()
    css = styles_panel.toPlainText()
    if "<head>" in html:
        html = html.replace("<head>", f"<head>\n<style>{css}</style>")
    else:
        html = f"<head><style>{css}</style></head>\n{html}"

    js_error_dialog.clear_errors()
    preview.setHtml(html)


def save_project(inline=False):
    global current_html_path, current_css_path

    html_content = editor.toPlainText()
    css_content = styles_panel.toPlainText()

    if inline:
        if "<head>" in html_content:
            html_content = html_content.replace(
                "<head>", f"<head>\n<style>\n{css_content}\n</style>\n"
            )
        else:
            html_content = f"<head><style>{css_content}</style></head>\n{html_content}"
        file_filter = "HTML Files (*.html)"
        path, _ = QFileDialog.getSaveFileName(window, "Save HTML", current_html_path or "", file_filter)
        if not path:
            return
        with open(path, "w", encoding="utf-8") as f:
            f.write(html_content)
        current_html_path = path
        QMessageBox.information(window, "Saved", f"Saved as single file:\n{os.path.basename(path)}")
        return

    if not current_html_path:
        html_path, _ = QFileDialog.getSaveFileName(window, "Save HTML File", "", "HTML Files (*.html)")
        if not html_path:
            return
        css_path, _ = QFileDialog.getSaveFileName(window, "Save CSS File", "", "CSS Files (*.css)")
        if not css_path:
            return
        current_html_path, current_css_path = html_path, css_path
    else:
        html_path, css_path = current_html_path, current_css_path

    if css_path:
        css_filename = os.path.basename(css_path)
        if f"href='{css_filename}'" not in html_content and f'href="{css_filename}"' not in html_content:
            if "<head>" in html_content:
                html_content = html_content.replace(
                    "<head>", f"<head>\n        <link rel='stylesheet' href='{css_filename}'>\n"
                )
            else:
                html_content = f"<head><link rel='stylesheet' href='{css_filename}'></head>\n{html_content}"


    with open(html_path, "w", encoding="utf-8") as f:
        f.write(html_content)
    with open(css_path, "w", encoding="utf-8") as f:
        f.write(css_content)

    if inline:
        with open(path, "r", encoding="utf-8") as f:
            editor.setPlainText(f.read())
        styles_panel.setPlainText(css_content)
    else:
        # For separate HTML + CSS files
        with open(html_path, "r", encoding="utf-8") as f:
            editor.setPlainText(f.read())
        with open(css_path, "r", encoding="utf-8") as f:
            styles_panel.setPlainText(f.read())

    update_preview()

    QMessageBox.information(window, "Saved", f"Project saved to:\n{os.path.basename(html_path)} and {os.path.basename(css_path)}")


def save_project_as():
    options = ["Single HTML file (inline CSS)", "Separate HTML + CSS files"]
    choice, ok = QInputDialog.getItem(window, "Save As", "Save mode:", options, 0, False)
    if ok:
        inline = (choice == options[0])
        save_project(inline=inline)

def open_project():
    global current_html_path, current_css_path

    html_path, _ = QFileDialog.getOpenFileName(window, "Open HTML File", "", "HTML Files (*.html *.htm)")
    if not html_path:
        return

    with open(html_path, "r", encoding="utf-8") as f:
        html_content = f.read()

    css_path = None
    # Detect linked CSS
    import re
    match = re.search(r"<link[^>]*href=[\"']([^\"']+\.css)[\"']", html_content)
    if match:
        rel_css = match.group(1)
        candidate_path = os.path.join(os.path.dirname(html_path), rel_css)
        if os.path.exists(candidate_path):
            css_path = candidate_path

    if not css_path:
        ask_css = QMessageBox.question(window, "CSS File", "Open a separate CSS file?", QMessageBox.Yes | QMessageBox.No)
        if ask_css == QMessageBox.Yes:
            css_path, _ = QFileDialog.getOpenFileName(window, "Open CSS File", "", "CSS Files (*.css)")

    css_content = ""
    if css_path and os.path.exists(css_path):
        with open(css_path, "r", encoding="utf-8") as f:
            css_content = f.read()

    editor.setPlainText(html_content)
    styles_panel.setPlainText(css_content)
    update_preview()

    current_html_path, current_css_path = html_path, css_path
    QMessageBox.information(window, "Opened", f"Opened: {os.path.basename(html_path)}")


class RibbonGroup(QWidget):
    def __init__(self, title, buttons):
        super().__init__()
        self.buttons = {}
        layout = QVBoxLayout(self)
        layout.setContentsMargins(4, 4, 4, 2)
        layout.setSpacing(2)

        grid = QGridLayout()
        grid.setContentsMargins(0, 0, 0, 0)
        grid.setHorizontalSpacing(3)
        grid.setVerticalSpacing(3)

        for row, row_buttons in enumerate(buttons):
            for col, text in enumerate(row_buttons):
                if text:
                    btn = QToolButton()
                    btn.setText(text)
                    btn.setSizePolicy(QSizePolicy.Minimum, QSizePolicy.Minimum)
                    btn.setMinimumWidth(70)
                    btn.setMinimumHeight(28)
                    grid.addWidget(btn, row, col)
                    self.buttons[text] = btn

        layout.addLayout(grid)


        label = QLabel(title)
        label.setAlignment(Qt.AlignCenter)
        label.setStyleSheet("font-size: 10px; color: #ffffff; margin-top: 2px;")
        layout.addWidget(label)

        self.setStyleSheet("""
        RibbonGroup {
            background: #2b2b2b;
            border: 1px solid #444;
        }
        QToolButton {
            background: #3c3c3c;
            color: #eee;
            font-size: 11px;
            border: 1px solid #555;
            padding: 3px 10px;
        }
        QToolButton:hover {
            background: #505050;
        }
        QToolButton:pressed {
            background: #666666;
        }
        """)


class RibbonMenu(QWidget):
    def __init__(self, inserter):
        super().__init__()
        self.inserter = inserter
        layout = QVBoxLayout(self)
        layout.setContentsMargins(0, 0, 0, 0)
        layout.setSpacing(0)

        self.tab_bar = QTabBar()
        for tab_name in ["Home", "Insert", "Design", "Debug", "Help"]:
            self.tab_bar.addTab(tab_name)
        self.tab_bar.setExpanding(False)
        layout.addWidget(self.tab_bar)

        self.stack = QStackedWidget()
        layout.addWidget(self.stack)

        self.home_tab = self.make_home_tab()
        self.insert_tab = self.make_insert_tab()
        self.design_tab = self.make_design_tab()
        self.debug_tab = self.make_debug_tab()
        self.help_tab = self.make_help_tab()

        self.stack.addWidget(self.home_tab)
        self.stack.addWidget(self.insert_tab)
        self.stack.addWidget(self.design_tab)
        self.stack.addWidget(self.debug_tab)
        self.stack.addWidget(self.help_tab)

        self.tab_bar.currentChanged.connect(self.stack.setCurrentIndex)

        self.setStyleSheet("""
        QTabBar::tab {
            padding: 4px 18px;
            background: #3c3c3c;
            color: #eee;
            font-weight: 600;
            font-size: 13px;
            border: none;
            margin-right: 1px;
        }
        QTabBar::tab:selected {
            background: #0073FF;
        }
        QTabBar::tab:hover {
            background: #59a4ff;
        }
        QWidget#RibbonContent {
            background: #2b2b2b;
        }
        """)

    def make_home_tab(self):
        tab = QWidget()
        tab.setObjectName("RibbonContent")

        layout = QHBoxLayout(tab)
        layout.setContentsMargins(8, 8, 8, 4)
        layout.setSpacing(8)

        font_group = RibbonGroup("Font", [
            ["Bold", "Italic"],
            ["Strikethrough", "Underline"]
        ])
        clipboard_group = RibbonGroup("Clipboard", [
            ["Cut", "Copy"],
            ["Paste", "Select All"]
        ])
        edit_group = RibbonGroup("Edit", [
            ["Undo", "Find"],
            ["Redo", "Find and Replace"]
        ])
        file_group = RibbonGroup("File", [
            ["Save", "Save as"],
            ["Open", "New"]
        ])

        if "Save" in file_group.buttons:
            file_group.buttons["Save"].clicked.connect(lambda: save_project(inline=False))

        if "Save as" in file_group.buttons:
            file_group.buttons["Save as"].clicked.connect(save_project_as)

        if "Open" in file_group.buttons:
            file_group.buttons["Open"].clicked.connect(open_project)

        if "New" in file_group.buttons:
            file_group.buttons["New"].clicked.connect(new_instance)

        if "Cut" in clipboard_group.buttons:
            clipboard_group.buttons["Cut"].clicked.connect(lambda: cut_text(editor))
        if "Copy" in clipboard_group.buttons:
            clipboard_group.buttons["Copy"].clicked.connect(lambda: copy_text(editor))
        if "Paste" in clipboard_group.buttons:
            clipboard_group.buttons["Paste"].clicked.connect(lambda: paste_text(editor))
        if "Select All" in clipboard_group.buttons:
            clipboard_group.buttons["Select All"].clicked.connect(lambda: select_all_text(editor))

        if "Undo" in edit_group.buttons:
            edit_group.buttons["Undo"].clicked.connect(lambda: undo_action(editor))
        if "Redo" in edit_group.buttons:
            edit_group.buttons["Redo"].clicked.connect(lambda: redo_action(editor))
        if "Find" in edit_group.buttons:
            edit_group.buttons["Find"].clicked.connect(lambda: open_find_dialog(editor))
        if "Find and Replace" in edit_group.buttons:
            edit_group.buttons["Find and Replace"].clicked.connect(lambda: open_find_replace_dialog(editor))

        if "Bold" in font_group.buttons:
            font_group.buttons["Bold"].clicked.connect(lambda: apply_formatting(editor, "b"))
        if "Italic" in font_group.buttons:
            font_group.buttons["Italic"].clicked.connect(lambda: apply_formatting(editor, "i"))
        if "Underline" in font_group.buttons:
            font_group.buttons["Underline"].clicked.connect(lambda: apply_formatting(editor, "u"))
        if "Strikethrough" in font_group.buttons:
            font_group.buttons["Strikethrough"].clicked.connect(lambda: apply_formatting(editor, "s"))





        layout.addWidget(file_group)
        layout.addWidget(edit_group)
        layout.addWidget(clipboard_group)
        layout.addWidget(font_group)
        layout.addStretch()
        return tab

    def make_insert_tab(self):
        tab = QWidget()
        tab.setObjectName("RibbonContent")
        layout = QHBoxLayout(tab)
        layout.setContentsMargins(8, 8, 8, 4)
        layout.setSpacing(10)

        page_elements_group = RibbonGroup("Page Elements", [
            ["Image", "Table", "Video", "Button"],
            ["Paragraph", "Divider", "List", "Link"]
        ])
        page_structure_group = RibbonGroup("HTML Structure", [
            ["Base Structure", "Advanced Structure", "Favicon"],
            ["Script Block", "Script Link", "Description"]
        ])
        page_sections_group = RibbonGroup("Page Sections", [
            ["Section", "Head", "Header", "Navigation"],
            ["Div", "Body", "Main", "Footer"]
        ])
        page_layout_group = RibbonGroup("Layout", [
            ["Topnav", "Sidebar", "Go-To-Top"],
            ["Left Div", "Centered Div", "Right Div"]
        ])
        layout.addWidget(page_elements_group)
        layout.addWidget(page_structure_group)
        layout.addWidget(page_sections_group)
        layout.addWidget(page_layout_group)
        layout.addStretch()

        if "Image" in page_elements_group.buttons:
            page_elements_group.buttons["Image"].clicked.connect(self.inserter.insert_image)
        if "Table" in page_elements_group.buttons:
            page_elements_group.buttons["Table"].clicked.connect(self.inserter.insert_table)
        if "Video" in page_elements_group.buttons:
            page_elements_group.buttons["Video"].clicked.connect(self.inserter.insert_video)
        if "Button" in page_elements_group.buttons:
            page_elements_group.buttons["Button"].clicked.connect(self.inserter.insert_button)
        if "Paragraph" in page_elements_group.buttons:
            page_elements_group.buttons["Paragraph"].clicked.connect(self.inserter.insert_paragraph)
        if "Divider" in page_elements_group.buttons:
            page_elements_group.buttons["Divider"].clicked.connect(self.inserter.insert_divider)
        if "List" in page_elements_group.buttons:
            page_elements_group.buttons["List"].clicked.connect(self.inserter.insert_list)
        if "Link" in page_elements_group.buttons:
            page_elements_group.buttons["Link"].clicked.connect(self.inserter.insert_link)

        if "Base Structure" in page_structure_group.buttons:
            page_structure_group.buttons["Base Structure"].clicked.connect(self.inserter.insert_base_structure)
        if "Advanced Structure" in page_structure_group.buttons:
            page_structure_group.buttons["Advanced Structure"].clicked.connect(self.inserter.insert_advanced_structure)
        if "Favicon" in page_structure_group.buttons:
            page_structure_group.buttons["Favicon"].clicked.connect(self.inserter.insert_favicon)
        if "Script Block" in page_structure_group.buttons:
            page_structure_group.buttons["Script Block"].clicked.connect(self.inserter.insert_script_block)
        if "Script Link" in page_structure_group.buttons:
            page_structure_group.buttons["Script Link"].clicked.connect(self.inserter.insert_script_link)
        if "Description" in page_structure_group.buttons:
            page_structure_group.buttons["Description"].clicked.connect(self.inserter.insert_description)

        if "Section" in page_sections_group.buttons:
            page_sections_group.buttons["Section"].clicked.connect(self.inserter.insert_section)
        if "Head" in page_sections_group.buttons:
            page_sections_group.buttons["Head"].clicked.connect(self.inserter.insert_head)
        if "Header" in page_sections_group.buttons:
            page_sections_group.buttons["Header"].clicked.connect(self.inserter.insert_header)
        if "Navigation" in page_sections_group.buttons:
            page_sections_group.buttons["Navigation"].clicked.connect(self.inserter.insert_navigation)
        if "Div" in page_sections_group.buttons:
            page_sections_group.buttons["Div"].clicked.connect(self.inserter.insert_div)
        if "Body" in page_sections_group.buttons:
            page_sections_group.buttons["Body"].clicked.connect(self.inserter.insert_body)
        if "Main" in page_sections_group.buttons:
            page_sections_group.buttons["Main"].clicked.connect(self.inserter.insert_main)
        if "Footer" in page_sections_group.buttons:
            page_sections_group.buttons["Footer"].clicked.connect(self.inserter.insert_footer)

        if "Topnav" in page_layout_group.buttons:
            page_layout_group.buttons["Topnav"].clicked.connect(self.inserter.insert_topnav)
        if "Sidebar" in page_layout_group.buttons:
            page_layout_group.buttons["Sidebar"].clicked.connect(self.inserter.insert_sidebar)
        if "Go-To-Top" in page_layout_group.buttons:
            page_layout_group.buttons["Go-To-Top"].clicked.connect(self.inserter.insert_go_to_top)
        if "Left Div" in page_layout_group.buttons:
            page_layout_group.buttons["Left Div"].clicked.connect(self.inserter.insert_left_div)
        if "Centered Div" in page_layout_group.buttons:
            page_layout_group.buttons["Centered Div"].clicked.connect(self.inserter.insert_centered_div)
        if "Right Div" in page_layout_group.buttons:
            page_layout_group.buttons["Right Div"].clicked.connect(self.inserter.insert_right_div)

        return tab

    def make_design_tab(self):
        tab = QWidget()
        tab.setObjectName("RibbonContent")
        layout = QHBoxLayout(tab)
        layout.setContentsMargins(8, 8, 8, 4)
        layout.setSpacing(10)

        style_group = RibbonGroup("Appearance", [
            ["Fonts", "Background"],
            ["Colors", "Gradient"]
        ])
        layout.addWidget(style_group)
        layout.addStretch()

        if "Colors" in style_group.buttons:
            style_group.buttons["Colors"].clicked.connect(self.open_color_chooser)
        if "Fonts" in style_group.buttons:
            style_group.buttons["Fonts"].clicked.connect(self.open_font_chooser)
        if "Background" in style_group.buttons:
            style_group.buttons["Background"].clicked.connect(self.open_background_chooser)
        if "Gradient" in style_group.buttons:
            style_group.buttons["Gradient"].clicked.connect(self.open_gradient_chooser)



        return tab
    
    def make_debug_tab(self):
        tab = QWidget()
        tab.setObjectName("RibbonContent")
        layout = QHBoxLayout(tab)
        layout.setContentsMargins(8, 8, 8, 4)
        layout.setSpacing(10)

        javascript_group = RibbonGroup("JavaScript", [
            ["Open Console"],
            ["Reload"]
        ])
        layout.addWidget(javascript_group)
        layout.addStretch()
        
        if "Open Console" in javascript_group.buttons:
            javascript_group.buttons["Open Console"].clicked.connect(self.toggle_js_console)
        if "Reload" in javascript_group.buttons:
            javascript_group.buttons["Reload"].clicked.connect(update_preview)
        return tab

    def make_help_tab(self):
        tab = QWidget()
        tab.setObjectName("RibbonContent")
        layout = QHBoxLayout(tab)
        layout.setContentsMargins(8, 8, 8, 4)
        layout.setSpacing(10)

        help_group = RibbonGroup("Help", [
            ["User Guide", "Report a Bug"],
            ["Support", "GitHub"]
        ])
        about_group = RibbonGroup("About", [
            ["About this Application", "License"],
            ["Developer Website", "Developer GitHub"]
        ])

        layout.addWidget(help_group)
        layout.addWidget(about_group)
        layout.addStretch()

        def open_url(url):
            webbrowser.open(url)

        if "User Guide" in help_group.buttons:
            help_group.buttons["User Guide"].clicked.connect(self.show_user_guide)
            
        if "Report a Bug" in help_group.buttons:
            help_group.buttons["Report a Bug"].clicked.connect(
                lambda: open_url("https://tk-dev-software.com/support/")
            )

        if "Support" in help_group.buttons:
            help_group.buttons["Support"].clicked.connect(
                lambda: open_url("https://tk-dev-software.com/support/")
            )

        if "GitHub" in help_group.buttons:
            help_group.buttons["GitHub"].clicked.connect(
                lambda: open_url("https://github.com/hasderhi/HTML-Editor-2")
            )

        if "About this Application" in about_group.buttons:
            about_group.buttons["About this Application"].clicked.connect(self.show_about)

        if "License" in about_group.buttons:
            about_group.buttons["License"].clicked.connect(self.show_license)

        if "Developer Website" in about_group.buttons:
            about_group.buttons["Developer Website"].clicked.connect(
                lambda: open_url("https://tk-dev-software.com")
            )

        if "Developer GitHub" in about_group.buttons:
            about_group.buttons["Developer GitHub"].clicked.connect(
                lambda: open_url("https://github.com/hasderhi/")
            )

        return tab
    






















    # this is soo chaotic



    def open_color_chooser(self):
        color = QColorDialog.getColor(Qt.white, self, "Choose a CSS Color")
        if color.isValid():
            css_value = color.name(QColor.HexRgb)

            cursor = styles_panel.textCursor()
            block_text = cursor.block().text()
            indent = len(block_text) - len(block_text.lstrip(" "))
            indent_spaces = " " * indent

            styles_panel.insertPlainText(f"{indent_spaces}color: {css_value};\n")


    def open_font_chooser(self):
        result = QFontDialog.getFont(QFont("Arial", 11), self, "Choose a CSS Font")

        if isinstance(result, tuple):
            if isinstance(result[0], bool):
                ok, font = result
            else:
                font, ok = result
        else:
            font, ok = result, True

        if ok and isinstance(font, QFont):
            family = font.family()

            cursor = styles_panel.textCursor()
            block_text = cursor.block().text()
            indent = len(block_text) - len(block_text.lstrip(" "))
            indent_spaces = " " * indent

            css_value = f"{indent_spaces}font-family: '{family}', sans-serif;\n"
            styles_panel.insertPlainText(css_value)


    def open_background_chooser(self):
        color = QColorDialog.getColor(Qt.white, self, "Choose a Background Color")
        if color.isValid():
            css_value = color.name(QColor.HexRgb)

            cursor = styles_panel.textCursor()
            block_text = cursor.block().text()
            indent = len(block_text) - len(block_text.lstrip(" "))
            indent_spaces = " " * indent

            styles_panel.insertPlainText(f"{indent_spaces}background-color: {css_value};\n")

    def open_gradient_chooser(self):
        dlg = QDialog(self)
        dlg.setWindowTitle("Create CSS Gradient")
        dlg.setFixedSize(360, 260)
        layout = QVBoxLayout(dlg)
        layout.setContentsMargins(20, 20, 20, 20)
        layout.setSpacing(12)

        title = QLabel("Create a CSS Gradient")
        title.setAlignment(Qt.AlignCenter)
        title.setStyleSheet("font-weight: bold; font-size: 14px; color: white;")
        layout.addWidget(title)

        color_layout = QHBoxLayout()
        color1_btn = QPushButton("Color 1")
        color2_btn = QPushButton("Color 2")
        color_layout.addWidget(color1_btn)
        color_layout.addWidget(color2_btn)
        layout.addLayout(color_layout)

        color1 = QColor("#1f4fb0")
        color2 = QColor("#3b7cff")

        def pick_color(target):
            col = QColorDialog.getColor(target, dlg)
            if col.isValid():
                if target == color1:
                    color1.setRgb(col.red(), col.green(), col.blue())
                    color1_btn.setStyleSheet(f"background-color: {col.name()};")
                else:
                    color2.setRgb(col.red(), col.green(), col.blue())
                    color2_btn.setStyleSheet(f"background-color: {col.name()};")

        color1_btn.clicked.connect(lambda: pick_color(color1))
        color2_btn.clicked.connect(lambda: pick_color(color2))

        direction_label = QLabel("Direction:")
        direction_label.setStyleSheet("color: white; font-size: 12px;")
        direction_combo = QComboBox()
        direction_combo.addItems([
            "to right",
            "to left",
            "to bottom",
            "to top",
            "to bottom right",
            "to bottom left",
            "to top right",
            "to top left"
        ])
        direction_combo.setStyleSheet("""
            QComboBox { background: #333; color: white; border: 1px solid #555; padding: 4px; }
            QComboBox QAbstractItemView { background: #222; color: white; }
        """)

        layout.addWidget(direction_label)
        layout.addWidget(direction_combo)

        btn_layout = QHBoxLayout()
        preview_btn = QPushButton("Preview")
        insert_btn = QPushButton("Insert Gradient")
        close_btn = QPushButton("Cancel")
        for b in (preview_btn, insert_btn, close_btn):
            b.setCursor(Qt.PointingHandCursor)
            b.setStyleSheet("""
                QPushButton {
                    background: #3c3c3c; color: #eee;
                    border: 1px solid #555; border-radius: 3px;
                    padding: 5px 10px;
                }
                QPushButton:hover { background: #505050; }
            """)
        btn_layout.addWidget(preview_btn)
        btn_layout.addWidget(insert_btn)
        btn_layout.addWidget(close_btn)
        layout.addLayout(btn_layout)

        preview = QLabel()
        preview.setFixedHeight(60)
        preview.setStyleSheet("background: linear-gradient(to right, #1f4fb0, #3b7cff); border: 1px solid #555;")
        layout.insertWidget(3, preview)

        def update_preview():
            grad = f"linear-gradient({direction_combo.currentText()}, {color1.name()}, {color2.name()})"
            preview.setStyleSheet(f"background: {grad}; border: 1px solid #555;")

        preview_btn.clicked.connect(update_preview)

        def insert_gradient():
            grad = f"linear-gradient({direction_combo.currentText()}, {color1.name()}, {color2.name()})"

            cursor = styles_panel.textCursor()
            block_text = cursor.block().text()
            indent = len(block_text) - len(block_text.lstrip(" "))
            indent_spaces = " " * indent

            styles_panel.insertPlainText(f"{indent_spaces}background: {grad};\n")
            dlg.accept()

        insert_btn.clicked.connect(insert_gradient)
        close_btn.clicked.connect(dlg.reject)

        dlg.exec()



    def toggle_js_console(self):
        if js_error_dialog.isVisible():
            js_error_dialog.hide()
        else:
            js_error_dialog.show()
            js_error_dialog.raise_()
            js_error_dialog.activateWindow()



    def show_user_guide(self):
        dlg = QDialog(self)
        dlg.setWindowTitle("User Guide")
        dlg.resize(800, 600)
        dlg.setWindowModality(Qt.ApplicationModal)
        dlg.setWindowIcon(QIcon(resource_path("htmleditor.ico")))

        layout = QVBoxLayout(dlg)
        layout.setContentsMargins(20, 20, 20, 20)
        layout.setSpacing(12)

        pixmap = QPixmap(resource_path("htmleditor.png"))
        if not pixmap.isNull():
            icon_label = QLabel()
            icon_label.setPixmap(pixmap.scaled(64, 64, Qt.KeepAspectRatio, Qt.SmoothTransformation))
            icon_label.setAlignment(Qt.AlignCenter)
            layout.addWidget(icon_label)

        title_label = QLabel("User Guide")
        title_font = QFont("Segoe UI", 18, QFont.Bold)
        title_label.setFont(title_font)
        title_label.setAlignment(Qt.AlignCenter)
        title_label.setStyleSheet("color: #ffffff;")
        layout.addWidget(title_label)

        toolbar = QHBoxLayout()
        toolbar.setSpacing(10)
        toolbar.setAlignment(Qt.AlignRight)

        btn_top = QPushButton("Back to Top")
        btn_browser = QPushButton("Open in Browser")
        btn_close = QPushButton("Close")

        for btn in (btn_top, btn_browser, btn_close):
            btn.setCursor(Qt.PointingHandCursor)
            btn.setFixedHeight(26)
            btn.setStyleSheet("""
                QPushButton {
                    background: #3c3c3c;
                    color: #eee;
                    border: 1px solid #555;
                    border-radius: 4px;
                    padding: 4px 10px;
                    font-size: 11px;
                }
                QPushButton:hover {
                    background: #505050;
                }
                QPushButton:pressed {
                    background: #666;
                }
            """)

        toolbar.addStretch()
        toolbar.addWidget(btn_top)
        toolbar.addWidget(btn_browser)
        toolbar.addWidget(btn_close)
        layout.addLayout(toolbar)

        guide_view = QTextBrowser()
        guide_view.setOpenExternalLinks(True)
        guide_view.setStyleSheet("""
            QTextBrowser {
                background-color: #1e1e1e;
                color: #e6e6e6;
                border: 1px solid #444;
                border-radius: 6px;
                padding: 8px;
                font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
                font-size: 13px;
            }
            QScrollBar:vertical {
                background: #2a2a2a;
                width: 10px;
                margin: 0;
            }
            QScrollBar::handle:vertical {
                background: #555;
                min-height: 20px;
                border-radius: 5px;
            }
            QScrollBar::handle:vertical:hover {
                background: #777;
            }
        """)
        layout.addWidget(guide_view, 1)

        manual_path = os.path.join(os.path.dirname(__file__), "manual.html")
        if os.path.exists(manual_path):
            try:
                with open(manual_path, "r", encoding="utf-8") as f:
                    guide_html = f.read()
                guide_view.setHtml(guide_html)
            except Exception as e:
                QMessageBox.critical(dlg, "Error", f"Failed to load manual.html:\n{e}")
                guide_view.setHtml("<h3 style='color:red;'>Error loading user guide.</h3>")
        else:
            QMessageBox.critical(dlg, "File Missing", "The user guide file 'manual.html' was not found.")
            guide_view.setHtml("<h3 style='color:red;'>User guide file not found.</h3>")

        btn_top.clicked.connect(lambda: guide_view.scrollToAnchor("top"))
        btn_browser.clicked.connect(lambda: QDesktopServices.openUrl(QUrl.fromLocalFile(manual_path)))
        btn_close.clicked.connect(dlg.close)

        dlg.exec()


    def show_license(self):
        dlg = QDialog(self)
        dlg.setWindowTitle("License")
        dlg.resize(400, 300)

        layout = QVBoxLayout(dlg)
        layout.setAlignment(Qt.AlignCenter)
        layout.setSpacing(10)

        pixmap = QPixmap(resource_path("htmleditor.png"))
        if not pixmap.isNull():
            icon_label = QLabel(dlg)
            icon_label.setPixmap(pixmap.scaled(64, 64, Qt.KeepAspectRatio, Qt.SmoothTransformation))
            icon_label.setAlignment(Qt.AlignCenter)
            layout.addWidget(icon_label)

        title_label = QLabel("License", dlg)
        title_font = QFont("Arial", 18, QFont.Bold)
        title_label.setFont(title_font)
        title_label.setAlignment(Qt.AlignCenter)
        layout.addWidget(title_label)
        
        license_label = QLabel("""<b>MIT License</b><br><br>

Copyright (c) 2025 <i>Tobias Kisling (tk_dev / hasderhi)</i><br><br>

Permission is hereby granted, free of charge, to any person obtaining a copy<br>
of this software and associated documentation files (the "Software"), to deal<br>
in the Software without restriction, including without limitation the rights<br>
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell<br>
copies of the Software, and to permit persons to whom the Software is furnished<br>
to do so, subject to the following conditions:<br><br>

The above copyright notice and this permission notice shall be included in all<br>
copies or substantial portions of the Software.<br><br>

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR<br>
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,<br>
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE<br>
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,<br>
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN<br>
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br><br>

<hr><br>

Note on third-party libraries:<br><br>

This application uses <b>PySide6</b> (Qt for Python) for its GUI framework. PySide6<br>
is licensed under the <b>LGPLv3</b>, which allows dynamic linking in your application.
""", dlg)
        license_label.setAlignment(Qt.AlignCenter)
        license_label.setTextFormat(Qt.RichText)
        layout.addWidget(license_label)



        dlg.exec()

    def show_about(self):
        dlg = QDialog(self)
        dlg.setWindowTitle("About HTML Editor")
        dlg.resize(400, 300)

        layout = QVBoxLayout(dlg)
        layout.setAlignment(Qt.AlignCenter)
        layout.setSpacing(10)

        pixmap = QPixmap(resource_path("htmleditor.png"))
        if not pixmap.isNull():
            icon_label = QLabel(dlg)
            icon_label.setPixmap(pixmap.scaled(64, 64, Qt.KeepAspectRatio, Qt.SmoothTransformation))
            icon_label.setAlignment(Qt.AlignCenter)
            layout.addWidget(icon_label)

        title_label = QLabel("HTML Editor 2", dlg)
        title_font = QFont("Arial", 18, QFont.Bold)
        title_label.setFont(title_font)
        title_label.setAlignment(Qt.AlignCenter)
        layout.addWidget(title_label)

        version_label = QLabel("v2.0.0", dlg)
        version_label.setAlignment(Qt.AlignCenter)
        layout.addWidget(version_label)

        dev_label = QLabel("Developed by Tobias Kisling", dlg)
        dev_label.setAlignment(Qt.AlignCenter)
        layout.addWidget(dev_label)

        website_label = QLabel('<a href="https://tk-dev-software.com">tk-dev-software.com</a>', dlg)
        website_label.setAlignment(Qt.AlignCenter)
        website_label.setTextFormat(Qt.RichText)
        website_label.setTextInteractionFlags(Qt.TextBrowserInteraction)
        website_label.setOpenExternalLinks(True)
        website_label.setCursor(QCursor(Qt.PointingHandCursor))
        layout.addWidget(website_label)

        github_label = QLabel('<a href="https://github.com/hasderhi">@hasderhi on GitHub</a>', dlg)
        github_label.setAlignment(Qt.AlignCenter)
        github_label.setTextFormat(Qt.RichText)
        github_label.setTextInteractionFlags(Qt.TextBrowserInteraction)
        github_label.setOpenExternalLinks(True)
        github_label.setCursor(QCursor(Qt.PointingHandCursor))
        layout.addWidget(github_label)

        dlg.exec()


app = QApplication([])
app.setWindowIcon(QIcon(resource_path("htmleditor.png")))

window = QWidget()
window.setWindowTitle("HTML Editor 2")
window.resize(1400, 800)
main_layout = QVBoxLayout(window)
main_layout.setContentsMargins(0, 0, 0, 0)





def new_instance():
    """Open a new instance of HTML Editor 2."""
    try:
        subprocess.Popen([sys.executable, sys.argv[0]])
    except Exception as e:
        QMessageBox.critical(None, "Error", f"Failed to open new instance:\n{e}")


def cut_text(editor):
    editor.cut()

def copy_text(editor):
    editor.copy()

def paste_text(editor):
    editor.paste()

def select_all_text(editor):
    editor.selectAll()

def undo_action(editor):
    editor.undo()

def redo_action(editor):
    editor.redo()


def apply_formatting(editor, tag):
    """Wraps selected text in an HTML tag (e.g. <b>...</b>)"""
    cursor = editor.textCursor()
    if not cursor.hasSelection():
        return
    selected_text = cursor.selectedText()
    cursor.insertText(f"<{tag}>{selected_text}</{tag}>")


def open_find_dialog(editor):
    dlg = QDialog()
    dlg.setWindowTitle("Find")
    layout = QVBoxLayout(dlg)

    lbl = QLabel("Find what:")
    find_input = QLineEdit()
    layout.addWidget(lbl)
    layout.addWidget(find_input)

    btns = QHBoxLayout()
    btn_find = QPushButton("Find Next")
    btn_close = QPushButton("Close")
    btns.addWidget(btn_find)
    btns.addWidget(btn_close)
    layout.addLayout(btns)

    def do_find():
        text = find_input.text()
        if not text:
            return
        doc = editor.document()
        cursor = editor.textCursor()
        found = doc.find(text, cursor)
        if found.isNull():
            found = doc.find(text)
        if not found.isNull():
            editor.setTextCursor(found)
        else:
            QMessageBox.information(dlg, "Find", f"'{text}' not found.")

    btn_find.clicked.connect(do_find)
    btn_close.clicked.connect(dlg.close)
    dlg.exec()


def open_find_replace_dialog(editor):
    dlg = QDialog()
    dlg.setWindowTitle("Find and Replace")
    layout = QVBoxLayout(dlg)

    lbl1 = QLabel("Find what:")
    find_input = QLineEdit()
    lbl2 = QLabel("Replace with:")
    replace_input = QLineEdit()
    layout.addWidget(lbl1)
    layout.addWidget(find_input)
    layout.addWidget(lbl2)
    layout.addWidget(replace_input)

    btns = QHBoxLayout()
    btn_find = QPushButton("Find Next")
    btn_replace = QPushButton("Replace")
    btn_replace_all = QPushButton("Replace All")
    btn_close = QPushButton("Close")
    for b in (btn_find, btn_replace, btn_replace_all, btn_close):
        btns.addWidget(b)
    layout.addLayout(btns)

    def do_find():
        text = find_input.text()
        if not text:
            return
        doc = editor.document()
        cursor = editor.textCursor()
        found = doc.find(text, cursor)
        if found.isNull():
            found = doc.find(text)
        if not found.isNull():
            editor.setTextCursor(found)
        else:
            QMessageBox.information(dlg, "Find", f"'{text}' not found.")

    def do_replace():
        cursor = editor.textCursor()
        if cursor.hasSelection():
            cursor.insertText(replace_input.text())
            do_find()

    def do_replace_all():
        text = find_input.text()
        if not text:
            return
        replace_with = replace_input.text()
        content = editor.toPlainText().replace(text, replace_with)
        editor.setPlainText(content)
        QMessageBox.information(dlg, "Replace All", "All occurrences replaced.")

    btn_find.clicked.connect(do_find)
    btn_replace.clicked.connect(do_replace)
    btn_replace_all.clicked.connect(do_replace_all)
    btn_close.clicked.connect(dlg.close)
    dlg.exec()




main_split = QSplitter(Qt.Horizontal)

styles_panel = StylesEditor()
styles_panel.setMinimumWidth(360)
main_split.addWidget(styles_panel)

content_preview_split = QSplitter(Qt.Horizontal)



editor = CodeEditor()
editor.setMinimumWidth(560)

content_preview_split.addWidget(editor)
editor.setPlaceholderText("Write your HTML / JavaScript code here...")


js_error_dialog = JSErrorDialog(window)
js_error_dialog.hide()

page = CustomWebEnginePage()
page.jsMessage.connect(js_error_dialog.add_message)

preview = QWebEngineView()
preview.setPage(page)
content_preview_split.addWidget(preview)

inserter = ElementInserter(editor, styles_panel, preview)

ribbon = RibbonMenu(inserter)
ribbon.setFixedHeight(120)
main_layout.addWidget(ribbon)

preview.setHtml(editor.toPlainText())


editor.textChanged.connect(update_preview)
styles_panel.textChanged.connect(update_preview)

main_split.addWidget(content_preview_split)
main_split.setStretchFactor(0, 1)
main_split.setStretchFactor(1, 4)

main_layout.addWidget(main_split)

window.show()

# key shortcuts go here
QShortcut(QKeySequence("Ctrl+S"), window).activated.connect(lambda: save_project(inline=False))
QShortcut(QKeySequence("Ctrl+Shift+S"), window).activated.connect(save_project_as)
QShortcut(QKeySequence("Ctrl+O"), window).activated.connect(open_project)
QShortcut(QKeySequence("Ctrl+N"), window).activated.connect(new_instance)

QShortcut(QKeySequence("Ctrl+F"), window).activated.connect(lambda: open_find_dialog(editor))
QShortcut(QKeySequence("Ctrl+Shift+F"), window).activated.connect(lambda: open_find_replace_dialog(editor))

QShortcut(QKeySequence("Ctrl+Alt+B"), window).activated.connect(lambda: apply_formatting(editor, "b"))
QShortcut(QKeySequence("Ctrl+Alt+I"), window).activated.connect(lambda: apply_formatting(editor, "i"))
QShortcut(QKeySequence("Ctrl+Alt+U"), window).activated.connect(lambda: apply_formatting(editor, "u"))
QShortcut(QKeySequence("Ctrl+Alt+S"), window).activated.connect(lambda: apply_formatting(editor, "s"))

QShortcut(QKeySequence("Ctrl+H"), window).activated.connect(inserter.insert_base_structure)
QShortcut(QKeySequence("Ctrl+Shift+H"), window).activated.connect(inserter.insert_advanced_structure)

QShortcut(QKeySequence("Ctrl+R"), window).activated.connect(update_preview)

app.exec()