vínculos

app/assets/javascripts/01-types.js

@@ -31,6 +31,10 @@ const marks = {
 		selector: "mark",
 		createFn: () => document.createElement("MARK"),
 	},
+	a: {
+		selector: "a",
+		createFn: () => document.createElement("A"),
+	}
 }
 
 const tagNameSetFn = tagName => el => {
@@ -174,6 +178,28 @@ function rgb2hex(rgb) {
 const getSelected = contentEl => contentEl.querySelector(".selected")
 
 const typesWithProperties = {
+	a: {
+		selector: marks.a.selector,
+		updateInput (el, editorEl) {
+			setAuxiliaryToolbar(editorEl, "a")
+
+			const markAInputEl = editorEl.querySelector(`*[data-prop="a-href"]`)
+			markAInputEl.disabled = false
+			markAInputEl.value = el.href
+		},
+		disableInput (editorEl) {
+			const markAInputEl = editorEl.querySelector(`*[data-prop="a-href"]`)
+			markAInputEl.disabled = true
+			markAInputEl.value = ""
+		},
+		setupInput (editorEl, contentEl) {
+			const markAInputEl = editorEl.querySelector(`*[data-prop="a-href"]`)
+			markAInputEl.addEventListener("change", event => {
+				const markEl = contentEl.querySelector(marks.a.selector + ".selected")
+				if (markEl) markEl.href = markAInputEl.value
+			}, false)
+		}
+	},
 	mark: {
 		selector: marks.mark.selector,
 		updateInput (el, editorEl) {

app/assets/javascripts/02-editor.js

@@ -461,6 +461,7 @@ function setupEditor (editorEl) {
 	document.addEventListener(editorBtn("audio"), () => setAuxiliaryToolbar(editorEl, "audio"))
 	document.addEventListener(editorBtn("video"), () => setAuxiliaryToolbar(editorEl, "video"))
 	document.addEventListener(editorBtn("pdf"), () => setAuxiliaryToolbar(editorEl, "pdf"))
+	document.addEventListener(editorBtn("a"), () => setAuxiliaryToolbar(editorEl, "a"))
 
 	for (const video of document.querySelectorAll('.editor .editor-content video')) {
 		video.addEventListener('click', event => event.target.controls = true)

app/views/posts/attributes/_content.haml

@@ -18,6 +18,7 @@
         %button.btn{ data: { button: 'deleted' } }= t('editor.deleted')
         %button.btn{ data: { button: 'underline' } }= t('editor.underline')
         %button.btn{ data: { button: 'mark' } }= t('editor.mark')
+        %button.btn{ data: { button: 'a' } }= t('editor.a')
         %button.btn{ data: { button: 'h1' } }= t('editor.h1')
         %button.btn{ data: { button: 'h2' } }= t('editor.h2')
         %button.btn{ data: { button: 'h3' } }= t('editor.h3')
@@ -68,9 +69,9 @@
             %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: 'link' } } }
+        .form-group{ data: { editor: { auxiliary: 'a' } } }
-          %label{ for: 'link-href' }= t('editor.url')
+          %label{ for: 'a-href' }= t('editor.url')
-          %input.form-control{ type: 'url', data: { prop: 'link-href' } }/
+          %input.form-control{ type: 'url', data: { prop: 'a-href' } }/
 
     .editor-content.form-control.h-auto.mt-1{ contenteditable: 'true' }
       = metadata.value.html_safe

config/locales/en.yml

@@ -560,6 +560,7 @@ en:
     deleted: Strikethrough
     underline: Underline
     mark: Mark
+    a: Link
     h1: Heading 1
     h2: Heading 2
     h3: Heading 3

config/locales/es.yml

@@ -579,6 +579,7 @@ es:
     deleted: Tachado
     underline: Subrayado
     mark: Resaltado
+    a: Vínculo
     h1: Título 1
     h2: Título 2
     h3: Título 3