Added RichText/HTML to Markdown convertor
This commit is contained in:
DrMint
parent
b736660b06
commit
e5b4e7e19f
|
|
@ -13,7 +13,8 @@
|
|||
"next": "^12.0.7",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react-swipeable": "^6.2.0"
|
||||
"react-swipeable": "^6.2.0",
|
||||
"turndown": "^7.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/typography": "^0.5.0",
|
||||
|
|
@ -1208,6 +1209,11 @@
|
|||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/domino": {
|
||||
"version": "2.1.6",
|
||||
"resolved": "https://registry.npmjs.org/domino/-/domino-2.1.6.tgz",
|
||||
"integrity": "sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ=="
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.4.31",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.31.tgz",
|
||||
|
|
@ -3975,6 +3981,14 @@
|
|||
"typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
|
||||
}
|
||||
},
|
||||
"node_modules/turndown": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/turndown/-/turndown-7.1.1.tgz",
|
||||
"integrity": "sha512-BEkXaWH7Wh7e9bd2QumhfAXk5g34+6QUmmWx+0q6ThaVOLuLUqsnkq35HQ5SBHSaxjSfSM7US5o4lhJNH7B9MA==",
|
||||
"dependencies": {
|
||||
"domino": "^2.1.6"
|
||||
}
|
||||
},
|
||||
"node_modules/type-check": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||
|
|
@ -4947,6 +4961,11 @@
|
|||
"esutils": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"domino": {
|
||||
"version": "2.1.6",
|
||||
"resolved": "https://registry.npmjs.org/domino/-/domino-2.1.6.tgz",
|
||||
"integrity": "sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ=="
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.4.31",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.31.tgz",
|
||||
|
|
@ -6954,6 +6973,14 @@
|
|||
"tslib": "^1.8.1"
|
||||
}
|
||||
},
|
||||
"turndown": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/turndown/-/turndown-7.1.1.tgz",
|
||||
"integrity": "sha512-BEkXaWH7Wh7e9bd2QumhfAXk5g34+6QUmmWx+0q6ThaVOLuLUqsnkq35HQ5SBHSaxjSfSM7US5o4lhJNH7B9MA==",
|
||||
"requires": {
|
||||
"domino": "^2.1.6"
|
||||
}
|
||||
},
|
||||
"type-check": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@
|
|||
"next": "^12.0.7",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react-swipeable": "^6.2.0"
|
||||
"react-swipeable": "^6.2.0",
|
||||
"turndown": "^7.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/typography": "^0.5.0",
|
||||
|
|
|
|||
|
|
@ -126,9 +126,10 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
|||
${
|
||||
turnSubIntoContent
|
||||
? "mobile:translate-x-0 mobile:bottom-20 mobile:left-0 mobile:border-l-0"
|
||||
: !subPanelOpen
|
||||
? "mobile:translate-x-full"
|
||||
: ""
|
||||
}
|
||||
${subPanelOpen ? "" : "mobile:translate-x-full"}`}
|
||||
}`}
|
||||
>
|
||||
{props.subPanel}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -37,26 +37,40 @@ export default function Editor(props: EditorProps): JSX.Element {
|
|||
}}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 h-96">
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h2>Editor</h2>
|
||||
<textarea
|
||||
id="editorTextArea"
|
||||
onInput={handleInput}
|
||||
onPaste={(event) => {
|
||||
event.preventDefault();
|
||||
let paste = event.clipboardData.getData("text/html");
|
||||
paste = paste.replaceAll("<html>", "");
|
||||
paste = paste.replaceAll("<body>", "");
|
||||
paste = paste.replaceAll("</body>", "");
|
||||
paste = paste.replaceAll("</html>", "");
|
||||
paste = paste.replaceAll("<!--StartFragment-->", "");
|
||||
paste = paste.replaceAll("<!--EndFragment-->", "");
|
||||
event.target.value = paste;
|
||||
}}
|
||||
className="bg-mid rounded-xl p-8 w-full "
|
||||
className="bg-mid rounded-xl p-8 w-full font-monospace"
|
||||
value={markdown}
|
||||
/>
|
||||
|
||||
<h2 className="mt-4">Convert text to markdown</h2>
|
||||
<textarea
|
||||
readOnly
|
||||
id="htmlMdTextArea"
|
||||
onPaste={(event) => {
|
||||
const TurndownService = require("turndown").default;
|
||||
const turndownService = new TurndownService({
|
||||
headingStyle: "atx",
|
||||
codeBlockStyle: "fenced",
|
||||
bulletListMarker: "-",
|
||||
emDelimiter: "*",
|
||||
strongDelimiter: "**"
|
||||
});
|
||||
|
||||
let paste = event.clipboardData.getData("text/html");
|
||||
paste = paste.replace(/<\!--.*?-->/g, "");
|
||||
paste = turndownService.turndown(paste);
|
||||
paste = paste.replace(/<\!--.*?-->/g, "");
|
||||
event.target.value = paste;
|
||||
event.target.select();
|
||||
event.preventDefault();
|
||||
}}
|
||||
className="bg-mid rounded-xl p-8 w-full font-monospace"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Preview</h2>
|
||||
|
|
@ -67,7 +81,13 @@ export default function Editor(props: EditorProps): JSX.Element {
|
|||
</div>
|
||||
</ContentPanel>
|
||||
);
|
||||
return <AppLayout title="404" langui={langui} contentPanel={contentPanel} />;
|
||||
return (
|
||||
<AppLayout
|
||||
title="Markdawn Editor"
|
||||
langui={langui}
|
||||
contentPanel={contentPanel}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export const getStaticProps: GetStaticProps = async (context) => {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ module.exports = {
|
|||
fontFamily: {
|
||||
body: ["Zen Maru Gothic"],
|
||||
headers: ["Vollkorn"],
|
||||
monospace: ["monospace"],
|
||||
},
|
||||
screens: {
|
||||
desktop: { min: "70rem" },
|
||||
|
|
|
|||
Loading…
Reference in New Issue