diff --git a/client/package-lock.json b/client/package-lock.json index f69a43cd..0c6f5c18 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -11,6 +11,7 @@ "connected-react-router": "^6.9.3", "date-fns": "^2.29.1", "dequal": "^2.0.3", + "easymde": "^2.18.0", "history": "^4.10.1", "i18next": "^21.8.14", "i18next-browser-languagedetector": "^6.1.4", @@ -33,6 +34,7 @@ "react-redux": "^7.2.8", "react-router-dom": "^5.3.1", "react-scripts": "5.0.1", + "react-simplemde-editor": "^5.2.0", "react-textarea-autosize": "^8.3.4", "redux": "^4.2.0", "redux-logger": "^3.0.6", @@ -3695,6 +3697,14 @@ "@types/node": "*" } }, + "node_modules/@types/codemirror": { + "version": "5.60.5", + "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.5.tgz", + "integrity": "sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg==", + "dependencies": { + "@types/tern": "*" + } + }, "node_modules/@types/connect": { "version": "3.4.35", "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz", @@ -3833,6 +3843,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "node_modules/@types/marked": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.0.7.tgz", + "integrity": "sha512-eEAhnz21CwvKVW+YvRvcTuFKNU9CV1qH+opcgVK3pIMI6YZzDm6gc8o2vHjldFk6MGKt5pueSB7IOpvpx5Qekw==" + }, "node_modules/@types/mdast": { "version": "3.0.10", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz", @@ -3970,6 +3985,14 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "node_modules/@types/tern": { + "version": "0.23.4", + "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.4.tgz", + "integrity": "sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==", + "dependencies": { + "@types/estree": "*" + } + }, "node_modules/@types/trusted-types": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", @@ -6172,6 +6195,19 @@ "node": ">= 4.0" } }, + "node_modules/codemirror": { + "version": "5.65.9", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.9.tgz", + "integrity": "sha512-19Jox5sAKpusTDgqgKB5dawPpQcY+ipQK7xoEI+MVucEF9qqFaXpeqY1KaoyGBso/wHQoDa4HMMxMjdsS3Zzzw==" + }, + "node_modules/codemirror-spell-checker": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz", + "integrity": "sha512-2Tl6n0v+GJRsC9K3MLCdLaMOmvWL0uukajNJseorZJsslaxZyZMgENocPU8R0DyoTAiKsyqiemSOZo7kjGV0LQ==", + "dependencies": { + "typo-js": "*" + } + }, "node_modules/collect-v8-coverage": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", @@ -7419,6 +7455,18 @@ "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==" }, + "node_modules/easymde": { + "version": "2.18.0", + "resolved": "https://registry.npmjs.org/easymde/-/easymde-2.18.0.tgz", + "integrity": "sha512-IxVVUxNWIoXLeqtBU4BLc+eS/ScYhT1Dcb6yF5Wchoj1iXAV+TIIDWx+NCaZhY7RcSHqDPKllbYq7nwGKILnoA==", + "dependencies": { + "@types/codemirror": "^5.60.4", + "@types/marked": "^4.0.7", + "codemirror": "^5.63.1", + "codemirror-spell-checker": "1.1.2", + "marked": "^4.1.0" + } + }, "node_modules/ecc-jsbn": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", @@ -14763,6 +14811,17 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/marked": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.2.2.tgz", + "integrity": "sha512-JjBTFTAvuTgANXx82a5vzK9JLSMoV6V3LBVn4Uhdso6t7vXrGx7g1Cd2r6NYSsxrYbQGFCMqBDhFHyK5q2UvcQ==", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 12" + } + }, "node_modules/mdast-util-definitions": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.1.tgz", @@ -20516,6 +20575,19 @@ "react": "^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-simplemde-editor": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-simplemde-editor/-/react-simplemde-editor-5.2.0.tgz", + "integrity": "sha512-GkTg1MlQHVK2Rks++7sjuQr/GVS/xm6y+HchZ4GPBWrhcgLieh4CjK04GTKbsfYorSRYKa0n37rtNSJmOzEDkQ==", + "dependencies": { + "@types/codemirror": "~5.60.5" + }, + "peerDependencies": { + "easymde": ">= 2.0.0 < 3.0.0", + "react": ">=16.8.2", + "react-dom": ">=16.8.2" + } + }, "node_modules/react-test-renderer": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-17.0.2.tgz", @@ -23873,6 +23945,11 @@ "typescript-compare": "^0.0.2" } }, + "node_modules/typo-js": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.2.2.tgz", + "integrity": "sha512-C7pYBQK17EjSg8tVNY91KHdUt5Nf6FMJ+c3js076quPmBML57PmNMzAcIq/2kf/hSYtFABNDIYNYlJRl5BJhGw==" + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -27814,6 +27891,14 @@ "@types/node": "*" } }, + "@types/codemirror": { + "version": "5.60.5", + "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.5.tgz", + "integrity": "sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg==", + "requires": { + "@types/tern": "*" + } + }, "@types/connect": { "version": "3.4.35", "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz", @@ -27952,6 +28037,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "@types/marked": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.0.7.tgz", + "integrity": "sha512-eEAhnz21CwvKVW+YvRvcTuFKNU9CV1qH+opcgVK3pIMI6YZzDm6gc8o2vHjldFk6MGKt5pueSB7IOpvpx5Qekw==" + }, "@types/mdast": { "version": "3.0.10", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz", @@ -28089,6 +28179,14 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "@types/tern": { + "version": "0.23.4", + "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.4.tgz", + "integrity": "sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==", + "requires": { + "@types/estree": "*" + } + }, "@types/trusted-types": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", @@ -29733,6 +29831,19 @@ "q": "^1.1.2" } }, + "codemirror": { + "version": "5.65.9", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.9.tgz", + "integrity": "sha512-19Jox5sAKpusTDgqgKB5dawPpQcY+ipQK7xoEI+MVucEF9qqFaXpeqY1KaoyGBso/wHQoDa4HMMxMjdsS3Zzzw==" + }, + "codemirror-spell-checker": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz", + "integrity": "sha512-2Tl6n0v+GJRsC9K3MLCdLaMOmvWL0uukajNJseorZJsslaxZyZMgENocPU8R0DyoTAiKsyqiemSOZo7kjGV0LQ==", + "requires": { + "typo-js": "*" + } + }, "collect-v8-coverage": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", @@ -30645,6 +30756,18 @@ "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==" }, + "easymde": { + "version": "2.18.0", + "resolved": "https://registry.npmjs.org/easymde/-/easymde-2.18.0.tgz", + "integrity": "sha512-IxVVUxNWIoXLeqtBU4BLc+eS/ScYhT1Dcb6yF5Wchoj1iXAV+TIIDWx+NCaZhY7RcSHqDPKllbYq7nwGKILnoA==", + "requires": { + "@types/codemirror": "^5.60.4", + "@types/marked": "^4.0.7", + "codemirror": "^5.63.1", + "codemirror-spell-checker": "1.1.2", + "marked": "^4.1.0" + } + }, "ecc-jsbn": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", @@ -36172,6 +36295,11 @@ "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.2.tgz", "integrity": "sha512-y8j3a5/DkJCmS5x4dMCQL+OR0+2EAq3DOtio1COSHsmW2BGXnNCK3v12hJt1LrUz5iZH5g0LmuYOjDdI+czghA==" }, + "marked": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.2.2.tgz", + "integrity": "sha512-JjBTFTAvuTgANXx82a5vzK9JLSMoV6V3LBVn4Uhdso6t7vXrGx7g1Cd2r6NYSsxrYbQGFCMqBDhFHyK5q2UvcQ==" + }, "mdast-util-definitions": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.1.tgz", @@ -40120,6 +40248,14 @@ "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0" } }, + "react-simplemde-editor": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-simplemde-editor/-/react-simplemde-editor-5.2.0.tgz", + "integrity": "sha512-GkTg1MlQHVK2Rks++7sjuQr/GVS/xm6y+HchZ4GPBWrhcgLieh4CjK04GTKbsfYorSRYKa0n37rtNSJmOzEDkQ==", + "requires": { + "@types/codemirror": "~5.60.5" + } + }, "react-test-renderer": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-17.0.2.tgz", @@ -42736,6 +42872,11 @@ "typescript-compare": "^0.0.2" } }, + "typo-js": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.2.2.tgz", + "integrity": "sha512-C7pYBQK17EjSg8tVNY91KHdUt5Nf6FMJ+c3js076quPmBML57PmNMzAcIq/2kf/hSYtFABNDIYNYlJRl5BJhGw==" + }, "unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/client/src/components/CardModal/DescriptionEdit.jsx b/client/src/components/CardModal/DescriptionEdit.jsx index 64125d32..9b8c8539 100755 --- a/client/src/components/CardModal/DescriptionEdit.jsx +++ b/client/src/components/CardModal/DescriptionEdit.jsx @@ -1,18 +1,15 @@ -import React, { useCallback, useImperativeHandle, useState, useMemo } from 'react'; +import React, { useCallback, useImperativeHandle, useMemo, useState } from 'react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import { Button, Form } from 'semantic-ui-react'; import SimpleMDE from 'react-simplemde-editor'; -import { useClosableForm, useField } from '../../hooks'; - import styles from './DescriptionEdit.module.scss'; -import 'easymde/dist/easymde.min.css'; const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => { const [t] = useTranslation(); const [isOpened, setIsOpened] = useState(false); - const [value, , setValue] = useField(null); + const [value, setValue] = useState(null); const open = useCallback(() => { setIsOpened(true); @@ -54,14 +51,12 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate }, [close], ); - const [, handleControlMouseOver, handleControlMouseOut] = useClosableForm(close, isOpened); - const handleSubmit = useCallback(() => { close(); }, [close]); - const mdEditorOptions = useMemo(() => { - return { + const mdEditorOptions = useMemo( + () => ({ autofocus: true, spellChecker: false, status: false, @@ -79,15 +74,14 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate }, 'link', 'image', '|', - 'fullscreen', - '|', 'undo', 'redo', '|', 'guide', ], - }; - }, []); + }), + [], + ); if (!isOpened) { return React.cloneElement(children, { @@ -99,21 +93,15 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
-
{/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */} -
); diff --git a/client/src/components/Root.jsx b/client/src/components/Root.jsx index 664a36bb..ea2bcd18 100755 --- a/client/src/components/Root.jsx +++ b/client/src/components/Root.jsx @@ -11,6 +11,7 @@ import NotFound from './NotFound'; import 'react-datepicker/dist/react-datepicker.css'; import 'photoswipe/dist/photoswipe.css'; +import 'easymde/dist/easymde.min.css'; import '../lib/custom-ui/styles.css'; import '../styles.module.scss';