deprecar sprockets y ganar sourcemaps

app/assets/javascripts/application.js

@@ -1,5 +0,0 @@
-//= require rails-ujs
-//= require turbolinks
-//= require input-tag/input-tag.js
-//= require input-map/input-map.js
-//= require_tree .

app/javascript/controllers/reorder_controller.js

@@ -103,7 +103,11 @@ export default class extends Controller {
     this.reorder()
 
     // Mantenemos el primero a la vista
+    if ("scrollIntoViewIfNeeded" in rows[0].row) {
       rows[0].row.scrollIntoViewIfNeeded()
+    } else {
+      rows[0].row.scrollIntoView()
+    }
   }
 
   counter () {

app/javascript/editor/types/multimedia.ts

@@ -1,3 +1,4 @@
+import * as ActiveStorage from '@rails/activestorage'
 import { Editor } from 'editor/editor'
 import { EditorNode, getValidParentInSelection } from 'editor/types'
 import {
@@ -6,11 +7,6 @@ import {
 	setAuxiliaryToolbar, clearSelected,
 } from 'editor/utils'
 
-// TODO: tener ActiveStorage como import así no hacemos hacks
-declare global {
-	const ActiveStorage: any
-}
-
 function uploadFile (file: File): Promise<string> {
 	return new Promise((resolve, reject) => {
 		const upload = new ActiveStorage.DirectUpload(

app/javascript/etc/index.js

@@ -0,0 +1,8 @@
+import './external_links'
+import './image_preview'
+import './input-date'
+import './input-tag'
+import './prosemirror'
+import './timezone'
+import './turbolinks-anchors'
+import './validation'

app/javascript/etc/input-date.js

@@ -0,0 +1,11 @@
+// Validar fechas en navegadores que no soportan date, como
+// Webkit/Safari
+document.addEventListener('turbolinks:load', () => {
+  document.querySelectorAll('input[type="date"]').forEach(date => {
+    if (date.type === 'date') return
+
+    date.addEventListener('change', event => {
+      date.setCustomValidity(date.validity.patternMismatch ? date.dataset.patternMismatch : '')
+    })
+  })
+})

app/javascript/etc/input-tag.js

@@ -1,3 +1,6 @@
+import InputTag from 'input-tag/input-tag'
+import InputMap from 'input-map/input-map'
+
 document.addEventListener('turbolinks:load', () => {
   document.querySelectorAll('.taggable').forEach(target => {
     target.innerHTML = ''

app/javascript/etc/prosemirror.js

@@ -0,0 +1,29 @@
+import {EditorState} from "prosemirror-state"
+import {EditorView} from "prosemirror-view"
+import {schema, defaultMarkdownParser, defaultMarkdownSerializer} from "prosemirror-markdown"
+import {exampleSetup} from "prosemirror-example-setup"
+
+import "prosemirror-gapcursor/style/gapcursor.css"
+import "prosemirror-menu/style/menu.css"
+import "prosemirror-view/style/prosemirror.css"
+import "prosemirror-example-setup/style/style.css"
+
+document.addEventListener('turbolinks:load', () => {
+  document.querySelectorAll('.markdown-content').forEach(mdc => {
+    let textArea = mdc.querySelector(".content"),
+        editor = mdc.querySelector(".markdown-editor");
+
+    let view = new EditorView(editor, {
+      state: EditorState.create({
+        doc: defaultMarkdownParser.parse(textArea.value),
+        plugins: exampleSetup({schema})
+      })
+    })
+
+    // Guardar los cambios al enviar el formulario y cada 10 segundos
+    textArea.form.addEventListener('submit', e => textArea.value = defaultMarkdownSerializer.serialize(view.state.doc));
+    setInterval(() => textArea.value = defaultMarkdownSerializer.serialize(view.state.doc), 10 * 1000);
+    // Ocultar el area
+    textArea.style.display = 'none'
+  })
+})

app/javascript/etc/timezone.js

@@ -0,0 +1,51 @@
+// Lista de equivalencias entre Date#getTimezoneOffset de JS y
+// MetadataEvent
+const timeZoneOffsets = {
+   '720': '-12:00',
+   '660': '-11:00',
+   '600': '-10:00',
+   '570': '-09:30',
+   '540': '-09:00',
+   '480': '-08:00',
+   '420': '-07:00',
+   '360': '-06:00',
+   '300': '-05:00',
+   '240': '-04:00',
+   '210': '-03:30',
+   '180': '-03:00',
+   '120': '-02:00',
+    '60': '-01:00',
+     '0': '00:00',
+   '-60': '+01:00',
+  '-120': '+02:00',
+  '-180': '+03:00',
+  '-210': '+03:30',
+  '-240': '+04:00',
+  '-270': '+04:30',
+  '-300': '+05:00',
+  '-330': '+05:30',
+  '-345': '+05:45',
+  '-360': '+06:00',
+  '-390': '+06:30',
+  '-420': '+07:00',
+  '-480': '+08:00',
+  '-525': '+08:45',
+  '-540': '+09:00',
+  '-570': '+09:30',
+  '-600': '+10:00',
+  '-630': '+10:30',
+  '-660': '+11:00',
+  '-720': '+12:00',
+  '-765': '+12:45',
+  '-780': '+13:00',
+  '-840': '+14:00'
+};
+
+// Obtiene el huso horario local 
+const timeZoneOffset = timeZoneOffsets[(new Date).getTimezoneOffset().toString()];
+
+document.addEventListener('turbolinks:load', () => {
+  // Aplicar el huso horario descubierto en los campos de evento solo
+  // cuando estamos creando un artículo.
+  document.querySelectorAll('.new .event .zone select').forEach(zone => zone.value = timeZoneOffset);
+})

app/javascript/packs/application.js

@@ -1,19 +1,4 @@
 /* eslint no-console:0 */
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-//
-// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
-// layout file, like app/views/layouts/application.html.erb
-
-
-// Uncomment to copy all static images under ../images to the output folder and reference
-// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
-// or the `imagePath` JavaScript helper below.
-//
-// const images = require.context('../images', true)
-// const imagePath = (name) => images(name, true)
 
 import { Notifier } from '@airbrake/browser'
 
@@ -27,94 +12,13 @@ import 'core-js/stable'
 import 'regenerator-runtime/runtime'
 import 'controllers'
 import 'editor/editor'
+import 'fork-awesome/scss/fork-awesome.scss'
+import 'etc'
 
-import {EditorState} from "prosemirror-state"
+import Rails from '@rails/ujs'
-import {EditorView} from "prosemirror-view"
+import Turbolinks from 'turbolinks'
-import {schema, defaultMarkdownParser, defaultMarkdownSerializer} from "prosemirror-markdown"
+import * as ActiveStorage from '@rails/activestorage'
-import {exampleSetup} from "prosemirror-example-setup"
 
-import "prosemirror-gapcursor/style/gapcursor.css"
+Rails.start()
-import "prosemirror-menu/style/menu.css"
+Turbolinks.start()
-import "prosemirror-view/style/prosemirror.css"
+ActiveStorage.start()
-import "prosemirror-example-setup/style/style.css"
-import "fork-awesome/scss/fork-awesome.scss"
-
-// Lista de equivalencias entre Date#getTimezoneOffset de JS y
-// MetadataEvent
-const timeZoneOffsets = {
-   '720': '-12:00',
-   '660': '-11:00',
-   '600': '-10:00',
-   '570': '-09:30',
-   '540': '-09:00',
-   '480': '-08:00',
-   '420': '-07:00',
-   '360': '-06:00',
-   '300': '-05:00',
-   '240': '-04:00',
-   '210': '-03:30',
-   '180': '-03:00',
-   '120': '-02:00',
-    '60': '-01:00',
-     '0': '00:00',
-   '-60': '+01:00',
-  '-120': '+02:00',
-  '-180': '+03:00',
-  '-210': '+03:30',
-  '-240': '+04:00',
-  '-270': '+04:30',
-  '-300': '+05:00',
-  '-330': '+05:30',
-  '-345': '+05:45',
-  '-360': '+06:00',
-  '-390': '+06:30',
-  '-420': '+07:00',
-  '-480': '+08:00',
-  '-525': '+08:45',
-  '-540': '+09:00',
-  '-570': '+09:30',
-  '-600': '+10:00',
-  '-630': '+10:30',
-  '-660': '+11:00',
-  '-720': '+12:00',
-  '-765': '+12:45',
-  '-780': '+13:00',
-  '-840': '+14:00'
-};
-
-// Obtiene el huso horario local 
-const timeZoneOffset = timeZoneOffsets[(new Date).getTimezoneOffset().toString()];
-
-document.addEventListener('turbolinks:load', () => {
-
-  // Aplicar el huso horario descubierto en los campos de evento solo
-  // cuando estamos creando un artículo.
-  document.querySelectorAll('.new .event .zone select').forEach(zone => zone.value = timeZoneOffset);
-
-  document.querySelectorAll('.markdown-content').forEach(mdc => {
-    let textArea = mdc.querySelector(".content"),
-        editor = mdc.querySelector(".markdown-editor");
-
-    let view = new EditorView(editor, {
-      state: EditorState.create({
-        doc: defaultMarkdownParser.parse(textArea.value),
-        plugins: exampleSetup({schema})
-      })
-    })
-
-    // Guardar los cambios al enviar el formulario y cada 10 segundos
-    textArea.form.addEventListener('submit', e => textArea.value = defaultMarkdownSerializer.serialize(view.state.doc));
-    setInterval(() => textArea.value = defaultMarkdownSerializer.serialize(view.state.doc), 10 * 1000);
-    // Ocultar el area
-    textArea.style.display = 'none'
-  })
-
-  // Validar fechas en navegadores que no soportan date
-  document.querySelectorAll('input[type="date"]').forEach(date => {
-    if (date.type === 'date') return
-
-    date.addEventListener('change', event => {
-      date.setCustomValidity(date.validity.patternMismatch ? date.dataset.patternMismatch : '')
-    })
-  })
-})

app/views/layouts/application.html.haml

@@ -16,7 +16,6 @@
     = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
     = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
     = stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload'
-    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
     = favicon_link_tag 'sutty_cuadrada.png', rel: 'apple-touch-icon', type: 'image/png'
 
   %body{ class: yield(:body) }

package.json

@@ -9,6 +9,8 @@
     "@babel/preset-env": "^7.12.17",
     "@babel/preset-typescript": "~7.12",
     "@rails/actiontext": "^6.0.0",
+    "@rails/activestorage": "^6.1.3-1",
+    "@rails/ujs": "^6.1.3-1",
     "@rails/webpacker": "5.2.1",
     "babel-loader": "^8.2.2",
     "circular-dependency-plugin": "^5.2.2",
@@ -22,8 +24,12 @@
     "prosemirror-markdown": "^1.4.5",
     "prosemirror-schema-basic": "^1.1.2",
     "stimulus": "^1.1.1",
+    "turbolinks": "^5.2.0",
     "typescript": "^4.1.5",
     "webpack-dev-server": "^3.11.2",
     "zepto": "^1.2.0"
+  },
+  "devDependencies": {
+    "@types/rails__activestorage": "^6.0.0"
   }
 }

yarn.lock

@@ -1091,6 +1091,18 @@
   dependencies:
     spark-md5 "^3.0.0"
 
+"@rails/activestorage@^6.1.3-1":
+  version "6.1.3-1"
+  resolved "https://registry.yarnpkg.com/@rails/activestorage/-/activestorage-6.1.3-1.tgz#3304eaf597279c5943f793068b0147cb639239ed"
+  integrity sha512-BCrnyrRWIZX3eQieMHrmWuMCEZgwSifmSVFg46tGjdbDa6wjK3jitFDQ+gYXhyN3Cs4Hb+kAJb+0oMiprkzY0A==
+  dependencies:
+    spark-md5 "^3.0.0"
+
+"@rails/ujs@^6.1.3-1":
+  version "6.1.3-1"
+  resolved "https://registry.yarnpkg.com/@rails/ujs/-/ujs-6.1.3-1.tgz#c25ca8473a40298ecab7b0020214e77c0e6f5188"
+  integrity sha512-mygePdimLMOQ2nr9YclG1UIyKgaNfb2dMhsjhTs18j6DvlKR9VRz1j/Mbd2E7VL7HX7hlMBD1cltDrQsTZPjEw==
+
 "@rails/webpacker@5.2.1":
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/@rails/webpacker/-/webpacker-5.2.1.tgz#87cdbd4af2090ae2d74bdc51f6f04717d907c5b3"
@@ -1202,6 +1214,11 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/rails__activestorage@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@types/rails__activestorage/-/rails__activestorage-6.0.0.tgz#e633f2a430993f754792dfdbe2b64fc1f2d33869"
+  integrity sha512-Qk6dASfYYHym/95KQbPmUECuaveB5+sYEQdHDwKHvmwtrEbqjMH4t56MMCyzarweFDrA6ysULoCoa1f2nydwLg==
+
 "@types/request@2.48.5":
   version "2.48.5"
   resolved "https://registry.yarnpkg.com/@types/request/-/request-2.48.5.tgz#019b8536b402069f6d11bee1b2c03e7f232937a0"
@@ -7797,6 +7814,11 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
+turbolinks@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/turbolinks/-/turbolinks-5.2.0.tgz#e6877a55ea5c1cb3bb225f0a4ae303d6d32ff77c"
+  integrity sha512-pMiez3tyBo6uRHFNNZoYMmrES/IaGgMhQQM+VFF36keryjb5ms0XkVpmKHkfW/4Vy96qiGW3K9bz0tF5sK9bBw==
+
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"