prettier + tachado

app/javascript/packs/application.js

@@ -7,7 +7,6 @@
 // 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.
@@ -15,45 +14,59 @@
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
 
-import tableDragger from "table-dragger"
+import tableDragger from 'table-dragger'
 
-import {EditorState} from "prosemirror-state"
+import { EditorState } from 'prosemirror-state'
-import {EditorView} from "prosemirror-view"
+import { EditorView } from 'prosemirror-view'
-import {Schema, DOMParser} from "prosemirror-model"
+import { Schema, DOMParser } from 'prosemirror-model'
-import {keymap} from "prosemirror-keymap"
+import { keymap } from 'prosemirror-keymap'
 
 // seleccionar cosas que no son texto
-import {gapCursor} from "prosemirror-gapcursor"
+import { gapCursor } from 'prosemirror-gapcursor'
-import "prosemirror-gapcursor/style/gapcursor.css"
+import 'prosemirror-gapcursor/style/gapcursor.css'
 
 // convertir cosas como ">" a una quote: https://prosemirror.net/docs/ref/#inputrules
-import {inputRules, wrappingInputRule, textblockTypeInputRule,
+import {
-        emDash, ellipsis} from "prosemirror-inputrules"
+  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 {
-import {toggleWrap, toggleBlockType, toggleList,
+  toggleMark,
-        updateMark, removeMark} from "tiptap-commands"
+  setBlockType,
+  wrapIn,
+  baseKeymap,
+} from 'prosemirror-commands'
+import {
+  toggleWrap,
+  toggleBlockType,
+  toggleList,
+  updateMark,
+  removeMark,
+} from 'tiptap-commands'
 
-import {startImageUpload, placeholderPlugin} from "./imageUpload"
+import { startImageUpload, placeholderPlugin } from './imageUpload'
 
 const toggleBold = toggleMark(schema.marks.strong)
 const toggleItalic = toggleMark(schema.marks.em)
 const toggleHighlight = toggleMark(schema.marks.mark)
+const toggleStrikethrough = toggleMark(schema.marks.strikethrough)
 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(
+  toggleBlockType(schema.nodes.heading, schema.nodes.paragraph, {
-    schema.nodes.heading,
+    level: level,
-    schema.nodes.paragraph,
+  })
-    { level: level },
-  )
 const toggleH1 = generateHeadingToggle(1)
 const toggleH2 = generateHeadingToggle(2)
 
@@ -67,9 +80,13 @@ const makeLink = (state, dispatch) => {
   if (has) {
     tr.removeMark(from, to, type)
   } else {
-    tr.addMark(from, to, type.create({
+    tr.addMark(
-      href: window.prompt('elegir url', '//sutty.nl')
+      from,
-    }))
+      to,
+      type.create({
+        href: window.prompt('elegir url', '//sutty.nl'),
+      }),
+    )
   }
 
   return dispatch(tr)
@@ -98,6 +115,7 @@ class SuttyEditor {
     setupBtn('bold', () => this.runCommand(toggleBold))
     setupBtn('italic', () => this.runCommand(toggleItalic))
     setupBtn('highlight', () => this.runCommand(toggleHighlight))
+    setupBtn('strikethrough', () => this.runCommand(toggleStrikethrough))
     setupBtn('quote', () => this.runCommand(wrapInQuote))
     setupBtn('link', () => this.runCommand(makeLink))
     setupBtn('ul', () => this.runCommand(toggleUl))
@@ -108,8 +126,8 @@ class SuttyEditor {
     const imgInput = el.querySelector('.img-input')
     imgInput.addEventListener('change', event => {
       if (
-        this.view.state.selection.$from.parent.inlineContent
+        this.view.state.selection.$from.parent.inlineContent &&
-        && event.target.files.length
+        event.target.files.length
       ) {
         const file = event.target.files[0]
         event.target.value = ''
@@ -122,9 +140,11 @@ class SuttyEditor {
   buildState(markdown) {
     return EditorState.create({
       schema,
-      ...(markdown ? {
+      ...(markdown
-        doc: parser.parse(markdown)
+        ? {
-      } : {}),
+            doc: parser.parse(markdown),
+          }
+        : {}),
       plugins: [
         gapCursor(),
         keymap(baseKeymap),
@@ -133,7 +153,6 @@ class SuttyEditor {
           rules: [
             //emDash, // -- => —
             //ellipsis, // ... => …
-
           ],
         }),
       ],
@@ -155,12 +174,12 @@ document.addEventListener('turbolinks:load', e => {
     for (const el of editorEls) {
       // conseguir textarea con el markdown
       const textareaEl = document.querySelector(
-        `.sutty-editor-content[data-sutty-identifier="${el.dataset.suttyIdentifier}"]`
+        `.sutty-editor-content[data-sutty-identifier="${el.dataset.suttyIdentifier}"]`,
       )
 
       // conseguir toolbar
       const toolbarEl = document.querySelector(
-        `.sutty-editor-toolbar[data-sutty-identifier="${el.dataset.suttyIdentifier}"]`
+        `.sutty-editor-toolbar[data-sutty-identifier="${el.dataset.suttyIdentifier}"]`,
       )
 
       // ocultarlo (no se oculta originalmente para usuaries noscript)
@@ -174,7 +193,9 @@ document.addEventListener('turbolinks:load', e => {
       })
 
       // hookear a la form para inyectar el contenido del editor al textarea oculto para que se mande
-      textareaEl.form.addEventListener('submit', e => {
+      textareaEl.form.addEventListener(
+        'submit',
+        e => {
           console.log('enviando formulario: inyectando markdown en textarea...')
           try {
             textareaEl.value = editor.getMarkdown()
@@ -183,7 +204,9 @@ document.addEventListener('turbolinks:load', e => {
             // TODO: mostrar esto bien
             e.preventDefault()
           }
-      }, true)
+        },
+        true,
+      )
     }
   } catch (error) {
     console.error('algo falló en la carga del editor', error)
@@ -200,9 +223,10 @@ document.addEventListener('turbolinks:load', e => {
   }).on('drop', (from, to, el, mode) => {
     Array.from(document.querySelectorAll('.reorder'))
       .reverse()
-         .map((o,i) => o.value = i)
+      .map((o, i) => (o.value = i))
 
-    Array.from(document.querySelectorAll('.submit-reorder'))
+    Array.from(document.querySelectorAll('.submit-reorder')).map(s =>
-         .map(s => s.classList.remove('d-none'))
+      s.classList.remove('d-none'),
+    )
   })
 })

app/javascript/packs/deserializer.js

@@ -1,37 +1,55 @@
 // From https://github.com/ProseMirror/prosemirror-markdown/blob/master/src/from_markdown.js
 import { MarkdownParser } from 'prosemirror-markdown'
-import markdownit from "markdown-it"
+import markdownit from 'markdown-it'
-import markdownitMark from "markdown-it-mark"
+import markdownitMark from 'markdown-it-mark'
 
 import schema from './schema.js'
 
 export default new MarkdownParser(
   schema,
-  markdownit("commonmark", {html: false}).use(markdownitMark),
+  markdownit('commonmark', { html: false })
+    .use(markdownitMark)
+    .enable('strikethrough'),
   {
-    blockquote: {block: "blockquote"},
+    blockquote: { block: 'blockquote' },
-    paragraph: {block: "paragraph"},
+    paragraph: { block: 'paragraph' },
-    list_item: {block: "list_item"},
+    list_item: { block: 'list_item' },
-    bullet_list: {block: "bullet_list"},
+    bullet_list: { block: 'bullet_list' },
-    ordered_list: {block: "ordered_list", getAttrs: tok => ({order: +tok.attrGet("start") || 1})},
+    ordered_list: {
-    heading: {block: "heading", getAttrs: tok => ({level: +tok.tag.slice(1)})},
+      block: 'ordered_list',
-    code_block: {block: "code_block"},
+      getAttrs: tok => ({ order: +tok.attrGet('start') || 1 }),
-    fence: {block: "code_block", getAttrs: tok => ({params: tok.info || ""})},
+    },
-    hr: {node: "horizontal_rule"},
+    heading: {
-    image: {node: "image", getAttrs: tok => ({
+      block: 'heading',
-      src: tok.attrGet("src"),
+      getAttrs: tok => ({ level: +tok.tag.slice(1) }),
-      title: tok.attrGet("title") || null,
+    },
-      alt: tok.children[0] && tok.children[0].content || null,
+    code_block: { block: 'code_block' },
-    })},
+    fence: {
-    hardbreak: {node: "hard_break"},
+      block: 'code_block',
+      getAttrs: tok => ({ params: tok.info || '' }),
+    },
+    hr: { node: 'horizontal_rule' },
+    image: {
+      node: 'image',
+      getAttrs: tok => ({
+        src: tok.attrGet('src'),
+        title: tok.attrGet('title') || null,
+        alt: (tok.children[0] && tok.children[0].content) || null,
+      }),
+    },
+    hardbreak: { node: 'hard_break' },
 
-    em: {mark: "em"},
+    em: { mark: 'em' },
-    strong: {mark: "strong"},
+    strong: { mark: 'strong' },
-    mark: {mark: "mark"},
+    mark: { mark: 'mark' },
-    link: {mark: "link", getAttrs: tok => ({
+    s: { mark: 'strikethrough' },
-      href: tok.attrGet("href"),
+    link: {
-      title: tok.attrGet("title") || null
+      mark: 'link',
-    })},
+      getAttrs: tok => ({
-    code_inline: {mark: "code"},
+        href: tok.attrGet('href'),
+        title: tok.attrGet('title') || null,
+      }),
+    },
+    code_inline: { mark: 'code' },
   },
 )

app/javascript/packs/schema.js

@@ -1,11 +1,15 @@
-import {schema as defaultMarkdownSchema, defaultMarkdownParser} from "prosemirror-markdown"
+import { schema as defaultMarkdownSchema } from 'prosemirror-markdown'
-import {Schema} from "prosemirror-model"
+import { Schema } from 'prosemirror-model'
 
 export default new Schema({
   nodes: defaultMarkdownSchema.spec.nodes,
-  marks: defaultMarkdownSchema.spec.marks.addBefore('text', 'mark', {
+  marks: defaultMarkdownSchema.spec.marks
+    .addBefore('text', 'mark', {
       toDOM: node => ['mark'],
       parseDOM: [{ tag: 'mark' }],
+    })
+    .addBefore('text', 'strikethrough', {
+      toDOM: node => ['s'],
+      parseDOM: [{ tag: 's' }],
     }),
 })
-

app/javascript/packs/serializer.js

@@ -1,36 +1,37 @@
 // From https://raw.githubusercontent.com/ProseMirror/prosemirror-markdown/master/src/to_markdown.js
-import {MarkdownSerializer} from "prosemirror-markdown"
+import { MarkdownSerializer } from 'prosemirror-markdown'
 
-export default new MarkdownSerializer({
+export default new MarkdownSerializer(
+  {
     blockquote(state, node) {
-    state.wrapBlock("> ", null, node, () => state.renderContent(node))
+      state.wrapBlock('> ', null, node, () => state.renderContent(node))
     },
     code_block(state, node) {
-    state.write("```" + (node.attrs.params || "") + "\n")
+      state.write('```' + (node.attrs.params || '') + '\n')
       state.text(node.textContent, false)
       state.ensureNewLine()
-    state.write("```")
+      state.write('```')
       state.closeBlock(node)
     },
     heading(state, node) {
-    state.write(state.repeat("#", node.attrs.level) + " ")
+      state.write(state.repeat('#', node.attrs.level) + ' ')
       state.renderInline(node)
       state.closeBlock(node)
     },
     horizontal_rule(state, node) {
-    state.write(node.attrs.markup || "---")
+      state.write(node.attrs.markup || '---')
       state.closeBlock(node)
     },
     bullet_list(state, node) {
-    state.renderList(node, "  ", () => (node.attrs.bullet || "*") + " ")
+      state.renderList(node, '  ', () => (node.attrs.bullet || '*') + ' ')
     },
     ordered_list(state, node) {
       let start = node.attrs.order || 1
       let maxW = String(start + node.childCount - 1).length
-    let space = state.repeat(" ", maxW + 2)
+      let space = state.repeat(' ', maxW + 2)
       state.renderList(node, space, i => {
         let nStr = String(start + i)
-      return state.repeat(" ", maxW - nStr.length) + nStr + ". "
+        return state.repeat(' ', maxW - nStr.length) + nStr + '. '
       })
     },
     list_item(state, node) {
@@ -42,33 +43,72 @@ export default new MarkdownSerializer({
     },
 
     image(state, node) {
-    state.write("![" + state.esc(node.attrs.alt || "") + "](" + state.esc(node.attrs.src) +
+      state.write(
-                (node.attrs.title ? " " + state.quote(node.attrs.title) : "") + ")")
+        '![' +
+          state.esc(node.attrs.alt || '') +
+          '](' +
+          state.esc(node.attrs.src) +
+          (node.attrs.title ? ' ' + state.quote(node.attrs.title) : '') +
+          ')',
+      )
     },
     hard_break(state, node, parent, index) {
       for (let i = index + 1; i < parent.childCount; i++)
         if (parent.child(i).type != node.type) {
-        state.write("\\\n")
+          state.write('\\\n')
           return
         }
     },
     text(state, node) {
       state.text(node.text)
-  }
+    },
-}, {
+  },
-  em: {open: "*", close: "*", mixable: true, expelEnclosingWhitespace: true},
+  {
-  strong: {open: "**", close: "**", mixable: true, expelEnclosingWhitespace: true},
+    em: {
-  mark: {open: "==", close: "==", mixable: true, expelEnclosingWhitespace: true},
+      open: '*',
+      close: '*',
+      mixable: true,
+      expelEnclosingWhitespace: true,
+    },
+    strong: {
+      open: '**',
+      close: '**',
+      mixable: true,
+      expelEnclosingWhitespace: true,
+    },
+    mark: {
+      open: '==',
+      close: '==',
+      mixable: true,
+      expelEnclosingWhitespace: true,
+    },
+    strikethrough: {
+      open: '~~',
+      close: '~~',
+      mixable: true,
+      expelEnclosingWhitespace: true,
+    },
     link: {
       open(_state, mark, parent, index) {
-      return isPlainURL(mark, parent, index, 1) ? "<" : "["
+        return isPlainURL(mark, parent, index, 1) ? '<' : '['
       },
       close(state, mark, parent, index) {
-      return isPlainURL(mark, parent, index, -1) ? ">"
+        return isPlainURL(mark, parent, index, -1)
-        : "](" + state.esc(mark.attrs.href) + (mark.attrs.title ? " " + state.quote(mark.attrs.title) : "") + ")"
+          ? '>'
-    }
+          : '](' +
+              state.esc(mark.attrs.href) +
+              (mark.attrs.title ? ' ' + state.quote(mark.attrs.title) : '') +
+              ')'
       },
-  code: {open(_state, _mark, parent, index) { return backticksFor(parent.child(index), -1) },
+    },
-         close(_state, _mark, parent, index) { return backticksFor(parent.child(index - 1), 1) },
+    code: {
-         escape: false}
+      open(_state, _mark, parent, index) {
-})
+        return backticksFor(parent.child(index), -1)
+      },
+      close(_state, _mark, parent, index) {
+        return backticksFor(parent.child(index - 1), 1)
+      },
+      escape: false,
+    },
+  },
+)

app/views/application/_editor.haml

@@ -3,6 +3,7 @@
     %button.bold-btn= "bold"
     %button.italic-btn= "italic"
     %button.highlight-btn= "highlight"
+    %button.strikethrough-btn= "strikethrough"
     %button.quote-btn= "quote"
     %button.ul-btn= "ul"
     %button.ol-btn= "ol"