-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample_ESM.html
105 lines (86 loc) · 3.61 KB
/
example_ESM.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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<!--
Visual Markdown Viewer with Graphics Support
Author: @deftio
Uses Markdown-it for parsing Markdown content, Highlight.js for syntax highlighting, and Mermaid for diagrams.
Allows live editing of Markdown content with a split view of the rendered HTML output.
Also supports Mermaid diagrams and SVG content within fenced code blocks.
-->
<head>
<meta charset="UTF-8" />
<title>SquibView Editor with Live Render Support</title>
<link rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14' fill='%23f57c00' stroke='%23000' stroke-width='1'/><path d='M2 16h28M16 2a14 14 0 0114 14 14 14 0 01-14 14 14 14 0 01-14-14A14 14 0 0116 2zm0 0v28M9 16a7 7 0 0014 0 7 7 0 00-14 0z' fill='none' stroke='%23000' stroke-width='1'/></svg>">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<link rel="stylesheet" href="../dist/squibview.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 1% 4%;
height: 100vh;
display: flex;
flex-direction: column;
}
#editorContainer {
margin-top: 0.5em;
min-height: 0;
/* Important for Firefox */
height: 90vh;
display: flex;
flex-direction: column;
/* border : 1px solid lightgrey; */
border-radius: 5px;
}
.error-icon {
display: none;
}
text.error-text {
display: none;
}
</style>
</head>
<body>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.3.2/markdown-it.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
<!--
<div id="testControls">
<button onclick="toggleTitle()" style="margin-right: 10px; padding: 8px 16px; border-radius: 4px; border: 1px solid #2a57d3; background: white; color: #2a57d3; cursor: pointer;">Toggle Title</button>
<button onclick="toggleControls()" style="padding: 8px 16px; border-radius: 4px; border: 1px solid #2a57d3; background: white; color: #2a57d3; cursor: pointer;">Toggle Controls</button>
<button onclick="toggleView()" style="padding: 8px 16px; border-radius: 4px; border: 1px solid #2a57d3; background: white; color: #2a57d3; cursor: pointer;">Toggle View</button>
<hr>
</div>
-->
<div id="editorContainer"></div>
<script type="module">
import SquibView from '../dist/squibview.esm.min.js';
window.SquibView = SquibView; // user can access SquibView from the console
// This is the main code that creates the editor and sets the content
// it has nothing to do with the GraphicalMD editor
const editor = new SquibView('#editorContainer', {
titleShow: true,
titleContent: "SquibView Editor (ESM Example) " + SquibView.version.version
});
window.editor = editor; // Make the editor instance accessible globally
(async filename => {
try {
editor.setContent(await (await fetch(filename)).text(), "md");
} catch (error) {
console.error("Failed to load Markdown:", error);
}
})("./sample-content.md");
// external test functions for playing around with the editor
function toggleTitle() {
const currentState = editor.title.style.display !== 'none';
editor.titleShow(!currentState);
}
function toggleControls() {
const currentState = editor.controls.style.display !== 'none';
editor.controlsShow(!currentState);
}
</script>
</body>
</html>