diff --git a/main.css b/main.css
index 2a7bdc6..87275a3 100644
--- a/main.css
+++ b/main.css
@@ -67,6 +67,8 @@ html, body {
}
#text {
+ display: block;
+ width: 100%;
height: 100%;
font-size: 1.7em;
max-width: 900px;
diff --git a/main.js b/main.js
index f3b7b44..c1097f8 100644
--- a/main.js
+++ b/main.js
@@ -6,11 +6,13 @@ const sidebar = document.querySelector("#sidebar");
const clearButton = document.querySelector("#clear-button");
const newDraftButton = document.querySelector("#new-draft-button");
-const welcomeMessage = `This page saves everything you type,
- and allows to manage auto-saved drafts.
- The data stays in your browser,
- no need for an account.
- Enjoy :)`
+const welcomeMessage = `This page saves everything you type,
+and allows to manage auto-saved drafts.
+
+The data stays in your browser,
+no need for an account.
+
+Enjoy :)`
setTheme();
applyTheme();
@@ -20,19 +22,19 @@ window.addEventListener("load", function() {
renderSidebar();
document.addEventListener("keyup", function() {
- Draft.saveCurrent(text.innerHTML);
- updateThumbnail(text.innerHTML);
+ Draft.saveCurrent(text.value);
+ updateThumbnail(text.value);
});
});
clearButton.onclick = async function() {
Draft.destroyCurrent();
await renderCurrentContent();
- while (text.firstChild) text.removeChild(text.firstChild);
+ text.value = '';
};
newDraftButton.onclick = async function() {
- const draft = await Draft.init(text.innerHTML);
+ const draft = await Draft.init(text.value);
draft.setActive();
renderCurrentContent();
@@ -42,7 +44,7 @@ newDraftButton.onclick = async function() {
async function renderCurrentContent() {
const current = await Draft.getCurrent();
- text.innerHTML = current ? current : welcomeMessage;
+ text.value = current ? current : welcomeMessage;
renderActiveDraft();
}
@@ -97,14 +99,13 @@ function clearEmptySidebar() {
function renderThumbnail(draft) {
const container = document.querySelector(".thumbnails-container");
const newDiv = document.createElement("div");
- const cleanExtract = sanitizeExtract(draft.extract);
newDiv.classList.add("thumbnail");
newDiv.setAttribute("data-draft-uid", draft.uid);
newDiv.setAttribute("data-draft-position", draft.position);
renderThumbnailPosition(newDiv);
- renderThumbnailContent(cleanExtract, newDiv);
+ renderThumbnailContent(draft.extract, newDiv);
renderThumbnailDelete(newDiv);
container.append(newDiv);
@@ -165,7 +166,7 @@ async function setupThumbnailsEvents() {
}
async function updateThumbnail(content) {
- const cleanContent = sanitizeExtract(content.substring(0,150));
+ const shortenContent = content.substring(0,150);
const activeDraft = await Draft.getActive();
if (activeDraft && activeDraft != "") {
@@ -173,9 +174,9 @@ async function updateThumbnail(content) {
const thumb = thumbs.item(activeDraft.position - 1);
const container = thumb.querySelector(".thumbnail-content");
- if (container.textContent != cleanContent) {
+ if (container.textContent != shortenContent) {
while (container.firstChild) container.removeChild(container.firstChild);
- container.textContent = cleanContent;
+ container.textContent = shortenContent;
}
}
}
@@ -222,14 +223,6 @@ async function saveThemeToDark() {
await browser.storage.local.set({"drafter-dark-theme": true});
}
-function sanitizeExtract(content) {
- return content.replace(/<\/div>/g, " ")
- .replace(/<\/?[^>]+(>|$)/g, "")
- .replace(/ /gi, " ")
- .replace(/>/g, ">")
- .replace(/</g, "<");
-}
-
function eventTargetUid(event) {
return event.currentTarget.parentNode.dataset.draftUid;
}