Set up prettier

.editorconfig

@@ -19,6 +19,11 @@ indent_size = 4
 indent_style = space
 indent_size = 2
 
+[*.{ts,tsx}]
+indent_style = space
+indent_size = 4
+quote_type = single
+
 # Dotnet code style settings:
 [*.{cs,vb}]
 trim_trailing_whitespace=true

.github/workflows/pr.yml

@@ -59,6 +59,9 @@ jobs:
       - name: Lint
         run: npm run lint
 
+      - name: Format
+        run: npm run fmt:check
+
 
   build:
     runs-on: ${{ matrix.os }}

src/Elastic.Markdown/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

src/Elastic.Markdown/.prettierrc

@@ -0,0 +1,6 @@
+{
+	"semi": false,
+	"trailingComma": "es5",
+	"singleQuote": true,
+	"plugins": ["prettier-plugin-tailwindcss"]
+}

src/Elastic.Markdown/Assets/copybutton.css

@@ -1,41 +1,45 @@
 /* Copy buttons */
 button.copybtn {
-    position: absolute;
-    display: flex;
-    top: calc(var(--spacing) * 5);
-    right: calc(var(--spacing) * 4);
-    width: 1.7em;
-    height: 1.7em;
+	position: absolute;
+	display: flex;
+	top: calc(var(--spacing) * 5);
+	right: calc(var(--spacing) * 4);
+	width: 1.7em;
+	height: 1.7em;
 	opacity: 0;
-    transition: opacity 0.3s, border .3s, background-color .3s;
-    user-select: none;
+	transition:
+		opacity 0.3s,
+		border 0.3s,
+		background-color 0.3s;
+	user-select: none;
 	cursor: pointer;
-    padding: 0;
-    border: none;
-    outline: none;
-    border-radius: 0.4em;
-    background-color: rgb(34, 39, 46);
-    color: var(--color-grey-50);
+	padding: 0;
+	border: none;
+	outline: none;
+	border-radius: 0.4em;
+	background-color: rgb(34, 39, 46);
+	color: var(--color-grey-50);
 }
 
 button.copybtn.success {
 	background-color: rgb(34, 39, 46);
-    color: #22863a;
+	color: #22863a;
 }
 
 button.copybtn svg {
-    stroke: currentColor;
-    width: 1.5em;
-    height: 1.5em;
-    padding: 0.1em;
+	stroke: currentColor;
+	width: 1.5em;
+	height: 1.5em;
+	padding: 0.1em;
 }
 
-div.highlight  {
-    position: relative;
+div.highlight {
+	position: relative;
 }
 
 /* Show the copybutton */
-.highlight:hover button.copybtn, button.copybtn.success {
+.highlight:hover button.copybtn,
+button.copybtn.success {
 	opacity: 1;
 }
 
@@ -47,39 +51,43 @@ div.highlight  {
  *
  * <p class="o-tooltip--left" data-tooltip="Hey">Short</p>
  */
- .o-tooltip--left {
-  position: relative;
- }
+.o-tooltip--left {
+	position: relative;
+}
 
- .o-tooltip--left:after {
-    opacity: 0;
-    visibility: hidden;
-    position: absolute;
-    content: attr(data-tooltip);
-    padding: .2em;
-    font-size: var(--text-sm);
-    left: -.2em;
+.o-tooltip--left:after {
+	opacity: 0;
+	visibility: hidden;
+	position: absolute;
+	content: attr(data-tooltip);
+	padding: 0.2em;
+	font-size: var(--text-sm);
+	left: -0.2em;
 	background-color: rgb(34, 39, 46);
-    color: var(--color-grey-50);
-    white-space: nowrap;
-    z-index: 2;
-    border-radius: 2px;
-    transform: translateX(-102%) translateY(0);
-    transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+	color: var(--color-grey-50);
+	white-space: nowrap;
+	z-index: 2;
+	border-radius: 2px;
+	transform: translateX(-102%) translateY(0);
+	transition:
+		opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1),
+		transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
 }
 
 .o-tooltip--left:hover:after {
-    display: block;
-    opacity: 1;
-    visibility: visible;
-    transform: translateX(-100%) translateY(0);
-    transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-    transition-delay: .5s;
+	display: block;
+	opacity: 1;
+	visibility: visible;
+	transform: translateX(-100%) translateY(0);
+	transition:
+		opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1),
+		transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+	transition-delay: 0.5s;
 }
 
 /* By default the copy button shouldn't show up when printing a page */
 @media print {
-    button.copybtn {
-        display: none;
-    }
+	button.copybtn {
+		display: none;
+	}
 }