mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 20:54:07 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix formatting on editors (no-changelog) (#6953)

Browse source 
Prettier 3 has a [new package
structure](https://prettier.io/blog/2023/07/05/3.0.0.html#npm-package-file-structures-changed-12740httpsgithubcomprettierprettierpull12740-by-fiskerhttpsgithubcomfisker-13530httpsgithubcomprettierprettierpull13530-by-fiskerhttpsgithubcomfisker-14570httpsgithubcomprettierprettierpull14570-by-fiskerhttpsgithubcomfisker),
made `format` async, and requires `estree` in specific cases.

e2e run: https://github.com/n8n-io/n8n/actions/runs/5889270624
This commit is contained in:
Iván Ovejero 2023-08-17 12:28:32 +02:00 committed by GitHub
parent 914dd1f046
commit 832d08776c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
View file

@ -42,8 +42,9 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import type { PropType } from 'vue'; import type { PropType } from 'vue';
import jsParser from 'prettier/parser-babel'; import jsParser from 'prettier/plugins/babel';
import prettier from 'prettier/standalone'; import { format } from 'prettier';
import * as estree from 'prettier/plugins/estree';
import { mapStores } from 'pinia'; import { mapStores } from 'pinia';
import type { LanguageSupport } from '@codemirror/language'; import type { LanguageSupport } from '@codemirror/language';
import type { Extension, Line } from '@codemirror/state'; import type { Extension, Line } from '@codemirror/state';
@ -203,9 +204,9 @@ export default defineComponent({
return true; return true;
}, },
async onReplaceCode(code: string) { async onReplaceCode(code: string) {
const formattedCode = prettier.format(code, { const formattedCode = await format(code, {
parser: 'babel', parser: 'babel',
plugins: [jsParser], plugins: [jsParser, estree],
}); });
this.editor?.dispatch({ this.editor?.dispatch({

25
packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
View file

@ -4,10 +4,11 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import prettier from 'prettier/standalone'; import { format } from 'prettier';
import htmlParser from 'prettier/parser-html'; import htmlParser from 'prettier/plugins/html';
import cssParser from 'prettier/parser-postcss'; import cssParser from 'prettier/plugins/postcss';
import jsParser from 'prettier/parser-babel'; import jsParser from 'prettier/plugins/babel';
import * as estree from 'prettier/plugins/estree';
import { htmlLanguage, autoCloseTags, html } from 'codemirror-lang-html-n8n'; import { htmlLanguage, autoCloseTags, html } from 'codemirror-lang-html-n8n';
import { autocompletion } from '@codemirror/autocomplete'; import { autocompletion } from '@codemirror/autocomplete';
import { indentWithTab, insertNewlineAndIndent, history, redo } from '@codemirror/commands'; import { indentWithTab, insertNewlineAndIndent, history, redo } from '@codemirror/commands';
@ -191,16 +192,16 @@ export default defineComponent({
); );
}, },
format() { async format() {
if (this.sections.length === 1 && this.isMissingHtmlTags()) { if (this.sections.length === 1 && this.isMissingHtmlTags()) {
const zerothSection = this.sections.at(0) as Section; const zerothSection = this.sections.at(0) as Section;
const formatted = prettier const formatted = (
.format(zerothSection.content, { await format(zerothSection.content, {
parser: 'html', parser: 'html',
plugins: [htmlParser], plugins: [htmlParser],
}) })
.trim(); ).trim();
return this.editor.dispatch({ return this.editor.dispatch({
changes: { from: 0, to: this.doc.length, insert: formatted }, changes: { from: 0, to: this.doc.length, insert: formatted },
@ -211,7 +212,7 @@ export default defineComponent({
for (const { kind, content } of this.sections) { for (const { kind, content } of this.sections) {
if (kind === 'style') { if (kind === 'style') {
const formattedStyle = prettier.format(content, { const formattedStyle = await format(content, {
parser: 'css', parser: 'css',
plugins: [cssParser], plugins: [cssParser],
}); });
@ -220,9 +221,9 @@ export default defineComponent({
} }
if (kind === 'script') { if (kind === 'script') {
const formattedScript = prettier.format(content, { const formattedScript = await format(content, {
parser: 'babel', parser: 'babel',
plugins: [jsParser], plugins: [jsParser, estree],
}); });
formatted.push(`<script>\n${formattedScript}<` + '/script>'); formatted.push(`<script>\n${formattedScript}<` + '/script>');
@ -238,7 +239,7 @@ export default defineComponent({
const { pre, rest } = match.groups; const { pre, rest } = match.groups;
const formattedRest = prettier.format(rest, { const formattedRest = await format(rest, {
parser: 'html', parser: 'html',
plugins: [htmlParser], plugins: [htmlParser],
}); });