chore: Improvements for editor text styling (#3)

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "arrowParens": "avoid"
+}

package.json

@@ -26,7 +26,9 @@
     "prosemirror-history": "^1.1.3",
     "prosemirror-inputrules": "^1.1.3",
     "prosemirror-keymap": "^1.1.4",
+    "prosemirror-markdown": "1.5.1",
     "prosemirror-menu": "^1.1.4",
+    "prosemirror-model": "^1.1.0",
     "prosemirror-schema-list": "^1.1.4",
     "prosemirror-state": "^1.3.3",
     "prosemirror-view": "^1.17.2"

src/index.js

@@ -11,6 +11,13 @@ import { buildKeymap } from './keymap';
 import { buildInputRules } from './inputrules';
 import Placeholder from './Placeholder';
 
+export { EditorState } from 'prosemirror-state';
+export { EditorView } from 'prosemirror-view';
+export {
+  defaultMarkdownParser,
+  defaultMarkdownSerializer,
+} from 'prosemirror-markdown';
+
 export { buildMenuItems, buildKeymap, buildInputRules };
 
 // !! This module exports helper functions for deriving a set of basic

src/mentions/plugin.js

@@ -0,0 +1,136 @@
+/**
+ * This file is a modified version of prosemirror-suggestions
+ * https://github.com/quartzy/prosemirror-suggestions/blob/master/src/suggestions.js
+ */
+
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+
+export const triggerCharacters = char => $position => {
+  const regexp = new RegExp(`(?:^)?${char}[^\\s${char}]*`, 'g');
+
+  const textFrom = $position.before();
+  const textTo = $position.end();
+
+  const text = $position.doc.textBetween(textFrom, textTo, '\0', '\0');
+
+  let match;
+
+  // eslint-disable-next-line
+  while ((match = regexp.exec(text))) {
+    const prefix = match.input.slice(Math.max(0, match.index - 1), match.index);
+    if (!/^[\s\0]?$/.test(prefix)) {
+      // eslint-disable-next-line
+      continue;
+    }
+
+    const from = match.index + $position.start();
+    let to = from + match[0].length;
+
+    if (from < $position.pos && to >= $position.pos) {
+      return { range: { from, to }, text: match[0] };
+    }
+  }
+  return null;
+};
+
+export const suggestionsPlugin = ({
+  matcher,
+  suggestionClass = 'prosemirror-mention-node',
+  onEnter = () => false,
+  onChange = () => false,
+  onExit = () => false,
+  onKeyDown = () => false,
+}) => {
+  return new Plugin({
+    key: new PluginKey('mentions'),
+
+    view() {
+      return {
+        update: (view, prevState) => {
+          const prev = this.key.getState(prevState);
+          const next = this.key.getState(view.state);
+
+          const moved =
+            prev.active && next.active && prev.range.from !== next.range.from;
+          const started = !prev.active && next.active;
+          const stopped = prev.active && !next.active;
+          const changed = !started && !stopped && prev.text !== next.text;
+
+          if (stopped || moved)
+            onExit({ view, range: prev.range, text: prev.text });
+          if (changed && !moved)
+            onChange({ view, range: next.range, text: next.text });
+          if (started || moved)
+            onEnter({ view, range: next.range, text: next.text });
+        },
+      };
+    },
+
+    state: {
+      init() {
+        return {
+          active: false,
+          range: {},
+          text: null,
+        };
+      },
+
+      apply(tr, prev) {
+        const { selection } = tr;
+        const next = { ...prev };
+
+        if (selection.from === selection.to) {
+          if (
+            selection.from < prev.range.from ||
+            selection.from > prev.range.to
+          ) {
+            next.active = false;
+          }
+
+          const $position = selection.$from;
+          const match = matcher($position);
+
+          if (match) {
+            next.active = true;
+            next.range = match.range;
+            next.text = match.text;
+          } else {
+            next.active = false;
+          }
+        } else {
+          next.active = false;
+        }
+
+        if (!next.active) {
+          next.range = {};
+          next.text = null;
+        }
+
+        return next;
+      },
+    },
+
+    props: {
+      handleKeyDown(view, event) {
+        const { active } = this.getState(view.state);
+
+        if (!active) return false;
+
+        return onKeyDown({ view, event });
+      },
+      decorations(editorState) {
+        const { active, range } = this.getState(editorState);
+
+        if (!active) return null;
+
+        return DecorationSet.create(editorState.doc, [
+          Decoration.inline(range.from, range.to, {
+            nodeName: 'span',
+            class: suggestionClass,
+          }),
+        ]);
+      },
+    },
+  });
+};

src/mentions/schema.js

