Skip to content

Commit 90f8908

Browse files
dionjwadionjwa
committed
Fix editor width and reduce debounce time
1 parent 6096a1b commit 90f8908

File tree

5 files changed

+79
-105
lines changed

5 files changed

+79
-105
lines changed

‎editor/package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎editor/src/components/sections/PanelCode.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ const LocalEditor: React.FC<{
4444
const onCodeOutputsUpdate = useCallback(
4545
debounce((outputs: MetaframeInputMap) => {
4646
setCode(outputs.text);
47-
}, 2000),
48-
[setCode]
47+
}, 500),
48+
[setCode],
4949
);
5050

5151
return (

‎editor/src/components/sections/settings/EditEditorWidth.tsx‎

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,16 @@
1-
import { useCallback } from 'react';
1+
import { useCallback } from "react";
22

3-
import { useFormik } from 'formik';
4-
import * as yup from 'yup';
3+
import { useFormik } from "formik";
4+
import * as yup from "yup";
55

6-
import {
7-
Input,
8-
Text,
9-
VStack,
10-
} from '@chakra-ui/react';
11-
import { useHashParam } from '@metapages/hash-query/react-hooks';
6+
import { Input, Text, VStack } from "@chakra-ui/react";
7+
import { useHashParam } from "@metapages/hash-query/react-hooks";
128

139
const validationSchema = yup.object({
1410
editorWidth: yup.string(),
1511
});
1612
interface FormType extends yup.InferType<typeof validationSchema> {}
1713

18-
1914
export const EditEditorWidth: React.FC = () => {
2015
const [editorWidth, setEditorWidth] = useHashParam("editorWidth", "80");
2116

@@ -30,24 +25,17 @@ export const EditEditorWidth: React.FC = () => {
3025

3126
const formik = useFormik({
3227
initialValues: {
33-
editorWidth: editorWidth || '',
28+
editorWidth: editorWidth || "",
3429
},
3530
onSubmit,
3631
validationSchema,
3732
});
3833

39-
4034
return (
41-
<VStack align="flex-start" w="100%" minW={'100%'} p={6}>
42-
<Text fontWeight={700}>Editor Width (ch)</Text>
35+
<VStack align="flex-start" w="100%" minW={"100%"} p={6}>
36+
<Text fontWeight={700}>Editor Width (e.g. 80ch)</Text>
4337
<form onSubmit={formik.handleSubmit}>
44-
<Input
45-
id="editorWidth"
46-
name="editorWidth"
47-
type="text"
48-
onChange={formik.handleChange}
49-
value={formik.values.editorWidth}
50-
/>
38+
<Input id="editorWidth" name="editorWidth" type="text" onChange={formik.handleChange} value={formik.values.editorWidth} />
5139
</form>
5240
</VStack>
5341
);

‎editor/src/components/sections/settings/EditMinimalHeader.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,16 @@ import { Checkbox, Text, VStack } from "@chakra-ui/react";
44
import { useHashParamBoolean } from "@metapages/hash-query/react-hooks";
55

66
export const EditMinimalHeader: React.FC = () => {
7-
const [minimalHeader, setMinimalHeader] =
8-
useHashParamBoolean("minimalheader");
7+
const [minimalHeader, setMinimalHeader] = useHashParamBoolean("minimalheader");
98

109
const handleChange = useCallback(() => {
11-
// console.log("minimalheader", values.minimalheader);
1210
setMinimalHeader(!minimalHeader);
1311
}, [minimalHeader, setMinimalHeader]);
1412

1513
return (
1614
<VStack align="flex-start" w="100%" minW={"100%"} p={6}>
1715
<Text fontWeight={700}>Minimal Header</Text>
18-
<Checkbox
19-
id="minimalheader"
20-
name="minimalheader"
21-
isChecked={minimalHeader}
22-
onChange={handleChange}
23-
></Checkbox>
16+
<Checkbox id="minimalheader" name="minimalheader" isChecked={minimalHeader} onChange={handleChange}></Checkbox>
2417
</VStack>
2518
);
2619
};

‎worker/index.html‎

Lines changed: 65 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -261,40 +261,11 @@
261261
// Load a single script, module, or css, awaiting until done
262262
const loadModuleOrCss = async (s) => {
263263
return new Promise((resolve, reject) => {
264-
// import maps are handled in the import-map-loader script
264+
265265
if (s.startsWith("{")) {
266266
resolve();
267267
return;
268268
}
269-
// if (!foundImportMap && s.startsWith("{")) {
270-
// try {
271-
// if (foundImportMap) {
272-
// window.logStderr(
273-
// "Found multiple import maps, only the first will be used"
274-
// );
275-
// return;
276-
// }
277-
// const maybeImports = JSON.parse(decodeURIComponent(s));
278-
// if (maybeImports.imports) {
279-
// foundImportMap = true;
280-
// var importMapElement = document.createElement("script");
281-
// importMapElement.innerHTML = decodeURIComponent(s);
282-
// importMapElement.type = "importmap";
283-
// document
284-
// .getElementsByTagName("head")[0]
285-
// .appendChild(importMapElement);
286-
// import maps do not fire onload events, so resolve here
287-
// the timing of this may not be perfect, so note this here
288-
// in case there are issues
289-
// resolve();
290-
// return;
291-
// }
292-
// } catch (e) {
293-
// console.log("Error loading module", s);
294-
// window.logStderr(`error loading module: ${s}`);
295-
// return;
296-
// }
297-
// } else {
298269
let elementTrimmed = s.trim();
299270
if (elementTrimmed.startsWith("<link")) {
300271
const href = /<link\s+.*href="([^"]*)"/.exec(elementTrimmed)
@@ -375,74 +346,88 @@
375346
};
376347

377348
const runmdFromUrl = async () => {
349+
let mdContent = getMdFromUrl();
350+
await runOnMarkdown(mdContent);
351+
}
352+
353+
const runmdFromInputs = async () => {
354+
await runOnMarkdown(metaframe.getInput("md"));
355+
}
356+
357+
let _lastMdContent = null;
358+
const runOnMarkdown = async (mdContent) => {
359+
378360
// ensure all modules are loaded
379361
await Promise.all(window.__metaframeMdAwaiting);
380-
// clear all children of root
381-
document
382-
.getElementById("root")
383-
.textContent = "";
384362

385363
const [___, hashParamsCurrent] = getUrlHashParamsFromHashString(window.location.hash);
386-
const editorWidth = hashParamsCurrent["editorWidth"] || 80;
364+
const editorWidth = hashParamsCurrent["editorWidth"] || "80ch";
387365
const inEditMode = hashParamsCurrent["edit"] === "true";
388366
const defaultBgColor = hashParamsCurrent["bgColor"];
389367
if (!inEditMode) {
390368
removeEditor();
391369
}
392-
370+
const widthRootCss = `calc(100% - ${editorWidth})`;
393371
// set up (maybe re-override globals)
394372
const root = document.getElementById("root");
395373
root.style.width = inEditMode
396-
? `calc(100% - ${editorWidth}ch)`
374+
? widthRootCss
397375
: "100%";
398376
if (defaultBgColor) {
399377
root.style.background = defaultBgColor;
400378
}
401379

402380
const editor = document.getElementById("editor-root");
403381
editor.style.width = inEditMode
404-
? `${editorWidth}ch`
382+
? `${editorWidth}`
405383
: "0%";
406384

407-
let mdContent = getMdFromUrl();
385+
if (_lastMdContent === mdContent) {
386+
return;
387+
}
388+
_lastMdContent = mdContent;
408389

409-
if (mdContent) {
390+
// clear all children of root
391+
document
392+
.getElementById("root")
393+
.textContent = "";
410394

411-
const metaframe = globalThis.metaframe;
412-
// prettier-ignore
413-
metaframe
414-
?.setOutput("md", mdContent);
395+
// let mdContent = getMdFromUrl();
415396

416-
const MD = markdownit({html: true, linkify: true, typographer: true});
417-
MD.use(MermaidPlugIn);
418-
MD.use(SingleScreenPlugin, options || {});
419-
MD.use(markdownAnchor, {
420-
level: [1, 2, 3]
421-
});
397+
const metaframe = globalThis.metaframe;
398+
// prettier-ignore
399+
metaframe
400+
?.setOutput("md", mdContent);
422401

423-
const rules = options
424-
?.dm === 'slide'
425-
? {
402+
const MD = markdownit({html: true, linkify: true, typographer: true});
403+
MD.use(MermaidPlugIn);
404+
MD.use(SingleScreenPlugin, options || {});
405+
MD.use(markdownAnchor, {
406+
level: [1, 2, 3]
407+
});
426408

427-
table_close: () => '</table>\n</div>\n</div>',
428-
table_open: () => '<div class="row"><div class="rowCellTable">\n<table>\n'
429-
}
430-
: {};
431-
432-
MD.renderer.rules = {
433-
...MD.renderer.rules,
434-
...rules
435-
};
436-
437-
try {
438-
var result = MD.render(mdContent);
439-
root.innerHTML = result;
440-
Mermaid.run();
441-
} catch (err) {
442-
console.error(err);
443-
var result = MD.render(`# Error rendering markdown \n\n - markdown: \`${mdContent}\` \n - err: ${err}`);
444-
root.innerHTML = result;
445-
}
409+
const rules = options
410+
?.dm === 'slide'
411+
? {
412+
413+
table_close: () => '</table>\n</div>\n</div>',
414+
table_open: () => '<div class="row"><div class="rowCellTable">\n<table>\n'
415+
}
416+
: {};
417+
418+
MD.renderer.rules = {
419+
...MD.renderer.rules,
420+
...rules
421+
};
422+
423+
try {
424+
var result = MD.render(mdContent);
425+
root.innerHTML = result;
426+
Mermaid.run();
427+
} catch (err) {
428+
console.error(err);
429+
var result = MD.render(`# Error rendering markdown \n\n - markdown: \`${mdContent}\` \n - err: ${err}`);
430+
root.innerHTML = result;
446431
}
447432
}
448433

@@ -457,6 +442,14 @@
457442
}
458443
var metaframe = globalThis.metaframe;
459444

445+
metaframe.onInput("md", (md) => {
446+
if (md) {
447+
setHashParamValueBase64EncodedInWindow("md", md);
448+
}
449+
});
450+
451+
metaframe.getInputs()["md"] && setHashParamValueBase64EncodedInWindow("md", metaframe.getInputs()["md"]);
452+
460453
metaframe
461454
.connected()
462455
.then(() => metaframe.log("connected"));

0 commit comments

Comments
 (0)