Merge remote-tracking branch 'origin/prosemirror' into rails

app/assets/stylesheets/actiontext.scss

@@ -1,38 +0,0 @@
-//
-// 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

@@ -241,3 +241,19 @@ svg {
     height: 1rem;
   }
 }
+
+.sutty-editor-prosemirror {
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 5px 0;
+  max-height: 450px;
+  overflow-y: auto;
+
+  .ProseMirror {
+    padding: 4px 10px;
+    line-height: 1.2;
+    outline: none;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+  }
+}

app/javascript/packs/application.js

@@ -15,5 +15,79 @@
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
 
-require("trix")
+import {EditorState} from "prosemirror-state"
-require("@rails/actiontext")
+import {EditorView} from "prosemirror-view"
+import {Schema, DOMParser} from "prosemirror-model"
+
+// 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"
+
+// markdown (commonmark de markdown-it)
+import {schema, defaultMarkdownParser,
+        defaultMarkdownSerializer} from "prosemirror-markdown"
+
+import { DirectUpload } from "@rails/activestorage"
+
+class SuttyEditor {
+  constructor ({element, markdown}) {
+    this.state = this.buildState(markdown)
+    this.view = this.buildView(element, this.state)
+  }
+
+  buildState (markdown) {
+    return EditorState.create({
+      schema,
+      ...(markdown ? {
+        doc: defaultMarkdownParser.parse(markdown)
+      } : {}),
+      plugins: [
+        gapCursor(),
+        inputRules({
+          rules: [
+            //emDash, // -- => —
+            //ellipsis, // ... => …
+
+          ],
+        }),
+      ],
+    })
+  }
+
+  buildView (element, state) {
+    return new EditorView(element, {state})
+  }
+
+  get markdown () {
+    return defaultMarkdownSerializer.serialize(this.view.state.doc)
+  }
+}
+
+document.addEventListener('turbolinks:load', e => {
+  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}"]`
+    )
+
+    // 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,
+    })
+
+    // 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...')
+      textareaEl.value = editor.markdown
+    }, true)
+  }
+})

app/models/metadata_content.rb

@@ -2,44 +2,8 @@
 
 # Se encarga del contenido del artículo y quizás otros campos que
 # requieran texto largo.
-class MetadataContent < MetadataTemplate
+class MetadataContent < MetadataString
-  include ActionView::Helpers::SanitizeHelper
-
-  def default_value
-    ''
-  end
-
-  def value
-    markdown = ReverseMarkdown.convert(self[:value]).strip
-    markdown = nil if markdown.blank?
-
-    sanitize(markdown || document.content || default_value,
-             sanitize_options)
-      .tr("\r", '')         # eliminar retornos de carro
-      .gsub(/^&gt; /, '> ') # convertir citas de vuelta a citas
-      .gsub(/  \n  /, "\n") # eliminar dobles saltos de línea
-      .gsub(/^  $/, '')     # eliminar saltos de línea solitarios
-  end
-
   def front_matter?
     false
   end
-
-  private
-
-  # Etiquetas y atributos HTML a permitir
-  #
-  # No queremos permitir mucho más que cosas de las que nos falten en
-  # CommonMark.
-  #
-  # TODO: Permitir una lista de atributos y etiquetas en el Layout
-  #
-  # XXX: Vamos a generar un reproductor de video/audio directamente
-  # desde un plugin de Jekyll
-  def sanitize_options
-    {
-      tags: %w[span],
-      attributes: %w[title class lang]
-    }
-  end
 end

app/views/application/_editor.haml

@@ -0,0 +1,4 @@
+.sutty-editor.sutty-editor-prosemirror{ 'data-sutty-identifier': identifier }
+%textarea.form-control.sutty-editor.sutty-editor-content{ rows: 8,
+  'data-sutty-identifier': identifier, name: name }
+  = markdown

app/views/posts/attributes/_content.haml

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

package.json

