Discuss architecture of annotations

[davideastmond]

We should chat / meet and discuss architecture for these questions. Please feel free to add any questions and issues that you see.

• Brainstorm how to architecture documents and annotations.
• What objects, db updates, and data structures will we need. Etc
• What UI components will we need etc

[joekotvas]

Here's a useful article ChatGPT helped me put together. Particularly interesting and relevant is the bit about the Selection API.

My Prompt "How might web highlighting be implemented in a semantically aware way? That is, I would be concerned by a solution that wrapped every character in a span tag is it might interfere with semantics."

ChatGPT Implementing web highlighting in a semantically aware way requires careful consideration to ensure that the underlying HTML structure and semantics are preserved. Here are some approaches you might consider:

1. Use the mark Tag

The HTML <mark> tag is designed specifically for highlighting text. It has semantic meaning, indicating that the enclosed text is marked or highlighted for reference or emphasis.

<p>This is a <mark>highlighted</mark> word.</p>

2. CSS Styling with Pseudo-Elements

For more subtle highlighting, CSS pseudo-elements can be used. This method avoids modifying the HTML content directly.

p::selection {
    background: yellow;
}

3. Data Attributes for Contextual Highlighting

Using data- attributes can provide additional context without disrupting the semantics of the HTML.

<p>This is a <span data-highlight="true">highlighted</span> word.</p>

4. Range and Selection API

The Range and Selection APIs allow for programmatically highlighting text without altering the HTML structure significantly. You can use these APIs to create non-intrusive highlights.

function highlightSelection() {
    const selection = window.getSelection();
    if (selection.rangeCount) {
        const range = selection.getRangeAt(0);
        const mark = document.createElement('mark');
        range.surroundContents(mark);
    }
}

5. Custom Elements

Creating custom elements for highlighting can encapsulate the highlight functionality while preserving the original content semantics.

<p>This is a <highlight-text>This text is highlighted</highlight-text> sentence.</p>

6. Overlay Elements

Using absolutely positioned overlay elements can highlight text without changing the HTML content.

.highlight-overlay {
    position: absolute;
    background-color: yellow;
    pointer-events: none;
    opacity: 0.5;
}

Implementing the Highlight

To combine semantic awareness with practical implementation, you might consider a hybrid approach:

1. Use JavaScript to Detect and Wrap Text: Use the Range and Selection APIs to detect user-selected text.
2. Apply <mark> Tags or data- Attributes: Wrap the selected text with <mark> tags or spans with data- attributes to indicate highlights.
3. Style Highlights with CSS: Use CSS to style the highlights, ensuring that the visual presentation does not interfere with the content's semantics.

document.addEventListener('mouseup', () => {
    const selection = window.getSelection();
    if (selection.rangeCount) {
        const range = selection.getRangeAt(0);
        const mark = document.createElement('mark');
        range.surroundContents(mark);
    }
});

By using these methods, you can create a highlighting solution that is both visually effective and semantically respectful.

[joekotvas]

https://developer.mozilla.org/en-US/docs/Web/API/Selection

[joekotvas]

Something important to keep in mind is that note numbers are not inherent to each note; a note's number is programmatically determined by the number of anchors preceding the current note's anchor in the document flow.

[davideastmond]

• Tandid discovered the EditorJs module. We basically went full throttle with this.
• We modified the existing marker tool to customize it for our purposes. It will highlight text and insert markers (note numbers) into the text and will programmatically figure out the correct number. They can be added / deleted.
• The text and all the markup data in the EditorJS editor window can be serialized and saved to/ retrieved from the database.
• The next step is linking the annotation cards to this EditorJs solution