Skip to content

Commit f2d7dc3

Browse files
author
burton
committed
the context menu system actually works well..
1 parent 34d646d commit f2d7dc3

File tree

14 files changed

+479
-31
lines changed

14 files changed

+479
-31
lines changed

‎TODO.md‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@
88

99
# Release (for myself)
1010

11+
## Required editor functionality
12+
13+
- paste images / screenshots from clipboard and save as data URL.
14+
- https://stackoverflow.com/questions/28644340/how-do-i-get-base64-encoded-image-from-clipboard-in-internet-explorer
15+
- https://matthewmoisen.com/blog/paste-js-example/
16+
17+
- I can detect the paste, then convert what's pasted to a data URL, then change
18+
the CSS it so that the user doesn't need to deal with the full thing.
19+
1120
## Next
1221

1322
- ability to right click and 'add flashcard' to an annotation and enter the data
@@ -99,7 +108,6 @@
99108

100109
# Development productivity
101110

102-
- get node.js testing working
103111

104112
- get webapp testing working
105113

@@ -133,3 +141,7 @@
133141
from chrome to polar.
134142

135143
- change REMOVE to ERASE to avoid confusion with 'read'
144+
145+
146+
147+

‎docs/MARKDOWN_EDITOR.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
2+
# Editor.md
3+
4+
Definitely works in the browser...
5+
6+
http://localhost:63342/polar-bookshelf/editor.md/examples/use-requirejs.html?_ijt=42focdo4mf4dkoauntsuhrdo8i
7+
8+
# SimpleMD
9+
10+
- I cna listen to the generated HTML ...
11+
12+
13+
var sideBySideRenderingFunction = function() {
14+
preview.innerHTML = editor.options.previewRender(editor.value(), preview);
15+
};
16+
17+
if(!cm.sideBySideRenderingFunction) {
18+
cm.sideBySideRenderingFunction = sideBySideRenderingFunction;
19+
}
20+
21+
if(useSideBySideListener) {
22+
preview.innerHTML = editor.options.previewRender(editor.value(), preview);
23+
cm.on("update", cm.sideBySideRenderingFunction);
24+
} else {
25+
cm.off("update", cm.sideBySideRenderingFunction);
26+
}
27+
28+
// Refresh to fix selection being off (#309)
29+
cm.refresh();

‎package-lock.json‎

Lines changed: 19 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,8 @@
6464
"font-awesome": "^4.7.0",
6565
"fontawesome": "^4.7.2",
6666
"jquery": "^3.3.1",
67+
"jquery-contextmenu": "^2.6.4",
68+
"jquery.flowchart": "^1.1.0",
6769
"keccak": "^1.4.0",
6870
"markdown-plus": "^2.5.2",
6971
"marked": "^0.4.0",

‎sandbox/editormd/editormd.html‎

Whitespace-only changes.

‎sandbox/editormd/editormd.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
require("marked");
2+
require("prettify");
3+
require("raphael");
4+
require("underscore");
5+
//require("flowchart");
6+
require("jquery.flowchart");
7+
8+
//require('editormd');
9+
10+
//
11+
// jquery : "../examples/js/jquery.min",
12+
// marked : "marked.min",
13+
// prettify : "prettify.min",
14+
// raphael : "raphael.min",
15+
// underscore : "underscore.min",
16+
// flowchart : "flowchart.min",
17+
// jqueryflowchart : "jquery.flowchart.min",
18+
// sequenceDiagram : "sequence-diagram.min",
19+
// katex : "//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min",
20+
// editormd : "../editormd.amd" // Using Editor.md amd version for Require.js

