CIMTextSymbol display error

[MinhHoangf]

I'm using ArcGIS js sdk to display map, allow user to write text and edit it's properties (font name, font size, color,...).

I'm using FeatureLayer with CIMTextSymbol to display text, use visualVariables to make it scales when user zoom in/out.

But when font size is large (~40), or when zoom in, text becomes blurry and disappear some pieces, and with long text, it auto create new line, and I cannot find something like "lineWidth" or "textWrap" property. I tried normal TextSymbol but it gives same result. I'm using Js SDK v4.38.

Does it error and how to fix it? And what is the best way to display and edit text in arcgis js sdk? Thank you very much.

Here is my symbol code:

this.cimSymbol = new CIMSymbol({
	data: {
		type: 'CIMSymbolReference',
		primitiveOverrides: [
			{
				type: 'CIMPrimitiveOverride',
				primitiveName: 'textStringOverride',
				propertyName: 'TextString',
				valueExpressionInfo: {
					type: 'CIMExpressionInfo',
					returnType: 'Default',
					expression: '$feature.TextString'
				}
			}
		],
		symbol: {
			type: 'CIMPointSymbol',
			symbolLayers: [
				{
					type: 'CIMVectorMarker',
					enable: true,
					anchorPointUnits: 'Relative',
					size: 40,
					anchorPoint: {
						x: 0,
						y: 0
					},
					frame: { xmin: -5, xmax: 5, ymin: -5, ymax: 5 },
					markerGraphics: [
						{
							type: 'CIMMarkerGraphic',
							primitiveName: 'textStringOverride',
							geometry: { x: 0, y: 0 },
							symbol: {
								type: 'CIMTextSymbol',
								fontFamilyName: 'Arial',
								fontStyleName: 'Regular',
								height: 40,
								horizontalAlignment: 'Center',
								verticalAlignment: 'Center',
								haloSize: 1,
								angle: 0,
								underline: false,
								symbol: {
									type: "CIMPolygonSymbol",
									symbolLayers: [
										{
											type: "CIMSolidFill",
											enable: true,
											color: [0,0,0,255]
										}
									],
								},
							}
						}
					]
				}
			]
		}
	}
});

And here is my feature layer:

var renderer = new UniqueValueRenderer({
	field: Map2DParams.RenderField,
	defaultSymbol: {
		type: 'text',
		text: '1',
		color: [0, 0, 0, 255],
		font: {
			family: 'Arial',
			style: 'normal',
		},
		horizontalAlignment: 'center',
		verticalAlignment: 'middle',
	},
	visualVariables: [
		new SizeVariable({
			field: 'FontSize',
			valueUnit: 'kilometers',
			valueExpression: `return $feature.FontSize;`,
		})
	]
})
lineLayer = new FeatureLayer({
	id: 'Text_' + mapId,
	source: [],
	fields: Map2DParams.textFields,
	geometryType: 'point',
	objectIdField: 'ObjectID',
	spatialReference: new SpatialReference({ wkid: wkid }),
	renderer: renderer,
});