@@ -0,0 +1,72 @@
+import {
+  schema,
+  MarkdownParser,
+  MarkdownSerializer,
+} from 'prosemirror-markdown';
+
+import { Schema } from 'prosemirror-model';
+
+const mentionParser = () => ({
+  node: 'mention',
+  getAttrs: ({ mention }) => {
+    const { userId, userFullName } = mention;
+    return { userId, userFullName };
+  },
+});
+
+const markdownSerializer = () => (state, node) => {
+  const uri = state.esc(
+    `mention://user/${node.attrs.userId}/${encodeURIComponent(node.attrs.userFullName)}`
+  );
+  const escapedDisplayName = state.esc('@' + (node.attrs.userFullName || ''));
+
+  state.write(`[${escapedDisplayName}](${uri})`);
+};
+
+export const addMentionsToMarkdownSerializer = serializer =>
+  new MarkdownSerializer(
+    { mention: markdownSerializer(), ...serializer.nodes },
+    serializer.marks
+  );
+
+const mentionNode = {
+  attrs: { userFullName: { default: '' }, userId: { default: '' } },
+  group: 'inline',
+  inline: true,
+  selectable: true,
+  draggable: true,
+  atom: true,
+  toDOM: node => [
+    'span',
+    {
+      class: 'prosemirror-mention-node',
+      'mention-user-id': node.attrs.userId,
+      'mention-user-full-name': node.attrs.userFullName,
+    },
+    `@${node.attrs.userFullName}`,
+  ],
+  parseDOM: [
+    {
+      tag: 'span[mention-user-id][mention-user-full-name]',
+      getAttrs: dom => {
+        const userId = dom.getAttribute('mention-user-id');
+        const userFullName = dom.getAttribute('mention-user-full-name');
+        return { userId, userFullName };
+      },
+    },
+  ],
+};
+
+const addMentionNodes = nodes => nodes.append({ mention: mentionNode });
+
+export const schemaWithMentions = new Schema({
+  nodes: addMentionNodes(schema.spec.nodes),
+  marks: schema.spec.marks,
+});
+
+export const addMentionsToMarkdownParser = parser => {
+  return new MarkdownParser(schemaWithMentions, parser.tokenizer, {
+    ...parser.tokens,
+    mention: mentionParser(),
+  });
+};

src/woot-editor.css

