{
const obj = (data as EmojiMartData).emojis[key];
return {
- text: `:${key}:`,
- displayText: `${obj.skins[0].native} :${key}:`,
+ text: obj.skins[0].native,
+ displayText: `${obj.skins[0].native} ${key}`,
+ keyText: `:${key}:`,
className: 'emoji-hint',
keywords: obj.keywords,
name: obj.name,
@@ -25,9 +26,8 @@ const emojiList = Object.keys((data as EmojiMartData).emojis).map((key) => {
// Format the list of emojis as CodeMirror hints
const hints = emojiList.filter((it) => {
- // console.log(it.text, prefix);
return (
- it.text.includes(query) ||
+ it.keyText.includes(query) ||
it.keywords.some((keyword) => {
return keyword.includes(query);
})
diff --git a/src/components/Editor/mime/text/md/CodeEditor/index.tsx b/src/components/Editor/mime/text/md/CodeEditor/index.tsx
index bd4aa164..d13dae7e 100644
--- a/src/components/Editor/mime/text/md/CodeEditor/index.tsx
+++ b/src/components/Editor/mime/text/md/CodeEditor/index.tsx
@@ -9,16 +9,12 @@ import { ActorID, DocEvent, TextChange } from 'yorkie-js-sdk';
import CodeMirror from 'codemirror';
import SimpleMDE from 'easymde';
import SimpleMDEReact from 'react-simplemde-editor';
-import ReactMarkdown from 'react-markdown';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-
-import oneLight from 'react-syntax-highlighter/dist/esm/styles/prism/one-light';
-import oneDark from 'react-syntax-highlighter/dist/esm/styles/prism/one-dark';
import { AppState } from 'app/rootReducer';
import { ConnectionStatus, Presence } from 'features/peerSlices';
import { Theme as ThemeType } from 'features/settingSlices';
import { Preview, updateHeadings, getTableOfContents } from 'features/docSlices';
+import { MarkdownViewer } from 'components/commons/MarkdownViewer';
import { makeStyles } from 'styles/common';
import {
@@ -32,19 +28,11 @@ import {
Theme,
Typography,
} from '@mui/material';
-import { MetaInfo, NAVBAR_HEIGHT } from 'constants/editor';
+import { NAVBAR_HEIGHT } from 'constants/editor';
import { addRecentPage } from 'features/currentSlices';
import { setActionStatus } from 'features/actionSlices';
import { updateLinkNameWithHeading } from 'features/linkSlices';
-import remarkMath from 'remark-math';
-import remarkGfm from 'remark-gfm';
-import remarkToc from 'remark-toc';
-import remarkEmoji from 'remark-emoji';
-
-import rehypeKatex from 'rehype-katex';
-import fenceparser from 'fenceparser';
-import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for you
import 'easymde/dist/easymde.min.css';
import 'codemirror/keymap/sublime';
import 'codemirror/keymap/emacs';
@@ -65,15 +53,10 @@ import Cursor from './Cursor';
import SlideView from './slideView';
import { CodeEditorMenu } from './Menu';
-import MermaidView from './MermaidView';
import MiniDraw from './MiniDraw';
import MiniMermaid from './MiniMermaid';
import { MermaidSampleType, samples } from './mermaid-samples';
-type StyleObject = {
- [key: string]: string;
-};
-
const WIDGET_HEIGHT = 40;
const globalContainer = {
@@ -282,7 +265,7 @@ export default function CodeEditor() {
});
cm.setOption('hintOptions', {
completeOnSingleClick: true,
- completeSingle: false,
+ completeSingle: true,
container: cm.getWrapperElement(),
});
@@ -301,47 +284,47 @@ export default function CodeEditor() {
}
// check keyword hint with normal text
else if (event.text.length > 0 && /[a-zA-Z0-9]/.test(event.text[0])) {
- cm2.showHint({
- completeSingle: false,
- alignWithWord: true,
- closeCharacters: /[\s()\[\]{};:>,]/, // eslint-disable-line no-useless-escape
- closeOnUnfocus: true,
- list: () => {
- return [
- { text: 'function', displayText: '!function' },
- { text: 'if', displayText: '!if' },
- { text: 'else', displayText: '!else' },
- { text: 'for', displayText: '!for' },
- { text: 'while', displayText: '!while' },
- { text: 'do', displayText: '!do' },
- { text: 'switch', displayText: '!switch' },
- { text: 'case', displayText: '!case' },
- { text: 'try', displayText: '!try' },
- { text: 'catch', displayText: '!catch' },
- { text: 'finally', displayText: '!finally' },
- { text: 'class', displayText: '!class' },
- { text: 'interface', displayText: '!interface' },
- { text: 'extends', displayText: '!extends' },
- {
- text: 'implements',
- displayText: '!implements',
- // self customize hint
- hint: (cm3: CodeMirror.Editor, cur: any, data: any) => {
- cm3.replaceRange(
- `${data.displayText} self customize`,
- cur.from || data.from,
- cur.to || data.to,
- 'complete',
- );
- },
- render: (element: HTMLLIElement, cur: any, data: any) => {
- const tempElement = element;
- tempElement.textContent = `${data.displayText} (self customize)`;
- },
- },
- ];
- },
- } as any);
+ // cm2.showHint({
+ // completeSingle: false,
+ // alignWithWord: true,
+ // closeCharacters: /[\s()\[\]{};:>,]/, // eslint-disable-line no-useless-escape
+ // closeOnUnfocus: true,
+ // list: () => {
+ // return [
+ // { text: 'function', displayText: '!function' },
+ // { text: 'if', displayText: '!if' },
+ // { text: 'else', displayText: '!else' },
+ // { text: 'for', displayText: '!for' },
+ // { text: 'while', displayText: '!while' },
+ // { text: 'do', displayText: '!do' },
+ // { text: 'switch', displayText: '!switch' },
+ // { text: 'case', displayText: '!case' },
+ // { text: 'try', displayText: '!try' },
+ // { text: 'catch', displayText: '!catch' },
+ // { text: 'finally', displayText: '!finally' },
+ // { text: 'class', displayText: '!class' },
+ // { text: 'interface', displayText: '!interface' },
+ // { text: 'extends', displayText: '!extends' },
+ // {
+ // text: 'implements',
+ // displayText: '!implements',
+ // // self customize hint
+ // hint: (cm3: CodeMirror.Editor, cur: any, data: any) => {
+ // cm3.replaceRange(
+ // `${data.displayText} self customize`,
+ // cur.from || data.from,
+ // cur.to || data.to,
+ // 'complete',
+ // );
+ // },
+ // render: (element: HTMLLIElement, cur: any, data: any) => {
+ // const tempElement = element;
+ // tempElement.textContent = `${data.displayText} (self customize)`;
+ // },
+ // },
+ // ];
+ // },
+ // } as any);
}
});
@@ -544,87 +527,7 @@ export default function CodeEditor() {
globalContainer.rootElement = createRoot(previewElement) as any;
}
- (globalContainer.rootElement as any)?.render(
-
{
- const match = /language-(\w+)/.exec(className || '');
-
- const text = children[0];
-
- const tempMetaInfo = fenceparser(`${node.data?.meta}`);
-
- const metaInfo: MetaInfo = {};
- Object.keys(tempMetaInfo).reduce((acc: any, key) => {
- if (!key || key === 'undefined') {
- return acc;
- }
-
- acc[key] = tempMetaInfo[key];
-
- return acc;
- }, metaInfo);
-
- // if (className === 'language-chart') {
- // return ;
- // }
-
- if (className === 'language-mermaid') {
- return ;
- }
-
- if (className === 'language-tldraw') {
- return ;
- }
-
- return !inline && match ? (
- {
- console.log(lineNumber, metaInfo.highlight);
- const style: StyleObject = { display: 'block' };
-
- // check line numbers
- const hasHighlightedLineNumbers = Object.keys(metaInfo.highlight as any).some((key) => {
- const lines = key.split('-');
-
- if (lines.length === 1) {
- if (key === `${lineNumber}`) {
- return true;
- }
- } else if (lineNumber >= Number(lines[0]) && lineNumber <= Number(lines[1])) {
- return true;
- }
- return false;
- });
- if (hasHighlightedLineNumbers) {
- style.backgroundColor = '#ffe7a4';
- }
- return { style };
- }}
- PreTag="div"
- >
- {String(children).replace(/\n$/, '')}
-
- ) : (
-
- {children}
-
- );
- },
- }}
- >
- {markdown}
- ,
- );
+ (globalContainer.rootElement as any)?.render(
);
} catch (err) {
console.error(err);
}
diff --git a/src/components/NavBar/CreateButton.tsx b/src/components/NavBar/CreateButton.tsx
index b72e9010..477e2d64 100644
--- a/src/components/NavBar/CreateButton.tsx
+++ b/src/components/NavBar/CreateButton.tsx
@@ -1,10 +1,9 @@
import React, { useCallback, useState } from 'react';
-import { Button, ListItemIcon, ListItemText, Menu, MenuItem, Typography } from '@mui/material';
+import { Button, Divider, ListItemIcon, ListItemText, Menu, MenuItem, Typography } from '@mui/material';
import Add from '@mui/icons-material/Add';
import { useDispatch, useSelector } from 'react-redux';
import Gesture from '@mui/icons-material/Gesture';
import { createDoc } from 'features/docSlices';
-import yorkie from 'yorkie-js-sdk';
import { AppState } from 'app/rootReducer';
import { newLink } from 'features/linkSlices';
import { makeStyles } from 'styles/common';
@@ -13,6 +12,8 @@ import { useNavigate } from 'react-router-dom';
import { createDocumentKey, createRandomColor } from 'utils/document';
import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined';
import { Theme } from 'features/settingSlices';
+import { ContentCopyOutlined } from '@mui/icons-material';
+import { TemplateDialog } from 'components/commons/TemplateDialog';
const useStyles = makeStyles()((theme) => ({
menu: {
@@ -41,6 +42,8 @@ export function CreateButton() {
const parentId = '';
+ const [templateOpen, setTemplateOpen] = useState(false);
+
const handleMenuOpen = (event: React.MouseEvent
) => {
setAnchorEl(event.currentTarget);
};
@@ -49,6 +52,15 @@ export function CreateButton() {
setAnchorEl(null);
}, []);
+ const handleCloseTemplate = useCallback(() => {
+ setTemplateOpen(false);
+ }, []);
+
+ const handleOpenTemplate = useCallback(() => {
+ setTemplateOpen(true);
+ handleMenuClose();
+ }, [handleMenuClose]);
+
const open = Boolean(anchorEl);
const handleCreateWhiteboard = useCallback(
@@ -87,39 +99,39 @@ export function CreateButton() {
[dispatch, client, parentId, navigate, handleMenuClose],
);
- const handleCreateMilkdown = useCallback(
- async (name: string) => {
- const newDocKey = `${createDocumentKey()}`;
- const fileLink = `/${newDocKey}`;
- const mimeType = MimeType.MILKDOWN;
-
- if (client) {
- dispatch(
- createDoc({
- client,
- docKey: `codepairs-${newDocKey}`,
- init: (root: any) => {
- const newRoot = root;
- if (!newRoot.mimeType) {
- newRoot.mimeType = mimeType;
- }
-
- if (!newRoot.content) {
- newRoot.content = new yorkie.Text();
- }
- },
- }) as any,
- );
-
- setTimeout(() => {
- dispatch(newLink({ parentId, name, mimeType, fileLink, color: createRandomColor().background, emoji: '📅' }));
- setTimeout(() => navigate(fileLink), 100);
- handleMenuClose();
- }, 1000);
- }
- },
- [dispatch, client, parentId, navigate, handleMenuClose],
- );
+ // const handleCreateMilkdown = useCallback(
+ // async (name: string) => {
+ // const newDocKey = `${createDocumentKey()}`;
+ // const fileLink = `/${newDocKey}`;
+ // const mimeType = MimeType.MILKDOWN;
+
+ // if (client) {
+ // dispatch(
+ // createDoc({
+ // client,
+ // docKey: `codepairs-${newDocKey}`,
+ // init: (root: any) => {
+ // const newRoot = root;
+ // if (!newRoot.mimeType) {
+ // newRoot.mimeType = mimeType;
+ // }
+
+ // if (!newRoot.content) {
+ // newRoot.content = new yorkie.Text();
+ // }
+ // },
+ // }) as any,
+ // );
+
+ // setTimeout(() => {
+ // dispatch(newLink({ parentId, name, mimeType, fileLink, color: createRandomColor().background, emoji: '📅' }));
+ // setTimeout(() => navigate(fileLink), 100);
+ // handleMenuClose();
+ // }, 1000);
+ // }
+ // },
+ // [dispatch, client, parentId, navigate, handleMenuClose],
+ // );
const handleCreateLink = useCallback(
(name: string) => {
@@ -178,17 +190,19 @@ export function CreateButton() {
2
-