sutty/app/javascript/packs/application.js

/* 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)

require("trix")
require("@rails/actiontext")

import tableDragger from 'table-dragger'

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(".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'
  })

  document.querySelectorAll('.table-draggable').forEach(table => {
    tableDragger(table, {
      mode: 'row',
      onlyBody: true,
      dragHandler: '.handle'
    }).on('drop', (from, to, el, mode) => {
      Array.from(document.querySelectorAll('.reorder'))
          .reverse()
          .map((o,i) => o.value = i);

      Array.from(document.querySelectorAll('.submit-reorder'))
          .map(s => s.classList.remove('d-none'));
    });
  });
})