games/factorio-sites
1
0
Fork 0
mirror of https://github.com/barthuijgen/factorio-sites.git synced 2025-01-20 11:34:44 +02:00
Code Issues Releases Activity

Added markdown editor (#94)

Browse Source
This commit is contained in:
Alexander Horbunov 2021-04-02 01:04:39 +03:00 committed by Bart
parent 3232cab0cf
commit 11edeef488
5 changed files with 111 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
apps/blueprints/src/components/MDEditor.tsx Normal file
View File

@ -0,0 +1,41 @@
import React from "react";
import styled from "@emotion/styled";
import SimpleMDE, { SimpleMDEEditorProps } from "react-simplemde-editor";
import "easymde/dist/easymde.min.css";
const StyledSimpleMDE = styled(SimpleMDE)`
.editor-toolbar {
button.active,
button:hover {
background: #5d5d5d;
}
&.fullscreen {
background: #414040;
}
}
.editor-preview {
background: #414040;
}
.CodeMirror {
background: #414040;
color: white;
}
.CodeMirror-cursor {
border-color: white;
}
.EasyMDEContainer .CodeMirror-fullscreen {
border-left: none !important;
border-bottom: none !important;
}
`;
export const MDEditor: React.FC<SimpleMDEEditorProps> = (props) => {
return (
<StyledSimpleMDE options={{ spellChecker: false, sideBySideFullscreen: false }} {...props} />
);
};

6
apps/blueprints/src/pages/user/blueprint-create.tsx
View File

@ -20,6 +20,7 @@ import { validateCreateBlueprintForm } from "../../utils/validate";
import { ImageEditor } from "../../components/ImageEditor";
import { Select } from "../../components/Select";
import { Button } from "../../components/Button";
import { MDEditor } from "../../components/MDEditor";
import { pageHandler } from "../../utils/page-handler";
const FieldStyle = css`
@ -90,7 +91,10 @@ export const UserBlueprintCreate: NextPage = () => {
css={FieldStyle}
>
<FormLabel>Description</FormLabel>
<Textarea {...field} />
<MDEditor
value={field.value}
onChange={(value) => setFieldValue("description", value)}
/>
<FormErrorMessage>{meta.error}</FormErrorMessage>
</FormControl>
)}

6
apps/blueprints/src/pages/user/blueprint/[blueprintId].tsx
View File

@ -28,6 +28,7 @@ import { validateBlueprintString, validateRequired } from "../../../utils/valida
import { ImageEditor } from "../../../components/ImageEditor";
import { Select } from "../../../components/Select";
import { Button } from "../../../components/Button";
import { MDEditor } from "../../../components/MDEditor";
const FieldStyle = css`
margin-bottom: 1rem;
@ -123,7 +124,10 @@ const FormContent: React.FC<{ initialString: string }> = ({ initialString }) =>
css={FieldStyle}
>
<FormLabel>Description</FormLabel>
<Textarea {...field} />
<MDEditor
value={field.value}
onChange={(value) => setFieldValue("description", value)}
/>
<FormErrorMessage>{meta.error}</FormErrorMessage>
</FormControl>
)}

1
package.json
View File

@ -61,6 +61,7 @@
"react-map-interaction": "file:.yalc/react-map-interaction",
"react-markdown": "5.0.3",
"react-multi-select-component": "4.0.0",
"react-simplemde-editor": "4.1.3",
"sharp": "0.28.0",
"ws": "7.4.4"
},

59
yarn.lock
View File

