feat: disable img attributes copy to figure element (#167)

- resolves #151
vivliostyle · Mar 9, 2023 · 78ea9bf · 78ea9bf
1 parent 22de4b3
commit 78ea9bf
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 58 deletions.
diff --git a/docs/ja/vfm.md b/docs/ja/vfm.md
@@ -378,8 +378,6 @@ img {
 
 単一行で書かれた画像はキャプション付きで `<figure>` 内へ包み込みます。
 
-画像の属性を指定した場合、`id` は `<figure>` へ移動され ` <img>` 固有のもの (`src` など) を除いたすべてがコピーされます。
-
 **VFM**
 
 ```md
@@ -394,14 +392,16 @@ text ![Figure 3](./fig3.png)
 
 ```html
 <figure>
-  <img src="./fig1.png" alt="Figure 1" />
-  <figcaption>Figure 1</figcaption>
+  <img src="./fig1.png" alt="Figure 1">
+  <figcaption aria-hidden="true">Figure 1</figcaption>
 </figure>
-<figure id="image" title="Figure 2" data-sample="sample">
-  <img src="./fig2.png" alt="caption" title="Figure 2" data-sample="sample">
-  <figcaption>Figure 2</figcaption>
+<figure>
+  <img src="./fig2.png" alt="Figure 2" title="Figure 2" id="image" data-sample="sample">
+  <figcaption aria-hidden="true">Figure 2</figcaption>
 </figure>
-<p>text <img src="./fig3.png" alt="Figure 3"></p>
+<p>text 
+  <img src="./fig3.png" alt="Figure 3">
+</p>
 ```
 
 **CSS**

diff --git a/docs/vfm.md b/docs/vfm.md
@@ -379,8 +379,6 @@ img {
 
 Wraps an image written as a single line and with a caption in `<figure>`.
 
-If specify attributes for the image, the `id` is moved to `<figure>` and everything else is copied except for` <img> `specific (such as `src`).
-
 **VFM**
 
 ```md
@@ -395,14 +393,16 @@ text ![Figure 3](./fig3.png)
 
 ```html
 <figure>
-  <img src="./fig1.png" alt="Figure 1" />
-  <figcaption>Figure 1</figcaption>
+  <img src="./fig1.png" alt="Figure 1">
+  <figcaption aria-hidden="true">Figure 1</figcaption>
 </figure>
-<figure id="image" title="Figure 2" data-sample="sample">
-  <img src="./fig2.png" alt="caption" title="Figure 2" data-sample="sample">
-  <figcaption>Figure 2</figcaption>
+<figure>
+  <img src="./fig2.png" alt="Figure 2" title="Figure 2" id="image" data-sample="sample">
+  <figcaption aria-hidden="true">Figure 2</figcaption>
 </figure>
-<p>text <img src="./fig3.png" alt="Figure 3"></p>
+<p>text 
+  <img src="./fig3.png" alt="Figure 3">
+</p>
 ```
 
 **CSS**

diff --git a/src/plugins/figure.ts b/src/plugins/figure.ts
@@ -4,39 +4,10 @@ import h from 'hastscript';
 import { Node, Parent } from 'unist';
 import visit from 'unist-util-visit';
 
-/**
- * Check if the specified property is `<img>` specific.
- * @see https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element
- * @param name Property name.
- * @returns If the specified property is `true`.
- */
-const isImgProperty = (name: string): boolean => {
-  switch (name) {
-    case 'alt':
-    case 'src':
-    case 'srcset':
-    case 'sizes':
-    case 'crossorigin':
-    case 'usemap':
-    case 'ismap':
-    case 'width':
-    case 'height':
-    case 'referrerpolicy':
-    case 'decoding':
-    case 'loading':
-      return true;
-
-    default:
-      return false;
-  }
-};
-
 /**
  * Wrap the single line `<img>` in `<figure>` and generate `<figcaption>` from the `alt` attribute.
  *
  * A single line `<img>` is a child of `<p>` with no sibling elements. Also, `<figure>` cannot be a child of `<p>`. So convert the parent `<p>` to `<figure>`.
- *
- * Also, of the attributes of `<img>`,` id` is moved to `<figure>`, and the others are copied except for `<img>` specific (such as `src`).
  * @param img `<img>` tag.
  * @param parent `<p>` tag.
  */
@@ -49,18 +20,6 @@ const wrapFigureImg = (img: Element, parent: Element) => {
   parent.children.push(
     h('figcaption', { 'aria-hidden': 'true' }, [img.properties.alt]),
   );
-
-  // Move to parent because `id` attribute is unique
-  if (img.properties.id) {
-    parent.properties.id = img.properties.id;
-    delete img.properties.id;
-  }
-
-  for (const key of Object.keys(img.properties)) {
-    if (!isImgProperty(key)) {
-      parent.properties[key] = img.properties[key];
-    }
-  }
 };
 
 export const hast = () => (tree: Node) => {

diff --git a/tests/figure.test.ts b/tests/figure.test.ts
@@ -75,6 +75,6 @@ it(
               alt: "caption"
               data: {"hProperties":{"id":"image","data-sample":"sample"}}
     `,
-    `<figure id="image" title="title" data-sample="sample"><img src="./img.png" alt="caption" title="title" data-sample="sample"><figcaption aria-hidden="true">caption</figcaption></figure>`,
+    `<figure><img src="./img.png" alt="caption" title="title" id="image" data-sample="sample"><figcaption aria-hidden="true">caption</figcaption></figure>`,
   ),
 );