Comments: Added reference marker to comments

Author: ssddanbrown

resources/icons/bookmark.svg

@@ -5,6 +5,7 @@ import {el} from "../wysiwyg/utils/dom";
 
 import commentIcon from "@icons/comment.svg"
 import closeIcon from "@icons/close.svg"
+import {PageDisplay} from "./page-display";
 
 /**
  * Track the close function for the current open marker so it can be closed
@@ -35,6 +36,7 @@ export class PageComment extends Component {
     protected deleteButton: HTMLElement;
     protected replyButton: HTMLElement;
     protected input: HTMLInputElement;
+    protected contentRefLink: HTMLLinkElement|null;
 
     setup() {
         // Options
@@ -60,6 +62,7 @@ export class PageComment extends Component {
         this.deleteButton = this.$refs.deleteButton;
         this.replyButton = this.$refs.replyButton;
         this.input = this.$refs.input as HTMLInputElement;
+        this.contentRefLink = (this.$refs.contentRef || null) as HTMLLinkElement|null;
 
         this.setupListeners();
         this.positionForReference();
@@ -153,21 +156,20 @@ export class PageComment extends Component {
     }
 
     protected positionForReference() {
-        if (!this.commentContentRef) {
+        if (!this.commentContentRef || !this.contentRefLink) {
             return;
         }
 
         const [refId, refHash, refRange] = this.commentContentRef.split(':');
         const refEl = document.getElementById(refId);
         if (!refEl) {
-            // TODO - Show outdated marker for comment
+            this.contentRefLink.classList.add('outdated', 'missing');
             return;
         }
 
         const actualHash = hashElement(refEl);
         if (actualHash !== refHash) {
-            // TODO - Show outdated marker for comment
-            return;
+            this.contentRefLink.classList.add('outdated');
         }
 
         const refElBounds = refEl.getBoundingClientRect();
@@ -204,6 +206,13 @@ export class PageComment extends Component {
 
         refEl.style.position = 'relative';
         refEl.append(markerWrap);
+
+        this.contentRefLink.href = `#${refEl.id}`;
+        this.contentRefLink.addEventListener('click', (event: MouseEvent) => {
+            const pageDisplayComponent = window.$components.get('page-display')[0] as PageDisplay;
+            event.preventDefault();
+            pageDisplayComponent.goToText(refId);
+        });
     }
 
     protected showCommentAtMarker(marker: HTMLElement): void {

resources/js/components/page-comment.ts

@@ -57,6 +57,9 @@ export class PageDisplay extends Component {
         }
     }
 
+    /**
+     * @public
+     */
     goToText(text) {
         const idElem = document.getElementById(text);
 

resources/js/components/page-display.js

@@ -746,6 +746,44 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   height: calc(100% - vars.$m);
 }
 
+.comment-reference-indicator-wrap a {
+  float: left;
+  margin-top: vars.$xs;
+  font-size: 12px;
+  display: inline-block;
+  font-weight: bold;
+  position: relative;
+  border-radius: 4px;
+  overflow: hidden;
+  padding: 2px 6px 2px 0;
+  margin-inline-end: vars.$xs;
+  color: var(--color-link);
+  span {
+    display: none;
+  }
+  &.outdated span {
+    display: inline;
+  }
+  &.outdated.missing {
+    color: var(--color-warning);
+    pointer-events: none;
+  }
+  svg {
+    width: 24px;
+    margin-inline-end: 0;
+  }
+  &:after {
+    background-color: currentColor;
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0.15;
+  }
+}
+
 .comment-branch .comment-box {
   margin-bottom: vars.$m;
 }

resources/sass/_components.scss

@@ -280,6 +280,9 @@ body.tox-fullscreen, body.markdown-fullscreen {
   max-height: 200px;
   overflow-y: scroll;
 }
+.content-comment-window-content .comment-reference-indicator-wrap {
+  display: none;
+}
 .content-comment-marker {
   position: absolute;
   right: -16px;

resources/sass/_pages.scss

@@ -77,6 +77,11 @@ class="comment-box">
                 <a class="text-muted text-small" href="#comment{{ $comment->parent_id }}">@icon('reply'){{ trans('entities.comment_in_reply_to', ['commentId' => '#' . $comment->parent_id]) }}</a>
             </p>
         @endif
+        @if($comment->content_ref)
+            <div class="comment-reference-indicator-wrap">
+                <a href="#" refs="page-comment@content-ref">@icon('bookmark')Reference <span>- Outdated</span></a>
+            </div>
+        @endif
         {!! $commentHtml  !!}
     </div>