prosemirror-view 1.24.1 → 1.26.1

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 1.26.1 (2022-06-13)
+
+### Bug fixes
+
+Fix incorrect types for `handleDrop` and `decorations`. Document open properties on widget specs
+
+## 1.26.0 (2022-06-07)
+
+### New features
+
+Export the `NodeViewConstructor` and `MarkViewConstructor` types. Include Node/MarkViewConstructor in doc template
+
+## 1.25.0 (2022-06-01)
+
+### New features
+
+Mark views can now be specified with a separate editor prop, `markViews`, to make it easier to get the types right.
+
 ## 1.24.1 (2022-05-30)
 
 ### Bug fixes

package/dist/index.cjs

@@ -5698,11 +5698,15 @@ function selectionContextChanged(sel1, sel2) {
 
 function buildNodeViews(view) {
   var result = Object.create(null);
-  view.someProp("nodeViews", function (obj) {
+
+  function add(obj) {
     for (var _prop3 in obj) {
       if (!Object.prototype.hasOwnProperty.call(result, _prop3)) result[_prop3] = obj[_prop3];
     }
-  });
+  }
+
+  view.someProp("nodeViews", add);
+  view.someProp("markViews", add);
   return result;
 }
 

package/dist/index.d.ts

@@ -79,6 +79,10 @@ declare class Decoration {
         mapping
         */
         destroy?: (node: DOMNode) => void;
+        /**
+        Specs allow arbitrary additional properties.
+        */
+        [key: string]: any;
     }): Decoration;
     /**
     Creates an inline decoration, which adds the given attributes to
@@ -99,6 +103,10 @@ declare class Decoration {
         [`inclusiveStart`](https://prosemirror.net/docs/ref/#view.Decoration^inline^spec.inclusiveStart).
         */
         inclusiveEnd?: boolean;
+        /**
+        Specs may have arbitrary additional properties.
+        */
+        [key: string]: any;
     }): Decoration;
     /**
     Creates a node decoration. `from` and `to` should point precisely
@@ -536,7 +544,19 @@ declare class EditorView {
     */
     dispatch(tr: Transaction): void;
 }
-declare type NodeViewConstructor = (node: Node, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[], innerDecorations: DecorationSource) => NodeView;
+/**
+The type of function [provided](https://prosemirror.net/docs/ref/#view.ViewProps.nodeViews) to
+create [node views](https://prosemirror.net/docs/ref/#view.NodeView).
+*/
+declare type NodeViewConstructor = (node: Node, view: EditorView, getPos: () => number, decorations: readonly Decoration[], innerDecorations: DecorationSource) => NodeView;
+/**
+The function types [used](https://prosemirror.net/docs/ref/#view.ViewProps.markViews) to create
+mark views.
+*/
+declare type MarkViewConstructor = (mark: Mark, view: EditorView, inline: boolean) => {
+    dom: HTMLElement;
+    contentDOM?: HTMLElement;
+};
 /**
 Helper type that maps event names to event object types, but
 includes events that TypeScript's HTMLElementEventMap doesn't know
@@ -571,7 +591,7 @@ interface EditorProps {
     default behavior).
     */
     handleDOMEvents?: {
-        [event in string]: (view: EditorView, event: DOMEventMap[event]) => boolean | void;
+        [event in keyof DOMEventMap]?: (view: EditorView, event: DOMEventMap[event]) => boolean | void;
     };
     /**
     Called when the editor receives a `keydown` event.
@@ -624,7 +644,7 @@ interface EditorProps {
     true if this drop moves from the current selection (which should
     thus be deleted).
     */
