refactor: update for flex model

unit-mesh · Dec 1, 2023 · 994b7ac · 994b7ac
1 parent 1bea9f3
commit 994b7ac
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 60 deletions.
diff --git a/editor/src/components/editor/advice/advice-view.tsx b/editor/src/components/editor/advice/advice-view.tsx
@@ -40,7 +40,7 @@ export const AdviceView = ({ editor }: AdviceViewProps) => {
 		});
 	}, []);
 
-	return <section className='flex flex-col gap-2 p-2 border rounded-lg w-96 border-slate-200 fixed top-0 right-0 '
+	return <section className='flex flex-col gap-2 p-2 border rounded-lg w-96 border-slate-200'
 	                ref={advicesSectionRef}>
 		{advices.length ? (advices.map(advice => (
 				<div

diff --git a/editor/src/components/editor/live-editor.tsx b/editor/src/components/editor/live-editor.tsx
@@ -26,48 +26,49 @@ import "./editor.css"
 import { Advice } from "@/components/editor/advice/advice";
 import { AdviceManager } from "@/components/editor/advice/advice-manager";
 import { AdviceView } from "@/components/editor/advice/advice-view";
+import { Settings } from "@/components/settings";
 
 const md = new MarkdownIt()
 
+const extensions = [
+	// we define all commands here
+	CommandFunctions,
+	AdviceExtension.configure({
+		HTMLAttributes: {
+			class: "my-advice",
+		},
+		setAdviceCommand: (advice: Advice) => {
+			AdviceManager.getInstance().addAdvice(advice);
+		},
+		onAdviceActivated: (adviceId) => {
+			if (adviceId) AdviceManager.getInstance().setActiveId(adviceId);
+		},
+	}),
+	TrackChangeExtension.configure({
+		enabled: false,
+	}),
+	createInlineCompletion(),
+	StarterKit.configure({
+		bulletList: {
+			keepMarks: true,
+			keepAttributes: false,
+		},
+		orderedList: {
+			keepMarks: true,
+			keepAttributes: false,
+		},
+	}),
+	createSlashExtension('ai-slash'),
+	createAiBlock(),
+	CharacterCount.configure({}),
+	Color.configure({ types: [TextStyle.name, ListItem.name] }),
+	// @ts-ignore
+	TextStyle.configure({ types: [ListItem.name] }),
+]
+
 const LiveEditor = () => {
 	const { t, i18n } = useTranslation();
 
-	const extensions = [
-		// we define all commands here
-		CommandFunctions,
-		AdviceExtension.configure({
-			HTMLAttributes: {
-				class: "my-advice",
-			},
-			setAdviceCommand: (advice: Advice) => {
-				AdviceManager.getInstance().addAdvice(advice);
-			},
-			onAdviceActivated: (adviceId) => {
-				if (adviceId) AdviceManager.getInstance().setActiveId(adviceId);
-			},
-		}),
-		TrackChangeExtension.configure({
-			enabled: false,
-		}),
-		createInlineCompletion(),
-		StarterKit.configure({
-			bulletList: {
-				keepMarks: true,
-				keepAttributes: false,
-			},
-			orderedList: {
-				keepMarks: true,
-				keepAttributes: false,
-			},
-		}),
-		createSlashExtension('ai-slash'),
-		createAiBlock(),
-		CharacterCount.configure({}),
-		Color.configure({ types: [TextStyle.name, ListItem.name] }),
-		// @ts-ignore
-		TextStyle.configure({ types: [ListItem.name] }),
-	]
-
 	const editor = useEditor({
 		extensions,
 		content: md.render(t('Editor Placeholder')),
@@ -85,27 +86,27 @@ const LiveEditor = () => {
 		}
 	}, [debouncedEditor]);
 
-	return (<div className={'w-full'}>
-			<div className={'editor-block w-full'}>
-				{editor && <div className={'lg:flex md:hidden sm:hidden hidden'}><Sidebar eidtor={editor}/></div>}
+	return <div className={'w-full flex'}>
+		{editor && <div className={'lg:flex md:hidden sm:hidden hidden'}><Sidebar eidtor={editor}/></div>}
 
-				<div className={'editor-section'}>
-					{editor && <MenuBar editor={editor}/>}
-					<EditorContent editor={editor}/>
-					{editor && <MenuBubble editor={editor}/>}
+		<div className={'editor-block w-full'}>
+			<Settings />
+			<div className={'editor-section'}>
+				{editor && <MenuBar editor={editor}/>}
+				<EditorContent editor={editor}/>
+				{editor && <MenuBubble editor={editor}/>}
 
-					{editor && <div className="character-count">
-            <span>{Math.abs(editor.state.selection.$from.pos - editor.state.selection.$to.pos)} selected</span>
-            &nbsp;&nbsp;
-            <span>{editor.storage.characterCount.characters()} characters</span>
-            &nbsp;&nbsp;
-            <span>{editor.storage.characterCount.words()} words</span>
-          </div>}
-				</div>
+				{editor && <div className="character-count">
+          <span>{Math.abs(editor.state.selection.$from.pos - editor.state.selection.$to.pos)} selected</span>
+          &nbsp;&nbsp;
+          <span>{editor.storage.characterCount.characters()} characters</span>
+          &nbsp;&nbsp;
+          <span>{editor.storage.characterCount.words()} words</span>
+        </div>}
 			</div>
-			{editor && <AdviceView editor={editor} /> }
 		</div>
-	)
+		{editor && <AdviceView editor={editor}/>}
+	</div>
 }
 
 export default LiveEditor
diff --git a/editor/src/components/editor/sidebar.tsx b/editor/src/components/editor/sidebar.tsx
@@ -9,7 +9,7 @@ export const Sidebar: React.FC<any> = ({ editor }) => {
 	// make sidebar collapsible, open and close
 	const [open, setOpen] = React.useState(false);
 
-	return <aside className={'fixed top-0 left-0 z-40 w-128 h-screen'} aria-label="Sidebar">
+	return <aside className={'z-40 w-128 h-screen'} aria-label="Sidebar">
 		<div className={'h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800'}>
 			<Accordion.Root className={'AccordionRoot'} type="multiple" defaultValue={['similar', 'bg-context']}>
 				<Accordion.Item className={'AccordionItem'} value="item-6">

diff --git a/editor/src/i18n/i18n.ts b/editor/src/i18n/i18n.ts
@@ -4,7 +4,7 @@ import LanguageDetector from 'i18next-browser-languagedetector'
 
 const mainPlaceholder = `# Studio B3
 
-Hi there, 3B is editor for Unit Mesh architecture paradigms, the next-gen software architecture.
+Hi there, B3 is editor for Unit Mesh architecture paradigms, the next-gen software architecture.
 
 1. Click toolbar's AI button to trigger AI commands.
 2. Press \`/\` to trigger AI commands.
@@ -31,9 +31,9 @@ Scenarios: professional article, blog, user stories, daily reports, weekly repor
 
 `
 
-const zhPlaceholder = `# 3B 编辑器
+const zhPlaceholder = `# B3 编辑器
 
-3B 是用于 Unit Mesh 架构范式的编辑器，以探索下一代软件架构。
+B3 是一个 AI 原生文本编辑器，适合于 Unit Mesh 架构范式的编辑器，以探索下一代软件架构。
 
 1. 点击工具栏上的 AI 按钮以触发 AI 指令。
 2. 按 \`/\` 键以触发 AI 指令。

diff --git a/editor/src/pages/index.tsx b/editor/src/pages/index.tsx
@@ -2,7 +2,6 @@ import Head from 'next/head'
 
 import styles from '../../styles/Home.module.css'
 import LiveEditor from '@/components/editor/live-editor'
-import { Settings } from '@/components/settings'
 import '@/i18n/i18n';
 import { Theme } from '@radix-ui/themes';
 
@@ -17,7 +16,6 @@ export default function Home() {
       <main>
         <div>
           <Theme>
-            <Settings />
             <LiveEditor />
           </Theme>
         </div>