feat(editor): Inline expression editor (#4814)
* WIP * 🔥 Remove unneeded watch * ⚡ Further setup * ⚡ Fix import * ⚡ Minor tweaks * 🔥 Remove logging * 🎨 Add some styling * 🎨 More styling changes * 🐛 Fix wrong marking of stale data * 🎨 Prevent fx on dragging * 🔥 Remove logging * ⚡ Refine draggable target offsets * refactor(editor): Consolidate expression management logic (#4836) * ⚡ Extract `ExpressionFunctionIcon` * ⚡ Simplify syntax * ⚡ Move to mixin * 🎨 Format * 📘 Unify types * ⚡ Dedup double brace handler * ⚡ Consolidate resolvable highlighter * 🎨 Format * ⚡ Consolidate language pack * ✏️ Add comment * ⚡ Move completions to plugins * ⚡ Partially deduplicate themes * refactor(editor): Apply styling feedback to inline expression editor (#4846) * 🎨 Adjust styling for expression parameter input * 🎨 Style outputs differently * ⚡ Set single line for RLC * 🎨 Style both openers identically * 🐛 Prevent defocus on resize * ⚡ Adjust line height * 🎨 Adjust border with for expression input * ⚡ Fix font family for inline output * ⚡ Set up telemetry * ⚡ Complete telemetry * ⚡ Simplify event source * ⚡ Set monospaced font for inline output * 🎨 Hide cursor on schema pill drop * 🧪 Update snapshots * ⚡ Consolidate editor styles * ✏️ Add tech debt comments * ⚡ Improve naming * ⚡ Improve inside resolvable detection * ⚡ Improve var naming * 🔥 Remove outdated comment * 🚚 Move constant to data * ✏️ Clarify comments * 🔥 Remove outdated comments * 🔥 Remove unneeded try-catch * 🔥 Remove unneeded method * 🔥 Remove unneeded check * 🔥 Remove `openExpression` check * 🔥 Remove unused timeout * 🔥 Remove commented out sections * ⚡ Use Pinia naming convention * ⚡ Re-evaluate on change of `ndvInputData` * 🐛 Fix handling of `0` in number-type input * 🐛 Surface focus and blur for mapping hints * 🔥 Remove logging * ✏️ Reword error * ⚡ Change kebab-case to PascalCase * ⚡ Refactor state fields for clarity * ⚡ Support double bracing on selection * 🎨 More styling * ⚡ Miscellaneous cleanup * ⚡ Disregard error on drop * 🎨 Fix schema pill styling * 🎨 More `background` to `background-color` fixes * 🧪 Update snapshots * 🎨 Replace non-existing var with white * 🧪 Update snapshot * 📦 Integrate `codemirror-lang-n8n-expression` * 🎨 Fix formatting * 🧪 Re-update test snapshots * 🧪 Update selectors for inline editor * 🔥 Remove unused test ID * 📘 Add type for `currentNodePaneType` * ⚡ Refactor mixin to util * ⚡ Use `:global` * 🔥 Remove comment * ⚡ Add watch * ⚡ Change import style * 👕 Fix lint * ⚡ Refactor preventing blur on resize * 🔥 Remove comment * 🧪 Re-update snapshots * 🎨 Prettify * 👕 Fix lint * 🔥 Remove comment Co-authored-by: Mutasem <mutdmour@gmail.com>
This commit is contained in:
Iván Ovejero
GitHub
@@ -3,34 +3,34 @@
|
||||
exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="_schemaWrapper_1x7h2_1"
|
||||
class="_schemaWrapper_5xhkc_1"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<div
|
||||
class="_schema_1x7h2_1"
|
||||
class="_schema_5xhkc_1"
|
||||
>
|
||||
<div
|
||||
class="_item_eg159_1"
|
||||
class="_item_14xdy_1"
|
||||
>
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<div
|
||||
class="_sub_eg159_14"
|
||||
class="_sub_14xdy_14"
|
||||
>
|
||||
<div
|
||||
class="_item_eg159_1"
|
||||
class="_item_14xdy_1"
|
||||
style="transition-delay: 0s;"
|
||||
>
|
||||
<div
|
||||
class="_pill_eg159_51 _mappable_eg159_70"
|
||||
class="_pill_14xdy_51 _mappable_14xdy_70"
|
||||
title="string"
|
||||
>
|
||||
<span
|
||||
class="_label_eg159_89"
|
||||
class="_label_14xdy_89"
|
||||
data-depth="1"
|
||||
data-name="name"
|
||||
data-path="[\\"name\\"]"
|
||||
@@ -50,7 +50,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="_text_eg159_100"
|
||||
class="_text_14xdy_100"
|
||||
>
|
||||
John
|
||||
</span>
|
||||
@@ -59,15 +59,15 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div
|
||||
class="_item_eg159_1"
|
||||
class="_item_14xdy_1"
|
||||
style="transition-delay: 0.033s;"
|
||||
>
|
||||
<div
|
||||
class="_pill_eg159_51 _mappable_eg159_70"
|
||||
class="_pill_14xdy_51 _mappable_14xdy_70"
|
||||
title="number"
|
||||
>
|
||||
<span
|
||||
class="_label_eg159_89"
|
||||
class="_label_14xdy_89"
|
||||
data-depth="1"
|
||||
data-name="age"
|
||||
data-path="[\\"age\\"]"
|
||||
@@ -87,7 +87,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="_text_eg159_100"
|
||||
class="_text_14xdy_100"
|
||||
>
|
||||
22
|
||||
</span>
|
||||
@@ -96,15 +96,15 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div
|
||||
class="_item_eg159_1"
|
||||
class="_item_14xdy_1"
|
||||
style="transition-delay: 0.066s;"
|
||||
>
|
||||
<div
|
||||
class="_pill_eg159_51 _mappable_eg159_70"
|
||||
class="_pill_14xdy_51 _mappable_14xdy_70"
|
||||
title="array"
|
||||
>
|
||||
<span
|
||||
class="_label_eg159_89"
|
||||
class="_label_14xdy_89"
|
||||
data-depth="1"
|
||||
data-name="hobbies"
|
||||
data-path="[\\"hobbies\\"]"
|
||||
@@ -130,7 +130,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
class="_toggle_eg159_20"
|
||||
class="_toggle_14xdy_20"
|
||||
for="array-0-2"
|
||||
>
|
||||
<font-awesome-icon-stub
|
||||
@@ -138,18 +138,18 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
|
||||
/>
|
||||
</label>
|
||||
<div
|
||||
class="_sub_eg159_14"
|
||||
class="_sub_14xdy_14"
|
||||
>
|
||||
<div
|
||||
class="_item_eg159_1"
|
||||
class="_item_14xdy_1"
|
||||
style="transition-delay: 0s;"
|
||||
>
|
||||
<div
|
||||
class="_pill_eg159_51 _mappable_eg159_70"
|
||||
class="_pill_14xdy_51 _mappable_14xdy_70"
|
||||
title="string"
|
||||
>
|
||||
<span
|
||||
class="_label_eg159_89"
|
||||
class="_label_14xdy_89"
|
||||
data-depth="2"
|
||||
data-name="string[0]"
|
||||
data-path="[\\"hobbies\\"][0]"
|
||||
@@ -164,14 +164,14 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
|
||||
hobbies
|
||||
</span>
|
||||
<span
|
||||
class="_arrayIndex_eg159_94"
|
||||
class="_arrayIndex_14xdy_94"
|
||||
>
|
||||
[0]
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="_text_eg159_100"
|
||||
class="_text_14xdy_100"
|
||||
>
|
||||
surfing
|
||||
</span>
|
||||
@@ -180,15 +180,15 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div
|
||||
class="_item_eg159_1"
|
||||
class="_item_14xdy_1"
|
||||
style="transition-delay: 0.033s;"
|
||||
>
|
||||
<div
|
||||
class="_pill_eg159_51 _mappable_eg159_70"
|
||||
class="_pill_14xdy_51 _mappable_14xdy_70"
|
||||
title="string"
|
||||
>
|
||||
<span
|
||||
class="_label_eg159_89"
|
||||
class="_label_14xdy_89"
|
||||
data-depth="2"
|
||||
data-name="string[1]"
|
||||
data-path="[\\"hobbies\\"][1]"
|
||||
@@ -203,14 +203,14 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
|
||||
hobbies
|
||||
</span>
|
||||
<span
|
||||
class="_arrayIndex_eg159_94"
|
||||
class="_arrayIndex_14xdy_94"
|
||||
>
|
||||
[1]
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="_text_eg159_100"
|
||||
class="_text_14xdy_100"
|
||||
>
|
||||
traveling
|
||||
</span>
|
||||
@@ -235,7 +235,7 @@ exports[`RunDataJsonSchema.vue > renders schema for data 1`] = `
|
||||
exports[`RunDataJsonSchema.vue > renders schema for empty data 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="_schemaWrapper_1x7h2_1"
|
||||
class="_schemaWrapper_5xhkc_1"
|
||||
>
|
||||
<div
|
||||
class="n8n-info-tip _info_3egb8_33 _note_3egb8_16 _base_3egb8_1 _bold_3egb8_12"
|
||||
|
||||
Reference in New Issue
Block a user