@gulibs/prosemirror-plugin-blockquote

prosemirror-plugin-blockquote

Prosemirror 插件，增强 blockquote样式功能

Install

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

or

yarn add @gulibs/prosemirror-plugin-blockquote

Usage

这里使用的是自家库 @gulibs/react-prosemirror-editor-x

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

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

// nodes.ts

import { nodes } from 'prosemirror-schema-basic'
import { abstractBlockquote, normalBlockquote, quoteBlockquote } from '@gulibs/prosemirror-plugin-blockquote';

export {
    ...nodes,
    abstractBlockquote,
    normalBlockquote,
    normalBlockquote
}

// menus.ts 其实使用官方的也很类似

const menus = {
    ...,
    blockquote: {
        tooltips: {
            title: '引用',
            placement: 'bottom'
        },
        icon: Icons.blockquote,
        showDropdown: true,
        children: [
            {
                title: '引用样式-1',
                active: blockActive(schema.nodes.abstractBlockquote),
                run: setBlockType(schema.nodes.abstractBlockquote)
            },
            {
                title: '引用样式-2',
                active: blockActive(schema.nodes.normalBlockquote),
                run: setBlockType(schema.nodes.normalBlockquote)
            },
            {
                title: '引用样式-3',
                active: blockActive(schema.nodes.quoteBlockquote),
                run: setBlockType(schema.nodes.quoteBlockquote)
            }
        ]
    },
    ...
}

or

官方使用

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

const editorView = new EditorView(undefined, {
    state: EditorState.create({
        schema,
        plugins: plugins ? plugins : [
            blockquotes()
        ],
        ...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