Quill editor settings being overridden by defaults due _.merge

[rohanrichards]

formio.js/src/components/_classes/component/Component.js

Line 2209 in 6366853

settings = _.merge(this.wysiwygDefault.quill, _.get(this.options, 'editors.quill.settings', {}), settings);

As seen at the above line, a call to merge is used to place user settings over the top of the defaults, but in the case of Quill these settings are nested arrays and merging the two results in duplications/replacements where they are not wanted.

Example, a custom wysiwyg component with quill as the editor :

{
	weight: 0,
	type: 'textarea',
	editor: 'quill',
	wysiwyg: {
		modules: {
			toolbar: [
				[{ 'size': ['small', false, 'large', 'huge'] }]
			]
		}
	},
	label: 'Content',
	hideLabel: true,
	input: true,
	key: 'html',
	as: 'html',
	rows: 3,
	tooltip: 'The HTML template for the result data items.'

The above will result in the custom dropdown "size" being visible, as well as all of the defaults rather than the expected setup of the single specified toolbar item being visible. As seen in the below screenshot:

[daneformio]

Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!

[Abdulllah]

@daneformio It's still relevant. I'd really appreciate it if you could re-open the issue and take another look.

[lane-formio]

@Abdulllah @rohanrichards
Can you tell us what version you are using?
The latest official version is 4.21.0, is it reproducible there?

[rohanrichards]

I'm not longer working on the project where this was relevant so I can not give any more information, sorry.

[Abdulllah]

@lane-formio I'm on version 4.14.9, but the merge logic is the same in version 4.21.0, so I think you can easily reproduce it there as well.

A side note: The result in this example is not what we would expect from the provided custom configuration:

      wysiwyg: {
        theme: 'snow',
        modules: {
          toolbar: ['bold', 'italic', 'underline', 'strike']
        }
      }

[lane-formio]

I've created a sandbox here.
Can you try loading the following id: 669ffe99c9b5abd4704c6163

Is this the expected behavior?

[Abdulllah]

@lane-formio Yes, the merge behavior in the sandbox is what we would expect from this configuration:

  wysiwyg: {
    theme: 'snow',
    modules: {
      toolbar: ['bold', 'italic', 'underline', 'strike']
    }
  }

[lane-formio]

It seems something is wrong/inaccurate on the example page. I'll get something on the backlog to investigate the example page but it looks to behaving as expected in practice so it will likely be very low in priority.

Please let me know if it seems I've misunderstood anything.

[jeriah-formio]

FIO-8738