MagicMark - Advanced Query Builder for Strapi v5 🔖

Save and apply complex Content Manager queries with one click. Professional bookmark management with role-based sharing, advanced filtering, and drag-and-drop organization for Strapi v5.

📸 Screenshots

MagicMark Dashboard

Professional interface for managing query bookmarks with statistics and easy access.

Save as MagicMark

Create bookmarks with emoji, name, description, and sharing options directly from Content Manager.

Advanced Filter Builder

Build complex queries with the advanced filter modal for precise content filtering.

Quick Access in Content Manager

Seamless integration - MagicMark button right in the Content Manager toolbar for instant bookmark access.

✨ Features

Core Bookmark Management

✅ Query Bookmarks - Save complex Content Manager filters, sorts, and pagination
✅ One-Click Apply - Instantly restore entire query states
✅ Emoji Identification - Visual icons for quick bookmark recognition
✅ Pin to Top - Keep frequently used bookmarks always accessible
✅ Drag & Drop - Reorder bookmarks effortlessly
✅ Mobile Optimized - Fully responsive design

Advanced Sharing

✅ Role-Based Sharing - Share with specific admin roles
✅ User Sharing - Share with individual admin users
✅ Public Bookmarks - Make bookmarks visible to all users
✅ Permission Control - Fine-grained access management

User Experience

✅ Quick Access - Bookmark button in Content Manager toolbar
✅ Filter Preview - See exactly what's saved in each bookmark
✅ Descriptions - Add notes to remember bookmark purpose
✅ Context Aware - Automatically detects current content type
✅ Instant Save - Capture current query state in one click
✅ Professional UI - Beautiful gradient design with smooth animations

Multi-Language Support

✅ 5 Languages - English, Deutsch, Français, Español, Português
✅ Auto-Detection - Follows your Strapi admin language
✅ Complete i18n - All UI elements translated

🚀 Quick Start

1. Install Plugin

npm install strapi-plugin-magic-mark
# or
yarn add strapi-plugin-magic-mark

2. Register in Config

Add to src/config/plugins.ts (or plugins.js):

export default () => ({
  'magic-mark': {
    enabled: true,
  },
});

3. Build & Run

# Rebuild admin panel
npm run build

# Start Strapi
npm run develop

4. Activate License (First Use)

Go to Admin → MagicMark
Click "Activate License"
Choose: Auto-create, Manual entry, or Existing key
Done! Plugin is ready

5. Save Your First Bookmark

Navigate to any Content Manager collection
Apply filters, sorting, or search
Click the MagicMark button in the toolbar (see screenshot above)
Click "Save Bookmark"
Add:
- Name (e.g., "Published Articles")
- Emoji (e.g., 📰)
- Description (optional)
- Sharing settings (optional)
Click Save

6. Use Bookmarks

Click MagicMark → Select bookmark → Done!
All filters are instantly applied
Share with team members

🔄 How It Works

Bookmark Save Flow

User in Content Manager
       ↓
Applies: Filters, Sort, Search, Pagination
       ↓
[Click MagicMark Button] (See "Quick Access" screenshot)
       ↓
"Save Bookmark" Modal opens (See "Save as MagicMark" screenshot)
       ↓
User enters: Name, Emoji, Description, Sharing
       ↓
[Save]
       ↓
Query parameters captured:
  - Path: /content-manager/collection-types/api::article.article
  - Query: filters[$and][0][publishedAt][$notNull]=true&sort[0]=createdAt:desc
  - Pagination: page=1&pageSize=25
       ↓
Bookmark stored in database
       ↓
Success! Bookmark appears in Dashboard (See "Dashboard" screenshot)

Bookmark Apply Flow

User clicks MagicMark button
       ↓
List of available bookmarks appears
  (filtered by user permissions)
       ↓
[User selects bookmark]
       ↓
Navigation to content type happens
       ↓
Query parameters applied:
  - Filters restored (See "Advanced Filters" screenshot)
  - Sort order set
  - Pagination reset
  - Search cleared
       ↓
Content Manager displays filtered results

🎬 Screenshots in Action

1. Dashboard View

The main MagicMark Dashboard (see first screenshot above) shows:

All your bookmarks with emoji icons
Pinned bookmarks at the top
Quick actions: Edit, Delete, Share
Search and filter capabilities
Beautiful gradient design

2. Quick Access Button

The Quick Access button (see screenshot above) is integrated directly into:

Content Manager toolbar
Appears on all collection pages
One-click access to bookmarks
Context-aware (shows relevant bookmarks)

3. Save Bookmark Modal

The Save Bookmark Modal (see screenshot above) includes:

Name field with emoji picker
Description for notes
Sharing options (Roles, Users, Public)
Preview of current query
Visual feedback

4. Advanced Filters

The Advanced Filter Builder (see screenshot above) lets you:

Build complex filter conditions
Combine AND/OR logic
Save multi-level queries
Preview filter results
Edit existing filters

📡 API Routes

Content API Routes

All routes require valid JWT authentication (except public bookmarks).

Get All Bookmarks

GET /api/magic-mark/bookmarks

