amitwh/markdown-converter
1
0
Fork 0
mirror of https://github.com/amitwh/markdown-converter.git synced 2026-08-02 18:10:18 +05:30
Code Issues Packages Projects Releases Wiki Activity

feat: add command palette (Ctrl+Shift+P)

Browse Source 
Refactor inline command palette into a proper CommandPalette class
with search highlighting, keyboard navigation, and overlay UI.
Register all app actions including formatting, file ops, and sidebar
toggles.
This commit is contained in:
amitwh
2026-03-04 15:56:24 +05:30
parent 72ee803a95
commit 3908df8b1d
5 changed files with 291 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+1 -104
View File
@@ -4010,107 +4010,4 @@ body.theme-github .mermaid {
}
/* Command Palette Styles */
.command-palette {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 100px;
z-index: 10000;
}
.command-palette.hidden {
display: none;
}
.command-palette-content {
background: #fff;
border-radius: 12px;
width: 600px;
max-width: 90%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
#command-search {
width: 100%;
padding: 20px;
font-size: 18px;
border: none;
border-bottom: 1px solid #e0e0e0;
outline: none;
}
.command-list {
max-height: 400px;
overflow-y: auto;
}
.command-item {
padding: 12px 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.15s;
}
.command-item:hover,
.command-item.selected {
background: #f0f0f0;
}
.command-name {
font-weight: 500;
}
.command-shortcut {
font-size: 12px;
color: #666;
background: #f5f5f5;
padding: 3px 8px;
border-radius: 3px;
}
.command-palette-footer {
padding: 12px 20px;
background: #f9f9f9;
border-top: 1px solid #e0e0e0;
display: flex;
gap: 20px;
font-size: 12px;
color: #666;
}
/* Dark theme support for command palette */
body.theme-dark .command-palette-content {
background: #2d2d2d;
color: #f0f0f0;
}
body.theme-dark #command-search {
background: #2d2d2d;
color: #f0f0f0;
border-color: #444;
}
body.theme-dark .command-item:hover,
body.theme-dark .command-item.selected {
background: #3d3d3d;
}
body.theme-dark .command-shortcut {
background: #3d3d3d;
color: #ccc;
}
body.theme-dark .command-palette-footer {
background: #252525;
border-color: #444;
color: #999;
}
/* Command Palette styles moved to styles-modern.css */