Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
use-prosemirror
Advanced tools
use-prosemirror - npm Package Compare versions
Comparing version 1.2.0 to 1.2.1
@@ -12,11 +12,11 @@ import React, { CSSProperties } from 'react'; | ||
| } | ||
| interface PropsWithOnChange extends PropsBase { | ||
| interface PropsWithOnChange { | ||
| onChange: (state: EditorState) => void; | ||
| dispatchTransaction?: never; | ||
| } | ||
| interface PropsWithDispatchTransaction extends PropsBase { | ||
| interface PropsWithDispatchTransaction { | ||
| dispatchTransaction: (transaction: Transaction) => void; | ||
| onChange?: never; | ||
| } | ||
| declare const _default: React.ForwardRefExoticComponent<(PropsWithOnChange & React.RefAttributes<Handle>) | (PropsWithDispatchTransaction & React.RefAttributes<Handle>)>; | ||
| declare const _default: React.ForwardRefExoticComponent<(PropsBase & PropsWithOnChange & React.RefAttributes<Handle>) | (PropsBase & PropsWithDispatchTransaction & React.RefAttributes<Handle>)>; | ||
| export default _default; |
@@ -21,2 +21,13 @@ "use strict"; | ||
| }; | ||
| var __rest = (this && this.__rest) || function (s, e) { | ||
| var t = {}; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) | ||
| t[p] = s[p]; | ||
| if (s != null && typeof Object.getOwnPropertySymbols === "function") | ||
| for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
| if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) | ||
| t[p[i]] = s[p[i]]; | ||
| } | ||
| return t; | ||
| }; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
@@ -26,11 +37,21 @@ const react_1 = __importStar(require("react")); | ||
| exports.default = react_1.forwardRef(function ProseMirror(props, ref) { | ||
| var _a; | ||
| var _a, _b; | ||
| const root = react_1.useRef(null); | ||
| const initialProps = react_1.useRef(props); | ||
| const buildPropsRef = react_1.useRef(buildProps); | ||
| buildPropsRef.current = buildProps; | ||
| const viewRef = react_1.useRef(null); | ||
| (_a = viewRef.current) === null || _a === void 0 ? void 0 : _a.update(buildProps(props)); | ||
| // If this is a non-initial render, update the editor view with | ||
| // the React render. | ||
| // - First update editor state using `EditorView#updateState()`. | ||
| // - Then update other props using `EditorView#setProps()`. | ||
| // If we update state with other props together using | ||
| // `setProps()`, scroll-into-view will not occur due to: | ||
| // https://github.com/ProseMirror/prosemirror-view/blob/13b046a834b489530a98dd362fa55703e52e076d/src/index.js#L183-L195 | ||
| const { state } = props, restProps = __rest(props, ["state"]); | ||
| (_a = viewRef.current) === null || _a === void 0 ? void 0 : _a.updateState(state); | ||
| (_b = viewRef.current) === null || _b === void 0 ? void 0 : _b.setProps(buildProps(restProps)); | ||
| react_1.useEffect(() => { | ||
| const view = new prosemirror_view_1.EditorView(root.current, buildPropsRef.current(initialProps.current)); | ||
| // Bootstrap the editor on first render. Note: running | ||
| // non-initial renders inside `useEffect` produced glitchy | ||
| // behavior. | ||
| const view = new prosemirror_view_1.EditorView(root.current, Object.assign({ state: initialProps.current.state }, buildProps(initialProps.current))); | ||
| viewRef.current = view; | ||
@@ -49,6 +70,7 @@ return () => { | ||
| return Object.assign(Object.assign({}, props), { dispatchTransaction: transaction => { | ||
| // `dispatchTransaction` takes precedence. | ||
| if (props.dispatchTransaction) { | ||
| props.dispatchTransaction(transaction); | ||
| } | ||
| else { | ||
| else if (props.onChange) { | ||
| props.onChange(viewRef.current.state.apply(transaction)); | ||
@@ -55,0 +77,0 @@ } |
| import { SetStateAction, Dispatch } from 'react'; | ||
| import { EditorState, Selection, Plugin } from 'prosemirror-state'; | ||
| import { Schema, Node, Mark } from 'prosemirror-model'; | ||
| interface Config<S extends Schema = any> { | ||
| schema?: S | null; | ||
| doc?: Node<S> | null; | ||
| selection?: Selection<S> | null; | ||
| storedMarks?: Mark[] | null; | ||
| plugins?: Array<Plugin<any, S>> | null; | ||
| } | ||
| export default function useProseMirror<S extends Schema = any>(config: Config<S>): [EditorState, Dispatch<SetStateAction<EditorState>>]; | ||
| import { EditorState } from 'prosemirror-state'; | ||
| declare type Config = Parameters<typeof EditorState.create>[0]; | ||
| export default function useProseMirror(config: Config): [EditorState, Dispatch<SetStateAction<EditorState>>]; | ||
| export {}; |
| { | ||
| "name": "use-prosemirror", | ||
| "version": "1.2.0", | ||
| "version": "1.2.1", | ||
| "description": "ProseMirror for React", | ||
@@ -10,3 +10,3 @@ "main": "./dist/index.js", | ||
| ], | ||
| "repository": "https://github.com/dminkovsky/use-prose-mirror", | ||
| "repository": "https://github.com/dminkovsky/use-prosemirror", | ||
| "author": "Dmitry Minkovsky", | ||
@@ -13,0 +13,0 @@ "license": "MIT", |
@@ -17,7 +17,12 @@ # use-prosemirror | ||
| This package lets you bootstrap a minimal, unopinionated React | ||
| integration quickly, using modern React best practices. Unline | ||
| other integrations, it separates state management and presentation | ||
| so you can keep your state as high in your render tree as | ||
| necessary. | ||
| integration quickly, using modern React best practices. | ||
| Unlike other integrations, it: | ||
| - Separates state and presentation so you can keep your state | ||
| as high up as necessary. | ||
| - Allows using [`EditorView` props](https://prosemirror.net/docs/ref/#view.Props) | ||
| as React props. | ||
| - Is written in TypeScript. | ||
| ## Installation | ||
@@ -36,3 +41,3 @@ | ||
| This package specifies React and ProseMirror as peer dependencies, | ||
| so makes sure you have them installed, too. | ||
| so make sure you have them installed, too. | ||
@@ -67,3 +72,3 @@ ## Usage | ||
| This component wraps ProseMirror's `EditorView`. It displays the | ||
| editor state provided by `useProseMirror` and dispaches state | ||
| editor state provided by `useProseMirror()` and dispatches state | ||
| updates using the update function. It accepts the following props: | ||
@@ -102,3 +107,3 @@ | ||
| returned by `useProseMirror()`. `dispatchTransaction` takes | ||
| precendence over `onChange`, which will not be called if | ||
| precedence over `onChange`, which will not be called if | ||
| `dispatchTransaction` is provided. | ||
@@ -105,0 +110,0 @@ |
New alerts
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Fixed alerts
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by9.74%
13094
- Lines of code
- increased by13.89%
123
- Number of lines in readme file
- increased by3.33%
155
No dependency changes