Response:
{
  "data": [
    {
      "id": 1,
      "attributes": {
        "name": "Published Articles",
        "emoji": "📰",
        "description": "Recent published content",
        "path": "/content-manager/collection-types/api::article.article",
        "query": "filters[$and][0][publishedAt][$notNull]=true",
        "isPinned": true,
        "isPublic": false,
        "createdAt": "2024-01-15T10:30:00Z"
      }
    }
  ],
  "meta": { "count": 5 }
}

Create Bookmark

POST /api/magic-mark/bookmarks
Authorization: Bearer JWT_TOKEN

Request:
{
  "data": {
    "name": "Draft Posts",
    "emoji": "📝",
    "description": "Unpublished drafts",
    "path": "/content-manager/collection-types/api::article.article",
    "query": "filters[0][publishedAt][$null]=true",
    "isPublic": false,
    "sharedWithRoles": [1, 2],
    "sharedWithUsers": [3]
  }
}

Update Bookmark

PUT /api/magic-mark/bookmarks/:id
Authorization: Bearer JWT_TOKEN

Delete Bookmark

DELETE /api/magic-mark/bookmarks/:id
Authorization: Bearer JWT_TOKEN

Reorder Bookmarks

POST /api/magic-mark/bookmarks/reorder
Authorization: Bearer JWT_TOKEN

Request:
{
  "bookmarkIds": [3, 1, 5, 2, 4]
}

⚙️ Configuration

Basic Setup (Default)

The plugin works out of the box with zero configuration!

// src/config/plugins.ts
export default () => ({
  'magic-mark': {
    enabled: true,
  },
});

Advanced Options (Optional)

export default () => ({
  'magic-mark': {
    enabled: true,
    config: {
      // Maximum bookmarks per user
      maxBookmarksPerUser: 50,
      
      // Enable query history
      enableHistory: true,
      
      // Auto-cleanup old queries (days)
      autoCleanupDays: 90,
    },
  },
});

💡 Use Cases

Content Management

Published Articles 📰

Filter: publishedAt is not empty
Sort: createdAt DESC
Result: Quick access to all published content

Draft Posts 📝

Filter: publishedAt is empty AND status = "draft"
Sort: updatedAt DESC
Result: Focus on work in progress

Recent Updates 🕒

Filter: updatedAt >= 7 days ago
Sort: updatedAt DESC
Result: See what changed recently

My Content 👤

Filter: createdBy = current user
Sort: createdAt DESC
Result: See all your creations

Team Collaboration

Shared Queries 👥

Team members access same filtered views
No need to re-apply complex filters
Everyone sees consistent data

Role-Based Access 🔐

Editors see different bookmarks than Authors
Managers see different views than Contributors
Automatic based on admin roles

Public Bookmarks 🌍

Common queries for entire team
New members immediately see them
Save time explaining filters

Power Users

Complex Filters 🎯

Save multi-condition queries:
  - Status = "approved"
  - Category IN ["tech", "news"]
  - Priority >= "high"
  - CreatedAt >= "2024-01-01"

Sorted Views 📊

Different sort orders for different needs:
  - By date (newest first)
  - By title (A-Z)
  - By popularity (most viewed)

🧪 Testing

1. Install & Setup

# Install in your Strapi project
npm install strapi-plugin-magic-mark

# Add to config/plugins.ts
# Rebuild admin
npm run build

2. Test Basic Bookmark

Go to Content Manager → Any collection
Apply some filters
Click MagicMark button (see screenshot)
Save with name "Test Bookmark" and emoji 🧪
Verify it appears in dashboard

3. Test Bookmark Apply

Clear all filters
Click MagicMark → Select "Test Bookmark"
Verify filters are restored correctly

4. Test Sharing

Create bookmark
Share with specific role
Login as user with that role
Verify bookmark is visible

5. Test Advanced Filters

Use Advanced Filter Builder (see screenshot)
Create complex multi-condition filter
Save as bookmark
Apply and verify all conditions work

🐛 Troubleshooting

MagicMark Button Not Appearing

Problem: No MagicMark button in Content Manager toolbar (see screenshot for where it should be).

Solutions:

Rebuild admin: npm run build
Clear browser cache (Cmd+Shift+R / Ctrl+Shift+R)
Check plugin is enabled in config
Check browser console for errors (F12)

Bookmarks Not Saving

Problem: Click "Save Bookmark" but bookmark doesn't appear in dashboard.

Solutions:

Check Strapi logs for errors
Verify license is activated
Check database is writable
Try creating simpler bookmark first

Bookmarks Not Applying

Problem: Select bookmark but filters don't apply.

Solutions:

Refresh page and try again
Check Content Manager path matches bookmark
Try creating new bookmark
Clear browser localStorage

Advanced Filters Not Working

Problem: Complex filters from advanced builder don't apply correctly.

Solutions:

Check filter syntax in bookmark
Try simpler filter first
Verify content type supports the filters
Check browser console for errors

🛠️ Development

Local Development

# Watch mode - rebuilds on file changes
npm run watch

# Link to local Strapi
npm run watch:link

# Type checking
npm run test:ts:front   # Frontend TypeScript
npm run test:ts:back    # Backend TypeScript

