🇮🇳India @omkar-pd

Created CodeEditor404 component and CodeEditor‎Wrapper to render CodeEditor404 component on 404 error.

omkar-pd → made their first commit to this issue’s fork.

omkar-pd → made their first commit to this issue’s fork.

Or we could use useRef to fix the issue

diff --git a/ui/src/components/form/components/TextFieldAutocomplete.tsx b/ui/src/components/form/components/TextFieldAutocomplete.tsx
index 762e9b47..6ff8adee 100644
--- a/ui/src/components/form/components/TextFieldAutocomplete.tsx
+++ b/ui/src/components/form/components/TextFieldAutocomplete.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { TextField as RadixThemesTextField } from '@radix-ui/themes';
-import { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import type { MutableRefObject } from 'react';
 import type { Attributes } from '@/types/DrupalAttribute';
 import styles from './TextField.module.css';
@@ -40,6 +40,12 @@ const TextFieldAutocomplete = forwardRef(
     attributes['data-xb-no-update'] = '';
 
     const inputRef = ref as MutableRefObject<HTMLInputElement>;
+    const onChangeRef = useRef(attributes.onChange);
+
+    // Update ref when onChange changes
+    useEffect(() => {
+      onChangeRef.current = attributes.onChange;
+    }, [attributes.onChange]);
 
     // Create a version of the ref that will appease Typescript.
     useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
@@ -55,7 +61,7 @@ const TextFieldAutocomplete = forwardRef(
       inputRef.current.removeAttribute('data-xb-no-update');
       setTimeout(() => {
         // Call the onChange listener so the Redux store is updated.
-        if (attributes?.onChange) {
+        if (onChangeRef.current) {
           const event = new Event('change');
 
           inputRef.current.value = e.detail.target.value;
@@ -63,8 +69,8 @@ const TextFieldAutocomplete = forwardRef(
             writable: false,
             value: inputRef.current,
           });
-          if (typeof attributes?.onChange === 'function') {
-            attributes.onChange(event);
+          if (typeof onChangeRef.current === 'function') {
+            onChangeRef.current(event);
           }
         }
       });
@@ -100,14 +106,14 @@ const TextFieldAutocomplete = forwardRef(
           // If the input is blurred, remove the attribute that prevents real
           // time preview updates.
           inputRef.current.removeAttribute('data-xb-no-update');
-          if (attributes?.onChange) {
+          if (onChangeRef.current) {
             const event = new Event('change');
             Object.defineProperty(event, 'target', {
               writable: false,
               value: inputRef.current,
             });
-            if (typeof attributes?.onChange === 'function') {
-              attributes.onChange(event);
+            if (typeof onChangeRef.current === 'function') {
+              onChangeRef.current(event);
             }
           }
         };

Adding attributes.onChange in dependency array fixes the issue.

While this causes the effect to run multiple times as onChange reference update, but I think it's necessary to ensure event handlers always have access to the current state.

omkar-pd → made their first commit to this issue’s fork.

omkar-pd → made their first commit to this issue’s fork.

omkar-pd → made their first commit to this issue’s fork.

omkar-pd → changed the visibility of the branch 3514551-consider-enabling-claro to active.

omkar-pd → made their first commit to this issue’s fork.

If we click "remove from components" we get The 'imported_js_components' field is required when 'source_code_js' or 'compiled_js' is provided

and if we click on delete we get 403 forbidden with error There is other configuration depending on this code component.

Created new PR from https://git.drupalcode.org/project/experience_builder/-/merge_requests/6...

omkar-pd → made their first commit to this issue’s fork.

omkar-pd → made their first commit to this issue’s fork.

omkar-pd → made their first commit to this issue’s fork.

It looks like the "Create new revision" checkbox value (revision = true) isn't returned in the entity_form_fields data because of the way we filter form values here:

return Query::parse(http_build_query(array_intersect_key($values, $entity->toArray())));

However, revision is not part of $entity->toArray(), so it gets stripped out by array_intersect_key(), even though it exists in $values

Need to fix phpstan.

griffynh → credited omkar-pd → .

stylelint failed.

omkar-pd → made their first commit to this issue’s fork.

omkar-pd → made their first commit to this issue’s fork.

Tested this and it's working as expected. 🎉

kristen pol → credited omkar-pd → .

kristen pol → credited omkar-pd → .

kristen pol → credited omkar-pd → .

kristen pol → credited omkar-pd → .

kristen pol → credited omkar-pd → .

Yes, @hooroomoo, I'm using chrome.

Let me test this in Firefox.

Currently, it scrolls while dragging in the layers menu.

Code Looks good. But need approval from code owner. so keeping this in Needs Review.

+1 #13 🐛 The context menu is not accessible for JS components from library Active

I tried debugging this a couple of days ago and came to the same conclusion. I attempted to reattach the event listeners, but it didn’t work. I also tried replacing the cloned element with the original one, but the item in the event is different from the original element—it is the rendered output of that component.

Also, the preview is not working for existing components (eg- Heading, Hero) once dragged to Canvas.

This will not solve the issue for slots (one col, two col). Changes should be made in SlotOverlay.tsx to also solve that issue.

I have rebased with the latest changes. All tests are passing except for one, which remains unaffected by the code changes.img[src*="/experience_builder/components/image/600x400.png"]' was found in iframe '[data-xb-preview="lg"][data-test-xb-content-initialized="true"][data-xb-swap-active="true"]': expected **false** to equal **true**

omkar-pd → created an issue. See original summary → .

omkar-pd → made their first commit to this issue’s fork.

🙌🙌👏👏

I think the work on default_markup for code components is still pending.

default_markup: "@todo Make something 🆒 in https://www.drupal.org/project/experience_builder/issues/3498889" - Which appears to be fixed issue.

The component preview is now loading, but it appears empty. Debugging the issue.

omkar-pd → made their first commit to this issue’s fork.

omkar-pd → made their first commit to this issue’s fork.

omkar-pd → made their first commit to this issue’s fork.

Made the requested changes.

omkar-pd → made their first commit to this issue’s fork.

omkar-pd → created an issue.

omkar-pd → made their first commit to this issue’s fork.

Raised PR with Proposed resolution.

omkar-pd → made their first commit to this issue’s fork.

I've implemented the changes as mentioned in #5. Keeping this in "Needs Review" since tests are still required, allowing someone else to pick it up and continue

Sorry, I mean I'll look into it.

Thanks @wim,

Please look into it.

In AutoSaveManager.php there is a @todo Update label from incoming entity data once it exists for label.
https://git.drupalcode.org/project/experience_builder/-/blob/0.x/src/Aut...

Is it the right change?

omkar-pd → made their first commit to this issue’s fork.

omkar-pd → made their first commit to this issue’s fork.

pipeline failed

omkar-pd → created an issue.

Changes look good.

Pipeline passed!

omkar-pd → made their first commit to this issue’s fork.

griffynh → credited omkar-pd → .

Pipeline passed.

omkar-pd → made their first commit to this issue’s fork.

Thank you for the fix @atul_ghate and @a.dmitriiev

omkar-pd → created an issue.

omkar-pd → made their first commit to this issue’s fork.

kristen pol → credited omkar-pd → .

omkar-pd → made their first commit to this issue’s fork.

Need to fix Phpcs after updating core.phpcs.xml.dist

omkar-pd → created an issue.

Fixed that @traviscarden.