blsmedia/bot
2
0
Fork 0
Code Activity

refactor(editor): ♻️ Undo / Redo buttons + structure refacto

Browse Source 
Yet another huge refacto... While implementing undo and redo features I understood that I updated the stored typebot too many times (i.e. on each key input) so I had to rethink it entirely. I also moved around some files.
This commit is contained in:
Baptiste Arnaud
2022-02-02 08:05:02 +01:00
parent fc1d654772
commit 8a350eee6c
153 changed files with 1512 additions and 1352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/builder/components/shared/CodeEditor.tsx
View File

@ -2,7 +2,7 @@ import { Box, BoxProps } from '@chakra-ui/react'
import { EditorState, EditorView, basicSetup } from '@codemirror/basic-setup'
import { json } from '@codemirror/lang-json'
import { css } from '@codemirror/lang-css'
import { useEffect, useRef } from 'react'
import { useEffect, useRef, useState } from 'react'
type Props = {
value: string
@ -19,6 +19,7 @@ export const CodeEditor = ({
}: Props & Omit<BoxProps, 'onChange'>) => {
const editorContainer = useRef<HTMLDivElement | null>(null)
const editorView = useRef<EditorView | null>(null)
const [plainTextValue, setPlainTextValue] = useState(value)
useEffect(() => {
if (!editorView.current || !isReadOnly) return
@ -28,11 +29,17 @@ export const CodeEditor = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [value])
useEffect(() => {
if (!onChange || plainTextValue === value) return
onChange(plainTextValue)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [plainTextValue])
useEffect(() => {
if (!editorContainer.current) return
const updateListenerExtension = EditorView.updateListener.of((update) => {
if (update.docChanged && onChange)
onChange(update.state.doc.toJSON().join(' '))
setPlainTextValue(update.state.doc.toJSON().join(' '))
})
const extensions = [
updateListenerExtension,