fix: unwrap images

jest.config.js

@@ -1,6 +1,11 @@
-const esModules = ['unist-util-visit', 'unist-util-select', 'mdast-util-to-string', 'unist-util-is', 'zwitch'].join(
-  '|',
-);
+const esModules = [
+  'unist-util-visit',
+  'unist-util-select',
+  'mdast-util-to-string',
+  'unist-util-is',
+  'zwitch',
+  'hast-util-whitespace',
+].join('|');
 
 module.exports = {
   preset: '@stoplight/scripts',

package.json

@@ -46,6 +46,7 @@
     "@stoplight/types": "^12.3.0",
     "@stoplight/yaml": "^4.2.2",
     "github-slugger": "^1.3.0",
+    "hast-util-whitespace": "^2.0.0",
     "lodash": "^4.17.21",
     "mdast-util-to-string": "^3.1.0",
     "remark-frontmatter": "^3.0.0",
@@ -58,31 +59,31 @@
     "unist-util-visit": "^3.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.2",
+    "@babel/core": "^7.14.3",
     "@babel/preset-env": "^7.14.2",
     "@babel/preset-typescript": "^7.13.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@stoplight/eslint-config": "^2.0.0",
     "@stoplight/scripts": "^9.0.1",
     "@types/hast": "^2.3.1",
     "@types/jest": "^26.0.23",
-    "@types/lodash": "^4.14.169",
+    "@types/lodash": "^4.14.170",
     "@types/unist": "^2.0.3",
-    "@typescript-eslint/eslint-plugin": "^4.23.0",
-    "@typescript-eslint/parser": "^4.23.0",
-    "eslint": "^7.26.0",
-    "eslint-plugin-import": "^2.22.1",
+    "@typescript-eslint/eslint-plugin": "^4.25.0",
+    "@typescript-eslint/parser": "^4.25.0",
+    "eslint": "^7.27.0",
+    "eslint-plugin-import": "^2.23.3",
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "glob-fs": "^0.1.7",
-    "jest": "^26.6.3",
+    "jest": "^27.0.1",
     "lodash": "^4.17.21",
     "prettier": "^2.3.0",
     "remark-html": "^13.0.1",
-    "ts-jest": "^26.5.6",
+    "ts-jest": "^27.0.0",
     "typescript": "^4.2.4"
   },
   "lint-staged": {

rollup.config.js

@@ -8,7 +8,7 @@ newConfig[0].external = [
   '@stoplight/yaml',
   'lodash',
 
-  // mdast-util-to-markdown is CJS, can stay
+  // these are CJS, can stay
   'mdast-util-to-markdown',
 ];
 newConfig[0].plugins.unshift(nodeResolve());

src/__tests__/getJsonPathForPosition.spec.ts

@@ -26,7 +26,7 @@ describe('getJsonPathForPosition', () => {
       ${4}  | ${2}      | ${['children', 2, 'children', 0, 'children', 0]}
       ${6}  | ${0}      | ${['children', 3]}
       ${7}  | ${6}      | ${['children', 3]}
-      ${10} | ${8}      | ${['children', 4, 'children', 0]}
+      ${10} | ${8}      | ${['children', 4]}
       ${18} | ${3}      | ${['children', 8]}
     `('should return proper json path for line $line and character $character', ({ line, character, path }) => {
       expect(getJsonPathForPosition(result, { line, character })).toEqual(path);

src/__tests__/getLocationForJsonPath.spec.ts

@@ -26,7 +26,7 @@ describe('getLocationForJsonPath', () => {
       ${[4, 0]}  | ${[4, 25]}  | ${['children', 2]}
       ${[4, 2]}  | ${[4, 25]}  | ${['children', 2, 'children', 0, 'children', 0]}
       ${[6, 0]}  | ${[8, 3]}   | ${['children', 3]}
-      ${[10, 0]} | ${[10, 29]} | ${['children', 4, 'children', 0]}
+      ${[10, 0]} | ${[10, 29]} | ${['children', 4]}
       ${[18, 0]} | ${[18, 3]}  | ${['children', 8]}
     `('should return proper location for given JSONPath $path', ({ start, end, path }) => {
       expect(getLocationForJsonPath(result, path)).toEqual({

src/ast-types/mdast.ts

@@ -174,6 +174,12 @@ export interface Link extends Parent, Resource {
 
 export interface Image extends Node, Resource, Alternative {
   type: 'image';
+
+  // custom
+  annotations?: {
+    bg?: string;
+    focus?: 'top' | 'bottom' | 'center' | 'top-right' | 'top-left';
+  };
 }
 
 export interface LinkReference extends Parent, Reference {

src/parse.ts

@@ -13,6 +13,7 @@ import {
   slug,
   smdAnnotations,
   smdCode,
+  unwrapImages,
 } from './plugins/run';
 import { replaceThirdPartyBlocks } from './replaceThirdPartyBlocks';
 
@@ -35,6 +36,7 @@ export const remarkParsePreset: unified.Preset<ParseSettings> = {
     [remarkFrontmatter, ['yaml']],
     remarkGFM,
     slug,
+    unwrapImages,
     smdAnnotations,
     smdCode,
     inlineCodeMdast2Hast,

src/plugins/run/__tests__/code.spec.ts

@@ -28,23 +28,12 @@ describe('code plugin', () => {
           <p>Starting paragraph.</p>
           <codegroup>
             <pre>
-              <code
-                class=\\"language-bash\\"
-                lang=\\"bash\\"
-                meta=\\"title=&#x22;title 1&#x22;\\"
-                title=\\"title 1\\"
-              >
+              <code class=\\"language-bash\\" lang=\\"bash\\" title=\\"title 1\\">
                 # my bash
               </code>
             </pre>
             <pre>
-              <code
-                class=\\"language-js\\"
-                lang=\\"js\\"
-                meta=\\"lineNumbers title=&#x22;title 2&#x22;\\"
-                title=\\"title 2\\"
-                lineNumbers=\\"true\\"
-              >
+              <code class=\\"language-js\\" lang=\\"js\\" title=\\"title 2\\" lineNumbers=\\"true\\">
                 var x = 'y';
               </code>
             </pre>
@@ -65,28 +54,22 @@ describe('code plugin', () => {
             <code
               class=\\"language-yaml\\"
               lang=\\"yaml\\"
-              meta=\\"title=&#x22;title 1&#x22;\\"
               title=\\"title 1\\"
               jsonSchema=\\"true\\"
+              type=\\"json_schema\\"
             >
               type: object
             </code>
           </pre>
           <p>With legacy json_schema snakecase tag in meta:</p>
           <pre>
-            <code
-              class=\\"language-json\\"
-              lang=\\"json\\"
-              meta=\\"json_schema title=&#x22;title 1&#x22;\\"
-              title=\\"title 1\\"
-              jsonSchema=\\"true\\"
-            >
+            <code class=\\"language-json\\" lang=\\"json\\" title=\\"title 1\\" jsonSchema=\\"true\\">
               type: object
             </code>
           </pre>
           <p>With legacy http annotation:</p>
           <pre>
-            <code class=\\"language-yaml\\" lang=\\"yaml\\" http=\\"true\\">
+            <code class=\\"language-yaml\\" lang=\\"yaml\\" http=\\"true\\" type=\\"http\\">
               method: get
             </code>
           </pre>

src/plugins/run/annotations.ts

@@ -187,6 +187,10 @@ function processNode(node: MDAST.Content, annotations?: object): MDAST.Content {
     return {
       ...node,
       annotations,
+      data: {
+        ...(node.data || {}),
+        hProperties: annotations,
+      },
     };
   }
 

src/plugins/run/code.ts

@@ -48,9 +48,8 @@ export const smdCode: unified.Attacher = function () {
       const data = node.data || (node.data = {});
       data.hProperties = {
         lang: node.lang,
-        meta: node.meta,
-        ...((data.hProperties as any) || {}),
         ...node.annotations,
+        ...((data.hProperties as any) || {}),
       };
 
       /**

src/plugins/run/index.ts

@@ -3,3 +3,4 @@ export * from './blockquote';
 export * from './code';
 export * from './resolver';
 export * from './slug';
+export * from './unwrap-images';

src/plugins/run/unwrap-images.ts

@@ -0,0 +1,55 @@
+// Pulled over from https://github.com/remarkjs/remark-unwrap-images because hasn't switched to esm yet
+
+import { whitespace } from 'hast-util-whitespace';
+import * as unified from 'unified';
+import { Parent } from 'unist';
+import { SKIP, visit } from 'unist-util-visit';
+
+export const unwrapImages: unified.Attacher = function () {
+  // Patch slugs on heading nodes.
+  return function transformer(tree) {
+    visit<Parent>(tree, 'paragraph', (node, index, parent) => {
+      if (!index) return;
+
+      if (applicable(node)) {
+        parent?.children.splice(index, 1, ...node.children);
+        return [SKIP, index];
+      }
+
+      return;
+    });
+  };
+};
+
+function applicable(node: Parent, inLink?: boolean): boolean | null {
+  let image: boolean | null = null;
+  let children = node.children;
+  let length = children.length;
+  let index = -1;
+  let child;
+  let linkResult;
+
+  while (++index < length) {
+    child = children[index];
+
+    if (whitespace(child)) {
+      // White space is fine.
+    } else if (child.type === 'image' || child.type === 'imageReference') {
+      image = true;
+    } else if (!inLink && (child.type === 'link' || child.type === 'linkReference')) {
+      linkResult = applicable(child as Parent, true);
+
+      if (linkResult === false) {
+        return false;
+      }
+
+      if (linkResult === true) {
+        image = true;
+      }
+    } else {
+      return false;
+    }
+  }
+
+  return image;
+}

src/plugins/stringify/code.ts

@@ -65,5 +65,6 @@ function computeMetaProps(annotations: object) {
     }
   }
 
-  return metaProps;
+  // remove duplicate values
+  return [...new Set(metaProps)];
 }