agregar webpacker y actiontext

se llama webpacker y el logo no es un bulto!

.browserslistrc

@@ -0,0 +1 @@
+defaults

.gitignore

@@ -31,3 +31,10 @@
 # Ignore master key for decrypting credentials and more.
 /config/master.key
 /config/credentials.yml.enc
+
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

Gemfile

@@ -60,6 +60,7 @@ gem 'rugged'
 gem 'sidekiq'
 gem 'terminal-table'
 gem 'validates_hostname'
+gem 'webpacker'
 
 group :development, :test do
   gem 'pry'

Gemfile.lock

@@ -250,6 +250,8 @@ GEM
     rack (2.0.7)
     rack-protection (2.0.7)
       rack
+    rack-proxy (0.6.5)
+      rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rails (6.0.0)
@@ -404,6 +406,10 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
+    webpacker (4.0.7)
+      activesupport (>= 4.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 4.2)
     websocket-driver (0.7.1)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.4)
@@ -470,6 +476,7 @@ DEPENDENCIES
   uglifier (>= 1.3.0)
   validates_hostname
   web-console (>= 3.3.0)
+  webpacker
 
 BUNDLED WITH
    2.0.2

app/assets/stylesheets/actiontext.scss

@@ -0,0 +1,38 @@
+//
+// Provides a drop-in pointer for the default Trix stylesheet that will
+// format the toolbar and the trix-editor content (whether displayed or
+// under editing). Feel free to incorporate this inclusion directly in
+// any other asset bundle and remove this file.
+//
+//= require trix/dist/trix
+
+// We need to override trix.css’s image gallery styles to accommodate
+// the <action-text-attachment> element we wrap around attachments.
+// Otherwise, images in galleries will be squished by the max-width:
+// 33%; rule.
+.trix-content {
+  .attachment-gallery {
+    > action-text-attachment,
+    > .attachment {
+      flex: 1 0 33%;
+      padding: 0 0.5em;
+      max-width: 33%;
+    }
+
+    &.attachment-gallery--2,
+    &.attachment-gallery--4 {
+      > action-text-attachment,
+      > .attachment {
+        flex-basis: 50%;
+        max-width: 50%;
+      }
+    }
+  }
+
+  action-text-attachment {
+    .attachment {
+      padding: 0 !important;
+      max-width: 100% !important;
+    }
+  }
+}

app/assets/stylesheets/application.scss

