This repository has been archived by the owner on Mar 30, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
markdown.html
91 lines (83 loc) · 2.9 KB
/
markdown.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<textarea id="editor"></textarea>
<script>
var isDisabled = false;
var editorInstance = null;
function updateDisabled(disabled) {
isDisabled = disabled;
if (editorInstance && editorInstance.codemirror) {
var elements = $('.editor-toolbar');
editorInstance.codemirror.options.readOnly = isDisabled;
if (disabled) {
elements.hide();
}
else {
elements.show();
}
}
}
function initialize(value) {
if (!editorInstance) {
editorInstance = new SimpleMDE({
element: document.getElementById('editor'),
hideIcons: ["fullscreen", "guide", "side-by-side"],
spellChecker: false,
status: ["lines", "words"],
});
}
editorInstance.value(value || '');
var editorChangeHandler;
editorInstance.codemirror.on('change', function () {
if (editorChangeHandler) {
clearTimeout(editorChangeHandler);
}
editorChangeHandler = setTimeout(function () {
setValue(editorInstance.value());
}, 100);
setTimeout(updateSize, 0);
});
window.addEventListener('resize', updateSize);
}
function updateSize() {
var height = Math.ceil($("html").height());
CustomElement.setHeight(height);
}
function setValue(value) {
if (!isDisabled) {
CustomElement.setValue(value || null);
}
}
// Set initial empty value
initialize('');
// Load custom element js api and init the custom element
var apiUrl = new URLSearchParams(window.location.search).get('apiUrl');
if (!apiUrl) {
throw Error('apiUrl query parameter is missing. Example: https://dev-draft.global.ssl.fastly.net/js-api/custom-element/v1/custom-element.min.js');
}
$.getScript(apiUrl, () => {
CustomElement.init((el, _ctx) => {
initialize(el.value);
updateDisabled(el.disabled);
});
CustomElement.onDisabledChanged((disabled) => {
updateDisabled(disabled);
});
updateSize();
})
</script>
</body>
</html>