Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(editor): New Code editor based on the TypeScript language service #12285

Merged
merged 55 commits into from
Jan 8, 2025
Merged
Changes from 1 commit
Commits
Show all changes
55 commits
Select commit Hold shift + click to select a range
2b747c3
Code editor composable WIP
elsmr Aug 26, 2024
09a4673
Merge branch 'master' into node-1466-overhaul-code-node-p0
elsmr Sep 16, 2024
d9d0502
Finish useCodeEditor refactor
elsmr Sep 16, 2024
a227554
Typescript Web Worker WIP
elsmr Sep 17, 2024
c48eb3f
Make code editor experience more VSCode-like
elsmr Sep 21, 2024
a2057a3
Merge branch 'master' into node-1466-overhaul-code-node-p0
elsmr Sep 21, 2024
f3eac59
TS worker Tweaks
elsmr Sep 23, 2024
4296662
Merge branch 'master' into node-1466-overhaul-code-node-p0
elsmr Oct 29, 2024
406aeb0
WIP
elsmr Oct 30, 2024
5359761
Split types
elsmr Nov 13, 2024
7f583b0
WIP: autocomplete node data with $('NodeName')
elsmr Nov 18, 2024
72ece83
Lazy load node schema for autocomplete
elsmr Nov 20, 2024
37a2081
Add support for $json etc.
elsmr Nov 22, 2024
780d1ff
Add types for each code execution mode
elsmr Nov 25, 2024
ad751eb
Merge branch 'master' into node-1466-overhaul-code-node-p0
elsmr Nov 25, 2024
ae88db8
Fix out of range bugs
elsmr Nov 27, 2024
3d69cbf
Fix worker build
elsmr Nov 27, 2024
5da0340
Add global DateTime type
elsmr Nov 28, 2024
0a4ef73
Merge branch 'master' into node-1466-overhaul-code-node-p0
elsmr Nov 29, 2024
9f2b007
Remove extension functions from code node
elsmr Dec 2, 2024
59bd2ad
WIP: Add updateNodeTypes function
elsmr Dec 2, 2024
cb6daf8
Merge branch 'master' into node-1466-overhaul-code-node-p0
elsmr Dec 2, 2024
1eee234
Dynamically load types when data changes
elsmr Dec 3, 2024
87a0503
Add format shortcut
elsmr Dec 5, 2024
1c6a008
Remove hardcoded JS globals, improve lazy type loading
elsmr Dec 5, 2024
7a30212
Add JS snippets
elsmr Dec 9, 2024
f1d3675
Improve tooltip styling
elsmr Dec 9, 2024
e80402b
Merge branch 'master' into node-1466-overhaul-code-node-p0
elsmr Dec 9, 2024
f41b804
Add drag'n'drop in all code node modes, improve styling
elsmr Dec 10, 2024
faddbdd
Add docs to typescript hover
elsmr Dec 12, 2024
ce99bf5
Fix fullscreen modal, fix restore editor from local storage
elsmr Dec 17, 2024
abd9d44
Merge branch 'master' into node-1466-overhaul-code-node-p0
elsmr Dec 18, 2024
d3fa42c
Refactor and clean up code
elsmr Dec 18, 2024
2a43a5b
Fix typescript compilation issues
elsmr Dec 18, 2024
b90ea5a
Merge branch 'master' into node-1466-overhaul-code-node-p0
elsmr Dec 18, 2024
9dceb02
Add support for binary autocompletion
elsmr Dec 18, 2024
93d039e
Fix prefix match function
elsmr Dec 20, 2024
4fe1f7c
Improve comment completion, make filtering consistent with expressions
elsmr Dec 20, 2024
d8e87d3
Improve return type of code node
elsmr Dec 20, 2024
0bcb8cd
Fix expression autocomplete styles
elsmr Dec 20, 2024
6cde8c4
Remove hardcoded mention of luxon package
elsmr Dec 20, 2024
3dd50c1
Restore line highlighting, fix selection color
elsmr Dec 20, 2024
352a339
Set cursor correctly for function completions
elsmr Dec 20, 2024
1c632ff
Don't store huge code in localstorage
elsmr Jan 6, 2025
f3b5390
Merge branch 'master' into node-1466-overhaul-code-node-p0
elsmr Jan 6, 2025
130d794
Fix bug with placeholder in code node editor
elsmr Jan 6, 2025
de1a28b
Ignore outside editor changes while focused
elsmr Jan 6, 2025
b970ab1
Fix tab/esc keymap in dialog
elsmr Jan 6, 2025
ebad9db
Tweak theme
elsmr Jan 7, 2025
fb4d3c0
Improve performance by only sending changes to worker
elsmr Jan 7, 2025
a9ac0a5
Merge branch 'master' into node-1466-overhaul-code-node-p0
elsmr Jan 7, 2025
dd44359
Fix e2e test
elsmr Jan 7, 2025
0fae850
Emit last update before unmount
elsmr Jan 8, 2025
910fd9b
Use browser crypto API to generate uuid
elsmr Jan 8, 2025
fe1e8cb
Merge branch 'master' into node-1466-overhaul-code-node-p0
elsmr Jan 8, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Code editor composable WIP
elsmr committed Aug 26, 2024
commit 2b747c38b2698ad7f27a1c6230b64a1a79ad4034
61 changes: 28 additions & 33 deletions packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
Original file line number Diff line number Diff line change
@@ -47,9 +47,6 @@
</template>

