The Rich Text Editor DOES NOT support read only.

[markadrake]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

13.5.2

Bug summary

• I have a property, it is a rich text editor.
• The configuration of this rich text editor is irrelvant.
• The frontend configuration says that this editor supports "readonly".
• When I set it to readonly, I get unexpected behavior:
  1. The UI still allows edits.
  2. A save will replace the markup with new text: "Umbraco.Cms.Core.RichTextEditorValue"

Specifics

No response

Steps to reproduce

All you need to do is set readonly to true on any rich text editor property.

Because the property supportsReadOnly is true already, I expected to toggle readonly and for this to just work.

Expected result / actual result

Actual Result	Expected Result
The UI did not change. Editors can still interact by mouse and keyboard.	UI Should prevent mouse and keyboard access to the editor.
When you save the page, content in the RTE is replaced.	When you save the page, the content should not change.

[github-actions[bot]]

Hi there @markadrake!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

• We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
• If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
• We'll replicate the issue to ensure that the problem is as described.
• We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[NguyenThuyLan]

Is there any reason you want a readonly rich text editor? Why don't you use the Label property editor?
@markadrake

[markadrake]

@NguyenThuyLan

Yes. Thanks for responding.

The content only becomes read-only after publishing. The content should not change after publication, as it is a record of something that has happened. Think if you write a social media post, an email, or a note in a CRM system.

I want to restate that the property editor configuration (today) implies that read only is supported when it is not. I believe this should be updated to "false" so people are aware.

While we will need to hack around this today, it would be ideal if all property editors had a read only option and could be toggled either by 1st-party code (worst case) or through conditional arguments (best case). (Umbraco 10/13/15)

Please let me know what the team decides and if they want to review a PR to enable read-only status on the current RTE. (Umbraco 10/13)

[bjarnef]

I haven't checked the specific richtext editor, but I have had a use-case on a project where we hooked into SendingContentNotification https://docs.umbraco.com/umbraco-cms/13.latest/reference/notifications/editormodel-notifications and for specific use-groups (mainly non-admin users) modified model, setting Readonly property, so content editors could still see the content on the properties, but they are not able to modify the data.
We didn't use richtext editor here though, but textstring, textarea, toggle and MNTP.

public class EditorSendingContentNotificationHandler : INotificationHandler<SendingContentNotification>
{
	private const string _tabCourseData = "courseData";
	private const string _tabSecretariats = "secretariats";

	private readonly IBackOfficeSecurityAccessor _backOfficeSecurity;
	private readonly IPublishedContentQuery _publishedContentQuery;
	private readonly IPublishedSnapshotAccessor _publishedSnapshotAccessor;

	public EditorSendingContentNotificationHandler(
		IBackOfficeSecurityAccessor backOfficeSecurity,
		IPublishedContentQuery publishedContentQuery,
		IPublishedSnapshotAccessor publishedSnapshotAccessor)
	{
		_backOfficeSecurity = backOfficeSecurity;
		_publishedContentQuery = publishedContentQuery;
		_publishedSnapshotAccessor = publishedSnapshotAccessor;
	}

	public void Handle(SendingContentNotification notification)
	{
		if (!notification.Content.ContentTypeAlias.Equals(Business.ModelTypeAlias) &&
			!notification.Content.ContentTypeAlias.Equals(Course.ModelTypeAlias) &&
			!notification.Content.ContentTypeAlias.Equals(CourseArchive.ModelTypeAlias))
		{
			return;
		}

		if (notification.Content.ContentTypeAlias.Equals(CourseArchive.ModelTypeAlias))
		{
			// Hide default listview content app.
			notification.Content.ContentApps = notification.Content.ContentApps.Where(x => x.Alias != "umbListView");
		}

		var currentUser = _backOfficeSecurity?.BackOfficeSecurity?.CurrentUser;
		if (currentUser == null)
			return;

		var userGroupAliasses = currentUser!.Groups.Select(userGroup => userGroup.Alias).ToList();

		// Skip if user is admin.
		if (userGroupAliasses.Any(alias => alias.Equals(Umbraco.Cms.Core.Constants.Security.AdminGroupAlias)))
		{
			return;
		}

		if (notification.Content.ContentTypeAlias.Equals(Business.ModelTypeAlias))
		{
			var tabAliases = notification.Content.Variants.First().Tabs
					.Where(x => x.Alias == _tabSecretariats)
					.Select(x => x.Alias)
					.WhereNotNull()
					.ToList();

			HideTabs(notification.Content, tabAliases);
		}

		if (notification.Content.ContentTypeAlias.Equals(Course.ModelTypeAlias))
		{
			if (currentUser?.Groups == null || currentUser?.StartContentIds.HasAny() == false)
				return;

			var businesses = _publishedContentQuery.Content(currentUser!.StartContentIds!).OfType<Business>();
			if (!businesses.HasAny())
				return;

			var secretariats = businesses
				?.SelectMany(x => x.Secretariats ?? Enumerable.Empty<IPublishedContent>())
				.OfType<Secretariat>()
				.DistinctBy(x => x.Id);

			if (!secretariats.HasAny())
				return;

			var committees = secretariats
				.SelectMany(x => x.Committees ?? Enumerable.Empty<IPublishedContent>())
				.OfType<Committee>()
				.DistinctBy(x => x.Id);

			if (!committees.HasAny())
				return;

			var fkbList = Enumerable.Empty<GuidUdi>();

			List<string> readOnlyProperties = new();

			foreach (var tab in notification.Content.Variants.First().Tabs)
			{
				var prop = tab.Properties?.FirstOrDefault(x => x.Alias == Course.GetModelPropertyType(_publishedSnapshotAccessor!, x => x.Fkb!)?.Alias!);

				if (prop == null)
					continue;

				readOnlyProperties.Add(prop.Alias);

				fkbList = prop.Value?.ToString()
					?.Split(",", StringSplitOptions.RemoveEmptyEntries)
					.Select(x => UdiParser.Parse(x) as GuidUdi)!;
			}

			bool found = false;

			if (fkbList.HasAny())
			{
				foreach (Committee committee in committees)
				{
					if (fkbList.Any(x => committee.FkbList?.Any(y => y.Key == x.Guid) == true))
					{
						found = true;
						break;
					}
				}
			}

			// Hide tabs/properties depending on user access.
			if (!found)
			{
				var tabAliases = notification.Content.Variants.First().Tabs
					.Where(x => x.Alias != _tabCourseData)
					.Select(x => x.Alias)
					.WhereNotNull()
					.ToList();

				ReadOnlyProperties(notification.Content, readOnlyProperties);

				HideTabs(notification.Content, tabAliases);

				HideActions(notification.Content,
				[
					$"{ActionUpdate.ActionLetter}",
					$"{ActionUnpublish.ActionLetter}",
					$"{ActionPublish.ActionLetter}",
					$"{ActionRollback.ActionLetter}",
					$"{ActionDelete.ActionLetter}"
				]);
			}
		}
	}

