JSFiddle - React, Tailwind, and code Playground

by Pedro Pinto

HTML

<div class="editable" contenteditable>Fix quick add box <b>P1</b> <b>Today</b> <b>#prjct</b></div>

<p class="tips">Project not found. <strong>Create <span class="projectname">#prjct</span></strong></p>

CSS

div.editable {
    background-color: #efefef;
    border: 1px solid #ccc;
    font-family: monospace;
    font-size: 1.3rem;
    color: #666;
    padding: 1rem;
}
div.editable b {
    font-size: 1rem;
    font-weight: normal;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    background-color: #666;
    color: #fff;
}

p.tips {
    font-family: sans-serif;
    color: #666;
}

Babel + JSX

class ContentEditable {
    constructor() {
    	this.field     = document.getElementsByClassName("editable")[0];
        this.fieldHTML = "";
        this.fieldText = "";
        
    	this.project = document.getElementsByClassName("projectname")[0];

		this.channelRegex = new RegExp(/#([\w-]+)/, "g");
    }
    
    scan(field) {
        this.fieldHTML = field.innerHTML;
        this.fieldText = field.textContent;
    }
    
    fieldMatchProject(text) {
    	if (text) {
    		return text.match(this.channelRegex);
        }
        return "";
    }
    
    checkForProject() {
        const projectMatched = this.fieldMatchProject(this.fieldText);
        if (projectMatched) {
            this.project.textContent = projectMatched[0];
        }
    }
}

// ### ### ### ### ### ### ### ### ###

const CE = new ContentEditable();

CE.field.addEventListener("input", function(){
    CE.scan(CE.field);
	CE.checkForProject(CE.fieldText);
});