Removed unnecessary schema nodes, custom markdown parser/serializer, publish keyboard shortcut, readmore node

less/install-less.sh

@@ -2,7 +2,7 @@
 
 # Install Less via npm
 if [ ! -e "$(which lessc)" ]; then
-	sudo npm install -g less
+	sudo npm install -g less@3.5.3
 	sudo npm install -g less-plugin-clean-css
 else
     echo LESS $(npm view less version 2>&1 | grep -v WARN) is installed

prose/markdownParser.js

@@ -0,0 +1,58 @@
+import { MarkdownParser } from "prosemirror-markdown";
+import markdownit from "markdown-it";
+
+import { writeFreelySchema } from "./schema";
+
+export const writeAsMarkdownParser = new MarkdownParser(
+    writeFreelySchema,
+    markdownit("commonmark", { html: true }),
+    {
+        // blockquote: { block: "blockquote" },
+        paragraph: { block: "paragraph" },
+        list_item: { block: "list_item" },
+        bullet_list: { block: "bullet_list" },
+        ordered_list: {
+            block: "ordered_list",
+            getAttrs: (tok) => ({ order: +tok.attrGet("start") || 1 }),
+        },
+        heading: {
+            block: "heading",
+            getAttrs: (tok) => ({ level: +tok.tag.slice(1) }),
+        },
+        code_block: { block: "code_block", noCloseToken: true },
+        fence: {
+            block: "code_block",
+            getAttrs: (tok) => ({ params: tok.info || "" }),
+            noCloseToken: true,
+        },
+        // hr: { node: "horizontal_rule" },
+        image: {
+            node: "image",
+            getAttrs: (tok) => ({
+                src: tok.attrGet("src"),
+                title: tok.attrGet("title") || null,
+                alt: tok.children?.[0].content || null,
+            }),
+        },
+        // hardbreak: { node: "hard_break" },
+
+        em: { mark: "em" },
+        strong: { mark: "strong" },
+        link: {
+            mark: "link",
+            getAttrs: (tok) => ({
+                href: tok.attrGet("href"),
+                title: tok.attrGet("title") || null,
+            }),
+        },
+        code_inline: { mark: "code", noCloseToken: true },
+        html_block: {
+            node: "readmore",
+            getAttrs(token) {
+                console.log({ token });
+                // TODO: Give different attributes depending on the token content
+                return {};
+            },
+        },
+    },
+);

prose/markdownSerializer.js

@@ -0,0 +1,127 @@
+import { MarkdownSerializer } from "prosemirror-markdown";
+
+function backticksFor(node, side) {
+  const ticks = /`+/g;
+  let m;
+  let len = 0;
+  if (node.isText)
+    while ((m = ticks.exec(node.text))) len = Math.max(len, m[0].length);
+  let result = len > 0 && side > 0 ? " `" : "`";
+  for (let i = 0; i < len; i++) result += "`";
+  if (len > 0 && side < 0) result += " ";
+  return result;
+}
+
+function isPlainURL(link, parent, index, side) {
+  if (link.attrs.title || !/^\w+:/.test(link.attrs.href)) return false;
+  const content = parent.child(index + (side < 0 ? -1 : 0));
+  if (
+    !content.isText ||
+    content.text != link.attrs.href ||
+    content.marks[content.marks.length - 1] != link
+  )
+    return false;
+  if (index == (side < 0 ? 1 : parent.childCount - 1)) return true;
+  const next = parent.child(index + (side < 0 ? -2 : 1));
+  return !link.isInSet(next.marks);
+}
+
+export const writeAsMarkdownSerializer = new MarkdownSerializer(
+  {
+    readmore(state, node) {
+      state.write("<!--more-->");
+      state.closeBlock(node);
+    },
+    // blockquote(state, node) {
+    //   state.wrapBlock("> ", undefined, node, () => state.renderContent(node));
+    // },
+    code_block(state, node) {
+      state.write(`\`\`\`${node.attrs.params || ""}\n`);
+      state.text(node.textContent, false);
+      state.ensureNewLine();
+      state.write("```");
+      state.closeBlock(node);
+    },
+    heading(state, node) {
+      state.write(`${state.repeat("#", node.attrs.level)} `);
+      state.renderInline(node);
+      state.closeBlock(node);
+    },
+    // horizontal_rule(state, node) {
+    //   state.write(node.attrs.markup || "---");
+    //   state.closeBlock(node);
+    // },
+    bullet_list(state, node) {
+      state.renderList(node, "  ", () => `${node.attrs.bullet || "*"} `);
+    },
+    ordered_list(state, node) {
+      const start = node.attrs.order || 1;
+      const maxW = String(start + node.childCount - 1).length;
+      const space = state.repeat(" ", maxW + 2);
+      state.renderList(node, space, (i) => {
+        const nStr = String(start + i);
+        return `${state.repeat(" ", maxW - nStr.length) + nStr}. `;
+      });
+    },
+    list_item(state, node) {
+      state.renderContent(node);
+    },
+    paragraph(state, node) {
+      state.renderInline(node);
+      state.closeBlock(node);
+    },
+
+    image(state, node) {
+      state.write(
+        `![${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 += 1)
+    //     if (parent.child(i).type !== node.type) {
+    //       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,
+    },
+    link: {
+      open(_state, mark, parent, index) {
+        return isPlainURL(mark, parent, index, 1) ? "<" : "[";
+      },
+      close(state, mark, parent, index) {
+        return isPlainURL(mark, parent, index, -1)
+          ? ">"
+          : `](${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);
+      },
+      escape: false,
+    },
+  },
+);

