feat: rename

Author: 杨国璇

site/app.js

@@ -8,7 +8,7 @@ import SeaTableMarkdownEditor from './pages/seatable-editor';
 import SeaTableMarkdownViewer from './pages/seatable-viewer';
 import LongTextPage from './pages/long-text-page';
 import LongEmailPage from './pages/long-email-page';
-import InlineLongTextPage from './pages/inline-long-text-page';
+import LongTextInlinePage from './pages/long-text-inline-page';
 
 export default function App() {
   return (
@@ -20,7 +20,7 @@ export default function App() {
       <Route path="/seatable-markdown-editor" element={<SeaTableMarkdownEditor />}></Route>
       <Route path="/seatable-markdown-viewer" element={<SeaTableMarkdownViewer />}></Route>
       <Route path="/long-text-editor" element={<LongTextPage />}></Route>
-      <Route path="/inline-long-text-editor" element={<InlineLongTextPage />}></Route>
+      <Route path="/long-text-inline-editor" element={<LongTextInlinePage />}></Route>
       <Route path="/long-email-editor" element={<LongEmailPage />}></Route>
     </Routes>
   );

site/pages/home.js

@@ -15,7 +15,7 @@ export default function Home() {
         <NavLink to={'/seatable-markdown-editor'}>SeaTable markdown Editor</NavLink>
         <NavLink to={'/seatable-markdown-viewer'}>SeaTable markdown Viewer</NavLink>
         <NavLink to={'/long-text-editor'}>Long Text Editor</NavLink>
-        <NavLink to={'/inline-long-text-editor'}>Inline Long Text Editor</NavLink>
+        <NavLink to={'/long-text-inline-editor'}>Long Text Inline Editor</NavLink>
         <NavLink to={'/long-email-editor'}>Email Editor</NavLink>
       </div>
       <div className='tip-message'>请点击其他链接，测试不同的页面内容</div>

site/pages/inline-long-text-page.js renamed to site/pages/long-text-inline-page.js

@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { MarkdownViewer, InlineLongTextEditor } from '@seafile/seafile-editor';
+import { MarkdownViewer, LongTextInlineEditor } from '@seafile/seafile-editor';
 import editorApi from '../api';
 
 import '../assets/css/longtext-page.css';
 
-const InlineLongTextPage = () => {
+const LongTextInlinePage = () => {
 
   const [value, setFileValue] = useState('');
   const [isFetching, setIsFetching] = useState(true);
@@ -37,9 +37,9 @@ const InlineLongTextPage = () => {
     <div className='long-text-page'>
       <div className='editor-wrapper'>
         <button onClick={onEditClick}>Edit Cell value</button>
-        <div className='preview-container' style={{ padding: '30px 8px' }}>
+        <div className='preview-container' style={{ padding: '30px 8px', width: 600 }}>
           {isShowEditor ? (
-            <InlineLongTextEditor
+            <LongTextInlineEditor
               lang={'zh-cn'}
               autoSave={true}
               saveDelay={6000}
@@ -58,4 +58,4 @@ const InlineLongTextPage = () => {
   );
 };
 
-export default InlineLongTextPage;
+export default LongTextInlinePage;

src/index.js

@@ -4,7 +4,7 @@ import MarkdownViewer from './pages/markdown-view';
 import SimpleEditor from './pages/simple-editor';
 import EmailEditorDialog from './pages/email-editor-dialog';
 import LongTextEditorDialog from './pages/longtext-editor-dialog';
-import InlineLongTextEditor from './pages/inline-longtext-editor';
+import LongTextInlineEditor from './pages/longtext-inline-editor';
 import MarkdownPreview from './pages/markdown-preview';
 import SeaTableEditor from './pages/seatable-editor';
 import SeaTableViewer from './pages/seatable-viewer';
@@ -21,7 +21,7 @@ export {
   SeaTableViewer,
   EmailEditorDialog,
   LongTextEditorDialog,
-  InlineLongTextEditor,
+  LongTextInlineEditor,
   MarkdownPreview,
   EXTERNAL_EVENTS,
   EventBus,

src/pages/inline-longtext-editor/index.css

@@ -0,0 +1,71 @@
+.sf-long-text-inline-editor-container {
+  width: 100%;
+  height: 100%;
+  border: 1px solid rgba(0, 40, 100, .12);
+  border-radius: 3px;
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+
+.sf-long-text-inline-editor-container .sf-simple-slate-editor-container {
+  width: 100%;
+  height: 100%;
+}
+
+.sf-long-text-inline-editor-container .sf-simple-slate-editor-container .sf-slate-editor-toolbar {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+	height: 33px;
+  box-shadow: none;
+  padding-right: 0;
+}
+
+.sf-long-text-inline-editor-container .sf-slate-editor-content {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+	overflow: hidden;
+}
+
+.sf-long-text-inline-editor-container .sf-simple-slate-editor-container .sf-slate-editor-toolbar .sf-menu-group:last-child {
+  border-right: none;
+}
+
+.sf-long-text-inline-editor-container .sf-simple-slate-editor-container .sf-slate-editor-content {
+  flex: 1 !important;
+}
+
+.sf-long-text-inline-editor-container .sf-simple-slate-editor-container .sf-slate-editor-content .article {
+  padding: 16px !important;
+}
+
+/* preview */
+.sf-long-text-inline-editor-container .longtext-preview-container {
+  padding: 10px;
+  background-color: #fff;
+}
+
+.sf-long-text-inline-editor-container .sf-slate-editor-content .article > div[role="textbox"] > :first-child {
+  margin-top: 0 !important;
+}
+
+.sf-long-text-inline-editor-container .sf-slate-editor-toolbar .sf-menu-group,
+.sf-editor-menu-popover .popover-inner .sf-menu-group  {
+	padding: 4px 0 4px 8px !important;
+}
+
+.sf-long-text-inline-editor-container .sf-slate-editor-toolbar .sf-menu-group:first-child {
+  padding-left: 0px !important;
+  flex: 1 !important;
+}
+
+.sf-long-text-inline-editor-container .sf-slate-editor-toolbar .sf-header-menu {
+  padding: 4px 6px 4px 0 !important;
+  width: 100% !important;
+}
+
+.sf-long-text-inline-editor-container .sf-slate-editor-toolbar .sf-header-toggle {
+  padding: 0 3px 0 6px !important;
+}
+
+.sf-editor-menu-popover .popover-inner {
+  display: flex;
+}

src/pages/longtext-inline-editor/index.css

@@ -8,7 +8,7 @@ import LongTextEditorDialog from '../longtext-editor-dialog';
 
 import './index.css';
 
-const InlineLongTextEditor = ({
+const LongTextInlineEditor = ({
   lang,
   headerName,
   value: propsValue,
@@ -81,7 +81,7 @@ const InlineLongTextEditor = ({
 
   return (
     <>
-      <div className="sf-inline-editor-container" style={style} ref={editorContainerRef}>
+      <div className="sf-long-text-inline-editor-container" style={style} ref={editorContainerRef}>
         {(!showExpandEditor && !isWindowsWechat) ? (
           <SimpleEditor
             isInline={true}
@@ -124,7 +124,7 @@ const InlineLongTextEditor = ({
 
 };
 
-InlineLongTextEditor.propTypes = {
+LongTextInlineEditor.propTypes = {
   autoSave: PropTypes.bool,
   isCheckBrowser: PropTypes.bool,
   saveDelay: PropTypes.number,
@@ -136,4 +136,4 @@ InlineLongTextEditor.propTypes = {
   onEditorValueChanged: PropTypes.func,
 };
 
-export default InlineLongTextEditor;
+export default LongTextInlineEditor;