<template>
    <div class="rich-text-editor" :class="{ 'dark-mode': isDarkMode }">
        <div class="editor-toolbar">
            <!-- Text formatting -->
            <div class="toolbar-group">
                <button
                    type="button"
                    @click="execCommand('bold')"
                    :class="{ active: isActive('bold') }"
                    title="Bold (Ctrl+B)"
                >
                    <BoldOutlined />
                </button>
                <button
                    type="button"
                    @click="execCommand('italic')"
                    :class="{ active: isActive('italic') }"
                    title="Italic (Ctrl+I)"
                >
                    <ItalicOutlined />
                </button>
                <button
                    type="button"
                    @click="execCommand('underline')"
                    :class="{ active: isActive('underline') }"
                    title="Underline (Ctrl+U)"
                >
                    <UnderlineOutlined />
                </button>
                <button
                    type="button"
                    @click="execCommand('strikeThrough')"
                    :class="{ active: isActive('strikeThrough') }"
                    title="Strikethrough"
                >
                    <StrikethroughOutlined />
                </button>
            </div>

            <div class="toolbar-divider"></div>

            <!-- Headings -->
            <div class="toolbar-group">
                <a-dropdown :trigger="['click']">
                    <button type="button" class="dropdown-btn format-dropdown" title="Heading">
                        <FontSizeOutlined />
                        <span class="format-label">{{ blockFormatLabels[currentBlockFormat] || 'Paragraph' }}</span>
                        <DownOutlined class="dropdown-icon" />
                    </button>
                    <template #overlay>
                        <a-menu @click="handleHeadingClick" :selectedKeys="[currentBlockFormat]">
                            <a-menu-item key="p">Paragraph</a-menu-item>
                            <a-menu-item key="h1">Heading 1</a-menu-item>
                            <a-menu-item key="h2">Heading 2</a-menu-item>
                            <a-menu-item key="h3">Heading 3</a-menu-item>
                            <a-menu-item key="h4">Heading 4</a-menu-item>
                        </a-menu>
                    </template>
                </a-dropdown>
            </div>

            <div class="toolbar-divider"></div>

            <!-- Lists -->
            <div class="toolbar-group">
                <button
                    type="button"
                    @click="execCommand('insertUnorderedList')"
                    :class="{ active: isActive('insertUnorderedList') }"
                    title="Bullet List"
                >
                    <UnorderedListOutlined />
                </button>
                <button
                    type="button"
                    @click="execCommand('insertOrderedList')"
                    :class="{ active: isActive('insertOrderedList') }"
                    title="Numbered List"
                >
                    <OrderedListOutlined />
                </button>
            </div>

            <div class="toolbar-divider"></div>

            <!-- Alignment -->
            <div class="toolbar-group">
                <button
                    type="button"
                    @click="execCommand('justifyLeft')"
                    :class="{ active: isActive('justifyLeft') }"
                    title="Align Left"
                >
                    <AlignLeftOutlined />
                </button>
                <button
                    type="button"
                    @click="execCommand('justifyCenter')"
                    :class="{ active: isActive('justifyCenter') }"
                    title="Align Center"
                >
                    <AlignCenterOutlined />
                </button>
                <button
                    type="button"
                    @click="execCommand('justifyRight')"
                    :class="{ active: isActive('justifyRight') }"
                    title="Align Right"
                >
                    <AlignRightOutlined />
                </button>
            </div>

            <div class="toolbar-divider"></div>

            <!-- Links and special -->
            <div class="toolbar-group">
                <button
                    type="button"
                    @click="insertLink"
                    title="Insert Link"
                >
                    <LinkOutlined />
                </button>
                <button
                    type="button"
                    @click="execCommand('removeFormat')"
                    title="Remove Formatting"
                >
                    <ClearOutlined />
                </button>
            </div>

            <div class="toolbar-divider"></div>

            <!-- Undo/Redo -->
            <div class="toolbar-group">
                <button
                    type="button"
                    @click="execCommand('undo')"
                    title="Undo (Ctrl+Z)"
                >
                    <UndoOutlined />
                </button>
                <button
                    type="button"
                    @click="execCommand('redo')"
                    title="Redo (Ctrl+Y)"
                >
                    <RedoOutlined />
                </button>
            </div>

            <!-- Source toggle -->
            <div class="toolbar-group toolbar-right">
                <button
                    type="button"
                    @click="toggleSourceView"
                    :class="{ active: showSource }"
                    title="View HTML Source"
                >
                    <CodeOutlined />
                </button>
            </div>
        </div>

        <!-- Visual Editor -->
        <div
            v-show="!showSource"
            ref="editorRef"
            class="editor-content"
            contenteditable="true"
            @input="handleInput"
            @keydown="handleKeydown"
            @keyup="handleSelectionChange"
            @mouseup="handleSelectionChange"
            @paste="handlePaste"
            @focus="handleFocus"
            @blur="handleBlur"
            :placeholder="placeholder"
        ></div>

        <!-- Source Code View -->
        <textarea
            v-show="showSource"
            ref="sourceRef"
            class="editor-source"
            v-model="sourceContent"
            @input="handleSourceInput"
            :placeholder="placeholder"
        ></textarea>
    </div>