‎sandbox/editormd/editormd.js.olde‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
const $ = require('jquery')
2+
jQuery = $;
3+
//const bootstrap = require('bootstrap');
4+
const featherlight = require('featherlight');
5+
6+
// FIXME: this is not working for soem reason and I ahve NO ideawhy.. module.exports is setup properly.
7+
8+
const SimpleMDE = require("simplemde");
9+
//const SimpleMDE = require("../../node_modules/simplemde/src/js/simplemde.js");
10+
11+
// require("marked");
12+
// require("prettify");
13+
// require("raphael");
14+
// require("underscore");
15+
//require("flowchart");
16+
17+
//require('editormd');
18+
//
19+
// jquery : "../examples/js/jquery.min",
20+
// marked : "marked.min",
21+
// prettify : "prettify.min",
22+
// raphael : "raphael.min",
23+
// underscore : "underscore.min",
24+
// flowchart : "flowchart.min",
25+
// jqueryflowchart : "jquery.flowchart.min",
26+
// sequenceDiagram : "sequence-diagram.min",
27+
// katex : "//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min",
28+
// editormd : "../editormd.amd" // Using Editor.md amd version for Require.js
29+
30+
31+
function createElementHTML(innerHTML) {
32+
33+
let div = document.createElement("div");
34+
div.innerHTML = innerHTML;
35+
36+
return div;
37+
38+
}
39+
40+
function createModal2() {
41+
42+
let innerHTML = `<div id="mylightbox" class="polar-lightbox" style="">
43+
<div id="editor-content">
44+
<textarea id="editor" autofocus># this is markdown</textarea>
45+
</div>
46+
</div>
47+
`;
48+
49+
let element = createElementHTML(innerHTML);
50+
51+
$(element).show();
52+
document.body.appendChild(element);
53+
54+
let editor = document.getElementById("editor");
55+
56+
if (! editor)
57+
throw new Error("No editor element");
58+
59+
console.log("Setting up simplemde");
60+
61+
// TODO: why no spell checker?
62+
let simplemde = new SimpleMDE({ editor, spellChecker: false });
63+
simplemde.value();
64+
65+
editor.focus();
66+
67+
};
68+
69+
function createModal() {
70+
71+
let innerHTML = `<div id="mylightbox" class="polar-lightbox">
72+
73+
<div class="modal-header">
74+
Create Flashcard
75+
</div>
76+
77+
<div id="editor-content">
78+
<textarea id="editor" autofocus># this is markdown</textarea>
79+
</div>
80+
81+
<div class="modal-footer">
82+
<button>Save</button>
83+
</div>
84+
85+
</div>
86+
`;
87+
88+
let lightbox = createElementHTML(innerHTML);
89+
90+
$.featherlight($(lightbox).show());
91+
92+
let editor = document.querySelector("#editor");
93+
94+
if (! editor)
95+
throw new Error("No editor element");
96+
97+
console.log("Setting up simplemde");
98+
99+
// TODO: why no spell checker?
100+
let simplemde = new SimpleMDE({ editor, spellChecker: false });
101+
simplemde.toggleSideBySide(editor);
102+
simplemde.value();
103+
104+
}
105+
106+
107+
function doLoad() {
108+
109+
console.log("FIXME1");
110+
document.getElementById("open-button").addEventListener("click", createModal);
111+
112+
}
113+
114+
115+
if (document.readyState === "complete" || document.readyState === "loaded" || document.readyState === "interactive") {
116+
console.log("Already completed loading.");
117+
doLoad();
118+
} else {
119+
console.log("Waiting for DOM content to load");
120+
document.addEventListener('DOMContentLoaded', doLoad, true);
121+
}
122+
//
123+
// window.setTimeout(function () {
124+
// console.log("FIXME2: SimpleMDE: ", SimpleMDE);
125+
//
126+
// }, 2500);
127+

‎sandbox/jquery-contextmenu/contextmenu-bundle.js‎

Lines changed: 122 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sandbox/jquery-contextmenu/contextmenu.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html>
2+
3+
<head>
4+
<link rel="stylesheet" href="../../node_modules/jquery-contextmenu/dist/jquery.contextMenu.min.css">
5+
<script src="contextmenu-bundle.js"></script>
6+
</head>
7+
<body>
8+
9+
<span class="context-menu-one btn btn-neutral">right click me</span>
10+
11+
</body>
12+
</html>

‎sandbox/jquery-contextmenu/contextmenu.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const $ = require("jquery");
2+
const jcm = require("jquery-contextmenu");
3+
4+
$(document).ready(function() {
5+
$(function() {
6+
$.contextMenu({
7+
selector: '.context-menu-one',
8+
callback: function(key, options) {
9+
let m = "clicked: " + key;
10+
window.console && console.log(m) || alert(m);
11+
},
12+
items: {
13+
"edit": {name: "Edit", icon: "edit"},
14+
"cut": {name: "Cut", icon: "cut"},
15+
copy: {name: "Copy", icon: "copy"},
16+
"paste": {name: "Paste", icon: "paste"},
17+
"delete": {name: "Delete", icon: "delete"},
18+
"sep1": "---------",
19+
"quit": {name: "Quit", icon: function(){
20+
return 'context-menu-icon context-menu-icon-quit';
21+
}}
22+
}
23+
});
24+
25+
$('.context-menu-one').on('click', function(e){
26+
console.log('clicked', this);
27+
})
28+
});
29+
30+
console.log("initialized");
31+
32+
});

0 commit comments

Comments
 (0)