重新错误WhitespaceExtension未运行

我正在Remerror中设置一个基本的所见即所得编辑器(从头开始,不使用提供的 WysiwygEditor )我遇到了一个问题 WhitespaceExtension 似乎不尊重默认设置或切换设置。从一开始,其他一切似乎都相对良好。

我的假设是 Whitespace扩展 应该在一开始就离开,但我明白了:

在工具栏中切换空白没有任何效果(除了更改按钮的颜色):

然后我可以再次关闭空白:

但尝试在那之后立即打字会产生以下结果:

换句话说,关闭的空白保持关闭状态,但任何新的空白字符都会得到一个占位符,即使它们不应该。

我甚至尝试过用初始化 WhitespaceOptions 属于 { initialVisibility: false } ,但这并没有什么区别。

大概有一些非常明显的事情我要么在做,要么不在做,但我不确定是什么。

以下是编辑器的代码:

import React, { useEffect, useRef, useState } from "react";

import {
    Remirror,
    ThemeProvider,
    useCommands,
    useCurrentSelection,
    useHelpers,
    useRemirror,
} from '@remirror/react';

import {
    BoldExtension, ItalicExtension, UnderlineExtension, StrikeExtension,
    DropCursorExtension,
    FontFamilyExtension, FontSizeExtension, 
    HistoryExtension,
    NodeFormattingExtension,
    TextCaseExtension,
    TrailingNodeExtension,
    WhitespaceExtension,
    YjsExtension
} from 'remirror/extensions';

import {
    Toolbar,
    CommandButton, CommandButtonGroup,
    VerticalDivider,
    HistoryButtonGroup,
    CopyButton, CutButton, PasteButton,
    BasicFormattingButtonGroup, ToggleStrikeButton,
    TextAlignmentButtonGroup, JustifyAlignButton,
    ToggleWhitespaceButton,
} from '@remirror/react-components';

import { FindExtension } from '@remirror/extension-find';

import * as Y from 'yjs';
import { WebrtcProvider } from 'y-webrtc';

import 'remirror/styles/all.css';

import './editor.css';


function MyToolbar() {
    return (
        <Toolbar>
        <HistoryButtonGroup />
        <CommandButtonGroup>
            <CopyButton /><CutButton /><PasteButton />
        </CommandButtonGroup>
        <CommandButtonGroup>
            <BasicFormattingButtonGroup /><ToggleStrikeButton />
        </CommandButtonGroup>
        <CommandButtonGroup>
            <TextAlignmentButtonGroup /><JustifyAlignButton />
        </CommandButtonGroup>
        <CommandButtonGroup>
            <ToggleWhitespaceButton />
        </CommandButtonGroup>
        </Toolbar>
    )
}


export function Editor(props) {

    const ydoc = new Y.Doc();
    // Clients connected to the same roomname share document updates
    const provider = new WebrtcProvider('test-session', ydoc,
        { signaling: ['wss://signaling.yjs.dev', 'wss://y-webrtc-eu.fly.dev'] });

    const {manager, state} = useRemirror({
        extensions: () => [
            new DropCursorExtension(),
            new HistoryExtension(),
            new BoldExtension(),
            new ItalicExtension(),
            new UnderlineExtension(),
            new StrikeExtension(),
            new NodeFormattingExtension(),
            new TrailingNodeExtension(),
            new WhitespaceExtension({ initialVisibility: false }),
            new YjsExtension({ getProvider: () => provider })
        ],
        core: {
            excludeExtensions: ['history']
        },
        selection: 'start'
    });
    
    useEffect(() => {
        // Run once
    }, []);
    
    return (
        <div className="editor-holder">
        <div id="editor" className="editor light-page full-height">
        <ThemeProvider>
        <div className='remirror-theme'>
        <Remirror manager={manager} autoFocus autoRender='end'>
        <MyToolbar />
        </Remirror>
        </div>
        </ThemeProvider>
        </div>
        </div>
    );
}