diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index b6659f1384b8..d0ba2f0b61a6 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -107,7 +107,7 @@ function embed(path, print, textToDoc, options) {
// lit-html: html``
if (
- /^PRETTIER_PLACEHOLDER_\d+$/.test(
+ /^PRETTIER_HTML_PLACEHOLDER_\d+_IN_JS$/.test(
options.originalText.slice(
node.valueSpan.start.offset,
node.valueSpan.end.offset
@@ -1017,6 +1017,38 @@ function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
ngTextToDoc(getValue(), { parser: "__ng_directive" })
);
}
+
+ const interpolationRegex = /\{\{([\s\S]+?)\}\}/g;
+ const value = getValue();
+ if (interpolationRegex.test(value)) {
+ const parts = [];
+ value.split(interpolationRegex).forEach((part, index) => {
+ if (index % 2 === 0) {
+ parts.push(concat(replaceNewlines(part, literalline)));
+ } else {
+ try {
+ parts.push(
+ group(
+ concat([
+ "{{",
+ indent(
+ concat([
+ line,
+ ngTextToDoc(part, { parser: "__ng_interpolation" })
+ ])
+ ),
+ line,
+ "}}"
+ ])
+ )
+ );
+ } catch (e) {
+ parts.push("{{", concat(replaceNewlines(part, literalline)), "}}");
+ }
+ }
+ });
+ return group(concat(parts));
+ }
}
return null;
diff --git a/src/language-js/embed.js b/src/language-js/embed.js
index 975cdb1cf182..26b4186e1eef 100644
--- a/src/language-js/embed.js
+++ b/src/language-js/embed.js
@@ -567,9 +567,9 @@ function isHtml(path) {
function printHtmlTemplateLiteral(path, print, textToDoc, parser) {
const node = path.getValue();
- const placeholderPattern = "PRETTIER_PLACEHOLDER_(\\d+)";
+ const placeholderPattern = "PRETTIER_HTML_PLACEHOLDER_(\\d+)_IN_JS";
const placeholders = node.expressions.map(
- (_, i) => `PRETTIER_PLACEHOLDER_${i}`
+ (_, i) => `PRETTIER_HTML_PLACEHOLDER_${i}_IN_JS`
);
const text = node.quasis
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 5f08ee7f9821..de9d3daa06d5 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -153,6 +153,18 @@ printWidth: 80
'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER}"
[stickout]="+toolAssembly.stickoutMm"
+ test='{{ "test" | translate }}'
+ test='foo {{ invalid invalid }} bar {{ valid }} baz'
+ test='foo
+
+ {{ invalid
+ invalid }}
+
+ bar
+
+ {{ valid }}
+
+ baz'
>
=====================================output=====================================
@@ -265,6 +277,18 @@ printWidth: 80
'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER
}"
[stickout]="+toolAssembly.stickoutMm"
+ test="{{ 'test' | translate }}"
+ test="foo {{ invalid invalid }} bar {{ valid }} baz"
+ test="foo
+
+ {{ invalid
+ invalid }}
+
+ bar
+
+ {{ valid }}
+
+ baz"
>
================================================================================
@@ -363,6 +387,18 @@ trailingComma: "es5"
'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER}"
[stickout]="+toolAssembly.stickoutMm"
+ test='{{ "test" | translate }}'
+ test='foo {{ invalid invalid }} bar {{ valid }} baz'
+ test='foo
+
+ {{ invalid
+ invalid }}
+
+ bar
+
+ {{ valid }}
+
+ baz'
>
=====================================output=====================================
@@ -475,6 +511,18 @@ trailingComma: "es5"
'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER
}"
[stickout]="+toolAssembly.stickoutMm"
+ test="{{ 'test' | translate }}"
+ test="foo {{ invalid invalid }} bar {{ valid }} baz"
+ test="foo
+
+ {{ invalid
+ invalid }}
+
+ bar
+
+ {{ valid }}
+
+ baz"
>
================================================================================
@@ -572,6 +620,18 @@ printWidth: 1
'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER}"
[stickout]="+toolAssembly.stickoutMm"
+ test='{{ "test" | translate }}'
+ test='foo {{ invalid invalid }} bar {{ valid }} baz'
+ test='foo
+
+ {{ invalid
+ invalid }}
+
+ bar
+
+ {{ valid }}
+
+ baz'
>
=====================================output=====================================
@@ -911,6 +971,25 @@ printWidth: 1
[stickout]="
+toolAssembly.stickoutMm
"
+ test="{{
+ 'test'
+ | translate
+ }}"
+ test="foo {{ invalid invalid }} bar {{
+ valid
+ }} baz"
+ test="foo
+
+ {{ invalid
+ invalid }}
+
+ bar
+
+ {{
+ valid
+ }}
+
+ baz"
>
================================================================================
@@ -1009,6 +1088,18 @@ printWidth: 80
'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER}"
[stickout]="+toolAssembly.stickoutMm"
+ test='{{ "test" | translate }}'
+ test='foo {{ invalid invalid }} bar {{ valid }} baz'
+ test='foo
+
+ {{ invalid
+ invalid }}
+
+ bar
+
+ {{ valid }}
+
+ baz'
>
=====================================output=====================================
@@ -1121,6 +1212,18 @@ printWidth: 80
'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER
}"
[stickout]="+toolAssembly.stickoutMm"
+ test="{{ 'test' | translate }}"
+ test="foo {{ invalid invalid }} bar {{ valid }} baz"
+ test="foo
+
+ {{ invalid
+ invalid }}
+
+ bar
+
+ {{ valid }}
+
+ baz"
>
================================================================================
@@ -3355,7 +3458,7 @@ can be found in the LICENSE file at http://angular.io/license
My current hero is {{ currentHero.name }}
-{{ title }}
+{{ title }}
The sum of 1 + 1 is {{ 1 + 1 }}
@@ -3504,7 +3607,7 @@ can be found in the LICENSE file at http://angular.io/license
- is the interpolated image.
+ is the interpolated image.
is the property bound image.
@@ -4846,7 +4949,7 @@ can be found in the LICENSE file at http://angular.io/license
My current hero is {{ currentHero.name }}
-{{ title }}
+{{ title }}
The sum of 1 + 1 is {{ 1 + 1 }}
@@ -4995,7 +5098,7 @@ can be found in the LICENSE file at http://angular.io/license
- is the interpolated image.
+ is the interpolated image.
is the property bound image.
@@ -6475,7 +6578,9 @@ can be found in the LICENSE file at http://angular.io/license
title
}}
@@ -7038,7 +7143,9 @@ can be found in the LICENSE file at http://angular.io/license
is
the
@@ -9768,7 +9875,7 @@ can be found in the LICENSE file at http://angular.io/license
{{ title }}
-
+
@@ -9944,7 +10051,7 @@ can be found in the LICENSE file at http://angular.io/license
-
+
is the
interpolated
image.
diff --git a/tests/html_angular/attributes.component.html b/tests/html_angular/attributes.component.html
index 5e525c77fa86..bfc06af98d97 100644
--- a/tests/html_angular/attributes.component.html
+++ b/tests/html_angular/attributes.component.html
@@ -84,4 +84,16 @@
'btn-warning': (dialog$ | async).level === dialogLevelEnum.WARNING,
'btn-svg': (dialog$ | async).level === dialogLevelEnum.DANGER}"
[stickout]="+toolAssembly.stickoutMm"
+ test='{{ "test" | translate }}'
+ test='foo {{ invalid invalid }} bar {{ valid }} baz'
+ test='foo
+
+ {{ invalid
+ invalid }}
+
+ bar
+
+ {{ valid }}
+
+ baz'
>