Merge branch 'editor-nuevo' of 0xacab.org:sutty/sutty into rails

app/assets/javascripts/01-types.js

@@ -27,6 +27,14 @@ const marks = {
 		selector: "u",
 		createFn: () => document.createElement("U"),
 	},
+	sub: {
+		selector: "sub",
+		createFn: () => document.createElement("SUB"),
+	},
+	sup: {
+		selector: "sup",
+		createFn: () => document.createElement("SUP"),
+	},
 	mark: {
 		selector: "mark",
 		createFn: () => document.createElement("MARK"),

app/assets/javascripts/02-editor.js

@@ -338,8 +338,17 @@ function cleanNode (node, contentEl) {
 				child.parentElement.removeChild(child)
 				return
 			} else if (child.tagName === "STYLE") {
+				return child.parentElement.removeChild(child)
+			} else if (child.tagName === "B") {
+				const el = document.createElement("STRONG")
+				moveChildren(child, el)
+				child.parentElement.insertBefore(el, child)
+				child.parentElement.removeChild(child)
+			} else if (child.tagName === "I") {
+				const el = document.createElement("EM")
+				moveChildren(child, el)
+				child.parentElement.insertBefore(el, child)
 				child.parentElement.removeChild(child)
-				return
 			}
 
 			for (const style of Object.values(child.style)) {
@@ -409,6 +418,9 @@ function setupEditor (editorEl) {
 			range.collapse()
 		}
 	})
+	contentEl.addEventListener("paste", event => {
+		contentEl.querySelector("editor-aviso-word").style.display = "block"
+	})
 	document.addEventListener("selectionchange", event => {
 		cleanContent(contentEl)
 	})

app/assets/stylesheets/editor.scss

@@ -35,6 +35,11 @@
 		background: white;
 	}
 
+	.editor-aviso-word {
+		color: red;
+		display: none;
+	}
+
 	.editor-primary-toolbar, .editor-auxiliary-toolbar {
 		display: block;
 		overflow-x: auto;

app/views/posts/attributes/_content.haml

@@ -17,6 +17,8 @@
         %button.btn{ data: { button: 'italic' } }= t('editor.italic')
         %button.btn{ data: { button: 'deleted' } }= t('editor.deleted')
         %button.btn{ data: { button: 'underline' } }= t('editor.underline')
+        %button.btn{ data: { button: 'sup' } }= t('editor.sup')
+        %button.btn{ data: { button: 'sub' } }= t('editor.sub')
         %button.btn{ data: { button: 'mark' } }= t('editor.mark')
         %button.btn{ data: { button: 'a' } }= t('editor.a')
         %button.btn{ data: { button: 'h1' } }= t('editor.h1')
@@ -69,9 +71,12 @@
             %input.custom-file-input{ type: 'file', data: { prop: 'pdf-file' }, accept: 'application/pdf' }/
             %label.custom-file-label{ for: 'pdf-file' }= t('editor.file.pdf')
 
-        .form-group{ data: { editor: { auxiliary: 'a' } } }
+        .form-group{ data: { editor: { auxiliary: 'link' } } }
-          %label{ for: 'a-href' }= t('editor.url')
+          %label{ for: 'link-href' }= t('editor.url')
-          %input.form-control{ type: 'url', data: { prop: 'a-href' } }/
+          %input.form-control{ type: 'url', data: { prop: 'link-href' } }/
+      
+      .editor-aviso-word
+        %p ¡Alto ahí! ¿Estás pegando de word? ...
 
     .editor-content.form-control.h-auto.mt-1{ contenteditable: 'true' }
       = metadata.value.html_safe