First pass at page content editor
This commit is contained in:
Gabe Kangas
parent
f19dba31da
commit
2772a8e5ec
37
web/package-lock.json
generated
37
web/package-lock.json
generated
@ -5512,6 +5512,33 @@
|
||||
"object-visit": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"markdown-it": {
|
||||
"version": "12.0.4",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.0.4.tgz",
|
||||
"integrity": "sha512-34RwOXZT8kyuOJy25oJNJoulO8L0bTHYWXcdZBYZqFnjIy3NgjeoM3FmPXIOFQ26/lSHYMr8oc62B6adxXcb3Q==",
|
||||
"requires": {
|
||||
"argparse": "^2.0.1",
|
||||
"entities": "~2.1.0",
|
||||
"linkify-it": "^3.0.1",
|
||||
"mdurl": "^1.0.1",
|
||||
"uc.micro": "^1.0.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"argparse": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
||||
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
|
||||
},
|
||||
"linkify-it": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.2.tgz",
|
||||
"integrity": "sha512-gDBO4aHNZS6coiZCKVhSNh43F9ioIL4JwRjLZPkoLIY4yZFwg264Y5lu2x6rb1Js42Gh6Yqm2f6L2AJcnkzinQ==",
|
||||
"requires": {
|
||||
"uc.micro": "^1.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"md5.js": {
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
|
||||
@ -5546,6 +5573,11 @@
|
||||
"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz",
|
||||
"integrity": "sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A=="
|
||||
},
|
||||
"mdurl": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
|
||||
"integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
|
||||
},
|
||||
"memory-fs": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
|
||||
@ -7310,6 +7342,11 @@
|
||||
"xtend": "^4.0.1"
|
||||
}
|
||||
},
|
||||
"react-markdown-editor-lite": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/react-markdown-editor-lite/-/react-markdown-editor-lite-1.2.3.tgz",
|
||||
"integrity": "sha512-t2O9Mi6fG1WcWFsmYFr/qxTZLVfoKu2rAFmb1FwUN28glOQd0b3NcbcsxjnEuPoNy6Uk/TnpJPkMyWlFLnG9uA=="
|
||||
},
|
||||
"react-refresh": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
"chart.js": "^2.9.4",
|
||||
"classnames": "^2.2.6",
|
||||
"date-fns": "^2.16.1",
|
||||
"markdown-it": "^12.0.4",
|
||||
"next": "^10.0.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "16.13.1",
|
||||
@ -20,6 +21,7 @@
|
||||
"react-dom": "16.13.1",
|
||||
"react-linkify": "^1.0.0-alpha",
|
||||
"react-markdown": "^5.0.2",
|
||||
"react-markdown-editor-lite": "^1.2.3",
|
||||
"sass": "^1.26.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
51
web/pages/edit-page-content.tsx
Normal file
51
web/pages/edit-page-content.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
import MarkdownIt from 'markdown-it';
|
||||
const mdParser = new MarkdownIt(/* Markdown-it options */);
|
||||
|
||||
import dynamic from 'next/dynamic';
|
||||
import 'react-markdown-editor-lite/lib/index.css';
|
||||
|
||||
import { SERVER_CONFIG, fetchData, FETCH_INTERVAL, UPDATE_CHAT_MESSGAE_VIZ } from "../utils/apis";
|
||||
|
||||
import { Table, Typography, Tooltip, Button } from "antd";
|
||||
|
||||
const MdEditor = dynamic(() => import('react-markdown-editor-lite'), {
|
||||
ssr: false
|
||||
});
|
||||
|
||||
export default function PageContentEditor() {
|
||||
const [content, setContent] = React.useState("");
|
||||
|
||||
function handleEditorChange({ html, text }) {
|
||||
setContent(text);
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
console.log(content);
|
||||
alert("Make API call to save here." + content)
|
||||
}
|
||||
|
||||
async function setInitialContent() {
|
||||
const serverConfig = await fetchData(SERVER_CONFIG);
|
||||
const initialContent = serverConfig.instanceDetails.extraPageContent;
|
||||
setContent(initialContent);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setInitialContent();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<MdEditor
|
||||
style={{ height: "500px" }}
|
||||
value={content}
|
||||
renderHTML={(content) => mdParser.render(content)}
|
||||
onChange={handleEditorChange}
|
||||
config={{ htmlClass: 'markdown-editor-preview-pane', markdownClass: 'markdown-editor-pane' }}
|
||||
/>
|
||||
<Button onClick={handleSave}>Save</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -44,7 +44,6 @@ code {
|
||||
}
|
||||
|
||||
|
||||
// GENERAL ANT FORM OVERRIDES
|
||||
// GENERAL ANT FORM OVERRIDES
|
||||
.ant-card {
|
||||
border-radius: .5em;
|
||||
@ -75,3 +74,40 @@ code {
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
|
||||
// markdown editor overrides
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.rc-md-editor {
|
||||
// Set the background color of the preview container
|
||||
.editor-container {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
// Custom CSS for formatting the preview text
|
||||
.markdown-editor-preview-pane {
|
||||
color:lightgrey;
|
||||
a {
|
||||
color: $owncast-purple;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom CSS class used to format the text of the editor
|
||||
.markdown-editor-pane {
|
||||
color:lightgrey !important;
|
||||
}
|
||||
|
||||
// Set the background color of the editor text input
|
||||
textarea {
|
||||
background-color: rgb(44,44,44) !important;
|
||||
}
|
||||
|
||||
// Hide extra toolbar buttons.
|
||||
.button-type-undo, .button-type-redo, .button-type-clear, .button-type-image, .button-type-wrap, .button-type-quote, .button-type-strikethrough, .button-type-code-inline, .button-type-code-block {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user