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

import tableDragger from "table-dragger"

import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
import {Schema, DOMParser} from "prosemirror-model"
import {keymap} from "prosemirror-keymap"

// seleccionar cosas que no son texto
import {gapCursor} from "prosemirror-gapcursor"
import "prosemirror-gapcursor/style/gapcursor.css"

// convertir cosas como ">" a una quote: https://prosemirror.net/docs/ref/#inputrules
import {inputRules, wrappingInputRule, textblockTypeInputRule,
        emDash, ellipsis} from "prosemirror-inputrules"

import serializer from './serializer.js'
import parser from './deserializer.js'
import schema from './schema.js'

import {toggleMark, setBlockType, wrapIn, baseKeymap} from "prosemirror-commands"
import {toggleWrap, toggleBlockType, toggleList,
        updateMark, removeMark} from "tiptap-commands"

import {startImageUpload, placeholderPlugin} from "./imageUpload"

const toggleBold = toggleMark(schema.marks.strong)
const toggleItalic = toggleMark(schema.marks.em)
const toggleHighlight = toggleMark(schema.marks.mark)
const wrapInQuote = toggleWrap(schema.nodes.blockquote)

const toggleUl = toggleList(schema.nodes.bullet_list, schema.nodes.list_item)
const toggleOl = toggleList(schema.nodes.ordered_list, schema.nodes.list_item)

const generateHeadingToggle = level =>
  toggleBlockType(
    schema.nodes.heading,
    schema.nodes.paragraph,
    { level: level },
  )
const toggleH1 = generateHeadingToggle(1)
const toggleH2 = generateHeadingToggle(2)

const makeLink = (state, dispatch) => {
  const {tr, selection, doc} = state
  const type = schema.marks.link

  const {from, to} = selection
  const has = doc.rangeHasMark(from, to, type)

  if (has) {
    tr.removeMark(from, to, type)
  } else {
    tr.addMark(from, to, type.create({
      href: window.prompt('elegir url', '//sutty.nl')
    }))
  }

  return dispatch(tr)
}

class SuttyEditor {
  constructor ({element, markdown, toolbar}) {
    this.state = this.buildState(markdown)
    this.view = this.buildView(element, this.state)
    this.hooks(toolbar)
  }

  runCommand (command) {
    return command(this.view.state, this.view.dispatch, this.view)
  }

  hooks (el) {
    const setupBtn = (class_, action) => {
      const btnEl = el.querySelector('.' + class_ + '-btn')
      btnEl.type = 'button'
      btnEl.addEventListener('click', e => {
        action()
        return false
      })
    }
    setupBtn('bold', () => this.runCommand(toggleBold))
    setupBtn('italic', () => this.runCommand(toggleItalic))
    setupBtn('highlight', () => this.runCommand(toggleHighlight))
    setupBtn('quote', () => this.runCommand(wrapInQuote))
    setupBtn('link', () => this.runCommand(makeLink))
    setupBtn('ul', () => this.runCommand(toggleUl))
    setupBtn('ol', () => this.runCommand(toggleOl))
    setupBtn('h1', () => this.runCommand(toggleH1))
    setupBtn('h2', () => this.runCommand(toggleH2))

    const imgInput = el.querySelector('.img-input')
    imgInput.addEventListener('change', event => {
      if (
        this.view.state.selection.$from.parent.inlineContent
        && event.target.files.length
      ) {
        const file = event.target.files[0]
        event.target.value = ''
        startImageUpload(this.view, file, schema)
      }
      this.view.focus()
    })
  }

  buildState (markdown) {
    return EditorState.create({
      schema,
      ...(markdown ? {
        doc: parser.parse(markdown)
      } : {}),
      plugins: [
        gapCursor(),
        keymap(baseKeymap),
        placeholderPlugin,
        inputRules({
          rules: [
            //emDash, // -- => —
            //ellipsis, // ... => …

          ],
        }),
      ],
    })
  }

  buildView (element, state) {
    return new EditorView(element, {state})
  }

  getMarkdown () {
    return serializer.serialize(this.view.state.doc)
  }
}

document.addEventListener('turbolinks:load', e => {
  try {
    const editorEls = document.querySelectorAll('.sutty-editor-prosemirror')
    for (const el of editorEls) {
      // conseguir textarea con el markdown
      const textareaEl = document.querySelector(
        `.sutty-editor-content[data-sutty-identifier="${el.dataset.suttyIdentifier}"]`
      )

      // conseguir toolbar
      const toolbarEl = document.querySelector(
        `.sutty-editor-toolbar[data-sutty-identifier="${el.dataset.suttyIdentifier}"]`
      )

      // ocultarlo (no se oculta originalmente para usuaries noscript)
      textareaEl.style.display = 'none'
      
      // crear editor con el markdown del textarea
      const editor = new SuttyEditor({
        element: el,
        markdown: textareaEl.value,
        toolbar: toolbarEl, 
      })

      // hookear a la form para inyectar el contenido del editor al textarea oculto para que se mande
      textareaEl.form.addEventListener('submit', e => {
        console.log('enviando formulario: inyectando markdown en textarea...')
        try {
          textareaEl.value = editor.getMarkdown()
        } catch (error) {
          console.error('no se pudo inyectar markdown!', error)
          // TODO: mostrar esto bien
          e.preventDefault()
        }
      }, true)
    }
  } catch (error) {
    console.error('algo falló en la carga del editor', error)
  }

  const table = document.querySelector('.table-draggable')

  if (table == null) return

  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'))
  })
})