Skip to content

Web Component API Cheat Sheet

You can use the SciFlow web components without knowing Lit. Import the bundle once and interact with plain DOM properties and events.

Elements

  • <sciflow-editor> — main editor host
  • <sciflow-formatbar> — toolbar; set for to the editor id
  • <sciflow-selection-editor> — sidebar selection inspector; set for to the editor id
  • <sciflow-reference-list> — renders references and supports drag/drop/highlight

Inputs (props/attributes)

  • doc (object) — ProseMirror JSON document
  • features (array) — list of editor features (e.g., citationFeature, headingFeature)
  • for (string, formatbar/selection-editor) — editor element id to bind to
  • references (reference-list) — array of CSL-like reference objects
  • highlightedIds (reference-list) — array of ids to highlight; can also call highlight(ids)
  • empty-text (reference-list) — message when no references exist

Events

  • editor-ready — fires when the editor is mounted
  • editor-change — payload { doc, operations, files }
  • editor-selection-change — payload selection JSON { anchor, head, ... }

Usage

<script type="module" src="/node_modules/@sciflow/editor-start/dist/bundle/sciflow-editor.js"></script>
<sciflow-editor id="editor"></sciflow-editor>
<sciflow-formatbar for="editor"></sciflow-formatbar>
<sciflow-selection-editor for="editor"></sciflow-selection-editor>
<sciflow-reference-list id="refs"></sciflow-reference-list>

<script type="module">
  const editor = document.getElementById('editor');
  const refs = document.getElementById('refs');
  editor.features = [citationFeature, headingFeature];
  editor.addEventListener('editor-change', (e) => {
    const { doc, files } = e.detail;
    // persist doc/files
  });
  refs.references = myReferences;
  refs.highlight(['ref-1']);
</script>