Merge pull request #46 from NextStepWebs/development

Restructure to use gulp.js, Value improvements, Fix bugs

.gitignore

@@ -1 +1,2 @@
 localtesting/*
+node_modules/

README.md

@@ -61,6 +61,7 @@ simplemde.value();
 - **lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`.
 - **indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`.
 - **tabSize**: If set, customize the tab size. Defaults to `2`.
+- **initialValue**: If set, will customize the initial value of the editor.
 - **spellChecker**: If set to `false`, disable the spell checker. Defaults to `true`.
 - **autosave**: *Saves the text that's being written. It will forget the text when the form is submitted.*
   - **enabled**: If set to `true`, autosave the text. Defaults to `false`.
@@ -73,10 +74,14 @@ var simplemde = new SimpleMDE({
 	status: false,
 	status: ['autosave', 'lines', 'words', 'cursor'], // Optional usage
 	toolbar: false,
+	toolbarTips: false,
+	toolbarGuideIcon: false,
 	autofocus: true,
 	lineWrapping: false,
 	indentWithTabs: false,
 	tabSize: 4,
+	initialValue: "Hello world!",
+	spellChecker: false,
 	autosave: {
 		enabled: true,
 		unique_id: "MyUniqueID",

gulpfile.js

@@ -0,0 +1,48 @@
+var gulp = require('gulp'),
+	minifycss = require('gulp-minify-css'),
+	uglify = require('gulp-uglify'),
+	concat = require('gulp-concat'),
+	header = require('gulp-header'),
+	pkg = require('./package.json');
+
+var banner = ['/**',
+	' * <%= pkg.name %> v<%= pkg.version %>',
+	' * Copyright <%= pkg.company %>',
+	' * @link <%= pkg.homepage %>',
+	' * @license <%= pkg.license %>',
+	' */',
+	''].join('\n');
+
+gulp.task('scripts', function() {
+	var js_files = [
+		'./src/js/codemirror/codemirror.js',
+		'./src/js/codemirror/continuelist.js',
+		'./src/js/codemirror/fullscreen.js',
+		'./src/js/codemirror/markdown.js',
+		'./src/js/codemirror/overlay.js',
+		'./src/js/codemirror/gfm.js',
+		'./src/js/codemirror/xml.js',
+		'./src/js/typo.js',
+		'./src/js/spell-checker.js',
+		'./src/js/marked.js',
+		'./src/js/simplemde.js'];
+
+	return gulp.src(js_files)
+		.pipe(header(banner, {pkg: pkg}))
+		.pipe(concat('simplemde.min.js'))
+		.pipe(gulp.dest('dist'))
+		.pipe(uglify())
+		.pipe(header(banner, {pkg: pkg}))
+		.pipe(gulp.dest('dist'));
+});
+
+gulp.task('styles', function() {
+	return gulp.src('./src/css/*.css')
+		.pipe(concat('simplemde.min.css'))
+		.pipe(gulp.dest('dist'))
+		.pipe(minifycss())
+		.pipe(header(banner, {pkg: pkg}))
+		.pipe(gulp.dest('dist'));
+});
+
+gulp.task('default', ['scripts', 'styles']);

package.json

@@ -0,0 +1,28 @@
+{
+	"name": "simplemde",
+	"version": "1.5.1",
+	"description": "A simple, beautiful, and embeddable JavaScript markdown editor. Features autosaving and spell checking.",
+	"keywords": ["embeddable", "markdown", "editor", "javascript", "wysiwyg"],
+	"homepage": "https://github.com/NextStepWebs/simplemde-markdown-editor",
+	"main": "gulpfile.js",
+	"license": "MIT",
+	"company": "Next Step Webs, Inc.",
+	"author": {
+		"name": "Wes Cossick",
+		"url": "http://www.WesCossick.com"
+	},
+	"bugs": {
+		"url": "https://github.com/NextStepWebs/simplemde-markdown-editor/issues"
+	},
+	"dependencies": {
+		"gulp": "*",
+		"gulp-minify-css": "*",
+		"gulp-uglify": "*",
+		"gulp-concat": "*",
+		"gulp-header": "*"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/NextStepWebs/simplemde-markdown-editor"
+	}
+}

source files/README.md

@@ -1,20 +0,0 @@
-# How to compile
-Minify the JS in this order:
-
-1. `codemirror/codemirror.js`
-1. `codemirror/continuelist.js`
-1. `codemirror/fullscreen.js`
-1. `codemirror/markdown.js`
-1. `codemirror/overlay.js`
-1. `codemirror/gfm.js`
-1. `codemirror/xml.js`
-1. `typo/typo.js`
-1. `spell-checker/spell-checker.js`
-1. `marked.js`
-1. `simplemde.js`
-
-Minify the CSS in this order:
-
-1. `codemirror/codemirror.css`
-1. `simplemde.css`
-1. `spell-checker/spell-checker.css`

