Editor View Core

class EditorView {
  constructor(config?: EditorViewConfig);
  
  // Core state and properties
  readonly state: EditorState;
  readonly viewport: {from: number, to: number};
  readonly visibleRanges: readonly {from: number, to: number}[];
  readonly dom: HTMLElement;
  readonly contentDOM: HTMLElement;
  readonly scrollDOM: HTMLElement;
  readonly documentTop: number;
  readonly documentPadding: {top: number, bottom: number};
  readonly viewportLineBlocks: readonly BlockInfo[];
  
  // State management
  dispatch(transaction: Transaction | TransactionSpec | readonly (Transaction | TransactionSpec)[]): void;
  update(transactions: readonly Transaction[]): void;
  setState(newState: EditorState): void;
  
  // Focus and lifecycle
  focus(): void;
  readonly hasFocus: boolean;
  destroy(): void;
  
  // Coordinate mapping
  posAtCoords(coords: {x: number, y: number}, precise?: boolean): number | null;
  coordsAtPos(pos: number, side?: -1 | 1): Rect | null;
  coordsForChar(pos: number): {left: number, right: number, top: number, bottom: number};
  
  // Block and line information
  lineBlockAt(pos: number): BlockInfo;
  elementAtHeight(height: number): BlockInfo;
  
  // Viewport and scrolling  
  readonly inView: boolean;
  
  // Measuring and layout
  requestMeasure(request?: MeasureRequest<any>): void;
  textDirection: Direction;
  textDirectionAt(pos: number): Direction;
  
  // Plugin access
  plugin<T>(plugin: ViewPlugin<T>): T | null;
}

interface EditorViewConfig extends EditorStateConfig {
  // Initial state
  state?: EditorState;
  
  // DOM integration
  parent?: Element | DocumentFragment;
  root?: Document | ShadowRoot;
  
  // Initial scrolling
  scrollTo?: StateEffect<any>;
  
  // Transaction handling
  dispatchTransactions?: (trs: readonly Transaction[], view: EditorView) => void;
  dispatch?: (tr: Transaction, view: EditorView) => void;
}

class EditorView {
  // Theme creation
  static theme(spec: {[selector: string]: StyleSpec}, options?: {dark?: boolean}): Extension;
  static baseTheme(spec: {[selector: string]: StyleSpec}): Extension;
  
  // Scroll effects
  static scrollIntoView(pos: number | SelectionRange, options?: ScrollOptions): StateEffect<ScrollTarget>;
  static scrollSnapshot(): StateEffect<any>;
  
  // Built-in facets and effects
  static domEventHandlers(handlers: DOMEventHandlers): Extension;
  static domEventObservers(handlers: DOMEventHandlers): Extension;
  static contentAttributes: Facet<AttrSource>;
  static editorAttributes: Facet<AttrSource>;
  static lineWrapping: Extension;
  static announceAccessibleText: Extension;
}

import { EditorView } from "@codemirror/view";
import { EditorState } from "@codemirror/state";

// Create editor with initial content
const view = new EditorView({
  state: EditorState.create({
    doc: "Hello, world!",
    extensions: [EditorView.lineWrapping]
  }),
  parent: document.getElementById("editor-container")
});

// Replace entire document
view.dispatch({
  changes: {
    from: 0,
    to: view.state.doc.length,
    insert: "New content"
  }
});

// Insert at cursor
const cursor = view.state.selection.main.head;
view.dispatch({
  changes: {from: cursor, insert: " inserted text"},
  selection: {anchor: cursor + 14}
});

// Get document position from mouse coordinates
const pos = view.posAtCoords({x: event.clientX, y: event.clientY});
if (pos !== null) {
  console.log(`Clicked at position ${pos}`);
}

// Get screen coordinates for a document position
const coords = view.coordsAtPos(100);
if (coords) {
  console.log(`Position 100 is at ${coords.left}, ${coords.top}`);
}

// Get information about the line containing position 50
const blockInfo = view.lineBlockAt(50);
console.log(`Line from ${blockInfo.from} to ${blockInfo.to}, height: ${blockInfo.height}px`);

// Iterate through visible line blocks
for (const block of view.viewportLineBlocks) {
  console.log(`Visible line: ${block.from}-${block.to}`);
}

// Focus the editor
view.focus();

// Scroll position into view
view.scrollPosIntoView(500);

// Scroll current selection into view
view.scrollSelectionIntoView();

// Check if editor is focused
if (view.hasFocus) {
  console.log("Editor is focused");
}

const myTheme = EditorView.theme({
  "&": {
    fontSize: "16px",
    border: "1px solid #ddd"
  },
  ".cm-content": {
    padding: "10px"
  },
  ".cm-editor.cm-focused": {
    outline: "2px solid blue"
  }
});

const view = new EditorView({
  state: EditorState.create({
    extensions: [myTheme]
  }),
  parent: document.body
});

// Access plugin instance
const myPlugin = view.plugin(someViewPlugin);
if (myPlugin) {
  myPlugin.someMethod();
}

// Request layout measurement
view.requestMeasure({
  read(view) {
    return view.dom.getBoundingClientRect();
  },
  write(rect, view) {
    // Update something based on the measurement
    console.log("Editor dimensions:", rect);
  }
});