sanitize titles while they are being typed

assets/js/app.js

@@ -30,13 +30,14 @@ import topbar from 'topbar'
 import CtrlEnter from './ctrlenter'
 import Date from './date'
 import DateTime from './datetime'
+import SanitizeTitles from './sanitizetitles'
 
 const csrfTokenElement = document.querySelector("meta[name='csrf-token']")
 let csrfToken
 if (csrfTokenElement) { csrfToken = csrfTokenElement.getAttribute('content') }
 const liveSocket = new LiveSocket('/live', Socket, {
   params: { _csrf_token: csrfToken },
-  hooks: { CtrlEnter, Date, DateTime }
+  hooks: { CtrlEnter, Date, DateTime, SanitizeTitles }
 })
 
 // Show progress bar on live navigation and form submits

assets/js/sanitizetitles.js

@@ -0,0 +1,10 @@
+export default {
+  SanitizeTitles (context) {
+    context.el.addEventListener('keyup', (e) => {
+      e.target.value = e.target.value
+        .replace(' ', '-')
+        .replace(/[^a-zA-Z0-9-]/, '')
+    })
+  },
+  mounted () { this.SanitizeTitles(this) }
+}