prosemirror-plugin-placeholder

Prosemirror自动换行功能插件，用户输入自动换行，插入block元素自动换行。

Install

npm install --save @gulibs/prosemirror-plugin-autowrap

or

yarn add @gulibs/prosemirror-plugin-autowrap

Usage

使用React组件库 @gulibs/react-prosemirror-editor-x

import React from 'react';
import { Card } from 'antd';
import { ProseMirrorEditor, EditorToolBar } from '@gulibs/react-prosemirror-editor-x';
import { autoWrap } from '@gulibs/prosemirror-plugin-autowrap';

class Example extends React.Component {
    render() {
        return (
            <ProseMirrorEditor
                config={{
                    schema,
                    plugins: [
                        autoWrap()
                    ]
                }}
                autoFocus
                onRender={({ editor }) => (
                    <Card
                    type="inner"
                    bordered={false}
                    >
                    <EditorToolBar menus={menus} />
                    {editor}
                    </Card>
                )}
                >
            </ProseMirrorEditor>
        )
    }
}

官方使用

import { schema } from 'prosemirror-schema-basic';
import { EditorView } from 'prosemirror-view';
import { EditorState } from 'prosemirror-state';
import { autoWrap } from '@gulibs/prosemirror-plugin-autowrap';

const editorView = new EditorView(undefined, {
    state: EditorState.create({
        schema,
        plugins: plugins ? plugins : [
            autoWrap()
        ],
        ...restConfig
    })
    dispatchTransaction: (tr) => {
        const { state, transactions } = this.view.state.applyTransaction(tr);
        this.view.updateState(state);
        if (transactions.some(tr => tr.docChanged)) {
            onChange && onChange(state.doc);
        }
        this.forceUpdate();
    }
});

License

MIT © AnizGu