mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-18 02:21:13 +00:00
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
17
packages/nodes-base/nodes/Html/Html.node.json
Normal file
17
packages/nodes-base/nodes/Html/Html.node.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"node": "n8n-nodes-base.html",
|
||||
"nodeVersion": "1.0",
|
||||
"codexVersion": "1.0",
|
||||
"categories": ["Core Nodes"],
|
||||
"resources": {
|
||||
"primaryDocumentation": [
|
||||
{
|
||||
"url": "https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.html/"
|
||||
}
|
||||
]
|
||||
},
|
||||
"subcategories": {
|
||||
"Core Nodes": ["Helpers", "Data Transformation"]
|
||||
},
|
||||
"alias": ["extract", "template"]
|
||||
}
|
||||
376
packages/nodes-base/nodes/Html/Html.node.ts
Normal file
376
packages/nodes-base/nodes/Html/Html.node.ts
Normal file
@@ -0,0 +1,376 @@
|
||||
import cheerio from 'cheerio';
|
||||
import {
|
||||
INodeExecutionData,
|
||||
IExecuteFunctions,
|
||||
INodeType,
|
||||
INodeTypeDescription,
|
||||
IDataObject,
|
||||
NodeOperationError,
|
||||
} from 'n8n-workflow';
|
||||
import { placeholder } from './placeholder';
|
||||
import { getResolvables, getValue } from './utils';
|
||||
import type { IValueData } from './types';
|
||||
|
||||
export class Html implements INodeType {
|
||||
description: INodeTypeDescription = {
|
||||
displayName: 'HTML',
|
||||
name: 'html',
|
||||
icon: 'file:html.svg',
|
||||
group: ['transform'],
|
||||
version: 1,
|
||||
subtitle: '={{ $parameter["operation"] }}',
|
||||
description: 'Work with HTML',
|
||||
defaults: {
|
||||
name: 'HTML',
|
||||
},
|
||||
inputs: ['main'],
|
||||
outputs: ['main'],
|
||||
parameterPane: 'wide',
|
||||
properties: [
|
||||
{
|
||||
displayName: 'Operation',
|
||||
name: 'operation',
|
||||
type: 'options',
|
||||
noDataExpression: true,
|
||||
options: [
|
||||
{
|
||||
name: 'Generate HTML Template',
|
||||
value: 'generateHtmlTemplate',
|
||||
action: 'Generate HTML template',
|
||||
},
|
||||
{
|
||||
name: 'Extract HTML Content',
|
||||
value: 'extractHtmlContent',
|
||||
action: 'Extract HTML Content',
|
||||
},
|
||||
],
|
||||
default: 'generateHtmlTemplate',
|
||||
},
|
||||
{
|
||||
displayName: 'HTML Template',
|
||||
name: 'html',
|
||||
typeOptions: {
|
||||
editor: 'htmlEditor',
|
||||
},
|
||||
type: 'string',
|
||||
default: placeholder,
|
||||
noDataExpression: true,
|
||||
description: 'HTML template to render',
|
||||
displayOptions: {
|
||||
show: {
|
||||
operation: ['generateHtmlTemplate'],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
displayName:
|
||||
'<b>Tips</b>: Type ctrl+space for completions. Use <code>{{ }}</code> for expressions and <code><style></code> tags for CSS. JS in <code><script></code> tags is included but not executed in n8n.',
|
||||
name: 'notice',
|
||||
type: 'notice',
|
||||
default: '',
|
||||
displayOptions: {
|
||||
show: {
|
||||
operation: ['generateHtmlTemplate'],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
displayName: 'Source Data',
|
||||
name: 'sourceData',
|
||||
type: 'options',
|
||||
options: [
|
||||
{
|
||||
name: 'Binary',
|
||||
value: 'binary',
|
||||
},
|
||||
{
|
||||
name: 'JSON',
|
||||
value: 'json',
|
||||
},
|
||||
],
|
||||
default: 'json',
|
||||
description: 'If HTML should be read from binary or JSON data',
|
||||
displayOptions: {
|
||||
show: {
|
||||
operation: ['extractHtmlContent'],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
displayName: 'Binary Property',
|
||||
name: 'dataPropertyName',
|
||||
type: 'string',
|
||||
displayOptions: {
|
||||
show: {
|
||||
operation: ['extractHtmlContent'],
|
||||
sourceData: ['binary'],
|
||||
},
|
||||
},
|
||||
default: 'data',
|
||||
required: true,
|
||||
description:
|
||||
'Name of the binary property in which the HTML to extract the data from can be found',
|
||||
},
|
||||
{
|
||||
displayName: 'JSON Property',
|
||||
name: 'dataPropertyName',
|
||||
type: 'string',
|
||||
displayOptions: {
|
||||
show: {
|
||||
operation: ['extractHtmlContent'],
|
||||
sourceData: ['json'],
|
||||
},
|
||||
},
|
||||
default: 'data',
|
||||
required: true,
|
||||
description:
|
||||
'Name of the JSON property in which the HTML to extract the data from can be found. The property can either contain a string or an array of strings.',
|
||||
},
|
||||
{
|
||||
displayName: 'Extraction Values',
|
||||
name: 'extractionValues',
|
||||
placeholder: 'Add Value',
|
||||
type: 'fixedCollection',
|
||||
typeOptions: {
|
||||
multipleValues: true,
|
||||
},
|
||||
displayOptions: {
|
||||
show: {
|
||||
operation: ['extractHtmlContent'],
|
||||
},
|
||||
},
|
||||
default: {},
|
||||
options: [
|
||||
{
|
||||
name: 'values',
|
||||
displayName: 'Values',
|
||||
values: [
|
||||
{
|
||||
displayName: 'Key',
|
||||
name: 'key',
|
||||
type: 'string',
|
||||
default: '',
|
||||
description: 'The key under which the extracted value should be saved',
|
||||
},
|
||||
{
|
||||
displayName: 'CSS Selector',
|
||||
name: 'cssSelector',
|
||||
type: 'string',
|
||||
default: '',
|
||||
placeholder: '.price',
|
||||
description: 'The CSS selector to use',
|
||||
},
|
||||
{
|
||||
displayName: 'Return Value',
|
||||
name: 'returnValue',
|
||||
type: 'options',
|
||||
options: [
|
||||
{
|
||||
name: 'Attribute',
|
||||
value: 'attribute',
|
||||
description: 'Get an attribute value like "class" from an element',
|
||||
},
|
||||
{
|
||||
name: 'HTML',
|
||||
value: 'html',
|
||||
description: 'Get the HTML the element contains',
|
||||
},
|
||||
{
|
||||
name: 'Text',
|
||||
value: 'text',
|
||||
description: 'Get only the text content of the element',
|
||||
},
|
||||
{
|
||||
name: 'Value',
|
||||
value: 'value',
|
||||
description: 'Get value of an input, select or textarea',
|
||||
},
|
||||
],
|
||||
default: 'text',
|
||||
description: 'What kind of data should be returned',
|
||||
},
|
||||
{
|
||||
displayName: 'Attribute',
|
||||
name: 'attribute',
|
||||
type: 'string',
|
||||
displayOptions: {
|
||||
show: {
|
||||
returnValue: ['attribute'],
|
||||
},
|
||||
},
|
||||
default: '',
|
||||
placeholder: 'class',
|
||||
description: 'The name of the attribute to return the value off',
|
||||
},
|
||||
{
|
||||
displayName: 'Return Array',
|
||||
name: 'returnArray',
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
description:
|
||||
'Whether to return the values as an array so if multiple ones get found they also get returned separately. If not set all will be returned as a single string.',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
displayName: 'Options',
|
||||
name: 'options',
|
||||
type: 'collection',
|
||||
placeholder: 'Add Option',
|
||||
default: {},
|
||||
displayOptions: {
|
||||
show: {
|
||||
operation: ['extractHtmlContent'],
|
||||
},
|
||||
},
|
||||
options: [
|
||||
{
|
||||
displayName: 'Trim Values',
|
||||
name: 'trimValues',
|
||||
type: 'boolean',
|
||||
default: true,
|
||||
description:
|
||||
'Whether to remove automatically all spaces and newlines from the beginning and end of the values',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
async execute(this: IExecuteFunctions): Promise<INodeExecutionData[][]> {
|
||||
const items = this.getInputData();
|
||||
let item: INodeExecutionData;
|
||||
const returnData: INodeExecutionData[] = [];
|
||||
const operation = this.getNodeParameter('operation', 0);
|
||||
|
||||
for (let itemIndex = 0; itemIndex < items.length; itemIndex++) {
|
||||
try {
|
||||
if (operation === 'generateHtmlTemplate') {
|
||||
// ----------------------------------
|
||||
// generateHtmlTemplate
|
||||
// ----------------------------------
|
||||
|
||||
let html = this.getNodeParameter('html', itemIndex) as string;
|
||||
|
||||
for (const resolvable of getResolvables(html)) {
|
||||
html = html.replace(resolvable, this.evaluateExpression(resolvable, itemIndex) as any);
|
||||
}
|
||||
|
||||
const result = this.helpers.constructExecutionMetaData(
|
||||
this.helpers.returnJsonArray({ html }),
|
||||
{
|
||||
itemData: { item: itemIndex },
|
||||
},
|
||||
);
|
||||
|
||||
returnData.push(...result);
|
||||
} else if (operation === 'extractHtmlContent') {
|
||||
// ----------------------------------
|
||||
// extractHtmlContent
|
||||
// ----------------------------------
|
||||
|
||||
const dataPropertyName = this.getNodeParameter('dataPropertyName', itemIndex);
|
||||
const extractionValues = this.getNodeParameter(
|
||||
'extractionValues',
|
||||
itemIndex,
|
||||
) as IDataObject;
|
||||
const options = this.getNodeParameter('options', itemIndex, {});
|
||||
const sourceData = this.getNodeParameter('sourceData', itemIndex) as string;
|
||||
|
||||
item = items[itemIndex];
|
||||
|
||||
let htmlArray: string[] | string = [];
|
||||
if (sourceData === 'json') {
|
||||
if (item.json[dataPropertyName] === undefined) {
|
||||
throw new NodeOperationError(
|
||||
this.getNode(),
|
||||
`No property named "${dataPropertyName}" exists!`,
|
||||
{ itemIndex },
|
||||
);
|
||||
}
|
||||
htmlArray = item.json[dataPropertyName] as string;
|
||||
} else {
|
||||
if (item.binary === undefined) {
|
||||
throw new NodeOperationError(
|
||||
this.getNode(),
|
||||
'No item does not contain binary data!',
|
||||
{
|
||||
itemIndex,
|
||||
},
|
||||
);
|
||||
}
|
||||
if (item.binary[dataPropertyName] === undefined) {
|
||||
throw new NodeOperationError(
|
||||
this.getNode(),
|
||||
`No property named "${dataPropertyName}" exists!`,
|
||||
{ itemIndex },
|
||||
);
|
||||
}
|
||||
|
||||
const binaryDataBuffer = await this.helpers.getBinaryDataBuffer(
|
||||
itemIndex,
|
||||
dataPropertyName,
|
||||
);
|
||||
htmlArray = binaryDataBuffer.toString('utf-8');
|
||||
}
|
||||
|
||||
// Convert it always to array that it works with a string or an array of strings
|
||||
if (!Array.isArray(htmlArray)) {
|
||||
htmlArray = [htmlArray];
|
||||
}
|
||||
|
||||
for (const html of htmlArray as string[]) {
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
const newItem: INodeExecutionData = {
|
||||
json: {},
|
||||
pairedItem: {
|
||||
item: itemIndex,
|
||||
},
|
||||
};
|
||||
|
||||
// Itterate over all the defined values which should be extracted
|
||||
let htmlElement;
|
||||
for (const valueData of extractionValues.values as IValueData[]) {
|
||||
htmlElement = $(valueData.cssSelector);
|
||||
|
||||
if (valueData.returnArray) {
|
||||
// An array should be returned so itterate over one
|
||||
// value at a time
|
||||
newItem.json[valueData.key] = [];
|
||||
htmlElement.each((i, el) => {
|
||||
(newItem.json[valueData.key] as Array<string | undefined>).push(
|
||||
getValue($(el), valueData, options),
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// One single value should be returned
|
||||
newItem.json[valueData.key] = getValue(htmlElement, valueData, options);
|
||||
}
|
||||
}
|
||||
returnData.push(newItem);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (this.continueOnFail()) {
|
||||
returnData.push({
|
||||
json: {
|
||||
error: error.message,
|
||||
},
|
||||
pairedItem: {
|
||||
item: itemIndex,
|
||||
},
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
return this.prepareOutputData(returnData);
|
||||
}
|
||||
}
|
||||
1
packages/nodes-base/nodes/Html/html.svg
Normal file
1
packages/nodes-base/nodes/Html/html.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 63.75 85" fill="#fff" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round"><use xlink:href="#A" x="1.875" y="2.5"/><symbol id="A" overflow="visible"><g stroke="none"><path d="M60 15H0l5 57.5L30 80l25-7.5L60 15" fill="#e44d26"/><path d="M7 0v11h3V7h4v4h3V0h-3v4h-4V0zm24 0v11h3V5l2.5 4L39 5v6h3V0h-3l-2.5 3.5L34 0zm13 0v11h9V8h-6V0z" fill="#000"/><path d="M22.366 65.21l-8.214-2.464-.67-7.701-.221-2.545h8l.436 5.009L30 60v7.5zM30 32.5H19.522l.652 7.5H30v7.5h-9.174-8l-.652-7.5-.652-7.5-.652-7.5h8H30z" fill="#ebebeb"/><path d="M51.739 52.5l.435-5 .652-7.5.652-7.5.652-7.5.435-5H30v55l15.179-4.554 5.134-1.54.67-7.701.67-7.701z" fill="#f16529"/><path d="M19 0v3h3.5v8h3V3H29V0z" fill="#000"/><path d="M30 32.5h10.478 8l.652-7.5h-8H30zm9.174 15H30V40h9.826 8l-.652 7.5-.435 5-.221 2.545-.67 7.701-8.214 2.464L30 67.5V60l8.304-2.491.435-5.009z"/></g></symbol></svg>
|
||||
|
After Width: | Height: | Size: 987 B |
44
packages/nodes-base/nodes/Html/placeholder.ts
Normal file
44
packages/nodes-base/nodes/Html/placeholder.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
export const placeholder = `
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>My HTML document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>This is an H1 heading</h1>
|
||||
<h2>This is an H2 heading</h2>
|
||||
<p>This is a paragraph</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
background-color: #ffffff;
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #ff6d5a;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #909399;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
console.log("Hello World!");
|
||||
</script>
|
||||
`.trim();
|
||||
11
packages/nodes-base/nodes/Html/types.ts
Normal file
11
packages/nodes-base/nodes/Html/types.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import type cheerio from 'cheerio';
|
||||
|
||||
export type Cheerio = ReturnType<typeof cheerio>;
|
||||
|
||||
export interface IValueData {
|
||||
attribute?: string;
|
||||
cssSelector: string;
|
||||
returnValue: string;
|
||||
key: string;
|
||||
returnArray: boolean;
|
||||
}
|
||||
46
packages/nodes-base/nodes/Html/utils.ts
Normal file
46
packages/nodes-base/nodes/Html/utils.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { IDataObject } from 'n8n-workflow';
|
||||
import type { IValueData, Cheerio } from './types';
|
||||
|
||||
/**
|
||||
* @TECH_DEBT Explore replacing with handlebars
|
||||
*/
|
||||
export function getResolvables(html: string) {
|
||||
if (!html) return [];
|
||||
|
||||
const resolvables = [];
|
||||
const resolvableRegex = /({{[\s\S]*?}})/g;
|
||||
|
||||
let match;
|
||||
|
||||
while ((match = resolvableRegex.exec(html)) !== null) {
|
||||
if (match[1]) {
|
||||
resolvables.push(match[1]);
|
||||
}
|
||||
}
|
||||
|
||||
return resolvables;
|
||||
}
|
||||
|
||||
// The extraction functions
|
||||
const extractFunctions: {
|
||||
[key: string]: ($: Cheerio, valueData: IValueData) => string | undefined;
|
||||
} = {
|
||||
attribute: ($: Cheerio, valueData: IValueData): string | undefined =>
|
||||
$.attr(valueData.attribute!),
|
||||
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
|
||||
html: ($: Cheerio, _valueData: IValueData): string | undefined => $.html() || undefined,
|
||||
text: ($: Cheerio, _valueData: IValueData): string | undefined => $.text(),
|
||||
value: ($: Cheerio, _valueData: IValueData): string | undefined => $.val(),
|
||||
};
|
||||
|
||||
/**
|
||||
* Simple helper function which applies options
|
||||
*/
|
||||
export function getValue($: Cheerio, valueData: IValueData, options: IDataObject) {
|
||||
const value = extractFunctions[valueData.returnValue]($, valueData);
|
||||
if (options.trimValues === false || value === undefined) {
|
||||
return value;
|
||||
}
|
||||
|
||||
return value.trim();
|
||||
}
|
||||
Reference in New Issue
Block a user