From 03d72c10730b692b38fea5f65ca296d61ec550ef Mon Sep 17 00:00:00 2001
From: Phodal Huang <h@phodal.com>
Date: Mon, 11 Dec 2023 21:49:29 +0800
Subject: [PATCH] fix: add basic styles for editor

---
 web/core/lib/editor/components/sidebar.tsx |  30 ++---
 web/core/lib/editor/editor.css             | 150 +++++++++++++++++++++
 web/studio/styles/global.css               |  36 ++---
 3 files changed, 183 insertions(+), 33 deletions(-)

diff --git a/web/core/lib/editor/components/sidebar.tsx b/web/core/lib/editor/components/sidebar.tsx
index e2c6cab..90fbbcd 100644
--- a/web/core/lib/editor/components/sidebar.tsx
+++ b/web/core/lib/editor/components/sidebar.tsx
@@ -21,15 +21,15 @@ export const Sidebar: React.FC<any> = ({ editor }) => {
 
 	return <aside className={'z-40 w-96 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">
+			<Accordion.Root className={'accordion-root'} type="multiple" defaultValue={['similar', 'bg-context']}>
+				<Accordion.Item className={'accordion-item'} value="item-6">
 					<AccordionTrigger>{t('Custom Related Resource Link')}</AccordionTrigger>
 					<AccordionContent>
 						<input className={'w-full bg-white'}/>
 					</AccordionContent>
 				</Accordion.Item>
 
-				<Accordion.Item className={'AccordionItem'} value="bg-context">
+				<Accordion.Item className={'accordion-item'} value="bg-context">
 					<AccordionTrigger>{t('Article Context')}</AccordionTrigger>
 					<AccordionContent>
 						<textarea
@@ -44,41 +44,41 @@ export const Sidebar: React.FC<any> = ({ editor }) => {
 					</AccordionContent>
 				</Accordion.Item>
 
-				<Accordion.Item className={'AccordionItem'} value="item-1">
+				<Accordion.Item className={'accordion-item'} value="item-1">
 					<AccordionTrigger>{t('Grammarly')}</AccordionTrigger>
 					<AccordionContent>
 						TODO: use some model to check grammar
 					</AccordionContent>
 				</Accordion.Item>
 
-				<Accordion.Item className={'AccordionItem'} value="item-2">
+				<Accordion.Item className={'accordion-item'} value="item-2">
 					<AccordionTrigger>{t('Text Prediction')}</AccordionTrigger>
 					<AccordionContent>
 						TODO: use <a href="https://github.com/unit-mesh/edge-infer">EdgeInference</a> to predict text
 					</AccordionContent>
 				</Accordion.Item>
 
-				<Accordion.Item className={'AccordionItem'} value="similar">
+				<Accordion.Item className={'accordion-item'} value="similar">
 					<AccordionTrigger>{t('Text Similarity')}</AccordionTrigger>
-					<Accordion.Content className={'AccordionContent'}>
+					<Accordion.Content className={'accordion-content'}>
 						<div className={'AccordionContentText'}>
 							TODO: use <a href="https://github.com/unit-mesh/edge-infer">EdgeInference</a> to calculate similarity
 						</div>
 					</Accordion.Content>
 				</Accordion.Item>
 
-				<Accordion.Item className={'AccordionItem'} value="item-4">
+				<Accordion.Item className={'accordion-item'} value="item-4">
 					<AccordionTrigger>{t('Web Search')}</AccordionTrigger>
-					<Accordion.Content className={'AccordionContent'}>
+					<Accordion.Content className={'accordion-content'}>
 						<div className={'AccordionContentText'}>
 							TODO
 						</div>
 					</Accordion.Content>
 				</Accordion.Item>
 
-				<Accordion.Item className={'AccordionItem'} value="model-setting">
+				<Accordion.Item className={'accordion-item'} value="model-setting">
 					<AccordionTrigger>{t('Model Setting')}</AccordionTrigger>
-					<Accordion.Content className={'AccordionContent'}>
+					<Accordion.Content className={'accordion-content'}>
 						<div className="py-4 px-5">
 							<div className="grid gap-2 pt-2">
 								<div className="flex items-center justify-between">
@@ -206,21 +206,21 @@ export const Sidebar: React.FC<any> = ({ editor }) => {
 }
 
 const AccordionTrigger: React.FC<any> = React.forwardRef(({ children, className, ...props }, forwardedRef) => (
-	<Accordion.Header className="AccordionHeader">
+	<Accordion.Header className="accordion-header">
 		<Accordion.Trigger
-			className={'AccordionTrigger'}
+			className={'accordion-trigger'}
 			{...props}
 			ref={forwardedRef}
 		>
 			{children}
-			<ChevronDownIcon className="AccordionChevron" aria-hidden/>
+			<ChevronDownIcon className="accordion-chevron" aria-hidden/>
 		</Accordion.Trigger>
 	</Accordion.Header>
 ))
 
 const AccordionContent: React.FC<any> = React.forwardRef(({ children, className, ...props }, forwardedRef) => (
 	<Accordion.Content
-		className={'AccordionContent'}
+		className={'accordion-content'}
 		{...props}
 		ref={forwardedRef}
 	>
diff --git a/web/core/lib/editor/editor.css b/web/core/lib/editor/editor.css
index 0a8e2e1..2b6ce73 100644
--- a/web/core/lib/editor/editor.css
+++ b/web/core/lib/editor/editor.css
@@ -28,6 +28,156 @@
 
 .tiptap h1, .tiptap h2, .tiptap h3, .tiptap h4, .tiptap h5, .tiptap h6 {
     line-height: 1.1;
+    font-weight: 300;
+    margin-bottom: 2.0rem;
+    margin-top: 0;
+}
+
+.tiptap h1 {
+    font-size: 2.0rem;
+    line-height: 1.2;
+}
+
+.tiptap h2 {
+    font-size: 1.8rem;
+    line-height: 1.25;
+}
+
+.tiptap h3 {
+    font-size: 1.6rem;
+    line-height: 1.3;
+}
+
+.tiptap h4 {
+    font-size: 1.4rem;
+    line-height: 1.35;
+}
+
+.tiptap h5 {
+    font-size: 1.2rem;
+    line-height: 1.5;
+}
+
+.tiptap h6 {
+    font-size: 1.6rem;
+    line-height: 1.4;
+}
+
+.tiptap {
+    a {
+        color: #1abc9c;
+        text-decoration: none;
+    }
+
+    a:focus, a:hover {
+        color: #23B7F3;
+    }
+
+    dl,
+    ol,
+    ul {
+        list-style: none;
+        margin-top: 0;
+        padding-left: 0;
+    }
+
+    dl dl,
+    dl ol,
+    dl ul,
+    ol dl,
+    ol ol,
+    ol ul,
+    ul dl,
+    ul ol,
+    ul ul {
+        font-size: 90%;
+        margin: 1.5rem 0 1.5rem 3.0rem;
+    }
+
+    ol {
+        list-style: decimal;
+        padding: 0.3rem;
+    }
+
+    ul {
+        list-style: circle;
+        padding: 0.3rem;
+    }
+
+    li {
+        color: #384452;
+    }
+
+    .button,
+    button,
+    dd,
+    dt {
+        margin-bottom: 1.0rem;
+    }
+
+    fieldset,
+    input,
+    select,
+    textarea {
+        margin-bottom: 1.5rem;
+    }
+
+    blockquote,
+    dl,
+    figure,
+    form,
+    pre,
+    table {
+        margin-bottom: 2.5rem;
+    }
+
+    table {
+        border-spacing: 0;
+        width: 100%;
+    }
+
+    table thead th,
+    thead th {
+        border-top: 0.1rem solid #d1d8df;
+        background: #fdfdfd;
+    }
+
+    tbody tr:nth-child(even) {
+        background: #fdfdfd;
+    }
+
+    tbody tr:nth-child(odd) {
+        background: #eef1f5;
+    }
+
+    td,
+    th {
+        border-bottom: 0.1rem solid #d1d8df;
+        padding: 1.2rem 1.5rem;
+        text-align: left;
+    }
+
+    u {
+        text-decoration: none;
+        border-bottom: 1px dashed;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    u {
+        background: #ffff3a;
+    }
+
+    b,
+    strong {
+        font-weight: bold;
+    }
+
+    p {
+        margin-top: 0;
+    }
 }
 
 .tiptap code {
diff --git a/web/studio/styles/global.css b/web/studio/styles/global.css
index b849752..e1e7d26 100644
--- a/web/studio/styles/global.css
+++ b/web/studio/styles/global.css
@@ -142,41 +142,40 @@ input {
     fill: white;
 }
 
-.AccordionRoot {
+.accordion-root {
     border-radius: 6px;
-    background-color: var(--mauve-6);
     box-shadow: 0 2px 10px var(--black-a4);
 }
 
-.AccordionItem {
+.accordion-item {
     overflow: hidden;
     margin-top: 1px;
+    background-color: white;
 }
 
-.AccordionItem:first-child {
+.accordion-item:first-child {
     margin-top: 0;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
 }
 
-.AccordionItem:last-child {
+.accordion-item:last-child {
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
 }
 
-.AccordionItem:focus-within {
+.accordion-item:focus-within {
     position: relative;
     z-index: 1;
-    box-shadow: 0 0 0 2px var(--mauve-12);
+    box-shadow: 0 0 0 1px #da4167;
 }
 
-.AccordionHeader {
+.accordion-header {
     display: flex;
 }
 
-.AccordionTrigger {
+.accordion-trigger {
     font-family: inherit;
-    background-color: transparent;
     padding: 0 20px;
     height: 45px;
     flex: 1;
@@ -190,22 +189,23 @@ input {
     background-color: white;
 }
 
-.AccordionTrigger:hover {
-    background-color: var(--mauve-2);
+.accordion-trigger:hover {
+    background-color: #03467d;
+    color: white;
 }
 
-.AccordionContent {
+.accordion-content {
     overflow: hidden;
     font-size: 15px;
     color: var(--mauve-11);
     background-color: var(--mauve-2);
 }
 
-.AccordionContent[data-state='open'] {
+.accordion-content[data-state='open'] {
     animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
 }
 
-.AccordionContent[data-state='closed'] {
+.accordion-content[data-state='closed'] {
     animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
 }
 
@@ -213,12 +213,12 @@ input {
     padding: 15px 20px;
 }
 
-.AccordionChevron {
-    color: var(--violet-10);
+.accordion-chevron {
+    color: #d13167;
     transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
 }
 
-.AccordionTrigger[data-state='open'] > .AccordionChevron {
+.accordion-trigger[data-state='open'] > .accordion-chevron {
     transform: rotate(180deg);
 }