From 0fe6f6a6030ebe3ec86f3ce0a14c28a94efbf2e5 Mon Sep 17 00:00:00 2001 From: Muhammed-Rahif Date: Thu, 26 Dec 2024 04:57:24 +0530 Subject: [PATCH] feat(editor): multiple date/time formats; resolves #291 menubar split into multiple components in a new folder --- package.json | 1 + pnpm-lock.yaml | 8 + src/App.svelte | 2 +- src/lib/components/EditMenuItems.svelte | 116 +++++++++ src/lib/components/EditorTabs.svelte | 32 +-- src/lib/components/MenuBar.svelte | 238 ------------------ src/lib/components/icons/CalendarClock.svelte | 12 - src/lib/components/menubar/EditMenu.svelte | 11 + src/lib/components/menubar/FileMenu.svelte | 32 +++ src/lib/components/menubar/MenuBar.svelte | 43 ++++ src/lib/components/menubar/SearchMenu.svelte | 24 ++ .../components/menubar/SettingsMenu.svelte | 69 +++++ src/lib/components/menubar/ViewMenu.svelte | 62 +++++ src/lib/helpers/menubar/edit-options.ts | 12 +- 14 files changed, 376 insertions(+), 286 deletions(-) create mode 100644 src/lib/components/EditMenuItems.svelte delete mode 100644 src/lib/components/MenuBar.svelte delete mode 100644 src/lib/components/icons/CalendarClock.svelte create mode 100644 src/lib/components/menubar/EditMenu.svelte create mode 100644 src/lib/components/menubar/FileMenu.svelte create mode 100644 src/lib/components/menubar/MenuBar.svelte create mode 100644 src/lib/components/menubar/SearchMenu.svelte create mode 100644 src/lib/components/menubar/SettingsMenu.svelte create mode 100644 src/lib/components/menubar/ViewMenu.svelte diff --git a/package.json b/package.json index 86892ce..700e0f6 100644 --- a/package.json +++ b/package.json @@ -86,6 +86,7 @@ "@tauri-apps/plugin-process": "^2.0.0", "@tauri-apps/plugin-shell": "^2.0.1", "caret-pos": "^2.0.0", + "dayjs": "^1.11.13", "localforage": "^1.10.0", "lodash.debounce": "^4.0.8", "lodash.merge": "^4.6.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 15aac05..fb5d3be 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ importers: caret-pos: specifier: ^2.0.0 version: 2.0.0 + dayjs: + specifier: ^1.11.13 + version: 1.11.13 localforage: specifier: ^1.10.0 version: 1.10.0 @@ -1845,6 +1848,9 @@ packages: resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==} engines: {node: '>= 0.4'} + dayjs@1.11.13: + resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==} + debug@4.3.7: resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==} engines: {node: '>=6.0'} @@ -6031,6 +6037,8 @@ snapshots: es-errors: 1.3.0 is-data-view: 1.0.1 + dayjs@1.11.13: {} + debug@4.3.7: dependencies: ms: 2.1.3 diff --git a/src/App.svelte b/src/App.svelte index 96a888d..99c7935 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,5 +1,5 @@ + +{#each menuItems as item} + {#if item.type === 'separator'} + + {:else if item.label == 'Time/Date'} + + {item.label} + + {#each dateTimeFormats as format} + {@const dateTimeContent = dayjs(now).format(format)} + + { + Notpad.editOptions.insertOrReplace({ + content: dateTimeContent + }); + }} + > + {dateTimeContent} + + {/each} + + + + {:else} + + {item.label} + {#if item.shortcut} + {item.shortcut} + {/if} + + {/if} +{/each} diff --git a/src/lib/components/EditorTabs.svelte b/src/lib/components/EditorTabs.svelte index 718cf8b..8be83ce 100644 --- a/src/lib/components/EditorTabs.svelte +++ b/src/lib/components/EditorTabs.svelte @@ -4,9 +4,8 @@ import * as ContextMenu from '@/components/ui/context-menu'; import EditorTitle from '@/components/EditorTitle.svelte'; import { activeTabId, editors } from '@/store/store'; - import { Notpad } from '@/helpers/notpad'; import { slide } from 'svelte/transition'; - import CalendarClockIcon from '@/components/icons/CalendarClock.svelte'; + import EditMenuItems from '@/components/EditMenuItems.svelte'; let innerWidth = $state(window.innerWidth); @@ -56,34 +55,7 @@ - Notpad.editOptions.undo()}> - UndoCtrl+Z - - Notpad.editOptions.redo()}> - RedoCtrl+Y - - - Notpad.editOptions.cut()}> - CutCtrl+X - - Notpad.editOptions.copy()}> - CopyCtrl+C - - Notpad.editOptions.paste()}> - PasteCtrl+V - - Notpad.editOptions.delete()}> - DeleteDelete - - - Notpad.editOptions.selectAll()}> - Select All - Ctrl+A - - Notpad.editOptions.insertDateAndTime()}> - Time/Date - - + diff --git a/src/lib/components/MenuBar.svelte b/src/lib/components/MenuBar.svelte deleted file mode 100644 index f65cfce..0000000 --- a/src/lib/components/MenuBar.svelte +++ /dev/null @@ -1,238 +0,0 @@ - - - - - - - File - - Notpad.editors.createNew()}> - New{isTauri ? 'Ctrl+N' : 'Ctrl+Alt+N'} - - - Open...Ctrl+O - - Notpad.fileOptions.save()}> - SaveCtrl+S - - Notpad.fileOptions.save({ saveAs: true })}> - Save as...Ctrl+Shift+S - - Notpad.fileOptions.print()}> - PrintCtrl+P - - - - Exit - - - - - - - Edit - - Notpad.editOptions.undo()}> - UndoCtrl+Z - - Notpad.editOptions.redo()}> - RedoCtrl+Y - - - Notpad.editOptions.cut()}> - CutCtrl+X - - Notpad.editOptions.copy()}> - CopyCtrl+C - - Notpad.editOptions.paste()}> - PasteCtrl+V - - Notpad.editOptions.delete()}> - DeleteDelete - - - Notpad.editOptions.selectAll()}> - Select All - Ctrl+A - - Notpad.editOptions.insertDateAndTime()}> - Time/Date - - - - - - - Search - - - Find/ReplaceCtrl+F - - - Go ToCtrl+G - - - Notpad.searchOptions.searchOnWeb()}> - Search on Google - - - - - - - View - - - Zoom - - Notpad.viewOptions.zoom('in')}> - Zoom InCtrl+Plus - - Notpad.viewOptions.zoom('out')}> - Zoom OutCtrl+Minus - - Notpad.viewOptions.zoom('reset')}> - Reset ZoomCtrl+0 - - - - - - screenfull.toggle()}> - Full Screen - F11 - - - Status Bar - - - - Line Numbers - - - - Wrap Lines - - - - - - - Settings - - - Font - - - - - - Theme - - Light - Dark - Sepia - Classic - - - - - Sound - - None - Click - Pop - Typewriter - - - - - Vibration - - None - Low - Medium - High - Strong - - - - - - Shortcuts - - - - - Github - - - - - About Notpad - - - - - - {#if !isMD && !tabsMode} -
- -
- {/if} - - {#if !isTauri} - - {/if} - diff --git a/src/lib/components/icons/CalendarClock.svelte b/src/lib/components/icons/CalendarClock.svelte deleted file mode 100644 index e359528..0000000 --- a/src/lib/components/icons/CalendarClock.svelte +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/src/lib/components/menubar/EditMenu.svelte b/src/lib/components/menubar/EditMenu.svelte new file mode 100644 index 0000000..76aaabe --- /dev/null +++ b/src/lib/components/menubar/EditMenu.svelte @@ -0,0 +1,11 @@ + + + + Edit + + + + diff --git a/src/lib/components/menubar/FileMenu.svelte b/src/lib/components/menubar/FileMenu.svelte new file mode 100644 index 0000000..fcbb0c3 --- /dev/null +++ b/src/lib/components/menubar/FileMenu.svelte @@ -0,0 +1,32 @@ + + + + File + + Notpad.editors.createNew()}> + New{isTauri ? 'Ctrl+N' : 'Ctrl+Alt+N'} + + + Open...Ctrl+O + + Notpad.fileOptions.save()}> + SaveCtrl+S + + Notpad.fileOptions.save({ saveAs: true })}> + Save as...Ctrl+Shift+S + + Notpad.fileOptions.print()}> + PrintCtrl+P + + + + Exit + + + + diff --git a/src/lib/components/menubar/MenuBar.svelte b/src/lib/components/menubar/MenuBar.svelte new file mode 100644 index 0000000..9262677 --- /dev/null +++ b/src/lib/components/menubar/MenuBar.svelte @@ -0,0 +1,43 @@ + + + + + + + + + + + + {#if !isMD && !tabsMode} +
+ +
+ {/if} + + {#if !isTauri} + + {/if} + diff --git a/src/lib/components/menubar/SearchMenu.svelte b/src/lib/components/menubar/SearchMenu.svelte new file mode 100644 index 0000000..d053ce1 --- /dev/null +++ b/src/lib/components/menubar/SearchMenu.svelte @@ -0,0 +1,24 @@ + + + + Search + + + Find/ReplaceCtrl+F + + + Go ToCtrl+G + + + Notpad.searchOptions.searchOnWeb()}> + Search on Google + + + + diff --git a/src/lib/components/menubar/SettingsMenu.svelte b/src/lib/components/menubar/SettingsMenu.svelte new file mode 100644 index 0000000..7e813b0 --- /dev/null +++ b/src/lib/components/menubar/SettingsMenu.svelte @@ -0,0 +1,69 @@ + + + + Settings + + + Font + + + + + + Theme + + Light + Dark + Sepia + Classic + + + + + Sound + + None + Click + Pop + Typewriter + + + + + Vibration + + None + Low + Medium + High + Strong + + + + + + Shortcuts + + + + + Github + + + + + About Notpad + + + + diff --git a/src/lib/components/menubar/ViewMenu.svelte b/src/lib/components/menubar/ViewMenu.svelte new file mode 100644 index 0000000..eba11d4 --- /dev/null +++ b/src/lib/components/menubar/ViewMenu.svelte @@ -0,0 +1,62 @@ + + + + View + + + Zoom + + Notpad.viewOptions.zoom('in')}> + Zoom InCtrl+Plus + + Notpad.viewOptions.zoom('out')}> + Zoom OutCtrl+Minus + + Notpad.viewOptions.zoom('reset')}> + Reset ZoomCtrl+0 + + + + + + screenfull.toggle()}> + Full Screen + F11 + + + Status Bar + + + + Line Numbers + + + + Wrap Lines + + + + diff --git a/src/lib/helpers/menubar/edit-options.ts b/src/lib/helpers/menubar/edit-options.ts index ad51dce..4a4438f 100644 --- a/src/lib/helpers/menubar/edit-options.ts +++ b/src/lib/helpers/menubar/edit-options.ts @@ -19,8 +19,8 @@ export class EditOptions { const editor = Notpad.editors.getEditor(editorId); const quill = editor.quill!; const selection = quill.getSelection()!; - if (!selection) return; + if (!selection) return; const selectedContent = quill.getContents(selection.index, selection.length); const tempCont = document.createElement('div'); new Quill(tempCont).setContents(selectedContent); @@ -120,6 +120,7 @@ export class EditOptions { delete = (editorId?: string) => { const quill = Notpad.editors.getEditor(editorId).quill!; const range = quill.getSelection(); + if (range) { // Delete the selected text if any if (range.length > 0) { @@ -135,20 +136,21 @@ export class EditOptions { Notpad.editors.setSelection(editor.id, new Range(0, quill.getLength()), true); }; - insertDateAndTime = (editorId?: string) => { + insertOrReplace = ({ editorId, content }: { editorId?: string; content: string }) => { const editor = Notpad.editors.getEditor(editorId); const quill = editor.quill!; - const date = new Date().toLocaleString(); const range = quill.getSelection(); + if (range) { // Delete the selected text if any if (range.length > 0) { quill.deleteText(range.index, range.length); } } + const index = range?.index ?? 0; - quill.insertText(index, date); + quill.insertText(index, content); // Move caret to the end of the inserted text - Notpad.editors.setSelection(editor.id, new Range(index + date.length, 0), true); + Notpad.editors.setSelection(editor.id, new Range(index + content.length, 0), true); }; }