feat: add table auto-wrap feature for notes

src/renderer/src/components/RichEditor/index.tsx

@@ -48,7 +48,8 @@ const RichEditor = ({
   enableContentSearch = false,
   isFullWidth = false,
   fontFamily = 'default',
-  fontSize = 16
+  fontSize = 16,
+  tableAutoWrap = false
   // toolbarItems: _toolbarItems // TODO: Implement custom toolbar items
 }: RichEditorProps & { ref?: React.RefObject<RichEditorRef | null> }) => {
   // Use the rich editor hook for complete editor management
@@ -390,6 +391,7 @@ const RichEditor = ({
       $isFullWidth={isFullWidth}
       $fontFamily={fontFamily}
       $fontSize={fontSize}
+      $tableAutoWrap={tableAutoWrap}
       onKeyDown={onKeyDownEditor}>
       {showToolbar && (
         <Toolbar

src/renderer/src/components/RichEditor/styles.ts

@@ -6,6 +6,7 @@ export const RichEditorWrapper = styled.div<{
   $isFullWidth?: boolean
   $fontFamily?: 'default' | 'serif'
   $fontSize?: number
+  $tableAutoWrap?: boolean
 }>`
   display: flex;
   flex-direction: column;
@@ -21,6 +22,36 @@ export const RichEditorWrapper = styled.div<{
 
   ${({ $minHeight }) => $minHeight && `min-height: ${$minHeight}px;`}
   ${({ $maxHeight }) => $maxHeight && `max-height: ${$maxHeight}px;`}
+
+  ${({ $tableAutoWrap }) =>
+    $tableAutoWrap &&
+    `
+    .ProseMirror table,
+    .tiptap table {
+      table-layout: auto !important;
+    }
+
+    .ProseMirror table th,
+    .ProseMirror table td,
+    .tiptap th,
+    .tiptap td {
+      white-space: normal !important;
+      word-wrap: break-word !important;
+      word-break: break-word !important;
+      overflow-wrap: break-word !important;
+      overflow: visible !important;
+      text-overflow: clip !important;
+    }
+
+    .ProseMirror table th > *,
+    .ProseMirror table td > *,
+    .tiptap td > *,
+    .tiptap th > * {
+      white-space: normal !important;
+      overflow: visible !important;
+      text-overflow: clip !important;
+    }
+  `}
 `
 
 export const ToolbarWrapper = styled.div`

src/renderer/src/components/RichEditor/types.ts

@@ -50,6 +50,8 @@ export interface RichEditorProps {
   fontFamily?: 'default' | 'serif'
   /** Font size in pixels */
   fontSize?: number
+  /** Enable table auto-wrap for long content in table cells */
+  tableAutoWrap?: boolean
 }
 
 export interface ToolbarItem {

src/renderer/src/i18n/locales/en-us.json

@@ -1751,6 +1751,8 @@
         "serif_font": "Serif font",
         "show_table_of_contents": "Show Table of Contents",
         "show_table_of_contents_description": "Display a table of contents sidebar for easy navigation within documents",
+        "table_auto_wrap": "Auto-wrap Table Content",
+        "table_auto_wrap_description": "Automatically wrap long text content in table cells",
         "title": "Display Settings"
       },
       "editor": {

src/renderer/src/i18n/locales/zh-cn.json

@@ -1751,6 +1751,8 @@
         "serif_font": "衬线字体",
         "show_table_of_contents": "显示目录大纲",
         "show_table_of_contents_description": "显示目录大纲侧边栏，方便文档内导航",
+        "table_auto_wrap": "表格内容自动换行",
+        "table_auto_wrap_description": "表格单元格中的长文本内容自动换行",
         "title": "显示设置"
       },
       "editor": {

src/renderer/src/i18n/locales/zh-tw.json

@@ -1751,6 +1751,8 @@
         "serif_font": "襯線字體",
         "show_table_of_contents": "顯示目錄大綱",
         "show_table_of_contents_description": "顯示目錄大綱側邊欄，方便文檔內導航",
+        "table_auto_wrap": "表格內容自動換行",
+        "table_auto_wrap_description": "表格單元格中的長文本內容自動換行",
         "title": "顯示"
       },
       "editor": {

src/renderer/src/pages/notes/NotesEditor.tsx

@@ -78,6 +78,7 @@ const NotesEditor: FC<NotesEditorProps> = memo(
               isFullWidth={settings.isFullWidth}
               fontFamily={settings.fontFamily}
               fontSize={settings.fontSize}
+              tableAutoWrap={settings.tableAutoWrap}
             />
           )}
         </RichEditorContainer>

src/renderer/src/pages/settings/NotesSettings.tsx

@@ -191,6 +191,15 @@ const NotesSettings: FC = () => {
           />
         </SettingRow>
         <SettingHelpText>{t('notes.settings.display.show_table_of_contents_description')}</SettingHelpText>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('notes.settings.display.table_auto_wrap')}</SettingRowTitle>
+          <Switch
+            checked={settings.tableAutoWrap}
+            onChange={(checked) => updateSettings({ tableAutoWrap: checked })}
+          />
+        </SettingRow>
+        <SettingHelpText>{t('notes.settings.display.table_auto_wrap_description')}</SettingHelpText>
       </SettingGroup>
     </SettingContainer>
   )

src/renderer/src/store/note.ts

@@ -12,6 +12,7 @@ export interface NotesSettings {
   defaultEditMode: Omit<EditorView, 'read'>
   showTabStatus: boolean
   showWorkspace: boolean
+  tableAutoWrap: boolean
 }
 
 export interface NoteState {
@@ -35,7 +36,8 @@ export const initialState: NoteState = {
     defaultViewMode: 'edit',
     defaultEditMode: 'preview',
     showTabStatus: true,
-    showWorkspace: true
+    showWorkspace: true,
+    tableAutoWrap: false
   },
   notesPath: '',
   sortType: 'sort_a2z',