(null);
20 |
21 | const updateLocalHtml = () => {
22 | if (!readerRef.current) return;
23 | const html = readerRef.current.innerHTML;
24 | localStorage.setItem('highlighted_html', html);
25 | };
26 |
27 | useEffect(() => {
28 | const html = localStorage.getItem('highlighted_html') ?? sample_html;
29 | setHtml(html);
30 | }, []);
31 |
32 | return createPortal(
33 | <>
34 |
41 |
48 |
49 | } onClick={onClose} />
50 |
51 | Sample html taken from{' '}
52 |
53 | https://markdown-it.github.io/
54 |
55 |
56 |
57 |
58 |
59 |
64 |
65 |
66 | ,
67 | document.body
68 | );
69 | };
70 |
71 | const ScContainer = styled(motion.div)`
72 | position: fixed;
73 | top: 0;
74 | left: 0;
75 | width: 100%;
76 | height: 100%;
77 | display: grid;
78 | background-color: ${p => p.theme.col4};
79 | grid-template-rows: auto 1fr;
80 | z-index: 200;
81 | `;
82 |
83 | const ScHeading = styled.div`
84 | display: grid;
85 | grid-template-columns: auto 1fr;
86 | grid-gap: 16px;
87 | padding: 8px;
88 | align-items: center;
89 | background-color: ${p => p.theme.col5};
90 | border-bottom: 1px solid rgba(0, 0, 0, 0.2);
91 | `;
92 |
93 | const ScLabel = styled.label`
94 | width: 100%;
95 | color: ${p => rgba(p.theme.col1, 0.5)};
96 | text-align: center;
97 | `;
98 |
99 | const ScA = styled.a`
100 | color: inherit;
101 | `;
102 |
103 | const ScDocContainer = styled.div`
104 | width: 100%;
105 | height: 100%;
106 | overflow: auto;
107 | `;
108 |
109 | const ScDoc = styled.div`
110 | &::before,
111 | &::after {
112 | display: block;
113 | content: '';
114 | height: 52px;
115 | }
116 |
117 | * {
118 | user-select: text;
119 | }
120 | `;
121 |
122 | const ScBackdrop = styled(motion.div)`
123 | position: fixed;
124 | width: 100%;
125 | height: 100%;
126 | top: 0;
127 | left: 0;
128 | background: rgba(0, 0, 0, 0.8);
129 | z-index: 99;
130 | overflow: hidden;
131 | `;
132 |
--------------------------------------------------------------------------------
/src/containers/Home/SampleHtml/sample_html.ts:
--------------------------------------------------------------------------------
1 | export const sample_html = "
\nAdvertisement 😃
\n\n- pica - high quality and fast image\nresize in browser.
\n- babelfish - developer friendly\ni18n with plurals support and easy syntax.
\n
\nYou will like those projects!
\n
\nh1 Heading 😎
\nh2 Heading
\nh3 Heading
\nh4 Heading
\nh5 Heading
\nh6 Heading
\nHorizontal Rules
\n
\n
\n
\nTypographic replacements
\nEnable typographer option to see result.
\n© © ® ® ™ ™ § § ±
\ntest… test… test… test?.. test!..
\n!!! ??? , – —
\n“Smartypants, double quotes” and ‘single quotes’
\nEmphasis
\nThis is bold text
\nThis is bold text
\nThis is italic text
\nThis is italic text
\nStrikethrough
\nBlockquotes
\n\nBlockquotes can also be nested…
\n\n…by using additional greater-than signs right next to each other…
\n\n…or with spaces between arrows.
\n
\n
\n
\nLists
\nUnordered
\n\n- Create a list by starting a line with
+, -, or * \n- Sub-lists are made by indenting 2 spaces:\n
\n- Marker character change forces new list start:\n
\n- Ac tristique libero volutpat at
\n
\n\n- Facilisis in pretium nisl aliquet
\n
\n\n- Nulla volutpat aliquam velit
\n
\n \n
\n \n- Very easy!
\n
\nOrdered
\n\n- \n
Lorem ipsum dolor sit amet
\n \n- \n
Consectetur adipiscing elit
\n \n- \n
Integer molestie lorem at massa
\n \n- \n
You can use sequential numbers…
\n \n- \n
…or keep all the numbers as 1.
\n \n
\nStart numbering with offset:
\n\n- foo
\n- bar
\n
\nCode
\nInline code
\nIndented code
\n// Some comments\nline 1 of code\nline 2 of code\nline 3 of code\n
\nBlock code “fences”
\nSample text here...\n
\nSyntax highlighting
\nvar foo = function (bar) {\n return bar++;\n};\n\nconsole.log(foo(5));\n
\nTables
\n\n\n\n| Option | \nDescription | \n
\n\n\n\n| data | \npath to data files to supply the data that will be passed into templates. | \n
\n\n| engine | \nengine to be used for processing templates. Handlebars is the default. | \n
\n\n| ext | \nextension to be used for dest files. | \n
\n\n
\nRight aligned columns
\n\n\n\n| Option | \nDescription | \n
\n\n\n\n| data | \npath to data files to supply the data that will be passed into templates. | \n
\n\n| engine | \nengine to be used for processing templates. Handlebars is the default. | \n
\n\n| ext | \nextension to be used for dest files. | \n
\n\n
\nLinks
\nlink text
\nlink with title
\nAutoconverted link https://github.com/nodeca/pica (enable linkify to see)
\nImages
\n![\"Minion\"](\"https://octodex.github.com/images/minion.png\")
\n![\"Stormtroopocat\"](\"https://octodex.github.com/images/stormtroopocat.jpg\" "\\"The")
\nLike links, Images also have a footnote style syntax
\n![\"Alt](\"https://octodex.github.com/images/dojocat.jpg\" "\\"The")
\nWith a reference later in the document defining the URL location:
\nPlugins
\nThe killer feature of markdown-it is very effective support of\nsyntax plugins.
\n\n\nClassic markup: 😉 :crush: 😢 :tear: 😆 😋
\nShortcuts (emoticons): 😃 😦 😎 😉
\n
\nsee how to change output with twemoji.
\n\n\n\nInserted text
\n\nMarked text
\n\nFootnote 1 link.
\nFootnote 2 link.
\nInline footnote definition.
\nDuplicated footnote reference.
\n\n\n- Term 1
\n- \n
Definition 1\nwith lazy continuation.
\n \n- Term 2 with inline markup
\n- \n
Definition 2
\n { some code, part of Definition 2 }\n
\nThird paragraph of definition 2.
\n \n
\nCompact style:
\n\n- Term 1
\n- Definition 1
\n- Term 2
\n- Definition 2a
\n- Definition 2b
\n
\n\nThis is HTML abbreviation example.
\nIt converts “HTML”, but keep intact partial entries like “xxxHTMLyyy” and so on.
\n\n\n\n";
--------------------------------------------------------------------------------
/src/containers/Home/sample_items.tsx:
--------------------------------------------------------------------------------
1 | import { v4 as uuid } from 'uuid';
2 | import { MenuItem } from '../../components/Menu';
3 | import {
4 | CloudUpload,
5 | Share,
6 | Search,
7 | Bookmarks,
8 | Cloud,
9 | Home,
10 | Heart,
11 | Document,
12 | Download,
13 | List,
14 | Text,
15 | Time,
16 | Expand,
17 | } from '../../assets/icons/essentials';
18 |
19 | export const menuItems: MenuItem[] = [
20 | {
21 | id: uuid(),
22 | name: 'Upload file',
23 | icon: ,
24 | },
25 | {
26 | id: uuid(),
27 | name: 'Share with others',
28 | icon: ,
29 | },
30 | // {
31 | // id: uuid(),
32 | // name: 'Magnify',
33 | // icon: ,
34 | // onClick: () => console.log('magnify'),
35 | // },
36 | {
37 | id: uuid(),
38 | name: 'Bookmark this page',
39 | icon: ,
40 | },
41 | {
42 | id: uuid(),
43 | name: 'Cloud',
44 | icon: ,
45 | disabled: true,
46 | onClick: () => console.log('cloud'),
47 | },
48 | // {
49 | // id: uuid(),
50 | // name: 'Back to home',
51 | // icon: ,
52 | // },
53 | {
54 | id: uuid(),
55 | name: 'Sort by',
56 | isSubMenu: true,
57 | icon:
,
58 | items: [
59 | {
60 | id: uuid(),
61 | name: 'File name',
62 | icon: ,
63 | },
64 | {
65 | id: uuid(),
66 | name: 'Date created',
67 | icon: ,
68 | },
69 | {
70 | id: uuid(),
71 | name: 'Date Modified',
72 | icon: ,
73 | },
74 | ],
75 | },
76 | // {
77 | // id: uuid(),
78 | // name: 'Fevorite',
79 | // icon: ,
80 | // },
81 | {
82 | id: uuid(),
83 | name: 'Download PDF',
84 | icon: ,
85 | disabled: true,
86 | },
87 | // {
88 | // id: uuid(),
89 | // name: 'Download this file',
90 | // icon: ,
91 | // },
92 | {
93 | id: uuid(),
94 | name: 'Deep submenu',
95 | isSubMenu: true,
96 | icon: ,
97 | items: [
98 | {
99 | id: uuid(),
100 | name: 'Option',
101 | icon: ,
102 | },
103 | {
104 | id: uuid(),
105 | name: 'Another option',
106 | icon: ,
107 | },
108 | {
109 | id: uuid(),
110 | name: 'Deep',
111 | icon: ,
112 | isSubMenu: true,
113 | items: [
114 | {
115 | id: uuid(),
116 | name: 'Deep option 1',
117 | icon: ,
118 | },
119 | {
120 | id: uuid(),
121 | name: 'Deep option 2',
122 | icon: ,
123 | },
124 | {
125 | id: uuid(),
126 | name: 'Deep option 3',
127 | icon: ,
128 | },
129 | ],
130 | },
131 | ],
132 | },
133 | ];
134 |
--------------------------------------------------------------------------------
/src/containers/TestComponent/TestComponent.tsx:
--------------------------------------------------------------------------------
1 | export const TestComponent: React.FC = () => {
2 | return null;
3 | };
4 |
--------------------------------------------------------------------------------
/src/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useDimensions';
2 | export * from './usePosition';
3 | export * from './useWindowResize';
4 | export * from './useHighlightRange';
5 |
--------------------------------------------------------------------------------
/src/hooks/useDimensions.ts:
--------------------------------------------------------------------------------
1 | import { useLayoutEffect } from 'react';
2 |
3 | export interface DimensionData {
4 | x: number;
5 | y: number;
6 | width: number;
7 | height: number;
8 | }
9 |
10 | const useDimensions = (
11 | ref: React.MutableRefObject,
12 | callback: (data: DimensionData | null) => void = () => {}
13 | ) => {
14 | useLayoutEffect(() => {
15 | if (ref.current) {
16 | const { offsetWidth: width, offsetHeight: height } = ref.current;
17 | const { x, y } = ref.current.getBoundingClientRect();
18 | callback({ x, y, width, height });
19 | } else callback(null);
20 | }, [ref, callback]);
21 | };
22 |
23 | export { useDimensions };
24 |
--------------------------------------------------------------------------------
/src/hooks/useHighlightRange.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react';
2 | import { HighlightRange } from '../libs/highlight-range';
3 | import { convertStyle } from './utils';
4 | import * as CSS from 'csstype';
5 |
6 | const hr = HighlightRange();
7 |
8 | export interface HighlightRangeConfigs {
9 | readerRef: React.MutableRefObject;
10 | tagName?: string;
11 | attributes?: { [key: string]: string };
12 | styles?: CSS.Properties;
13 | stateChangeCallback: (info: {
14 | selecting?: boolean;
15 | selectedId?: string | null;
16 | selectedStyles?: CSS.Properties | null;
17 | selectedNote?: string | null;
18 | }) => void;
19 | }
20 |
21 | export const useHighlightRange = ({
22 | readerRef,
23 | tagName = 'span',
24 | attributes = {},
25 | styles = {},
26 | stateChangeCallback,
27 | }: HighlightRangeConfigs) => {
28 | const selectingRef = useRef(false);
29 | const selectedIdRef = useRef(null);
30 |
31 | const cancel = () => {
32 | stateChangeCallback({
33 | selecting: (selectingRef.current = false),
34 | selectedId: (selectedIdRef.current = null),
35 | selectedStyles: null,
36 | selectedNote: null,
37 | });
38 | };
39 |
40 | const updateStyle = (newStyles: CSS.Properties) => {
41 | if (!readerRef.current || !selectedIdRef.current) return;
42 | const selector = `[highlightid="${selectedIdRef.current}"]`;
43 | const nodes = readerRef.current.querySelectorAll(selector);
44 | const cssText = convertStyle('toCss', newStyles);
45 | for (let i = 0; i < nodes.length; i++) {
46 | const node = nodes[i] as HTMLElement;
47 | node.style.cssText = cssText;
48 | }
49 | };
50 |
51 | const updateNote = (note: string) => {
52 | if (!readerRef.current || !selectedIdRef.current) return;
53 | const selector = `[highlightid="${selectedIdRef.current}"]`;
54 | const nodes = readerRef.current.querySelectorAll(selector);
55 | for (let i = 0; i < nodes.length; i++) {
56 | const node = nodes[i] as HTMLElement;
57 | node.setAttribute('highlightnote', note);
58 | }
59 | };
60 |
61 | const highlight = () => {
62 | const selection = window.getSelection();
63 | if (!selection || selection.isCollapsed) return;
64 | const range = selection.getRangeAt(0);
65 | const attrs = { ...attributes, style: convertStyle('toCss', styles) };
66 | const highlightId = hr.makeHighlight(range, tagName, attrs);
67 | if (!highlightId) return;
68 | stateChangeCallback({
69 | selecting: (selectingRef.current = false),
70 | selectedId: (selectedIdRef.current = highlightId),
71 | });
72 | selection.removeAllRanges();
73 | };
74 |
75 | const removeHighlight = () => {
76 | if (!selectedIdRef.current) return;
77 | hr.removeHighlight(selectedIdRef.current);
78 | stateChangeCallback({
79 | selecting: (selectingRef.current = false),
80 | selectedId: (selectedIdRef.current = null),
81 | selectedStyles: null,
82 | selectedNote: null,
83 | });
84 | };
85 |
86 | useEffect(() => {
87 | if (!readerRef.current) return;
88 | const element = readerRef.current;
89 |
90 | const selectionHandler = () => {
91 | const selection = window.getSelection();
92 | if (selectingRef.current || !selection || selection.isCollapsed) return;
93 | stateChangeCallback({ selecting: (selectingRef.current = true) });
94 | };
95 |
96 | const clickHandler = (event: Event) => {
97 | const target = event.target as HTMLElement;
98 | if (target && target.hasAttribute('highlighted')) {
99 | const highlightId = target.getAttribute('highlightid');
100 | if (!highlightId || selectedIdRef.current === highlightId) return;
101 | const css = target.getAttribute('style');
102 | const styleObject = css ? convertStyle('toObject', css) : null;
103 | const note = target.getAttribute('highlightnote');
104 | stateChangeCallback({
105 | selectedId: (selectedIdRef.current = highlightId),
106 | selectedStyles: styleObject,
107 | selectedNote: note,
108 | });
109 | } else {
110 | const selection = window.getSelection();
111 | selection &&
112 | selection.isCollapsed &&
113 | (selectingRef.current || selectedIdRef.current) &&
114 | stateChangeCallback({
115 | selecting: (selectingRef.current = false),
116 | selectedId: (selectedIdRef.current = null),
117 | selectedStyles: null,
118 | selectedNote: null,
119 | });
120 | }
121 | };
122 |
123 | document.addEventListener('selectionchange', selectionHandler);
124 | element.addEventListener('click', clickHandler);
125 |
126 | return () => {
127 | document.removeEventListener('selectionchange', selectionHandler);
128 | element.removeEventListener('click', clickHandler);
129 | };
130 | }, [readerRef, stateChangeCallback]);
131 |
132 | return {
133 | cancel,
134 | highlight,
135 | removeHighlight,
136 | updateStyle,
137 | updateNote,
138 | };
139 | };
140 |
--------------------------------------------------------------------------------
/src/hooks/usePosition.ts:
--------------------------------------------------------------------------------
1 | import { useLayoutEffect, useRef } from 'react';
2 | import { useDimensions, DimensionData } from './useDimensions';
3 |
4 | export interface PositionData {
5 | top?: number;
6 | bottom?: number;
7 | left?: number;
8 | right?: number;
9 | transformOriginX: 'left' | 'right';
10 | transformOriginY: 'top' | 'bottom';
11 | }
12 |
13 | const usePosition = (
14 | ref_0: React.MutableRefObject,
15 | ref_1: React.MutableRefObject,
16 | callback: (data: PositionData | null) => void = () => {},
17 | margin: number = 16
18 | ) => {
19 | const dimension_0 = useRef(null);
20 | const dimension_1 = useRef(null);
21 |
22 | useDimensions(ref_0, data => (dimension_0.current = data));
23 | useDimensions(ref_1, data => (dimension_1.current = data));
24 |
25 | useLayoutEffect(() => {
26 | if (dimension_0.current && dimension_1.current) {
27 | const { width: tw, height: th, x: tx, y: ty } = dimension_0.current;
28 | const { width: iw, height: ih } = dimension_1.current;
29 | const { innerWidth: pw, innerHeight: ph } = window;
30 |
31 | const leftSpace = tx - margin;
32 | const rightSpace = pw - tx - tw - margin;
33 | const upSpace = ty - margin;
34 | const downSpace = ph - ty - th - margin;
35 |
36 | let transformOriginX: 'left' | 'right' = 'right';
37 | let transformOriginY: 'top' | 'bottom' = 'top';
38 | let top, bottom, left, right;
39 |
40 | // default placing position left bottom
41 |
42 | if (rightSpace > leftSpace && iw > leftSpace) {
43 | // plcing in right
44 | left = tx + tw < margin ? margin : tx + tw;
45 | if (left + iw > pw - margin) left = pw - iw - margin;
46 | transformOriginX = 'left';
47 | } else {
48 | // placing in left
49 | right = pw - tx < margin ? margin : pw - tx;
50 | if (pw - right - margin < iw) right = pw - iw - margin;
51 | }
52 |
53 | if (upSpace > downSpace && ih > downSpace) {
54 | // placing in top
55 | bottom = ph - ty < margin ? margin : ph - ty;
56 | if (ph - bottom - margin < ih) bottom = ph - ih - margin;
57 | transformOriginY = 'bottom';
58 | } else {
59 | // placing in bottom
60 | top = ty + th < margin ? margin : ty + th;
61 | if (top + ih > ph - margin) top = ph - ih - margin;
62 | }
63 |
64 | callback({
65 | transformOriginX,
66 | transformOriginY,
67 | left,
68 | right,
69 | top,
70 | bottom,
71 | });
72 | } else callback(null);
73 | }, [dimension_0, dimension_1, margin, callback]);
74 | };
75 |
76 | export { usePosition };
77 |
--------------------------------------------------------------------------------
/src/hooks/useWindowResize.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useCallback } from 'react';
2 |
3 | export const useWindowResize = (
4 | callback: () => void = () => {},
5 | interval: number = 100
6 | ) => {
7 | const resizeTimeout = useRef(null);
8 |
9 | const resizeHandler = useCallback(() => {
10 | if (resizeTimeout.current != null) clearTimeout(resizeTimeout.current);
11 | resizeTimeout.current = setTimeout(() => {
12 | resizeTimeout.current = null;
13 | callback();
14 | }, interval);
15 | }, [interval, callback]);
16 |
17 | useEffect(() => {
18 | window.addEventListener('resize', resizeHandler);
19 | return () => {
20 | if (resizeTimeout.current != null) clearTimeout(resizeTimeout.current);
21 | window.removeEventListener('resize', resizeHandler);
22 | };
23 | }, [resizeHandler]);
24 | };
25 |
--------------------------------------------------------------------------------
/src/hooks/utils.ts:
--------------------------------------------------------------------------------
1 | import * as CSS from 'csstype';
2 | import objectToCss from 'react-style-object-to-css';
3 | import cssToObject from 'style-to-js';
4 |
5 | export function convertStyle(
6 | mode: 'toCss',
7 | styles: CSS.Properties
8 | ): string;
9 |
10 | export function convertStyle(
11 | mode: 'toObject',
12 | styles: string
13 | ): CSS.Properties;
14 |
15 | export function convertStyle(
16 | mode: 'toCss' | 'toObject',
17 | styles: CSS.Properties | string
18 | ): CSS.Properties | string {
19 | if (mode === 'toCss') return objectToCss(styles);
20 | else return cssToObject(styles as string);
21 | }
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | /* Roboto */
2 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
3 | /* Roboto Mono*/
4 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
5 |
6 | :root {
7 | --col1: #888888;
8 | --col2: #0088aa;
9 | --col3: #393e46;
10 | --col4: #222831;
11 | --col5: #1b2028;
12 | --col6: #48b14c;
13 | --col7: #fed219;
14 | --col8: #f78828;
15 | --col9: #fa5456;
16 |
17 | --doc-font: sans-serif;
18 | --doc-font-size: 14px;
19 | --code-font: monospace;
20 | --code-font-size: 14px;
21 | --monospace: 'Roboto Mono', monospace;
22 | }
23 |
24 | html {
25 | background-color: #222831;
26 | }
27 |
28 | body {
29 | margin: 0;
30 | font-family: 'Roboto', sans-serif;
31 | -webkit-font-smoothing: antialiased;
32 | -moz-osx-font-smoothing: grayscale;
33 | overscroll-behavior: none;
34 | }
35 |
36 | *,
37 | ::after,
38 | ::before {
39 | box-sizing: border-box;
40 | user-select: none;
41 | -webkit-tap-highlight-color: transparent;
42 | }
43 |
44 | @media (min-width: 480px) {
45 | ::-webkit-scrollbar {
46 | width: 8px;
47 | height: 8px;
48 | }
49 |
50 | ::-webkit-scrollbar-thumb {
51 | background: rgba(255, 255, 255, 0.1);
52 | border-radius: 4px;
53 | }
54 |
55 | ::-webkit-scrollbar-track {
56 | background: none;
57 | }
58 | }
59 |
60 | ::selection {
61 | background-color: var(--col1);
62 | color: var(--col4);
63 | }
64 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import { App } from './App';
5 | import reportWebVitals from './reportWebVitals';
6 | import * as theme from './configs/themes';
7 | import { ThemeProvider } from 'styled-components';
8 |
9 | const app = (
10 |
11 |
12 |
13 |
14 |
15 | );
16 |
17 | ReactDOM.render(app, document.getElementById('root'));
18 |
19 | // If you want to start measuring performance in your app, pass a function
20 | // to log results (for example: reportWebVitals(console.log))
21 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
22 | reportWebVitals();
23 |
--------------------------------------------------------------------------------
/src/libs/highlight-range/index.ts:
--------------------------------------------------------------------------------
1 | //ref https://github.com/Treora/dom-highlight-range/blob/master/highlight-range.js
2 |
3 | import { v4 as uuid } from 'uuid';
4 |
5 | export type HighlightRangeI = ReturnType;
6 |
7 | export function HighlightRange() {
8 | function makeHighlight(
9 | range: Range,
10 | tagName?: string,
11 | attributes?: { [key: string]: string }
12 | ): string | null {
13 | if (range.collapsed) return null;
14 |
15 | // id for removing highlight
16 | const id = uuid();
17 | const newAttributes = { ...attributes, highlightid: id, highlighted: '' };
18 |
19 | // First put all nodes in an array (splits start and end nodes if needed)
20 | const nodesToHighlight = nodesInRange(range, filterTextNodes);
21 |
22 | // Highlight each node
23 | for (let i = 0; i < nodesToHighlight.length; i++) {
24 | const highlightedNode = wrapNodeInHighlight(
25 | nodesToHighlight[i],
26 | tagName,
27 | newAttributes
28 | );
29 |
30 | // set range start to new node
31 | if (i === 0) range.setStart(highlightedNode, 0);
32 | // set range end to new node
33 | if (i === nodesToHighlight.length - 1) range.setEnd(highlightedNode, 1);
34 | }
35 |
36 | return id;
37 | }
38 |
39 | function removeHighlight(
40 | highlightid: string,
41 | rootElement: Document | HTMLElement = document
42 | ) {
43 | const highlightedNodes = rootElement.querySelectorAll(
44 | `[highlightid="${highlightid}"]`
45 | );
46 |
47 | for (let i = 0; i < highlightedNodes.length; i++) {
48 | const node = highlightedNodes[i];
49 | const parent = node.parentNode;
50 | if (node.childNodes.length === 1)
51 | parent?.replaceChild(node.firstChild as Text, node);
52 | else {
53 | while (node.firstChild)
54 | parent?.insertBefore(node.firstChild as Text, node);
55 | }
56 | if (i === 0) parent?.normalize();
57 | if (i === highlightedNodes.length - 1) parent?.normalize();
58 | }
59 | }
60 |
61 | return { makeHighlight, removeHighlight };
62 | }
63 |
64 | // Return an array of the text nodes in the range. Split the start and end nodes if required.
65 | function nodesInRange(
66 | range: Range,
67 | filter?: (node: Node | null) => Node | null
68 | ): Node[] {
69 | if (
70 | range.startContainer.nodeType === Node.TEXT_NODE &&
71 | range.startOffset > 0 &&
72 | range.startOffset < (range.startContainer as Text).length
73 | ) {
74 | // (this may get lost when the splitting the node)
75 | const endOffset = range.endOffset;
76 | const createdNode = (range.startContainer as Text).splitText(
77 | range.startOffset
78 | );
79 |
80 | // If the end was in the same container,
81 | // it will now be in the newly created node.
82 | if (range.endContainer === range.startContainer)
83 | range.setEnd(createdNode, endOffset - range.startOffset);
84 | range.setStart(createdNode, 0);
85 | }
86 |
87 | if (
88 | range.endContainer.nodeType === Node.TEXT_NODE &&
89 | range.endOffset > 0 &&
90 | range.endOffset < (range.endContainer as Text).length
91 | )
92 | (range.endContainer as Text).splitText(range.endOffset);
93 |
94 | // Collect the text nodes.
95 | const owner = range.startContainer.ownerDocument ?? document;
96 | const walker = owner.createTreeWalker(
97 | range.commonAncestorContainer,
98 | NodeFilter.SHOW_ALL
99 | );
100 | walker.currentNode = range.startContainer;
101 |
102 | let reachedEnd = range.endContainer.contains(walker.currentNode);
103 | const skipStartContainer =
104 | range.startContainer.nodeType === Node.TEXT_NODE
105 | ? range.startOffset === (range.startContainer as Text).length
106 | : range.startOffset === range.startContainer.cloneNode.length;
107 | const skipEndContainer = range.endOffset === 0;
108 | const nodes: Node[] = [];
109 |
110 | if (walker.currentNode.nodeType === Node.TEXT_NODE && !skipStartContainer)
111 | nodes.push(walker.currentNode);
112 | while (walker.nextNode()) {
113 | const isInsideEnd = range.endContainer.contains(walker.currentNode);
114 | if (!reachedEnd && isInsideEnd) reachedEnd = true;
115 | if (reachedEnd && (skipEndContainer || !isInsideEnd)) break;
116 | if (skipStartContainer && range.startContainer.contains(walker.currentNode))
117 | continue;
118 | const filteredNode = filter
119 | ? filter(walker.currentNode)
120 | : walker.currentNode;
121 | filteredNode && nodes.push(walker.currentNode);
122 | }
123 |
124 | return nodes;
125 | }
126 |
127 | // Replace [node] with [node]
128 | function wrapNodeInHighlight(
129 | node: Node,
130 | tagName: string = 'mark',
131 | attributes?: { [key: string]: string }
132 | ) {
133 | const highlightElement = document.createElement(tagName);
134 |
135 | if (attributes) {
136 | for (const key in attributes) {
137 | highlightElement.setAttribute(key, attributes[key]);
138 | }
139 | }
140 |
141 | const owner = node.ownerDocument ?? document;
142 | const tempRange = owner.createRange();
143 | tempRange.selectNode(node);
144 | tempRange.surroundContents(highlightElement);
145 | return highlightElement;
146 | }
147 |
148 | // returns textNode with content or null
149 | function filterTextNodes(node: Node | null): Node | null {
150 | if (
151 | node &&
152 | node.nodeType === Node.TEXT_NODE &&
153 | node.textContent &&
154 | !/^\n$/.test(node.textContent) // filter newline
155 | )
156 | return node;
157 | else return null;
158 | }
159 |
--------------------------------------------------------------------------------
/src/libs/pan/index.ts:
--------------------------------------------------------------------------------
1 | export * from './pan';
2 | export * from './types';
3 |
--------------------------------------------------------------------------------
/src/libs/pan/pan.ts:
--------------------------------------------------------------------------------
1 | import {
2 | PanDirections,
3 | Directions,
4 | StartPosition,
5 | CurrentPosition,
6 | Offset,
7 | Delta,
8 | Velocity,
9 | PanConfigs,
10 | PanInterface,
11 | } from './types';
12 |
13 | export function Pan(target?: HTMLElement | Document | null): PanInterface {
14 | const targetElement = target ?? document;
15 |
16 | // configs
17 | let { panDirection, onPanStart, onPanMove, onPanEnd }: PanConfigs = {};
18 |
19 | // states
20 | let added = false;
21 | let panning = false;
22 | let offset: Offset = { ox: 0, oy: 0 };
23 | let startPosition: StartPosition = { sx: 0, sy: 0 };
24 | let prevPosition: CurrentPosition = { x: 0, y: 0, time: 0 };
25 | let positions: CurrentPosition[] = [];
26 | let velocity: Velocity = { vx: 0, vy: 0 };
27 |
28 | function startfunc(event: Event | TouchEvent | MouseEvent): void {
29 | if (event.type === 'mousedown' && (event as MouseEvent).button !== 0)
30 | return;
31 | offset = getTargetOffset(targetElement);
32 | const position = getCurrentPosition(event as TouchEvent | MouseEvent);
33 |
34 | if (
35 | onPanStart &&
36 | onPanStart({
37 | start: { sx: position.x, sy: position.y },
38 | offset,
39 | }) === false
40 | )
41 | return;
42 |
43 | startPosition = { sx: position.x, sy: position.y };
44 | prevPosition = position;
45 | positions.push(position);
46 |
47 | document.addEventListener('mousemove', movefunc);
48 | document.addEventListener('mouseup', endfunc);
49 | document.addEventListener('touchmove', movefunc, { passive: false });
50 | document.addEventListener('touchend', endfunc);
51 | document.addEventListener('mouseleave', endfunc);
52 | }
53 |
54 | function movefunc(event: TouchEvent | MouseEvent): void {
55 | const position = getCurrentPosition(event);
56 | const delta = getDelta(prevPosition, position);
57 |
58 | if (panning || testDirection(delta, panDirection)) {
59 | event.cancelable && event.preventDefault();
60 | panning = true;
61 | positions.push(position);
62 | velocity = getVelocity(delta);
63 | prevPosition = position;
64 |
65 | onPanMove &&
66 | onPanMove({
67 | start: startPosition,
68 | current: position,
69 | offset,
70 | delta,
71 | velocity,
72 | });
73 | //
74 | } else {
75 | document.removeEventListener('mousemove', movefunc);
76 | document.removeEventListener('touchmove', movefunc);
77 | }
78 | }
79 |
80 | function endfunc(): void {
81 | if (panning) {
82 | const lastPostion = positions[positions.length - 5] ?? positions[0];
83 | const delta = getDelta(lastPostion, prevPosition);
84 | const { direction, angle } = getDirection(delta);
85 |
86 | onPanEnd &&
87 | onPanEnd({
88 | start: startPosition,
89 | current: prevPosition,
90 | offset,
91 | velocity,
92 | angle,
93 | direction,
94 | });
95 | //
96 | }
97 |
98 | document.removeEventListener('mousemove', movefunc);
99 | document.removeEventListener('mouseup', endfunc);
100 | document.removeEventListener('touchmove', movefunc);
101 | document.removeEventListener('touchend', endfunc);
102 | document.removeEventListener('mouseleave', endfunc);
103 |
104 | panning = false;
105 | offset = { ox: 0, oy: 0 };
106 | startPosition = { sx: 0, sy: 0 };
107 | prevPosition = { x: 0, y: 0, time: 0 };
108 | velocity = { vx: 0, vy: 0 };
109 | positions = [];
110 | }
111 |
112 | const pan: PanInterface = {
113 | add: function (configs: PanConfigs = {} as PanConfigs): PanInterface {
114 | if (added) return pan;
115 | added = true;
116 | ({ panDirection, onPanStart, onPanEnd, onPanMove } = configs);
117 | targetElement.addEventListener('mousedown', startfunc);
118 | targetElement.addEventListener('touchstart', startfunc);
119 | return pan;
120 | },
121 |
122 | update: function (newConfigs: Partial): PanInterface {
123 | if (!added) return pan;
124 | ({
125 | panDirection = panDirection,
126 | onPanStart = onPanStart,
127 | onPanEnd = onPanEnd,
128 | onPanMove = onPanMove,
129 | } = newConfigs);
130 |
131 | return pan;
132 | },
133 |
134 | remove: function (): void {
135 | if (!added) return;
136 | added = false;
137 | ({ panDirection, onPanStart, onPanEnd, onPanMove } = {} as PanConfigs);
138 | targetElement.removeEventListener('mousedown', startfunc);
139 | targetElement.removeEventListener('touchstart', startfunc);
140 | document.removeEventListener('mousemove', movefunc);
141 | document.removeEventListener('mouseup', endfunc);
142 | document.removeEventListener('mouseleave', endfunc);
143 | document.removeEventListener('touchmove', movefunc);
144 | document.removeEventListener('touchend', endfunc);
145 | },
146 | };
147 |
148 | return pan;
149 | }
150 |
151 | function getTargetOffset(target: HTMLElement | Document): Offset {
152 | const targetPosition =
153 | 'getBoundingClientRect' in target
154 | ? target.getBoundingClientRect()
155 | : { x: 0, y: 0 };
156 | return { ox: targetPosition.x, oy: targetPosition.y };
157 | }
158 |
159 | function getCurrentPosition(event: TouchEvent | MouseEvent): CurrentPosition {
160 | if ('changedTouches' in event) {
161 | return {
162 | x: event.changedTouches[0].clientX,
163 | y: event.changedTouches[0].clientY,
164 | time: event.timeStamp,
165 | };
166 | } else {
167 | return {
168 | x: event.clientX,
169 | y: event.clientY,
170 | time: event.timeStamp,
171 | };
172 | }
173 | }
174 |
175 | function getDirection(delta: Delta): { direction: Directions; angle: number } {
176 | const angle = Math.atan2(delta.dy, delta.dx);
177 |
178 | let direction: PanDirections = PanDirections.left;
179 | if (angle > -0.75 * Math.PI) direction = PanDirections.top;
180 | if (angle > -0.25 * Math.PI) direction = PanDirections.right;
181 | if (angle > 0.25 * Math.PI) direction = PanDirections.bottom;
182 | if (angle > 0.75 * Math.PI) direction = PanDirections.left;
183 |
184 | return { direction, angle };
185 | }
186 |
187 | function getDelta(
188 | startPosition: CurrentPosition,
189 | endPosition: CurrentPosition
190 | ): Delta {
191 | return {
192 | dx: endPosition.x - startPosition.x,
193 | dy: endPosition.y - startPosition.y,
194 | dt: endPosition.time - startPosition.time,
195 | };
196 | }
197 |
198 | function getVelocity(delta: Delta): Velocity {
199 | if (delta.dt === 0) return { vx: 0, vy: 0 };
200 | else return { vx: delta.dx / delta.dt, vy: delta.dy / delta.dt };
201 | }
202 |
203 | function testDirection(
204 | delta: Delta,
205 | panDirection: PanDirections = PanDirections.any
206 | ): boolean {
207 | if (panDirection === PanDirections.any) return true;
208 | const { direction } = getDirection(delta);
209 |
210 | return (
211 | panDirection === direction ||
212 | (panDirection === PanDirections.horizontal &&
213 | (direction === PanDirections.right ||
214 | direction === PanDirections.left)) ||
215 | (panDirection === PanDirections.vertical &&
216 | (direction === PanDirections.top || direction === PanDirections.bottom))
217 | );
218 | }
219 |
--------------------------------------------------------------------------------
/src/libs/pan/types.ts:
--------------------------------------------------------------------------------
1 | export enum PanDirections {
2 | top,
3 | right,
4 | bottom,
5 | left,
6 | horizontal,
7 | vertical,
8 | any,
9 | }
10 |
11 | export type Directions = Exclude<
12 | PanDirections,
13 | PanDirections.horizontal | PanDirections.vertical | PanDirections.any
14 | >;
15 |
16 | export type StartPosition = { sx: number; sy: number };
17 | export type CurrentPosition = { x: number; y: number; time: number };
18 | export type Offset = { ox: number; oy: number };
19 | export type Delta = { dx: number; dy: number; dt: number };
20 | export type Velocity = { vx: number; vy: number };
21 |
22 | export type PanStartInfo = {
23 | start: StartPosition;
24 | offset: Offset;
25 | };
26 |
27 | export type PanMoveInfo = {
28 | start: StartPosition;
29 | current: CurrentPosition;
30 | offset: Offset;
31 | delta: Delta;
32 | velocity: Velocity;
33 | };
34 |
35 | export type PanEndInfo = {
36 | start: StartPosition;
37 | current: CurrentPosition;
38 | offset: Offset;
39 | velocity: Velocity;
40 | direction: Directions;
41 | angle: number;
42 | };
43 |
44 | export interface PanConfigs {
45 | panDirection?: PanDirections;
46 | onPanStart?: (info: PanStartInfo) => boolean | void;
47 | onPanMove?: (info: PanMoveInfo) => void;
48 | onPanEnd?: (info: PanEndInfo) => void;
49 | }
50 |
51 | export type PanInterface = {
52 | add(configs?: PanConfigs): PanInterface;
53 | update(configs: Partial): PanInterface;
54 | remove(): void;
55 | };
56 |
--------------------------------------------------------------------------------
/src/libs/spring/index.ts:
--------------------------------------------------------------------------------
1 | export * from './spring';
2 | export * from './types';
--------------------------------------------------------------------------------
/src/libs/spring/spring.ts:
--------------------------------------------------------------------------------
1 | import { SpringConfigs, SpringInterface } from './types';
2 |
3 | export function Spring(configs: SpringConfigs = {}): SpringInterface {
4 | let {
5 | from = 0,
6 | to = 0,
7 | stiffness = 100,
8 | damping = 10,
9 | initialVelocity = 0,
10 | mass = 1,
11 | restDisplacement = 0.1,
12 | restVelocity = 0.1,
13 | onUpdate,
14 | onComplete,
15 | } = configs;
16 |
17 | let totalDisplacement = to - from;
18 | let zeta = damping / (2 * Math.sqrt(stiffness * mass));
19 | let omega = Math.sqrt(stiffness / mass) / 1000;
20 | let omega_d = omega * Math.sqrt(1.0 - zeta * zeta);
21 |
22 | let currentTime = 0;
23 | let prevTime = 0;
24 | let currentPosition = from;
25 | let prevPosition = 0;
26 | let currentVelocity = 0;
27 |
28 | let isAnimating = false;
29 | let animationFrame = 0;
30 |
31 | function tickSpring(timeDelta: number) {
32 | currentTime += timeDelta;
33 | prevPosition = currentPosition;
34 |
35 | if (zeta < 1) {
36 | const decay = Math.exp(-zeta * omega * currentTime);
37 | const motion =
38 | ((-initialVelocity + zeta * omega * totalDisplacement) / omega_d) *
39 | Math.sin(omega_d * currentTime) +
40 | totalDisplacement * Math.cos(omega_d * currentTime);
41 | currentPosition = to - decay * motion;
42 | } else {
43 | const decay = Math.exp(-omega * currentTime);
44 | const motion =
45 | totalDisplacement +
46 | (-initialVelocity + omega * totalDisplacement) * currentTime;
47 | currentPosition = to - decay * motion;
48 | }
49 |
50 | currentVelocity = (currentPosition - prevPosition) / timeDelta;
51 |
52 | if (
53 | Math.abs(currentVelocity) <= restVelocity &&
54 | Math.abs(to - currentPosition) <= restDisplacement
55 | ) {
56 | currentPosition = to;
57 | complete();
58 | onUpdate && onUpdate(currentPosition);
59 | onComplete && onComplete();
60 | } else onUpdate && onUpdate(currentPosition);
61 | }
62 |
63 | function complete() {
64 | isAnimating = false;
65 | cancelAnimationFrame(animationFrame);
66 | animationFrame = 0;
67 | currentTime = 0;
68 | prevTime = 0;
69 | prevPosition = 0;
70 | currentVelocity = 0;
71 | }
72 |
73 | function step(timestamp: number) {
74 | tickSpring(timestamp - prevTime);
75 | prevTime = timestamp;
76 | if (isAnimating) animationFrame = requestAnimationFrame(step);
77 | }
78 |
79 | function prep(timestamp: number) {
80 | tickSpring(100 / 6);
81 | prevTime = timestamp;
82 | if (isAnimating) animationFrame = requestAnimationFrame(step);
83 | }
84 |
85 | const springInterface: SpringInterface = {
86 | isAnimating: () => isAnimating,
87 | tick: tickSpring,
88 | start(): SpringInterface {
89 | if (totalDisplacement === 0) {
90 | onComplete && onComplete();
91 | return springInterface;
92 | }
93 | if (isAnimating) return springInterface;
94 | isAnimating = true;
95 | animationFrame = requestAnimationFrame(prep);
96 | return springInterface;
97 | },
98 |
99 | stop(): void {
100 | if (isAnimating) complete();
101 | },
102 |
103 | update: function (configs): SpringInterface {
104 | ({
105 | from = currentPosition,
106 | to = to,
107 | stiffness = stiffness,
108 | damping = damping,
109 | initialVelocity = currentVelocity,
110 | mass = mass,
111 | restDisplacement = restDisplacement,
112 | restVelocity = restVelocity,
113 | onUpdate = onUpdate,
114 | onComplete = onComplete,
115 | } = configs);
116 |
117 | if (configs.from != null) currentPosition = from;
118 | if (configs.initialVelocity != null) currentVelocity = 0;
119 | totalDisplacement = to - from;
120 | zeta = damping / (2 * Math.sqrt(stiffness * mass));
121 | omega = Math.sqrt(stiffness / mass) / 1000;
122 | omega_d = omega * Math.sqrt(1.0 - zeta * zeta);
123 | currentTime = 0;
124 | return springInterface;
125 | },
126 |
127 | set: function (configs): SpringInterface {
128 | ({
129 | from = currentPosition,
130 | to = to,
131 | initialVelocity = currentVelocity,
132 | } = configs);
133 |
134 | if (configs.from != null) currentPosition = from;
135 | if (configs.initialVelocity != null) currentVelocity = 0;
136 | totalDisplacement = to - from;
137 | currentTime = 0;
138 | return springInterface;
139 | },
140 | };
141 |
142 | return springInterface;
143 | }
144 |
--------------------------------------------------------------------------------
/src/libs/spring/types.ts:
--------------------------------------------------------------------------------
1 | export type SpringConfigs = {
2 | from?: number;
3 | to?: number;
4 | stiffness?: number;
5 | damping?: number;
6 | mass?: number;
7 | initialVelocity?: number;
8 | restVelocity?: number;
9 | restDisplacement?: number;
10 | onUpdate?: (value: number) => void;
11 | onComplete?: () => void;
12 | };
13 |
14 | export interface SpringInterface {
15 | tick: (timeDelta: number) => void;
16 | start: () => SpringInterface;
17 | stop: () => void;
18 | update: (configs: Partial) => SpringInterface;
19 | set: (
20 | configs: Partial>
21 | ) => SpringInterface;
22 | isAnimating: () => boolean;
23 | }
24 |
25 | export const p = 12;
26 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
1 | import { ReportHandler } from 'web-vitals';
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
9 | getLCP(onPerfEntry);
10 | getTTFB(onPerfEntry);
11 | });
12 | }
13 | }
14 |
15 | export default reportWebVitals;
16 |
--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/src/types/css.d.ts:
--------------------------------------------------------------------------------
1 | import * as CSS from 'csstype';
2 |
3 | declare module 'csstype' {
4 | interface Properties {
5 | [index: string]: any;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/types/react-style-object-to-css.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'react-style-object-to-css';
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------