better newline support

assets/js/app.js

@@ -16,29 +16,24 @@
 //
 
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
-import "phoenix_html"
+import 'phoenix_html';
 // Establish Phoenix Socket and LiveView configuration.
-import {Socket} from "phoenix"
-import {LiveSocket} from "phoenix_live_view"
-import topbar from "../vendor/topbar"
+import { Socket } from 'phoenix';
+import { LiveSocket } from 'phoenix_live_view';
+import Hooks from './hooks';
 
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {
-  longPollFallbackMs: 2500,
-  params: {_csrf_token: csrfToken}
-})
-
-// Show progress bar on live navigation and form submits
-topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
-window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
-window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
+let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content');
+let liveSocket = new LiveSocket('/live', Socket, {
+	hooks: Hooks,
+	longPollFallbackMs: 2500,
+	params: { _csrf_token: csrfToken },
+});
 
 // connect if there are any LiveViews on the page
-liveSocket.connect()
+liveSocket.connect();
 
 // expose liveSocket on window for web console debug logs and latency simulation:
 // >> liveSocket.enableDebug()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
-window.liveSocket = liveSocket
-
+window.liveSocket = liveSocket;

assets/js/hooks.js

@@ -0,0 +1,19 @@
+const Hooks = {};
+
+Hooks.EnterToNewline = {
+	mounted() {
+		this.el.addEventListener('keydown', (e) => {
+			if (e.key === 'Enter' && !e.shiftKey) {
+				e.preventDefault();
+
+				const cursorPos = this.el.selectionStart;
+				const value = this.el.value;
+
+				this.el.value = value.slice(0, cursorPos) + '\\n' + value.slice(cursorPos);
+				this.el.selectionStart = this.el.selectionEnd = cursorPos + 2;
+			}
+		});
+	},
+};
+
+export default Hooks;