-    handleDrop?: (view: EditorView, event: MouseEvent, slice: Slice, moved: boolean) => boolean | void;
+    handleDrop?: (view: EditorView, event: DragEvent, slice: Slice, moved: boolean) => boolean | void;
     /**
     Called when the view, after updating its state, tries to scroll
     the selection into view. A handler function may return false to
@@ -676,14 +696,12 @@ interface EditorProps {
     */
     transformPasted?: (slice: Slice) => Slice;
     /**
-    Allows you to pass custom rendering and behavior logic for nodes
-    and marks. Should map node and mark names to constructor
-    functions that produce a [`NodeView`](https://prosemirror.net/docs/ref/#view.NodeView) object
-    implementing the node's display behavior. For nodes, the third
-    argument `getPos` is a function that can be called to get the
-    node's current position, which can be useful when creating
-    transactions to update it. For marks, the third argument is a
-    boolean that indicates whether the mark's content is inline.
+    Allows you to pass custom rendering and behavior logic for
+    nodes. Should map node names to constructor functions that
+    produce a [`NodeView`](https://prosemirror.net/docs/ref/#view.NodeView) object implementing the
+    node's display behavior. The third argument `getPos` is a
+    function that can be called to get the node's current position,
+    which can be useful when creating transactions to update it.
     
     `decorations` is an array of node or inline decorations that are
     active around the node. They are automatically drawn in the
@@ -697,11 +715,25 @@ interface EditorProps {
     on the content. But if you, for example, want to create a nested
     editor with the content, it may make sense to provide it with the
     inner decorations.
+    
+    (For backwards compatibility reasons, [mark
+    views](https://prosemirror.net/docs/ref/#view.ViewProps.markViews) can also be included in this
+    object.)
     */
     nodeViews?: {
         [node: string]: NodeViewConstructor;
     };
     /**
+    Pass custom mark rendering functions. Note that these cannot
+    provide the kind of dynamic behavior that [node
+    views](https://prosemirror.net/docs/ref/#view.NodeView) can—they just provide custom rendering
+    logic. The third argument indicates whether the mark's content
+    is inline.
+    */
+    markViews?: {
+        [mark: string]: MarkViewConstructor;
+    };
+    /**
     The DOM serializer to use when putting content onto the
     clipboard. If not given, the result of
     [`DOMSerializer.fromSchema`](https://prosemirror.net/docs/ref/#model.DOMSerializer^fromSchema)
@@ -722,7 +754,7 @@ interface EditorProps {
     A set of [document decorations](https://prosemirror.net/docs/ref/#view.Decoration) to show in the
     view.
     */
