Initial commit

.gitignore

@@ -0,0 +1,6 @@
+node_modules
+*.log
+.DS_Store
+/index.js
+/index.umd.js
+/dist

.npmignore

@@ -0,0 +1 @@
+/src

README.md

@@ -0,0 +1,17 @@
+# vue-prosemirror
+
+> A simple Vue.js wrapper around the ProseMirror editor
+
+## Install
+
+```js
+$ npm install vue-prosemirror --save
+```
+
+## Usage
+
+Coming soon...
+
+## Development
+
+Coming soon...

example/app.vue

@@ -0,0 +1,40 @@
+<template>
+  <textarea @keyup="syncToEditor">{{ editorDisplayVal }}</textarea>
+  <prosemirror :content="editorVal" :on-change="editorChanged" menu-type="tooltip"></prosemirror>
+</template>
+<script>
+  import VueProseMirror from "../";
+  export default {
+    name: "app",
+    data(){
+      return {
+        editorVal: "",
+        editorDisplayVal: ""
+      }
+    },
+    ready(){
+      console.log("Ready!")
+    },
+    methods: {
+      editorChanged(raw, rendered){
+        this.editorDisplayVal = raw;
+        console.log(rendered)
+      },
+      syncToEditor($event){
+        this.editorVal = $event.target.value;
+      }
+    },
+    components: {
+      prosemirror: VueProseMirror
+    }
+  }
+</script>
+<style>
+.vueProseMirror .ProseMirror .ProseMirror-content{
+  width: 500px;
+  margin: 50px auto;
+  border: 1px solid #eee;
+  outline: none;
+  padding: 10px;
+}
+</style>

example/index.js

@@ -0,0 +1,6 @@
+import Vue from "vue";
+import app from "./app";
+new Vue({
+  el: "body",
+  components: { app }
+})

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "vue-prosemirror",
+  "version": "0.1.0",
+  "description": "A simple Vue.js wrapper around the ProseMirror editor",
+  "license": "MIT",
+  "repository": "syropian/vue-prosemirror",
+  "author": {
+    "name": "Collin Henderson",
+    "email": "collin@syropia.net",
+    "url": "http://syropia.net"
+  },
+  "engines": {
+    "node": ">=4"
+  },
+  "scripts": {
+    "build:all": "npm run build && npm run build:umd",
+    "build": "BUILD_ENV=cjs rollup -c",
+    "build:umd": "BUILD_ENV=umd rollup -c",
+    "example": "vbuild --dev -e example",
+    "example:build": "vbuild -e example -t VueProseMirror"
+  },
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "index.umd.js"
+  ],
+  "keywords": [
+    "prosemirror",
+    "editor",
+    "markdown",
+    "Vue"
+  ],
+  "dependencies": {
+    "prosemirror": "^0.8.3"
+  },
+  "devDependencies": {
+    "babel-preset-es2015-rollup": "^1.1.1",
+    "rollup": "^0.33.0",
+    "rollup-plugin-babel": "^2.6.1",
+    "rollup-plugin-vue": "^2.0.1"
+  }
+}

rollup.config.js

@@ -0,0 +1,16 @@
+import { rollup } from "rollup"
+import babel from "rollup-plugin-babel"
+import vue from "rollup-plugin-vue";
+
+const env = process.env.BUILD_ENV
+const dest = env === "cjs" ? "index.js" : "index.umd.js"
+
+export default {
+  entry: "./src/index.vue",
+  dest,
+  plugins: [
+    vue()
+  ],
+  format: env,
+  moduleName: "VueProseMirror"
+}

src/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="vueProseMirror"></div>
+</template>
+<script>
+  import prosemirror from "prosemirror";
+  import { schema } from "prosemirror/dist/schema-basic";
+  import { defaultMarkdownParser, defaultMarkdownSerializer } from "prosemirror/dist/markdown";
+  import { exampleSetup, buildMenuItems } from "prosemirror/dist/example-setup";
+  import { tooltipMenu, menuBar } from "prosemirror/dist/menu";
+  export default {
+    name: "ProseMirror",
+    props: {
+      content: String,
+      onChange: Function,
+      menuType: {
+        type: String,
+        default: "bar"
+      },
+      options: Object
+    },
+    data(){
+      return {
+        editor: null
+      }
+    },
+    computed: {
+      rawMarkdown(){
+        return defaultMarkdownSerializer.serialize(this.editor.doc)
+      },
+      renderedContent(){
+        let docFrag = this.editor.doc.content.toDOM();
+        let div = document.createElement("div");
+        div.appendChild( docFrag.cloneNode(true) );
+        return div.innerHTML;
+      }
+    },
+    ready(){
+      const editorOptions = Object.assign({
+        schema,
+        place: this.el,
+        doc: defaultMarkdownParser.parse(this.content),
+        plugins: [exampleSetup.config({menuBar: false, tooltipMenu: false})]
+      }, this.options);
+
+      if (editorOptions.doc === undefined || editorOptions.doc === null) {
+        editorOptions.doc = null;
+        editorOptions.docFormat = null;
+      }
+
+      this.editor = new prosemirror.ProseMirror(editorOptions);
+
+      let menu = buildMenuItems(schema);
+      if (this.menuType === "bar") {
+        tooltipMenu.detach(this.editor);
+        menuBar.config({float: true, content: menu.fullMenu}).attach(this.editor);
+      }
+      else {
+        menuBar.detach(this.editor);
+        tooltipMenu.config({
+          selectedBlockMenu: true,
+          inlineContent: menu.inlineMenu,
+          blockContent: menu.blockMenu
+        }).attach(this.editor);
+      }
+
+      this.editor.on.change.add( () => {
+        if( this.onChange && typeof this.onChange === "function" ){
+          this.onChange.apply(null, [this.rawMarkdown, this.renderedContent])
+        }
+      });
+
+      this.$watch("content", (val) => {
+        this.editor.setDoc(defaultMarkdownParser.parse(val));
+      });
+    }
+  }
+</script>