@@ -2,12 +2,17 @@
   "name": "sutty",
   "private": true,
   "dependencies": {
-    "@rails/actiontext": "^6.0.0",
+    "@rails/activestorage": "^6.0.0",
     "@rails/webpacker": "^4.0.7",
     "commonmark": "^0.29.0",
     "input-tag": "https://0xacab.org/sutty/input-tag.git",
     "table-dragger": "https://0xacab.org/sutty/table-dragger.git",
-    "trix": "https://0xacab.org/sutty/trix.git",
+    "prosemirror-gapcursor": "^1.0.4",
+    "prosemirror-inputrules": "^1.0.4",
+    "prosemirror-markdown": "^1.3.1",
+    "prosemirror-model": "^1.7.4",
+    "prosemirror-state": "^1.2.4",
+    "prosemirror-view": "^1.11.7",
     "zepto": "^1.2.0"
   },
   "devDependencies": {

yarn.lock

@@ -688,14 +688,7 @@
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
   integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
 
-"@rails/actiontext@^6.0.0":
+"@rails/activestorage@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@rails/actiontext/-/actiontext-6.0.0.tgz#ee7f70e916c6d7c4ff2e0832047b9c1c2dff0f62"
-  integrity sha512-0Koqw59xIMYMMri3ZIE1CaEEEkMQi16j+4FQwCRE5QG830Q1tnli0TrQrtJ0vE+D1vf1JuJfy7UHSGPbaspmRQ==
-  dependencies:
-    "@rails/activestorage" "^6.0.0-alpha"
-
-"@rails/activestorage@^6.0.0-alpha":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@rails/activestorage/-/activestorage-6.0.0.tgz#6d9cc98f3dcf195c38ca65e80acd2e759336dd7a"
   integrity sha512-RZqTVlUYSWcI88pSJ7ImuTtDYQvqVc2PNuOo+5R3hcVupD+d2TO8xmluqQ5TvByjPqKX4acEK0mjEIK5ip9kCg==
@@ -2490,7 +2483,7 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
   integrity sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==
 
-"entities@~ 1.1.1":
+"entities@~ 1.1.1", entities@~1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
   integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
@@ -3881,6 +3874,13 @@ lcid@^2.0.0:
   dependencies:
     invert-kv "^2.0.0"
 
+linkify-it@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
+  integrity sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==
+  dependencies:
+    uc.micro "^1.0.1"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -4031,6 +4031,17 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-it@^8.4.2:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.4.2.tgz#386f98998dc15a37722aa7722084f4020bdd9b54"
+  integrity sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==
+  dependencies:
+    argparse "^1.0.7"
+    entities "~1.1.1"
+    linkify-it "^2.0.0"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -4050,7 +4061,7 @@ mdn-data@~1.1.0:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-1.1.4.tgz#50b5d4ffc4575276573c4eedb8780812a8419f01"
   integrity sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==
 
-"mdurl@~ 1.0.1":
+mdurl@^1.0.1, "mdurl@~ 1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
 
@@ -4637,6 +4648,11 @@ optimize-css-assets-webpack-plugin@^5.0.1:
     cssnano "^4.1.10"
     last-call-webpack-plugin "^3.0.0"
 
+orderedmap@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-1.0.0.tgz#d90fc2ba1ed085190907d601dec6e6a53f8d41ba"
+  integrity sha1-2Q/Cuh7QhRkJB9YB3sbmpT+NQbo=
+
 original@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
@@ -5581,6 +5597,71 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
+prosemirror-gapcursor@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.0.4.tgz#4ba663fb8511616e18ad222c904403cfbf6866dc"
+  integrity sha512-k021MtJibWs3NaJI6S9tCXfTZ/kaugFZBndHkkWx3Zfk0QDUO6JfVATpflxADN6DUkRwJ7qWyHlLDWu71hxHFQ==
+  dependencies:
+    prosemirror-keymap "^1.0.0"
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-view "^1.0.0"
+
+prosemirror-inputrules@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-inputrules/-/prosemirror-inputrules-1.0.4.tgz#8ae84d9c147abb448b86063ff422e801c4b1658d"
+  integrity sha512-RhuBghqUgYWm8ai/P+k1lMl1ZGvt6Cs3Xeur8oN0L1Yy+Z5GmsTp3fT8RVl+vJeGkItEAxAit9Qh7yZxixX7rA==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-keymap@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.0.2.tgz#e4e8b876a586ec6a170615fce19c4450f4075bef"
+  integrity sha512-aq3fBT3WMbwGNacUtMbS/mxd87hjJyjtUx5/h3q/P3FiVqHxmeA9snxQsZHYe0cWRziZePun8zw6kHFKLp/DAQ==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    w3c-keyname "^2.0.0"
+
+prosemirror-markdown@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-markdown/-/prosemirror-markdown-1.3.1.tgz#6ede0f5993758a257eb33041efed32e449b13ed4"
+  integrity sha512-x16Va8DN9OHEzaoxCw0mmkvo6RwQTfjZRJZpEj8/TelINsFGojay8b0U4U+Hv2HwfMVfA00i6Pk3jeGrE/vUtg==
+  dependencies:
+    markdown-it "^8.4.2"
+    prosemirror-model "^1.0.0"
+
+prosemirror-model@^1.0.0, prosemirror-model@^1.1.0, prosemirror-model@^1.7.4:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.7.4.tgz#fadefad98ef9d71ca1749d18a82005313c978e4b"
+  integrity sha512-yxdpPh9Uv5vAOZvmbhg4fsGUK1oHuQs69iX7cFZ0A4Y+AyMMWRCNKUt21uv84HbXb4I180l4pJE8ibaH/SwYiw==
+  dependencies:
+    orderedmap "^1.0.0"
+
+prosemirror-state@^1.0.0, prosemirror-state@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.2.4.tgz#aab932ebb33a0f27c256abce6fc20da8ca77ad5e"
+  integrity sha512-ViXpXond3BbSL12ENARQGq3Y8igwFMbTcy96xUNK8kfIcfQRlYlgYrBPXIkHC5+QZtbPrYlpuJ2+QyeSlSX9Cw==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.1.5.tgz#e50113d8004854eca1fa0711806bca53b1f1fad9"
+  integrity sha512-hJyRcwykLrAAj/ziNbVK1P/ensiszWJ2fNwNiDM8ZWYiMPwM4cAd2jptj/znxJfIvaj0S0psWL1+VhKwPNJDSQ==
+  dependencies:
+    prosemirror-model "^1.0.0"
+
+prosemirror-view@^1.0.0, prosemirror-view@^1.11.7:
+  version "1.11.7"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.11.7.tgz#537020acab43e18d51e18717fb1f39466317ce21"
+  integrity sha512-RDll1mhrOQ5JPOsUZlISH3VP/4zyHm3RAuqh9Cg5HdpfSQow0nsx8xL5YQZ976UdhvwbkiKamLtxhSRKES9wsA==
+  dependencies:
+    prosemirror-model "^1.1.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+
 proxy-addr@~2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
@@ -6772,10 +6853,6 @@ trim-right@^1.0.1:
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
   integrity sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=
 
-"trix@https://0xacab.org/sutty/trix.git":
-  version "1.2.0"
-  resolved "https://0xacab.org/sutty/trix.git#0a53f75dbef0d650acbd73344f7d50ac4aedbe16"
-
 "true-case-path@^1.0.2":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.3.tgz#f813b5a8c86b40da59606722b144e3225799f47d"
@@ -6823,6 +6900,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
@@ -7010,6 +7092,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
   integrity sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==
 
+w3c-keyname@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.1.1.tgz#d234195b0a79913d06a0bc636f17f00050a5de56"
+  integrity sha512-8kSrsGClLiL4kb5/pTxglejUlEAPk3GXtkBblSMrQDxKz0NkMRTVTPBZm6QCNqPOCPsdNvae5XfV+RJZgeGXEA==
+
 watchpack@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"