f0963c1bfa
* Refactored drag n drop functionality to a hook and component. * Add the snackbar to the article editor. * Now you can drag and drop images in the post body content. * Cleaning up a few things. * Now post cover images can be dragged and dropped. * Removed unused empty function. * Added @testing-library/preact-hooks so that we can test hooks. * Some renaming, small refactor. * Added tests * Added more tests. * Added more tests. * Added message about dropping only one image in post body. * Added message about dropping only one image for cover image. * put onDrop into it's own meethod. * More tests. * Added some API documentation. * Updated editor help with drag and drop image help. * Changed wording. * Now the alt text for markdown removes the file extension. * Updated help wording. Thanks @rhymes * Now the image markdown adds a new line at the end as we currently do not support inline images.
64 lines
1.6 KiB
JavaScript
64 lines
1.6 KiB
JavaScript
import { h, render } from 'preact';
|
|
import { getUserDataAndCsrfToken } from '../chat/util';
|
|
import ArticleForm from '../article-form/articleForm';
|
|
import { Snackbar } from '../Snackbar';
|
|
|
|
HTMLDocument.prototype.ready = new Promise((resolve) => {
|
|
if (document.readyState !== 'loading') {
|
|
return resolve();
|
|
}
|
|
document.addEventListener('DOMContentLoaded', () => resolve());
|
|
return null;
|
|
});
|
|
|
|
function loadForm() {
|
|
// The Snackbar for the article page
|
|
const snackZone = document.getElementById('snack-zone');
|
|
|
|
if (snackZone) {
|
|
render(<Snackbar lifespan="3" />, snackZone);
|
|
}
|
|
|
|
getUserDataAndCsrfToken().then(({ currentUser, csrfToken }) => {
|
|
window.currentUser = currentUser;
|
|
window.csrfToken = csrfToken;
|
|
|
|
const root = document.getElementById('js-article-form');
|
|
const { article, organizations, version, logoSvg } = root.dataset;
|
|
|
|
render(
|
|
<ArticleForm
|
|
article={article}
|
|
organizations={organizations}
|
|
version={version}
|
|
logoSvg={logoSvg}
|
|
/>,
|
|
root,
|
|
root.firstElementChild,
|
|
);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* A function to hide an active broadcast if it exists
|
|
* by removing a `broadcast-visible` class from it.
|
|
*
|
|
* @function hideActiveBroadcast
|
|
*/
|
|
function hideActiveBroadcast() {
|
|
const broadcast = document.getElementById('active-broadcast');
|
|
|
|
if (broadcast) {
|
|
broadcast.classList.remove('broadcast-visible');
|
|
}
|
|
}
|
|
|
|
document.ready.then(() => {
|
|
hideActiveBroadcast();
|
|
loadForm();
|
|
window.InstantClick.on('change', () => {
|
|
if (document.getElementById('article-form')) {
|
|
loadForm();
|
|
}
|
|
});
|
|
});
|