243 lines
7.2 KiB
HTML
243 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
||
<title>
|
||
Godo - a ProseMirror editor for Publik
|
||
</title>
|
||
|
||
<!-- CSS -->
|
||
<link rel="stylesheet" href="css/godo.css" media="all" />
|
||
|
||
<style>
|
||
body {
|
||
font-family: sans-serif;
|
||
background-color: #fafafa;
|
||
}
|
||
.wrapper {
|
||
padding: 2em;
|
||
max-width: 60em;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.grid-2cols textarea {
|
||
display: block;
|
||
width: 100%;
|
||
min-height: 30em;
|
||
}
|
||
@media (min-width: 960px) {
|
||
.grid-2cols {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
grid-gap: 1em;
|
||
|
||
}
|
||
.grid-2cols textarea {
|
||
min-height: 40em;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
|
||
|
||
<body>
|
||
|
||
<div class="wrapper">
|
||
|
||
<header>
|
||
<h1>Godo <small>Prosemirror</small></h1>
|
||
</header>
|
||
|
||
<main role="main">
|
||
|
||
<h2>Basic Godo</h2>
|
||
<p>Just p, strong, em & a</p>
|
||
<form class="form-test">
|
||
<div class="grid-2cols">
|
||
<div>
|
||
<h3>Textarea</h3>
|
||
<textarea class="textarea-for-godo" id="basic-godo-source">
|
||
<h1>Quamquam haec quidem <strong>praeposita</strong></h1>
|
||
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haeret in salebra. <a href='http://loripsum.net/' target='_blank'>Sed tamen intellego quid velit</a>.</p>
|
||
|
||
<p>Qualem igitur <strong>hominem natura</strong> inchoavit ? Duo Reges: constructio interrete. Summum a vobis bonum voluptas dicitur. Huius, Lyco, oratione locuples, rebus ipsis ielunior. Cui Tubuli nomen odio non est? Ea possunt paria non esse. Aliter autem vobis placet. </p>
|
||
|
||
<h2>Recte et <em>reiecta dicere</em> licebit</h2>
|
||
|
||
<ul>
|
||
<li>Haec mihi <em>videtur delicatior</em>, ut ita dicam, molliorque ratio, quam virtutis vis gravitasque postulat.</li>
|
||
<li>Mihi quidem Antiochum, quem audis, satis belle videris attendere.</li>
|
||
<li>Nam illud quidem adduci vix possum, ut ea, quae senserit ille, tibi non vera videantur.</li>
|
||
<li>Sed id ne cogitari quidem potest quale sit, ut non repugnet ipsum sibi.</li>
|
||
<li>Cum autem in quo sapienter dicimus, id a primo rectissime dicitur.</li>
|
||
</ul>
|
||
</textarea>
|
||
<button type="button" class="change-btn" data-target="basic-godo-source" data-event="wcs:change">textarea has changed</button>
|
||
</div>
|
||
<div>
|
||
<h3>Editor</h3>
|
||
<godo-editor
|
||
schema="basic"
|
||
linked-source="basic-godo-source"
|
||
update-event="wcs:change"
|
||
></godo-editor>
|
||
</div>
|
||
</div>
|
||
<button>Submit</button>
|
||
</form>
|
||
|
||
<h2>Full Godo</h2>
|
||
<p>p, h1 -> h2, strong, em, a, ul</p>
|
||
<form class="form-test">
|
||
<div class="grid-2cols">
|
||
<div>
|
||
<h3>Textarea</h3>
|
||
<textarea class="textarea-for-godo-2" id="full-godo-source">
|
||
<h1>Quamquam haec quidem <strong>praeposita</strong></h1>
|
||
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haeret in salebra. <a href='http://loripsum.net/' target='_blank'>Sed tamen intellego quid velit</a>.</p>
|
||
|
||
<p>Qualem igitur <strong>hominem natura</strong> inchoavit ? Duo Reges: constructio interrete. Summum a vobis bonum voluptas dicitur. Huius, Lyco, oratione locuples, rebus ipsis ielunior. Cui Tubuli nomen odio non est? Ea possunt paria non esse. Aliter autem vobis placet. </p>
|
||
|
||
<h2>Recte et <em>reiecta dicere</em> licebit</h2>
|
||
|
||
<ul>
|
||
<li>Haec mihi <em>videtur delicatior</em>, ut ita dicam, molliorque ratio, quam virtutis vis gravitasque postulat.</li>
|
||
<li>Mihi quidem Antiochum, quem audis, satis belle videris attendere.</li>
|
||
<li>Nam illud quidem adduci vix possum, ut ea, quae senserit ille, tibi non vera videantur.</li>
|
||
<li>Sed id ne cogitari quidem potest quale sit, ut non repugnet ipsum sibi.</li>
|
||
<li>Cum autem in quo sapienter dicimus, id a primo rectissime dicitur.</li>
|
||
</ul>
|
||
</textarea>
|
||
<button type="button" class="change-btn" data-target="full-godo-source" data-event="wcs:change">textarea has changed</button>
|
||
</div>
|
||
<div>
|
||
<h3>Editor</h3>
|
||
<godo-editor
|
||
linked-source="full-godo-source"
|
||
heading-levels="1,2"
|
||
instant-update
|
||
update-event="wcs:change"
|
||
></godo-editor>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<h2>Full Godo ‑ div as linked source</h2>
|
||
|
||
<h3>DIV</h3>
|
||
|
||
<a id="edit-link" href="">edit</a>
|
||
|
||
<div class="editableDiv-for-godo" id="div-godo-source">
|
||
<p>This text is div childs</p>
|
||
|
||
<h1>Quamquam haec quidem <strong>praeposita</strong></h1>
|
||
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haeret in salebra. <a href='http://loripsum.net/' target='_blank'>Sed tamen intellego quid velit</a>.</p>
|
||
|
||
<p>Qualem igitur <strong>hominem natura</strong> inchoavit ? Duo Reges: constructio interrete. Summum a vobis bonum voluptas dicitur. Huius, Lyco, oratione locuples, rebus ipsis ielunior. Cui Tubuli nomen odio non est? Ea possunt paria non esse. Aliter autem vobis placet. </p>
|
||
|
||
<h2>Recte et <em>reiecta dicere</em> licebit</h2>
|
||
|
||
<ul>
|
||
<li>Haec mihi <em>videtur delicatior</em>, ut ita dicam, molliorque ratio, quam virtutis vis gravitasque postulat.</li>
|
||
<li>Mihi quidem Antiochum, quem audis, satis belle videris attendere.</li>
|
||
<li>Nam illud quidem adduci vix possum, ut ea, quae senserit ille, tibi non vera videantur.</li>
|
||
<li>Sed id ne cogitari quidem potest quale sit, ut non repugnet ipsum sibi.</li>
|
||
<li>Cum autem in quo sapienter dicimus, id a primo rectissime dicitur.</li>
|
||
</ul>
|
||
</div>
|
||
<godo-editor
|
||
tabindex="0"
|
||
linked-source="div-godo-source"
|
||
heading-levels="1,2"
|
||
id="directHTMLEditor"
|
||
></godo-editor>
|
||
<div>
|
||
<!-- <button id="editDiv">Edit</button> -->
|
||
<button id="cancelEditDiv">Cancel</button>
|
||
<button id="SaveEdition">Save</button>
|
||
</div>
|
||
</main>
|
||
</div><!-- #wrapper -->
|
||
|
||
|
||
<!-- Javascript -->
|
||
<script type="module">
|
||
import Godo from "./js/godo.js"
|
||
|
||
const changeBtns = document.querySelectorAll('.change-btn')
|
||
changeBtns.forEach((btn) => {
|
||
btn.addEventListener('click', function(e) {
|
||
const textarea = document.getElementById(btn.dataset.target)
|
||
textarea.dispatchEvent(new CustomEvent(btn.dataset.event))
|
||
})
|
||
})
|
||
|
||
const formsTest = document.querySelectorAll('.form-test')
|
||
formsTest.forEach((form) => {
|
||
form.addEventListener('submit', function(e) {
|
||
e.preventDefault()
|
||
})
|
||
})
|
||
|
||
// add buttons events for div editing
|
||
const editor = document.getElementById('directHTMLEditor')
|
||
const cancelBtn = document.getElementById('cancelEditDiv')
|
||
const saveBtn = document.getElementById('SaveEdition')
|
||
|
||
cancelBtn.hidden = true
|
||
saveBtn.hidden = true
|
||
|
||
cancelBtn.addEventListener('click', () => {
|
||
editor.cancelEdition()
|
||
cancelBtn.hidden = true
|
||
saveBtn.hidden = true
|
||
})
|
||
|
||
saveBtn.addEventListener('click', async () => {
|
||
const url = 'https://jsonplaceholder.typicode.com/posts'
|
||
const text = editor.getHTML()
|
||
|
||
const request = await fetch(url, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
'text': text,
|
||
'token': 'pasaran'
|
||
})
|
||
})
|
||
|
||
if (!request.ok) {
|
||
throw new Error(`HTTP error! status: ${request.status}`)
|
||
}
|
||
editor.sourceContent = editor.getHTML()
|
||
editor.editable = false
|
||
cancelBtn.hidden = true
|
||
saveBtn.hidden = true
|
||
})
|
||
|
||
const edit_link = document.getElementById('edit-link')
|
||
edit_link.addEventListener('click', (e) => {
|
||
editor.editable = true
|
||
cancelBtn.hidden = false
|
||
saveBtn.hidden = false
|
||
editor.view.focus()
|
||
e.preventDefault()
|
||
})
|
||
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html>
|