Skip to content

Commit 68d26ff

Browse files
scanash00scanash00
committed
fix being able to add notes to another people's highlights in popup and sidebar and fix unsafe html
1 parent ad4ebbf commit 68d26ff

File tree

3 files changed

+66
-25
lines changed

3 files changed

+66
-25
lines changed

‎extension/src/components/popup/App.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -707,6 +707,7 @@ export function App() {
707707
<AnnotationCard
708708
key={item.uri || item.id}
709709
item={item}
710+
sessionDid={session?.did}
710711
formatDate={formatDate}
711712
onAddToCollection={() => openCollectionModal(item.uri || item.id || '')}
712713
onConverted={loadAnnotations}
@@ -717,6 +718,7 @@ export function App() {
717718
<AnnotationCard
718719
key={item.uri || item.id}
719720
item={item}
721+
sessionDid={session?.did}
720722
formatDate={formatDate}
721723
onAddToCollection={() => openCollectionModal(item.uri || item.id || '')}
722724
onConverted={loadAnnotations}
@@ -968,11 +970,13 @@ export function App() {
968970

969971
function AnnotationCard({
970972
item,
973+
sessionDid,
971974
formatDate,
972975
onAddToCollection,
973976
onConverted,
974977
}: {
975978
item: Annotation;
979+
sessionDid?: string;
976980
formatDate: (d?: string) => string;
977981
onAddToCollection?: () => void;
978982
onConverted?: () => void;
@@ -987,6 +991,7 @@ function AnnotationCard({
987991
const selector = item.target?.selector;
988992
const quote = selector?.exact || '';
989993
const isHighlight = (item as any).type === 'Highlight';
994+
const isOwned = sessionDid && author.did === sessionDid;
990995
const highlightColor = item.color || (isHighlight ? '#fbbf24' : 'var(--accent)');
991996

992997
async function handleConvert() {
@@ -1043,7 +1048,7 @@ function AnnotationCard({
10431048
</span>
10441049
)}
10451050
<div className="ml-auto flex items-center gap-0.5">
1046-
{isHighlight && !showNoteInput && (
1051+
{isHighlight && isOwned && !showNoteInput && (
10471052
<button
10481053
onClick={(e) => {
10491054
e.stopPropagation();

‎extension/src/components/sidepanel/App.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -621,6 +621,7 @@ export function App() {
621621
<AnnotationCard
622622
key={item.uri || item.id}
623623
item={item}
624+
sessionDid={session?.did}
624625
formatDate={formatDate}
625626
onAddToCollection={() => openCollectionModal(item.uri || item.id || '')}
626627
onConverted={loadAnnotations}
@@ -631,6 +632,7 @@ export function App() {
631632
<AnnotationCard
632633
key={item.uri || item.id}
633634
item={item}
635+
sessionDid={session?.did}
634636
formatDate={formatDate}
635637
onAddToCollection={() => openCollectionModal(item.uri || item.id || '')}
636638
onConverted={loadAnnotations}
@@ -868,11 +870,13 @@ export function App() {
868870

869871
function AnnotationCard({
870872
item,
873+
sessionDid,
871874
formatDate,
872875
onAddToCollection,
873876
onConverted,
874877
}: {
875878
item: Annotation;
879+
sessionDid?: string;
876880
formatDate: (d?: string) => string;
877881
onAddToCollection?: () => void;
878882
onConverted?: () => void;
@@ -887,6 +891,7 @@ function AnnotationCard({
887891
const selector = item.target?.selector;
888892
const quote = selector?.exact || '';
889893
const isHighlight = (item as any).type === 'Highlight';
894+
const isOwned = sessionDid && author.did === sessionDid;
890895
const highlightColor = item.color || (isHighlight ? '#fbbf24' : 'var(--accent)');
891896

892897
async function handleConvert() {
@@ -941,7 +946,7 @@ function AnnotationCard({
941946
</span>
942947
)}
943948
<div className="ml-auto flex items-center gap-0.5">
944-
{isHighlight && !showNoteInput && (
949+
{isHighlight && isOwned && !showNoteInput && (
945950
<button
946951
onClick={(e) => {
947952
e.stopPropagation();

‎extension/src/utils/overlay.ts‎

Lines changed: 54 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -214,34 +214,61 @@ export async function initContentScript(ctx: { onInvalidated: (cb: () => void) =
214214

215215
const truncatedQuote = quoteText.length > 150 ? quoteText.slice(0, 150) + '...' : quoteText;
216216

217-
composeModal.innerHTML = `
218-
<div class="compose-header">
219-
<span class="compose-title">New Annotation</span>
220-
<button class="compose-close">${Icons.close}</button>
221-
</div>
222-
<div class="compose-body">
223-
<div class="inline-compose-quote">"${escapeHtml(truncatedQuote)}"</div>
224-
<textarea class="inline-compose-textarea" placeholder="Write your annotation..."></textarea>
225-
</div>
226-
<div class="compose-footer">
227-
<button class="btn-cancel">Cancel</button>
228-
<button class="btn-submit">Post</button>
229-
</div>
230-
`;
217+
const header = document.createElement('div');
218+
header.className = 'compose-header';
219+
220+
const titleSpan = document.createElement('span');
221+
titleSpan.className = 'compose-title';
222+
titleSpan.textContent = 'New Annotation';
223+
header.appendChild(titleSpan);
224+
225+
const closeBtn = document.createElement('button');
226+
closeBtn.className = 'compose-close';
227+
closeBtn.innerHTML = Icons.close;
228+
header.appendChild(closeBtn);
229+
230+
composeModal.appendChild(header);
231+
232+
const body = document.createElement('div');
233+
body.className = 'compose-body';
234+
235+
const quoteDiv = document.createElement('div');
236+
quoteDiv.className = 'inline-compose-quote';
237+
quoteDiv.textContent = `"${truncatedQuote}"`;
238+
body.appendChild(quoteDiv);
239+
240+
const textarea = document.createElement('textarea');
241+
textarea.className = 'inline-compose-textarea';
242+
textarea.placeholder = 'Write your annotation...';
243+
body.appendChild(textarea);
244+
245+
composeModal.appendChild(body);
246+
247+
const footer = document.createElement('div');
248+
footer.className = 'compose-footer';
249+
250+
const cancelBtn = document.createElement('button');
251+
cancelBtn.className = 'btn-cancel';
252+
cancelBtn.textContent = 'Cancel';
253+
footer.appendChild(cancelBtn);
254+
255+
const submitBtn = document.createElement('button');
256+
submitBtn.className = 'btn-submit';
257+
submitBtn.textContent = 'Post';
258+
footer.appendChild(submitBtn);
259+
260+
composeModal.appendChild(footer);
231261

232262
composeModal.querySelector('.compose-close')?.addEventListener('click', () => {
233263
composeModal?.remove();
234264
composeModal = null;
235265
});
236266

237-
composeModal.querySelector('.btn-cancel')?.addEventListener('click', () => {
267+
cancelBtn.addEventListener('click', () => {
238268
composeModal?.remove();
239269
composeModal = null;
240270
});
241271

242-
const textarea = composeModal.querySelector('.inline-compose-textarea') as HTMLTextAreaElement;
243-
const submitBtn = composeModal.querySelector('.btn-submit') as HTMLButtonElement;
244-
245272
submitBtn.addEventListener('click', async () => {
246273
const text = textarea?.value.trim();
247274
if (!text) return;
@@ -362,10 +389,14 @@ export async function initContentScript(ctx: { onInvalidated: (cb: () => void) =
362389

363390
const toast = document.createElement('div');
364391
toast.className = `margin-toast ${type === 'success' ? 'toast-success' : ''}`;
365-
toast.innerHTML = `
366-
<span class="toast-icon">${type === 'success' ? Icons.check : Icons.close}</span>
367-
<span>${message}</span>
368-
`;
392+
const iconSpan = document.createElement('span');
393+
iconSpan.className = 'toast-icon';
394+
iconSpan.innerHTML = type === 'success' ? Icons.check : Icons.close;
395+
toast.appendChild(iconSpan);
396+
397+
const msgSpan = document.createElement('span');
398+
msgSpan.textContent = message;
399+
toast.appendChild(msgSpan);
369400

370401
container.appendChild(toast);
371402

@@ -844,7 +875,7 @@ export async function initContentScript(ctx: { onInvalidated: (cb: () => void) =
844875
});
845876

846877
popoverEl.querySelectorAll('.btn-share').forEach((btn) => {
847-
btn.addEventListener('click', async (e) => {
878+
btn.addEventListener('click', async (_e) => {
848879
const text = (btn as HTMLElement).getAttribute('data-text') || '';
849880
try {
850881
await navigator.clipboard.writeText(text);

0 commit comments

Comments
 (0)