making the image button of the editor actually add all the info needed, and made the images clickable for the full size

8 years ago · ab6152cbfa
parent 5897b6874d
commit ab6152cbfa
10 changed files with 18922 additions and 17728 deletions
--- a/assets/bindata.go
+++ b/assets/bindata.go
--- a/assets/simplemde/debug/simplemde.css
+++ b/assets/simplemde/debug/simplemde.css
@ -94,8 +94,14 @@

 .cm-tab { display: inline-block; text-decoration: inherit; }

+.CodeMirror-rulers {
+  position: absolute;
+  left: 0; right: 0; top: -50px; bottom: -20px;
+  overflow: hidden;
+}
 .CodeMirror-ruler {
  border-left: 1px solid #ccc;
+  top: 0; bottom: 0;
  position: absolute;
 }

@ -206,9 +212,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
  display: inline-block;
  vertical-align: top;
  margin-bottom: -30px;
-  /* Hack to make IE7 behave */
-  *zoom:1;
-  *display:inline;
 }
 .CodeMirror-gutter-wrapper {
  position: absolute;
@ -226,11 +229,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
  cursor: default;
  z-index: 4;
 }
-.CodeMirror-gutter-wrapper {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
+.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
+.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }

 .CodeMirror-lines {
  cursor: text;
@ -252,8 +252,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
-  -webkit-font-variant-ligatures: none;
-  font-variant-ligatures: none;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
 }
 .CodeMirror-wrap pre {
  word-wrap: break-word;
@ -275,6 +275,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}

 .CodeMirror-widget {}

+.CodeMirror-rtl pre { direction: rtl; }
+
 .CodeMirror-code {
  outline: none;
 }
@ -297,7 +299,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
  visibility: hidden;
 }

-.CodeMirror-cursor { position: absolute; }
+.CodeMirror-cursor {
+  position: absolute;
+  pointer-events: none;
+}
 .CodeMirror-measure pre { position: static; }

 div.CodeMirror-cursors {
@ -324,9 +329,6 @@ div.CodeMirror-dragcursors {
  background: rgba(255, 255, 0, .4);
 }

-/* IE7 hack to prevent it from returning funny offsetTops on the spans */
-.CodeMirror span { *vertical-align: text-bottom; }
-
 /* Used to force a border model for a node */
 .cm-force-border { padding-right: .1px; }

--- a/assets/simplemde/debug/simplemde.debug.js
+++ b/assets/simplemde/debug/simplemde.debug.js
--- a/assets/simplemde/debug/simplemde.js
+++ b/assets/simplemde/debug/simplemde.js
--- a/assets/simplemde/dist/simplemde.min.css
+++ b/assets/simplemde/dist/simplemde.min.css
--- a/assets/simplemde/dist/simplemde.min.js
+++ b/assets/simplemde/dist/simplemde.min.js
--- a/assets/simplemde/gulpfile.js
+++ b/assets/simplemde/gulpfile.js
@ -47,7 +47,7 @@ function taskBrowserify(opts) {
 		.bundle();
 }

-gulp.task("browserify:debug", ["lint"], function() {
+gulp.task("browserify:debug", [], function() {
 	return taskBrowserify({debug:true, standalone:"SimpleMDE"})
 		.pipe(source("simplemde.debug.js"))
 		.pipe(buffer())
@ -55,7 +55,7 @@ gulp.task("browserify:debug", ["lint"], function() {
 		.pipe(gulp.dest("./debug/"));
 });

-gulp.task("browserify", ["lint"], function() {
+gulp.task("browserify", [], function() {
 	return taskBrowserify({standalone:"SimpleMDE"})
 		.pipe(source("simplemde.js"))
 		.pipe(buffer())
@ -63,7 +63,7 @@ gulp.task("browserify", ["lint"], function() {
 		.pipe(gulp.dest("./debug/"));
 });

-gulp.task("scripts", ["browserify:debug", "browserify", "lint"], function() {
+gulp.task("scripts", ["browserify:debug", "browserify"], function() {
 	var js_files = ["./debug/simplemde.js"];
 	
 	return gulp.src(js_files)
--- a/assets/simplemde/src/js/simplemde.js
+++ b/assets/simplemde/src/js/simplemde.js
@ -635,12 +635,15 @@ function drawImage(editor) {
 	var stat = getState(cm);
 	var options = editor.options;
 	var url = "http://";
-	if(options.promptURLs) {
+	if(options.imageURLFn) {
+		url = options.imageURLFn();
+	} else if(options.promptURLs) {
 		url = prompt(options.promptTexts.image);
+	}
+
 	if(!url) {
 		return false;
 	}
-	}
 	_replaceSelection(cm, stat.image, options.insertTexts.image, url);
 }

--- a/media.go
+++ b/media.go
@ -245,7 +245,7 @@ func (ch *CaddyHugo) serveMediaPage(w http.ResponseWriter, r *http.Request) (int
 	<head><style>
 	iframe { height: 100%; }
 	.img { display: inline-block; text-align: center; max-width: 19.9vw; min-height: 120px;}
-	.img.selected { background-color: light-blue; }
+	.img.selected { background-color: lightblue; }
 	.copy { cursor: pointer; }
 	@media (max-width: 800px) {
 		.img {
@ -279,7 +279,7 @@ func (ch *CaddyHugo) serveMediaPage(w http.ResponseWriter, r *http.Request) (int
 				fmt.Fprintf(w, `<div class="img">error rendering %q: %v</div>`, m.Name, err)
 				continue
 			}
-			fmt.Fprintf(w, `<div class="img"><img width=%d height=%d src=%q /><br /><input type="text" readonly value=%q /><span class="copy">&#x1F4CB;</span></div>`, size.Dx(), size.Dy(), src, src)
+			fmt.Fprintf(w, `<div class="img"><img width=%d height=%d src=%q data-filename=%q /><br /><input type="text" readonly value=%q /><span class="copy">&#x1F4CB;</span></div>`, size.Dx(), size.Dy(), src, m.Name, src)
 		}
 	}
 	io.WriteString(w, `<script>
@ -297,6 +297,9 @@ func (ch *CaddyHugo) serveMediaPage(w http.ResponseWriter, r *http.Request) (int
 				current.classList = "img";
 			}
 			evt.target.parentElement.classList = "img selected";
+			if (window.parent) {
+				window.parent.postMessage(evt.target.dataset.filename, location.origin);
+			}
 		}
 	}
 	document.querySelector('body').onmouseup = function (evt) {
--- a/templates.go
+++ b/templates.go
@ -216,8 +216,22 @@ a {
 	 }
    }

+    var selectedImage;
    var editorElem = document.getElementById("editor");
-    var editor = new SimpleMDE({element: editorElem, forceSync: true});
+    var editor = new SimpleMDE({
+	    element: editorElem,
+	    forceSync: true,
+	    insertTexts: {
+		    image: ["{\{% thumb filename=\"", "#url#\" width=\"200\" %}}"]
+	    },
+	    imageURLFn: function () {
+		    return selectedImage;
+	    }
+    });
+
+    window.onmessage = function (evt) {
+	    selectedImage = evt.data;
+    }


    // Create WebSocket connection.