prose/menu.js

@@ -0,0 +1,26 @@
+import { MenuItem } from "prosemirror-menu";
+import { buildMenuItems } from "prosemirror-example-setup";
+
+import { writeFreelySchema } from "./schema";
+
+function canInsert(state, nodeType, attrs) {
+    let $from = state.selection.$from
+    for (let d = $from.depth; d >= 0; d--) {
+      let index = $from.index(d)
+      if ($from.node(d).canReplaceWith(index, index, nodeType, attrs)) return true
+    }
+    return false
+  }
+
+const ReadMoreItem = new MenuItem({
+    label: "Read more",
+    select: (state) => canInsert(state, writeFreelySchema.nodes.readmore),
+    run(state, dispatch) {
+        dispatch(state.tr.replaceSelectionWith(writeFreelySchema.nodes.readmore.create()))
+    },
+});
+
+export const getMenu = ()=> {
+    const menuContent = [...buildMenuItems(writeFreelySchema).fullMenu, [ReadMoreItem]];
+    return menuContent
+}

prose/package-lock.json

@@ -2821,12 +2821,9 @@
       "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
     },
     "argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "requires": {
-        "sprintf-js": "~1.0.2"
-      }
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "arr-diff": {
       "version": "4.0.0",
@@ -4165,9 +4162,9 @@
       }
     },
     "entities": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
-      "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+      "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w=="
     },
     "errno": {
       "version": "0.1.7",
@@ -5444,9 +5441,9 @@
       }
     },
     "linkify-it": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
-      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.2.tgz",
+      "integrity": "sha512-gDBO4aHNZS6coiZCKVhSNh43F9ioIL4JwRjLZPkoLIY4yZFwg264Y5lu2x6rb1Js42Gh6Yqm2f6L2AJcnkzinQ==",
       "requires": {
         "uc.micro": "^1.0.1"
       }
@@ -5532,13 +5529,13 @@
       }
     },
     "markdown-it": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz",
-      "integrity": "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==",
+      "version": "12.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.0.4.tgz",
+      "integrity": "sha512-34RwOXZT8kyuOJy25oJNJoulO8L0bTHYWXcdZBYZqFnjIy3NgjeoM3FmPXIOFQ26/lSHYMr8oc62B6adxXcb3Q==",
       "requires": {
-        "argparse": "^1.0.7",
-        "entities": "~2.0.0",
-        "linkify-it": "^2.0.0",
+        "argparse": "^2.0.1",
+        "entities": "~2.1.0",
+        "linkify-it": "^3.0.1",
         "mdurl": "^1.0.1",
         "uc.micro": "^1.0.5"
       }
@@ -6120,9 +6117,9 @@
       }
     },
     "prosemirror-keymap": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.1.3.tgz",
-      "integrity": "sha512-PRA4NzkUMzV/NFf5pyQ6tmlIHiW/qjQ1kGWUlV2rF/dvlOxtpGpTEjIMhWgLuMf+HiDEFnUEP7uhYXu+t+491g==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.1.4.tgz",
+      "integrity": "sha512-Al8cVUOnDFL4gcI5IDlG6xbZ0aOD/i3B17VT+1JbHWDguCgt/lBHVTHUBcKvvbSg6+q/W4Nj1Fu6bwZSca3xjg==",
       "requires": {
         "prosemirror-state": "^1.0.0",
         "w3c-keyname": "^2.2.0"
@@ -6135,6 +6132,41 @@
       "requires": {
         "markdown-it": "^10.0.0",
         "prosemirror-model": "^1.0.0"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "1.0.10",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+          "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+          "requires": {
+            "sprintf-js": "~1.0.2"
+          }
+        },
+        "entities": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
+          "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
+        },
+        "linkify-it": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
+          "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+          "requires": {
+            "uc.micro": "^1.0.1"
+          }
+        },
+        "markdown-it": {
+          "version": "10.0.0",
+          "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz",
+          "integrity": "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==",
+          "requires": {
+            "argparse": "^1.0.7",
+            "entities": "~2.0.0",
+            "linkify-it": "^2.0.0",
+            "mdurl": "^1.0.1",
+            "uc.micro": "^1.0.5"
+          }
+        }
       }
     },
     "prosemirror-menu": {
@@ -7138,9 +7170,9 @@
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
     },
     "w3c-keyname": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.2.tgz",
