document.addEventListener('DOMContentLoaded', () => {
    const noteContent = document.getElementById('note-content');
    const saveBtn = document.getElementById('save-note');
    const notesList = document.getElementById('notes-list');
    const headingBtn = document.getElementById('heading-btn');
    const underlineBtn = document.getElementById('underline-btn');
    const bulletBtn = document.getElementById('bullet-btn');

    document.getElementById('bold-btn').addEventListener('click', () => toggleFormat('bold', 'bold-btn'));
    document.getElementById('italic-btn').addEventListener('click', () => toggleFormat('italic', 'italic-btn'));
    underlineBtn.addEventListener('click', () => toggleFormat('underline', 'underline-btn'));
    headingBtn.addEventListener('click', () => toggleHeading('heading-btn'));
    bulletBtn.addEventListener('click', toggleBullet);

    function toggleFormat(command, buttonId) {
        const button = document.getElementById(buttonId);
        const isActive = button.classList.contains('active');
        
        document.execCommand(command, false, !isActive);
        button.classList.toggle('active', !isActive);
    }

    noteContent.addEventListener('input', () => {
        const isBoldActive = document.getElementById('bold-btn').classList.contains('active');
        const isItalicActive = document.getElementById('italic-btn').classList.contains('active');
        const isUnderlineActive = document.getElementById('underline-btn').classList.contains('active');

        const isBoldState = document.queryCommandState('bold');
        const isItalicState = document.queryCommandState('italic');
        const isUnderlineState = document.queryCommandState('underline');

        if (isBoldActive && !isBoldState) {
            document.execCommand('bold', false, true);
        }
        if (!isBoldActive && isBoldState && document.queryCommandValue('formatBlock') !== 'h2') {
            document.execCommand('bold', false, false);
        }

        if (isItalicActive && !isItalicState) {
            document.execCommand('italic', false, true);
        }
        if (!isItalicActive && isItalicState) {
            document.execCommand('italic', false, false);
        }

        if (isUnderlineActive && !isUnderlineState) {
            document.execCommand('underline', false, true);
        }
        if (!isUnderlineActive && isUnderlineState) {
            document.execCommand('underline', false, false);
        }

        // Manage heading button state
        const selection = window.getSelection();
        if (selection.rangeCount > 0) {
            const range = selection.getRangeAt(0);
            let currentNode = range.startContainer;

            if (currentNode.nodeType === Node.TEXT_NODE) {
                currentNode = currentNode.parentNode;
            }

            let isCurrentHeading = false;
            while (currentNode && currentNode !== noteContent) {
                if (currentNode.nodeName === 'H2') {
                    isCurrentHeading = true;
                    break;
                }
                currentNode = currentNode.parentNode;
            }

            headingBtn.classList.toggle('active', isCurrentHeading);
        }

        // Manage bullet button state
        const hasBullets = document.queryCommandState('insertUnorderedList');
        bulletBtn.classList.toggle('active', hasBullets);
    });

    function toggleHeading(buttonId) {
        const isHeading = document.queryCommandValue('formatBlock') === 'h2';
        if (!isHeading) {
            document.execCommand('formatBlock', false, 'h2');
            const selection = window.getSelection();
            const range = selection.getRangeAt(0);
            const newHeading = document.createElement('h2');
            newHeading.innerHTML = range.toString();
            newHeading.style.fontWeight = 'bold'; // Ensure the heading is bold
            range.deleteContents();
            range.insertNode(newHeading);
            selection.removeAllRanges();
        } else {
            document.execCommand('formatBlock', false, 'p');
            if (!document.getElementById('bold-btn').classList.contains('active')) {
                document.execCommand('bold', false, false);
            }
        }
        document.getElementById(buttonId).classList.toggle('active', !isHeading);
    }

    function toggleBullet() {
        const isList = document.queryCommandState('insertUnorderedList');
        const isHeading = document.queryCommandValue('formatBlock') === 'h2';

        if (isHeading) {
            // If it's a heading, turn it into a subheading with indentation
            document.execCommand('formatBlock', false, 'h3');
            document.execCommand('indent'); // Add indentation
            headingBtn.classList.remove('active');
        } else if (!isList) {
            document.execCommand('insertUnorderedList');
        } else {
            document.execCommand('indent');
        }
    }

    // Detect if bullet points are erased and immediately toggle off the bullet point button
    noteContent.addEventListener('input', () => {
        const currentContent = noteContent.innerHTML;
        const hasBulletList = currentContent.includes('<ul>') || currentContent.includes('<li>');
        
        if (!hasBulletList) {
            bulletBtn.classList.remove('active');  // Turn off the bullet button
            bulletState = 0; // Reset bullet state
        }
    });

    // Modify the backspace behavior to turn sub-bullet points into regular bullet points when erased
    noteContent.addEventListener('keydown', (event) => {
        if (event.key === 'Backspace') {
            const selection = window.getSelection();
            if (selection.rangeCount === 0) return;
            const range = selection.getRangeAt(0);
            let currentNode = range.startContainer;

            if (currentNode.nodeType === Node.TEXT_NODE) {
                currentNode = currentNode.parentNode;
            }

            if (currentNode.nodeName === 'LI' && currentNode.parentNode.nodeName === 'UL') {
                const parentList = currentNode.parentNode;
                // Check if the caret is at the start of the sub-bullet point
                if (range.startOffset === 0 && parentList.parentNode.nodeName === 'UL') {
                    document.execCommand('outdent'); // Turn sub-bullet into a regular bullet
                    event.preventDefault(); // Prevent the default backspace behavior
                }
            }
        }

        if (event.key === 'Enter') {
            const currentFormat = document.queryCommandValue('formatBlock');
            if (currentFormat === 'h2') {
                const selection = window.getSelection();
                const range = selection.getRangeAt(0);
                const newParagraph = document.createElement('p');
                range.deleteContents();
                range.insertNode(newParagraph);
                range.setStartAfter(newParagraph);
                range.collapse(true);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        }
    });

    saveBtn.addEventListener('click', () => {
        const content = noteContent.innerHTML;
        const savedNotes = JSON.parse(localStorage.getItem('savedNotes')) || [];
        savedNotes.push(content);
        localStorage.setItem('savedNotes', JSON.stringify(savedNotes));

        alert('Note saved successfully!');
        loadNotes();
    });

    function loadNotes() {
        const savedNotes = JSON.parse(localStorage.getItem('savedNotes')) || [];
        notesList.innerHTML = '';
        savedNotes.forEach((note, index) => {
            const noteItem = document.createElement('div');
            noteItem.classList.add('note-item');
            noteItem.innerHTML = `
                <div class="note-content">${note}</div>
                <button class="delete-note" data-index="${index}">Delete</button>
            `;
            notesList.appendChild(noteItem);
        });

        document.querySelectorAll('.delete-note').forEach(button => {
            button.addEventListener('click', deleteNote);
        });
    }

    function deleteNote(event) {
        const index = event.target.getAttribute('data-index');
        const savedNotes = JSON.parse(localStorage.getItem('savedNotes')) || [];
        savedNotes.splice(index, 1);
        localStorage.setItem('savedNotes', JSON.stringify(savedNotes));

        loadNotes();
    }

    noteContent.addEventListener('input', () => {
        const content = noteContent.textContent.trim();
        if (content.length === 0) {
            bulletState = 0;
        }
    });

    loadNotes(); // Load saved notes on page load
});
In this code I want it so in the subheading when I press enter on a line with no text then a new paragraph is created. Other than that keep all the settings as they are. Make sure all the functionalities remain the same.