Clean up types

src/SelectionDOMObserver.ts

@@ -0,0 +1,31 @@
+import { DOMObserver } from "./prosemirror-view/domobserver.js";
+import { EditorView } from "./prosemirror-view/index.js";
+import { selectionFromDOM } from "./prosemirror-view/selection.js";
+
+export class SelectionDOMObserver extends DOMObserver {
+  constructor(readonly view: EditorView) {
+    super(view, () => {
+      // We don't actually want to do anything in response to dom changes
+    });
+    this.observer = null;
+  }
+  stop() {
+    this.disconnectSelection();
+  }
+
+  start() {
+    this.connectSelection();
+  }
+
+  flush() {
+    const { view } = this;
+    if (!view.docView || this.flushingSoon > -1) return;
+    const mutations = this.pendingRecords();
+    if (mutations.length) this.queue = [];
+
+    const newSel = selectionFromDOM(view);
+    if (newSel) view.dispatch(view.state.tr.setSelection(newSel));
+    const sel = view.domSelectionRange();
+    this.currentSelection.set(sel);
+  }
+}

src/components/DocNodeView.tsx

@@ -9,12 +9,12 @@ import React, {
 import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
 import { useChildNodeViews } from "../hooks/useChildNodeViews.js";
 import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
-import { DecorationSourceInternal } from "../prosemirror-view/DecorationInternal.js";
+import { DecorationSource } from "../prosemirror-view/decoration.js";
 
 type Props = {
   node: Node;
   contentEditable: boolean;
-  decorations: DecorationSourceInternal;
+  decorations: DecorationSource;
 };
 
 export const DocNodeView = forwardRef(function DocNodeView(

src/components/EditorView.tsx

@@ -1,4 +1,5 @@
 import { Command, EditorState, Transaction } from "prosemirror-state";
+import { DecorationSet } from "prosemirror-view";
 import React, {
   DetailedHTMLProps,
   ForwardRefExoticComponent,
@@ -9,22 +10,43 @@ import React, {
   useState,
 } from "react";
 
+import { SelectionDOMObserver } from "../SelectionDOMObserver.js";
 import { EditorViewContext } from "../contexts/EditorViewContext.js";
 import { LayoutGroup } from "../contexts/LayoutGroup.js";
 import { NodeViewContext } from "../contexts/NodeViewContext.js";
 import { useContentEditable } from "../hooks/useContentEditable.js";
 import { useSyncSelection } from "../hooks/useSyncSelection.js";
 import { usePluginViews } from "../hooks/useViewPlugins.js";
-import { DecorationSourceInternal } from "../prosemirror-view/DecorationInternal.js";
 import {
-  DecorationSet,
+  DecorationSet as DecorationSetInternal,
   DirectEditorProps,
   EditorView as EditorViewClass,
 } from "../prosemirror-view/index.js";
+import { NodeViewDesc } from "../prosemirror-view/viewdesc.js";
 
 import { DocNodeView } from "./DocNodeView.js";
 import { NodeViewComponentProps } from "./NodeViewComponentProps.js";
 
+class ReactEditorView extends EditorViewClass {
+  init() {
+    this.domObserver.start();
+    this.initInput();
+  }
+
+  updateState(state: EditorState) {
+    this.state = state;
+  }
+
+  // @ts-expect-error We need this to be an accessor
+  set docView(_) {
+    // disallowed
+  }
+
+  get docView() {
+    return this.dom.pmViewDesc as NodeViewDesc;
+  }
+}
+
 type EditorStateProps =
   | {
       state: EditorState;
@@ -90,7 +112,10 @@ export function EditorView(props: Props) {
 
   const editable = editableProp ? editableProp(state) : true;
 
-  const getDecorations = useCallback(() => decorations, [decorations]);
+  const getDecorations = useCallback(
+    () => decorations as unknown as DecorationSetInternal,
+    [decorations]
+  );
 
   // This is only safe to use in effects/layout effects or
   // event handlers!
@@ -126,9 +151,10 @@ export function EditorView(props: Props) {
                   return;
                 }
                 if (el && !reactEditorView) {
-                  const newReactEditorView = new EditorViewClass(
+                  const newReactEditorView = new ReactEditorView(
                     { mount: el },
                     {
+                      DOMObserver: SelectionDOMObserver,
                       decorations: getDecorations,
                       handleDOMEvents,
                       handleClick,
@@ -145,7 +171,7 @@ export function EditorView(props: Props) {
                       handleTripleClickOn,
                       editable: () => editable,
                       state: EditorState.create({ schema: state.schema }),
-                      dispatchTransaction(this: EditorViewClass, tr) {
+                      dispatchTransaction(this: ReactEditorView, tr) {
                         if (dispatchProp) {
                           dispatchProp.call(this, tr);
                         } else {
@@ -165,7 +191,7 @@ export function EditorView(props: Props) {
               }}
               node={state.doc}
               contentEditable={editable}
-              decorations={decorations as unknown as DecorationSourceInternal}
+              decorations={decorations as unknown as DecorationSetInternal}
             />
             {children}
           </>

src/components/NodeView.tsx

@@ -10,18 +10,18 @@ import React, {
 import { NodeViewContext } from "../contexts/NodeViewContext.js";
 import { useChildNodeViews } from "../hooks/useChildNodeViews.js";
 import {
-  DecorationInternal,
-  DecorationSourceInternal,
-} from "../prosemirror-view/DecorationInternal.js";
+  Decoration,
+  DecorationSource,
+} from "../prosemirror-view/decoration.js";
 
 import { NodeViewComponentProps } from "./NodeViewComponentProps.js";
 import { OutputSpec } from "./OutputSpec.js";
 
 type Props = {
   node: Node;
   pos: number;
-  decorations: readonly DecorationInternal[];
-  innerDecorations: DecorationSourceInternal;
+  decorations: readonly Decoration[];
+  innerDecorations: DecorationSource;
   nodeDomRef: MutableRefObject<HTMLElement | null>;
   domRef?: MutableRefObject<HTMLElement | null>;
 };

src/components/TextNodeView.tsx

@@ -1,15 +1,14 @@
 import { Node } from "prosemirror-model";
-import { DecorationSet } from "prosemirror-view";
 import { Component } from "react";
 import { findDOMNode } from "react-dom";
 
-import { DecorationInternal } from "../prosemirror-view/DecorationInternal.js";
+import { Decoration, DecorationSet } from "../prosemirror-view/decoration.js";
 import { TextViewDesc, ViewDesc } from "../prosemirror-view/viewdesc.js";
 
 type Props = {
   node: Node;
   siblingDescriptors: ViewDesc[];
-  decorations: readonly DecorationInternal[];
+  decorations: readonly Decoration[];
 };
 
 export class TextNodeView extends Component<Props> {

src/components/WidgetView.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useLayoutEffect, useRef } from "react";
 
 import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
-import { ReactWidgetDecoration } from "../prosemirror-view/DecorationInternal.js";
+import { ReactWidgetDecoration } from "../decorations/ReactWidgetType.js";
 import { WidgetViewDesc } from "../prosemirror-view/viewdesc.js";
 
 type Props = {

src/decorations/ReactWidgetType.ts

@@ -1,9 +1,8 @@
 import { Mark } from "prosemirror-model";
 import { Mappable } from "prosemirror-transform";
-import { Decoration } from "prosemirror-view";
-import { ComponentType, ForwardRefExoticComponent, RefAttributes } from "react";
+import { ForwardRefExoticComponent, RefAttributes } from "react";
 
-import { DecorationType } from "./DecorationType.js";
+import { Decoration, DecorationType } from "../prosemirror-view/decoration.js";
 
 function compareObjs(
   a: { [prop: string]: unknown },
@@ -50,10 +49,7 @@ export class ReactWidgetType implements DecorationType {
       span.from + oldOffset,
       this.side < 0 ? -1 : 1
     );
-    return deleted
-      ? null
-      : // @ts-expect-error Decoration constructor args are internal
-        new Decoration(pos - offset, pos - offset, this);
+    return deleted ? null : new Decoration(pos - offset, pos - offset, this);
   }
 
   valid(): boolean {
@@ -76,9 +72,24 @@ export class ReactWidgetType implements DecorationType {
 
 export function widget(
   pos: number,
-  component: ComponentType,
+  component: ForwardRefExoticComponent<
+    RefAttributes<HTMLElement> & { contentEditable: boolean }
+  >,
   spec: ReactWidgetSpec
 ) {
-  // @ts-expect-error Decoration constructor args are internal
   return new Decoration(pos, pos, new ReactWidgetType(component, spec));
 }
+
+export interface NonWidgetType extends DecorationType {
+  attrs: {
+    nodeName?: string;
+    class?: string;
+    style?: string;
+    [attr: string]: string | undefined;
+  };
+}
+
+export interface ReactWidgetDecoration extends Decoration {
+  type: ReactWidgetType;
+  inline: false;
+}