mirror of
https://github.com/DustinBrett/daedalOS.git
synced 2025-12-06 12:20:20 +01:00
Avoid using iframes for Marked
This commit is contained in:
Dustin Brett
parent
0e7c53e1f0
commit
f593461ecd
|
|
@ -1,9 +1,136 @@
|
|||
import styled from "styled-components";
|
||||
|
||||
const StyledMarked = styled.div`
|
||||
iframe {
|
||||
article {
|
||||
background-color: #f9f9f9;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
height: 100%;
|
||||
line-height: 1.5;
|
||||
overflow-y: scroll;
|
||||
padding: 16px 32px;
|
||||
width: 100%;
|
||||
word-wrap: break-word;
|
||||
|
||||
* {
|
||||
all: revert;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0366d6;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
padding: 9px 0;
|
||||
|
||||
header & {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
padding: 7px 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1em;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
line-height: 1.6;
|
||||
padding-inline-start: 30px;
|
||||
}
|
||||
|
||||
nav {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
margin-right: 10px;
|
||||
|
||||
> ul {
|
||||
font-size: 14px;
|
||||
list-style-type: none;
|
||||
margin: 10px 0;
|
||||
padding: 0;
|
||||
position: sticky;
|
||||
top: 5px;
|
||||
|
||||
> li {
|
||||
min-width: 125px;
|
||||
padding: 0 15px;
|
||||
|
||||
> ul {
|
||||
padding-left: 25px;
|
||||
|
||||
> li {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: #111;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid #ddd;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
|
||||
td,
|
||||
th {
|
||||
border: 1px solid #ddd;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 3px;
|
||||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
|
||||
monospace;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
overflow: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
code:not([class]) {
|
||||
background-color: rgba(27, 31, 35, 0.05);
|
||||
border-radius: 3px;
|
||||
font-size: 85%;
|
||||
margin: 0;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@ import useMarked from "components/apps/Marked/useMarked";
|
|||
import type { ComponentProcessProps } from "components/system/Apps/RenderComponent";
|
||||
|
||||
const Marked: FC<ComponentProcessProps> = ({ id }) =>
|
||||
ContainerComponent(id, useMarked, StyledMarked, <iframe title={id} />);
|
||||
ContainerComponent(id, useMarked, StyledMarked, <article />);
|
||||
|
||||
export default Marked;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import useFileDrop from "components/system/Files/FileManager/useFileDrop";
|
||||
import useTitle from "components/system/Window/useTitle";
|
||||
import { useFileSystem } from "contexts/fileSystem";
|
||||
import { useSession } from "contexts/session";
|
||||
import { basename } from "path";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { loadFiles } from "utils/functions";
|
||||
|
|
@ -28,44 +26,20 @@ const useMarked = (
|
|||
loading: boolean
|
||||
): void => {
|
||||
const { readFile } = useFileSystem();
|
||||
const { onDragOver, onDrop } = useFileDrop({ id });
|
||||
const { setForegroundId } = useSession();
|
||||
const passEventsThroughIframe = useCallback(() => {
|
||||
const iframe = containerRef.current?.querySelector("iframe");
|
||||
|
||||
if (iframe) {
|
||||
iframe.addEventListener("load", () => {
|
||||
if (iframe.contentWindow) {
|
||||
iframe.contentWindow.addEventListener("dragover", onDragOver);
|
||||
iframe.contentWindow.addEventListener("drop", onDrop);
|
||||
iframe.contentWindow.addEventListener("focus", () => {
|
||||
setForegroundId(id);
|
||||
containerRef.current?.closest("section")?.focus();
|
||||
});
|
||||
|
||||
[...iframe.contentWindow.document.links].forEach((link) =>
|
||||
link.setAttribute("target", "_blank")
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [containerRef, id, onDragOver, onDrop, setForegroundId]);
|
||||
const { prependFileToTitle } = useTitle(id);
|
||||
const loadFile = useCallback(async () => {
|
||||
const iframe = containerRef.current?.querySelector("iframe");
|
||||
const markdownFile = await readFile(url);
|
||||
const container = containerRef.current?.querySelector(
|
||||
"article"
|
||||
) as HTMLElement;
|
||||
|
||||
if (iframe) {
|
||||
const markdownFile = await readFile(url);
|
||||
|
||||
iframe.srcdoc = `
|
||||
<link rel="stylesheet" href="/Program Files/Marked/style.css" />
|
||||
${window.marked.parse(markdownFile.toString(), {
|
||||
headerIds: false,
|
||||
})}
|
||||
`;
|
||||
|
||||
prependFileToTitle(basename(url));
|
||||
if (container instanceof HTMLElement) {
|
||||
container.innerHTML = window.marked.parse(markdownFile.toString(), {
|
||||
headerIds: false,
|
||||
});
|
||||
}
|
||||
|
||||
prependFileToTitle(basename(url));
|
||||
}, [containerRef, prependFileToTitle, readFile, url]);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -73,11 +47,10 @@ const useMarked = (
|
|||
loadFiles(libs).then(() => {
|
||||
if (window.marked) {
|
||||
setLoading(false);
|
||||
passEventsThroughIframe();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [loading, passEventsThroughIframe, setLoading]);
|
||||
}, [loading, setLoading]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && url) loadFile();
|
||||
|
|
|
|||
|
|
@ -1,92 +0,0 @@
|
|||
/* https://github.com/markedjs/marked/blob/master/docs/css/style.css */
|
||||
|
||||
body {
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
background: #F9F9F9;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
nav {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
background: white;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
position: sticky;
|
||||
top: 5px;
|
||||
margin: 10px 0px;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
min-width: 125px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
nav > ul > li > ul {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
nav > ul > li > ul > li {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
nav .selected {
|
||||
color: #111;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
nav .selected:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
header h1 { margin: 0; }
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 1px solid #ddd;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0366d6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
code:not([class]) {
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(27,31,35,0.05);
|
||||
border-radius: 3px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user