diff --git a/src/renderer/src/components/RichEditor/index.tsx b/src/renderer/src/components/RichEditor/index.tsx index 0b9e3876ac..fd864353dc 100644 --- a/src/renderer/src/components/RichEditor/index.tsx +++ b/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 }) => { // 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 && ( ` 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` diff --git a/src/renderer/src/components/RichEditor/types.ts b/src/renderer/src/components/RichEditor/types.ts index 8804210aef..621c52d65a 100644 --- a/src/renderer/src/components/RichEditor/types.ts +++ b/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 { diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json index 94abc7667d..0211f4092b 100644 --- a/src/renderer/src/i18n/locales/en-us.json +++ b/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": { diff --git a/src/renderer/src/i18n/locales/zh-cn.json b/src/renderer/src/i18n/locales/zh-cn.json index c09c94cbbf..5119de14cd 100644 --- a/src/renderer/src/i18n/locales/zh-cn.json +++ b/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": { diff --git a/src/renderer/src/i18n/locales/zh-tw.json b/src/renderer/src/i18n/locales/zh-tw.json index a1aa1cc7fa..1a9f134d30 100644 --- a/src/renderer/src/i18n/locales/zh-tw.json +++ b/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": { diff --git a/src/renderer/src/pages/notes/NotesEditor.tsx b/src/renderer/src/pages/notes/NotesEditor.tsx index 8bdd44d12c..f6d791d98e 100644 --- a/src/renderer/src/pages/notes/NotesEditor.tsx +++ b/src/renderer/src/pages/notes/NotesEditor.tsx @@ -78,6 +78,7 @@ const NotesEditor: FC = memo( isFullWidth={settings.isFullWidth} fontFamily={settings.fontFamily} fontSize={settings.fontSize} + tableAutoWrap={settings.tableAutoWrap} /> )} diff --git a/src/renderer/src/pages/settings/NotesSettings.tsx b/src/renderer/src/pages/settings/NotesSettings.tsx index 99dc8ba1df..c9083694df 100644 --- a/src/renderer/src/pages/settings/NotesSettings.tsx +++ b/src/renderer/src/pages/settings/NotesSettings.tsx @@ -191,6 +191,15 @@ const NotesSettings: FC = () => { /> {t('notes.settings.display.show_table_of_contents_description')} + + + {t('notes.settings.display.table_auto_wrap')} + updateSettings({ tableAutoWrap: checked })} + /> + + {t('notes.settings.display.table_auto_wrap_description')} ) diff --git a/src/renderer/src/store/note.ts b/src/renderer/src/store/note.ts index 38f331c76e..3443ca4b77 100644 --- a/src/renderer/src/store/note.ts +++ b/src/renderer/src/store/note.ts @@ -12,6 +12,7 @@ export interface NotesSettings { defaultEditMode: Omit 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',