Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-23 13:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into develop

Browse Source
This commit is contained in:
DarkSky
2022-08-07 22:33:30 +08:00
committed by GitHub
parent 5c51457761 5c26c4094d
commit 63e1989d4b
21 changed files with 230 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/components/affine-editor/src/Editor.tsx
+26 -1
View File
@@ -18,6 +18,12 @@ interface AffineEditorProps {
scrollBlank?: boolean;
isWhiteboard?: boolean;
scrollContainer?: HTMLElement;
scrollController?: {
lockScroll: () => void;
unLockScroll: () => void;
};
}
function _useConstantWithDispose(
@@ -53,13 +59,32 @@ function _useConstantWithDispose(
}
export const AffineEditor = forwardRef<BlockEditor, AffineEditorProps>(
({ workspace, rootBlockId, scrollBlank = true, isWhiteboard }, ref) => {
(
{
workspace,
rootBlockId,
scrollBlank = true,
isWhiteboard,
scrollController,
scrollContainer,
},
ref
) => {
const editor = _useConstantWithDispose(
workspace,
rootBlockId,
isWhiteboard
);
useEffect(() => {
if (scrollContainer) {
editor.scrollManager.scrollContainer = scrollContainer;
}
if (scrollController) {
editor.scrollManager.scrollController = scrollController;
}
}, [editor, scrollContainer, scrollController]);
useImperativeHandle(ref, () => editor);
return (
libs/components/editor-blocks/package.json
+1
View File
@@ -31,6 +31,7 @@
"@mui/system": "^5.8.6",
"code-example": "^3.3.6",
"codemirror": "6.0.1",
"codemirror-lang-elixir": "^3.0.0",
"keymap": "link:@codemirror/next/keymap",
"nanoid": "^4.0.0",
"react-resizable": "^3.0.4",
libs/components/editor-blocks/src/blocks/code/CodeView.tsx
+18 -38
View File
@@ -1,10 +1,9 @@
import { FC, useState, useMemo, useRef, useEffect } from 'react';
import { FC, useState, useRef, useEffect } from 'react';
import { StyleWithAtRules } from 'style9';
import { CreateView } from '@toeverything/framework/virgo';
import CodeMirror from './CodeMirror';
import CodeMirror, { ReactCodeMirrorRef } from './CodeMirror';
import { styled } from '@toeverything/components/ui';
import DeleteSweepOutlinedIcon from '@mui/icons-material/DeleteSweepOutlined';
import { javascript } from '@codemirror/lang-javascript';
import { html } from '@codemirror/lang-html';
@@ -32,6 +31,7 @@ import { powerShell } from '@codemirror/legacy-modes/mode/powershell';
import { brainfuck } from '@codemirror/legacy-modes/mode/brainfuck';
import { stylus } from '@codemirror/legacy-modes/mode/stylus';
import { erlang } from '@codemirror/legacy-modes/mode/erlang';
import { elixir } from 'codemirror-lang-elixir';
import { nginx } from '@codemirror/legacy-modes/mode/nginx';
import { perl } from '@codemirror/legacy-modes/mode/perl';
import { pascal } from '@codemirror/legacy-modes/mode/pascal';
@@ -45,7 +45,6 @@ import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile';
import { julia } from '@codemirror/legacy-modes/mode/julia';
import { r } from '@codemirror/legacy-modes/mode/r';
import { Extension } from '@codemirror/state';
// import { Select } from '../../components/select';
import { Option, Select } from '@toeverything/components/ui';
import {
@@ -87,6 +86,7 @@ const langs: Record<string, any> = {
brainfuck: () => StreamLanguage.define(brainfuck),
stylus: () => StreamLanguage.define(stylus),
erlang: () => StreamLanguage.define(erlang),
elixir: () => StreamLanguage.define(elixir),
nginx: () => StreamLanguage.define(nginx),
perl: () => StreamLanguage.define(perl),
ruby: () => StreamLanguage.define(ruby),
@@ -100,10 +100,8 @@ const langs: Record<string, any> = {
julia: () => StreamLanguage.define(julia),
dockerfile: () => StreamLanguage.define(dockerFile),
r: () => StreamLanguage.define(r),
// clike: () => StreamLanguage.define(clike),
// clike: () => clike({ }),
};
const DEFAULT_LANG = 'javascript';
const CodeBlock = styled('div')(({ theme }) => ({
backgroundColor: '#F2F5F9',
padding: '8px 24px',
@@ -118,7 +116,7 @@ const CodeBlock = styled('div')(({ theme }) => ({
flexWrap: 'wrap',
justifyContent: 'space-between',
},
'.delete-block': {
'.copy-block': {
padding: '6px 10px',
backgroundColor: '#fff',
borderRadius: theme.affine.shape.borderRadius,
@@ -130,29 +128,27 @@ const CodeBlock = styled('div')(({ theme }) => ({
}));
export const CodeView: FC<CreateCodeView> = ({ block, editor }) => {
const initValue: string = block.getProperty('text')?.value?.[0]?.text;
const langType: string = block.getProperty('lang')?.value?.[0]?.text;
const [mode, setMode] = useState('javascript');
const langType: string = block.getProperty('lang');
const [extensions, setExtensions] = useState<Extension[]>();
const codeMirror = useRef();
useOnSelect(block.id, (is_select: boolean) => {
const codeMirror = useRef<ReactCodeMirrorRef>();
useOnSelect(block.id, (_is_select: boolean) => {
if (codeMirror.current) {
//@ts-ignore
codeMirror?.current?.view?.focus();
}
});
const onChange = (value: any, codeEditor: any) => {
const onChange = (value: string) => {
block.setProperty('text', {
value: [{ text: value }],
});
};
useEffect(() => {
handleLangChange(langType ? langType : 'javascript');
}, []);
function handleLangChange(lang: string) {
const handleLangChange = (lang: string) => {
block.setProperty('lang', lang);
setMode(lang);
setExtensions([langs[lang]()]);
}
};
useEffect(() => {
handleLangChange(langType ? langType : DEFAULT_LANG);
}, []);
const copyCode = () => {
copyToClipboard(initValue);
};
@@ -171,19 +167,12 @@ export const CodeView: FC<CreateCodeView> = ({ block, editor }) => {
>
<div className="operation">
<div className="select">
{/* <Select
label="Lang"
options={Object.keys(langs)}
value={mode}
onChange={evn => handleLangChange(evn.target.value)}
/> */}
<Select
width={128}
placeholder="Search for a field type"
value={mode}
value={langType || DEFAULT_LANG}
listboxStyle={{ maxHeight: '400px' }}
onChange={(selectedValue: string) => {
// setSelectedOption(selectedValue);
handleLangChange(selectedValue);
}}
>
@@ -197,17 +186,8 @@ export const CodeView: FC<CreateCodeView> = ({ block, editor }) => {
</Select>
</div>
<div>
<div className="delete-block" onClick={copyCode}>
<div className="copy-block" onClick={copyCode}>
Copy
{/* <DeleteSweepOutlinedIcon
className="delete-icon"
fontSize="small"
sx={{
color: 'rgba(0,0,0,.5)',
cursor: 'pointer',
'&:hover': { color: 'rgba(0,0,0,.9)' },
}}
/> */}
</div>
</div>
</div>
libs/components/editor-core/src/ref-page/ModalPage.tsx
-3
View File
@@ -1,7 +1,6 @@
import { MuiBackdrop, styled, useTheme } from '@toeverything/components/ui';
import { createContext, ReactNode, useContext, useState } from 'react';
import { createPortal } from 'react-dom';
import { useEditor } from '../Contexts';
import { RenderBlock } from '../render-block';
const Dialog = styled('div')({
@@ -44,8 +43,6 @@ const Modal = ({ open, children }: { open: boolean; children?: ReactNode }) => {
};
const ModalPage = ({ blockId }: { blockId: string | null }) => {
const { editor } = useEditor();
return (
<Modal open={!!blockId}>
{blockId && <RenderBlock blockId={blockId} />}
libs/components/editor-plugins/src/menu/reference-menu/ReferenceMenu.tsx
+1 -1
View File
@@ -116,7 +116,7 @@ export const ReferenceMenu = ({ editor, hooks, style }: ReferenceMenuProps) => {
};
const handle_close = () => {
editor.blockHelper.removeSearchSlash(block_id);
block_id && editor.blockHelper.removeSearchSlash(block_id);
};
return (