-    decorations?: (state: EditorState) => DecorationSource | null;
+    decorations?: (state: EditorState) => DecorationSource | null | undefined;
     /**
     When this returns false, the content of the view is not directly
     editable.
@@ -796,4 +828,4 @@ interface DirectEditorProps extends EditorProps {
     dispatchTransaction?: (tr: Transaction) => void;
 }
 
-export { DOMEventMap, Decoration, DecorationAttrs, DecorationSet, DecorationSource, DirectEditorProps, EditorProps, EditorView, NodeView };
+export { DOMEventMap, Decoration, DecorationAttrs, DecorationSet, DecorationSource, DirectEditorProps, EditorProps, EditorView, MarkViewConstructor, NodeView, NodeViewConstructor };

package/dist/index.js

@@ -5226,11 +5226,13 @@ function selectionContextChanged(sel1, sel2) {
 }
 function buildNodeViews(view) {
     let result = Object.create(null);
-    view.someProp("nodeViews", obj => {
+    function add(obj) {
         for (let prop in obj)
             if (!Object.prototype.hasOwnProperty.call(result, prop))
                 result[prop] = obj[prop];
-    });
+    }
+    view.someProp("nodeViews", add);
+    view.someProp("markViews", add);
     return result;
 }
 function changedNodeViews(a, b) {

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "prosemirror-view",
-  "version": "1.24.1",
+  "version": "1.26.1",
   "description": "ProseMirror's view component",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
-    "import": "./dist/index.js",
-    "require": "./dist/index.cjs"
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style/prosemirror.css": "./style/prosemirror.css"
   },
   "sideEffects": false,
   "style": "style/prosemirror.css",

package/src/README.md

@@ -10,6 +10,10 @@ this module.
 
 @EditorProps
 
+@NodeViewConstructor
+
+@MarkViewConstructor
+
 @DirectEditorProps
 
 @NodeView

package/src/decoration.ts

@@ -182,6 +182,9 @@ export class Decoration {
     /// Called when the widget decoration is removed as a result of
     /// mapping
     destroy?: (node: DOMNode) => void
+
+    /// Specs allow arbitrary additional properties.
+    [key: string]: any
   }): Decoration {
     return new Decoration(pos, pos, new WidgetType(toDOM, spec))
   }
@@ -200,6 +203,9 @@ export class Decoration {
     /// See
     /// [`inclusiveStart`](#view.Decoration^inline^spec.inclusiveStart).
     inclusiveEnd?: boolean
+
+    /// Specs may have arbitrary additional properties.
+    [key: string]: any
   }) {
     return new Decoration(from, to, new InlineType(attrs, spec))
   }

package/src/index.ts

@@ -42,7 +42,7 @@ export class EditorView {
   /// @internal
   cursorWrapper: {dom: DOMNode, deco: Decoration} | null = null
   /// @internal
-  nodeViews: {[node: string]: NodeViewConstructor}
+  nodeViews: NodeViewSet
   /// @internal
   lastSelectedViewDesc: ViewDesc | undefined = undefined
   /// @internal
@@ -472,15 +472,17 @@ function selectionContextChanged(sel1: Selection, sel2: Selection) {
 }
 
 function buildNodeViews(view: EditorView) {
-  let result: {[node: string]: NodeViewConstructor} = Object.create(null)
-  view.someProp("nodeViews", obj => {
+  let result: NodeViewSet = Object.create(null)
+  function add(obj: NodeViewSet) {
     for (let prop in obj) if (!Object.prototype.hasOwnProperty.call(result, prop))
       result[prop] = obj[prop]
-  })
+  }
+  view.someProp("nodeViews", add)
+  view.someProp("markViews", add)
   return result
 }
 
-function changedNodeViews(a: {[node: string]: NodeViewConstructor}, b: {[node: string]: NodeViewConstructor}) {
+function changedNodeViews(a: NodeViewSet, b: NodeViewSet) {
   let nA = 0, nB = 0
   for (let prop in a) {
     if (a[prop] != b[prop]) return true
@@ -495,8 +497,16 @@ function checkStateComponent(plugin: Plugin) {
     throw new RangeError("Plugins passed directly to the view must not have a state component")
 }
 
-type NodeViewConstructor = (node: Node, view: EditorView, getPos: () => number | undefined,
-                            decorations: readonly Decoration[], innerDecorations: DecorationSource) => NodeView
+/// The type of function [provided](#view.ViewProps.nodeViews) to
+/// create [node views](#view.NodeView).
+export type NodeViewConstructor = (node: Node, view: EditorView, getPos: () => number,
+                                   decorations: readonly Decoration[], innerDecorations: DecorationSource) => NodeView
+
+/// The function types [used](#view.ViewProps.markViews) to create
+/// mark views.
+export type MarkViewConstructor = (mark: Mark, view: EditorView, inline: boolean) => {dom: HTMLElement, contentDOM?: HTMLElement}
+
+type NodeViewSet = {[name: string]: NodeViewConstructor | MarkViewConstructor}
 
 /// Helper type that maps event names to event object types, but
 /// includes events that TypeScript's HTMLElementEventMap doesn't know
@@ -527,7 +537,7 @@ export interface EditorProps {
   /// `preventDefault` yourself (or not, if you want to allow the
   /// default behavior).
   handleDOMEvents?: {
-    [event in string]: (view: EditorView, event: DOMEventMap[event]) => boolean | void
+    [event in keyof DOMEventMap]?: (view: EditorView, event: DOMEventMap[event]) => boolean | void
   }
 
   /// Called when the editor receives a `keydown` event.
@@ -569,7 +579,7 @@ export interface EditorProps {
   /// Called when something is dropped on the editor. `moved` will be
   /// true if this drop moves from the current selection (which should
   /// thus be deleted).
-  handleDrop?: (view: EditorView, event: MouseEvent, slice: Slice, moved: boolean) => boolean | void
+  handleDrop?: (view: EditorView, event: DragEvent, slice: Slice, moved: boolean) => boolean | void
 
   /// Called when the view, after updating its state, tries to scroll
   /// the selection into view. A handler function may return false to
@@ -613,14 +623,12 @@ export interface EditorProps {
   /// the document.
   transformPasted?: (slice: Slice) => Slice
 
-  /// Allows you to pass custom rendering and behavior logic for nodes
-  /// and marks. Should map node and mark names to constructor
-  /// functions that produce a [`NodeView`](#view.NodeView) object
-  /// implementing the node's display behavior. For nodes, the third
-  /// argument `getPos` is a function that can be called to get the
-  /// node's current position, which can be useful when creating
-  /// transactions to update it. For marks, the third argument is a
-  /// boolean that indicates whether the mark's content is inline.
+  /// Allows you to pass custom rendering and behavior logic for
+  /// nodes. Should map node names to constructor functions that
+  /// produce a [`NodeView`](#view.NodeView) object implementing the
+  /// node's display behavior. The third argument `getPos` is a
+  /// function that can be called to get the node's current position,
+  /// which can be useful when creating transactions to update it.
   ///
   /// `decorations` is an array of node or inline decorations that are
   /// active around the node. They are automatically drawn in the
@@ -634,8 +642,19 @@ export interface EditorProps {
   /// on the content. But if you, for example, want to create a nested
   /// editor with the content, it may make sense to provide it with the
   /// inner decorations.
+  ///
+  /// (For backwards compatibility reasons, [mark
+  /// views](#view.ViewProps.markViews) can also be included in this
+  /// object.)
   nodeViews?: {[node: string]: NodeViewConstructor}
 
+  /// Pass custom mark rendering functions. Note that these cannot
+  /// provide the kind of dynamic behavior that [node
+  /// views](#view.NodeView) can—they just provide custom rendering
+  /// logic. The third argument indicates whether the mark's content
+  /// is inline.
+  markViews?: {[mark: string]: MarkViewConstructor}
+
   /// The DOM serializer to use when putting content onto the
   /// clipboard. If not given, the result of
   /// [`DOMSerializer.fromSchema`](#model.DOMSerializer^fromSchema)
@@ -653,7 +672,7 @@ export interface EditorProps {
 
   /// A set of [document decorations](#view.Decoration) to show in the
   /// view.
-  decorations?: (state: EditorState) => DecorationSource | null
+  decorations?: (state: EditorState) => DecorationSource | null | undefined
 
   /// When this returns false, the content of the view is not directly
   /// editable.

package/src/viewdesc.ts

@@ -565,9 +565,9 @@ class MarkViewDesc extends ViewDesc {
 
   static create(parent: ViewDesc, mark: Mark, inline: boolean, view: EditorView) {
     let custom = view.nodeViews[mark.type.name]
-    let spec: NodeView = custom && (custom as any)(mark, view, inline)
+    let spec: {dom: HTMLElement, contentDOM?: HTMLElement} = custom && (custom as any)(mark, view, inline)
     if (!spec || !spec.dom)
-      spec = DOMSerializer.renderSpec(document, mark.type.spec.toDOM!(mark, inline))
+      spec = DOMSerializer.renderSpec(document, mark.type.spec.toDOM!(mark, inline)) as any
     return new MarkViewDesc(parent, mark, spec.dom, spec.contentDOM || spec.dom as HTMLElement)
   }
 
@@ -631,7 +631,7 @@ export class NodeViewDesc extends ViewDesc {
   static create(parent: ViewDesc | undefined, node: Node, outerDeco: readonly Decoration[],
                 innerDeco: DecorationSource, view: EditorView, pos: number) {
     let custom = view.nodeViews[node.type.name], descObj: ViewDesc
-    let spec = custom && custom(node, view, () => {
+    let spec: NodeView | undefined = custom && (custom as any)(node, view, () => {
       // (This is a function that allows the custom view to find its
       // own position)
       if (!descObj) return pos