<script setup lang="ts">
import { javascript } from '@codemirror/lang-javascript';
import { python } from '@codemirror/lang-python';
import type { LanguageSupport } from '@codemirror/language';
import type { Extension, Line } from '@codemirror/state';
import { Compartment, EditorState } from '@codemirror/state';
import type { ViewUpdate } from '@codemirror/view';
@@ -68,12 +65,12 @@ import { usePostHog } from '@/stores/posthog.store';
import { useMessage } from '@/composables/useMessage';
import AskAI from './AskAI/AskAI.vue';
import { readOnlyEditorExtensions, writableEditorExtensions } from './baseExtensions';
import { useCompleter } from './completer';
import { CODE_PLACEHOLDERS } from './constants';
import { useLinter } from './linter';
import { codeNodeEditorTheme } from './theme';
import { useI18n } from '@/composables/useI18n';
import { useTelemetry } from '@/composables/useTelemetry';
import { useCodeEditor } from '@/composables/useCodeEditor';

type Props = {
mode: CodeExecutionMode;
@@ -109,20 +106,21 @@ const isLoadingAIResponse = ref(false);
const codeNodeEditorRef = ref<HTMLDivElement>();
const codeNodeEditorContainerRef = ref<HTMLDivElement>();

const { autocompletionExtension } = useCompleter(() => props.mode, editor);
const { createLinter } = useLinter(() => props.mode, editor);
const linter = useLinter(
() => props.mode,
() => props.language,
editor,
);

const rootStore = useRootStore();
const posthog = usePostHog();
const i18n = useI18n();
const telemetry = useTelemetry();

onMounted(() => {
if (!props.isReadOnly) codeNodeEditorEventBus.on('error-line-number', highlightLine);
const extensions = computed(() => [linter.value])

codeNodeEditorEventBus.on('codeDiffApplied', diffApplied);

const { isReadOnly, language } = props;
const { isReadOnly, language } = props;
const {}
const extensions: Extension[] = [
...readOnlyEditorExtensions,
EditorState.readOnly.of(isReadOnly),
@@ -142,15 +140,7 @@ onMounted(() => {
}

extensions.push(
...writableEditorExtensions,
EditorView.domEventHandlers({
focus: () => {
isEditorFocused.value = true;
},
blur: () => {
isEditorFocused.value = false;
},
}),
...writableEditorExtensions

EditorView.updateListener.of((viewUpdate) => {
if (!viewUpdate.docChanged) return;
@@ -166,9 +156,6 @@ onMounted(() => {
);
}

const [languageSupport, ...otherExtensions] = languageExtensions.value;
extensions.push(languageCompartment.value.of(languageSupport), ...otherExtensions);

const state = EditorState.create({
doc: props.modelValue ?? placeholder.value,
extensions,
@@ -184,6 +171,24 @@ onMounted(() => {
refreshPlaceholder();
emit('update:modelValue', placeholder.value);
}

const {} = useCodeEditor({
editorRef: codeNodeEditorRef.value,
language: () => props.language,
editorValue: () => props.modelValue,
placeholder,
extensions,
isReadOnly: () => props.isReadOnly,
theme: () => ({
maxHeight: props.fillParent ? '100%' : '40vh',
minHeight: '20vh',
rows: props.rows,
})
})

onMounted(() => {
if (!props.isReadOnly) codeNodeEditorEventBus.on('error-line-number', highlightLine);
codeNodeEditorEventBus.on('codeDiffApplied', diffApplied);
});

onBeforeUnmount(() => {
@@ -199,16 +204,6 @@ const placeholder = computed(() => {
return CODE_PLACEHOLDERS[props.language]?.[props.mode] ?? '';
});

// eslint-disable-next-line vue/return-in-computed-property
const languageExtensions = computed<[LanguageSupport, ...Extension[]]>(() => {
switch (props.language) {
case 'javaScript':
return [javascript(), autocompletionExtension('javaScript')];
case 'python':
return [python(), autocompletionExtension('python')];
}
});

watch(
() => props.modelValue,
(newValue) => {
19 changes: 10 additions & 9 deletions packages/editor-ui/src/components/CodeNodeEditor/linter.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import type { Diagnostic } from '@codemirror/lint';
import { linter } from '@codemirror/lint';
import { linter as codeMirrorLinter } from '@codemirror/lint';
import type { EditorView } from '@codemirror/view';
import * as esprima from 'esprima-next';
import type { Node } from 'estree';
import type { CodeExecutionMode, CodeNodeEditorLanguage } from 'n8n-workflow';
import { toValue, type MaybeRefOrGetter } from 'vue';
import { computed, toValue, type MaybeRefOrGetter } from 'vue';

import { useI18n } from '@/composables/useI18n';
import {
@@ -17,17 +17,18 @@ import { walk } from './utils';

export const useLinter = (
mode: MaybeRefOrGetter<CodeExecutionMode>,
language: MaybeRefOrGetter<CodeNodeEditorLanguage>,
editor: MaybeRefOrGetter<EditorView | null>,
) => {
const i18n = useI18n();

function createLinter(language: CodeNodeEditorLanguage) {
switch (language) {
const linter = computed(() => {
switch (toValue(language)) {
case 'javaScript':
return linter(lintSource, { delay: DEFAULT_LINTER_DELAY_IN_MS });
return codeMirrorLinter(lintSource, { delay: DEFAULT_LINTER_DELAY_IN_MS });
}
return undefined;
}

return [];
});

function lintSource(editorView: EditorView): Diagnostic[] {
const doc = editorView.state.doc.toString();
@@ -573,5 +574,5 @@ export const useLinter = (
return node.range.map((loc) => loc - OFFSET_FOR_SCRIPT_WRAPPER);
}

return { createLinter };
return linter;
};
199 changes: 96 additions & 103 deletions packages/editor-ui/src/components/CodeNodeEditor/theme.ts
Original file line number Diff line number Diff line change
@@ -32,16 +32,103 @@ interface ThemeSettings {
maxHeight?: string;
minHeight?: string;
rows?: number;
highlightColors?: 'default' | 'html';
}

export const codeNodeEditorTheme = ({
isReadOnly,
minHeight,
maxHeight,
rows,
highlightColors,
}: ThemeSettings) => [
export const htmlEditorHighlighting = syntaxHighlighting(
HighlightStyle.define([
{ tag: tags.keyword, color: '#c678dd' },
{
tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
color: '#e06c75',
},
{ tag: [tags.function(tags.variableName), tags.labelName], color: '#61afef' },
{
tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)],
color: '#d19a66',
},
{ tag: [tags.definition(tags.name), tags.separator], color: '#abb2bf' },
{
tag: [
tags.typeName,
tags.className,
tags.number,
tags.changed,
tags.annotation,
tags.modifier,
tags.self,
tags.namespace,
],
color: '#e06c75',
},
{
tag: [
tags.operator,
tags.operatorKeyword,
tags.url,
tags.escape,
tags.regexp,
tags.link,
tags.special(tags.string),
],
color: '#56b6c2',
},
{ tag: [tags.meta, tags.comment], color: '#7d8799' },
{ tag: tags.strong, fontWeight: 'bold' },
{ tag: tags.emphasis, fontStyle: 'italic' },
{ tag: tags.strikethrough, textDecoration: 'line-through' },
{ tag: tags.link, color: '#7d8799', textDecoration: 'underline' },
{ tag: tags.heading, fontWeight: 'bold', color: '#e06c75' },
{ tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: '#d19a66' },
{ tag: [tags.processingInstruction, tags.string, tags.inserted], color: '#98c379' },
{ tag: tags.invalid, color: 'red', 'font-weight': 'bold' },
]),
);

export const codeEditorSyntaxHighlighting = syntaxHighlighting(
HighlightStyle.define([
{
tag: tags.comment,
color: 'var(--color-code-tags-comment)',
},
{
tag: [tags.string, tags.special(tags.brace)],
color: 'var(--color-code-tags-string)',
},
{
tag: [tags.number, tags.self, tags.bool, tags.null],
color: 'var(--color-code-tags-primitive)',
},
{
tag: tags.keyword,
color: 'var(--color-code-tags-keyword)',
},
{
tag: tags.operator,
color: 'var(--color-code-tags-operator)',
},
{
tag: [
tags.variableName,
tags.propertyName,
tags.attributeName,
tags.regexp,
tags.className,
tags.typeName,
],
color: 'var(--color-code-tags-variable)',
},
{
tag: [
tags.definition(tags.typeName),
tags.definition(tags.propertyName),
tags.function(tags.variableName),
],
color: 'var(--color-code-tags-definition)',
},
]),
);

export const codeEditorTheme = ({ isReadOnly, minHeight, maxHeight, rows }: ThemeSettings) =>
EditorView.theme({
'&': {
'font-size': BASE_STYLING.fontSize,
@@ -111,98 +198,4 @@ export const codeNodeEditorTheme = ({
'.cm-diagnosticText': {
color: 'var(--color-text-base)',
},
}),
highlightColors === 'html'
? syntaxHighlighting(
HighlightStyle.define([
{ tag: tags.keyword, color: '#c678dd' },
{
tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
color: '#e06c75',
},
{ tag: [tags.function(tags.variableName), tags.labelName], color: '#61afef' },
{
tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)],
color: '#d19a66',
},
{ tag: [tags.definition(tags.name), tags.separator], color: '#abb2bf' },
{
tag: [
tags.typeName,
tags.className,
tags.number,
tags.changed,
tags.annotation,
tags.modifier,
tags.self,
tags.namespace,
],
color: '#e06c75',
},
{
tag: [
tags.operator,
tags.operatorKeyword,
tags.url,
tags.escape,
tags.regexp,
tags.link,
tags.special(tags.string),
],
color: '#56b6c2',
},
{ tag: [tags.meta, tags.comment], color: '#7d8799' },
{ tag: tags.strong, fontWeight: 'bold' },
{ tag: tags.emphasis, fontStyle: 'italic' },
{ tag: tags.strikethrough, textDecoration: 'line-through' },
{ tag: tags.link, color: '#7d8799', textDecoration: 'underline' },
{ tag: tags.heading, fontWeight: 'bold', color: '#e06c75' },
{ tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: '#d19a66' },
{ tag: [tags.processingInstruction, tags.string, tags.inserted], color: '#98c379' },
{ tag: tags.invalid, color: 'red', 'font-weight': 'bold' },
]),
)
: syntaxHighlighting(
HighlightStyle.define([
{
tag: tags.comment,
color: 'var(--color-code-tags-comment)',
},
{
tag: [tags.string, tags.special(tags.brace)],
color: 'var(--color-code-tags-string)',
},
{
tag: [tags.number, tags.self, tags.bool, tags.null],
color: 'var(--color-code-tags-primitive)',
},
{
tag: tags.keyword,
color: 'var(--color-code-tags-keyword)',
},
{
tag: tags.operator,
color: 'var(--color-code-tags-operator)',
},
{
tag: [
tags.variableName,
tags.propertyName,
tags.attributeName,
tags.regexp,
tags.className,
tags.typeName,
],
color: 'var(--color-code-tags-variable)',
},
{
tag: [
tags.definition(tags.typeName),
tags.definition(tags.propertyName),
tags.function(tags.variableName),
],
color: 'var(--color-code-tags-definition)',
},
]),
),
];
});
266 changes: 266 additions & 0 deletions packages/editor-ui/src/composables/useCodeEditor.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,266 @@
import {
onBeforeUnmount,
onMounted,
ref,
toRef,
toValue,
watch,
watchEffect,
type MaybeRefOrGetter,
type Ref,
} from 'vue';
import { closeCursorInfoBox } from '@/plugins/codemirror/tooltips/InfoBoxTooltip';
import { closeCompletion, completionStatus } from '@codemirror/autocomplete';
import {
Compartment,
EditorSelection,
EditorState,
Prec,
type Extension,
type SelectionRange,
} from '@codemirror/state';
import {
dropCursor,
EditorView,
highlightActiveLine,
highlightActiveLineGutter,
highlightSpecialChars,
keymap,
lineNumbers,
type ViewUpdate,
} from '@codemirror/view';
import { javascript } from '@codemirror/lang-javascript';
import { python } from '@codemirror/lang-python';
import { json } from '@codemirror/lang-json';
import { html } from 'codemirror-lang-html-n8n';
import { lintGutter } from '@codemirror/lint';
import { bracketMatching, foldGutter, indentOnInput } from '@codemirror/language';
import { history, toggleComment, deleteCharBackward } from '@codemirror/commands';
import {
autocompleteKeyMap,
enterKeyMap,
historyKeyMap,
tabKeyMap,
} from '../plugins/codemirror/keymap';
import {
codeEditorSyntaxHighlighting,
codeEditorTheme,
htmlEditorHighlighting,
} from '../components/CodeNodeEditor/theme';

export type CodeEditorLanguage = 'json' | 'html' | 'javaScript' | 'python';

export const useCodeEditor = ({
editorRef,
editorValue,
language,
extensions = [],
isReadOnly = false,
theme = {},
}: {
editorRef: MaybeRefOrGetter<HTMLElement | undefined>;
language: MaybeRefOrGetter<CodeEditorLanguage>;
editorValue?: MaybeRefOrGetter<string>;
extensions?: MaybeRefOrGetter<Extension[]>;
isReadOnly?: MaybeRefOrGetter<boolean>;
theme?: MaybeRefOrGetter<{ maxHeight?: string; minHeight?: string; rows?: number }>;
}) => {
const editor = ref<EditorView>();
const hasFocus = ref(false);
const selection = ref<SelectionRange>(EditorSelection.cursor(0)) as Ref<SelectionRange>;
const customExtensions = ref<Compartment>(new Compartment());
const readOnlyExtensions = ref<Compartment>(new Compartment());
const telemetryExtensions = ref<Compartment>(new Compartment());
const languageExtensions = ref<Compartment>(new Compartment());
const themeExtensions = ref<Compartment>(new Compartment());
const autocompleteStatus = ref<'pending' | 'active' | null>(null);
const dragging = ref(false);

const EXTENSIONS_BY_LANGUAGE: Record<CodeEditorLanguage, Extension[]> = {
javaScript: [javascript(), codeEditorSyntaxHighlighting],
python: [python(), codeEditorSyntaxHighlighting],
json: [json(), codeEditorSyntaxHighlighting],
html: [html(), htmlEditorHighlighting],
};

function readEditorValue(): string {
return editor.value?.state.doc.toString() ?? '';
}

function updateSelection(viewUpdate: ViewUpdate) {
const currentSelection = selection.value;
const newSelection = viewUpdate.state.selection.ranges[0];

if (!currentSelection?.eq(newSelection)) {
selection.value = newSelection;
}
}

function onEditorUpdate(viewUpdate: ViewUpdate) {
autocompleteStatus.value = completionStatus(viewUpdate.view.state);
updateSelection(viewUpdate);
}

function blur() {
if (editor.value) {
editor.value.contentDOM.blur();
closeCompletion(editor.value);
closeCursorInfoBox(editor.value);
}
}

function blurOnClickOutside(event: MouseEvent) {
if (event.target && !dragging.value && !editor.value?.dom.contains(event.target as Node)) {
blur();
}
dragging.value = false;
}

watch(toRef(editorRef), () => {
const parent = toValue(editorRef);

if (!parent) return;

const state = EditorState.create({
doc: toValue(editorValue),
extensions: [
customExtensions.value.of(toValue(extensions)),
readOnlyExtensions.value.of([EditorState.readOnly.of(toValue(isReadOnly))]),
telemetryExtensions.value.of([]),
languageExtensions.value.of([]),
themeExtensions.value.of([]),
EditorView.updateListener.of(onEditorUpdate),
EditorView.focusChangeEffect.of((_, newHasFocus) => {
hasFocus.value = newHasFocus;
selection.value = state.selection.ranges[0];
if (!newHasFocus) {
autocompleteStatus.value = null;
}
return null;
}),
EditorView.contentAttributes.of({ 'data-gramm': 'false' }), // disable grammarly
EditorView.domEventHandlers({
mousedown: () => {
dragging.value = true;
},
}),
history(),
lintGutter(),
foldGutter(),
dropCursor(),
indentOnInput(),
bracketMatching(),
highlightActiveLine(),
highlightActiveLineGutter(),
Prec.highest(
keymap.of([
...tabKeyMap(),
...enterKeyMap,
...autocompleteKeyMap,
...historyKeyMap,
{ key: 'Mod-/', run: toggleComment },
{ key: 'Backspace', run: deleteCharBackward, shift: deleteCharBackward },
]),
),
],
});

if (editor.value) {
editor.value.destroy();
}
editor.value = new EditorView({ parent, state, scrollTo: EditorView.scrollIntoView(0) });
});

watchEffect(() => {
if (editor.value) {
editor.value.dispatch({
effects: customExtensions.value.reconfigure(toValue(extensions)),
});
}
});

watchEffect(() => {
if (editor.value) {
editor.value.dispatch({
effects: languageExtensions.value.reconfigure(
toValue(EXTENSIONS_BY_LANGUAGE[toValue(language)]),
),
});
}
});

watchEffect(() => {
if (editor.value) {
editor.value.dispatch({
effects: readOnlyExtensions.value.reconfigure([
EditorState.readOnly.of(toValue(isReadOnly)),
EditorView.editable.of(!isReadOnly),
lineNumbers(),
EditorView.lineWrapping,
highlightSpecialChars(),
]),
});
}
});

watchEffect(() => {
if (editor.value) {
editor.value.dispatch({
effects: themeExtensions.value.reconfigure(codeEditorTheme(toValue(theme))),
});
}
});

watchEffect(() => {
if (!editor.value) return;

const newValue = toValue(editorValue);
const currentValue = readEditorValue();
if (newValue === undefined || newValue === currentValue) return;

editor.value.dispatch({
changes: { from: 0, to: currentValue.length, insert: newValue },
});
});

onMounted(() => {
document.addEventListener('click', blurOnClickOutside);
});

onBeforeUnmount(() => {
document.removeEventListener('click', blurOnClickOutside);
editor.value?.destroy();
});

function setCursorPosition(pos: number | 'end'): void {
if (pos === 'end') {
pos = editor.value?.state.doc.length ?? 0;
}
editor.value?.dispatch({ selection: { head: pos, anchor: pos } });
}

function select(anchor: number, head: number | 'end' = 'end'): void {
editor.value?.dispatch({
selection: { anchor, head: head === 'end' ? editor.value?.state.doc.length ?? 0 : head },
});
}

const selectAll = () => select(0, 'end');

function focus(): void {
if (hasFocus.value) return;
editor.value?.focus();
}

return {
editor,
hasFocus,
selection,
readEditorValue,
setCursorPosition,
select,
selectAll,
focus,
blur,
};
};