feat: HTML node (#5107)

*  Create HTML templating node PoC

* ♻️ Apply feedback

* 🐛 Scope CSS selectors

* ✏️ Adjust description

* ✏️ Adjust placeholder

*  Replace two custom files with package output

*  Add `codemirror-lang-html-n8n`

* 👕 Appease linter

* 🧪 Skip event bus tests

*  Revert "Skip event bus tests"

This reverts commit 5702585d0de3b8465660567132e9003e78f1104c.

* ✏️ Update codex

* 🧹 Cleanup

* 🐛 Restore original for `continueOnFail`

*  Improve `getResolvables`
This commit is contained in:
Iván Ovejero
2023-01-26 10:03:13 +01:00
committed by GitHub
parent a1710fbd27
commit 74e6f5d190
25 changed files with 1049 additions and 12 deletions

View File

@@ -79,6 +79,13 @@
@valueChanged="valueChangedDebounced"
/>
<html-editor
v-else-if="getArgument('editor') === 'htmlEditor' && isHtmlNode(node)"
:html="node.parameters.html"
:isReadOnly="isReadOnly"
@valueChanged="valueChangedDebounced"
/>
<div
v-else-if="isEditor === true"
class="code-edit clickable ph-no-capture"
@@ -337,6 +344,7 @@ import ExpressionParameterInput from '@/components/ExpressionParameterInput.vue'
import PrismEditor from 'vue-prism-editor';
import TextEdit from '@/components/TextEdit.vue';
import CodeNodeEditor from '@/components/CodeNodeEditor/CodeNodeEditor.vue';
import HtmlEditor from '@/components/HtmlEditor/HtmlEditor.vue';
import { externalHooks } from '@/mixins/externalHooks';
import { nodeHelpers } from '@/mixins/nodeHelpers';
import { showMessage } from '@/mixins/showMessage';
@@ -345,7 +353,7 @@ import { hasExpressionMapping, isValueExpression, isResourceLocatorValue } from
import mixins from 'vue-typed-mixins';
import { CUSTOM_API_CALL_KEY } from '@/constants';
import { CODE_NODE_TYPE } from '@/constants';
import { CODE_NODE_TYPE, HTML_NODE_TYPE } from '@/constants';
import { PropType } from 'vue';
import { debounceHelper } from '@/mixins/debounce';
import { mapStores } from 'pinia';
@@ -353,6 +361,7 @@ import { useWorkflowsStore } from '@/stores/workflows';
import { useNDVStore } from '@/stores/ndv';
import { useNodeTypesStore } from '@/stores/nodeTypes';
import { useCredentialsStore } from '@/stores/credentials';
import { htmlEditorEventBus } from '@/event-bus/html-editor-event-bus';
export default mixins(
externalHooks,
@@ -365,6 +374,7 @@ export default mixins(
components: {
CodeEdit,
CodeNodeEditor,
HtmlEditor,
ExpressionEdit,
ExpressionParameterInput,
NodeCredentials,
@@ -948,6 +958,9 @@ export default mixins(
isCodeNode(node: INodeUi): boolean {
return node.type === CODE_NODE_TYPE;
},
isHtmlNode(node: INodeUi): boolean {
return node.type === HTML_NODE_TYPE;
},
rgbaToHex(value: string): string | null {
// Convert rgba to hex from: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
const valueMatch = (value as string).match(
@@ -1077,6 +1090,8 @@ export default mixins(
}
}
this.loadRemoteParameterOptions();
} else if (command === 'formatHtml') {
htmlEditorEventBus.$emit('format-html');
}
if (this.node && (command === 'addExpression' || command === 'removeExpression')) {