</template>

<script setup>
import { ref, watch, onMounted, computed } from "vue";
import {
    BoldOutlined,
    ItalicOutlined,
    UnderlineOutlined,
    StrikethroughOutlined,
    FontSizeOutlined,
    UnorderedListOutlined,
    OrderedListOutlined,
    AlignLeftOutlined,
    AlignCenterOutlined,
    AlignRightOutlined,
    LinkOutlined,
    ClearOutlined,
    UndoOutlined,
    RedoOutlined,
    CodeOutlined,
    DownOutlined,
} from "@ant-design/icons-vue";

const props = defineProps({
    modelValue: {
        type: String,
        default: "",
    },
    placeholder: {
        type: String,
        default: "Start typing...",
    },
    minHeight: {
        type: String,
        default: "300px",
    },
});

const emit = defineEmits(["update:modelValue"]);

// Get theme mode from common composable
const common = window.__composables?.common;
const themeMode = common ? common().themeMode : ref('light');

// Computed property to check if dark mode is active
const isDarkMode = computed(() => {
    return themeMode.value === 'dark';
});

const editorRef = ref(null);
const sourceRef = ref(null);
const showSource = ref(false);
const sourceContent = ref("");
const isFocused = ref(false);
const currentBlockFormat = ref("p");
let savedSelection = null;

// Block format labels
const blockFormatLabels = {
    p: "Paragraph",
    h1: "Heading 1",
    h2: "Heading 2",
    h3: "Heading 3",
    h4: "Heading 4",
};

// Save current selection
const saveSelection = () => {
    const selection = window.getSelection();
    if (selection && selection.rangeCount > 0) {
        savedSelection = selection.getRangeAt(0).cloneRange();
    }
};

// Restore saved selection
const restoreSelection = () => {
    if (savedSelection && editorRef.value) {
        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(savedSelection);
    }
};

// Initialize editor with content
onMounted(() => {
    if (props.modelValue && editorRef.value) {
        editorRef.value.innerHTML = props.modelValue;
    }
});

// Watch for external changes to modelValue
watch(
    () => props.modelValue,
    (newVal) => {
        if (editorRef.value && editorRef.value.innerHTML !== newVal) {
            editorRef.value.innerHTML = newVal || "";
        }
        if (showSource.value) {
            sourceContent.value = newVal || "";
        }
    }
);

// Execute document command
const execCommand = (command, value = null) => {
    restoreSelection();
    editorRef.value?.focus();
    document.execCommand(command, false, value);
    emitUpdate();
};

// Check if command is active
const isActive = (command) => {
    try {
        return document.queryCommandState(command);
    } catch {
        return false;
    }
};

// Detect current block format at cursor position
const detectBlockFormat = () => {
    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0) {
        currentBlockFormat.value = "p";
        return;
    }

    let node = selection.anchorNode;
    if (!node) {
        currentBlockFormat.value = "p";
        return;
    }

    // If it's a text node, get parent element
    if (node.nodeType === Node.TEXT_NODE) {
        node = node.parentElement;
    }

    // Walk up the DOM tree to find block-level element
    while (node && node !== editorRef.value) {
        const tagName = node.tagName?.toLowerCase();
        if (tagName && ["h1", "h2", "h3", "h4", "p", "div"].includes(tagName)) {
            currentBlockFormat.value = tagName === "div" ? "p" : tagName;
            return;
        }
        node = node.parentElement;
    }

    currentBlockFormat.value = "p";
};

