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, or { doc, files, references, selection, version } for atomic updates
  • features (array) — list of editor features (e.g., citationFeature, headingFeature)
  • shadowStyles (string | string[] | CSSStyleSheet | CSSStyleSheet[]) — CSS injected into the shadow root; can be set before or after initialization
  • for (string, formatbar/selection-editor) — editor element id to bind to
  • citationSourceAdapter (selection-editor) — custom UI for editing citation source (CSL citation items); when unset, uses the default schema-aware form
  • 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

See Web Components Basics for the full event table and payload shapes.

Theming (global)

See Web Components Basics for setSciFlowThemeStyles() usage and examples.

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, references } = e.detail;
    // persist doc/files/references
  });
  refs.references = myReferences;
  refs.highlight(['ref-1']);

  // Inject custom CSS into the editor shadow root (e.g., ProseMirror tweaks)
  editor.shadowStyles = [
    '.ProseMirror { font-family: "Inter", system-ui; line-height: 1.5; }',
    '.ProseMirror h1 { letter-spacing: -0.01em; }',
  ];

  // Or use setShadowStyles() for immediate application (recommended for dynamic updates)
  editor.setShadowStyles([
    '.my-decoration { background: rgba(255, 200, 0, 0.3); }'
  ]);
</script>

Advanced APIs

  • document (getter) — Read-only ProseMirror document for traversal
  • positions.coordsAtPos(pos) — Get screen coordinates for a position
  • positions.resolve(pos) — Resolve position with context
  • plugins.getState(key) — Get plugin state by PluginKey
  • plugins.dispatchMeta(key, meta) — Update plugin state
  • dom.getBoundingRect() — Get editor bounding rectangle
  • dom.dispatchEvent(event) — Dispatch custom events
  • setShadowStyles(styles) — Immediately apply shadow DOM styles (sync); accepts string, string[], or CSSStyleSheet
  • editorView (getter) — Advanced: Direct ProseMirror access (unstable)

Citation Source Editor

For the full adapter API and example, see Adding Custom ProseMirror Plugins. You can also set selectionEditor.citationSourceAdapter per element instance.