Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Added anchor links for all header levels

This commit is contained in:
DrMint 2022-03-14 12:52:04 +01:00
parent a74528fe28
commit 62aafe423e
1 changed files with 88 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/Markdown/Markdawn.tsx
View File

@ -22,6 +22,22 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
options={{ options={{
slugify: slugify, slugify: slugify,
overrides: { overrides: {
h1: {
component: (props: {
id: string;
style: React.CSSProperties;
children: React.ReactNode;
}) => {
return (
<div className="flex flex-row place-items-center place-content-center gap-3">
<h1 id={props.id} style={props.style}>
{props.children}
</h1>
<HeaderToolTip id={props.id} />
</div>
);
},
},
h2: { h2: {
component: (props: { component: (props: {
id: string; id: string;
@ -33,23 +49,7 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
<h2 id={props.id} style={props.style}> <h2 id={props.id} style={props.style}>
{props.children} {props.children}
</h2> </h2>
<ToolTip content={"Copy anchor link"} trigger="mouseenter"> <HeaderToolTip id={props.id} />
<ToolTip content={"Copied! 👍"} trigger="click">
<span
className="material-icons transition-color hover:text-dark cursor-pointer"
onClick={() => {
navigator.clipboard.writeText(
process.env.NEXT_PUBLIC_URL_SELF +
window.location.pathname +
"#" +
props.id
);
}}
>
link
</span>
</ToolTip>
</ToolTip>
</div> </div>
); );
}, },
@ -65,23 +65,55 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
<h3 id={props.id} style={props.style}> <h3 id={props.id} style={props.style}>
{props.children} {props.children}
</h3> </h3>
<ToolTip content={"Copy anchor link"} trigger="mouseenter"> <HeaderToolTip id={props.id} />
<ToolTip content={"Copied! 👍"} trigger="click"> </div>
<span );
className="material-icons transition-color hover:text-dark cursor-pointer" },
onClick={() => { },
navigator.clipboard.writeText( h4: {
process.env.NEXT_PUBLIC_URL_SELF + component: (props: {
window.location.pathname + id: string;
"#" + style: React.CSSProperties;
props.id children: React.ReactNode;
); }) => {
}} return (
> <div className="flex flex-row place-items-center place-content-center gap-3">
link <h4 id={props.id} style={props.style}>
</span> {props.children}
</ToolTip> </h4>
</ToolTip> <HeaderToolTip id={props.id} />
</div>
);
},
},
h5: {
component: (props: {
id: string;
style: React.CSSProperties;
children: React.ReactNode;
}) => {
return (
<div className="flex flex-row place-items-center place-content-center gap-3">
<h5 id={props.id} style={props.style}>
{props.children}
</h5>
<HeaderToolTip id={props.id} />
</div>
);
},
},
h6: {
component: (props: {
id: string;
style: React.CSSProperties;
children: React.ReactNode;
}) => {
return (
<div className="flex flex-row place-items-center place-content-center gap-3">
<h6 id={props.id} style={props.style}>
{props.children}
</h6>
<HeaderToolTip id={props.id} />
</div> </div>
); );
}, },
@ -178,6 +210,28 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
return <></>; return <></>;
} }
function HeaderToolTip(props: { id: string }) {
return (
<ToolTip content={"Copy anchor link"} trigger="mouseenter">
<ToolTip content={"Copied! 👍"} trigger="click">
<span
className="material-icons transition-color hover:text-dark cursor-pointer"
onClick={() => {
navigator.clipboard.writeText(
process.env.NEXT_PUBLIC_URL_SELF +
window.location.pathname +
"#" +
props.id
);
}}
>
link
</span>
</ToolTip>
</ToolTip>
);
}
export function preprocessMarkDawn(text: string): string { export function preprocessMarkDawn(text: string): string {
let scenebreakIndex = 0; let scenebreakIndex = 0;
const visitedSlugs: string[] = []; const visitedSlugs: string[] = [];