Skip to content

Add react streamfield editor as streamfield editor #372

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

Add react streamfield editor as streamfield editor #372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7151b79
Add react streamfield editor as streamfield editor
joeyjurjens Oct 28, 2020
27e3dae
Add backwards support people that do not want to use the react stream…
joeyjurjens Oct 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions coderedcms/blocks/base_blocks.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,10 @@ class Meta:
form_template = 'wagtailadmin/block_forms/base_block_settings_struct.html'
label = _('Advanced Settings')

# Specific react streamfield settings
icon = 'cog'
closed = True
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This does not seem to be taking effect... when I create a new block in the streamfield (in wagtail admin) the advanced settings section is open/expanded by default. Ideally this would be collapsed by default.

We will also need the ability to add a custom CSS class to this advanced settings container, so that it can be styled accordingly. That was previously achieved through the HTML template. Any ideas?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I see. The closed option in the meta class is for when you load a page. So if you save your page and then check it should be closed. I understand that it currently is collapsed when adding the block & I'll check if it's possible to have the same effect and let you know.

I assume we can still use wagtail_hooks to inject custom CSS into the streamfield editor, but I'll have to test this out & let you know.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we want to achieve the same behaviour and looks, we have to modify the react-streamfield code. I'm not that familiar with JS/React as in overriding code, so I'll look into that tomorrow and see if I can do this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes sense. Thanks for doing all this leg work Joey - it is a big help!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did some research, and there's no easy way of extending the editor unfortunately.

I could fork the editor, but I'm not sure how the react editor will be implemented in wagtail itself; will it stay a separate repo or will it completely be merged into wagtail. If it's option two, I don't know if it's wise for you guys to use a fork in coderedcms, as when wagtail releases it the fork makes no sense.

I've currently forked it with my changes which makes it work like it works now with the advanced settings, so it is possible with a fork.

Do you maybe happen to know how it's going to be merged in wagtail? And what do you think, is it wise for you guys to use a fork?

Copy link
Contributor

@vsalvino vsalvino Nov 2, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would like to avoid using a fork if possible, only because that presents a lot of ongoing maintenance. I would encourage you to try and submit a patch to wagtail-react-streamfield if possible. If so, could you link that PR here as well? I would be happy to help with that patch if you'd like another set of eyes.

I don't know when it will be merged into wagtail. Last I heard from Matt Westcott and team in July was "it's on our radar but no ETA".

An alternate approach for us might be to make the necessary changes to support the react streamfield, without adding it to requirements/installed_apps. And let folks start using it on their own, "use at your own risk" situation to test it out. We could then point them to your fork as experimental.

Copy link
Author

@joeyjurjens joeyjurjens Nov 2, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree that using forks is not the ideal. I will submit my PR to wagtail, I've submitted one PR's on react-streamfield and one on wagtail-react-streamfield, but as of now I haven't got any replies on it yet so doubt it will be any different.

Those are the only changes that are required: https://github.com/joeyjurjens/react-streamfield/commit/d4685c06aea3e77c171283d776e2cff10a78bad9

I'll make a PR once I get home, but unsure if they'll do anything with it 😅 but we'll see hehe.

Copy link
Author

@joeyjurjens joeyjurjens Nov 2, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made a PR, now it's waiting haha; wagtail-deprecated/react-streamfield#13


def __init__(self, local_blocks=None, template_choices=None, **kwargs):
if not local_blocks:
local_blocks = ()
Expand Down
1 change: 1 addition & 0 deletions coderedcms/project_template/basic/project_name/settings/base.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
'wagtail.sites',
'wagtail.users',
'wagtail.snippets',
'wagtail_react_streamfield',
'wagtail.documents',
'wagtail.images',
'wagtail.search',
Expand Down
1 change: 1 addition & 0 deletions coderedcms/project_template/sass/project_name/settings/base.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
'wagtail.sites',
'wagtail.users',
'wagtail.snippets',
'wagtail_react_streamfield',
'wagtail.documents',
'wagtail.images',
'wagtail.search',
Expand Down
1 change: 0 additions & 1 deletion coderedcms/templates/wagtailadmin/block_forms/base_block_settings_struct.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,3 @@
</ul>
</section>
</div>

4 changes: 3 additions & 1 deletion setup.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,9 @@
'wagtail==2.9.*',
'wagtailfontawesome>=1.2.*',
'wagtail-cache==1.*',
'wagtail-import-export>=0.2,<0.3'
'wagtail-import-export>=0.2,<0.3',
'wagtail-react-streamfield==1.3.6'

],
entry_points="""
[console_scripts]
Expand Down