Skip to content

Commit

Permalink
editor fixes and markdown demo doc
Browse files Browse the repository at this point in the history
  • Loading branch information
@aorcsik
aorcsik committed Aug 27, 2024
1 parent b233a14 commit 7e3f808
Show file tree
Hide file tree
Showing 6 changed files with 225 additions and 50 deletions.
9 changes: 6 additions & 3 deletions src/css/blog.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ body {
display: flex;
align-items: center;
flex-direction: column;
min-height: 400px;
min-height: 300px;
padding-top: var(--header-height);
padding-bottom: 2rem;
background-size: cover;
Expand All @@ -17,9 +17,8 @@ body {
}
@media only screen and (min-width: 992px) {
.blog-header {
min-height: 350px;
border-radius: 1rem 1rem 0 0;
margin: calc(-1 * var(--header-height) + .5rem) 0 0 0;
/* margin: calc(-1 * var(--header-height) + 1rem) 0 0 0; */
}
}
.blog-header:before {
Expand Down Expand Up @@ -53,6 +52,7 @@ body {
width: 64px;
z-index: 2;
margin: .5rem auto 0 auto;
display: none;
}

.blog-header .blog-title,
Expand Down Expand Up @@ -229,6 +229,9 @@ body.tag-elden-ring #header.sticky #logo span.logo-head::after {
body.tag-elden-ring #logo span.logo-head {
filter: blur(4px);
}
body.tag-elden-ring .blog-header {
min-height: 400px;
}
body.tag-elden-ring .blog-header:before {
background-image: url("https://static.aorcsik.com/blog/elden-ring-background2.webp");
background-position: center bottom;
Expand Down
16 changes: 8 additions & 8 deletions src/css/client.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -398,20 +398,20 @@ p {
}
}

#menu-toggle:checked + #header nav ul li,
#menu-toggle:checked + #header nav ul li a,
#header.sticky nav ul li,
#header.sticky nav ul li a {
#menu-toggle:checked + header#header nav ul li,
#menu-toggle:checked + header#header nav ul li a,
header#header.sticky nav ul li,
header#header.sticky nav ul li a {
color: var(--nav-color);
}

#menu-toggle:checked + #header #logo span.logo-head::after,
#header.sticky #logo span.logo-head::after {
#menu-toggle:checked + header#header #logo span.logo-head::after,
header#header.sticky #logo span.logo-head::after {
opacity: 0;
}

#menu-toggle:checked + #header #logo span.logo-tail,
#header.sticky #logo span.logo-tail {
#menu-toggle:checked + header#header #logo span.logo-tail,
header#header.sticky #logo span.logo-tail {
color: var(--nav-color);
}

Expand Down
2 changes: 1 addition & 1 deletion src/css/editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -397,7 +397,7 @@ body.dragging .container .preview-container .drag-overlay {
color: var(--syntax-color-1);
}
.mdHr {

color: var(--syntax-color-4);
}


Expand Down
2 changes: 1 addition & 1 deletion src/ejs/editor.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
<div class="editor-content">
<pre class="contentStylePre"><div id="contentStyle"></div></pre>
<pre class="contentLinesPre"><div id="contentLines"></div></pre>
<textarea id="contentTextarea"><%= context.rawContent %></textarea>
<textarea id="contentTextarea" spellcheck="false"><%= context.rawContent %></textarea>
<div class="contentScrollbar"></div>
</div>
<div class="editor-footer"></div>
Expand Down
82 changes: 45 additions & 37 deletions src/js/client/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const textareaContentScrollHandler = (event) => {
previewScrollMatcher(textareaContent.scrollTop, textareaContent.scrollHeight, textareaContent.offsetHeight);
};

let savedContent = null;
window.savedContent = window.savedContent || null;
let updateStatusThrottle = null;
const updateStatus = () => {
if (updateStatusThrottle) window.clearTimeout(updateStatusThrottle);
Expand All @@ -58,7 +58,7 @@ const updateStatus = () => {
let status;
if (isLoading > 1) {
status = "loading";
} else if (savedContent !== markdownText) {
} else if (window.savedContent !== markdownText) {
status = "changed";
} else {
status = "saved";
Expand Down Expand Up @@ -162,7 +162,7 @@ const changeHandler = (event) => {
});
}

if (!savedContent) savedContent = markdownText;
if (!window.savedContent) window.savedContent = markdownText;

updateStatus();

Expand Down Expand Up @@ -245,7 +245,7 @@ const changeHandler = (event) => {
markdownText = markdownText.replace(match[0], markupMap.heading.replace("%%", `${markup}${match[2]}`));
});

