JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">


<div class="container">

<div id="euroeditor-textarea" class="" spellcheck="false" contenteditable="true" onclick="WordCount()">
            <h1>Notes From Underground By Fyodor Dostoyevsky</h1>

            <p>A man living alone in St. Petersburg writes memoirs describing his alienation from modern society.</p>
            <hr>
            <p>44,336 words (2 hours 42 minutes) with a reading ease of 69.92 (fairly easy)</p>
            <p>Translated by Constance Garnett.</p>
            <p>Fiction</p>
            <hr>
            <p>Notes from Underground is a fictional collection of memoirs written by a civil servant living alone in
                St. Petersburg. The man is never named and is generally referred to as the Underground Man. The
                “underground” in the book refers to the narrator’s isolation, which he described in chapter 11 as
                “listening through a crack under the floor.”</p>
            <p>It is considered to be one of the first existentialist novels. With this book, Dostoevsky challenged the
                ideologies of his time, like nihilism and utopianism. The Underground Man shows how idealized
                rationality in utopias is inherently flawed, because it doesn’t account for the irrational side of
                humanity.</p>
            <p>This novel has had a big impact on many different works of literature and philosophy. It has influenced
                writers like Franz Kafka and Friedrich Nietzsche. A similar character is also found in Martin Scorsese’s
                Taxi Driver.</p>
            <p>Notes from Underground was published in 1864 as the first four issues of Epoch, a Russian magazine by
                Fyodor and Mikhail Dostoevsky. Presented here is...

JavaScript

// Selection management utilities
const SelectionUtils = {
    saveSelection() {
        const selection = window.getSelection();
        if (selection.rangeCount === 0) return null;
        
        const ranges = [];
        for (let i = 0; i < selection.rangeCount; i++) {
            ranges.push(selection.getRangeAt(i).cloneRange());
        }
        return ranges;
    },
    
    restoreSelection(savedRanges) {
        if (!savedRanges || savedRanges.length === 0) return;
        
        const selection = window.getSelection();
        selection.removeAllRanges();
        savedRanges.forEach(range => {
            selection.addRange(range);
        });
    },
    
    getSelectedText() {
        return window.getSelection().toString();
    },
    
    isSelectionCollapsed() {
        const selection = window.getSelection();
        return selection.isCollapsed;
    },
    
    getActiveRange() {
        const selection = window.getSelection();
        return selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
    }
};

// Command execution utilities
const FormattingCommands = {
    // Bold
    bold() {
        this.wrapSelection('strong');
    },
    
    // Italic
    italic() {
        this.wrapSelection('em');
    },
    
    // Underline
    underline() {
        this.wrapSelection('span', { style: 'text-decoration: underline;' });
    },
    
    // Strikethrough
    strikethrough() {
        this.wrapSelection('del');
    },
    
    // Heading
    heading(level) {
        this.wrapSelection(`h${level}`);
    },
    
    // Font size
    fontSize(size) {
        this.wrapSelection('span', { style: `font-size: ${size};` });
    },
    
    // Font color
    fontColor(color) {
        this.wrapSelection('span', { style: `color: ${color};` });
    },
    
    // Background color
    backgroundColor(color) {
        this.wrapSelection('span', { style: `background-color:...