@@ -148,7 +148,7 @@ li.ProseMirror-selectednode:after {
 
 .ProseMirror ul,
 .ProseMirror ol {
-    padding-left: 30px;
+    padding-left: 16px;
 }
 
 .ProseMirror blockquote {
@@ -232,7 +232,7 @@ li.ProseMirror-selectednode:after {
 }
 
 .ProseMirror p {
-    margin-bottom: 1em;
+    margin-bottom: 8px;
 }
 
 .ProseMirror .empty-node::before {

yarn.lock

@@ -0,0 +1,178 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+crelt@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.5.tgz#57c0d52af8c859e354bace1883eb2e1eb182bb94"
+  integrity sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==
+
+entities@~2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.3.tgz#5c487e5742ab93c15abb5da22759b8590ec03b7f"
+  integrity sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==
+
+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"
+
+markdown-it@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-10.0.0.tgz#abfc64f141b1722d663402044e43927f1f50a8dc"
+  integrity sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==
+  dependencies:
+    argparse "^1.0.7"
+    entities "~2.0.0"
+    linkify-it "^2.0.0"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
+
+orderedmap@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-1.1.1.tgz#c618e77611b3b21d0fe3edc92586265e0059c789"
+  integrity sha512-3Ux8um0zXbVacKUkcytc0u3HgC0b0bBLT+I60r2J/En72cI0nZffqrA7Xtf2Hqs27j1g82llR5Mhbd0Z1XW4AQ==
+
+prosemirror-commands@^1.0.0, prosemirror-commands@^1.1.4:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.1.8.tgz#61aec59ac101b7990ec59726199f2a31ef0cd8ca"
+  integrity sha512-EIj/WAlrK2rVugxNxsFG6pI4430RL63ka2QKB9dO7vvStsLO//nq/oMjmd3VXp08+QNrmmLE23utqBUZwbS9Jg==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-dropcursor@^1.3.2:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/prosemirror-dropcursor/-/prosemirror-dropcursor-1.3.5.tgz#d2808c17089df0e441ad66016aecc2b6457c8a1f"
+  integrity sha512-tNUwcF2lPAkwKBZPZRtbxpwljnODRNZ3eiYloN1DSUqDjMT1nBZm0nejaEMS1TvNQ+3amibUSAiV4hX+jpASFA==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+    prosemirror-view "^1.1.0"
+
+prosemirror-gapcursor@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.1.5.tgz#0c37fd6cbb1d7c46358c2e7397f8da9a8b5c6246"
+  integrity sha512-SjbUZq5pgsBDuV3hu8GqgIpZR5eZvGLM+gPQTqjVVYSMUCfKW3EGXTEYaLHEl1bGduwqNC95O3bZflgtAb4L6w==
+  dependencies:
+    prosemirror-keymap "^1.0.0"
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-view "^1.0.0"
+
+prosemirror-history@^1.0.0, prosemirror-history@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-history/-/prosemirror-history-1.1.3.tgz#4f76a1e71db4ef7cdf0e13dec6d8da2aeaecd489"
+  integrity sha512-zGDotijea+vnfnyyUGyiy1wfOQhf0B/b6zYcCouBV8yo6JmrE9X23M5q7Nf/nATywEZbgRLG70R4DmfSTC+gfg==
+  dependencies:
+    prosemirror-state "^1.2.2"
+    prosemirror-transform "^1.0.0"
+    rope-sequence "^1.3.0"
+
+prosemirror-inputrules@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-inputrules/-/prosemirror-inputrules-1.1.3.tgz#93f9199ca02473259c30d7e352e4c14022d54638"
+  integrity sha512-ZaHCLyBtvbyIHv0f5p6boQTIJjlD6o2NPZiEaZWT2DA+j591zS29QQEMT4lBqwcLW3qRSf7ZvoKNbf05YrsStw==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.1.4.tgz#8b481bf8389a5ac40d38dbd67ec3da2c7eac6a6d"
+  integrity sha512-Al8cVUOnDFL4gcI5IDlG6xbZ0aOD/i3B17VT+1JbHWDguCgt/lBHVTHUBcKvvbSg6+q/W4Nj1Fu6bwZSca3xjg==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    w3c-keyname "^2.2.0"
+
+prosemirror-markdown@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-markdown/-/prosemirror-markdown-1.5.1.tgz#877c7faea2225d3c52e988599bbe4457bcb3190f"
+  integrity sha512-QvucPHx+gKOQW1SETKUysrful9VBjKqpCFmPotgLfVZ3BdQEGy/NEIFhaXXo3TcuW316MMnKfA90K7GE5I7z8A==
+  dependencies:
+    markdown-it "^10.0.0"
+    prosemirror-model "^1.0.0"
+
+prosemirror-menu@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-menu/-/prosemirror-menu-1.1.4.tgz#a845ae0e14ce1f92dd39d7f23caa6063265cd98c"
+  integrity sha512-2ROsji/X9ciDnVSRvSTqFygI34GEdHfQSsK4zBKjPxSEroeiHHcdRMS1ofNIf2zM0Vpp5/YqfpxynElymQkqzg==
+  dependencies:
+    crelt "^1.0.0"
+    prosemirror-commands "^1.0.0"
+    prosemirror-history "^1.0.0"
+    prosemirror-state "^1.0.0"
+
+prosemirror-model@^1.0.0, prosemirror-model@^1.1.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.14.1.tgz#d784c67f95a5d66b853e82ff9a87a50353ef9cd5"
+  integrity sha512-vZcbI+24VloFefKZkDnMaEpipL/vSKKPdFiik4KOnTzq3e6AO7+CAOixZ2G/SsfRaYC965XvnOIEbhIQdgki7w==
+  dependencies:
+    orderedmap "^1.1.0"
+
+prosemirror-schema-list@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.1.4.tgz#471f9caf2d2bed93641d2e490434c0d2d4330df1"
+  integrity sha512-pNTuZflacFOBlxrTcWSdWhjoB8BaucwfJVp/gJNxztOwaN3wQiC65axclXyplf6TKgXD/EkWfS/QAov3/Znadw==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.3:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.3.4.tgz#4c6b52628216e753fc901c6d2bfd84ce109e8952"
+  integrity sha512-Xkkrpd1y/TQ6HKzN3agsQIGRcLckUMA9u3j207L04mt8ToRgpGeyhbVv0HI7omDORIBHjR29b7AwlATFFf2GLA==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.3.2.tgz#5620ebe7379e6fae4f34ecc881886cb22ce96579"
+  integrity sha512-/G6d/u9Mf6Bv3H1XR8VxhpjmUO75LYmnvj+s3ZfZpakU1hnQbsvCEybml1B3f2IWUAAQRFkbO1PnsbFhLZsYsw==
+  dependencies:
+    prosemirror-model "^1.0.0"
+
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.17.2:
+  version "1.18.7"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.18.7.tgz#d9843337a1649f532401589899b724e7e87e83c0"
+  integrity sha512-pUCxoyuWnbVfJ/ukhQ+7+bfDMArG3wu6hHnnTFi61C7Teb5OILUhkkhEhF2/RsppBFWrkwsNcf8rQm8SSoSKRg==
+  dependencies:
+    prosemirror-model "^1.1.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+
+rope-sequence@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/rope-sequence/-/rope-sequence-1.3.2.tgz#a19e02d72991ca71feb6b5f8a91154e48e3c098b"
+  integrity sha512-ku6MFrwEVSVmXLvy3dYph3LAMNS0890K7fabn+0YIRQ2T96T9F4gkFf0vf0WW0JUraNWwGRtInEpH7yO4tbQZg==
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
+
+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==
+
+w3c-keyname@^2.2.0:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.4.tgz#4ade6916f6290224cdbd1db8ac49eab03d0eef6b"
+  integrity sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==