const mdHeadingMatch2 = markdownText.matchAll(/^(\s*[^\s]+\n)(-+\n|=+\n)/gm);
const mdHeadingMatch2 = markdownText.matchAll(/^(\s*[^\s].*\n)(-+\n|=+\n)/gm);
if (mdHeadingMatch2) [...mdHeadingMatch2].forEach(match => {
const markup = match[2].replaceAll("=", markupMap["="]).replaceAll("-", markupMap["-"]);
markdownText = markdownText.replace(match[0], markupMap.heading.replace("%%", `${match[1]}${markup}`));
Expand All @@ -257,20 +257,54 @@ const changeHandler = (event) => {
markdownText = markdownText.replace(match[0], markupMap.hr.replace("%%", `${markup}`));
});

const mdCodeBlockMatch = markdownText.matchAll(/(```)(\s*[^\s]?)(.*?)(\1(\n\n|\n?$))/gms);
if (mdCodeBlockMatch) [...mdCodeBlockMatch].forEach(match => {
const listMatch = (markdownText) => {
const mdListMatch = markdownText.matchAll(/^([ \t]*)(\*|\+|-|\d+\.)(\s+.*?\n\n)/gms);
if (mdListMatch) [...mdListMatch].forEach(match => {
let content = match[3];
if (content.match(/^([ \t]*)(\*|\+|-|\d+\.)(\s+.*?\n\n)/ms)) content = listMatch(content);
const markup = markupMap.list_bullet.replace("%%", markupMap[match[2]] ? markupMap[match[2]] : match[2]);
markdownText = markdownText.replace(match[0], `${markupMap.list.replace("%%", `${match[1]}${markup}${content}`)}`);
});
return markdownText;
}
markdownText = listMatch(markdownText);

const mdFencedCodeBlockMatch = markdownText.matchAll(/(```)(\s*[^\s]?)(.*?)(\1(\n\n|\n?$))/gms);
if (mdFencedCodeBlockMatch) [...mdFencedCodeBlockMatch].forEach(match => {
const markupStart = match[1].split("").map((m) => markupMap[m] || m).join("");
const markupEnd = match[4].split("").map((m) => markupMap[m] || m).join("");
markdownText = markdownText.replaceAll(match[0], markupMap.code_block.replace("%%", `${markupStart}${match[2] || ''}${match[3]}${markupEnd}`));
});

const mdIndentedCodeBlockMatch = markdownText.matchAll(/^ .+/gm);
if (mdIndentedCodeBlockMatch) [...mdIndentedCodeBlockMatch].forEach(match => {
markdownText = markdownText.replaceAll(match[0], markupMap.code_block.replace("%%", match[0]));
});

const mdCodeMatch = markdownText.matchAll(/(`)(.+?)\1/gms);
if (mdCodeMatch) [...mdCodeMatch].forEach(match => {
if (match[2].match(/\n\n/)) return;
const markup = match[1].split("").map(m => markupMap[m]).join("");
markdownText = markdownText.replace(match[0], markupMap.code.replace("%%", `${markup}${match[2]}${markup}`));
});

const references = {};
const mdReferenceMatch = markdownText.matchAll(/^(\s*)\[([^\^\]][^\]]*?)\]:(\s*)([^\s]+)(\s+".*?")?/gm);
if (mdReferenceMatch) [...mdReferenceMatch].forEach(match => {
if (!match[1].match(/mdImage/)) { // Image markup inside link markup is not supported
markdownText = markdownText.replaceAll(match[0], (match[1] || '') + markupMap.reference
.replace("%1", match[2])
.replace("%2", match[3] || '')
.replace("%3", match[4])
.replace("%4", match[5] || '')
);
references[match[2]] = {
url: match[4],
title: match[5]
};
}
});

const mdImageMatch = markdownText.matchAll(/!\[([^\]]+?)\]\(([^\s]*?)(\s+".*?")?\)/gm);
if (mdImageMatch) [...mdImageMatch].forEach(match => {
markdownText = markdownText.replaceAll(match[0], markupMap.image
Expand All @@ -279,9 +313,9 @@ const changeHandler = (event) => {
.replace("%3", match[3] || '')
);
});
const mdImageReferenceMatch = markdownText.matchAll(/!\[([^\]]+?)\]\[([^\]]+?)\]/gm);
const mdImageReferenceMatch = markdownText.matchAll(/!\[([^\]]+?)\]\[([^\^\]][^\]]*?)\]/gm);
if (mdImageReferenceMatch) [...mdImageReferenceMatch].forEach(match => {
markdownText = markdownText.replaceAll(match[0], markupMap.imageRef
if (references[match[2]]) markdownText = markdownText.replaceAll(match[0], markupMap.imageRef
.replace("%1", match[1])
.replace("%2", match[2])
);
Expand All @@ -296,28 +330,14 @@ const changeHandler = (event) => {
);
}
});
const mdLinkReferenceMatch = markdownText.matchAll(/\[([^\]]+?)\]\[([^\]]+?)\]/gm);
const mdLinkReferenceMatch = markdownText.matchAll(/\[([^\]]+?)\]\[([^\^\]][^\]]*?)\]/gm);
if (mdLinkReferenceMatch) [...mdLinkReferenceMatch].forEach(match => {
markdownText = markdownText.replaceAll(match[0], markupMap.linkRef
if (references[match[2]]) markdownText = markdownText.replaceAll(match[0], markupMap.linkRef
.replace("%1", match[1])
.replace("%2", match[2])
);
});

const mdReferenceMatch = markdownText.matchAll(/\[([^\]]+?)\]:(\s*)([^\s]+)(\s+".*?")?/gm);
if (mdReferenceMatch) [...mdReferenceMatch].forEach(match => {
if (!match[1].match(/mdImage/)) { // Image markup inside link markup is not supported
markdownText = markdownText.replaceAll(match[0], markupMap.reference
.replace("%1", match[1])
.replace("%2", match[2] || '')
.replace("%3", match[3])
.replace("%4", match[4] || '')
);
}
});



const mdQuoteMatch = markdownText.matchAll(/^([ \t]*)(&gt;(\s*&gt;)*)(.*?\n\n)/gms);
if (mdQuoteMatch) [...mdQuoteMatch].forEach(match => {
const markup = match[2].replaceAll("&gt;", markupMap['>']);
Expand All @@ -331,18 +351,6 @@ const changeHandler = (event) => {
markdownText = markdownText.replace(match[0], `${match[1]}${markupMap.quote.replace("%%", `${markup}${content}`)}`);
});

const listMatch = (markdownText) => {
const mdListMatch = markdownText.matchAll(/^([ \t]*)(\*|\+|-|\d+\.)(\s+.*?\n\n)/gms);
if (mdListMatch) [...mdListMatch].forEach(match => {
let content = match[3];
if (content.match(/^([ \t]*)(\*|\+|-|\d+\.)(\s+.*?\n\n)/ms)) content = listMatch(content);
const markup = markupMap.list_bullet.replace("%%", markupMap[match[2]] ? markupMap[match[2]] : match[2]);
markdownText = markdownText.replace(match[0], `${match[1]}${markupMap.list.replace("%%", `${markup}${content}`)}`);
});
return markdownText;
}
markdownText = listMatch(markdownText);

const mdStrikethroughMatch = markdownText.matchAll(/(~~)(.+?)\1/gms);
if (mdStrikethroughMatch) [...mdStrikethroughMatch].forEach(match => {
if (match[2].match(/\n\n/)) return;
Expand Down Expand Up @@ -437,7 +445,7 @@ textareaContentScrollHandler();
const submitHandler = (event) => {
if (event.submitter.name === "save") {
console.log("Saving...");
savedContent = event.target.content.value;
window.savedContent = event.target.content.value;
// changeHandler();
} else {
console.log("Previewing...");
Expand Down
Loading

0 comments on commit 7e3f808

Please sign in to comment.