Skip to content

Commit bda6458

Browse files
ar1603ar1603
committed
feat(): Adding the editor functionality
1 parent b2a029f commit bda6458

7 files changed

Lines changed: 2377 additions & 16 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"@emotion/react": "^11.11.4",
2828
"@emotion/styled": "^11.11.5",
2929
"@fontsource/space-mono": "^5.1.2",
30+
"@mdxeditor/editor": "^3.21.1",
3031
"@react-three/drei": "^9.121.2",
3132
"@react-three/fiber": "^8.17.12",
3233
"@react-three/postprocessing": "^2.16.6",

‎src/components/Cursor/CursorProvider.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { createContext, useContext, useState } from 'react';
22
import FollowCursor from './FollowCursor';
33
import SplashCursor from './SplashCursor';
44

5-
export type CursorType = 'follow' | 'splash';
5+
export type CursorType = 'follow' | 'splash' | 'none';
66

77
export const CursorContext = createContext<{
88
insets:
@@ -82,7 +82,13 @@ const CursorProvider = ({ children }: { children: React.ReactNode }) => {
8282
setCursorInsets,
8383
}}
8484
>
85-
{cursorType === 'splash' ? <SplashCursor /> : <FollowCursor />}
85+
{cursorType !== 'none' ? (
86+
cursorType === 'splash' ? (
87+
<SplashCursor />
88+
) : (
89+
<FollowCursor />
90+
)
91+
) : null}
8692
{children}
8793
</CursorContext.Provider>
8894
);

‎src/router/PublicRoutes.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,14 @@ import { LazyHostScreen } from './lazyScreen';
88
import MainScreen from '../screens/mainFlow/MainScreen';
99
import ArticlesScreen from '../screens/articles/ArticlesScreen';
1010
import ProjectsScreen from '../screens/projects/ProjectsScreen';
11+
import ArticleEditor from '@screens/articleEditor/ArticleEditor';
1112

