91 lines
2.6 KiB
HTML
91 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<header>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
|
|
<style>
|
|
#tree {
|
|
min-width: 180px;
|
|
}
|
|
#tree details {
|
|
padding-inline-start: 1em;
|
|
}
|
|
details {
|
|
margin-top: .35em;
|
|
margin-bottom: .35em;
|
|
}
|
|
</style>
|
|
</header>
|
|
<body style="width: 90%; max-width: 1024px; margin: auto;">
|
|
<div style="width: 100%; display: flex; flex-direction: column;">
|
|
<div style="margin: 1em; display: flex; flex-direction: row;">
|
|
<input type="text" style="flex-grow: 1;"/>
|
|
<input type="submit" value="search"/>
|
|
</div>
|
|
<div style="width: 100%; display: flex; flex-direction: row; flex-grow: 1;">
|
|
<details open>
|
|
<summary style="min-width: 60px;">
|
|
<div style="display: inline-flex; flex-direction: row; width: calc(100% - 1em);">
|
|
<a href="#?f=" style="flex-grow: 1"><input type="button" value="Tree" style="width: 100%; text-align: left;"/></a>
|
|
<input type="button" value="+"/>
|
|
</div>
|
|
</summary>
|
|
<div id="tree">
|
|
<details open>
|
|
<summary>L1</summary>
|
|
<details open>
|
|
<summary>L2</summary>
|
|
</details>
|
|
</details>
|
|
</div>
|
|
</details>
|
|
<article style="flex-grow: 1; margin-left: 1em;">
|
|
<h1 style="display: flex; flex-direction: row;">
|
|
<a href="#?abc">Tree</a> /
|
|
<a href="#?def">L1</a> /
|
|
<span id="title" contenteditable style="flex-grow: 1;">L2</span>
|
|
</h1>
|
|
<textarea id="my-text-area"></textarea>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<footer>
|
|
<script>
|
|
const easyMDE = new EasyMDE({
|
|
autoDownloadFontAwesome: true,
|
|
autofocus: true,
|
|
autosave: {
|
|
enabled: false,
|
|
},
|
|
element: document.getElementById('my-text-area'),
|
|
forceSync: true,
|
|
indentWithTabs: false,
|
|
initialValue: "# initial\nvalue",
|
|
showIcons: ["code", "table"],
|
|
spellChecker: false,
|
|
sideBySideFullscreen: false,
|
|
tabSize: 3,
|
|
previewImagesInEditor: true,
|
|
insertTexts: {
|
|
image: ["![](", ")"],
|
|
link: ["[](", ")"],
|
|
},
|
|
lineNumbers: true,
|
|
uploadImage: true,
|
|
imageUploadEndpoint: "/api/v0/media", // POST wants {data: {filePath: "/..."}}
|
|
imagePathAbsolute: false,
|
|
renderingConfig: {
|
|
codeSyntaxHighlighting: true,
|
|
},
|
|
})
|
|
function logValue() {
|
|
console.log(easyMDE.value())
|
|
}
|
|
logValue()
|
|
</script>
|
|
</footer>
|
|
</html>
|