// Handle heading selection
const handleHeadingClick = ({ key }) => {
    restoreSelection();
    editorRef.value?.focus();
    if (key === "p") {
        document.execCommand("formatBlock", false, "p");
    } else {
        document.execCommand("formatBlock", false, key);
    }
    emitUpdate();
};

// Insert link
const insertLink = () => {
    // Save the selected text before the prompt (which causes blur)
    const selection = window.getSelection();
    const selectedText = selection?.toString() || "";
    const url = prompt("Enter URL:", "https://");

    if (url) {
        restoreSelection();
        editorRef.value?.focus();
        if (selectedText) {
            document.execCommand("createLink", false, url);
        } else {
            const linkText = prompt("Enter link text:", url);
            const link = `<a href="${url}">${linkText || url}</a>`;
            document.execCommand("insertHTML", false, link);
        }
        emitUpdate();
    }
};

// Format HTML with proper indentation (4 spaces)
const formatHtml = (html) => {
    if (!html) return "";

    const indent = "    "; // 4 spaces

    // Clean up the HTML first - remove extra whitespace between tags
    html = html.replace(/>\s+</g, "><").trim();

    // Self-closing and void tags
    const voidTags = ["br", "hr", "img", "input", "meta", "link", "area", "base", "col", "embed", "param", "source", "track", "wbr"];

    // Block-level tags that should have their own lines
    const blockTags = ["div", "p", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "li", "table", "thead", "tbody", "tr", "th", "td", "blockquote", "pre", "section", "article", "header", "footer", "nav", "aside", "main", "figure", "figcaption", "form", "fieldset"];

    // Parse HTML into tokens
    const tokens = [];
    let i = 0;
    while (i < html.length) {
        if (html[i] === "<") {
            const tagEnd = html.indexOf(">", i);
            if (tagEnd === -1) break;
            tokens.push({ type: "tag", value: html.substring(i, tagEnd + 1) });
            i = tagEnd + 1;
        } else {
            let textEnd = html.indexOf("<", i);
            if (textEnd === -1) textEnd = html.length;
            const text = html.substring(i, textEnd);
            if (text) {
                tokens.push({ type: "text", value: text });
            }
            i = textEnd;
        }
    }

    // Format tokens
    let result = "";
    let indentLevel = 0;
    let needsNewline = false;

    for (let j = 0; j < tokens.length; j++) {
        const token = tokens[j];

        if (token.type === "text") {
            // Text content - just append it
            result += token.value;
            needsNewline = false;
            continue;
        }

        const fullTag = token.value;
        const tagMatch = fullTag.match(/^<\/?([a-zA-Z0-9]+)/);
        const tagName = tagMatch ? tagMatch[1].toLowerCase() : "";
        const isClosingTag = fullTag.startsWith("</");
        const isSelfClosing = fullTag.endsWith("/>") || voidTags.includes(tagName);
        const isBlock = blockTags.includes(tagName);

        if (isClosingTag) {
            if (isBlock) {
                // Block closing tag
                indentLevel = Math.max(0, indentLevel - 1);
                if (needsNewline) {
                    result += "\n" + indent.repeat(indentLevel);
                }
                result += fullTag;
                needsNewline = true;
            } else {
                // Inline closing tag - just append
                result += fullTag;
            }
        } else if (isSelfClosing) {
            // Self-closing/void tags
            if (isBlock || tagName === "br") {
                if (result.length > 0 && needsNewline) {
                    result += "\n" + indent.repeat(indentLevel);
                } else if (result.length > 0 && !result.endsWith("\n") && tagName === "br") {
                    // br tags can stay inline
                    result += fullTag;
                    continue;
                }
            }
            result += fullTag;
            if (isBlock) {
                needsNewline = true;
            }
        } else {
            // Opening tag
            if (isBlock) {
                if (result.length > 0) {
                    result += "\n" + indent.repeat(indentLevel);
                }
                result += fullTag;
                indentLevel++;
                needsNewline = true;
            } else {
                // Inline opening tag - just append
                result += fullTag;
            }
        }
    }

    return result;
};