@@ -1,3 +1,4 @@
+//= require_tree .
 // TODO: Encontrar la forma de generar esto desde los locales de Rails
 $custom-file-text: (
   en: 'Browse',

app/javascript/packs/application.js

@@ -0,0 +1,19 @@
+/* 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")

app/views/active_storage/blobs/_blob.html.erb

@@ -0,0 +1,14 @@
+<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
+  <% if blob.representable? %>
+    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
+  <% end %>
+
+  <figcaption class="attachment__caption">
+    <% if caption = blob.try(:caption) %>
+      <%= caption %>
+    <% else %>
+      <span class="attachment__name"><%= blob.filename %></span>
+      <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
+    <% end %>
+  </figcaption>
+</figure>

app/views/layouts/application.html.haml

@@ -8,6 +8,8 @@
     = csrf_meta_tags
     = stylesheet_link_tag 'application', media: 'all',
       'data-turbolinks-track': 'reload'
+    = javascript_pack_tag 'application',
+      'data-turbolinks-track': 'reload'
     = javascript_include_tag 'application',
       'data-turbolinks-track': 'reload'
 

app/views/posts/attributes/_content.haml

@@ -2,5 +2,6 @@
   = label_tag "post_#{attribute}", post_label_t(attribute, post: post)
   = render 'posts/attribute_feedback',
     post: post, attribute: attribute, metadata: metadata
-  = text_area_tag "post[#{attribute}]", metadata.value,
+  = rich_text_area_tag "post[#{attribute}]",
-    **field_options(attribute, metadata)
+    sanitize_markdown(metadata.value, tags: all_html_tags),
+    **field_options(attribute, metadata), class: ''

babel.config.js

@@ -0,0 +1,72 @@
+module.exports = function(api) {
+  var validEnv = ['development', 'test', 'production']
+  var currentEnv = api.env()
+  var isDevelopmentEnv = api.env('development')
+  var isProductionEnv = api.env('production')
+  var isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      'Please specify a valid `NODE_ENV` or ' +
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: ' +
+        JSON.stringify(currentEnv) +
+        '.'
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        require('@babel/preset-env').default,
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        require('@babel/preset-env').default,
+        {
+          forceAllTransforms: true,
+          useBuiltIns: 'entry',
+          corejs: 3,
+          modules: false,
+          exclude: ['transform-typeof-symbol']
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      require('babel-plugin-macros'),
+      require('@babel/plugin-syntax-dynamic-import').default,
+      isTestEnv && require('babel-plugin-dynamic-import-node'),
+      require('@babel/plugin-transform-destructuring').default,
+      [
+        require('@babel/plugin-proposal-class-properties').default,
+        {
+          loose: true
+        }
+      ],
+      [
+        require('@babel/plugin-proposal-object-rest-spread').default,
+        {
+          useBuiltIns: true
+        }
+      ],
+      [
+        require('@babel/plugin-transform-runtime').default,
+        {
+          helpers: false,
+          regenerator: true,
+          corejs: false
+        }
+      ],
+      [
+        require('@babel/plugin-transform-regenerator').default,
+        {
+          async: false
+        }
+      ]
+    ].filter(Boolean)
+  }
+}

bin/webpack

@@ -0,0 +1,20 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+ENV['RAILS_ENV'] ||= ENV['RACK_ENV'] || 'development'
+ENV['NODE_ENV']  ||= 'development'
+
+require 'pathname'
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile',
+                                           Pathname.new(__FILE__).realpath)
+
+require 'rubygems'
+require 'bundler/setup'
+
+require 'webpacker'
+require 'webpacker/webpack_runner'
+
+APP_ROOT = File.expand_path('..', __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::WebpackRunner.run(ARGV)
+end

bin/webpack-dev-server

@@ -0,0 +1,20 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+ENV['RAILS_ENV'] ||= ENV['RACK_ENV'] || 'development'
+ENV['NODE_ENV']  ||= 'development'
+
+require 'pathname'
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile',
+                                           Pathname.new(__FILE__).realpath)
+
+require 'rubygems'
+require 'bundler/setup'
+
+require 'webpacker'
+require 'webpacker/dev_server_runner'
+
+APP_ROOT = File.expand_path('..', __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::DevServerRunner.run(ARGV)
+end

config/webpack/development.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()

config/webpack/environment.js

@@ -0,0 +1,3 @@
+const { environment } = require('@rails/webpacker')
+
+module.exports = environment

config/webpack/production.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'production'
+
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()

config/webpack/test.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()

config/webpacker.yml

@@ -0,0 +1,95 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  source_path: app/javascript
+  source_entry_path: packs
+  public_root_path: public
+  public_output_path: packs
+  cache_path: tmp/cache/webpacker
+  check_yarn_integrity: false
+  webpack_compile_output: false
+
+  # Additional paths webpack should lookup modules
+  # ['app/assets', 'engine/foo/app/assets']
+  resolved_paths: []
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
+
+  # Extract and emit a css file
+  extract_css: false
+
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+    - .eot
+    - .otf
+    - .ttf
+    - .woff
+    - .woff2
+
+  extensions:
+    - .mjs
+    - .js
+    - .sass
+    - .scss
+    - .css
+    - .module.sass
+    - .module.scss
+    - .module.css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
+development:
+  <<: *default
+  compile: true
+
+  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
+  check_yarn_integrity: true
+
+  # Reference: https://webpack.js.org/configuration/dev-server/
+  dev_server:
+    https: false
+    host: localhost
+    port: 3035
+    public: localhost:3035
+    hmr: false
+    # Inline should be set to true if using HMR
+    inline: true
+    overlay: true
+    compress: true
+    disable_host_check: true
+    use_local_ip: false
+    quiet: false
+    headers:
+      'Access-Control-Allow-Origin': '*'
+    watch_options:
+      ignored: '**/node_modules/**'
+
+
+test:
+  <<: *default
+  compile: true
+
+  # Compile test packs to a separate directory
+  public_output_path: packs-test
+
+production:
+  <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Extract and emit a css file
+  extract_css: true
+
+  # Cache manifest.json for performance
+  cache_manifest: true

db/migrate/20190829180743_create_action_text_tables.action_text.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+# This migration comes from action_text (originally 20180528164100)
+class CreateActionTextTables < ActiveRecord::Migration[6.0]
+  def change
+    create_table :action_text_rich_texts do |t|
+      t.string     :name, null: false
+      t.text       :body, size: :long
+      t.references :record, null: false, polymorphic: true, index: false
+
+      t.timestamps
+
+      t.index %i[record_type record_id name], name: 'index_action_text_rich_texts_uniqueness', unique: true
+    end
+  end
+end

db/schema.rb

@@ -12,7 +12,17 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20_190_829_163_530) do
+ActiveRecord::Schema.define(version: 20_190_829_180_743) do
+  create_table 'action_text_rich_texts', force: :cascade do |t|
+    t.string 'name', null: false
+    t.text 'body'
+    t.string 'record_type', null: false
+    t.integer 'record_id', null: false
+    t.datetime 'created_at', precision: 6, null: false
+    t.datetime 'updated_at', precision: 6, null: false
+    t.index %w[record_type record_id name], name: 'index_action_text_rich_texts_uniqueness', unique: true
+  end
+
   create_table 'active_storage_attachments', force: :cascade do |t|
     t.string 'name', null: false
     t.string 'record_type', null: false

doc/editor.md

@@ -0,0 +1,75 @@
+# Editor de texto
+
+Tenemos varias posibilidades para editores de texto:
+
+# [Trix](https://trix-editor.org/)
+
+Es el editor WYSIWYG integrado a Rails 6.  Es simple, liviano, de
+relativa fácil extensibilidad, se pueden subir archivos directamente,
+pero:
+
+* No soporta markdown, con lo que hay que convertir de HTML a MD
+  internamente
+
+* Hay que agregarle botones para H2-H6 porque solo tiene H1
+
+* No soporta tablas, aunque alguien lo logró hacer si hiciera falta.
+  (Podemos abrir un editor de ethercalc o simil quizas y tomar los datos
+  importándolos en HTML).
+
+# [Codemirror](https://codemirror.net/)
+
+Es un editor de texto con resaltado de sintaxis, pero:
+
+* Como no es WYSIWYG, la gente se puede asustar.  Solo serviría para
+  quienes se animan a (o quieren) escribir directamente con MD
+
+* Habría que desarrollar una vista previa
+
+* Habría que hacer una interfaz para vincular imágenes y otras cosas
+
+# [ACE](https://ace.c9.io/)
+
+Es un editor de texto como Codemirror aunque con más opciones y más
+liviano (?), pero:
+
+* Ídem codemirror
+
+# [TUI-Editor](https://ui.toast.com/tui-editor/)
+
+Es un editor WYSIWYG para Markdown, soporta tablas y un montón de
+features, pero:
+
+* Está hecho en jQuery
+* El JS es gigante y es super complejo, con lo que no podríamos
+  extenderlo si hiciera falta
+* No modifica un textarea con lo que no hay relación inmediata entre el
+  texto escrito y lo que se envía luego, puede haber bugs donde no
+  mandemos o no guardemos todo el texto.
+* Tiene analytics incorporadas aunque se pueden deshabilitar
+
+# Editor para Sutty
+
+Por ahora vamos a ir con Trix ya que es el que más características
+básicas tiene por la cantidad de esfuerzo que insume.  Nos interesa dar
+la posibilidad de una edición más hacker (!), así que quizás integremos
+ACE o Codemirror más adelante.
+
+# Arquitectura
+
+Todos los campos de metadatos de tipo `content` se van a convertir en
+editores Trix.
+
+Trix envía HTML, que se convierte a Markdown con reverse_markdown.  Al
+cargar el texto para editar, hay que volver a convertirlo a HTML para
+que Trix lo entienda.  No tiene que haber incompatibilidades porque en
+cada edición se van a degradar los textos sino.
+
+# TODO
+
+* Soportar ~tachado~ en reverse_markdown
+* Soportar <figure>
+* No escapar los bloques de cita al sanitizar
+* Crear plugin que convierta imagenes remotas en locales
+* Probar qué otros adjuntos soporta trix y limitarlos (?)
+* Que los <br> de trix se conviertan en parrafos

package.json

@@ -2,11 +2,17 @@
   "name": "sutty",
   "private": true,
   "dependencies": {
+    "@rails/actiontext": "^6.0.0",
+    "@rails/webpacker": "^4.0.7",
     "codemirror": "^5.48.2",
     "commonmark": "^0.29.0",
     "input-tag": "https://0xacab.org/sutty/input-tag.git",
     "table-dragger": "^1.0.2",
+    "trix": "^1.0.0",
     "tui-editor": "^1.4.5",
     "zepto": "^1.2.0"
+  },
+  "devDependencies": {
+    "webpack-dev-server": "^3.8.0"
   }
 }

postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-flexbugs-fixes'),
+    require('postcss-preset-env')({
+      autoprefixer: {
+        flexbox: 'no-2009'
+      },
+      stage: 3
+    })
+  ]
+}

test/fixtures/action_text/rich_texts.yml

@@ -0,0 +1,4 @@
+# one:
+#   record: name_of_fixture (ClassOfFixture)
+#   name: content
+#   body: <p>In a <i>million</i> stars!</p>