Highlight text and images on a page and make annotations

[kaidatavis]

No description provided.

[Yuu-Han]

Update: c31b896 supports highlighting selected text on the tab page (reuse the implementation in old-historymap with a few apis migrated to manifest v3 features). The highlighted content is not sent to HistoryMap yet.

[Yuu-Han]

I just had a look at the wiki page and found the comments on missing features.

Image highlighting * (what about multiple images?)

I think highlighting multiple images is a practical need. For example, when I searching for inspiring prompts and images on a web gallery, I would like to highlight all the images that might be desirable.

The original implementation allows only one representative image by removing any previously highlighted image when there is a new one (see the following code). It should be easy to push multiple images to highlights array, the main question is how to present the images in HistoryMap. The options can be: (1) gallery (like mac finder), (2) list.

HistoryMap/old-historymap/src/background/contentScriptData.js

Lines 15 to 30 in c31b896

	//adds highlighted text image or note
	addHighlight: function (url, highlight) {
	this.prepareUrlForHighlights(url);
	var highlights = this.urlToHighlight[url];
	if (highlight.type === "highlightImage"){
	//removing an already highlighted image(if it exists)
	var foundNode = highlights.find(a => (a.type === "highlightImage") && (a.pageUrl === highlight.pageUrl));
	var foundNodeIndex = highlights.indexOf(foundNode);
	if(foundNodeIndex > -1){
	highlights.splice(foundNodeIndex, 1);
	}
	}
	//pushes "highlightImage", "highlightSelection"(text) or "noted"(note)
	highlights.push(highlight);
	return highlights;
	},

[kaidatavis]

the main question is how to present the images in HistoryMap.

Indeed, and it needs to be compact so it would still work when there are many nodes and images. I don't have a strong preference between the two; maybe it also relates to the layout, i.e., how the node size/shape with images would better work with the layout.

[Yuu-Han]

Implemented highlighting images and showing the highlighted text and images on historymap (902f4ab).

• Images are saved as base64 data stored in the highlights array in hmPages.

A preview figure:

Todo

• Removing image and selecting representative image is not supported yet
• Currently multiple images are shown as gallery, I might take the layout into consideration and investigate other options.
• Better to save highlights in background

[Yuu-Han]

Highlight text is back (252fce6).

Take note on a webpage (6b14a0a):

Loading highlights and note from historymap to a reopened webpage is not yet supported.

[Yuu-Han]

Editing note on HistoryMap (5edec7e):

[kaidatavis]

Add annotation and tag in the same window/box. Adding a hashtag # marks it is a tag.