Skip to content

Commit 7c250be

Browse files
KingCosmicKingCosmic
authored
Merge pull request #142 from KingCosmic/dev
fixed editor bug
2 parents ad502a7 + b1a7a8e commit 7c250be

5 files changed

Lines changed: 136 additions & 29 deletions

File tree

‎src/components/designer/components/searchbar.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { Script } from '@/types/script';
2+
import { useNode } from '@craftjs/core'
3+
4+
type SearchbarProps = {
5+
placeholder: string;
6+
script?: Script;
7+
}
8+
9+
function Searchbar({}: SearchbarProps) {
10+
const { connectors: { connect, drag } } = useNode()
11+
12+
return (
13+
// @ts-ignore
14+
<div ref={ref => connect(drag(ref!))}>
15+
{/* <CompSearchbar filters={[]} placeholder={placeholder} onSearch={() => {}} /> */}
16+
</div>
17+
)
18+
}
19+
20+
export function SearchbarPreview() {
21+
return (
22+
<></>
23+
// <CompSearchbar filters={[]} placeholder='testing' onSearch={() => {}} />
24+
)
25+
}
26+
27+
function SearchbarSettings() {
28+
// const { id, actions: { setProp }, placeholder, script } = useNode(node => ({
29+
// placeholder: node.data.props.placeholder,
30+
// script: node.data.props.script
31+
// }))
32+
33+
// const localParams = useLocalState(id)
34+
35+
// const editor = editorState.useValue()
36+
// const versionEdits = useVersionEdits<SystemData>(editor.versionId)
37+
38+
// const types: SystemType[] = useMemo(() => [
39+
// versionEdits?.data.defaultCharacterData._type,
40+
// ...(versionEdits?.data.types ?? [])
41+
// ], [versionEdits])
42+
43+
return (
44+
<>
45+
46+
</>
47+
)
48+
}
49+
50+
Searchbar.craft = {
51+
rules: {},
52+
related: {
53+
settings: SearchbarSettings
54+
}
55+
}
56+
57+
export default Searchbar

‎src/components/providers/editor-provider.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Editor as EditorContext, SerializedNodes } from '@craftjs/core'
2-
import { createContext, useContext, useState, useCallback, ReactNode } from 'react'
1+
import { Editor as EditorContext } from '@craftjs/core'
2+
import { createContext, useContext, useCallback, ReactNode, useRef } from 'react'
33

44
import Container from '@/components/designer/components/Container/Editor'
55
import EditorSelect from '@/components/designer/components/Select/Editor'
@@ -8,7 +8,7 @@ import Text from '@/components/designer/components/Text/Editor'
88
import Input from '@/components/designer/components/Input/Editor'
99
import Separator from '@/components/designer/components/Divider'
1010

11-
type NodeChangeHandler = (query: { serialize: () => SerializedNodes }) => void
11+
type NodeChangeHandler = (lexical: string) => void
1212

