usar data- para botones/inputs + css

app/assets/javascripts/01-types.js

@@ -126,17 +126,17 @@ const typesWithProperties = {
 	mark: {
 		checkFn: marks.mark.checkFn,
 		updateInput (el, editorEl) {
-			const markColorInputEl = editorEl.querySelector("#mark-color")
+			const markColorInputEl = editorEl.querySelector("*[data-prop=\"mark-color\"]")
 			markColorInputEl.disabled = false
 			markColorInputEl.value = el.style.backgroundColor ? rgb2hex(el.style.backgroundColor) : "#f206f9"
 		},
 		disableInput (editorEl) {
-			const markColorInputEl = editorEl.querySelector("#mark-color")
+			const markColorInputEl = editorEl.querySelector("*[data-prop=\"mark-color\"]")
 			markColorInputEl.disabled = true
 			markColorInputEl.value = "#000000"
 		},
 		setupInput (editorEl, contentEl) {
-			const markColorInputEl = editorEl.querySelector("#mark-color")
+			const markColorInputEl = editorEl.querySelector("*[data-prop=\"mark-color\"]")
 			markColorInputEl.addEventListener("change", event => {
 				const markEl = findRecursiveChild(marks.mark.checkFn, contentEl)
 				if (markEl) markEl.style.backgroundColor = markColorInputEl.value
@@ -146,32 +146,32 @@ const typesWithProperties = {
 	img: {
 		checkFn: blocks.img.checkFn,
 		updateInput (el, editorEl) {
-			const imgSrcEl = editorEl.querySelector("#img-src")
+			const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]")
 			imgSrcEl.disabled = false
 			imgSrcEl.value = el.src
 
-			const imgAltEl = editorEl.querySelector("#img-alt")
+			const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]")
 			imgAltEl.disabled = false
 			imgAltEl.value = el.alt
 		},
 		disableInput (editorEl) {
-			const imgSrcEl = editorEl.querySelector("#img-src")
+			const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]")
 			imgSrcEl.disabled = true
 			imgSrcEl.value = ""
 
-			const imgAltEl = editorEl.querySelector("#img-alt")
+			const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]")
 			imgAltEl.disabled = true
 			imgAltEl.value = ""
 		},
 		setupInput (editorEl, contentEl) {
-			const imgSrcEl = editorEl.querySelector("#img-src")
+			const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]")
 			imgSrcEl.addEventListener("input", event => {
 				// const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl)
 				const imgEl = getSelected(contentEl)
 				if (imgEl) imgEl.src = imgSrcEl.value
 			}, false)
 
-			const imgAltEl = editorEl.querySelector("#img-alt")
+			const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]")
 			imgAltEl.addEventListener("input", event => {
 				// const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl)
 				const imgEl = getSelected(contentEl)

app/assets/javascripts/02-editor.js

@@ -376,7 +376,7 @@ function setupEditor (editorEl) {
 		characterData: true,
 	})
 
-	const editorBtn = id => editorEl.querySelector(`#${id}-button`)
+	const editorBtn = id => editorEl.querySelector(`*[data-button="${id}"]`)
 
 	const tagNameSetFn = tagName => el => {
 		const newEl = document.createElement(tagName)

app/assets/stylesheets/editor.scss

@@ -1,4 +1,30 @@
 .editor {
+	box-sizing: border-box;
+	*, *::before, *::after { box-sizing: inherit; }
+
+	h1, h2, h3, h4, h5, h6, p {
+		min-height: 1.4em;
+		line-height: 1.4;
+		margin: 0;
+	}
+
+	mark {
+		background: #f206f9;
+		padding: 0;
+	}
+
+	.selected {
+		outline: #f206f9 solid medium;
+		outline-offset: 1pt;
+	}
+
+	img {
+		width: 100%;
+		max-width: 600px;
+		display: block;
+		margin: 0 auto;
+	}
+
 	.editor-content {
 		div[data-align="left"] { text-align: left; }
 		div[data-align="center"] { text-align: center; }

app/views/application/markdown.haml

@@ -1,33 +1,33 @@
 = form_with do
   .editor
-    %button#bold-button Bold
+    %button{:data => {:button => "bold"}} Bold
-    %button#italic-button Italic
+    %button{:data => {:button => "italic"}} Italic
-    %button#deleted-button Deleted
+    %button{:data => {:button => "deleted"}} Deleted
-    %button#underline-button Underline
+    %button{:data => {:button => "underline"}} Underline
-    %button#mark-button Mark
+    %button{:data => {:button => "mark"}} Mark
-    %button#h1-button H1
+    %button{:data => {:button => "h1"}} H1
-    %button#h2-button H2
+    %button{:data => {:button => "h2"}} H2
-    %button#h3-button H3
+    %button{:data => {:button => "h3"}} H3
-    %button#h4-button H4
+    %button{:data => {:button => "h4"}} H4
-    %button#h5-button H5
+    %button{:data => {:button => "h5"}} H5
-    %button#h6-button H6
+    %button{:data => {:button => "h6"}} H6
-    %button#ul-button Lista desordenada
+    %button{:data => {:button => "ul"}} Lista desordenada
-    %button#ol-button Lista ordenada
+    %button{:data => {:button => "ol"}} Lista ordenada
-    %button#left-button Left
+    %button{:data => {:button => "left"}} Left
-    %button#center-button Center
+    %button{:data => {:button => "center"}} Center
-    %button#right-button Right
+    %button{:data => {:button => "right"}} Right
     %br/
     %label{:for => "mark-color"} Color de resaltado:
-    %input#mark-color{:type => "color"}/
+    %input{:type => "color", :data => {:prop => "mark-color"}}/
     %br/
     %label{:for => "img-src"} URL de imágen:
-    %input#img-src{:placeholder => "https://radio.sutty.nl/public/placeholder_992x992.png", :type => "url"}/
+    %input{:placeholder => "https://radio.sutty.nl/public/placeholder_992x992.png", :type => "url", :data => {:prop => "img-src"}}/
     %label{:for => "img-alt"} Descripción de imágen:
-    %input#img-alt{:placeholder => "Un álbum", :type => "text"}/
+    %input{:placeholder => "Un álbum", :type => "text", :data => {:prop => "img-alt"}}/
-    %button#img-button Insertar imágen
+    %button{:data => {:button => "img"}} Insertar imágen
     %br/
     %label{:for => "link-href"} URL de link:
-    %input#link-href{:type => "url"}/
+    %input{:type => "url", :data => {:prop => "link-href"}}/
     .editor-content{:contenteditable => "true"}
       %h1
         Hola