Skip to content

Commit 0eb5dfa

Browse files
drl990114drl990114
committed
chore: playground
1 parent 9c6428c commit 0eb5dfa

File tree

109 files changed

+442
-47
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

109 files changed

+442
-47
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"scripts": {
66
"build": "yarn clear & yarn build-esbuild && yarn types",
77
"dev": "node ./esbuild.config.dev.mjs",
8-
"build-esbuild": "node ./prebuild.cjs --env=production && node esbuild.config.prod.mjs",
8+
"build-esbuild": "node esbuild.config.prod.mjs",
99
"types": "node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.types.js",
1010
"prettier": "prettier --config ./.prettierrc.json --write \"src/**/*{.js,.jsx,.ts,.tsx,.css}\"",
1111
"clear": "rimraf dist",

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<body>
1616
<noscript>You need to enable JavaScript to run this app. Please enable JavaScript 😭</noscript>
1717

18-
<div id="app"></div>
18+
<div id="root"></div>
1919

2020
<script type="module" src="/index-dev.js"></script>
2121
</body>

‎src/App.css

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
html,
2+
body {
3+
margin: 0;
4+
height: 100%;
5+
color-scheme: dark;
6+
color: #ffffffe6;
7+
background-color: #05010d;
8+
}
9+
10+
#root {
11+
height: 100%;
12+
display: flex;
13+
flex-direction: column;
14+
}
15+
16+
.playground-debug-button-enable,
17+
.playground-debug-button-disable {
18+
position: fixed;
19+
box-sizing: border-box;
20+
display: block;
21+
padding: 5px 12px 5px 12px;
22+
border: 3px solid #fff;
23+
right: 16px;
24+
bottom: 80px;
25+
z-index: 9999;
26+
color: #fff;
27+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
28+
border-radius: 100px;
29+
cursor: pointer;
30+
}
31+
32+
.playground-debug-button-enable:hover,
33+
.playground-debug-button-disable:hover {
34+
opacity: 0.85;
35+
transition: opacity 0.3s;
36+
}
37+
38+
.playground-debug-button-enable {
39+
background-color: #ab576c;
40+
}
41+
42+
.playground-debug-button-disable {
43+
background-color: #363753;
44+
}
45+
46+
.playground-box {
47+
display: flex;
48+
min-height: min-content;
49+
flex-direction: row;
50+
justify-content: center;
51+
}
52+
53+
.playground-self-scroll {
54+
overflow: hidden;
55+
flex: 1;
56+
}

‎src/App.tsx

Lines changed: 101 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,108 @@
1-
import { lightTheme } from '@markflowy/theme'
2-
import { WysiwygEditor, EditorProvider } from '.'
1+
import { BaseStyle, darkTheme } from '@markflowy/theme'
2+
import { Editor, EditorProvider, EditorRef } from '.'
3+
import React, { FC, useLayoutEffect } from 'react'
4+
import useDevTools from './playground/hooks/use-devtools'
5+
import useContent from './playground/hooks/use-content'
6+
import useChangeCodeMirrorTheme from './playground/hooks/useChangeCodeMirrorTheme'
7+
import { DebugConsole } from './playground/components/DebugConsole'
8+
import { DebugButton } from './playground/components/DebugButton'
9+
import './App.css'
10+
11+
let themeEl: undefined | HTMLStyleElement
12+
const THEME_ID = 'mf-markdown-theme'
13+
14+
export function loadThemeCss(url: string) {
15+
if (themeEl) themeEl.remove()
16+
17+
themeEl = document.createElement('style')
18+
themeEl.setAttribute('id', THEME_ID)
19+
themeEl.innerHTML = url
20+
document.head.appendChild(themeEl)
21+
}
22+
323

424
function App() {
25+
const editorRef = React.useRef<EditorRef>(null)
26+
const { contentId, content, hasUnsavedChanges, setContentId, setContent } = useContent()
27+
const { enableDevTools, setEnableDevTools } = useDevTools()
28+
29+
useLayoutEffect(() => {
30+
loadThemeCss(darkTheme.globalStyleText!)
31+
}, [])
32+
33+
const editor = (
34+
<div className="playground-self-scroll">
35+
<Editor
36+
key={contentId}
37+
ref={editorRef}
38+
content={content}
39+
offset={{ top: 10, left: 16 }}
40+
hooks={[useChangeCodeMirrorTheme]}
41+
onChange={(_, content) => setContent(content)}
42+
isTesting
43+
/>
44+
</div>
45+
)
46+
47+
const debugConsole = enableDevTools ? (
48+
<div className="playground-self-scroll">
49+
<DebugConsole
50+
hasUnsavedChanges={hasUnsavedChanges}
51+
contentId={contentId}
52+
content={content}
53+
setContentId={setContentId}
54+
/>
55+
</div>
56+
) : null
57+
58+
const BlurHelper: FC = () => {
59+
return (
60+
<button
61+
className="blur-helper"
62+
style={{
63+
position: 'absolute',
64+
bottom: '64px',
65+
right: '64px',
66+
opacity: 0,
67+
}}
68+
></button>
69+
)
70+
}
71+
572
return (
673
<main>
7-
<EditorProvider theme={lightTheme.styledContants}>
8-
<WysiwygEditor content="# h1" />
9-
</EditorProvider>
74+
<div>
75+
<h1>
76+
Markflowy - <small>WYSIWYG Markdown Editor</small>
77+
</h1>
78+
</div>
79+
<select
80+
onChange={(e) => {
81+
const value = e.target.value
82+
if (value === 'wysiwyg') {
83+
editorRef.current?.toggleType('wysiwyg')
84+
} else {
85+
editorRef.current?.toggleType('sourceCode')
86+
}
87+
}}
88+
>
89+
<option value="wysiwyg">wysiwyg</option>
90+
<option value="sourceCode">source code</option>
91+
</select>
92+
<div className="markdown-body" style={{ width: "100%" }}>
93+
<EditorProvider theme={darkTheme.styledContants}>
94+
<BaseStyle />
95+
<DebugButton
96+
enableDevTools={enableDevTools}
97+
toggleEnableDevTools={() => setEnableDevTools(!enableDevTools)}
98+
/>
99+
<div className="playground-box">
100+
{editor}
101+
{debugConsole}
102+
</div>
103+
<BlurHelper />
104+
</EditorProvider>
105+
</div>
10106
</main>
11107
)
12108
}

‎src/codemirror/codemirror.ts renamed to ‎src/editor/codemirror/codemirror.ts

File renamed without changes.

‎src/codemirror/index.ts renamed to ‎src/editor/codemirror/index.ts

File renamed without changes.

‎src/codemirror/theme.ts renamed to ‎src/editor/codemirror/theme.ts

File renamed without changes.

‎src/components/Editor.tsx renamed to ‎src/editor/components/Editor.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import WysiwygEditor from './WysiwygEditor'
33
import SourceEditor from './SourceEditor'
44
import { forwardRef, memo, useImperativeHandle, useMemo, useState } from 'react'
5-
import type { EditorContext, EditorDelegate, EditorViewType } from '..'
5+
import type { EditorContext, EditorDelegate, EditorViewType } from '../..'
66
import { useContextMounted } from './useContextMounted'
77
import type { Extension, RemirrorEventListenerProps } from 'remirror'
88

‎src/components/ErrorBoundary.tsx renamed to ‎src/editor/components/ErrorBoundary.tsx

File renamed without changes.

‎src/components/Resizable/Resizable.tsx renamed to ‎src/editor/components/Resizable/Resizable.tsx

File renamed without changes.

0 commit comments

Comments
 (0)