tagger

tools/plugins/tags/README.md

@@ -0,0 +1,81 @@
+# Tags Plugin
+
+A multi-select, searchable tag picker for Adobe Document Authoring (DA) Edge Delivery Services and Universal Editor (UE) environments.
+
+## Features
+
+- **Fetches tags** from a JSON file (`/docs/library/tagging.json`) in your DA repo.
+- **Searchable**: Quickly filter tags by value, key, or comments.
+- **Multi-select**: Select multiple tags using checkboxes.
+- **Bulk actions**: Select all, deselect all, and send all selected tags at once.
+- **Accessible UI**: Keyboard and screen-reader friendly.
+- **Modern, responsive design**: Clean, sticky action bar and mobile-friendly layout.
+
+## Usage
+
+1. **Add the plugin to your DA tools directory** (already present as `tools/plugins/tags/`).
+2. **Ensure your DA repo contains a `docs/library/tagging.json` file** with the following structure:
+
+   ```json
+   {
+     "data": [
+       {
+         "key": "tag-key-1",
+         "value": "Tag Value 1",
+         "comments": "Optional description / unsed in UI"
+       },
+       {
+         "key": "tag-key-2",
+         "value": "Tag Value 2"
+       }
+     ],
+     "limit": 100
+   }
+   ```
+
+   - `key`: The value sent to the document when selected.
+   - `value`: The label shown in the UI.
+   - `comments`: (Optional) Additional info shown in the UI.
+
+3. **Open `tools/tags/tags.html` in the DA/UE environment**.
+   - The plugin will automatically fetch and display tags from your repo.
+   - Use the search box to filter tags.
+   - Select tags using checkboxes.
+   - Use the action bar at the bottom to select all, deselect all, or send selected tags.
+   - Click "Send Selected" to insert the selected tag keys (comma-separated) into your document.
+
+## File Overview
+
+- `tags.html` – Minimal HTML shell, loads the plugin and styles.
+- `tags.js` – Main plugin logic (fetch, render, search, select, send).
+- `tags.css` – All UI styles (customizable).
+
+## Integration
+
+- **DA SDK**: Uses the DA App SDK (`https://da.live/nx/utils/sdk.js`) for context, fetch, and document actions.
+- **No build step required**: All files are plain JS/CSS/HTML.
+- **No external dependencies**: Only the DA SDK is required.
+
+### Configuration
+
+> Site _CONFIG_ > _library_
+
+| title | path | icon | ref | format | experience |
+| ------- | ----------------------- | -------------------------------------------------------------------- | --- | --- | -------- |
+| `Tags`  | `/tools/plugins/tags/tags.html` | `https://main--{site}--{org}.aem.page/tools/plugins/tags/classification.svg` |     |     | `dialog` |
+
+## Customization
+
+- **Styling**: Edit `tags.css` to change the look and feel.
+- **Data source**: Change the fetch URL in `tags.js` if your tagging data is elsewhere.
+- **Button text/labels**: Edit in `tags.js` for localization or branding.
+
+## Development
+
+- Lint with `npm run lint`.
+- All code is ES6+ and uses modern best practices.
+- No console logging except for errors.
+
+## License
+
+[MIT](../../LICENSE) (or your project’s license) 

tools/plugins/tags/tags.css

@@ -0,0 +1,187 @@
+/* Tags Tool Styles */
+
+/* Main container */
+.tags-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  font-family: Arial, sans-serif;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+/* Header */
+.tags-header {
+  margin: 5px 20px 5px 20px;
+  text-align: center;
+  flex-shrink: 0;
+  font-style: oblique;
+}
+
+/* Error message */
+.error-message {
+  color: #721c24;
+  background-color: #f8d7da;
+  padding: 12px;
+  border-radius: 6px;
+  border: 1px solid #f5c6cb;
+  margin-bottom: 20px;
+}
+
+/* Warning message */
+.warning-message {
+  color: #856404;
+  background-color: #fff3cd;
+  padding: 12px;
+  border-radius: 6px;
+  border: 1px solid #ffeaa7;
+}
+
+/* Search container */
+.search-container {
+  margin: 0 20px 20px 20px;
+  flex-shrink: 0;
+}
+
+/* Search input */
+.search-input {
+  width: 100%;
+  padding: 12px 16px;
+  border: 2px solid #dee2e6;
+  border-radius: 6px;
+  font-size: 16px;
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+}
+
+.search-input:focus {
+  border-color: #007bff;
+}
+
+.search-input:blur {
+  border-color: #dee2e6;
+}
+
+/* Results container */
+.results-container {
+  flex: 1;
+  overflow-y: auto;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  margin: 0 20px;
+}
+
+/* No results message */
+.no-results {
+  padding: 20px;
+  text-align: center;
+  color: #6c757d;
+}
+
+/* Tag item */
+.tag-item {
+  padding: 12px 16px;
+  border-bottom: 1px solid #f8f9fa;
+  transition: background-color 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.tag-item:hover {
+  background-color: #f8f9fa;
+}
+
+/* Checkbox */
+.tag-checkbox {
+  margin: 0;
+  cursor: pointer;
+}
+
+/* Tag info */
+.tag-info {
+  flex: 1;
+  cursor: pointer;
+}
+
+.tag-value {
+  font-weight: bold;
+  color: #212529;
+  margin-bottom: 4px;
+}
+
+.tag-key {
+  font-size: 12px;
+  color: #6c757d;
+}
+
+.tag-comments {
+  font-size: 12px;
+  color: #6c757d;
+  font-style: italic;
+  margin-top: 2px;
+}
+
+/* Action buttons container */
+.action-container {
+  display: flex;
+  gap: 10px;
+  margin: 20px;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 20px 0;
+  border-top: 1px solid #dee2e6;
+  background-color: white;
+}
+
+/* Button base styles */
+.btn {
+  padding: 10px 20px;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s;
+}
+
+/* Secondary button */
+.btn-secondary {
+  background-color: #6c757d;
+}
+
+.btn-secondary:hover {
+  background-color: #5a6268;
+}
+
+/* Primary button */
+.btn-primary {
+  background-color: #007bff;
+  font-weight: bold;
+}
+
+.btn-primary:hover {
+  background-color: #0056b3;
+}
+
+/* Disabled button */
+.btn:disabled {
+  background-color: #6c757d;
+  cursor: not-allowed;
+}
+
+/* Error button state */
+.btn-error {
+  background-color: #dc3545;
+}
+
+/* Summary */
+.summary {
+  background-color: #f8f9fa;
+  padding: 15px;
+  border-radius: 6px;
+  border: 1px solid #dee2e6;
+  font-size: 14px;
+  margin: 0 20px 20px 20px;
+  flex-shrink: 0;
+} 

tools/plugins/tags/tags.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Tag List</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <link rel="icon" href="data:,">
+    <link rel="stylesheet" href="/tools/plugins/tags/tags.css">
+    <!-- Import DA App SDK -->
+    <script src="https://da.live/nx/utils/sdk.js" type="module"></script>
+    <!-- Project App Logic -->
+    <script src="/tools/plugins/tags/tags.js" type="module"></script>
+  </head>
+  <body>
+  </body>
+</html>