activeadmin_annotations 0.1.1 → 0.1.2

data/app/assets/controllers/activeadmin_annotations/annotator_controller.js

@@ -1,7 +1,14 @@
 import { Controller } from "@hotwired/stimulus";
-
-const PENDING_HIGHLIGHT_NAME = "aa-annotations-pending";
-const SAVED_HIGHLIGHT_NAME = "aa-annotations-saved";
+import { currentSelection } from "activeadmin_annotations/selection";
+import { savedHighlightOffsetPairs } from "activeadmin_annotations/annotator_logic";
+import {
+  HighlightLayer,
+  PENDING_HIGHLIGHT_NAME,
+  SAVED_HIGHLIGHT_NAME,
+} from "activeadmin_annotations/highlights";
+import { emptyAnnotationListItem, annotationListItem } from "activeadmin_annotations/annotation_list";
+import { AnnotationClient, csrfToken } from "activeadmin_annotations/annotation_client";
+import { Composer } from "activeadmin_annotations/composer";
 
 export default class extends Controller {
   static targets = [
@@ -19,6 +26,11 @@ export default class extends Controller {
   static values = {
     reviewId: String,
     field: String,
+    subjectType: String,
+    subjectId: String,
+    context: { type: Object, default: {} },
+    contextDigest: String,
+    contentRevisionVersion: Number,
     createUrl: String,
     updateUrlTemplate: String,
     categoryLabel: { type: String, default: "Category" },
@@ -30,7 +42,9 @@ export default class extends Controller {
   connect() {
     this.pendingSelection = null;
     this.editingAnnotationId = null;
-    this.highlightsSupported = typeof CSS !== "undefined" && CSS.highlights;
+    this.highlightLayer = new HighlightLayer(this.annotatableTarget);
+    this.annotationClient = new AnnotationClient({ csrfToken: csrfToken() });
+    this.composer = new Composer(this);
     this.renderAnnotations();
     this.annotatableTarget.addEventListener("mouseup", this.commitAnnotatableSelection);
     this.annotatableTarget.addEventListener("keyup", this.commitAnnotatableSelection);
@@ -43,8 +57,7 @@ export default class extends Controller {
     this.annotatableTarget.removeEventListener("keyup", this.commitAnnotatableSelection);
     document.removeEventListener("selectionchange", this.handleSelectionChange);
     document.removeEventListener("keydown", this.handleDocumentKeydown);
-    this.clearPendingHighlight();
-    this.clearSavedHighlights();
+    this.highlightLayer.disconnect();
   }
 
   commitAnnotatableSelection = () => {
@@ -52,39 +65,15 @@ export default class extends Controller {
 
     requestAnimationFrame(() => {
       const selection = this.currentSelection();
-      if (selection) this.activateComposer(selection);
+      if (selection) this.composer.activate(selection);
     });
   };
 
   handleSelectionChange = () => {
     if (this.readonlyValue) return;
-    if (this.composerIsOpen()) this.ensurePendingHighlight();
+    if (this.composer.isOpen()) this.composer.ensurePendingHighlight();
   };
 
-  activateComposer(selection) {
-    this.editingAnnotationId = null;
-
-    const selectionChanged =
-      !this.pendingSelection ||
-      this.pendingSelection.startOffset !== selection.startOffset ||
-      this.pendingSelection.endOffset !== selection.endOffset ||
-      this.pendingSelection.selectedText !== selection.selectedText;
-
-    this.pendingSelection = selection;
-    this.selectedPreviewTarget.textContent = selection.selectedText;
-
-    if (selectionChanged) {
-      this.commentInputTarget.value = "";
-      this.categoryInputTarget.value = "";
-    }
-
-    this.hideError();
-    this.setComposerHeading("New annotation");
-    this.composerTarget.classList.remove("aa-annotations-composer-hidden");
-    this.applyPendingHighlight(selection);
-    window.getSelection()?.removeAllRanges();
-  }
-
   editAnnotation(event) {
     if (this.readonlyValue) return;
 
@@ -92,21 +81,7 @@ export default class extends Controller {
     const annotation = this.annotationsValue.find((entry) => String(entry.id) === String(annotationId));
     if (!annotation) return;
 
-    this.editingAnnotationId = annotation.id;
-    this.pendingSelection = {
-      selectedText: annotation.selected_text,
-      startOffset: Number(annotation.start_offset),
-      endOffset: Number(annotation.end_offset),
-    };
-    this.selectedPreviewTarget.textContent = annotation.selected_text;
-    this.commentInputTarget.value = annotation.comment;
-    this.categoryInputTarget.value = annotation.category || "";
-    this.hideError();
-    this.setComposerHeading("Edit annotation");
-    this.composerTarget.classList.remove("aa-annotations-composer-hidden");
-    this.applyPendingHighlight(this.pendingSelection);
-    window.getSelection()?.removeAllRanges();
-    this.commentInputTarget.focus();
+    this.composer.edit(annotation);
   }
 
   async deleteAnnotation(event) {
@@ -115,369 +90,69 @@ export default class extends Controller {
     const annotationId = event.currentTarget.dataset.annotationId;
     const annotation = this.annotationsValue.find((entry) => String(entry.id) === String(annotationId));
     if (!annotation) return;
-
     if (!window.confirm("Delete this annotation?")) return;
 
-    try {
-      const response = await fetch(this.annotationUrl(annotationId), {
-        method: "DELETE",
-        credentials: "same-origin",
-        headers: {
-          Accept: "application/json",
-          "X-CSRF-Token": this.csrfToken(),
-        },
-      });
-
-      if (!response.ok) {
-        window.alert("Could not delete annotation.");
-        return;
-      }
-
-      if (String(this.editingAnnotationId) === String(annotationId)) this.resetComposer();
-
-      this.annotationsValue = this.annotationsValue.filter(
-        (entry) => String(entry.id) !== String(annotationId)
-      );
-      this.renderAnnotations();
-    } catch (_error) {
-      window.alert("Could not delete annotation.");
-    }
-  }
-
-  resetComposer() {
-    this.pendingSelection = null;
-    this.editingAnnotationId = null;
-    this.clearPendingHighlight();
-    this.selectedPreviewTarget.textContent = "";
-    this.commentInputTarget.value = "";
-    this.categoryInputTarget.value = "";
-    this.hideError();
-    this.setComposerHeading("New annotation");
-    this.composerTarget.classList.add("aa-annotations-composer-hidden");
-  }
-
-  composerIsOpen() {
-    return !this.composerTarget.classList.contains("aa-annotations-composer-hidden");
+    await this.composer.destroy(annotationId);
   }
 
   cancelComposer() {
-    this.resetComposer();
-    window.getSelection()?.removeAllRanges();
-  }
-
-  ensurePendingHighlight() {
-    if (!this.pendingSelection) return;
-
-    this.applyPendingHighlight(this.pendingSelection);
+    this.composer.cancel();
   }
 
   async submitComposer() {
-    if (!this.pendingSelection) return;
-
-    const comment = this.commentInputTarget.value.trim();
-    if (!comment) {
-      this.showError("Comment is required.");
-      return;
-    }
-
-    if (this.editingAnnotationId) {
-      await this.updateAnnotation(comment);
-      return;
-    }
-
-    await this.createAnnotation(comment);
-  }
-
-  async createAnnotation(comment) {
-    const payload = {
-      annotation: {
-        annotation_review_id: this.reviewIdValue,
-        field_name: this.fieldValue,
-        selected_text: this.pendingSelection.selectedText,
-        start_offset: this.pendingSelection.startOffset,
-        end_offset: this.pendingSelection.endOffset,
-        comment: comment,
-        category: this.categoryInputTarget.value || null,
-        context_paths_json: [],
-      },
-    };
-
-    try {
-      const response = await fetch(this.createUrlValue, {
-        method: "POST",
-        credentials: "same-origin",
-        headers: {
-          Accept: "application/json",
-          "Content-Type": "application/json",
-          "X-CSRF-Token": this.csrfToken(),
-        },
-        body: JSON.stringify(payload),
-      });
-
-      if (!response.ok) {
-        this.showError("Could not save annotation.");
-        return;
-      }
-
-      const annotation = await response.json();
-      this.resetComposer();
-      this.annotationsValue = [...this.annotationsValue, this.normalizeAnnotation(annotation)];
-      this.renderAnnotations();
-      window.getSelection()?.removeAllRanges();
-    } catch (_error) {
-      this.showError("Could not save annotation.");
-    }
-  }
-
-  async updateAnnotation(comment) {
-    const payload = {
-      annotation: {
-        comment: comment,
-        category: this.categoryInputTarget.value || null,
-      },
-    };
-
-    try {
-      const response = await fetch(this.annotationUrl(this.editingAnnotationId), {
-        method: "PATCH",
-        credentials: "same-origin",
-        headers: {
-          Accept: "application/json",
-          "Content-Type": "application/json",
-          "X-CSRF-Token": this.csrfToken(),
-        },
-        body: JSON.stringify(payload),
-      });
-
-      if (!response.ok) {
-        this.showError("Could not update annotation.");
-        return;
-      }
-
-      const annotation = await response.json();
-      this.resetComposer();
-      this.annotationsValue = this.annotationsValue.map((entry) =>
-        String(entry.id) === String(annotation.id) ? this.normalizeAnnotation(annotation) : entry
-      );
-      this.renderAnnotations();
-    } catch (_error) {
-      this.showError("Could not update annotation.");
-    }
+    await this.composer.submit();
   }
 
   handleDocumentKeydown = (event) => {
     if (event.key !== "Escape") return;
-    if (!this.composerIsOpen()) return;
+    if (!this.composer.isOpen()) return;
 
-    this.cancelComposer();
+    this.composer.cancel();
   };
 
   currentSelection() {
-    const selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return null;
-
-    const range = selection.getRangeAt(0);
-    if (!this.selectionInsideAnnotatable(range)) return null;
-
-    const selectedText = selection.toString().trim();
-    if (!selectedText) return null;
-
-    const startOffset = this.offsetWithinAnnotatable(range.startContainer, range.startOffset);
-    const endOffset = this.offsetWithinAnnotatable(range.endContainer, range.endOffset);
-    if (startOffset === null || endOffset === null || endOffset <= startOffset) return null;
-
-    return { selectedText, startOffset, endOffset };
-  }
-
-  selectionInsideAnnotatable(range) {
-    const startElement = this.elementForNode(range.startContainer);
-    const endElement = this.elementForNode(range.endContainer);
-    return this.annotatableTarget.contains(startElement) && this.annotatableTarget.contains(endElement);
-  }
-
-  elementForNode(node) {
-    return node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
-  }
-
-  offsetWithinAnnotatable(node, offset) {
-    const walker = document.createTreeWalker(this.annotatableTarget, NodeFilter.SHOW_TEXT);
-    let position = 0;
-
-    while (walker.nextNode()) {
-      const current = walker.currentNode;
-      if (current === node) return position + offset;
-      position += current.textContent.length;
-    }
-
-    return null;
+    return currentSelection(window.getSelection(), this.annotatableTarget);
   }
 
   renderAnnotations() {
-    if (!this.composerIsOpen()) this.clearPendingHighlight();
+    if (!this.composer.isOpen()) this.clearPendingHighlight();
     this.renderSavedHighlights();
     this.annotationListTarget.innerHTML = "";
 
     if (this.annotationsValue.length === 0) {
-      this.annotationListTarget.appendChild(this.emptyAnnotationListItem());
+      this.annotationListTarget.appendChild(emptyAnnotationListItem());
       return;
     }
 
     this.annotationsValue.forEach((annotation) => {
-      this.annotationListTarget.appendChild(this.annotationListItem(annotation));
+      this.annotationListTarget.appendChild(
+        annotationListItem(annotation, {
+          readonly: this.readonlyValue,
+          categoryLabel: this.categoryLabelValue,
+          categories: this.categoriesValue,
+        })
+      );
     });
   }
 
   applyPendingHighlight(selection) {
-    const range = this.rangeForOffsets(selection.startOffset, selection.endOffset);
-    if (!range) return;
-
-    this.setHighlight(PENDING_HIGHLIGHT_NAME, [range]);
+    this.highlightLayer.set(PENDING_HIGHLIGHT_NAME, [
+      [selection.startOffset, selection.endOffset],
+    ]);
   }
 
   renderSavedHighlights() {
-    const ranges = this.annotationsValue
-      .map((annotation) => {
-        if (this.editingAnnotationId && String(annotation.id) === String(this.editingAnnotationId)) return null;
-
-        const startOffset = Number(annotation.start_offset);
-        const endOffset = Number(annotation.end_offset);
-        if (!Number.isFinite(startOffset) || !Number.isFinite(endOffset) || endOffset <= startOffset) return null;
-
-        return this.rangeForOffsets(startOffset, endOffset);
-      })
-      .filter((range) => range !== null);
-
-    this.setHighlight(SAVED_HIGHLIGHT_NAME, ranges);
-  }
-
-  setHighlight(name, ranges) {
-    if (!this.highlightsSupported) return;
-
-    this.clearHighlight(name);
-    if (ranges.length === 0) return;
-
-    const highlight = new Highlight();
-    ranges.forEach((range) => highlight.add(range));
-    CSS.highlights.set(name, highlight);
+    this.highlightLayer.set(
+      SAVED_HIGHLIGHT_NAME,
+      savedHighlightOffsetPairs(this.annotationsValue, this.editingAnnotationId)
+    );
   }
 
   clearPendingHighlight() {
-    this.clearHighlight(PENDING_HIGHLIGHT_NAME);
-  }
-
-  clearSavedHighlights() {
-    this.clearHighlight(SAVED_HIGHLIGHT_NAME);
-  }
-
-  clearHighlight(name) {
-    if (!this.highlightsSupported) return;
-
-    CSS.highlights.delete(name);
-  }
-
-  rangeForOffsets(startOffset, endOffset) {
-    const walker = document.createTreeWalker(this.annotatableTarget, NodeFilter.SHOW_TEXT);
-    let position = 0;
-    let startNode = null;
-    let startPosition = 0;
-    let endNode = null;
-    let endPosition = 0;
-
-    while (walker.nextNode()) {
-      const node = walker.currentNode;
-      const length = node.textContent.length;
-      const nextPosition = position + length;
-
-      if (!startNode && startOffset <= nextPosition) {
-        startNode = node;
-        startPosition = startOffset - position;
-      }
-
-      if (!endNode && endOffset <= nextPosition) {
-        endNode = node;
-        endPosition = endOffset - position;
-        break;
-      }
-
-      position = nextPosition;
-    }
-
-    if (!startNode || !endNode) return null;
-
-    const range = document.createRange();
-    range.setStart(startNode, startPosition);
-    range.setEnd(endNode, endPosition);
-    return range;
-  }
-
-  emptyAnnotationListItem() {
-    const item = document.createElement("p");
-    item.className = "aa-annotations-empty";
-    item.textContent = "No annotations yet.";
-    return item;
-  }
-
-  annotationListItem(annotation) {
-    const item = document.createElement("article");
-    item.className = "aa-annotations-annotation-item";
-    const categoryLabel = this.categoryLabelFor(annotation.category);
-    item.innerHTML = `
-      <blockquote>${this.escapeHtml(annotation.selected_text)}</blockquote>
-      <p>${this.escapeHtml(annotation.comment)}</p>
-      ${annotation.category ? `<p><strong>${this.escapeHtml(this.categoryLabelValue)}:</strong> ${this.escapeHtml(categoryLabel)}</p>` : ""}
-      <div class="aa-annotations-annotation-actions">
-        <button type="button" class="action-item-button" data-annotation-id="${this.escapeHtml(String(annotation.id))}" data-action="activeadmin-annotations--annotator#editAnnotation">Edit</button>
-        <button type="button" class="action-item-button aa-annotations-delete-button" data-annotation-id="${this.escapeHtml(String(annotation.id))}" data-action="activeadmin-annotations--annotator#deleteAnnotation">Delete</button>
-      </div>
-    `;
-    return item;
-  }
-
-  setComposerHeading(title) {
-    if (this.hasComposerHeadingTarget) this.composerHeadingTarget.textContent = title;
-  }
-
-  categoryLabelFor(value) {
-    if (!value) return "";
-    return this.categoriesValue[value] || value;
+    this.highlightLayer.clear(PENDING_HIGHLIGHT_NAME);
   }
 
   annotationUrl(annotationId) {
     return this.updateUrlTemplateValue.replace(":id", annotationId);
   }
-
-  normalizeAnnotation(annotation) {
-    return {
-      id: annotation.id,
-      field_name: annotation.field_name,
-      selected_text: annotation.selected_text,
-      start_offset: annotation.start_offset,
-      end_offset: annotation.end_offset,
-      comment: annotation.comment,
-      category: annotation.category,
-    };
-  }
-
-  showError(message) {
-    this.errorMessageTarget.textContent = message;
-    this.errorMessageTarget.classList.remove("aa-annotations-hidden");
-  }
-
-  hideError() {
-    this.errorMessageTarget.textContent = "";
-    this.errorMessageTarget.classList.add("aa-annotations-hidden");
-  }
-
-  csrfToken() {
-    const meta = document.querySelector("meta[name='csrf-token']");
-    return meta ? meta.getAttribute("content") : "";
-  }
-
-  escapeHtml(value) {
-    return value
-      .replaceAll("&", "&amp;")
-      .replaceAll("<", "&lt;")
-      .replaceAll(">", "&gt;")
-      .replaceAll('"', "&quot;");
-  }
 }

data/app/assets/controllers/activeadmin_annotations/composer.js

@@ -0,0 +1,179 @@
+import { createAnnotationPayload, normalizeAnnotation } from "activeadmin_annotations/annotator_logic";
+
+export class Composer {
+  constructor(controller) {
+    this.controller = controller;
+  }
+
+  activate(selection) {
+    const panel = this.controller;
+    panel.editingAnnotationId = null;
+
+    const selectionChanged =
+      !panel.pendingSelection ||
+      panel.pendingSelection.startOffset !== selection.startOffset ||
+      panel.pendingSelection.endOffset !== selection.endOffset ||
+      panel.pendingSelection.selectedText !== selection.selectedText;
+
+    panel.pendingSelection = selection;
+    panel.selectedPreviewTarget.textContent = selection.selectedText;
+
+    if (selectionChanged) {
+      panel.commentInputTarget.value = "";
+      panel.categoryInputTarget.value = "";
+    }
+
+    this.hideError();
+    this.setHeading("New annotation");
+    panel.composerTarget.classList.remove("aa-annotations-composer-hidden");
+    panel.applyPendingHighlight(selection);
+    window.getSelection()?.removeAllRanges();
+  }
+
+  edit(annotation) {
+    const panel = this.controller;
+    panel.editingAnnotationId = annotation.id;
+    panel.pendingSelection = {
+      selectedText: annotation.selected_text,
+      startOffset: Number(annotation.start_offset),
+      endOffset: Number(annotation.end_offset),
+    };
+    panel.selectedPreviewTarget.textContent = annotation.selected_text;
+    panel.commentInputTarget.value = annotation.comment;
+    panel.categoryInputTarget.value = annotation.category || "";
+    this.hideError();
+    this.setHeading("Edit annotation");
+    panel.composerTarget.classList.remove("aa-annotations-composer-hidden");
+    panel.applyPendingHighlight(panel.pendingSelection);
+    window.getSelection()?.removeAllRanges();
+    panel.commentInputTarget.focus();
+  }
+
+  reset() {
+    const panel = this.controller;
+    panel.pendingSelection = null;
+    panel.editingAnnotationId = null;
+    panel.clearPendingHighlight();
+    panel.selectedPreviewTarget.textContent = "";
+    panel.commentInputTarget.value = "";
+    panel.categoryInputTarget.value = "";
+    this.hideError();
+    this.setHeading("New annotation");
+    panel.composerTarget.classList.add("aa-annotations-composer-hidden");
+  }
+
+  cancel() {
+    this.reset();
+    window.getSelection()?.removeAllRanges();
+  }
+
+  isOpen() {
+    return !this.controller.composerTarget.classList.contains("aa-annotations-composer-hidden");
+  }
+
+  ensurePendingHighlight() {
+    if (!this.controller.pendingSelection) return;
+    this.controller.applyPendingHighlight(this.controller.pendingSelection);
+  }
+
+  async submit() {
+    const panel = this.controller;
+    if (panel.readonlyValue) return;
+    if (!panel.pendingSelection) return;
+
+    const comment = panel.commentInputTarget.value.trim();
+    if (!comment) {
+      this.showError("Comment is required.");
+      return;
+    }
+
+    if (panel.editingAnnotationId) {
+      await this.update(comment);
+      return;
+    }
+
+    await this.create(comment);
+  }
+
+  async create(comment) {
+    const panel = this.controller;
+
+    try {
+      const annotation = await panel.annotationClient.create(
+        panel.createUrlValue,
+        this.createPayload(comment)
+      );
+      if (annotation.annotation_review_id) panel.reviewIdValue = annotation.annotation_review_id;
+      this.reset();
+      panel.annotationsValue = [...panel.annotationsValue, this.normalize(annotation)];
+      panel.renderAnnotations();
+      window.getSelection()?.removeAllRanges();
+    } catch (_error) {
+      this.showError("Could not save annotation.");
+    }
+  }
+
+  async update(comment) {
+    const panel = this.controller;
+    const payload = {
+      annotation: {
+        comment: comment,
+        category: panel.categoryInputTarget.value || null,
+      },
+    };
+
+    try {
+      const annotation = await panel.annotationClient.update(
+        panel.annotationUrl(panel.editingAnnotationId),
+        payload
+      );
+      this.reset();
+      panel.annotationsValue = panel.annotationsValue.map((entry) =>
+        String(entry.id) === String(annotation.id) ? this.normalize(annotation) : entry
+      );
+      panel.renderAnnotations();
+    } catch (_error) {
+      this.showError("Could not update annotation.");
+    }
+  }
+
+  async destroy(annotationId) {
+    const panel = this.controller;
+
+    try {
+      await panel.annotationClient.destroy(panel.annotationUrl(annotationId));
+      if (String(panel.editingAnnotationId) === String(annotationId)) this.reset();
+      panel.annotationsValue = panel.annotationsValue.filter(
+        (entry) => String(entry.id) !== String(annotationId)
+      );
+      panel.renderAnnotations();
+    } catch (_error) {
+      window.alert("Could not delete annotation.");
+    }
+  }
+
+  createPayload(comment) {
+    return createAnnotationPayload(this.controller, comment);
+  }
+
+  normalize(annotation) {
+    return normalizeAnnotation(annotation);
+  }
+
+  setHeading(title) {
+    const panel = this.controller;
+    if (panel.hasComposerHeadingTarget) panel.composerHeadingTarget.textContent = title;
+  }
+
+  showError(message) {
+    const panel = this.controller;
+    panel.errorMessageTarget.textContent = message;
+    panel.errorMessageTarget.classList.remove("aa-annotations-hidden");
+  }
+
+  hideError() {
+    const panel = this.controller;
+    panel.errorMessageTarget.textContent = "";
+    panel.errorMessageTarget.classList.add("aa-annotations-hidden");
+  }
+}