angular: fix i18n attr with @@ (#7371)

* angular: fix i18n attr with @@

* changelog

changelog_unreleased/angular/pr-7371.md

@@ -0,0 +1,29 @@
+#### Fix formatting i18n attributes ([#7371](https://github.com/prettier/prettier/pull/7371) by [@thorn0](https://github.com/thorn0))
+
+Prettier 1.19 [added](https://prettier.io/blog/2019/11/09/1.19.0.html#add-formatting-for-i18n-attributes-6695-by-voithos)
+support for formatting [i18n attributes](https://angular.io/guide/i18n), but putting the closing quote mark on a new line
+broke [custom ids](https://angular.io/guide/i18n#set-a-custom-id-for-persistence-and-maintenance). This is fixed now.
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<div i18n-prop="Special-property|This is a special property with much important information@@MyTextId"
+prop="My Text"></div>
+
+<!-- Prettier stable -->
+<div
+  i18n-prop="
+    Special-property|This is a special property with much important
+    information@@MyTextId
+  "
+  prop="My Text"
+></div>
+
+<!-- Prettier master -->
+<div
+  i18n-prop="
+    Special-property|This is a special property with much important
+    information@@MyTextId"
+  prop="My Text"
+></div>
+```

src/language-html/printer-html.js

@@ -948,8 +948,13 @@ function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
   };
 
   const printHug = doc => group(doc);
-  const printExpand = doc =>
-    group(concat([indent(concat([softline, doc])), softline]));
+  const printExpand = (doc, canHaveTrailingWhitespace = true) =>
+    group(
+      concat([
+        indent(concat([softline, doc])),
+        canHaveTrailingWhitespace ? softline : ""
+      ])
+    );
   const printMaybeHug = doc => (shouldHug ? printHug(doc) : printExpand(doc));
 
   const textToDoc = (code, opts) =>
@@ -1048,7 +1053,11 @@ function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
     }
 
     if (isKeyMatched(ngI18nPatterns)) {
-      return printExpand(fill(getTextValueParts(node, getValue())));
+      const value = getValue().trim();
+      return printExpand(
+        fill(getTextValueParts(node, value)),
+        !value.includes("@@")
+      );
     }
 
     if (isKeyMatched(ngDirectiveBindingPatterns)) {

tests/html_angular/__snapshots__/jsfmt.spec.js.snap

@@ -340,8 +340,7 @@ printWidth: 80
   i18n="some meaning|Some description@@customIdWithDescription"
   i18n="
     some meaning|Some very long internationalization description text exceeding
-    the configured print width@@customIdWithDescription
-  "
+    the configured print width@@customIdWithDescription"
 ></div>
 
 ================================================================================
@@ -612,8 +611,7 @@ trailingComma: "es5"
   i18n="some meaning|Some description@@customIdWithDescription"
   i18n="
     some meaning|Some very long internationalization description text exceeding
-    the configured print width@@customIdWithDescription
-  "
+    the configured print width@@customIdWithDescription"
 ></div>
 
 ================================================================================
@@ -1192,17 +1190,14 @@ printWidth: 1
     formatted
   "
   i18n="
-    @@customId
-  "
+    @@customId"
   i18n="
     Some
-    description@@customIdWithDescription
-  "
+    description@@customIdWithDescription"
   i18n="
     some
     meaning|Some
-    description@@customIdWithDescription
-  "
+    description@@customIdWithDescription"
   i18n="
     some
     meaning|Some
@@ -1215,8 +1210,7 @@ printWidth: 1
     the
     configured
     print
-    width@@customIdWithDescription
-  "
+    width@@customIdWithDescription"
 ></div>
 
 ================================================================================
@@ -1487,8 +1481,7 @@ printWidth: 80
   i18n="some meaning|Some description@@customIdWithDescription"
   i18n="
     some meaning|Some very long internationalization description text exceeding
-    the configured print width@@customIdWithDescription
-  "
+    the configured print width@@customIdWithDescription"
 ></div>
 
 ================================================================================
@@ -1759,8 +1752,7 @@ printWidth: 80
   i18n="some meaning|Some description@@customIdWithDescription"
   i18n="
     some meaning|Some very long internationalization description text exceeding
-    the configured print width@@customIdWithDescription
-  "
+    the configured print width@@customIdWithDescription"
 ></div>
 
 ================================================================================