First full release

express/public/javascripts/mixed-content.js

@@ -1,21 +1,42 @@
 const allMixedContentFields = document.querySelectorAll('.mc-field')
 
 allMixedContentFields.forEach(el =>
-  el.addEventListener('focusin', () => showMCButtons(el))
+  el.addEventListener('focus', () => showMCButtons(el))
 )
 
 document.addEventListener('keypress', e => {
   if (e.key === 'Enter' && e.target.classList.contains('dispatch-tab')) {
-    const form = event.target.form
-    const index = Array.prototype.indexOf.call(form, e.target)
-    form.elements[index + 1]?.focus()
     e.preventDefault()
+    const currentNode = e.target
+    const allElements = document.querySelectorAll('input, select, textarea')
+    const currentIndex = [...allElements].findIndex(el =>
+      currentNode.isEqualNode(el)
+    )
+    const targetIndex = (currentIndex + 1) % allElements.length
+    allElements[targetIndex].focus()
   }
 })
 
-function showMCButtons(element) {
-  const parent = element.parentElement.parentElement.parentElement
+function showMCButtons(element, linkTerm) {
+  let parent
+  if (linkTerm) {
+    parent = element.parentElement.parentElement.parentElement.parentElement
+  } else {
+    parent = element.parentElement.parentElement.parentElement
+  }
+  const mainContent = document.getElementById('offset-main')
+  const sideMenu = document.querySelector('.content-nav-content')
   const btnGrp = parent.querySelector('.mc-buttons-group')
+  // Warning, do not touch *_*
+  document.addEventListener('click', function (event) {
+    if (mainContent.contains(event.target) || sideMenu.contains(event.target)) {
+      if (element !== event.target && document.activeElement !== element) {
+        if (!parent.contains(event.target)) {
+          btnGrp.classList.add('d-none')
+        }
+      }
+    }
+  })
   btnGrp.classList.remove('d-none')
   const btnGrpChildren = btnGrp.children
   const childrenBtns = Array.from(btnGrpChildren)
@@ -29,10 +50,10 @@ function showMCButtons(element) {
       { once: true }
     )
   )
-  document.addEventListener('click', function (event) {
-    if (parent !== event.target && !parent.contains(event.target)) {
-      btnGrp.classList.add('d-none')
-    }
+
+  document.addEventListener('keyup', function (e) {
+    const selectedEl = document.activeElement
+    if (!parent.contains(selectedEl)) btnGrp.classList.add('d-none')
   })
 }
 
@@ -50,8 +71,9 @@ function addMixedContentInput(el, selectedEl) {
       inputText.substring(0, selectedStart) +
       '<b>' +
       inputText.substring(selectedStart, selectedEnd) +
-      '</b> ' +
+      '</b>' +
       inputText.substring(selectedEnd)
+    placeCaret(selectedEl, selectedEnd + 7)
   }
 
   if (el.classList.contains('mc-italic') && selectedText.length) {
@@ -59,8 +81,9 @@ function addMixedContentInput(el, selectedEl) {
       inputText.substring(0, selectedStart) +
       '<i>' +
       inputText.substring(selectedStart, selectedEnd) +
-      '</i> ' +
+      '</i>' +
       inputText.substring(selectedEnd)
+    placeCaret(selectedEl, selectedEnd + 7)
   }
 
   if (el.classList.contains('mc-supscript') && selectedText.length) {
@@ -68,8 +91,9 @@ function addMixedContentInput(el, selectedEl) {
       inputText.substring(0, selectedStart) +
       '<sup>' +
       inputText.substring(selectedStart, selectedEnd) +
-      '</sup> ' +
+      '</sup>' +
       inputText.substring(selectedEnd)
+    placeCaret(selectedEl, selectedEnd + 11)
   }
 
   if (el.classList.contains('mc-subscript') && selectedText.length) {
@@ -77,27 +101,41 @@ function addMixedContentInput(el, selectedEl) {
       inputText.substring(0, selectedStart) +
       '<sub>' +
       inputText.substring(selectedStart, selectedEnd) +
-      '</sub> ' +
+      '</sub>' +
       inputText.substring(selectedEnd)
+    placeCaret(selectedEl, selectedEnd + 11)
   }
 
   if (el.classList.contains('mc-hyperlink') && selectedText.length) {
     selectedEl.value =
       inputText.substring(0, selectedStart) +
-      '<link url="">' +
+      '<a href="">' +
       inputText.substring(selectedStart, selectedEnd) +
-      '</link> ' +
+      '</a>' +
       inputText.substring(selectedEnd)
   }
 
   if (el.classList.contains('mc-line-break')) {
     selectedEl.value =
       inputText.substring(0, selectedStart) +
-      '<br />' +
+      '<br/>' +
       inputText.substring(selectedEnd)
+    placeCaret(selectedEl, selectedEnd + 5)
     el.removeEventListener('click', () => addMixedContentInput, false)
   }
+}
 
-  // selectedEl.focus()
-  // selectedEl.setSelectionRange(selectedStart, selectedEnd)
+function placeCaret(elem, caretPos) {
+  if (elem != null) {
+    if (elem.createTextRange) {
+      const range = elem.createTextRange()
+      range.move('character', caretPos)
+      range.select()
+    } else {
+      if (elem.selectionStart) {
+        elem.focus()
+        elem.setSelectionRange(caretPos, caretPos)
+      } else elem.focus()
+    }
+  }
 }