golang/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2025-11-02 20:23:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Replace markdown editor with CodeMirror

Browse Source
This commit is contained in:
Gabe Kangas
2022-10-10 20:16:08 -07:00
parent 84dc83359b
commit 61e1a49fd4
4 changed files with 425 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/config/EditCustomStyles.tsx
View File

@ -2,6 +2,7 @@
import React, { useState, useEffect, useContext, FC } from 'react';
import { Typography, Button } from 'antd';
import CodeMirror from '@uiw/react-codemirror';
import { bbedit } from '@uiw/codemirror-theme-bbedit';
import { css } from '@codemirror/lang-css';
import { ServerStatusContext } from '../../utils/server-status-context';
@ -97,6 +98,7 @@ export const EditCustomStyles: FC = () => {
<CodeMirror
value={content}
placeholder="/* Enter custom CSS here */"
theme={bbedit}
height="200px"
extensions={[css()]}
onChange={onCSSValueChange}

27
web/components/config/EditPageContent.tsx
View File

@ -1,8 +1,10 @@
// EDIT CUSTOM DETAILS ON YOUR PAGE
import React, { useState, useEffect, useContext, FC } from 'react';
import { Typography, Button } from 'antd';
import dynamic from 'next/dynamic';
import MarkdownIt from 'markdown-it';
import CodeMirror from '@uiw/react-codemirror';
import { bbedit } from '@uiw/codemirror-theme-bbedit';
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
import { languages } from '@codemirror/language-data';
import { ServerStatusContext } from '../../utils/server-status-context';
import {
@ -19,13 +21,6 @@ import {
} from '../../utils/input-statuses';
import { FormStatusIndicator } from './FormStatusIndicator';
import 'react-markdown-editor-lite/lib/index.css';
const mdParser = new MarkdownIt(/* Markdown-it options */);
const MdEditor = dynamic(() => import('react-markdown-editor-lite'), {
ssr: false,
});
const { Title } = Typography;
export const EditPageContent: FC = () => {
@ -41,7 +36,7 @@ export const EditPageContent: FC = () => {
let resetTimer = null;
function handleEditorChange({ text }) {
function handleEditorChange(text) {
setContent(text);
if (text !== initialContent && !hasChanged) {
setHasChanged(true);
@ -101,16 +96,14 @@ export const EditPageContent: FC = () => {
.
</p>
<MdEditor
style={{ height: '30em' }}
<CodeMirror
value={content}
renderHTML={(c: string) => mdParser.render(c)}
placeholder="Enter your custom page content here..."
theme={bbedit}
onChange={handleEditorChange}
config={{
htmlClass: 'markdown-editor-preview-pane',
markdownClass: 'markdown-editor-pane',
}}
extensions={[markdown({ base: markdownLanguage, codeLanguages: languages })]}
/>
<br />
<div className="page-content-actions">
{hasChanged && (