// Toggle source view
const toggleSourceView = () => {
    if (!showSource.value) {
        // Switching to source view - format the HTML
        const rawHtml = editorRef.value?.innerHTML || "";
        sourceContent.value = formatHtml(rawHtml);
    } else {
        // Switching back to visual view
        if (editorRef.value) {
            editorRef.value.innerHTML = sourceContent.value;
        }
        emitUpdate();
    }
    showSource.value = !showSource.value;
};

// Handle input in visual editor
const handleInput = () => {
    emitUpdate();
};

// Handle source input
const handleSourceInput = () => {
    emit("update:modelValue", sourceContent.value);
};

// Handle keyboard shortcuts
const handleKeydown = (e) => {
    if (e.ctrlKey || e.metaKey) {
        switch (e.key.toLowerCase()) {
            case "b":
                e.preventDefault();
                execCommand("bold");
                break;
            case "i":
                e.preventDefault();
                execCommand("italic");
                break;
            case "u":
                e.preventDefault();
                execCommand("underline");
                break;
        }
    }

    // Handle Tab for indentation
    if (e.key === "Tab") {
        e.preventDefault();
        if (e.shiftKey) {
            execCommand("outdent");
        } else {
            execCommand("indent");
        }
    }
};

// Handle paste - clean up pasted content
const handlePaste = (e) => {
    e.preventDefault();
    const text = e.clipboardData?.getData("text/html") || e.clipboardData?.getData("text/plain") || "";

    // If it's HTML, insert it directly; otherwise insert as plain text
    if (e.clipboardData?.getData("text/html")) {
        document.execCommand("insertHTML", false, text);
    } else {
        document.execCommand("insertText", false, text);
    }
    emitUpdate();
};

// Handle focus
const handleFocus = () => {
    isFocused.value = true;
    detectBlockFormat();
};

// Handle selection change (keyup and mouseup)
const handleSelectionChange = () => {
    detectBlockFormat();
};

// Handle blur - save selection when editor loses focus
const handleBlur = () => {
    isFocused.value = false;
    saveSelection();
};

// Emit update
const emitUpdate = () => {
    const content = editorRef.value?.innerHTML || "";
    emit("update:modelValue", content);
};

// Expose method to set HTML content programmatically
const setHTML = (html) => {
    if (editorRef.value) {
        editorRef.value.innerHTML = html || "";
        sourceContent.value = html || "";
        emitUpdate();
    }
};

// Expose method to get HTML content
const getHTML = () => {
    return editorRef.value?.innerHTML || "";
};

// Reset editor to default state (content mode)
const reset = () => {
    showSource.value = false;
    currentBlockFormat.value = "p";
    savedSelection = null;
};

defineExpose({
    setHTML,
    getHTML,
    reset,
});
</script>

