fix anoying bug that not allows edit in update mode

src/common/components/atoms/icons/canvas.tsx

@@ -15,9 +15,9 @@ export function ArcIcon2(props) {
 export function AngleIcon(props) {
     return <svg width="512" height="512" viewBox="0 0 512 512" {...props}>
         <path className="fill-secondary" d="M108.415 335.512l159.514 44.517s35.179-88.113-48.125-163.821L108.415 335.512z" opacity=".2" />
-        <path fill="none" className="stroke-secondary" strokeMiterlimit="10" stroke-width="13" d="M108.415 335.512l159.514 44.517s35.179-88.113-48.125-163.821L108.415 335.512z" />
+        <path fill="none" className="stroke-secondary" strokeMiterlimit="10" strokeWidth="13" d="M108.415 335.512l159.514 44.517s35.179-88.113-48.125-163.821L108.415 335.512z" />
         <path className="fill-secondary" d="M350.7 299.547c-7.711.001-14.94-3.433-19.573-9.73l-.064-.09c-12.326-17.555-8.77-40.957 1.594-52.571 7.698-8.628 18.431-10.443 28.706-4.849l.244.141c4.801 2.975 8.376 6.629 11.165 10.698 1.817-7.249 3.625-10.273 5.083-12.713.79-1.321 1.186-1.984 1.463-3.247l9.768 2.143c-.625 2.852-1.652 4.571-2.646 6.233-1.641 2.746-4.092 6.849-6.408 23.14.914 2.762 1.73 5.559 2.543 8.336 2.496 8.544 4.855 16.613 9.751 22.865l-7.873 6.166c-3.427-4.376-5.793-9.265-7.681-14.323-3.7 8.335-10.003 13.546-16.315 15.965-3.233 1.237-6.537 1.836-9.757 1.836zm-11.487-15.613c3.874 5.221 10.965 7.005 17.665 4.438 9.491-3.637 14.342-14.135 12.977-28.081l-.057-.578.001-.003c-2.735-7.625-6.39-14.33-13.339-18.686-7.745-4.15-13.158-.78-16.343 2.789-7.847 8.795-10.076 27.004-.904 40.121z" />
-        <path fill="none" stroke-width="13" d="M108.42 335.51l295.16 82.38" />
+        <path fill="none" strokeWidth="13" d="M108.42 335.51l295.16 82.38" />
         <circle cx="333.8" cy="94.11" r="35" className="fill-primary" />
         <path d="M355.914 78.627c8.537 12.193 5.563 29.064-6.631 37.604-12.195 8.539-29.066 5.564-37.605-6.631s-5.564-29.064 6.631-37.604 29.064-5.564 37.605 6.631m10.649-7.457c-12.672-18.096-37.615-22.492-55.709-9.822-18.096 12.67-22.496 37.613-9.824 55.709 12.672 18.098 37.613 22.495 55.709 9.824 18.095-12.672 22.495-37.613 9.824-55.711z" />
         <circle cx="108.42" cy="335.51" r="35" className="fill-primary" />
@@ -30,9 +30,9 @@ export function AngleIcon(props) {
 export function AnglePointsIcon(props) {
     return <svg width="512" height="512" viewBox="0 0 512 512" {...props}>
         <path className="fill-secondary" d="M108.415 335.512l159.514 44.517s35.179-88.113-48.125-163.821L108.415 335.512z" opacity=".2" />
-        <path fill="none" className="stroke-secondary" strokeMiterlimit="10" stroke-width="13" d="M108.415 335.512l159.514 44.517s35.179-88.113-48.125-163.821L108.415 335.512z" />
+        <path fill="none" className="stroke-secondary" strokeMiterlimit="10" strokeWidth="13" d="M108.415 335.512l159.514 44.517s35.179-88.113-48.125-163.821L108.415 335.512z" />
         <path className="fill-secondary" d="M350.7 299.547c-7.711.001-14.94-3.433-19.573-9.73l-.064-.09c-12.326-17.555-8.77-40.957 1.594-52.571 7.698-8.628 18.431-10.443 28.706-4.849l.244.141c4.801 2.975 8.376 6.629 11.165 10.698 1.817-7.249 3.625-10.273 5.083-12.713.79-1.321 1.186-1.984 1.463-3.247l9.768 2.143c-.625 2.852-1.652 4.571-2.646 6.233-1.641 2.746-4.092 6.849-6.408 23.14.914 2.762 1.73 5.559 2.543 8.336 2.496 8.544 4.855 16.613 9.751 22.865l-7.873 6.166c-3.427-4.376-5.793-9.265-7.681-14.323-3.7 8.335-10.003 13.546-16.315 15.965-3.233 1.237-6.537 1.836-9.757 1.836zm-11.487-15.613c3.874 5.221 10.965 7.005 17.665 4.438 9.491-3.637 14.342-14.135 12.977-28.081l-.057-.578.001-.003c-2.735-7.625-6.39-14.33-13.339-18.686-7.745-4.15-13.158-.78-16.343 2.789-7.847 8.795-10.076 27.004-.904 40.121z" />
-        <path fill="none" stroke-width="13" d="M108.42 335.51L333.8 94.11m-225.38 241.4l295.16 82.38" />
+        <path fill="none" strokeWidth="13" d="M108.42 335.51L333.8 94.11m-225.38 241.4l295.16 82.38" />
         <circle cx="333.8" cy="94.11" r="35" className="fill-primary" />
         <path d="M355.914 78.627c8.537 12.193 5.563 29.064-6.631 37.604-12.195 8.539-29.066 5.564-37.605-6.631s-5.564-29.064 6.631-37.604 29.064-5.564 37.605 6.631m10.649-7.457c-12.672-18.096-37.615-22.492-55.709-9.822-18.096 12.67-22.496 37.613-9.824 55.709 12.672 18.098 37.613 22.495 55.709 9.824 18.095-12.672 22.495-37.613 9.824-55.711z" />
         <circle cx="108.42" cy="335.51" r="35" className="fill-primary" />

src/common/editor/components/editorProvider.tsx

@@ -1,10 +1,10 @@
-import { codeAtom, editorServiceAtom, savingServiceAtom } from "@core/atoms/smith"
+import { codeAtom, editorAtom, editorServiceAtom, savingServiceAtom } from "@core/atoms/smith"
 import { plugins } from "@editor/common/plugins"
 import { deserializeCode, serializeCode } from "@editor/serializers/serializers"
 import { MyValue } from "@editor/types"
 import { PlateEditor, PlateProvider } from "@udecode/plate-common"
-import { useAtomValue, useSetAtom } from "jotai"
-import { useCallback, useMemo, useRef } from "react"
+import { WritableAtom, useAtomValue, useSetAtom } from "jotai"
+import { useCallback, useEffect, useMemo, useRef } from "react"
 import { debounce } from "lodash"
 import { changeAtom, selectionAtom } from "@editor/common/atoms"
 
@@ -19,7 +19,11 @@ export const EditorProvider = ({ children }) => {
     // FSM actions
     const setSelection = useSetAtom(selectionAtom)
     const setChange = useSetAtom(changeAtom)
+    const setEditor = useSetAtom(editorAtom as any)
 
+    useEffect(() => {
+        setEditor(editorRef)
+    }, [])
 
     const saveCode = debounce((value) => {
         // console.log("code")

src/common/editor/editor.tsx

@@ -1,10 +1,7 @@
-import { debounce } from "lodash";
-import { useAtomValue, useSetAtom } from "jotai"
-import { HTMLAttributes, ReactNode, useCallback, useEffect, useMemo } from "react";
+import { useAtomValue } from "jotai"
+import { HTMLAttributes, ReactNode, useEffect } from "react";
 import { Plate, PlateEditor, usePlateEditorRef } from '@udecode/plate-common';
-import { serializeCode } from '@editor/serializers/serializers'
-import { codeAtom, editorServiceAtom, projectDataAtom, savingServiceAtom } from "@core/atoms/smith";
-import { changeAtom, selectionAtom } from "@editor/common/atoms";
+import { editorServiceAtom, projectDataAtom } from "@core/atoms/smith";
 import { cn } from "@utils/styles";
 // import { SearcherPopup } from "@components/molecules/editor/searcher";
 import { useCutomEditableProps } from './common/useCustomEditableProps';
@@ -23,17 +20,6 @@ const CodeEditor = ({ className, toolbar, footer, id = '', ...rest }: CodeEditor
 
     const editableProps = useCutomEditableProps()
 
-    useEffect(() => {
-        // for get new initialValue in editor
-        editor.reset()
-    }, [projectData])
-
-    useEffect(() => {
-        // for get new initialValue in editor
-        if (editorService.name == 'parsing')
-            editor.reset()
-    }, [editorService.name])
-
     return <>
         <div className={cn('border border-neutral bg-base-100 p-2 flex flex-col relative', className)} {...rest}>
             <div className="absolute top-0 right-0 mt-2 mr-6 flex z-10 opacity-50">

src/modules/core/atoms/smith.ts

@@ -26,6 +26,8 @@ import CircumcircleTooltip from "@core/tooltips/circumcircle";
 import SemicircleTooltip from "@core/tooltips/semicircle";
 import ArcTooltip from "@core/tooltips/arc";
 import ReCircleTooltip from "@core/tooltips/reCircle";
+import { PlateEditor } from "@udecode/plate-common";
+import { MyValue } from "@editor/types";
 
 export const editorServiceAtom = atomWithMachine(editorFSM, (get) => ({
     menuService: drawServiceAtom,
@@ -147,7 +149,7 @@ export const boardAtom = atom(
     }
 )
 
-export const boardConfigAtom = atom<BoardConfigOptions>({
+export const boardConfigAtom = atom<Partial<BoardConfigOptions>>({
     theme: 'light',
     name: 'smith-box',
     screen: getCurrentBreakpoint(),
@@ -207,4 +209,6 @@ export const infoboxAtom = atom<{
     x: number,
     y: number,
     el: any
-}>({ x: 0, y: 0, el: undefined })
+}>({ x: 0, y: 0, el: undefined })
+
+export const editorAtom = atom<React.MutableRefObject<PlateEditor<MyValue>>>(null)

src/modules/core/fsm/drawFSM.ts

@@ -1,7 +1,7 @@
 import { TooltipType } from "@tooltips/interfaces"
 import { wait } from "@utils/time"
 import { action, createMachine, guard, immediate, invoke, reduce, state, transition } from "robot3"
-import { codeAtom, editorServiceAtom } from "@core/atoms/smith"
+import { editorServiceAtom } from "@core/atoms/smith"
 import { JotaiContext } from "@utils/atoms"
 
 
@@ -38,8 +38,7 @@ const pluginExist = (ctx: Context, event: any) => {
 const recreateCode = (ctx: Context, ev) => {
     const ctxCode = ev.data.code
     const send = ctx.setter(editorServiceAtom)
-    const code = ctx.getter(codeAtom)
-    send({ type: 'CODE', value: code.slice(-1) == '\n' ? code + ctxCode : code + '\n' + ctxCode })
+    send({ type: 'CODE', value: ctxCode, append: true })
     send('PARSE')
     return { ...ctx, code: ctxCode }
 }

src/modules/core/fsm/editorFSM.ts

@@ -1,12 +1,17 @@
 import { createMachine, state, transition, reduce, invoke, action, immediate } from 'robot3';
 import { wait } from '@utils/time';
 import { JotaiContext } from '@utils/atoms';
-import { _codeAtom, boardAtom } from '@core/atoms/smith';
+import { _codeAtom, boardAtom, editorAtom } from '@core/atoms/smith';
 import { Board } from 'jsxgraph';
+import { PlateEditor } from '@udecode/plate-common';
+import { MyValue } from '@editor/types';
+import { Transforms } from 'slate';
+import { deserializeCode } from '@editor/serializers/serializers';
 
 export interface EditorContextType extends JotaiContext<any, any, any> {
     errorMsg?: string;
-    counter: number
+    counter: number;
+    editor: PlateEditor
 }
 
 const parseExecute = async (ctx: EditorContextType, ev) => {
@@ -50,15 +55,24 @@ export default createMachine('idle', {
     )
 }, (ctx: EditorContextType) => ({
     errorMsg: '',
-    code: '',
     counter: 0,
     ...ctx,
 }) as EditorContextType)
 
 function clearErrorMsg(ctx: EditorContextType, ev: any) { return { ...ctx, errorMsg: '' } }
 function setError(ctx: EditorContextType, ev: any) { return { ...ctx, errorMsg: ev.error } }
 function addCounter(ctx: EditorContextType, ev: any) { return { ...ctx, counter: ctx.counter + 1 } }
-function setCode(ctx: EditorContextType, ev: { value: string }) {
+function setCode(ctx: EditorContextType, ev: { value: string, append: boolean }) {
+    const code = ctx.getter(_codeAtom)
     const setCode = ctx.setter(_codeAtom)
-    setCode(ev.value)
+    const editorRef: React.MutableRefObject<PlateEditor<MyValue>> = ctx.getter(editorAtom)
+    if (ev.append) {
+        const editor = editorRef.current
+        const nodes = deserializeCode(ev.value)
+        // console.log(ev.value, nodes)
+        Transforms.insertNodes(editor, nodes.slice(0, -1), { at: [editor.children.length] })
+        setCode(code + ev.value)
+    } else {
+        setCode(ev.value)
+    }
 }

src/modules/core/fsm/savingFSM.ts

@@ -1,11 +1,13 @@
 import { createMachine, state, transition, reduce, invoke, guard, action, immediate } from 'robot3';
 import { RuntimeProject, SmithProject } from '@localtypes/smith';
-import { _codeAtom, _projectDataAtom, codeAtom, editorServiceAtom, projectDataAtom } from '@core/atoms/smith';
+import { _codeAtom, _projectDataAtom, codeAtom, editorAtom, editorServiceAtom, projectDataAtom } from '@core/atoms/smith';
 import { JotaiContext } from '@utils/atoms';
 import { _dataRxdbProviderAtom, dataQLProviderAtom } from '@core/atoms/db';
 import { DataProvider } from '@hooks/useDataProviderSW';
 import { authAtom } from '@core/atoms/auth';
 import { RESET } from 'jotai/utils';
+import { PlateEditor } from '@udecode/plate-common';
+import { MyValue } from '@editor/types';
 // import { Timestamp } from 'firebase/firestore';
 
 export interface SavingContextType<T = any, A = any, B = any> extends JotaiContext<T, A, B> {
@@ -106,8 +108,12 @@ function sendCodeEditor(ctx: SavingContextType, ev: { data: RuntimeProject }) {
 
 function saveProject(ctx: SavingContextType, ev: { data: RuntimeProject }) {
     const setData = ctx.setter(_projectDataAtom)
+    const editorRef: React.MutableRefObject<PlateEditor<MyValue>> = ctx.getter(editorAtom)
     // console.log('send')
     setData(ev.data)
+    setTimeout(() => {
+        editorRef.current.reset()
+    }, 200)
 }
 
 function logout(ctx: SavingContextType, ev) {
@@ -180,6 +186,7 @@ async function saveDocument(ctx: SavingContextType, ev: { value: string }) {
 
     const setData = ctx.setter(projectDataAtom)
     const code = ctx.getter(codeAtom) as string
+    // console.log(code)
     await setData({ data: code })
 
     console.log('saving done.')