1313
interface EditorProviderContextType {
1414
setOnNodeChange: (handler: NodeChangeHandler | null) => void
@@ -60,16 +60,16 @@ interface EditorProviderProps {
6060
}
6161

6262
export function EditorProvider({ children }: EditorProviderProps) {
63-
const [onNodeChangeHandler, setOnNodeChangeHandler] = useState<NodeChangeHandler | null>(null)
63+
const onNodeChangeHandlerRef = useRef<NodeChangeHandler | null>(null)
6464

6565
const handleNodeChange = useCallback((query: any) => {
66-
if (onNodeChangeHandler) {
67-
onNodeChangeHandler(query)
66+
if (onNodeChangeHandlerRef.current) {
67+
onNodeChangeHandlerRef.current(query.serialize())
6868
}
69-
}, [onNodeChangeHandler])
69+
}, [])
7070

7171
const setOnNodeChange = useCallback((handler: NodeChangeHandler | null) => {
72-
setOnNodeChangeHandler(() => handler)
72+
onNodeChangeHandlerRef.current = handler
7373
}, [])
7474

7575
return (

‎src/modals/editors/edit-number/index.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Button } from "@/components/ui/button";
2+
import { Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
3+
import { Input } from "@/components/ui/input";
4+
import { closeModal } from "@/state/modals";
5+
import { useCallback, useState } from "react";
6+
7+
interface Props {
8+
id: number;
9+
data: number;
10+
title?: string;
11+
12+
onSave(newData: number): void;
13+
onDelete?(): void;
14+
}
15+
16+
export default function EditNumber({ id, data, title = 'Edit number', onSave, onDelete }: Props) {
17+
const [number, setNumber] = useState(data)
18+
19+
const requestClose = useCallback(() => closeModal(id), [id])
20+
21+
return (
22+
<Dialog open onOpenChange={requestClose}>
23+
<DialogContent className="sm:max-w-[425px] flex flex-col">
24+
<DialogHeader>
25+
<DialogTitle>{title}</DialogTitle>
26+
</DialogHeader>
27+
<DialogBody>
28+
<Input type='number' placeholder='baba yaga' value={number} onChange={v => setNumber(v.currentTarget.valueAsNumber)} />
29+
</DialogBody>
30+
<DialogFooter>
31+
<Button variant={onDelete ? 'destructive' : 'outline'}
32+
onClick={() => {
33+
if (onDelete) onDelete()
34+
requestClose()
35+
}}
36+
>
37+
{(onDelete) ? 'Delete' : 'Close'}
38+
</Button>
39+
40+
<Button color='primary' onClick={() => {
41+
onSave(number)
42+
requestClose()
43+
}}>Update</Button>
44+
</DialogFooter>
45+
</DialogContent>
46+
</Dialog>
47+
)
48+
}

‎src/routes/editors/system/editor/index.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,8 @@ const EditorTab: React.FC<EditorTabProps> = ({ versionedResource }) => {
2626

2727
useEffect(() => {
2828
// Set the node change handler with access to versionedResource
29-
setOnNodeChange((query) => {
30-
const serialized = JSON.stringify(query.serialize())
31-
storeMutation(versionedResource.local_id, updateLexical(versionedResource.local_id, serialized))
29+
setOnNodeChange((lexical: string) => {
30+
storeMutation(versionedResource.local_id, updateLexical(versionedResource.local_id, lexical))
3231
})
3332

3433
// Clean up when component unmounts
@@ -40,15 +39,16 @@ const EditorTab: React.FC<EditorTabProps> = ({ versionedResource }) => {
4039
useEffect(() => {
4140
let lexical = (versionedResource.data as any).pages.find((p: PageData) => p.name === editor.characterPage)?.lexical
4241

43-
// @ts-ignore
44-
console.log(versionedResource.data.pages.map(p => p.name))
45-
console.log(editor.characterPage)
46-
console.log(lexical)
47-
4842
if (!lexical) lexical = defaultLexical
4943

50-
actions.deserialize(lz.decompress(lz.decodeBase64(lexical)))
51-
}, [versionedResource.data.pages, editor.characterPage])
44+
try {
45+
actions.deserialize(lz.decompress(lz.decodeBase64(lexical)))
46+
} catch (error) {
47+
console.error('Error deserializing lexical:', error)
48+
// Fallback to default if there's an error
49+
actions.deserialize(lz.decompress(lz.decodeBase64(defaultLexical)))
50+
}
51+
}, [editor.characterPage])
5252

5353
return (
5454
<div className='mt-3 border-2 border-primary border-dashed rounded-lg dark:border-muted'>

‎src/utils/verse/showModal.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { useScriptTypes } from '@/components/providers/script-types';
2+
import EditNumber from '@/modals/editors/edit-number';
23
import EditObject from '@/modals/editors/edit-object';
4+
import EditString from '@/modals/editors/edit-string';
35
import { handleCallback, openModal, registerCallback } from '@/state/modals';
46
import { ReactNode } from 'react'
57

@@ -25,17 +27,17 @@ export default (type: string, title: string, value: any): Promise<ModalResponse>
2527
)
2628
};
2729
break;
28-
// case 'edit_number':
29-
// Comp = ({ id }) => <EditNumberModal id={id} title={title} data={value}
30-
// onSave={(newNumber) => handleCallback(id, 'save', +newNumber)}
31-
// />
32-
// break;
33-
// case 'edit_string':
34-
// Comp = ({ id }) => <EditStringModal id={id} title={title} data={value}
35-
// onDelete={() => handleCallback(id, 'delete', null)}
36-
// onSave={(newString) => handleCallback(id, 'save', newString)}
37-
// />
38-
// break;
30+
case 'edit_number':
31+
Comp = ({ id }) => <EditNumber id={id} title={title} data={value}
32+
onSave={(newNumber) => handleCallback(id, 'save', newNumber)}
33+
/>
34+
break;
35+
case 'edit_string':
36+
Comp = ({ id }) => <EditString id={id} title={title} data={value}
37+
onDelete={() => handleCallback(id, 'delete', null)}
38+
onSave={(newString) => handleCallback(id, 'save', newString)}
39+
/>
40+
break;
3941
}
4042

4143
return new Promise((resolve) => {

0 commit comments

Comments
 (0)