[IMPLEMENTED] Using custom editor for components array

Feature Requests Implemented Features
1

Hello,
I’m trying to use a custom editor to show/edit all components arrays combined.
I’m not sure whether this is a bug or it’s just not supported but any help would be much appreciated!

Current behavior

  1. Created a component “c1” with one field only (String-TextArea).

  2. Created a schema “s1” and added Components field (the array) to it, and edited the schemas input on the validation tab to be “c1”.

  3. Added an item based on “s1” schema, I can see my empty components array and “Add Component” button. I’ve added 2 items to the Components array (e.g. “MyString1” and “MyString2”).

    image
    image1345×816 21.5 KB

  4. Edited the Components field in “s1” schema to use Custom Editor url (e.g. https://cloud.squidex.io/scripts/editor-combined.html).

  5. If you navigated back to the content to check the new editor, you will be able to see it and see our 2 items as [object Object],[object Object] which is fine (I’ve created my own editor and displayed MyString1,MyString2), but you will see an error in the console ERROR TypeError: e.registerOnChange is not a function (First error).

    image
    image957×475 25.2 KB

  6. The second issue is, if I manually added a 3rd item to the editor (so the editor will have this: MyString1,MyString2,MyString3) and called field.valueChanged(newValue); I get an error Error: cannot find form control at index because the new item wasn’t added by using the original Add Component button as it doesn’t exist any more after using the custom editor. Is there a way using the sdk to programmatically call the function that is called when we click on Add Component button in order to create controls for the new items and add them to the controls array?
    I’ve tried to add the new items to the components array, but obviously it didn’t add the controls.
    e.g. newValue.Components.iv.push({Body: "MyString3", schemaId: '2395deb8-3587-4f24-8c12-e9339e7b3abc'})
    and I got this error

    image
    image1403×348 34.4 KB

Thanks very much in advance.

2

Thx, I have never tried it. Can you give me your example editor?

I am not sure, if it is technical possible with the Angular forms concept.

3

Thanks for the reply.
You can replicate the first error using any custom editor.
e.g. (https://cloud.squidex.io/scripts/editor-context.html, or https://cloud.squidex.io/scripts/editor-combined.html)

Sorry, I don’t have my editor hosted as it’s testing code but here is it:

<html>
<head>
    <meta charset="utf-8">
	<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script src="https://cloud.squidex.io/scripts/editor-sdk.js"></script>
</head>

<body style="margin: 0px; padding: 0px;">
	<textarea name="content" id="editor"></textarea>
	<button id="saveCustomEditorBtn">Save</button>
	<script>
		var element = document.getElementById('editor');
		var field = new SquidexFormField();
		
		field.onValueChanged(function (value) {
			element.value = value || '';
		});

		field.onDisabled(function (disabled) {
			element.disabled = disabled;
		});

		field.onFormValueChanged(function(value) {
			element.value = '';
			for(var obj of value.Components.iv){
				element.value +=  obj.Body + ',';
			}
			
			// remove last comma and any spaces after it
			element.value = element.value.replace(/,\s*$/, "")
		});
		
		$("#saveCustomEditorBtn").click(function(){
		var editorTextValue = element.value;
		var EditorValueMainObj = JSON.parse('{"test":{"iv":null},"testhidden":{"iv":null},"Components":{"iv":[]}}');

		const mySegmentsBodies = editorTextValue.split(",");

		mySegmentsBodies.forEach(function(x){
			EditorValueMainObj.Components.iv.push({Body: x, schemaId: '2395deb8-3587-4f24-8c12-e9339e7b3abc'})
		});
		
		field.valueChanged(EditorValueMainObj);
		});		
    </script>
</body>
</html>
4

Hi,

I have reworked the content forms to make your scenario possible.

You can try docker-tag dev-6491

5

Hi Sebastian,
Thanks very much for working on this.
I’ve tried squidex/squidex:dev-6491 but unfortunately it is still not working.
When the custom editor loads, I’m getting the same old error:
image

If I tried to add a new value and call field.valueChanged(newValue); I get the following error:
image

6

Hi,

the first error is expected, but it should not matter and I cannot change it, but I can have a look to the other error.

7

Btw: I tested it with this editor: https://github.com/Squidex/squidex/blob/master/backend/src/Squidex/wwwroot/scripts/editor-plain.html

9

Hi Sebastian,
I used the editor you posted with docker-tag dev-6491 and I can confirm that it works perfectly. Thanks very much!

10

Thanks, but I actually found more issues. The latest tag should work better: dev-6509

1 Like
11

Sorry Sebastian, will this be merged to master soon? (e.g. in order to be able to use the latest docker tag).
Also I can’t find the code changes branch which dev-6509 is based on, would you mind sharing it please? Thanks in advance.

12

It is in the master branch already, but there is no release yet.

1 Like
13

Oh my bad, thank you!

14

This topic was automatically closed after 2 days. New replies are no longer allowed.