	private static void ReadOnlyProperties(ContentItemDisplay contentItemDisplay, List<string> propertyAliases)
	{
		if (propertyAliases.Any())
		{
			foreach (var tab in contentItemDisplay.Variants.First().Tabs)
			{
				List<ContentPropertyDisplay> properties = new();

				foreach (var prop in tab.Properties!)
				{
					if (propertyAliases.Contains(prop.Alias))
					{
						prop.Readonly = true;
						//prop.Editor = "Umbraco.Label";
						//prop.View = "readonlyvalue";
					}

					properties.Add(prop);
				}

				tab.Properties = properties;
			}
		}
	}

	private static void HideActions(ContentItemDisplay contentItemDisplay, string[] actions)
	{
		contentItemDisplay.AllowedActions = contentItemDisplay.AllowedActions?.Where(x => !actions.Contains(x));
	}

	private static void HideTabs(ContentItemDisplay contentItemDisplay, List<string> tabAliases)
	{
		if (tabAliases.Any())
		{
			contentItemDisplay.Variants.First().Tabs = contentItemDisplay.Variants.First().Tabs.Where(tab => !tabAliases.Contains(tab.Alias!) && tab.Properties.HasAny());
		}
	}

	private static void HideProperties(ContentItemDisplay contentItemDisplay, List<string> propertyAliases)
	{
		if (propertyAliases.Any())
		{
			foreach (var tab in contentItemDisplay.Variants.First().Tabs)
			{
				tab.Properties = tab.Properties?.Where(property => !propertyAliases.Contains(property.Alias));
			}
		}
	}

	private static void HideEmptyTabs(ContentItemDisplay contentItemDisplay)
	{
		contentItemDisplay.Variants.First().Tabs = contentItemDisplay.Variants.First().Tabs.Where(tab => tab.Properties.HasAny());
	}
}

[markadrake]

Thank you so much for sharing this code @bjarnef! This keeps us from a crazy client-side approach! :)

[bjarnef]

It sets the property to 1 here:
https://github.com/umbraco/Umbraco-CMS/blob/v13/dev/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.component.js#L279

but when I check some Codepen demos and docs https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#readonly the value should be true or false, not 1 or 0.

[bielu]

@bjarnef shouldn't this code be only affected in v14, based on git tags?

[bjarnef]

Why? The linked commit and PR is based on Angular and included in v10.2+

The tag for v14 is probably because most server side changed in the PR is included in v14 as well, but not the client side (Angular) part.

[bjarnef]

In v14 the TinyMCE is readonly based on readonly attribute on <umb-input-tiny-mce>:

Umbraco-CMS/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.element.ts

Line 55 in 9056851

?readonly=${this.readonly}>

The stories doesn't cover this though.
https://apidocs.umbraco.com/v15/ui/?path=/story/umb-property-editor-ui-tiny-mce--default-config
https://github.com/umbraco/Umbraco-CMS/blob/9056851eedd7dc09108682f8600e6b17ca59cebb/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/tiny-mce/property-editor-ui-tiny-mce.stories.ts

@iOvergaard @nielslyngsoe I think it is important we cover stories for readonly and disabled state, but in general different settings/configurations of components.

[bielu]

My bad didn't look into pr just commit which shown tag, fair and you right

[bjarnef]

Fixed in #17551

[iOvergaard]

Based on this discussion, @bjarnef discovered that it was, in fact, a bug. I have, therefore, created issue #17561, which has been resolved with PR #17551.