# Verify plugin
npm run verify

Plugin Structure

magic-mark/
├── admin/                      # React admin UI
│   └── src/
│       ├── components/
│       │   ├── BookmarkList.tsx
│       │   ├── SaveBookmarkModal.tsx
│       │   ├── BookmarkCard.tsx
│       │   └── AdvancedFilterBuilder.tsx
│       ├── pages/
│       │   ├── App.tsx
│       │   ├── HomePage.tsx (Dashboard - see screenshot)
│       │   └── LicensePage.tsx
│       ├── hooks/
│       ├── translations/       # i18n (5 languages)
│       └── index.ts
├── server/                     # Backend (TypeScript)
│   └── src/
│       ├── bootstrap.ts
│       ├── controllers/
│       ├── services/
│       ├── routes/
│       └── content-types/
├── pics/                       # Screenshots
│   ├── dashboard.png
│   ├── saveAsMagicMark.png
│   ├── advancedFilters.png
│   └── quickaccesinContentmanager.png
├── .github/workflows/          # CI/CD
├── package.json
├── .releaserc.json
└── README.md

Build & Release

# Build plugin
npm run build

# Verify integrity
npm run verify

# Release (automatic via GitHub Actions)
# Just use semantic commits:
git commit -m "feat: add new feature"    # → MINOR version
git commit -m "fix: fix bug"             # → PATCH version
git commit -m "feat!: breaking change"   # → MAJOR version

📦 NPM Release Process

This plugin uses semantic-release for automated versioning.

Commit Message Format

# PATCH version (bug fix)
git commit -m "fix: correct bookmark save"

# MINOR version (new feature)
git commit -m "feat: add bookmark export"

# MAJOR version (breaking change)
git commit -m "feat!: change API format"

Automatic Release

GitHub Actions automatically:

Analyzes commits
Bumps version
Updates CHANGELOG
Publishes to NPM
Creates GitHub release

🤝 Contributing

Contributions are welcome!

Fork: https://github.com/Schero94/Magicmark
Create branch: git checkout -b feature/amazing
Commit: git commit -m "feat: add amazing feature"
Push: git push origin feature/amazing
Open Pull Request

📚 Resources

NPM Package: https://www.npmjs.com/package/strapi-plugin-magic-mark
GitHub: https://github.com/Schero94/Magicmark
Issues: https://github.com/Schero94/Magicmark/issues
Changelog: CHANGELOG.md

📄 License

MIT License - Free for personal & commercial use

See LICENSE for full terms

🌐 Supported Languages

🇬🇧 English - Global standard
🇩🇪 Deutsch - German (DACH region)
🇫🇷 Français - French
🇪🇸 Español - Spanish (Spain & Latin America)
🇵🇹 Português - Portuguese (Brazil & Portugal)

Language automatically follows your Strapi admin interface setting.

🙏 Acknowledgments

Built with ❤️ for the Strapi community.

Special thanks to:

Strapi team for the amazing CMS
Community contributors
All users providing feedback

Made with 🔖 by Schero D.

Name		Name	Last commit message	Last commit date
Latest commit History 26 Commits
.github/workflows		.github/workflows
admin		admin
pics		pics
server		server
.eslintignore		.eslintignore
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
.releaserc.json		.releaserc.json
CHANGELOG.md		CHANGELOG.md
COPYRIGHT_NOTICE.txt		COPYRIGHT_NOTICE.txt
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
strapi-server.js		strapi-server.js

License

Schero94/Magicmark

Folders and files

Latest commit

History

Repository files navigation

MagicMark - Advanced Query Builder for Strapi v5 🔖

📸 Screenshots

MagicMark Dashboard

Save as MagicMark

Advanced Filter Builder

Quick Access in Content Manager

📋 Table of Contents

✨ Features

Core Bookmark Management

Advanced Sharing

User Experience

Multi-Language Support

🚀 Quick Start

1. Install Plugin

2. Register in Config

3. Build & Run

4. Activate License (First Use)

5. Save Your First Bookmark

6. Use Bookmarks

🔄 How It Works

Bookmark Save Flow

Bookmark Apply Flow

🎬 Screenshots in Action

1. Dashboard View

2. Quick Access Button

3. Save Bookmark Modal

4. Advanced Filters

📡 API Routes

Content API Routes

Get All Bookmarks

Create Bookmark

Update Bookmark

Delete Bookmark

Reorder Bookmarks

⚙️ Configuration

Basic Setup (Default)

Advanced Options (Optional)

💡 Use Cases

Content Management

Team Collaboration

Power Users

🧪 Testing

1. Install & Setup

2. Test Basic Bookmark

3. Test Bookmark Apply

4. Test Sharing

5. Test Advanced Filters

🐛 Troubleshooting

MagicMark Button Not Appearing

Bookmarks Not Saving

Bookmarks Not Applying

Advanced Filters Not Working

🛠️ Development

Local Development

Plugin Structure

Build & Release

📦 NPM Release Process

Commit Message Format

Automatic Release

🤝 Contributing

📚 Resources

📄 License

🌐 Supported Languages

🙏 Acknowledgments

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 5

Packages 0

Packages