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.

Sign up for GitHub

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

fix: incorrect focus on blocks field instead of new block #197

Merged
merged 1 commit into from
Aug 21, 2024
Merged

fix: incorrect focus on blocks field instead of new block #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 9 additions & 3 deletions src/liveEditor/components/emptyBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React from "react";
import { CslpData } from "../../cslp/types/cslp.types";
import liveEditorPostMessage from "../utils/liveEditorPostMessage";
import { ISchemaFieldMap } from "../utils/types/index.types";
import { LiveEditorPostMessageEvents } from "../utils/types/postMessage.types";
import { observeParentAndFocusNewInstance } from "../utils/multipleElementAddButton";

interface EmptyBlockProps {
details: {
Expand All @@ -10,20 +12,24 @@ interface EmptyBlockProps {
}
}

export function EmptyBlock(props: EmptyBlockProps) {
export function EmptyBlock(props: EmptyBlockProps): JSX.Element {

const { details } = props

const blockParentName = details.fieldSchema.display_name;

function sendAddInstanceEvent() {
liveEditorPostMessage?.send(
async function sendAddInstanceEvent() {
await liveEditorPostMessage?.send(
LiveEditorPostMessageEvents.ADD_INSTANCE,
{
fieldMetadata: details.fieldMetadata,
index: 0,
}
);
observeParentAndFocusNewInstance({
parentCslp: details.fieldMetadata.cslpValue,
index: 0,
})
}

return (
Expand Down
106 changes: 54 additions & 52 deletions src/liveEditor/listeners/mouseClick.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,16 @@ async function handleEditorInteraction(
});
}

// if the selected element is our empty block element, return
if (
editableElement.classList.contains(
"visual-editor__empty-block-parent"
) ||
editableElement.classList.contains("visual-editor__empty-block")
) {
return;
}

// when previous and current selected element is same, return.
// this also avoids inserting psuedo-editable field (field data is
// not equal to text content in DOM) when performing mouse
Expand All @@ -107,65 +117,57 @@ async function handleEditorInteraction(
VisualEditor.VisualEditorGlobalState.value.previousSelectedEditableDOM =
editableElement;

if (
!editableElement.classList.contains(
"visual-editor__empty-block-parent"
) &&
!editableElement.classList.contains("visual-editor__empty-block")
) {
addOverlay({
overlayWrapper: params.overlayWrapper,
resizeObserver: params.resizeObserver,
editableElement: editableElement,
});

addFocusedToolbar({
eventDetails: eventDetails,
focusedToolbar: params.focusedToolbar,
});

const { content_type_uid, fieldPath } = eventDetails.fieldMetadata;

const fieldSchema = await FieldSchemaMap.getFieldSchema(
content_type_uid,
fieldPath
);

// after field schema is available re-add disabled overlay
const { isDisabled } = isFieldDisabled(fieldSchema, eventDetails);
if (isDisabled) {
addOverlay({
overlayWrapper: params.overlayWrapper,
resizeObserver: params.resizeObserver,
editableElement: editableElement,
isFieldDisabled: true,
});

addFocusedToolbar({
eventDetails: eventDetails,
focusedToolbar: params.focusedToolbar,
});

const { content_type_uid, fieldPath } = eventDetails.fieldMetadata;

const fieldSchema = await FieldSchemaMap.getFieldSchema(
content_type_uid,
fieldPath
);

// after field schema is available re-add disabled overlay
const { isDisabled } = isFieldDisabled(fieldSchema, eventDetails);
if (isDisabled) {
addOverlay({
overlayWrapper: params.overlayWrapper,
resizeObserver: params.resizeObserver,
editableElement: editableElement,
isFieldDisabled: true,
});
}

// This is most probably redundant code, as the handleIndividualFields function
// takes care of this
// TODO: Remove this
// if (
// fieldSchema.data_type === "block" ||
// fieldSchema.multiple ||
// (fieldSchema.data_type === "reference" &&
// // @ts-ignore
// fieldSchema.field_metadata.ref_multiple)
// ) {
// handleAddButtonsForMultiple(eventDetails, {
// editableElement: editableElement,
// visualEditorContainer: params.visualEditorContainer,
// resizeObserver: params.resizeObserver,
// });
// } else {
// removeAddInstanceButtons({
// eventTarget: params.event.target,
// visualEditorContainer: params.visualEditorContainer,
// overlayWrapper: params.overlayWrapper,
// });
// }
}

// This is most probably redundant code, as the handleIndividualFields function
// takes care of this
// TODO: Remove this
// if (
// fieldSchema.data_type === "block" ||
// fieldSchema.multiple ||
// (fieldSchema.data_type === "reference" &&
// // @ts-ignore
// fieldSchema.field_metadata.ref_multiple)
// ) {
// handleAddButtonsForMultiple(eventDetails, {
// editableElement: editableElement,
// visualEditorContainer: params.visualEditorContainer,
// resizeObserver: params.resizeObserver,
// });
// } else {
// removeAddInstanceButtons({
// eventTarget: params.event.target,
// visualEditorContainer: params.visualEditorContainer,
// overlayWrapper: params.overlayWrapper,
// });
// }
liveEditorPostMessage?.send(LiveEditorPostMessageEvents.FOCUS_FIELD, {
DOMEditStack: getDOMEditStack(editableElement),
});
Expand Down
3 changes: 2 additions & 1 deletion src/liveEditor/utils/handleIndividualFields.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ export async function handleIndividualFields(
if (lastEditedField !== editableElement) {
const addButtonLabel =
fieldSchema.data_type === "blocks"
? `Add ${fieldSchema.display_name ?? "Modular Block"}`
? // ? `Add ${fieldSchema.display_name ?? "Modular Block"}`
"Add Section"
: undefined;

handleAddButtonsForMultiple(
Expand Down
9 changes: 6 additions & 3 deletions src/liveEditor/utils/multipleElementAddButton.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,13 +212,13 @@ export function removeAddInstanceButtons(
* found in later mutations and we can focus + disconnect then.
* We also ensure there is only one setTimeout scheduled.
*/
function observeParentAndFocusNewInstance({
export function observeParentAndFocusNewInstance({
parentCslp,
index,
}: {
parentCslp: string;
index: number;
}) {
}): void {
const parent = document.querySelector(
`[data-cslp='${parentCslp}']`
) as HTMLElement;
Expand All @@ -241,7 +241,10 @@ function observeParentAndFocusNewInstance({
// So currently for a singleline multiple field, the form opens but we
// come back to the canvas.
// TODO - maybe we should not focus the content-editable
newInstance.click();
// TODO - temp fix. We remove our empty block div once the new block arrives
// but we focus the element before that and then the block shifts.
// For some reason, the window resize event also does not trigger
setTimeout(() => newInstance.click(), 150);
observer.disconnect();
hasObserverDisconnected = true;
return;
Expand Down
14 changes: 8 additions & 6 deletions src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,8 @@ div.multiple div.cslp-tooltip-child:hover:before {

height: 32px;
min-width: 32px;
max-width: 120px;
max-width: 180px;
padding: 8px 6px;
transform: translate(-50%, -50%);

font-weight: 600;
Expand All @@ -159,7 +160,7 @@ div.multiple div.cslp-tooltip-child:hover:before {

display: grid;
grid-template-columns: min-content 0fr;
align-items: center;
align-content: center;
gap: 0;

transition: grid-template-columns 0.25s, left 0.15s ease-in,
Expand All @@ -168,6 +169,7 @@ div.multiple div.cslp-tooltip-child:hover:before {
&:has(.visual-editor__add-button-label):hover {
grid-template-columns: min-content 1fr;
gap: 8px;
padding: 8px 16px;
}
}

Expand Down Expand Up @@ -341,11 +343,11 @@ div.multiple div.cslp-tooltip-child:hover:before {
color: #f9f8ff;
}

.visual-editor__button--edit svg{
.visual-editor__button--edit svg {
height: 16px;
width: 16px;
}
.visual-editor__button--edit svg path{
.visual-editor__button--edit svg path {
fill: #475161;
}
.visual-editor__field-icon svg {
Expand Down Expand Up @@ -542,8 +544,8 @@ div.multiple div.cslp-tooltip-child:hover:before {
.visual-editor__default-cursor--disabled {
cursor: none;
}
.visual-editor__draft-field{
outline: 2px dashed var(--Brand-Colors-Brand-Orange, #EB5646);
.visual-editor__draft-field {
outline: 2px dashed var(--Brand-Colors-Brand-Orange, #eb5646);
}

[data-cslp] [contenteditable="true"] {
Expand Down