Refactor use of wrapInElement (#37675)

lib/render-content/create-processor.js

@@ -20,16 +20,10 @@ import rewriteLocalLinks from './plugins/rewrite-local-links.js'
 import rewriteImgSources from './plugins/rewrite-asset-urls.js'
 import rewriteAssetImgTags from './plugins/rewrite-asset-img-tags.js'
 import useEnglishHeadings from './plugins/use-english-headings.js'
-import wrapInElement from './plugins/wrap-in-element.js'
 import headingLinks from './plugins/heading-links.js'
 import rewriteTheadThScope from './plugins/rewrite-thead-th-scope.js'
 import rewriteForRowheaders from './plugins/rewrite-for-rowheaders.js'
-
-// plugins aren't designed to be used more than once,
-// this workaround lets us do that
-// see https://github.com/unifiedjs/unified/issues/79
-const wrapperForImages = () =>
-  wrapInElement({ selector: 'ol > li img', wrapper: 'span.procedural-image-wrapper' })
+import wrapProceduralImages from './plugins/wrap-procedural-images.js'
 
 export default function createProcessor(context) {
   return unified()
@@ -46,7 +40,7 @@ export default function createProcessor(context) {
       subset: false,
     })
     .use(raw)
-    .use(wrapperForImages)
+    .use(wrapProceduralImages)
     .use(rewriteTheadThScope)
     .use(rewriteForRowheaders)
     .use(rewriteImgSources)