add GitHub media library with image browsing #2911
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for hyprnote-storybook canceled.
|
✅ Deploy Preview for howto-fix-macos-audio-selection canceled.
|
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
ComputelessComputer
force-pushed
the
decamp-media-library
branch
from
4add810 to
d279a1a
Compare
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
ComputelessComputer
force-pushed
the
decamp-media-library
branch
from
e2d0560 to
3a4257a
Compare
ComputelessComputer
force-pushed
the
decamp-media-library
branch
from
8bea8a8 to
06bb09b
Compare
ComputelessComputer
force-pushed
the
decamp-media-library
branch
6 times, most recently
from
08d1e54 to
fe31046
Compare
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
Modify the media library UI to add a fullscreen link and improve header layout. Remove custom hash route handling for cleaner navigation.
Avoid filename collisions by prefixing uploaded media files with a Unix timestamp. The change sanitizes filenames, prepends Date.now() to ensure uniqueness, and preserves allowed image extensions validation. Removed prior pre-check for an existing file (and its sha) so uploads rely on a single create/update request to GitHub, and minor formatting/array formatting improvements were applied.
Add left (←) and right (→) navigation buttons to the media library breadcrumb and implement a navigation stack so users can move back and forward through visited folders. This introduces navigationStack and navigationIndex state, CSS for the nav buttons, back/forward handlers, and updates breadcrumb rendering and folder navigation to use navigateToPath, ensuring history is maintained and buttons are enabled/disabled appropriately.
Allow users to create folders from the media-library modal by adding a "New Folder" button to the bottom toolbar and wiring it to a handler that prompts for a folder name, sanitizes it, and calls a new API helper (createFolderViaAPI) to create the folder on the server. This clears relevant cache and reloads the current folder on success, and shows errors on failure. The change was needed so users can create folders directly in the modal UI without leaving the media library view.
Add API-backed delete functionality and toolbar controls to allow users to delete selected files/folders and to unselect all. Fix selection tracking to use item.path (not publicPath) consistently, update the UI to show "Unselect All" and "Delete" buttons when items are selected, and implement handleDelete and deleteViaAPI to confirm and perform deletions, refresh the folder view, and clear selections.
When clicking inside the media-library modal but outside any selected file, the selection should be cleared. Added stopPropagation on item clicks to prevent ancestor handlers from interfering, and a click handler on the grid/list container that clears selectedItems and selected CSS when the container itself is clicked (i.e., clicking the modal background). This ensures clicking the empty area deselects files and updates the toolbar accordingly.
Make clicking anywhere in the media finder content area (including the container, grid, or list elements) clear selections. Previously clicks on empty row areas only worked when targeting the grid/list element itself, leaving other empty spaces non-interactive. This change attaches the click handler to the top-level content element and checks for clicks on content, .gml-grid, or .gml-list so the deselect behavior covers the entire finder area.
Adjust the media library toolbar shown from /admin so the editor mode behaves correctly when selecting files. Ensure the selection count and buttons only appear when appropriate: hide the toolbar in editor mode with no selection, show a Cancel button for empty editor selections, enable the Insert button only when items are selected, and keep the Unselect All behavior for non-editor contexts. This fixes UI confusion where an Insert button was shown or enabled incorrectly and clarifies the upload/selection workflow.
The media library toolbar buttons for creating folders and uploading assets were not visible in the top header. This change adds hidden New Folder and Upload controls to the header and toggles their visibility from the toolbar state logic, relocating interaction handlers to the header. Hides the header controls during uploads or selection/editor modes and restores them otherwise, and wires the upload input and new-folder click to the existing handlers so uploads and folder creation work from the header.
Ensure inserted media use their public URLs instead of raw storage paths. When confirming selected items in the media library, map each selected path through getPublicPath and set both path and url to that public path so the editor gets the correct, accessible asset location.
Prevent errors when inserting images into the editor by checking that the handleInsert callback exists before calling it. The editor was failing to insert images because handleInsert could be undefined; adding conditional guards around double-click and insert-button code paths avoids runtime exceptions. Also add temporary console.log statements to help debug what assets and handleInsert look like during interactions.
Selected images were only tracked by path, causing inserted assets to use the public path (e.g. "/images/foo.jpg") instead of the actual GitHub download_url. Change selection storage from a Set of paths to a Map of item objects, carry download_url through dataset attributes, and ensure insert and double-click handlers use the real download URL when available so uploaded assets reference the correct raw GitHub content.
ComputelessComputer
force-pushed
the
decamp-media-library
branch
from
fe31046 to
bd25baa
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
• Added GitHub media library feature with image browsing functionality
• Implemented media library interface for browsing images from GitHub
• New capability to interact with GitHub-hosted media resources