<style lang="less" scoped>
// Light mode variables (default)
.rich-text-editor {
    --editor-bg: #ffffff;
    --editor-border: #d9d9d9;
    --editor-focus-border: #4096ff;
    --editor-focus-shadow: rgba(5, 145, 255, 0.1);
    --toolbar-bg: #fafafa;
    --toolbar-border: #d9d9d9;
    --toolbar-btn-color: #595959;
    --toolbar-btn-hover-bg: #e6e6e6;
    --toolbar-btn-hover-color: #262626;
    --toolbar-btn-active-bg: #e6f4ff;
    --toolbar-btn-active-color: #1677ff;
    --toolbar-divider: #d9d9d9;
    --content-bg: #ffffff;
    --content-color: #262626;
    --content-placeholder: #bfbfbf;
    --content-heading-color: #1f2937;
    --content-heading-accent: #1677ff;
    --content-link-color: #1677ff;
    --content-blockquote-bg: #f5f5f5;
    --content-blockquote-border: #1677ff;
    --content-blockquote-color: #595959;
    --content-table-header-bg: #fafafa;
    --content-table-border: #d9d9d9;
    --content-code-bg: #f5f5f5;
    --content-code-color: #d63384;
    --content-pre-bg: #1f2937;
    --content-pre-color: #e5e7eb;
    --source-bg: #fafafa;
    --source-color: #262626;

    border: 1px solid var(--editor-border);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;

    &:focus-within {
        border-color: var(--editor-focus-border);
        box-shadow: 0 0 0 2px var(--editor-focus-shadow);
    }

    // Dark mode variables
    &.dark-mode {
        --editor-bg: #141414;
        --editor-border: #424242;
        --editor-focus-border: #177ddc;
        --editor-focus-shadow: rgba(23, 125, 220, 0.2);
        --toolbar-bg: #1f1f1f;
        --toolbar-border: #424242;
        --toolbar-btn-color: rgba(255, 255, 255, 0.85);
        --toolbar-btn-hover-bg: #303030;
        --toolbar-btn-hover-color: #ffffff;
        --toolbar-btn-active-bg: #111d2c;
        --toolbar-btn-active-color: #177ddc;
        --toolbar-divider: #424242;
        --content-bg: #141414;
        --content-color: rgba(255, 255, 255, 0.85);
        --content-placeholder: #595959;
        --content-heading-color: rgba(255, 255, 255, 0.85);
        --content-heading-accent: #177ddc;
        --content-link-color: #177ddc;
        --content-blockquote-bg: #1f1f1f;
        --content-blockquote-border: #177ddc;
        --content-blockquote-color: rgba(255, 255, 255, 0.65);
        --content-table-header-bg: #1f1f1f;
        --content-table-border: #424242;
        --content-code-bg: #1f1f1f;
        --content-code-color: #ff85c0;
        --content-pre-bg: #000000;
        --content-pre-color: #e5e7eb;
        --source-bg: #1f1f1f;
        --source-color: rgba(255, 255, 255, 0.85);
    }
}

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--toolbar-bg);
    border-bottom: 1px solid var(--toolbar-border);
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;

    &.toolbar-right {
        margin-left: auto;
    }

    button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: none;
        background: transparent;
        border-radius: 4px;
        cursor: pointer;
        color: var(--toolbar-btn-color);
        transition: all 0.2s;

        &:hover {
            background: var(--toolbar-btn-hover-bg);
            color: var(--toolbar-btn-hover-color);
        }

        &.active {
            background: var(--toolbar-btn-active-bg);
            color: var(--toolbar-btn-active-color);
        }

        &.dropdown-btn {
            width: auto;
            padding: 0 8px;
            gap: 4px;
        }
    }
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--toolbar-divider);
    margin: 0 4px;
}

.dropdown-icon {
    font-size: 10px;
}

.format-dropdown {
    min-width: 100px;
    justify-content: flex-start;

    .format-label {
        font-size: 12px;
        flex: 1;
        text-align: left;
    }
}

