sciflow-reference-list (Web Component)

<sciflow-reference-list> renders a draggable, highlightable list of references. It is shipped by @sciflow/editor-start and registered when you import the bundle. No Lit knowledge is required—treat it like any other custom element: set properties, listen to events if needed.

Usage

<sciflow-reference-list id="references"></sciflow-reference-list>

const referenceList = document.getElementById('references');
referenceList.references = latestReferences; // array of CSL-like objects
referenceList.highlight(['ref-1', 'ref-2']); // optional highlighted ids

Properties

• references: Array — list of references to render; supports rawCitation, author, title, issued, etc.
• highlightedIds: string[] — IDs to highlight; can also be set via highlight(ids).
• empty-text attribute — message when no references exist.

Drag payloads

Each item sets: - application/json: { type: 'reference', id, text, reference } - application/x-sciflow-reference: 'sidebar' - text/plain: "[id]" or the display text

Connecting to the editor

Listen to editor events and push data into the list:

const editor = document.querySelector('sciflow-editor');
const refList = document.querySelector('sciflow-reference-list');

editor.addEventListener('editor-change', (event) => {
  const { doc, references } = event.detail;
  refList.references = Array.isArray(references) ? references : collectReferencesFromDoc(doc);
});

editor.addEventListener('editor-selection-change', (event) => {
  const ids = extractCitationIds(event.detail); // derive citation ids from selection
  refList.highlight(ids);
});

This mirrors the demo wiring: editor-change updates the list contents, and editor-selection-change drives highlights.

Styling

Basic styles are encapsulated; override with CSS variables in your host if desired.