Skip to content

Commit

Permalink
chore: editor structural update
Browse files Browse the repository at this point in the history
  • Loading branch information
@henrynoowah
henrynoowah committed Jan 27, 2025
1 parent 2de378c commit 30c9c3f
Show file tree
Hide file tree
Showing 6 changed files with 114 additions and 88 deletions.
140 changes: 86 additions & 54 deletions packages/ui/src/components/editor/Editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,13 @@ import {
rectSortingStrategy,
SortableContext,
} from "@dnd-kit/sortable";
import { forwardRef, lazy, useImperativeHandle, useState } from "react";
import {
forwardRef,
lazy,
useEffect,
useImperativeHandle,
useState,
} from "react";
import { FormProvider, useFieldArray, useForm } from "react-hook-form";
import { twMerge } from "tailwind-merge";
import { v4 as uuidv4 } from "uuid";
Expand All @@ -41,12 +47,12 @@ const Editor = forwardRef<
},
EditorProps
>(({ view = "web", onSubmit, children }: EditorProps, ref) => {
const { data, selectedSection, selectedSectionRef, editorRef } =
useEditorContext();
const { data, selectedSectionRef, editorRef } = useEditorContext();

if (editorRef) {
useEffect(() => {
console.log("editorRef", editorRef.current);
editorRef.current = ref;
}
}, [editorRef, ref]);

const methods = useForm<Page>({
values: data,
Expand Down Expand Up @@ -160,7 +166,7 @@ const Editor = forwardRef<
// ? Apply container properties
className={twMerge(
"nwcb-w-full nwcb-relative nwcb-ring-2 nwcb-transition nwcb-duration-200 nwcb-ease-in-out",
selectedSection?.id === section.id
selectedSectionRef?.current?.section?.id === section.id
? "nwcb-ring-blue-400"
: "nwcb-ring-blue-400/20 hover:nwcb-ring-blue-400"
)}
Expand All @@ -184,14 +190,12 @@ const Editor = forwardRef<
section={section}
index={i}
onSectionSelect={() => {
console.log("test");
setSelectedSectionId(section.id);
}}
onSwap={(section) => updateSection(i, section)}
onBlockSelect={(block) => {
if (block) {
console.log(
selectedSectionRef?.current?.selectedBlock
);
// setSelectedBlock?.(block);
}
}}
Expand Down Expand Up @@ -243,29 +247,28 @@ Editor.displayName = "Editor";
export default Editor;

const RootContextMenu = ({ children }: { children: React.ReactNode }) => {
const {
data,
insertSection,
addBlock,
selectedSection,
selectedBlock,
updateSelectedSection,
selectedSectionRef,
} = useEditorContext();
const { insertSection, addBlock, updateSelectedSection, selectedSectionRef } =
useEditorContext();
return (
<ContextMenu
items={[
selectedBlock
selectedSectionRef?.current?.selectedBlock
? {
label: `Block: ${selectedBlock.type.toUpperCase()}`,
label: `Block: ${selectedSectionRef?.current?.selectedBlock.type.toUpperCase()}`,
items: [
{
label: "Move to front",
onClick: () => {
if (selectedBlock && selectedSection?.blocks) {
const otherBlocks = selectedSection?.blocks.filter(
(block) => block.id !== selectedBlock?.id
);
if (
selectedSectionRef?.current?.selectedBlock &&
selectedSectionRef?.current?.section?.blocks
) {
const otherBlocks =
selectedSectionRef?.current?.section?.blocks.filter(
(block) =>
block.id !==
selectedSectionRef?.current?.selectedBlock?.id
);

// Update orders - other blocks move back, selected block becomes last
const updatedBlocks = otherBlocks?.map(
Expand All @@ -281,18 +284,18 @@ const RootContextMenu = ({ children }: { children: React.ReactNode }) => {

const lastOrder = updatedBlocks.length + 1;
const updatedSelectedBlock = {
...selectedBlock,
...selectedSectionRef?.current?.selectedBlock,
order: lastOrder,
style: {
...selectedBlock.style,
...selectedSectionRef?.current?.selectedBlock?.style,
zIndex: lastOrder,
},
};

const blocks = [...updatedBlocks, updatedSelectedBlock];

updateSelectedSection?.({
...selectedSection,
...selectedSectionRef?.current?.section,
blocks,
});
}
Expand All @@ -301,16 +304,22 @@ const RootContextMenu = ({ children }: { children: React.ReactNode }) => {
{
label: "Send to back",
onClick: () => {
if (selectedBlock && selectedSection) {
const otherBlocks = selectedSection.blocks.filter(
(block) => block.id !== selectedBlock?.id
);
if (
selectedSectionRef?.current?.selectedBlock &&
selectedSectionRef?.current?.section?.blocks
) {
const otherBlocks =
selectedSectionRef?.current?.section?.blocks.filter(
(block) =>
block.id !==
selectedSectionRef?.current?.selectedBlock?.id
);

const updatedSelectedBlock = {
...selectedBlock,
...selectedSectionRef?.current?.selectedBlock,
order: 0,
style: {
...selectedBlock.style,
...selectedSectionRef?.current?.selectedBlock?.style,
zIndex: 0,
},
};
Expand All @@ -327,7 +336,7 @@ const RootContextMenu = ({ children }: { children: React.ReactNode }) => {
const blocks = [...updatedBlocks, updatedSelectedBlock];

updateSelectedSection?.({
...selectedSection,
...selectedSectionRef?.current?.section,
blocks,
});
}
Expand All @@ -336,34 +345,47 @@ const RootContextMenu = ({ children }: { children: React.ReactNode }) => {
{
label: "Duplicate Block",
onClick: () => {
if (selectedBlock && selectedSection) {
const newBlockIndex = selectedSection.blocks.length + 1;
if (
selectedSectionRef?.current?.selectedBlock &&
selectedSectionRef?.current?.section?.blocks
) {
const newBlockIndex =
selectedSectionRef?.current?.section?.blocks.length + 1;
const duplicatedBlock = {
...selectedBlock,
...selectedSectionRef?.current?.selectedBlock,
id: "block-" + uuidv4(),
style: {
...selectedBlock.style,
...selectedSectionRef?.current?.selectedBlock?.style,
zIndex: newBlockIndex,
},
order: newBlockIndex,
};

updateSelectedSection?.({
...selectedSection,
blocks: [...selectedSection.blocks, duplicatedBlock],
...selectedSectionRef?.current?.section,
blocks: [
...selectedSectionRef?.current?.section?.blocks,
duplicatedBlock,
],
});
}
},
},
{
label: "Delete",
onClick: () => {
if (selectedBlock && selectedSection) {
const blocks = selectedSection.blocks.filter(
(block) => block.id !== selectedBlock?.id
);
if (
selectedSectionRef?.current?.selectedBlock &&
selectedSectionRef?.current?.section?.blocks
) {
const blocks =
selectedSectionRef?.current?.section?.blocks.filter(
(block) =>
block.id !==
selectedSectionRef?.current?.selectedBlock?.id
);
updateSelectedSection?.({
...selectedSection,
...selectedSectionRef?.current?.section,
blocks,
});
}
Expand All @@ -378,8 +400,7 @@ const RootContextMenu = ({ children }: { children: React.ReactNode }) => {
{
label: "Insert Section",
onClick: () => {
const order = selectedSection?.order ?? 0;
console.log("order", order);
const order = selectedSectionRef?.current?.section?.order ?? 0;
insertSection?.(order, {
order,
id: "section-" + uuidv4(),
Expand Down Expand Up @@ -417,8 +438,9 @@ const RootContextMenu = ({ children }: { children: React.ReactNode }) => {
{
label: "Add New Block",
onClick: () => {
if (selectedSection) {
const nextIndex = selectedSection.blocks.length + 1;
if (selectedSectionRef?.current?.section?.blocks) {
const nextIndex =
selectedSectionRef?.current?.section?.blocks.length + 1;
const block: Block = {
id: "block-" + uuidv4(),
type: "html",
Expand All @@ -430,7 +452,10 @@ const RootContextMenu = ({ children }: { children: React.ReactNode }) => {
order: nextIndex,
},
};
if (selectedSection.style?.display === "grid") {
if (
selectedSectionRef?.current?.section?.style?.display ===
"grid"
) {
addBlock?.({
...block,
id: "block-" + uuidv4(),
Expand Down Expand Up @@ -458,11 +483,18 @@ const RootContextMenu = ({ children }: { children: React.ReactNode }) => {
},
]}
onOpenChange={() => {
console.log("open");
console.log("selectedSection", selectedSectionRef?.current?.section.id);
console.log("selectedBlock", selectedBlock);
console.log(
"cm-selectedSection",
selectedSectionRef?.current?.section.id
);
console.log(
"cm-selectedBlock",
selectedSectionRef?.current?.selectedBlock?.id
);
}}
onContextMenu={(e) => {
console.log("cm-contextMenu", e);
}}
onContextMenu={(e) => {}}
>
<div>{children}</div>
</ContextMenu>
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/editor/EditorContextProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export const EditorContextProvider = ({
};

const insertSectionHandler = (index: number, section: Section) => {
console.log("insertSectionHandler", editorRef.current);
if (editorRef.current) {
editorRef.current.insertSection(index, section);
}
Expand All @@ -72,9 +73,8 @@ export const EditorContextProvider = ({
return (
<EditorContext.Provider
value={{
view,
data,
selectedSection: selectedSectionRef.current?.section,
selectedBlock: selectedSectionRef.current?.selectedBlock,
updateSelectedSection: updateSectionHandler,
updateSelectedBlock: updateBlockHandler,
addBlock: addBlockHandler,
Expand Down
14 changes: 0 additions & 14 deletions packages/ui/src/components/editor/plugins/settings/Settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,20 +67,6 @@ const SectionSetting = () => {
value={section?.style}
onChange={(style) => {
if (style.display === "flex" || style.display === "grid") {
console.log(
section?.blocks.map((block) => ({
...block,
style: {
...block.style,
position: "relative",
display: "block",
width: "100%",
height: "100%",
top: 0,
left: 0,
},
}))
);
onChange({
...section,
style,
Expand Down
Loading

0 comments on commit 30c9c3f

Please sign in to comment.