src/css/simplemde.css

@@ -65,6 +65,7 @@
 	top: 0;
 	left: 0;
 	opacity: 1;
+	z-index: 9;
 }
 
 .editor-toolbar a {

src/js/codemirror/fullscreen.js

@@ -27,7 +27,7 @@
 	wrap.style.height = "auto";
 	wrap.className += " CodeMirror-fullscreen";
 	document.documentElement.style.overflow = "hidden";
-	document.getElementsByClassName("editor-toolbar")[0].className += " fullscreen";
+	wrap.previousSibling.className += " fullscreen";
 	cm.refresh();
   }
 
@@ -38,7 +38,7 @@
 	var info = cm.state.fullScreenRestore;
 	wrap.style.width = info.width; wrap.style.height = info.height;
 	window.scrollTo(info.scrollLeft, info.scrollTop);
-	document.getElementsByClassName("editor-toolbar")[0].className = document.getElementsByClassName("editor-toolbar")[0].className.replace(/\s*fullscreen\b/, "");
+	wrap.previousSibling.className = wrap.previousSibling.className.replace(/\s*fullscreen\b/, "");
 	cm.refresh();
   }
 });

src/js/simplemde.js

@@ -101,8 +101,7 @@ function toggleFullScreen(editor) {
 
 	if(!/active/.test(toolbarButton.className)) {
 		toolbarButton.className += " active";
-	}
-	else {
+	} else {
 		toolbarButton.className = toolbarButton.className.replace(/\s*active\s*/g, '');
 	}
 }
@@ -211,11 +210,11 @@ function redo(editor) {
  * Preview action.
  */
 function togglePreview(editor) {
-	var toolbar_div = document.getElementsByClassName('editor-toolbar')[0];
-	var toolbar = editor.toolbarElements.preview;
-	var parse = editor.constructor.markdown;
 	var cm = editor.codemirror;
 	var wrapper = cm.getWrapperElement();
+	var toolbar_div = wrapper.previousSibling;
+	var toolbar = editor.toolbarElements.preview;
+	var parse = editor.constructor.markdown;
 	var preview = wrapper.lastChild;
 	if(!/editor-preview/.test(preview.className)) {
 		preview = document.createElement('div');
@@ -390,59 +389,50 @@ var toolbar = [{
 		action: toggleBold,
 		className: "fa fa-bold",
 		title: "Bold (Ctrl+B)",
-	},
-	{
+	}, {
 		name: "italic",
 		action: toggleItalic,
 		className: "fa fa-italic",
 		title: "Italic (Ctrl+I)",
 	},
-	"|",
-	{
+	"|", {
 		name: "quote",
 		action: toggleBlockquote,
 		className: "fa fa-quote-left",
 		title: "Quote (Ctrl+')",
-	},
-	{
+	}, {
 		name: "unordered-list",
 		action: toggleUnorderedList,
 		className: "fa fa-list-ul",
 		title: "Generic List (Ctrl+L)",
-	},
-	{
+	}, {
 		name: "ordered-list",
 		action: toggleOrderedList,
 		className: "fa fa-list-ol",
 		title: "Numbered List (Ctrl+Alt+L)",
 	},
-	"|",
-	{
+	"|", {
 		name: "link",
 		action: drawLink,
 		className: "fa fa-link",
 		title: "Create Link (Ctrl+K)",
-	},
-	{
+	}, {
 		name: "quote",
 		action: drawImage,
 		className: "fa fa-picture-o",
 		title: "Insert Image (Ctrl+Alt+I)",
 	},
-	"|",
-	{
+	"|", {
 		name: "preview",
 		action: togglePreview,
 		className: "fa fa-eye",
 		title: "Toggle Preview (Ctrl+P)",
-	},
-	{
+	}, {
 		name: "fullscreen",
 		action: toggleFullScreen,
 		className: "fa fa-arrows-alt",
 		title: "Toggle Fullscreen (F11)",
-	},
-	{
+	}, {
 		name: "guide",
 		action: "http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide",
 		className: "fa fa-question-circle",
@@ -471,6 +461,13 @@ function SimpleMDE(options) {
 
 	// If user has passed an element, it should auto rendered
 	this.render();
+
+	// The codemirror component is only available after rendering
+	// so, the setter for the initialValue can only run after
+	// the element has been rendered
+	if(options.initialValue) {
+		this.value(options.initialValue);
+	}
 }
 
 /**
@@ -724,11 +721,11 @@ SimpleMDE.prototype.createStatusbar = function(status) {
  * Get or set the text content.
  */
 SimpleMDE.prototype.value = function(val) {
-	if (val) {
+	if(val === undefined) {
+		return this.codemirror.getValue();
+	} else {
 		this.codemirror.getDoc().setValue(val);
 		return this;
-	} else {
-		return this.codemirror.getValue();
 	}
 };