Is it possible to add some reasoning behind coupling remirror with emotion

[pie6k]

First of all, thank you so much!

I've created quite advanced text editor with raw Prosemirror:

but due to fact I'm using React, I've used tons of weird hacks and workaround to integrate it nicely with API that hides those hacks.

With time it became more and more problematic and what happens here is amazing!

However, my project is based on next.js and styled-components.

Project is integrated with styled-components (server side rendering of css etc). I'm a bit worried how would that play with emotion (which is actually very similar to styled-components).

If I want to use remirror - do I have to use emotion?

I'd be totally fine to write entire UI layer myself (which I'd like to do anyway).

In general, I'd prefer it to be fully 'renderless' - meaning it has no knowledge about how things will look. Is that possible?

If no - could you explain a bit what this integration means, how it works etc.

Thank you so much!

[ifiokjr]

emotion has been removed from the next version. It's now optional .css files but you're free to use whatever styling library you choose.

I'll be releasing the next pre-release soon. I'm just finalising some details while creating a wysiwyg editor in #320.

You can take a look at the emotionless social editor in the latest version of the new documentation site. https://5efe30a1a2a6dd4483635ce0--remirror.netlify.app/docs/showcase/social

[pie6k]

Thanks for quick reply!

Is it possible to play with next right now? I have 'free' weekend and would like to try to migrate to it :)

[ifiokjr]

It won't be easy to play with it until it's released. Cloning, and linking is possible but with almost 80 packages, it might get tedious.

I'm hoping to have a release this weekend. Whether that is possible depends on whether I bump into any bugs with the work I'm currently doing.

Thanks for taking a look at remirror. I'm really excited for people to start using the next version. It's magnitudes better than the currently available version.

I'm actually enjoying creating editors' with the new API and extensions are more understandable in my opinion.

[pie6k]

I think I'll try to build it myself. Is there anything undocumented that could be helpful for me to build it ?

Also, is there any working example or any sort of reference I can look at using next version?

[pie6k]

Ok, so I've tried for a moment, was able to build it, but was not sure how to continue from there.

If I'll start using 'old' version - will it be hard to migrate it later on to 'next'?

[ifiokjr]

I didn't see these replies until now.

In the next version the best working example is available via the @remirror/react-social package. Once the release is available I'll start adding examples to code sandbox and the documentation.

I'd recommend to not use the previous version as a release should be available within an hour. Please note this is the first pre-release so there will be edge cases and the API is being worked on.

Your first impressions will be highly appreciated and any suggestions you have will carry a lot of weight.

[pie6k]

Sounds amazing! I'm checking npm every 2 hours hoping it's released :)

But TBH I don't want to put pressure! Thanks again

I'll share my thoughts

[ifiokjr]

Every push right now is showing me another error with the release pipeline. It should be fixed sooon.

[ifiokjr]

So after multiple false starts, there's a release available.

yarn add remirror@next @remirror/pm@next

However. I've just realised it completely falls apart when wrapped in React.StrictMode. I've got an update coming soon. Just want to change all my tests to use StrictMode by default.

[pie6k]

wooohoo!

I'll play with it and let you know!

Amazing work

[pie6k]

I'll post my 'journey journal' here, so this issue might be a bit spammy, but I'll try to describe everything I face.

ps. even if I'll express a lot of feedback, keep in mind in general I'm deeply, deeply amazed!

[pie6k]

https://remirror.io/docs/guide/create-editor example has unclosed tags eg. <Menu> instead of <Menu /> which breaks syntax. Took me a moment to find out

[pie6k]

Context is untyped (I have probably to create my type-wrapper for context) - to have all commands properly autocompleted.

Typescript magic you've got is amazing, but less experienced devs might be very confused by this.

Maybe it'd be good to create those hooks instead of importing them.

eg. const useRemirror = createEditor(myExtensions) <<- now my useRemirror will be properly typed and will be root hook of everything else

[pie6k]

Ok, I think I've faced a bit blocking one:

Seems it's trying to import uncomiled ts files directly

[pie6k]

Oh, it's even different - it's trying to import '/Users/ifiokjr/Coding/kickjump/remirror/prs/packages/@remirror/pm/src/commands.ts' which looks like your own home folder on your machine. It's definitively should not be there :P

[pie6k]

So I see this in the file inside node_modules

// 👋 hey!!
// you might be reading this and seeing .esm in the filename
// and being confused why there is commonjs below this filename
// DON'T WORRY!
// this is intentional
// it's only commonjs with `preconstruct dev`
// when you run `preconstruct build`, it will be ESM
// why is it commonjs?
// we need to re-export every export from the source file
// but we can't do that with ESM without knowing what the exports are (because default exports aren't included in export/import *)
// and they could change after running `preconstruct dev` so we can't look at the file without forcing people to
// run preconstruct dev again which wouldn't be ideal
// this solution could change but for now, it's working

module.exports = require("/Users/ifiokjr/Coding/kickjump/remirror/prs/packages/@remirror/pm/src/commands.ts")

I thought I'll try to replace it with my own user folder just to give it a try, but I could to find proper commands file there so I gave up :)

Let me know if I can help anyhow

[ifiokjr]

Oh, that's perhaps because you've installed @remirror/pm@1.0.0-next.0. Try @remirror/pm@1.0.0-next.1. I had some real trouble getting changesets to work and the one time it did work I had missed the build step so had to release again.

The fixed file is here: https://unpkg.com/browse/@remirror/pm@1.0.0-next.1/commands/dist/pm.esm.js

This is the version you're seeing https://unpkg.com/browse/@remirror/pm@1.0.0-next.0/commands/dist/pm.esm.js

[ifiokjr]

By the way, thanks for this. It's really really helpful to have this feedback.

[ifiokjr]

Since I seem to keep missing you, do you want to continue the conversation on our discord channel. Might be easier to diagnose and fix issues.

[pie6k]

not sure why, but I cannot get verification email from discord and verify my account - and this means I cannot send any message :<

and while I'm not getting any email - it's blocking lol.

Can it be caused by anything on your side?