46 lines
1.0 KiB
TypeScript
46 lines
1.0 KiB
TypeScript
import styled, { css } from "styled-components";
|
|
|
|
import { useState } from "preact/hooks";
|
|
|
|
import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
|
|
|
|
const Spoiler = styled.span<{ shown: boolean }>`
|
|
padding: 0 2px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
color: transparent;
|
|
background: #151515;
|
|
border-radius: var(--border-radius);
|
|
|
|
> * {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
${(props) =>
|
|
props.shown &&
|
|
css`
|
|
cursor: auto;
|
|
user-select: all;
|
|
color: var(--foreground);
|
|
background: var(--secondary-background);
|
|
|
|
> * {
|
|
opacity: 1;
|
|
pointer-events: unset;
|
|
}
|
|
`}
|
|
`;
|
|
|
|
export function RenderSpoiler({ match }: CustomComponentProps) {
|
|
const [shown, setShown] = useState(false);
|
|
|
|
return (
|
|
<Spoiler shown={shown} onClick={() => setShown(true)}>
|
|
{match}
|
|
</Spoiler>
|
|
);
|
|
}
|
|
|
|
export const remarkSpoiler = createComponent("spoiler", /!!([^!]+)!!/g);
|