.editor-content {
    min-height: v-bind(minHeight);
    height: v-bind(minHeight);
    overflow-y: auto;
    padding: 16px;
    outline: none;
    font-size: 14px;
    line-height: 1.75;
    background: var(--content-bg);
    color: var(--content-color);
    resize: vertical;

    &:empty:before {
        content: attr(placeholder);
        color: var(--content-placeholder);
        pointer-events: none;
    }

    // Style headings - matching page.blade.php .page-content styles
    :deep(h1) {
        font-size: 1.875rem;
        font-weight: 700;
        color: #1d4ed8;
        margin-top: 2rem;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #bfdbfe;
        line-height: 1.3;
    }

    :deep(h2) {
        font-size: 1.5rem;
        font-weight: 600;
        color: #2563eb;
        margin-top: 2rem;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        line-height: 1.4;

        &::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 1.5rem;
            background: linear-gradient(to bottom, #3b82f6, #2563eb);
            border-radius: 2px;
        }
    }

    :deep(h3) {
        font-size: 1.25rem;
        font-weight: 600;
        color: #2563eb;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
        line-height: 1.4;
    }

    :deep(h4) {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--content-heading-color);
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        line-height: 1.4;
    }

    :deep(p) {
        margin-bottom: 1rem;
        line-height: 1.75;
    }

    // Style lists - matching page.blade.php
    :deep(ul), :deep(ol) {
        margin: 1rem 0;
        padding-left: 1.5rem;
    }

    :deep(ul) {
        list-style-type: disc;
    }

    :deep(ol) {
        list-style-type: decimal;
    }

    :deep(li) {
        margin-bottom: 0.5rem;
        line-height: 1.75;
        display: list-item;
    }

    :deep(ul li) {
        list-style-type: disc;

        &::marker {
            color: #3b82f6;
        }
    }

    :deep(ol li) {
        list-style-type: decimal;
    }

    :deep(ul ul), :deep(ol ul) {
        list-style-type: circle;
    }

    :deep(ul ul ul), :deep(ol ul ul) {
        list-style-type: square;
    }

    // Style links - matching page.blade.php
    :deep(a) {
        color: #2563eb;
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: border-color 0.2s;

        &:hover {
            border-bottom-color: #2563eb;
        }
    }

    // Style strong
    :deep(strong) {
        font-weight: 600;
        color: #1f2937;
    }

    // Style blockquotes - matching page.blade.php
    :deep(blockquote) {
        margin: 1.5rem 0;
        padding: 1rem 1.5rem;
        background: #f9fafb;
        border-left: 4px solid #3b82f6;
        border-radius: 0 0.5rem 0.5rem 0;
        font-style: italic;
        color: #4b5563;
    }

    // Style tables - matching page.blade.php
    :deep(table) {
        width: 100%;
        margin: 1.5rem 0;
        border-collapse: collapse;
        font-size: 0.875rem;
    }

    :deep(th) {
        background: #f9fafb;
        padding: 0.75rem 1rem;
        text-align: left;
        font-weight: 600;
        color: #374151;
        border: 1px solid #e5e7eb;
    }

    :deep(td) {
        padding: 0.75rem 1rem;
        border: 1px solid #e5e7eb;
    }

    // Style code - matching page.blade.php
    :deep(code) {
        background: #f3f4f6;
        padding: 0.125rem 0.375rem;
        border-radius: 0.25rem;
        font-size: 0.875em;
        color: #2563eb;
    }

    :deep(pre) {
        background: #1f2937;
        color: #e5e7eb;
        padding: 1rem;
        border-radius: 0.5rem;
        overflow-x: auto;
        margin: 1.5rem 0;

        code {
            background: none;
            padding: 0;
            color: inherit;
        }
    }

    // Style horizontal rule - matching page.blade.php
    :deep(hr) {
        margin: 2rem 0;
        border: none;
        border-top: 1px solid #e5e7eb;
    }

    // Style images - matching page.blade.php
    :deep(img) {
        max-width: 100%;
        height: auto;
        border-radius: 0.5rem;
        margin: 1.5rem 0;
    }

    // Section styling for legal pages
    :deep(section) {
        margin: 1.5rem 0;
    }

    :deep(.last-updated) {
        color: var(--content-placeholder);
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
    }
}

.editor-source {
    min-height: v-bind(minHeight);
    height: v-bind(minHeight);
    width: 100%;
    padding: 16px;
    border: none;
    outline: none;
    resize: vertical;
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.5;
    background: var(--source-bg);
    color: var(--source-color);
    box-sizing: border-box;

    &::placeholder {
        color: var(--content-placeholder);
    }
}
</style>

<style lang="less">
// Global styles for dark mode support via parent classes
// These ensure compatibility with Ant Design's dark theme classes

.dark_theme .rich-text-editor,
html[data-dark-mode="true"] .rich-text-editor,
body.ant-dark .rich-text-editor,
[data-theme="dark"] .rich-text-editor {
    --editor-bg: #141414;
    --editor-border: #424242;
    --editor-focus-border: #177ddc;
    --editor-focus-shadow: rgba(23, 125, 220, 0.2);
    --toolbar-bg: #1f1f1f;
    --toolbar-border: #424242;
    --toolbar-btn-color: rgba(255, 255, 255, 0.85);
    --toolbar-btn-hover-bg: #303030;
    --toolbar-btn-hover-color: #ffffff;
    --toolbar-btn-active-bg: #111d2c;
    --toolbar-btn-active-color: #177ddc;
    --toolbar-divider: #424242;
    --content-bg: #141414;
    --content-color: rgba(255, 255, 255, 0.85);
    --content-placeholder: #595959;
    --content-heading-color: rgba(255, 255, 255, 0.85);
    --content-heading-accent: #177ddc;
    --content-link-color: #177ddc;
    --content-blockquote-bg: #1f1f1f;
    --content-blockquote-border: #177ddc;
    --content-blockquote-color: rgba(255, 255, 255, 0.65);
    --content-table-header-bg: #1f1f1f;
    --content-table-border: #424242;
    --content-code-bg: #1f1f1f;
    --content-code-color: #ff85c0;
    --content-pre-bg: #000000;
    --content-pre-color: #e5e7eb;
    --source-bg: #1f1f1f;
    --source-color: rgba(255, 255, 255, 0.85);
}
</style>
