feat(helpers): support attribute shorthand for map serializer

[lihbr]

Types of changes

• Chore (a non-breaking change which is related to package maintenance)
• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

This PR allows asHTML to be configured with a class shorthand for individual tags. It saves developer keystrokes by removing boilerplate in the common case of applying a classname to the default block element.

asHTML(field, {
	serializer: {
		heading1: { class: "text-4xl uppercase" },
		heading2: { class: "text-2xl" },
		strong: { class: "font-bold" },
	}
});

The above serializer value is equivalent to the following:

asHTML(field, {
	serializer: {
		heading1: ({ children }) => `<h1 class="text-4xl uppercase">${children}</h1>`,
		heading2: ({ children }) => `<h2 class="text-2xl">${children}</h2>`,
		strong: ({ children }) => `<strong class="font-bold">${children}</strong>`,
	}
});

The shorthand and existing inline serializer syntax can coincide in the serializer prop.

asHTML(field, {
	serializer: {
		heading1: { class: "text-4xl uppercase" },
		heading2: ({ children }) => `<h2 class="text-2xl">${children}</h2>`,
	}
});

Attributes other than class are supported too.

asHTML(field, {
	serializer: {
		heading1: { class: "text-4xl uppercase", "data-foo": "bar", "data-heading": true },
	}
});

// `<h1 class="text-4xl uppercase" data-foo="bar" data-heading>...</h1>`

Checklist:

• My change requires an update to the official documentation.
• All TSDoc comments are up-to-date and new ones have been added where necessary.
• All new and existing tests are passing.

[codecov-commenter]

Codecov Report

All modified lines are covered by tests ✅

Comparison is base (1e22703) 99.96% compared to head (52ad75d) 99.96%.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@           Coverage Diff            @@
##           master     #321    +/-   ##
========================================
  Coverage   99.96%   99.96%            
========================================
  Files          50       50            
  Lines        6087     6251   +164     
  Branches      301      332    +31     
========================================
+ Hits         6085     6249   +164     
  Misses          2        2            

Files	Coverage Δ
src/helpers/asHTML.ts	100.00% <100.00%> (ø)
src/lib/serializerHelpers.ts	100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[angeloashmore]

Looks really great to me! I left a couple of small comments.

Do you have any ideas on how we could share shorthand logic between rich text renderers? Maybe a set of helpers that could be exported from @prismicio/client/richtext? I don't think we would want to build the shorthand functionality into the low-level rich text functions like serialize().

[angeloashmore]

Do you think we should escape value in case it contains "?

[lihbr]

Maybe! I'll run some test to check if we can put it there

[lihbr]

Done :)