Cum ați implementa un sistem de evidențiere/highlight/annotation?

Pentru cine nu știe, Medium permite utilizatorilor să facă highlight la porțiuni de articol. Nu m-a interesat foarte mult cum funcționează mai mult de atât, dar sunt curios: cum ați implementa voi așa ceva (din punct de vedere al backend-ului mai mult).

Ce stocați în db? Textul propriu zis? Doar poziția + lungimea textului? Modificați conținutul din DB astfel încât să conțină ceva delimitatoare sau markup? Altfel?

Câteva idei de luat în calcul:

  • autorul articolului poate edita restul articolului, dar cât timp nu se atinge de partea evidențiată, aceasta nu ar trebui să se schimbe;
  • autorul articolului poate edita fix partea evidențiată, dar dacă sunt doar editări minore (i.e. punctuație, cratime), evidențierea ar trebui să rămână. Opțional, autorul poate marca o editare ca fiind minoră.
  • utilizatorii pot evidenția pozitiv sau negativ (un fel de +1/-1), astfel încât culoarea evidențierii să varieze în funcție de câți utilizatori au făcut highlight respectivul text.
  • dacă utilizatorii pot comenta porțiunile evidențiate, cum ați lega un comentariu de o porțiune de text?
1 Like

cea mai simpla solutie e sa incadrezi textul intr-o clasa exemplu "aici e codul colorat"
si clasa sa faca mai departe parsarea si colorarea.
In baza de date nu ai avea mari modificari (doar clasa).

pentru legarea de comentarii la portiunea respectiva, pe langa clasa, i-ar mai trebui si un id ca sa se poata face referire pe baza de id. Aici cred ca e putin mai complicat, dar se poate face.

1 Like

(presupun că „într-o clasă” înseamnă, de fapt, „într-un tag html”)

Ar fi cea mai simplă soluție la o primă vedere. Doar că modifici articolul din DB. Ceea ce înseamnă că:

  • autorul articolului va putea elimina acel tag;
  • nu se va putea face un „heat map” (un highlight diferit în funcție de numărul de marcări).

Eu cred ca fiecare text evidentiat e stocat separat, impreuna cu comentariile facute pe el. E si mai usor de creat articolul, prin suprapozarea subtextelor. Snappier, progressive app.

Cum a zis și Birkoff, mark-up pe text. Un tag cu un id.

În baza de date, un tabel cu id-ul + textul selectat, astfel ca, în cazul în care bucata respectivă este eliminată din articol, la comentarii să poată fi afișat în continuare textul original, la care face referire comentariul.

Restul sunt chestii specifice nevoilor/dorințelor tale.

  • heatmap poți face după numărul comentariilor legate de id-ul citatului
  • dacă vrei heatmap, fără obligativitatea unui comentariu atașat unei selecții de text, poți adăuga o coloană pe care o incrementezi la fiecare highlight sau poți adăuga un tabel de legătură (1 la n de fapt m la n) între highlight și utilizator
  • dacă nu vrei ca autorul să poată elimina porțiunile citate, modifici editorul să considere tag-urile respective ca read-only (eventual cu posibilitatea să le marcheze vizual ca deleted cu strike-through) iar pe server, la update, te asiguri că nici un tag deja existent nu a fost alterat în vreun fel

… și lista poate continua în funcție de orice alte restricții sau funcționalități mai ai în cap! :slight_smile:


P.S.: Nu merge tag-ul <del>. A trebuit să folosesc <strike>… :frowning:

1 Like

Sau folosesti incremental update (intre versiunea precedenta si cea actuala), afland diferentele (ca si git-ul), aflii ce valoare trebuie sa aiba variabila cu pozitia initiala a highlightului. Iar daca sunt editari in interiorul unui highlight, tratezi ca un caz separat.