Skip to content
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.

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

feat: Add option to disable editors #8

Merged
merged 3 commits into from
Nov 15, 2023
Merged

feat: Add option to disable editors #8

merged 3 commits into from
Nov 15, 2023

Conversation

rhystmills
Copy link
Collaborator

What does this change?

This adds support for a disabled prop to the RichTextEditor.

If the editor is disabled, it's styled differently, the editor content can't be changed, and the menu and keyboard shortcut plugins won't be initialised. The field will instead appear as uneditable text, showing a not-allowed cursor on hover.

This is useful in our apps, where a field will often be disabled if a user lacks edit permissions (for example in tagmanager).

The PR adds some styling hints that the field is disabled, which weren't there in the Scribe editor this replaces.

Disabled Scribe editor:

image

Disabled prosemirror-editor (not-allowed cursor state not visible):

image

Enabled prosemirror-editor:

image

How to test

This has been tested locally in tagmanager. If you wish to do the same:

  1. Publish this package locally using yarn yalc from the root of the project
  2. Use this branch of tagmanager locally.
  3. Add this package to tagmanager using yalc add @guardian/prosemirror-editor
  4. Run tagmanager with ./scripts/setup then ./scripts/start
  5. Ensure you have tag edit permissions in https://permissions.code.dev-gutools.co.uk/
  6. Wait a minute for them to apply. Then, In tagmanager, click an existing tag in the home page and try editing the text.
  7. Reverse your permissions in https://permissions.code.dev-gutools.co.uk/ and try editing the tag in Tagmanager again. Does the disabled field act as expected?

Copy link

changeset-bot bot commented Nov 14, 2023

🦋 Changeset detected

Latest commit: bdbe9bb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@guardian/prosemirror-editor Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Comment on lines +1 to +5
---
"@guardian/prosemirror-editor": minor
---

Add option to disable editors
Copy link
Contributor

Choose a reason for hiding this comment

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

Just to clarify I understand the release process, it looks from the documentation that this file gets generated automatically by running yarn changeset. Then the changesets GitHub Action will automatically open a release PR which I assume will convert the changeset info into a changelog? (example here)

Copy link
Collaborator Author

@rhystmills rhystmills Nov 15, 2023

Choose a reason for hiding this comment

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

Yes - I was prompted to run yarn changeset by Changeset Bot after my first commit, changesets said there wasn't a 'changeset' and this added one, which I added in a follow-up commit.

Copy link
Contributor

@samanthagottlieb samanthagottlieb left a comment

Choose a reason for hiding this comment

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

Have tested locally, revoking and re-granting myself Tagmanager CODE permission - looks good!

@rhystmills rhystmills merged commit daf6fd7 into main Nov 15, 2023
@rhystmills rhystmills deleted the rm/enable-disable branch November 15, 2023 12:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants