92 |
93 |
94 | HTML Input
95 |
96 |
104 |
106 |
107 |
108 |
{
111 | onMount(() => {
112 | setEditorRef(el);
113 | });
114 | }}
115 | />
116 |
117 |
118 | );
119 | };
120 |
121 | export default HTMLEditor;
122 |
--------------------------------------------------------------------------------
/src/components/Header/ThemeBtn.tsx:
--------------------------------------------------------------------------------
1 | import { usePrefersDark } from "@solid-primitives/media";
2 | import { FiMoon, FiSun } from "solid-icons/fi";
3 | import {
4 | createComputed,
5 | createEffect,
6 | createSignal,
7 | Match,
8 | on,
9 | onMount,
10 | Switch,
11 | } from "solid-js";
12 | import { isServer } from "solid-js/web";
13 | import HalfSun from "../Icons/HalfSun";
14 |
15 | const [_currentTheme, setCurrentTheme] = createSignal<"light" | "dark" | "os">(
16 | !isServer ? localStorage.theme || "os" : "os"
17 | );
18 |
19 | export const isDarkTheme = () => {
20 | const _prefersDark = usePrefersDark();
21 | const prefersDark = _prefersDark();
22 | const currentTheme = _currentTheme();
23 |
24 | if (currentTheme === "os") {
25 | // solid-codemirror probably fails to update theme because it initializes after usePrefersDark updates.
26 | // so this redundant matchMedia is to get correct dark matches value on initial load
27 | if (!isServer) {
28 | return window.matchMedia("(prefers-color-scheme: dark)").matches;
29 | }
30 |
31 | return prefersDark;
32 | }
33 | return currentTheme === "dark";
34 | };
35 |
36 | const ThemeBtn = () => {
37 | const [theme, setTheme] = createSignal<"light" | "dark" | "os">("os");
38 | const prefersDark = usePrefersDark();
39 |
40 | const onClickTheme = () => {
41 | switch (theme()) {
42 | // 1. OS (default dark)
43 | // 2. user light
44 | // 3. user dark
45 | // 4. OS (default dark)
46 | case "dark":
47 | {
48 | if (prefersDark()) {
49 | document.documentElement.classList.add("dark");
50 | localStorage.removeItem("theme");
51 | setTheme("os");
52 | } else {
53 | document.documentElement.classList.remove("dark");
54 | localStorage.theme = "light";
55 | setTheme("light");
56 | }
57 | }
58 | break;
59 | // 1. OS (default light)
60 | // 2. user dark
61 | // 3. user light
62 | // 4. OS (default light)
63 | case "light":
64 | {
65 | if (prefersDark()) {
66 | document.documentElement.classList.add("dark");
67 | localStorage.theme = "dark";
68 | setTheme("dark");
69 | } else {
70 | localStorage.removeItem("theme");
71 | setTheme("os");
72 | }
73 | }
74 | break;
75 | default: {
76 | if (!prefersDark()) {
77 | document.documentElement.classList.add("dark");
78 | localStorage.theme = "dark";
79 | setTheme("dark");
80 | } else {
81 | document.documentElement.classList.remove("dark");
82 | localStorage.theme = "light";
83 | setTheme("light");
84 | }
85 | }
86 | }
87 | };
88 |
89 | createComputed(
90 | on(
91 | theme,
92 | () => {
93 | setCurrentTheme(theme());
94 | },
95 | { defer: true }
96 | )
97 | );
98 |
99 | createEffect(
100 | on(
101 | prefersDark,
102 | (prefersDark) => {
103 | if (theme() !== "os") return;
104 |
105 | if (prefersDark) {
106 | document.documentElement.classList.add("dark");
107 | } else {
108 | document.documentElement.classList.remove("dark");
109 | }
110 | },
111 | { defer: true }
112 | )
113 | );
114 |
115 | onMount(() => {
116 | let lsTheme = localStorage.theme;
117 | if (!lsTheme) lsTheme = "os";
118 |
119 | setTheme(lsTheme);
120 | });
121 |
122 | return (
123 |
128 |
129 |
130 |
132 |
133 |
135 |
136 |
138 |
139 |
140 | );
141 | };
142 |
143 | export default ThemeBtn;
144 |
--------------------------------------------------------------------------------
/src/components/ConfigPanel/Select.tsx:
--------------------------------------------------------------------------------
1 | import { autoUpdate, flip, offset, shift } from "@floating-ui/dom";
2 | import { createResizeObserver } from "@solid-primitives/resize-observer";
3 | import Dismiss from "solid-dismiss";
4 | import { useFloating } from "solid-floating-ui";
5 | import { Component, createSignal, For } from "solid-js";
6 | import ChevronDownIcon from "../Icons/ChevronDownIcon";
7 |
8 | const Select: Component<{
9 | name: string;
10 | id?: string;
11 | options: string[];
12 | selected: string;
13 | disabled?: boolean;
14 | onOpen?: (open: boolean) => void;
15 | onChange: (props: { value: string; idx: number }) => void;
16 | }> = (props) => {
17 | const [reference, setReference] = createSignal
();
18 | const [floating, setFloating] = createSignal();
19 | const [open, setOpen] = createSignal(false);
20 | let floatingUl!: HTMLUListElement;
21 | createResizeObserver(reference as any, ({ width, height }, el) => {
22 | if (!floating()) return;
23 | if (el !== reference()) return;
24 | setFloatingUlWidthSameSizeAsButton();
25 | });
26 |
27 | const setFloatingUlWidthSameSizeAsButton = () => {
28 | floatingUl.style.width = `${reference()!.clientWidth}px`;
29 | };
30 | const position = useFloating(reference, floating, {
31 | whileElementsMounted: autoUpdate,
32 | middleware: [offset(4), flip(), shift()],
33 | });
34 |
35 | return (
36 |
40 |
{props.name}
41 |
45 | {props.selected}
46 |
47 |
49 |
50 |
{
55 | if (open) {
56 | setFloatingUlWidthSameSizeAsButton();
57 | }
58 | props.onOpen && props.onOpen(open);
59 | }}
60 | focusElementOnOpen={`[data-selected="true"]`}
61 | mount="body"
62 | cursorKeys
63 | animation={{
64 | enterClass: "opacity-0",
65 | enterToClass: "opacity-100 transition",
66 | exitClass: "opacity-100",
67 | exitToClass: "opacity-0 transition-200",
68 | }}
69 | >
70 |
79 |
80 |
81 | {(item, idx) => (
82 | {
87 | setOpen(false);
88 | props.onChange({ value: item, idx: idx() });
89 | }}
90 | onKeyDown={(e) => {
91 | if (e.key !== "Enter") return;
92 | setOpen(false);
93 | props.onChange({ value: item, idx: idx() });
94 | }}
95 | >
96 |
103 | {item}
104 |
105 |
106 | )}
107 |
108 |
109 |
111 |
setClose(!close())}
112 | aria-label={`${!close() ? "close" : "open"} configeration panel`}
113 | aria-expanded={!close()}
114 | >
115 |
116 |
117 |
118 |
120 |
122 | );
123 | };
124 |
125 | export default TogglePanelButton;
126 |
--------------------------------------------------------------------------------
/src/components/ActionsPanel/ActionsPanel.tsx:
--------------------------------------------------------------------------------
1 | import { autoUpdate, flip, offset, shift } from "@floating-ui/dom";
2 | import Dismiss from "solid-dismiss";
3 | import { useFloating } from "solid-floating-ui";
4 | import { createMemo, createSignal, For, JSX, ParentComponent } from "solid-js";
5 | import { Dynamic } from "solid-js/web";
6 | import { setStore, store } from "../../store";
7 | import CopyJSXButton from "../CopyJSXButton";
8 | import SplitPanelColumns from "../Icons/SplitPanelColumns";
9 | import SplitPanelRows from "../Icons/SplitPanelRows";
10 | import TogglePanelButton from "./TogglePanelButton";
11 |
12 | const ActionsPanel = () => {
13 | const list: {
14 | id: string;
15 | text: string;
16 | Icon?: () => JSX.Element;
17 | }[] = [
18 | {
19 | id: "rows",
20 | text: "HTML and JSX rows",
21 | Icon: SplitPanelRows,
22 | },
23 | {
24 | id: "columns",
25 | text: "HTML and JSX columns",
26 | Icon: SplitPanelColumns,
27 | },
28 | {
29 | id: "html",
30 | text: "HTML only",
31 | Icon: () => HTML ,
32 | },
33 | {
34 | id: "jsx",
35 | text: "JSX only",
36 | Icon: () => JSX ,
37 | },
38 | ];
39 |
40 | const [reference, setReference] = createSignal();
41 | const [floating, setFloating] = createSignal();
42 | const [open, setOpen] = createSignal(false);
43 | let floatingUl!: HTMLUListElement;
44 | const position = useFloating(reference, floating, {
45 | whileElementsMounted: autoUpdate,
46 | placement: "bottom-start",
47 | middleware: [offset(4), flip(), shift()],
48 | });
49 |
50 | const selectedItemFromList = createMemo(() => {
51 | const item = list.find(({ id }) => id === store.layout);
52 | return item;
53 | });
54 |
55 | return (
56 |
60 |
61 |
62 |
73 |
75 |
89 |
98 |
99 |
100 | {({ id, text, Icon }) => (
101 | {
106 | setOpen(false);
107 | setStore("layout", id as "jsx");
108 | }}
109 | onKeyDown={(e) => {
110 | if (e.key !== "Enter") return;
111 | setOpen(false);
112 | setStore("layout", id as "jsx");
113 | }}
114 | >
115 |
122 |
{Icon &&
123 |
{text}
124 |
126 | )}
127 |
128 |
129 |
131 |
132 |
133 | Line Wrap
134 |
142 |
143 |
144 |
146 |
147 |
154 |
155 | {props.children}
156 |
157 |
158 | );
159 | };
160 |
161 | export default ActionsPanel;
162 |
--------------------------------------------------------------------------------
/src/components/ConfigPanel/Input.tsx:
--------------------------------------------------------------------------------
1 | import { arrow, autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
2 | import Dismiss from "solid-dismiss";
3 | import { useFloating } from "solid-floating-ui";
4 | import { Component, createSignal, Show } from "solid-js";
5 |
6 | const Input: Component<{
7 | name: string;
8 | value: string;
9 | maskType: "character-count";
10 | disabled?: boolean;
11 | filter?: RegExp;
12 | placeholder?: string;
13 | tooltip?: boolean;
14 | onInput: (value: string) => void;
15 | }> = (props) => {
16 | const [reference, setReference] = createSignal();
17 | const [floating, setFloating] = createSignal();
18 | const [open, setOpen] = createSignal(false);
19 | // todo fix dismiss
20 | const [clickedClose, setClickedClose] = createSignal(false);
21 | const [show, setShow] = createSignal(true);
22 | let arrowEl!: HTMLDivElement;
23 |
24 | const countWhiteSpace = () => {
25 | const value = props.value;
26 | const group: { char: string; count: number }[] = [];
27 | if (value[0] != null) {
28 | group.push({ char: value[0], count: 0 });
29 | }
30 | value.split("").forEach((item) => {
31 | const groupItem = group.at(-1)!;
32 | if (groupItem.char === item) {
33 | groupItem.count = groupItem.count + 1;
34 | } else {
35 | group.push({ char: item, count: 1 });
36 | }
37 | });
38 |
39 | setShow(true);
40 |
41 | return group
42 | .map(({ count, char }) => {
43 | if (char === "\t") char = "\\t";
44 | if (char.match(/\s/)) char = "\\s";
45 |
46 | return `${char}${count > 1 ? `(x${count})` : ""}`;
47 | })
48 | .reduce((a, c) => a + " " + c, "");
49 | };
50 |
51 | const onClickReplaceTab = () => {
52 | const value = props.value;
53 | setClickedClose(true);
54 | setOpen(false);
55 | props.onInput("\t");
56 | };
57 |
58 | useFloating(reference, floating, {
59 | whileElementsMounted: (reference, floating) =>
60 | autoUpdate(reference, floating, () => {
61 | const arrowLen = arrowEl.offsetWidth;
62 | const floatingOffset = Math.sqrt(2 * arrowLen ** 2) / 2;
63 | computePosition(reference, floating, {
64 | placement: "bottom",
65 | middleware: [offset(floatingOffset), flip(), arrow({ element: arrowEl })],
66 | }).then(({ middlewareData, placement, x, y }) => {
67 | const side = placement.split("-")[0];
68 |
69 | Object.assign(floating.style, {
70 | left: `${x}px`,
71 | top: `${y}px`,
72 | });
73 |
74 | const staticSide = {
75 | top: "bottom",
76 | right: "left",
77 | bottom: "top",
78 | left: "right",
79 | }[side];
80 |
81 | if (middlewareData.arrow) {
82 | const { x, y } = middlewareData.arrow;
83 | const isTop = placement === "top";
84 | const maskImage = `linear-gradient(${isTop ? "315" : "135"}deg, #000 calc(50% - ${
85 | isTop ? "1" : "0.5"
86 | }px),transparent calc(50% - ${isTop ? "1" : "0.5"}px))`;
87 |
88 | Object.assign(arrowEl!.style, {
89 | left: x != null ? `${x}px` : "",
90 | top: y != null ? `${y}px` : "",
91 | // Ensure the static side gets unset when
92 | // flipping to other placements' axes.
93 | right: "",
94 | bottom: "",
95 | [staticSide!]: `${-arrowLen / 2 + 2}px`,
96 | transform: `rotate(45deg)`,
97 | WebkitMaskImage: maskImage,
98 | });
99 | }
100 | });
101 | }),
102 | });
103 |
104 | return (
105 |
109 | {props.name}
110 |
111 |
{
119 | if (!props.value.match(/\t/)) {
120 | if (!clickedClose()) {
121 | // another dismiss bug
122 | setTimeout(() => {
123 | setOpen(true);
124 | });
125 | }
126 | setClickedClose(false);
127 | }
128 | setShow(false);
129 | }}
130 | onBlur={() => {
131 | setShow(true);
132 | }}
133 | onInput={(e) => {
134 | let value = e.currentTarget.value;
135 | if (props.filter) {
136 | value = value.replace(props.filter, "");
137 | e.currentTarget.value = value;
138 | }
139 |
140 | value = value.replace(/\\s/g, " ");
141 |
142 | const result = value.replace(/\\t/g, "\t");
143 | if (result !== value) {
144 | value = result.replace(/[^\t]/g, "");
145 | e.currentTarget.value = value;
146 | }
147 |
148 | props.onInput(value);
149 | }}
150 | ref={setReference}
151 | />
152 |
153 |
154 | {countWhiteSpace()}
155 |
156 |
157 |
159 |
173 |
174 |
175 |
176 | To use TABs, type{" "}
177 | \\t
178 |
180 |
181 |
182 |
Or
183 |
184 |
185 |
189 | Replace with TAB
190 |
191 |
192 |
196 |
198 |
199 |
200 | );
201 | };
202 |
203 | export default Input;
204 |
--------------------------------------------------------------------------------
/src/components/Editors/JSXEditor.tsx:
--------------------------------------------------------------------------------
1 | import { javascript } from "@codemirror/lang-javascript";
2 | import { Extension } from "@codemirror/state";
3 | import { EditorView, lineNumbers } from "@codemirror/view";
4 | import {
5 | createCodeMirror,
6 | createEditorControlledValue,
7 | createEditorReadonly,
8 | } from "solid-codemirror";
9 | import { $TRACK, createEffect, createSignal, on, onMount } from "solid-js";
10 | import { editorBaseTheme } from "../../editor/editorBaseTheme";
11 | import { vsCodeDark } from "../../editor/theme/dark";
12 | import { githubLight } from "../../editor/theme/light";
13 | import HTMLtoJSX from "../../lib/html-to-jsx";
14 | import { ConfigKey, setStore, store } from "../../store";
15 | import CopyJSXButton from "../CopyJSXButton";
16 | import { isDarkTheme } from "../Header/ThemeBtn";
17 |
18 | const JSXEditor = () => {
19 | // the initial jsx demo code has siblings that are not wrapped, wraps with fragments that will be hidden to preserve syntax highlighting
20 | const [code, setCode] = createSignal(`<>\n${store.jsxText.trimEnd()}\n`);
21 | const [hiddenFragments, setHiddenFragments] = createSignal(true);
22 | const { editorView, ref: setEditorRef, createExtension } = createCodeMirror();
23 | createEditorControlledValue(editorView, code);
24 | createEditorReadonly(editorView, () => true);
25 | let htmlToJSXConverter!: HTMLtoJSX;
26 |
27 | const extensions = (): Extension => {
28 | return [
29 | editorBaseTheme({ backgroundColor: "transparent" }),
30 | isDarkTheme() ? vsCodeDark : githubLight,
31 | lineNumbers(),
32 | store.lineWrap ? EditorView.lineWrapping : [],
33 | hiddenFragments()
34 | ? // hides first and last lines that contain dumb fragments, to prevent syntax highlight breaking, and reset and move counter increment by 1
35 | EditorView.theme({
36 | ".cm-line:first-child": {
37 | display: "none",
38 | },
39 | ".cm-gutterElement:nth-child(n+1)": {
40 | position: "relative",
41 | visibility: "hidden",
42 | },
43 | ".cm-gutters": {
44 | counterReset: "gutter-mask",
45 | },
46 | ".cm-gutterElement:first-child:after": {
47 | counterReset: "gutter-mask",
48 | content: '"" !important',
49 | visibility: "hidden !important",
50 | },
51 | ".cm-gutterElement:nth-child(2):after": {
52 | counterReset: "gutter-mask",
53 | content: '"" !important',
54 | visibility: "hidden !important",
55 | },
56 | ".cm-gutterElement:after": {
57 | position: "absolute",
58 | counterIncrement: "gutter-mask",
59 | top: "0",
60 | left: "0",
61 | bottom: "0",
62 | right: "0",
63 | display: "flex",
64 | visibility: "visible",
65 | justifyContent: "center",
66 | content: "counter(gutter-mask)",
67 | },
68 | ".cm-line:nth-last-child(1)": {
69 | display: "none",
70 | },
71 | })
72 | : [],
73 | EditorView.contentAttributes.of({
74 | "aria-label": "JSX code output",
75 | "aria-readonly": "true",
76 | }),
77 | javascript({
78 | jsx: true,
79 | typescript: true,
80 | }),
81 | ];
82 | };
83 |
84 | const reconfigure = createExtension(extensions());
85 |
86 | const insertHiddenFragments = (convertedJsx: string) => {
87 | // insert hidden fragments to keep jsx synthax highlighter to work properly
88 | const hasWrapperNode = store.config.wrapperNode === "none" && store.config.component === "none";
89 | requestAnimationFrame(() => {
90 | setHiddenFragments(hasWrapperNode);
91 | });
92 | if (hasWrapperNode) {
93 | convertedJsx = `<>\n${convertedJsx.trimEnd()}\n`;
94 | }
95 | return convertedJsx;
96 | };
97 |
98 | const prefixSVGIds = (convertedJsx: string) => {
99 | if (!store.config.prefixSVGIds) return convertedJsx;
100 | return namespaceSVGId(convertedJsx, store.config.prefixSVGIds);
101 | };
102 |
103 | const updateEditorText = () => {
104 | let converted = htmlToJSXConverter.convert(store.htmlText);
105 |
106 | if (!converted || converted === "\n") {
107 | const code = "\n";
108 | setCode(code);
109 | setStore("jsxText", code);
110 | return;
111 | }
112 |
113 | converted = prefixSVGIds(converted);
114 | const jsxText = converted;
115 | converted = insertHiddenFragments(converted);
116 |
117 | setStore("jsxText", jsxText);
118 | setCode(converted);
119 | };
120 |
121 | onMount(() => {
122 | htmlToJSXConverter = new HTMLtoJSX(store.config);
123 |
124 | setTimeout(() => {
125 | const { scrollDOM } = editorView();
126 |
127 | scrollDOM.scrollTo({ top: 0 });
128 | });
129 | });
130 |
131 | createEffect(on(extensions, (extensions) => reconfigure(extensions)));
132 |
133 | createEffect(
134 | on(
135 | () => store.config[$TRACK as any as ConfigKey],
136 | () => {
137 | htmlToJSXConverter.config = { ...store.config };
138 | if (htmlToJSXConverter.config.indent) {
139 | htmlToJSXConverter.config.indent = htmlToJSXConverter.config.indent.replace(/\\/g, "");
140 | }
141 | updateEditorText();
142 | },
143 | { defer: true },
144 | ),
145 | );
146 |
147 | createEffect(
148 | on(
149 | () => store.htmlText,
150 | () => {
151 | updateEditorText();
152 | },
153 | { defer: true },
154 | ),
155 | );
156 |
157 | return (
158 |
159 |
160 |
161 | JSX Output
162 |
163 |
164 |
165 | {/* TODO: On Mobile Chrome, the JSX editor font size is 14.3px instead of declared 13px */}
166 |
{
169 | onMount(() => {
170 | setEditorRef(el);
171 | });
172 | }}
173 | />
174 |
175 |
179 |
181 |
182 | );
183 | };
184 |
185 | function namespaceSVGId(svg: string, namespace: string) {
186 | svg = svg.replace(/(
]*>)([\s\S]*?)(<\/svg>)/g, (_, startSvg, svgBody, endSvg) => {
187 | if (!svgBody) return _;
188 |
189 | svgBody = svgBody.replace(/id="(.*?)"/g, (_: string, p1: string) => {
190 | return `id="${namespace}${p1}"`;
191 | });
192 |
193 | svgBody = svgBody.replace(/xlink:href="#(.*?)"/g, (_: string, p1: string) => {
194 | return `xlink:href="#${namespace}${p1}"`;
195 | });
196 | svgBody = svgBody.replace(/mask="url\(#(.*?)\)"/g, (_: string, p1: string) => {
197 | return `mask="url(#${namespace}${p1})"`;
198 | });
199 | svgBody = svgBody.replace(/fill="url\(#(.*?)\)"/g, (_: string, p1: string) => {
200 | return `fill="url(#${namespace}${p1})"`;
201 | });
202 | svgBody = svgBody.replace(/filter="url\(#(.*?)\)"/g, (_: string, p1: string) => {
203 | return `filter="url(#${namespace}${p1})"`;
204 | });
205 |
206 | return `${startSvg}${svgBody}${endSvg}`;
207 | })!;
208 |
209 | return svg;
210 | }
211 |
212 | export default JSXEditor;
213 |
--------------------------------------------------------------------------------
/src/components/MobileScrollDVH.tsx:
--------------------------------------------------------------------------------
1 | import { isFirefox, isIOS } from "@solid-primitives/platform";
2 | import { ParentComponent, onMount } from "solid-js";
3 |
4 | /**
5 | * MobileScrollDVH (Dynamic Viewport Height)
6 | * Makes element's height use dynamic viewport height, `100dvh`, so initially fits small viewport, but allows user to scroll to collapse/hide browser toolbars and then dynamically updates height to long viewport. https://web.dev/blog/viewport-units
7 | *
8 | * By default certain types of websites that fit inside viewport ( such as simple texteditors, transformers, tooling ect ), layout-wise are not reading document and therefore won't have page scroll. However this causes the mobile browser navigation toolbar to be forever visible and takes up valuable space. This wrapper allows the user to reclaim additional space back to the site by scrolling down to trigger toolbar to hide.
9 | *
10 | */
11 | const MobileScrollDVH: ParentComponent = ({ children }) => {
12 | // Browser allows scroll to hide toolbars when:
13 | // - Chrome: 2.5 seconds after page loads.
14 | // - Firefox and Safari: Immediatly after page loads.
15 |
16 | // Scroll sliding direction to toggle toolbar, but slide delta isn't more than toolbar height (or some value) and haven't let pointer up:
17 | // - Chrome: Only translates viewport.
18 | // - Safari: Scrolls page.
19 | // - Firefox: Most of the time follows Chrome behavior but sometimes scrolls a little bit.
20 |
21 | // Scroll sliding but letting go before passing threshold to toggle toolbar which cancels it, does:
22 | // - Chrome: Amount that was slid, is the same that applies to page scroll.
23 | // - Safari: Nothing, no additional scroll is applied to page.
24 | // - Firefox: Most of time follows Safari behavior but sometimes additional scroll is added causing tiny scroll jump.
25 |
26 | // Scroll, caused by overscroll (already reached the boundary of sub element scrolling area), sliding direction to toggle toolbar, but slide delta isn't more than toolbar height (or some value) and haven't let pointer up:
27 | // - Chrome: Only translates viewport.
28 | // - Safari: Scrolls page, will close toolbar when scrolled all the way down.
29 | // - Firefox: Scrolls page, never closes toolbar must let go pointer then scroll down again to close toolbar.
30 |
31 | let dvhEl!: HTMLDivElement;
32 | let lvhEl!: HTMLDivElement;
33 | let svhEl!: HTMLDivElement;
34 |
35 | onMount(() => {
36 | // must round due to iOS subpixel inconsistencies
37 | const getDocumentScrollHeight = () => Math.round(document.documentElement.scrollHeight);
38 | const getlvhHeight = () => ({ height: Math.round(lvhEl.getBoundingClientRect().height) });
39 | let documentScrollHeight = 0;
40 | let lvhElBCR = { height: 0 };
41 | let scrollStart = false;
42 |
43 | calculateRootHeightElements();
44 |
45 | const { debounced: debouncedScrollToTopAwayFromOnePixel } = debounce(() => {
46 | scrollToTopAwayFromOnePixel();
47 | }, 250);
48 | const { debounced: debouncedCalculateRootHeightElements } = debounce(() => {
49 | calculateRootHeightElements();
50 | }, 250);
51 | const { debounced: debouncedScrollToTop2s, cancel: cancelDebouncedScrollToTop3s } = debounce(
52 | (data) => {
53 | const documentScrollHeight = getDocumentScrollHeight();
54 | // what if document changed height where it can be scrolled
55 | if (data.documentScrollHeight !== documentScrollHeight) return;
56 | window.scrollTo({ top: 0 });
57 | },
58 | 2000,
59 | );
60 |
61 | // no toolbars present, exit
62 | if (Math.round(svhEl.getBoundingClientRect().height) === lvhElBCR.height) return;
63 |
64 | requestAnimationFrame(() => {
65 | // 100lvh allows page to be scrolled in all browsers, but overscroll inside scrollable containers that allows page to be scrolled doesn't happen in Firefox.
66 | let extendHeight = 0;
67 |
68 | if (isFirefox) {
69 | extendHeight = 0.2;
70 | }
71 |
72 | if (isIOS) {
73 | // Toolbar only collapses if document scroll height is greater than 100lvh.
74 | // The minimum extended height is 5px. Otherwise, after toolbar collapses, and dvh applies, toolbar reverts back to expanded size.
75 | extendHeight = 5;
76 | }
77 | lvhEl.style.height = `calc(100lvh + ${extendHeight}px)`;
78 | });
79 |
80 | // fixes "scroll creeping" on Chromium devices, where if you scroll a tiny bit down to slide the toolbars but not beyond the threshold to activate hidding them, the toolbars don't hide and scroll amount commits to actual page scroll.
81 | const onScroll = (e: Event) => {
82 | if (scrollStart) {
83 | calculateRootHeightElements();
84 | }
85 | scrollStart = false;
86 |
87 | // if other elements extend the document height and is intended to be scrolled, don't scroll to top
88 | if (documentScrollHeight > lvhElBCR.height) return;
89 |
90 | if (isFirefox) {
91 | // Firefox, the 1st gestured overscroll won't close toolbar, instead scrolls page, in this case 0.2px down, subsequent scrolls will close toolbar
92 | debouncedScrollToTop2s({ documentScrollHeight });
93 | return;
94 | }
95 | if (!isIOS) {
96 | // on iOS, scroll event does fire upon sliding, causing a janky effect due to page scrolling to top and good change you don't scroll to bottom to collapse toolbar
97 | // one solution is to debounce the scrollTo top page, but the issue is that in iOS, visually the page doesn't scroll to the top so the top part is cut off.
98 | window.scrollTo({ top: 0 });
99 | return;
100 | }
101 |
102 | // another issue is that if user taps toolbar to expand, from then on, the toolbar can never be collapsed unless user scrolls at top of page (1 pixel away) then scrolls back down.
103 | debouncedScrollToTopAwayFromOnePixel();
104 | };
105 |
106 | function scrollToTopAwayFromOnePixel() {
107 | requestAnimationFrame(() => {
108 | if (window.scrollY <= 1) {
109 | return;
110 | }
111 | window.scrollBy({ top: -(window.scrollY - 1) });
112 | setTimeout(() => {
113 | window.scrollTo({ top: 0 });
114 | setTimeout(() => {
115 | scrollStart = false;
116 | });
117 | });
118 | });
119 | }
120 |
121 | window.addEventListener("scroll", onScroll, { passive: true });
122 | window.addEventListener("scrollend", () => {
123 | scrollStart = true;
124 | });
125 |
126 | // sliding toolbar triggers window resize
127 | window.addEventListener(
128 | "resize",
129 | () => {
130 | if (!isIOS) {
131 | calculateRootHeightElements();
132 | return;
133 | }
134 |
135 | // resize fires on every height change during iOS toolbar toggle animation, so debounce it
136 | debouncedCalculateRootHeightElements();
137 | },
138 | { passive: true },
139 | );
140 |
141 | function calculateRootHeightElements() {
142 | documentScrollHeight = getDocumentScrollHeight();
143 | lvhElBCR = getlvhHeight();
144 | }
145 |
146 | setTimeout(() => {
147 | scrollStart = true;
148 | });
149 | });
150 |
151 | return (
152 |
153 | {children}
154 |
155 |
156 |
tag use template literals",
67 | value: store.config.preTagWrapTemplateLiterals!,
68 | },
69 | stripStyleTag: {
70 | type: "checkbox",
71 | name: "Remove 
3 |