Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Added RichText/HTML to Markdown convertor

This commit is contained in:
DrMint 2022-02-17 19:49:28 +01:00
parent b736660b06
commit e5b4e7e19f
5 changed files with 68 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
package-lock.json generated
View File

@ -13,7 +13,8 @@
"next": "^12.0.7", "next": "^12.0.7",
"react": "17.0.2", "react": "17.0.2",
"react-dom": "17.0.2", "react-dom": "17.0.2",
"react-swipeable": "^6.2.0" "react-swipeable": "^6.2.0",
"turndown": "^7.1.1"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/typography": "^0.5.0", "@tailwindcss/typography": "^0.5.0",
@ -1208,6 +1209,11 @@
"node": ">=6.0.0" "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": { "node_modules/electron-to-chromium": {
"version": "1.4.31", "version": "1.4.31",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.31.tgz", "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" "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": { "node_modules/type-check": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@ -4947,6 +4961,11 @@
"esutils": "^2.0.2" "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": { "electron-to-chromium": {
"version": "1.4.31", "version": "1.4.31",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.31.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.31.tgz",
@ -6954,6 +6973,14 @@
"tslib": "^1.8.1" "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": { "type-check": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

3
package.json
View File

@ -16,7 +16,8 @@
"next": "^12.0.7", "next": "^12.0.7",
"react": "17.0.2", "react": "17.0.2",
"react-dom": "17.0.2", "react-dom": "17.0.2",
"react-swipeable": "^6.2.0" "react-swipeable": "^6.2.0",
"turndown": "^7.1.1"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/typography": "^0.5.0", "@tailwindcss/typography": "^0.5.0",

5
src/components/AppLayout.tsx
View File

@ -126,9 +126,10 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
${ ${
turnSubIntoContent turnSubIntoContent
? "mobile:translate-x-0 mobile:bottom-20 mobile:left-0 mobile:border-l-0" ? "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} {props.subPanel}
</div> </div>

48
src/pages/editor.tsx
View File

@ -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> <div>
<h2>Editor</h2> <h2>Editor</h2>
<textarea <textarea
id="editorTextArea" id="editorTextArea"
onInput={handleInput} onInput={handleInput}
onPaste={(event) => { className="bg-mid rounded-xl p-8 w-full font-monospace"
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 "
value={markdown} 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>
<div> <div>
<h2>Preview</h2> <h2>Preview</h2>
@ -67,7 +81,13 @@ export default function Editor(props: EditorProps): JSX.Element {
</div> </div>
</ContentPanel> </ContentPanel>
); );
return <AppLayout title="404" langui={langui} contentPanel={contentPanel} />; return (
<AppLayout
title="Markdawn Editor"
langui={langui}
contentPanel={contentPanel}
/>
);
} }
export const getStaticProps: GetStaticProps = async (context) => { export const getStaticProps: GetStaticProps = async (context) => {

1
tailwind.config.js
View File

@ -12,6 +12,7 @@ module.exports = {
fontFamily: { fontFamily: {
body: ["Zen Maru Gothic"], body: ["Zen Maru Gothic"],
headers: ["Vollkorn"], headers: ["Vollkorn"],
monospace: ["monospace"],
}, },
screens: { screens: {
desktop: { min: "70rem" }, desktop: { min: "70rem" },