@ -4225,6 +4225,13 @@
resolved "https://registry.yarnpkg.com/@types/bcrypt/-/bcrypt-3.0.0.tgz#851489a9065a067cb7f3c9cbe4ce9bed8bba0876"
integrity sha512-nohgNyv+1ViVcubKBh0+XiNJ3dO8nYu///9aJ4cgSqv70gBL+94SNy/iC2NLzKPT2Zt/QavrOkBVbZRLZmw6NQ==
"@types/codemirror@^0.0.88":
version "0.0.88"
resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-0.0.88.tgz#429e3462ce22865dc40cc1cb27862edaeda0bbab"
integrity sha512-FI9BvlO+SIEmKoIdrS9uphasiHJ/JbeUsAbVTdklBOcmnr/bQpJ6QaCw540FY98LGdDNl1Nyn7erGxo0eD2gOg==
dependencies:
"@types/tern" "*"
"@types/cookie@0.4.0":
version "0.4.0"
resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.0.tgz#14f854c0f93d326e39da6e3b6f34f7d37513d108"
@ -4341,6 +4348,11 @@
resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.1.tgz#459c65fa1867dafe6a8f322c4c51695663cc55e9"
integrity sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w==
"@types/marked@^0.7.4":
version "0.7.4"
resolved "https://registry.yarnpkg.com/@types/marked/-/marked-0.7.4.tgz#607685669bb1bbde2300bc58ba43486cbbee1f0a"
integrity sha512-fdg0NO4qpuHWtZk6dASgsrBggY+8N4dWthl1bAQG9ceKUNKFjqpHaDKCAhRUI6y8vavG7hLSJ4YBwJtZyZEXqw==
"@types/mdast@^3.0.0", "@types/mdast@^3.0.3":
version "3.0.3"
resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.3.tgz#2d7d671b1cd1ea3deb306ea75036c2a0407d2deb"
@ -4488,6 +4500,13 @@
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
"@types/tern@*":
version "0.23.3"
resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.3.tgz#4b54538f04a88c9ff79de1f6f94f575a7f339460"
integrity sha512-imDtS4TAoTcXk0g7u4kkWqedB3E4qpjXzCpD2LU5M5NAXHzCDsypyvXSaG7mM8DKYkCRa7tFp4tS/lp/Wo7Q3w==
dependencies:
"@types/estree" "*"
"@types/tinycolor2@1.4.2":
version "1.4.2"
resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.2.tgz#721ca5c5d1a2988b4a886e35c2ffc5735b6afbdf"
@ -6416,6 +6435,18 @@ code-point-at@^1.0.0:
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
codemirror-spell-checker@1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz#1c660f9089483ccb5113b9ba9ca19c3f4993371e"
integrity sha1-HGYPkIlIPMtRE7m6nKGcP0mTNx4=
dependencies:
typo-js "*"
codemirror@^5.59.2:
version "5.60.0"
resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.60.0.tgz#00a8cfd287d5d8737ceb73987f04aee2fe5860da"
integrity sha512-AEL7LhFOlxPlCL8IdTcJDblJm8yrAGib7I+DErJPdZd4l6imx8IMgKK3RblVgBQqz3TZJR4oknQ03bz+uNjBYA==
collect-v8-coverage@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
@ -7553,6 +7584,15 @@ earcut@^2.2.2:
resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.2.2.tgz#41b0bc35f63e0fe80da7cddff28511e7e2e80d11"
integrity sha512-eZoZPPJcUHnfRZ0PjLvx2qBordSiO8ofC3vt+qACLM95u+4DovnbYNpQtJh0DNsWj8RnxrQytD4WA8gj5cRIaQ==
easymde@^2.10.1:
version "2.14.0"
resolved "https://registry.yarnpkg.com/easymde/-/easymde-2.14.0.tgz#ba556954ec3a8084fc2984499f58945c81b689ec"
integrity sha512-yQh3EF1amknaxDhXE1L28kwknREU8S19o01ki0t6Q8ThECCipXTOM3E/LL32Ia5D3AsCBRbC1/fT5tpLniVGuw==
dependencies:
codemirror "^5.59.2"
codemirror-spell-checker "1.1.2"
marked "^2.0.0"
ecc-jsbn@~0.1.1:
version "0.1.2"
resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@ -11371,6 +11411,11 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"
marked@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.1.tgz#5e7ed7009bfa5c95182e4eb696f85e948cefcee3"
integrity sha512-5+/fKgMv2hARmMW7DOpykr2iLhl0NgjyELk5yn92iE7z8Se1IS9n3UsFm86hFXIkvMBmVxki8+ckcpjBeyo/hw==
maxrects-packer@^2.6.0:
version "2.7.2"
resolved "https://registry.yarnpkg.com/maxrects-packer/-/maxrects-packer-2.7.2.tgz#47405e62353af117bab24874896839ec4f4e48db"
@ -13909,6 +13954,15 @@ react-remove-scroll@2.4.1:
use-callback-ref "^1.2.3"
use-sidecar "^1.0.1"
react-simplemde-editor@4.1.3:
version "4.1.3"
resolved "https://registry.yarnpkg.com/react-simplemde-editor/-/react-simplemde-editor-4.1.3.tgz#e3f5eba988817035c5aa1cae8f1a9d5dfec6081a"
integrity sha512-MJ3SDYfYsNnEcmLzQCqPERDaarllwbxR06oyOQ+jJn0517HYIcQCfFoOIT4uewRY14g05n/Ux1Nka88Bocrdcg==
dependencies:
"@types/codemirror" "^0.0.88"
"@types/marked" "^0.7.4"
easymde "^2.10.1"
react-style-singleton@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"
@ -16145,6 +16199,11 @@ typescript@4.2.3:
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.3.tgz#39062d8019912d43726298f09493d598048c1ce3"
integrity sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==
typo-js@*:
version "1.2.0"
resolved "https://registry.yarnpkg.com/typo-js/-/typo-js-1.2.0.tgz#dbe58de3a6dcbbe260b78bf290ee761b008a28e8"
integrity sha512-dELuLBVa2jvWdU/CHTKi2L/POYaRupv942k+vRsFXsM17acXesQGAiGCio82RW7fvcr7bkuD/Zj8XpUh6aPC2A==
unbox-primitive@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"