-      "integrity": "sha512-8Vs/aVwcy0IJACaPm4tyzh1fzehZE70bGSjEl3dDms5UXtWnaBElrSHC8lDDeak0Gk5jxKOFstL64/65o7Ge2A=="
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz",
+      "integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw=="
     },
     "watchpack": {
       "version": "1.6.0",

prose/package.json

@@ -6,7 +6,9 @@
   "dependencies": {
     "babel-core": "^6.26.3",
     "babel-preset-es2015": "^6.24.1",
+    "markdown-it": "^12.0.4",
     "prosemirror-example-setup": "^1.1.2",
+    "prosemirror-keymap": "^1.1.4",
     "prosemirror-markdown": "^1.4.4",
     "prosemirror-model": "^1.9.1",
     "prosemirror-state": "^1.3.2",

prose/prose.js

@@ -9,10 +9,15 @@
 //   destroy() { this.textarea.remove() }
 // }
 
-import {EditorView} from "prosemirror-view"
-import {EditorState} from "prosemirror-state"
-import {schema, defaultMarkdownParser, defaultMarkdownSerializer} from "prosemirror-markdown"
-import {exampleSetup} from "prosemirror-example-setup"
+import { EditorView } from "prosemirror-view"
+import { EditorState } from "prosemirror-state"
+import { exampleSetup } from "prosemirror-example-setup"
+import { keymap } from "prosemirror-keymap";
+
+import { writeAsMarkdownParser } from "./markdownParser"
+import { writeAsMarkdownSerializer } from "./markdownSerializer"
+import { writeFreelySchema } from "./schema"
+import { getMenu } from "./menu"
 
 let $title = document.querySelector('#title')
 let $content = document.querySelector('#content')
@@ -21,7 +26,7 @@ class ProseMirrorView {
     constructor(target, content) {
         this.view = new EditorView(target, {
             state: EditorState.create({
-                doc: function(content) {
+                doc: function (content) {
                     // console.log('loading '+window.draftKey)
                     let localDraft = localStorage.getItem(window.draftKey);
                     if (localDraft != null) {
@@ -30,20 +35,35 @@ class ProseMirrorView {
                     if (content.indexOf("# ") === 0) {
                         let eol = content.indexOf("\n");
                         let title = content.substring("# ".length, eol);
-                        content = content.substring(eol+"\n\n".length);
+                        content = content.substring(eol + "\n\n".length);
                         $title.value = title;
                     }
-                    return defaultMarkdownParser.parse(content)
+                    return writeAsMarkdownParser.parse(content)
                 }(content),
-                plugins: exampleSetup({schema})
+                plugins: [
+                    keymap({
+                        "Mod-Enter": () => {
+                            document.getElementById("publish").click();
+                            return true;
+                        },
+                        "Mod-k": ()=> {
+                            console.log("TODO-link");
+                            return true;
+                        }
+                    }),
+                    ...exampleSetup({ schema: writeFreelySchema, menuContent: getMenu() }),
+
+                ]
             }),
             dispatchTransaction(transaction) {
                 // console.log('saving to '+window.draftKey)
-                $content.value = defaultMarkdownSerializer.serialize(transaction.doc)
-                localStorage.setItem(window.draftKey, function() {
+                const newContent = writeAsMarkdownSerializer.serialize(transaction.doc)
+                $content.value = newContent
+                console.log({ newContent })
+                localStorage.setItem(window.draftKey, function () {
                     let draft = "";
                     if ($title.value != null && $title.value !== "") {
-                        draft = "# "+$title.value+"\n\n"
+                        draft = "# " + $title.value + "\n\n"
                     }
                     draft += $content.value
                     return draft

prose/schema.js

@@ -0,0 +1,19 @@
+import { schema } from "prosemirror-markdown"
+import { Schema } from "prosemirror-model";
+
+export const writeFreelySchema = new Schema({
+    nodes: schema.spec.nodes.remove("blockquote")
+        .remove("horizontal_rule")
+        .remove("hard_break")
+        .addToEnd("readmore", {
+            inline: false,
+            content: "",
+            group: "block",
+            draggable: true,
+            toDOM: (node) => ["div", { class: "editorreadmore", style: "width: 100%;text-align:center" }, "Read more..."],
+            parseDOM: [{ tag: "div.editorreadmore" }],
+        }),
+    marks: schema.spec.marks,
+});
+
+console.log({ writeFreelySchema })