1213
const publicRouter = createBrowserRouter(
1314
createRoutesFromChildren(
1415
<Route path="/" element={<LazyHostScreen />}>
1516
<Route path="" element={<MainScreen />} />
1617
<Route path="articles" element={<ArticlesScreen />} />
18+
<Route path="privateRoute" element={<ArticleEditor />} />
1719
<Route path="projects" element={<ProjectsScreen />}>
1820
<Route path=":id" element={<ProjectsScreen />} />
1921
</Route>

‎src/screens/articleEditor/AllPlugins.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import {
2+
toolbarPlugin,
3+
KitchenSinkToolbar,
4+
listsPlugin,
5+
quotePlugin,
6+
headingsPlugin,
7+
linkPlugin,
8+
linkDialogPlugin,
9+
imagePlugin,
10+
tablePlugin,
11+
thematicBreakPlugin,
12+
frontmatterPlugin,
13+
codeBlockPlugin,
14+
codeMirrorPlugin,
15+
diffSourcePlugin,
16+
markdownShortcutPlugin,
17+
AdmonitionDirectiveDescriptor,
18+
directivesPlugin,
19+
} from '@mdxeditor/editor';
20+
21+
export const ALL_PLUGINS = [
22+
toolbarPlugin({ toolbarContents: () => <KitchenSinkToolbar /> }),
23+
listsPlugin(),
24+
quotePlugin({
25+
quoteAutocompleteSuggestions: [
26+
'https://via.placeholder.com/150',
27+
'https://via.placeholder.com/150',
28+
],
29+
}),
30+
headingsPlugin({ allowedHeadingLevels: [1, 2, 3] }),
31+
linkPlugin(),
32+
linkDialogPlugin(),
33+
imagePlugin({
34+
imageAutocompleteSuggestions: [
35+
'https://via.placeholder.com/150',
36+
'https://via.placeholder.com/150',
37+
],
38+
imageUploadHandler: async () =>
39+
Promise.resolve('https://picsum.photos/200/300'),
40+
}),
41+
tablePlugin(),
42+
thematicBreakPlugin(),
43+
frontmatterPlugin(),
44+
codeBlockPlugin({ defaultCodeBlockLanguage: '' }),
45+
// sandpackPlugin({ sandpackConfig: virtuosoSampleSandpackConfig }),
46+
codeMirrorPlugin({
47+
codeBlockLanguages: {
48+
js: 'JavaScript',
49+
css: 'CSS',
50+
txt: 'Plain Text',
51+
tsx: 'TypeScript',
52+
'': 'Unspecified',
53+
},
54+
}),
55+
directivesPlugin({
56+
directiveDescriptors: [AdmonitionDirectiveDescriptor],
57+
}),
58+
diffSourcePlugin({ viewMode: 'rich-text', diffMarkdown: 'boo' }),
59+
markdownShortcutPlugin(),
60+
];

‎src/screens/articleEditor/ArticleEditor.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Box, Input, VStack } from '@chakra-ui/react';
2+
import { MDXEditor } from '@mdxeditor/editor';
3+
import { ALL_PLUGINS } from './AllPlugins';
4+
import '@mdxeditor/editor/style.css';
5+
import { useCursor } from '@components';
6+
import { useLayoutEffect } from 'react';
7+
8+
const ArticleEditor = () => {
9+
const { setCursorType } = useCursor();
10+
useLayoutEffect(() => {
11+
setCursorType('none');
12+
return () => {
13+
setCursorType('follow');
14+
};
15+
}, [setCursorType]);
16+
return (
17+
<VStack px={10} pt={20} width={'100vw'} rowGap={4} bg={'black'}>
18+
<Input placeholder="Title" />
19+
<Input placeholder="Description" />
20+
<Box
21+
width={'100%'}
22+
bg={'black'}
23+
border={'1px solid white'}
24+
borderRadius={'md'}
25+
p={2}
26+
>
27+
<MDXEditor
28+
className="w-full"
29+
markdown="# Hello world"
30+
plugins={ALL_PLUGINS}
31+
spellCheck={true}
32+
contentEditableClassName="w-[100%] h-96 text-white"
33+
/>
34+
</Box>
35+
</VStack>
36+
);
37+
};
38+
39+
export default ArticleEditor;

‎src/screens/articleEditor/darkeditor.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@import url('@radix-ui/colors/tomato-dark.css');
2+
@import url('@radix-ui/colors/mauve-dark.css');
3+
4+
.dark-editor {
5+
--accentBase: var(--tomato-1);
6+
--accentBgSubtle: var(--tomato-2);
7+
--accentBg: var(--tomato-3);
8+
--accentBgHover: var(--tomato-4);
9+
--accentBgActive: var(--tomato-5);
10+
--accentLine: var(--tomato-6);
11+
--accentBorder: var(--tomato-7);
12+
--accentBorderHover: var(--tomato-8);
13+
--accentSolid: var(--tomato-9);
14+
--accentSolidHover: var(--tomato-10);
15+
--accentText: var(--tomato-11);
16+
--accentTextContrast: var(--tomato-12);
17+
18+
--baseBase: var(--mauve-1);
19+
--baseBgSubtle: var(--mauve-2);
20+
--baseBg: var(--mauve-3);
21+
--baseBgHover: var(--mauve-4);
22+
--baseBgActive: var(--mauve-5);
23+
--baseLine: var(--mauve-6);
24+
--baseBorder: var(--mauve-7);
25+
--baseBorderHover: var(--mauve-8);
26+
--baseSolid: var(--mauve-9);
27+
--baseSolidHover: var(--mauve-10);
28+
--baseText: var(--mauve-11);
29+
--baseTextContrast: var(--mauve-12);
30+
31+
--admonitionTipBg: var(--cyan4);
32+
--admonitionTipBorder: var(--cyan8);
33+
34+
--admonitionInfoBg: var(--grass4);
35+
--admonitionInfoBorder: var(--grass8);
36+
37+
--admonitionCautionBg: var(--amber4);
38+
--admonitionCautionBorder: var(--amber8);
39+
40+
--admonitionDangerBg: var(--red4);
41+
--admonitionDangerBorder: var(--red8);
42+
43+
--admonitionNoteBg: var(--mauve-4);
44+
--admonitionNoteBorder: var(--mauve-8);
45+
46+
font-family:
47+
system-ui,
48+
-apple-system,
49+
BlinkMacSystemFont,
50+
'Segoe UI',
51+
Roboto,
52+
Oxygen,
53+
Ubuntu,
54+
Cantarell,
55+
'Open Sans',
56+
'Helvetica Neue',
57+
sans-serif;
58+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
59+
'Liberation Mono', 'Courier New', monospace;
60+
61+
color: var(--baseText);
62+
--basePageBg: black;
63+
background: var(--basePageBg);
64+
}

0 commit comments

Comments
 (0)