Themes Not Working (Emotion Configuration)

Symptom

Styles, themes, and perhaps even the white-space character are not rendering. The console may also show an error such as:

Warning: Invalid value for prop `css` on <div>

Problems

1. White-space cannot be added to the end of input (the focus of this issue; see animation; in FireFox but not Chrome)
2. The theme does not work for the editor.

Recording of White-Space Issue

Possible Solution

Ensure you have properly configured the emotion library to use the css prop. This dependency requires changes to your babel configuration or notations to be added to all source files which use the css prop. See https://emotion.sh/docs/install.

Background

I’ve made several attempts over the last few days to assemble the showcase WYSIWYG editor directly in my application to provide me with a starting point for working on my own extensions. If I import the showcase WYSIWYG editor directly into my application the issues does not occur.

Source Code

This morning, I was determined to find the cause and created another repository (github.com/aarongreenlee/remirror-space-issue) with a simplified editor and surrounding application and find the issue continues to persist. I hope this application is helpful and allows for the issue to be reproduced and isolated.

Checklist

• I have read the contributing document.

Thank You

Thank you for taking the time to review this issue. I’m hoping there is some small step I am missing. Once I understand where I am going wrong I’ll contribute back a step by step guide to aid others in building their own WYSIWYG editor.

---

Simplified Assembly showing White-Space Issue

For convenience, here is an extract from the repository I’ve shared where I produce this issue. The repository shares a similar extract of the full wysiwyg editor I’ve ported this morning which shows the same issue.

import {
    ManagedRemirrorProvider,
    RemirrorManager,
    useRemirrorContext,
} from "@remirror/react";

import React, { FC } from "react";
import { WysiwygEditorProps, WysiwygExtensions } from "../wysiwyg-types";

export const WysiwygEditor: FC<WysiwygEditorProps> = (
    {
        defaultLanguage,
        children,
        ...props
    },
) => {

    return (
        <RemirrorManager>
            <ManagedRemirrorProvider {...props}>
                <>
                    <InnerEditor/>
                    {children}
                </>
            </ManagedRemirrorProvider>
        </RemirrorManager>
    )
};

/**
 * The internal editor responsible for the editor layout and ui.
 * Any component rendered has access to the remirror context.
 */
const InnerEditor: FC = () => {
    const { getRootProps } = useRemirrorContext<WysiwygExtensions>();

    return (
        <div {...getRootProps()} data-testid='remirror-wysiwyg-editor'/>
    )
};

[ifiokjr]

Thanks for raising this @aarongreenlee

[aarongreenlee]

Agreed, @dj0nes. I have been trying to get the babel emotion preset to work so the core extensions don’t need modification; however, I think may want to modify the core so folks can assemble with create-react-app which won’t let you customize babel.