working newlines, link shortcut

prose/markdownParser.js

@@ -53,5 +53,5 @@ export const writeAsMarkdownParser = new MarkdownParser(
         return {};
       },
     },
-    },
+  }
 );

prose/markdownSerializer.js

@@ -47,10 +47,6 @@ export const writeAsMarkdownSerializer = new MarkdownSerializer(
       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 || "*"} `);
     },
@@ -75,13 +71,13 @@ export const writeAsMarkdownSerializer = new MarkdownSerializer(
       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");
+          state.write("\\\n");
           return;
         }
     },
@@ -123,5 +119,5 @@ export const writeAsMarkdownSerializer = new MarkdownSerializer(
       },
       escape: false,
     },
-  },
+  }
 );

prose/menu.js

@@ -4,23 +4,29 @@ import { buildMenuItems } from "prosemirror-example-setup";
 import { writeFreelySchema } from "./schema";
 
 function canInsert(state, nodeType, attrs) {
-    let $from = state.selection.$from
+  let $from = state.selection.$from;
   for (let d = $from.depth; d >= 0; d--) {
-      let index = $from.index(d)
+    let index = $from.index(d);
-      if ($from.node(d).canReplaceWith(index, index, nodeType, attrs)) return true
+    if ($from.node(d).canReplaceWith(index, index, nodeType, attrs))
+      return true;
   }
-    return false
+  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()))
+    dispatch(
+      state.tr.replaceSelectionWith(writeFreelySchema.nodes.readmore.create())
+    );
   },
 });
 
 export const getMenu = () => {
-    const menuContent = [...buildMenuItems(writeFreelySchema).fullMenu, [ReadMoreItem]];
+  const menuContent = [
-    return menuContent
+    ...buildMenuItems(writeFreelySchema).fullMenu,
-}
+    [ReadMoreItem],
+  ];
+  return menuContent;
+};

prose/prose.html

@@ -6,5 +6,9 @@
 <!--   <label>&nbsp;<input type=radio name=inputformat value=prosemirror checked> WYSIWYM</label> -->
 <!-- </div> -->
 
-<div style="display: none"><textarea id="content">This is a comment written in [Markdown](http://commonmark.org). *You* may know the syntax for inserting a link, but does your whole audience?&#13;&#13;So you can give people the **choice** to use a more familiar, discoverable interface.</textarea></div>
+<div style="display: none">
+  <textarea id="content">
+This is a comment written in [Markdown](http://commonmark.org). *You* may know the syntax for inserting a link, but does your whole audience?&#13;&#13;So you can give people the **choice** to use a more familiar, discoverable interface.</textarea
+  >
+</div>
 <script src="dist/prose.bundle.js"></script>

prose/prose.js

@@ -9,28 +9,28 @@
 //   destroy() { this.textarea.remove() }
 // }
 
-import { EditorView } from "prosemirror-view"
+import { EditorView } from "prosemirror-view";
-import { EditorState } from "prosemirror-state"
+import { EditorState, TextSelection } from "prosemirror-state";
-import { exampleSetup } from "prosemirror-example-setup"
+import { exampleSetup } from "prosemirror-example-setup";
 import { keymap } from "prosemirror-keymap";
 
-import { writeAsMarkdownParser } from "./markdownParser"
+import { writeAsMarkdownParser } from "./markdownParser";
-import { writeAsMarkdownSerializer } from "./markdownSerializer"
+import { writeAsMarkdownSerializer } from "./markdownSerializer";
-import { writeFreelySchema } from "./schema"
+import { writeFreelySchema } from "./schema";
-import { getMenu } from "./menu"
+import { getMenu } from "./menu";
 
-let $title = document.querySelector('#title')
+let $title = document.querySelector("#title");
-let $content = document.querySelector('#content')
+let $content = document.querySelector("#content");
+
+// Bugs:
+// 1. When there's just an empty line and a hard break is inserted with shift-enter then two enters are inserted 
+// which do not show up in the markdown ( maybe bc. they are training enters )
 
 class ProseMirrorView {
   constructor(target, content) {
-        this.view = new EditorView(target, {
-            state: EditorState.create({
-                doc: function (content) {
-                    // console.log('loading '+window.draftKey)
     let localDraft = localStorage.getItem(window.draftKey);
     if (localDraft != null) {
-                        content = localDraft
+      content = localDraft;
     }
     if (content.indexOf("# ") === 0) {
       let eol = content.indexOf("\n");
@@ -38,8 +38,15 @@ class ProseMirrorView {
       content = content.substring(eol + "\n\n".length);
       $title.value = title;
     }
-                    return writeAsMarkdownParser.parse(content)
+
-                }(content),
+    const doc = writeAsMarkdownParser.parse(
+      // Replace all "solo" \n's with \\\n for correct markdown parsing
+      content.replaceAll(/(?<!\n)\n(?!\n)/g, "\\\n")
+    );
+
+    this.view = new EditorView(target, {
+      state: EditorState.create({
+        doc,
         plugins: [
           keymap({
             "Mod-Enter": () => {
@@ -47,51 +54,56 @@ class ProseMirrorView {
               return true;
             },
             "Mod-k": () => {
-                            console.log("TODO-link");
+              const linkButton = document.querySelector(".ProseMirror-icon[title='Add or remove link']")
+              linkButton.dispatchEvent(new Event('mousedown'));
               return true;
-                        }
+            },
           }),
-                    ...exampleSetup({ schema: writeFreelySchema, menuContent: getMenu() }),
+          ...exampleSetup({
-
+            schema: writeFreelySchema,
-                ]
+            menuContent: getMenu(),
+          }),
+        ],
       }),
       dispatchTransaction(transaction) {
-                // console.log('saving to '+window.draftKey)
+        const newContent = writeAsMarkdownSerializer
-                const newContent = writeAsMarkdownSerializer.serialize(transaction.doc)
+          .serialize(transaction.doc)
-                console.log({newContent})
+          // Replace all \\\ns ( not followed by a \n ) with \n
-                $content.value = newContent
+          .replaceAll(/\\\n(?!\n)/g, "\n");
-                localStorage.setItem(window.draftKey, function () {
+        $content.value = newContent;
         let draft = "";
         if ($title.value != null && $title.value !== "") {
-                        draft = "# " + $title.value + "\n\n"
+          draft = "# " + $title.value + "\n\n";
         }
-                    draft += $content.value
+        draft += newContent;
-                    return draft
+        localStorage.setItem(window.draftKey, draft);
-                }());
+        let newState = this.state.apply(transaction);
-                let newState = this.state.apply(transaction)
+        this.updateState(newState);
-                this.updateState(newState)
+      },
-            }
+    });
-        })
+    // Editor is focused to the last position. This is a workaround for a bug:
+    // 1. 1 type something in an existing entry
+    // 2. reload - works fine, the draft is reloaded
+    // 3. reload again - the draft is somehow removed from localStorage and the original content is loaded
+    // When the editor is focused the content is re-saved to localStorage
+
+    // This is also useful for editing, so it's not a bad thing even
+    const lastPosition = this.view.state.doc.content.size;
+    const selection = TextSelection.create(this.view.state.doc, lastPosition);
+    this.view.dispatch(this.view.state.tr.setSelection(selection));
+    this.view.focus();
   }
 
   get content() {
-        return defaultMarkdownSerializer.serialize(this.view.state.doc)
+    return defaultMarkdownSerializer.serialize(this.view.state.doc);
+  }
+  focus() {
+    this.view.focus();
+  }
+  destroy() {
+    this.view.destroy();
   }
-    focus() { this.view.focus() }
-    destroy() { this.view.destroy() }
 }
 
-let place = document.querySelector("#editor")
+let place = document.querySelector("#editor");
-let view = new ProseMirrorView(place, $content.value)
+let view = new ProseMirrorView(place, $content.value);
-
-// document.querySelectorAll("input[type=radio]").forEach(button => {
-//   button.addEventListener("change", () => {
-//     if (!button.checked) return
-//     let View = button.value == "markdown" ? MarkdownView : ProseMirrorView
-//     if (view instanceof View) return
-//     let content = view.content
-//     view.destroy()
-//     view = new View(place, content)
-//     view.focus()
-//   })
-// })

prose/schema.js

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