feat(editor): Add examples for root expression methods (#9373)

This commit is contained in:
Elias Meire
2024-05-22 10:05:31 +02:00
committed by GitHub
parent 7cb431f506
commit a591f63e3f
12 changed files with 800 additions and 263 deletions

View File

@@ -1,5 +1,5 @@
import { NODE_TYPES_EXCLUDED_FROM_AUTOCOMPLETION } from '../constants';
import { addVarType } from '../utils';
import { addInfoRenderer, addVarType } from '../utils';
import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
import type { INodeUi } from '@/Interface';
import { useWorkflowsStore } from '@/stores/workflows.store';
@@ -128,7 +128,7 @@ export function useBaseCompletions(
return {
from: preCursor.from,
options,
options: options.map(addInfoRenderer),
};
};

View File

@@ -1,4 +1,4 @@
import { addVarType, escape } from '../utils';
import { addInfoRenderer, addVarType, escape } from '../utils';
import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
import { useI18n } from '@/composables/useI18n';
@@ -18,15 +18,6 @@ export function useExecutionCompletions() {
if (!preCursor || (preCursor.from === preCursor.to && !context.explicit)) return null;
const buildLinkNode = (text: string) => {
const wrapper = document.createElement('span');
// This is being loaded from the locales file. This could
// cause an XSS of some kind but multiple other locales strings
// do the same thing.
wrapper.innerHTML = text;
return () => wrapper;
};
const options: Completion[] = [
{
label: `${matcher}.id`,
@@ -46,29 +37,25 @@ export function useExecutionCompletions() {
},
{
label: `${matcher}.customData.set("key", "value")`,
info: buildLinkNode(i18n.baseText('codeNodeEditor.completer.$execution.customData.set()')),
info: i18n.baseText('codeNodeEditor.completer.$execution.customData.set'),
},
{
label: `${matcher}.customData.get("key")`,
info: buildLinkNode(i18n.baseText('codeNodeEditor.completer.$execution.customData.get()')),
info: i18n.baseText('codeNodeEditor.completer.$execution.customData.get'),
},
{
label: `${matcher}.customData.setAll({})`,
info: buildLinkNode(
i18n.baseText('codeNodeEditor.completer.$execution.customData.setAll()'),
),
info: i18n.baseText('codeNodeEditor.completer.$execution.customData.setAll'),
},
{
label: `${matcher}.customData.getAll()`,
info: buildLinkNode(
i18n.baseText('codeNodeEditor.completer.$execution.customData.getAll()'),
),
info: i18n.baseText('codeNodeEditor.completer.$execution.customData.getAll'),
},
];
return {
from: preCursor.from,
options: options.map(addVarType),
options: options.map(addVarType).map(addInfoRenderer),
};
};

View File

@@ -2,6 +2,7 @@ import type * as esprima from 'esprima-next';
import type { Completion } from '@codemirror/autocomplete';
import type { Node } from 'estree';
import type { RangeNode } from './types';
import { sanitizeHtml } from '@/utils/htmlUtils';
export function walk<T extends RangeNode>(
node: Node | esprima.Program,
@@ -40,3 +41,15 @@ export const escape = (str: string) =>
export const toVariableOption = (label: string) => ({ label, type: 'variable' });
export const addVarType = (option: Completion) => ({ ...option, type: 'variable' });
export const addInfoRenderer = (option: Completion): Completion => {
const { info } = option;
if (typeof info === 'string') {
option.info = () => {
const wrapper = document.createElement('span');
wrapper.innerHTML = sanitizeHtml(info);
return wrapper;
};
}
return option;
};