From facd55b9aa07032a64208027b2092f5ed1264f2c Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Tue, 9 Feb 2021 20:09:50 +0100 Subject: [PATCH] Rebase metadata gui editor Signed-off-by: Tilman Vatteroth --- package.json | 361 +++++++++--------- public/locales/en.json | 57 ++- .../common/fork-awesome/fork-awesome-icon.tsx | 13 +- .../document-bar/share/share-modal.tsx | 2 +- .../metadata-editor/breaks-metadata-input.tsx | 43 +++ .../datalist-metadata-input.tsx | 29 ++ .../metadata-editor/input-label.scss | 9 + .../metadata-editor/input-label.tsx | 23 ++ .../metadata-editor/metadata-editor.tsx | 120 ++++++ .../metadata-editor/string-metadata-input.tsx | 24 ++ .../string-metadata-textarea.tsx | 23 ++ .../metadata-editor/tags-metadata-input.scss | 9 + .../metadata-editor/tags-metadata-input.tsx | 60 +++ .../text-direction-metadata-input.tsx | 45 +++ .../sidebar/metadata-editor-sidebar-entry.tsx | 25 ++ .../editor-page/sidebar/sidebar.tsx | 2 + yarn.lock | 5 + 17 files changed, 644 insertions(+), 206 deletions(-) create mode 100644 src/components/editor-page/metadata-editor/breaks-metadata-input.tsx create mode 100644 src/components/editor-page/metadata-editor/datalist-metadata-input.tsx create mode 100644 src/components/editor-page/metadata-editor/input-label.scss create mode 100644 src/components/editor-page/metadata-editor/input-label.tsx create mode 100644 src/components/editor-page/metadata-editor/metadata-editor.tsx create mode 100644 src/components/editor-page/metadata-editor/string-metadata-input.tsx create mode 100644 src/components/editor-page/metadata-editor/string-metadata-textarea.tsx create mode 100644 src/components/editor-page/metadata-editor/tags-metadata-input.scss create mode 100644 src/components/editor-page/metadata-editor/tags-metadata-input.tsx create mode 100644 src/components/editor-page/metadata-editor/text-direction-metadata-input.tsx create mode 100644 src/components/editor-page/sidebar/metadata-editor-sidebar-entry.tsx diff --git a/package.json b/package.json index 04b1ea4421..ff1e2cce9d 100644 --- a/package.json +++ b/package.json @@ -1,184 +1,185 @@ { - "name": "react_client", - "license": "AGPL-3.0", - "version": "0.1.0", - "dependencies": { - "@craco/craco": "6.1.1", - "@fontsource/source-sans-pro": "4.2.2", - "@hedgedoc/markdown-it-task-lists": "1.0.0", - "@matejmazur/react-katex": "3.1.3", - "@testing-library/jest-dom": "5.11.9", - "@testing-library/react": "11.2.5", - "@testing-library/user-event": "12.8.3", - "@types/codemirror": "0.0.108", - "@types/d3-graphviz": "2.6.6", - "@types/diff": "5.0.0", - "@types/domhandler": "2.4.1", - "@types/highlight.js": "9.12.4", - "@types/jest": "26.0.20", - "@types/js-yaml": "4.0.0", - "@types/luxon": "1.26.2", - "@types/markdown-it": "12.0.1", - "@types/markdown-it-container": "2.0.3", - "@types/markdown-it-plantuml": "1.4.0", - "@types/mermaid": "8.2.2", - "@types/node": "12.20.5", - "@types/node-sass": "4.11.1", - "@types/react": "17.0.3", - "@types/react-bootstrap-typeahead": "5.1.3", - "@types/react-dom": "17.0.2", - "@types/react-html-parser": "2.0.1", - "@types/react-redux": "7.1.16", - "@types/react-router": "5.1.12", - "@types/react-router-bootstrap": "0.24.5", - "@types/react-router-dom": "5.1.7", - "@types/uuid": "8.3.0", - "@typescript-eslint/eslint-plugin": "4.17.0", - "@typescript-eslint/parser": "4.17.0", - "abcjs": "6.0.0-beta.30", - "bootstrap": "4.6.0", - "browserstack-cypress-cli": "1.8.0", - "codemirror": "5.59.4", - "copy-webpack-plugin": "6.4.1", - "d3-graphviz": "3.1.0", - "diff": "5.0.0", - "emoji-picker-element": "1.4.0", - "emojibase-data": "5.1.1", - "eslint-config-react-app": "6.0.0", - "eslint-plugin-flowtype": "5.3.1", - "eslint-plugin-import": "2.22.1", - "eslint-plugin-jsx-a11y": "6.4.1", - "eslint-plugin-node": "11.1.0", - "eslint-plugin-promise": "4.3.1", - "fast-deep-equal": "3.1.3", - "firacode": "5.2.0", - "flowchart.js": "1.15.0", - "fork-awesome": "1.1.7", - "highlight.js": "10.6.0", - "i18next": "19.9.2", - "i18next-browser-languagedetector": "6.0.1", - "i18next-http-backend": "1.1.1", - "js-yaml": "4.0.0", - "katex": "0.13.0", - "luxon": "1.26.0", - "markdown-it": "12.0.4", - "markdown-it-abbr": "1.0.4", - "markdown-it-anchor": "7.1.0", - "markdown-it-container": "3.0.0", - "markdown-it-deflist": "2.1.0", - "markdown-it-emoji": "2.0.0", - "markdown-it-footnote": "3.0.2", - "markdown-it-front-matter": "0.2.3", - "markdown-it-imsize": "2.0.1", - "markdown-it-ins": "3.0.1", - "markdown-it-mark": "3.0.1", - "markdown-it-mathjax": "2.0.0", - "markdown-it-plantuml": "1.4.1", - "markdown-it-regex": "0.2.0", - "markdown-it-sub": "1.0.0", - "markdown-it-sup": "1.0.0", - "markdown-it-task-lists": "2.1.1", - "markdown-it-toc-done-right": "4.2.0", - "markmap-common": "0.1.3", - "markmap-lib": "0.11.2", - "markmap-view": "0.2.2", - "mermaid": "8.9.2", - "node-sass": "4.14.1", - "react": "17.0.1", - "react-bootstrap": "1.5.2", - "react-bootstrap-typeahead": "5.1.4", - "react-codemirror2": "7.2.1", - "react-diff-viewer": "3.1.1", - "react-dom": "17.0.1", - "react-html-parser": "2.0.2", - "react-i18next": "11.8.10", - "react-redux": "7.2.2", - "react-router": "5.2.0", - "react-router-bootstrap": "0.25.0", - "react-router-dom": "5.2.0", - "react-scripts": "4.0.3", - "react-use": "17.2.1", - "redux": "4.0.5", - "sanitize-filename": "1.6.3", - "ts-mockery": "1.2.0", - "typescript": "4.2.3", - "use-resize-observer": "7.0.0", - "uuid": "8.3.2", - "vega": "5.19.1", - "vega-embed": "6.15.2", - "vega-lite": "5.0.0" + "name": "react_client", + "license": "AGPL-3.0", + "version": "0.1.0", + "dependencies": { + "@craco/craco": "6.1.1", + "@fontsource/source-sans-pro": "4.2.2", + "@hedgedoc/markdown-it-task-lists": "1.0.0", + "@matejmazur/react-katex": "3.1.3", + "@testing-library/jest-dom": "5.11.9", + "@testing-library/react": "11.2.5", + "@testing-library/user-event": "12.8.3", + "@types/codemirror": "0.0.108", + "@types/d3-graphviz": "2.6.6", + "@types/diff": "5.0.0", + "@types/domhandler": "2.4.1", + "@types/highlight.js": "9.12.4", + "@types/jest": "26.0.20", + "@types/js-yaml": "4.0.0", + "@types/luxon": "1.26.2", + "@types/markdown-it": "12.0.1", + "@types/markdown-it-container": "2.0.3", + "@types/markdown-it-plantuml": "1.4.0", + "@types/mermaid": "8.2.2", + "@types/node": "12.20.5", + "@types/node-sass": "4.11.1", + "@types/react": "17.0.3", + "@types/react-bootstrap-typeahead": "5.1.3", + "@types/react-dom": "17.0.2", + "@types/react-html-parser": "2.0.1", + "@types/react-redux": "7.1.16", + "@types/react-router": "5.1.12", + "@types/react-router-bootstrap": "0.24.5", + "@types/react-router-dom": "5.1.7", + "@types/uuid": "8.3.0", + "@typescript-eslint/eslint-plugin": "4.17.0", + "@typescript-eslint/parser": "4.17.0", + "abcjs": "6.0.0-beta.30", + "bootstrap": "4.6.0", + "browserstack-cypress-cli": "1.8.0", + "codemirror": "5.59.4", + "copy-webpack-plugin": "6.4.1", + "d3-graphviz": "3.1.0", + "diff": "5.0.0", + "emoji-picker-element": "1.4.0", + "emojibase-data": "5.1.1", + "eslint-config-react-app": "6.0.0", + "eslint-plugin-flowtype": "5.3.1", + "eslint-plugin-import": "2.22.1", + "eslint-plugin-jsx-a11y": "6.4.1", + "eslint-plugin-node": "11.1.0", + "eslint-plugin-promise": "4.3.1", + "fast-deep-equal": "3.1.3", + "firacode": "5.2.0", + "flowchart.js": "1.15.0", + "fork-awesome": "1.1.7", + "highlight.js": "10.6.0", + "i18next": "19.9.2", + "i18next-browser-languagedetector": "6.0.1", + "i18next-http-backend": "1.1.1", + "iso-639-1": "2.1.8", + "js-yaml": "4.0.0", + "katex": "0.13.0", + "luxon": "1.26.0", + "markdown-it": "12.0.4", + "markdown-it-abbr": "1.0.4", + "markdown-it-anchor": "7.1.0", + "markdown-it-container": "3.0.0", + "markdown-it-deflist": "2.1.0", + "markdown-it-emoji": "2.0.0", + "markdown-it-footnote": "3.0.2", + "markdown-it-front-matter": "0.2.3", + "markdown-it-imsize": "2.0.1", + "markdown-it-ins": "3.0.1", + "markdown-it-mark": "3.0.1", + "markdown-it-mathjax": "2.0.0", + "markdown-it-plantuml": "1.4.1", + "markdown-it-regex": "0.2.0", + "markdown-it-sub": "1.0.0", + "markdown-it-sup": "1.0.0", + "markdown-it-task-lists": "2.1.1", + "markdown-it-toc-done-right": "4.2.0", + "markmap-common": "0.1.3", + "markmap-lib": "0.11.2", + "markmap-view": "0.2.2", + "mermaid": "8.9.2", + "node-sass": "4.14.1", + "react": "17.0.1", + "react-bootstrap": "1.5.2", + "react-bootstrap-typeahead": "5.1.4", + "react-codemirror2": "7.2.1", + "react-diff-viewer": "3.1.1", + "react-dom": "17.0.1", + "react-html-parser": "2.0.2", + "react-i18next": "11.8.10", + "react-redux": "7.2.2", + "react-router": "5.2.0", + "react-router-bootstrap": "0.25.0", + "react-router-dom": "5.2.0", + "react-scripts": "4.0.3", + "react-use": "17.2.1", + "redux": "4.0.5", + "sanitize-filename": "1.6.3", + "ts-mockery": "1.2.0", + "typescript": "4.2.3", + "use-resize-observer": "7.0.0", + "uuid": "8.3.2", + "vega": "5.19.1", + "vega-embed": "6.15.2", + "vega-lite": "5.0.0" + }, + "scripts": { + "start": "cross-env PORT=3001 craco start", + "start:test": "cross-env PORT=3001 REACT_APP_TEST_MODE=true craco start", + "start:for-real-backend": "cross-env REACT_APP_BACKEND=http://localhost:3000 yarn start", + "serve:build": "http-server build/ -s -p 3001 -P \"http://localhost:3001?\"", + "build:test": "cross-env REACT_APP_TEST_MODE=true craco build", + "build:production": "craco build", + "analyze": "cross-env ANALYZE=true craco build", + "test": "craco test", + "lint": "eslint --max-warnings=0 --ext .ts,.tsx src", + "eject": "react-scripts eject", + "cy:browserstack": "browserstack-cypress run --sync", + "cy:open": "cypress open", + "cy:run:chrome": "cypress run --browser chrome", + "cy:run:firefox": "cypress run --browser firefox" + }, + "eslintConfig": { + "parserOptions": { + "tsconfigRootDir": "", + "project": [ + "./tsconfig.json" + ] }, - "scripts": { - "start": "cross-env PORT=3001 craco start", - "start:test": "cross-env PORT=3001 REACT_APP_TEST_MODE=true craco start", - "start:for-real-backend": "cross-env REACT_APP_BACKEND=http://localhost:3000 yarn start", - "serve:build": "http-server build/ -s -p 3001 -P \"http://localhost:3001?\"", - "build:test": "cross-env REACT_APP_TEST_MODE=true craco build", - "build:production": "craco build", - "analyze": "cross-env ANALYZE=true craco build", - "test": "craco test", - "lint": "eslint --max-warnings=0 --ext .ts,.tsx src", - "eject": "react-scripts eject", - "cy:browserstack": "browserstack-cypress run --sync", - "cy:open": "cypress open", - "cy:run:chrome": "cypress run --browser chrome", - "cy:run:firefox": "cypress run --browser firefox" + "rules": { + "no-use-before-define": "off", + "no-debugger": "warn", + "default-param-last": "off" }, - "eslintConfig": { - "parserOptions": { - "tsconfigRootDir": "", - "project": [ - "./tsconfig.json" - ] - }, - "rules": { - "no-use-before-define": "off", - "no-debugger": "warn", - "default-param-last": "off" - }, - "plugins": [ - "@typescript-eslint" - ], - "extends": [ - "react-app", - "eslint:recommended", - "plugin:@typescript-eslint/eslint-recommended", - "plugin:@typescript-eslint/recommended", - "plugin:@typescript-eslint/recommended-requiring-type-checking", - "plugin:import/recommended", - "plugin:import/typescript" - ] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, - "devDependencies": { - "@cypress/webpack-preprocessor": "5.6.0", - "@testing-library/cypress": "7.0.4", - "@types/redux-devtools": "3.0.47", - "@types/redux-devtools-extension": "2.13.2", - "cross-env": "7.0.3", - "cypress": "6.6.0", - "cypress-commands": "1.1.0", - "cypress-file-upload": "5.0.2", - "eslint-plugin-chai-friendly": "0.6.0", - "eslint-plugin-cypress": "2.11.2", - "http-server": "0.12.3", - "redux-devtools": "3.7.0", - "redux-devtools-extension": "2.13.9", - "ts-loader": "8.0.18", - "webpack-bundle-analyzer": "4.4.0" - }, - "resolutions": { - "cypress": "6.6.0" - } + "plugins": [ + "@typescript-eslint" + ], + "extends": [ + "react-app", + "eslint:recommended", + "plugin:@typescript-eslint/eslint-recommended", + "plugin:@typescript-eslint/recommended", + "plugin:@typescript-eslint/recommended-requiring-type-checking", + "plugin:import/recommended", + "plugin:import/typescript" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "devDependencies": { + "@cypress/webpack-preprocessor": "5.6.0", + "@testing-library/cypress": "7.0.4", + "@types/redux-devtools": "3.0.47", + "@types/redux-devtools-extension": "2.13.2", + "cross-env": "7.0.3", + "cypress": "6.6.0", + "cypress-commands": "1.1.0", + "cypress-file-upload": "5.0.2", + "eslint-plugin-chai-friendly": "0.6.0", + "eslint-plugin-cypress": "2.11.2", + "http-server": "0.12.3", + "redux-devtools": "3.7.0", + "redux-devtools-extension": "2.13.9", + "ts-loader": "8.0.18", + "webpack-bundle-analyzer": "4.4.0" + }, + "resolutions": { + "cypress": "6.6.0" + } } diff --git a/public/locales/en.json b/public/locales/en.json index 808582e2e4..b2a7f5d788 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -339,26 +339,45 @@ "modal": { "snippetImport": { "title": "Import from Snippet", - "selectProject": "Select From Available Projects", - "selectSnippet": "Select From Available Snippets" + "selectProject": "Select From Available Projects", + "selectSnippet": "Select From Available Snippets" }, - "documentInfo": { - "title": "Document info", - "created": "<0> created this note <1>", - "edited": "<0> was the last editor <1>", - "usersContributed": "<0> users contributed to this document", - "revisions": "<0> revisions are saved" - }, - "gistImport": { - "title": "Import from Gist", - "insertGistUrl": "Paste your gist url here…" - }, - "snippetExport": { - "title": "Export to Snippet", - "visibilityLevel": "Select Visibility Level" - }, - "revision": { - "title": "Revisions", + "documentInfo": { + "title": "Document info", + "created": "<0> created this note <1>", + "edited": "<0> was the last editor <1>", + "usersContributed": "<0> users contributed to this document", + "revisions": "<0> revisions are saved" + }, + "metadataEditor": { + "title": "Edit Metadata", + "labels": { + "title": "Title", + "type": "Document type", + "description": "Description", + "tags": "Tags", + "lang": "Language", + "dir": "Text direction", + "breaks": "New line style", + "robots": "Robots", + "GA": "Google Analytics", + "disqus": "Disqus", + "LTR": "left to right", + "RTL": "right to left", + "breaksOn": "hedgedoc style", + "breaksOff": "markdown style" + } + }, + "gistImport": { + "title": "Import from Gist", + "insertGistUrl": "Paste your gist url here…" + }, + "snippetExport": { + "title": "Export to Snippet", + "visibilityLevel": "Select Visibility Level" + }, + "revision": { + "title": "Revisions", "revertButton": "Revert", "error": "An error occurred while fetching the revisions of this note.", "length": "Length", diff --git a/src/components/common/fork-awesome/fork-awesome-icon.tsx b/src/components/common/fork-awesome/fork-awesome-icon.tsx index 4b7c5ab7dd..9c4a306aa6 100644 --- a/src/components/common/fork-awesome/fork-awesome-icon.tsx +++ b/src/components/common/fork-awesome/fork-awesome-icon.tsx @@ -1,10 +1,10 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ -import React from 'react' +import React, { MouseEventHandler } from 'react' import { IconName, IconSize } from './types' export interface ForkAwesomeIconProps { @@ -13,14 +13,15 @@ export interface ForkAwesomeIconProps { fixedWidth?: boolean size?: IconSize stacked?: boolean + onClick?: MouseEventHandler } -export const ForkAwesomeIcon: React.FC = ({ icon, fixedWidth = false, size, className, stacked = false }) => { +export const ForkAwesomeIcon: React.FC = ({ icon, fixedWidth = false, size, className, stacked = false, onClick }) => { const fixedWithClass = fixedWidth ? 'fa-fw' : '' const sizeClass = size ? `-${ size }` : (stacked ? '-1x' : '') const stackClass = stacked ? '-stack' : '' const extraClasses = `${ className ?? '' } ${ sizeClass || stackClass ? `fa${ stackClass }${ sizeClass }` : '' }` return ( - + ) } diff --git a/src/components/editor-page/document-bar/share/share-modal.tsx b/src/components/editor-page/document-bar/share/share-modal.tsx index 7bc4c254d1..9c132bd065 100644 --- a/src/components/editor-page/document-bar/share/share-modal.tsx +++ b/src/components/editor-page/document-bar/share/share-modal.tsx @@ -45,7 +45,7 @@ export const ShareModal: React.FC = ({ show, onHide }) => { - + diff --git a/src/components/editor-page/metadata-editor/breaks-metadata-input.tsx b/src/components/editor-page/metadata-editor/breaks-metadata-input.tsx new file mode 100644 index 0000000000..d8fb206786 --- /dev/null +++ b/src/components/editor-page/metadata-editor/breaks-metadata-input.tsx @@ -0,0 +1,43 @@ +/* + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import React from 'react' +import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap' +import { Trans, useTranslation } from 'react-i18next' +import { MetadataInputFieldProps } from './metadata-editor' + +enum ButtonState { + ON, + OFF +} + +export const BreaksMetadataInput: React.FC> = ({ id, content, onContentChange }) => { + const { t } = useTranslation() + + return ( + + onContentChange(true) }> + + + onContentChange(false) }> + + + + ) +} diff --git a/src/components/editor-page/metadata-editor/datalist-metadata-input.tsx b/src/components/editor-page/metadata-editor/datalist-metadata-input.tsx new file mode 100644 index 0000000000..b1a89b9e98 --- /dev/null +++ b/src/components/editor-page/metadata-editor/datalist-metadata-input.tsx @@ -0,0 +1,29 @@ +/* + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import React, { Fragment, useCallback } from 'react' +import { MetadataInputFieldProps, SelectMetadataOptions } from './metadata-editor' + +export const DatalistMetadataInput: React.FC & SelectMetadataOptions> = ({ id, content, onContentChange, options }) => { + const onChange = useCallback((event: React.ChangeEvent) => { + onContentChange(event.currentTarget.value) + }, [onContentChange]) + + return ( + + + + { options.map(option => { + return ( + + ) + }) } + + + ) +} diff --git a/src/components/editor-page/metadata-editor/input-label.scss b/src/components/editor-page/metadata-editor/input-label.scss new file mode 100644 index 0000000000..3e087ae3a7 --- /dev/null +++ b/src/components/editor-page/metadata-editor/input-label.scss @@ -0,0 +1,9 @@ +/*! + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +.tighter { + margin-bottom: -0.5px !important; +} diff --git a/src/components/editor-page/metadata-editor/input-label.tsx b/src/components/editor-page/metadata-editor/input-label.tsx new file mode 100644 index 0000000000..0ba42acb8f --- /dev/null +++ b/src/components/editor-page/metadata-editor/input-label.tsx @@ -0,0 +1,23 @@ +/* + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import React from 'react' +import './input-label.scss' +import { Form } from 'react-bootstrap' + +export interface InputLabelProps { + id: string + label: string +} + +export const InputLabel: React.FC = ({ id, label, children }) => { + return ( + + + { children } + + ) +} diff --git a/src/components/editor-page/metadata-editor/metadata-editor.tsx b/src/components/editor-page/metadata-editor/metadata-editor.tsx new file mode 100644 index 0000000000..f913f3933c --- /dev/null +++ b/src/components/editor-page/metadata-editor/metadata-editor.tsx @@ -0,0 +1,120 @@ +/* + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import ISO from 'iso-639-1' +import React, { useCallback } from 'react' +import { Col, Modal, Row } from 'react-bootstrap' +import { useTranslation } from 'react-i18next' +import { useSelector } from 'react-redux' +import { ApplicationState } from '../../../redux' +import { setNoteFrontmatter } from '../../../redux/note-details/methods' +import { CommonModal } from '../../common/modals/common-modal' +import { NoteFrontmatter, NoteType } from '../note-frontmatter/note-frontmatter' +import { BreaksMetadataInput } from './breaks-metadata-input' +import { DatalistMetadataInput } from './datalist-metadata-input' +import { InputLabel } from './input-label' +import { StringMetadataInput } from './string-metadata-input' +import { StringMetadataTextarea } from './string-metadata-textarea' +import { TagsMetadataInput } from './tags-metadata-input' +import { TextDirectionMetadataInput } from './text-direction-metadata-input' + +export interface MetadataEditorProps { + show: boolean, + onHide: () => void +} + +export interface MetadataInputFieldProps { + id: string + content: T + onContentChange: (newContent: T) => void +} + +export interface SelectMetadataOptions { + options: T[] +} + +export const MetadataEditor: React.FC = ({ show, onHide }) => { + const { t } = useTranslation() + const yamlMetadata = useSelector((state: ApplicationState) => state.noteDetails.frontmatter) + const noteDetails = useSelector((state: ApplicationState) => state.noteDetails.markdownContent) + /*const [yamlMetadata, setNoteFrontmatter] = useState>({ + title: "Test Title", + description: "Test Description\nwith two lines", + tags: ["tag1", "tag2"], + robots: "", + lang: "de-at", + dir: TextDirection.LTR, + breaks: false, + GA: "test GA string", + disqus: "test disqus string", + type: '', + deprecatedTagsSyntax: false + })*/ + + const setMarkdown = useCallback((changes: Partial) => { + const newMetadata = Object.assign(yamlMetadata, changes) + +// setnoteDetails(noteDetails) + }, [noteDetails]) + + return ( + + + + + + setNoteFrontmatter({ ...yamlMetadata, title }) }/> + + + setNoteFrontmatter({ ...yamlMetadata, type: (type as NoteType) }) }/> + + + setNoteFrontmatter({ ...yamlMetadata, dir }) }/> + + + setNoteFrontmatter({ ...yamlMetadata, description }) }/> + + + setNoteFrontmatter({ ...yamlMetadata, disqus }) }/> + + + + + setNoteFrontmatter({ ...yamlMetadata, lang }) }/> + + + setNoteFrontmatter({ ...yamlMetadata, robots }) }/> + + + setNoteFrontmatter({ ...yamlMetadata, breaks }) }/> + + + setNoteFrontmatter({ ...yamlMetadata, tags }) }/> + + + setNoteFrontmatter({ ...yamlMetadata, GA }) }/> + + + + + + ) +} diff --git a/src/components/editor-page/metadata-editor/string-metadata-input.tsx b/src/components/editor-page/metadata-editor/string-metadata-input.tsx new file mode 100644 index 0000000000..5d556c9505 --- /dev/null +++ b/src/components/editor-page/metadata-editor/string-metadata-input.tsx @@ -0,0 +1,24 @@ +/* + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import React, { useCallback } from 'react' +import { MetadataInputFieldProps } from './metadata-editor' + +export const StringMetadataInput: React.FC> = ({ id, content, onContentChange }) => { + const onChange = useCallback((event: React.ChangeEvent) => { + onContentChange(event.currentTarget.value) + }, [onContentChange]) + + return ( + + ) +} diff --git a/src/components/editor-page/metadata-editor/string-metadata-textarea.tsx b/src/components/editor-page/metadata-editor/string-metadata-textarea.tsx new file mode 100644 index 0000000000..5e7f2268a6 --- /dev/null +++ b/src/components/editor-page/metadata-editor/string-metadata-textarea.tsx @@ -0,0 +1,23 @@ +/* + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import React, { useCallback } from 'react' +import { MetadataInputFieldProps } from './metadata-editor' + +export const StringMetadataTextarea: React.FC> = ({ id, content, onContentChange }) => { + const onChange = useCallback((event: React.ChangeEvent) => { + onContentChange(event.currentTarget.value) + }, [onContentChange]) + + return ( +