6 | {props.children}
7 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/Editor/Hyperlink.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import classnames from "classnames";
3 |
4 | export default function (props: any) {
5 | return (
6 | window.open(props.element.url)}
9 | className={classnames("cursor-pointer")}
10 | {...props.attributes}
11 | >
12 | {props.children}
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/Editor/Leaf.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function (props: any) {
4 | return (
5 |
9 | {props.children}
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/Editor/Link.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import { useHistory } from "react-router-dom";
3 | import classnames from "classnames";
4 | import { PageContext } from "../Page";
5 |
6 | export default function (props: any) {
7 | const { element } = props;
8 | const { touchedLinkNodes } = useContext(PageContext);
9 | const touchedIds = touchedLinkNodes.map((node: any) => node.id);
10 |
11 | const history = useHistory();
12 |
13 | // it's possible for a link to be in process of creation, user refresh
14 | // we don't want to make those clickable
15 | if (touchedIds.includes(element.id) || element.isIncomplete) {
16 | return (
17 |
18 | {props.children}
19 |
20 | );
21 | }
22 |
23 | // TODO: readOnly something like this
24 | // const mungedChildren = { ...props.children };
25 | // const textNode = mungedChildren.props.node.children[0];
26 | // mungedChildren.props.node.children[0] = {
27 | // text: textNode.text.slice(2, textNode.text.length - 2),
28 | // };
29 |
30 | return (
31 |
33 | history.push(`/page/${encodeURIComponent(element.value)}`)
34 | }
35 | className={classnames("cursor-pointer", {
36 | "text-gray-500": element.touched,
37 | })}
38 | {...props.attributes}
39 | >
40 | {props.children}
41 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/Editor/List.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function (props: any) {
4 | return (
5 | | Title | 17 |Last updated | 18 |
|---|---|
| 25 | { 26 | 27 | {page.title} 28 | 29 | } 30 | | 31 |32 | {formatRelative(new Date(page.updated_at), new Date())} 33 | | 34 |