feat: add diff mode

apps/codeimage/src/components/CustomEditor/CanvasEditor.tsx

@@ -1,30 +1,40 @@
 import {useI18n} from '@codeimage/locale';
 import {getRootEditorStore} from '@codeimage/store/editor';
 import {getActiveEditorStore} from '@codeimage/store/editor/activeEditor';
+import {EditorMetadataState} from '@codeimage/store/editor/model';
 import {getUiStore} from '@codeimage/store/ui';
 import {HStack, toast} from '@codeimage/ui';
+import {StateField, Transaction} from '@codemirror/state';
 import {EditorView} from '@codemirror/view';
 import {Button} from '@codeui/kit';
 import {
   createCompartmentExtension,
   createEditorControlledValue,
   createEditorFocus,
 } from 'solid-codemirror';
-import {Accessor, createEffect, createSignal, on} from 'solid-js';
+import {Accessor, createEffect, createMemo, createSignal, on} from 'solid-js';
 import {AppLocaleEntries} from '../../i18n';
 import {SparklesIcon} from '../Icons/SparklesIcon';
 import CustomEditor from './CustomEditor';
+import {customEffectAnnotation} from './plugins/customEffectAnnotation';
+import {
+  diffLineState,
+  dispatchReplaceDiffLineState,
+} from './plugins/diff/state';
 
 interface CanvasEditorProps {
   readOnly: boolean;
 }
 
+const initMetadataAnnotationEvent = 'init-metadata';
+
 export default function CanvasEditor(props: CanvasEditorProps) {
   const [editorView, setEditorView] = createSignal<EditorView>();
   const activeEditorStore = getActiveEditorStore();
   const {
     state: editorState,
-    actions: {setFocused},
+    actions: {setFocused, setTabMetadata},
+    canvasEditorEvents,
   } = getRootEditorStore();
 
   const {setFocused: editorSetFocused} = createEditorFocus(
@@ -37,6 +47,24 @@ export default function CanvasEditor(props: CanvasEditorProps) {
       editorView,
       view => {
         if (!view) return;
+
+        canvasEditorEvents.listen(transaction => {
+          if (
+            !transaction.annotation(customEffectAnnotation) ||
+            transaction.annotation(Transaction.userEvent) ===
+              initMetadataAnnotationEvent
+          )
+            return;
+          const state: Record<
+            keyof EditorMetadataState,
+            StateField<unknown>
+          > = {
+            diff: diffLineState,
+          };
+          const json = transaction.state.toJSON(state);
+          setTabMetadata(json);
+        });
+
         createEffect(
           on(
             () => editorState.options.focused,
@@ -47,6 +75,38 @@ export default function CanvasEditor(props: CanvasEditorProps) {
             },
           ),
         );
+
+        const metadata = createMemo(() => activeEditorStore.editor()?.metadata);
+
+        let sendInitEvent = false;
+        createEffect(
+          on(editorView, editorView => {
+            if (!editorView) return;
+            createEffect(
+              on([metadata], ([metadata]) => {
+                if (!metadata) {
+                  return;
+                }
+                const {diff} = metadata;
+                if (diff) {
+                  dispatchReplaceDiffLineState(
+                    editorView,
+                    {
+                      inserted: diff.inserted,
+                      deleted: diff.deleted,
+                    },
+                    sendInitEvent
+                      ? {
+                          userEvent: initMetadataAnnotationEvent,
+                        }
+                      : undefined,
+                  );
+                }
+                sendInitEvent = true;
+              }),
+            );
+          }),
+        );
       },
       {defer: true},
     ),
@@ -107,6 +167,7 @@ export default function CanvasEditor(props: CanvasEditorProps) {
 
   return (
     <CustomEditor
+      dispatchTransaction={true}
       onEditorViewChange={setEditorView}
       onValueChange={activeEditorStore.setCode}
       readOnly={props.readOnly}

apps/codeimage/src/components/CustomEditor/CustomEditor.tsx

@@ -35,6 +35,8 @@ import {
   VoidProps,
 } from 'solid-js';
 import {createTabIcon} from '../../hooks/use-tab-icon';
+import {diffMarkerControl} from './plugins/diff/extension';
+import {syntaxHighlightColorDiff} from './plugins/diff/theme';
 
 const EDITOR_BASE_SETUP: Extension = [
   highlightSpecialChars(),
@@ -61,6 +63,7 @@ interface CustomEditorProps {
   readOnly: boolean;
   onEditorViewChange?: (view: EditorView | undefined) => void;
   onValueChange?: (value: string) => void;
+  dispatchTransaction: boolean;
 }
 
 export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
@@ -82,7 +85,9 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
     createExtension,
   } = createCodeMirror({
     value: editor()?.code,
-    onTransactionDispatched: tr => canvasEditorEvents.emit(tr),
+    onTransactionDispatched: props.dispatchTransaction
+      ? tr => canvasEditorEvents.emit(tr)
+      : undefined,
     onValueChange: props.onValueChange,
   });
 
@@ -143,8 +148,6 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
     },
     '.cm-cursor': {
       borderLeftWidth: '2px',
-      height: '21px',
-      transform: 'translateY(-10%)',
     },
   });
 
@@ -169,7 +172,9 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
       },
     });
   };
-
+  createExtension(() =>
+    selectedLanguage()?.id === 'git-patch' ? syntaxHighlightColorDiff : [],
+  );
   createEditorReadonly(editorView, () => props.readOnly);
   createExtension(EditorView.lineWrapping);
   createExtension(() =>
@@ -200,6 +205,16 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
       ? lineNumbers({formatNumber: lineNo => String(newLn(lineNo))})
       : [];
   });
+
+  createExtension(() =>
+    editorState.options.showDiffMode
+      ? diffMarkerControl({readOnly: props.readOnly})
+      : [],
+  );
+
+  createExtension(() => {
+    return editorState.options.showLineNumbers ? lineNumbers() : [];
+  });
   createExtension(() => themeConfiguration()?.editorTheme || []);
   createExtension(baseTheme);
 

apps/codeimage/src/components/CustomEditor/PreviewExportEditor.tsx

@@ -1,18 +1,11 @@
 import {getRootEditorStore} from '@codeimage/store/editor';
-import {Annotation, Transaction} from '@codemirror/state';
+import {Transaction} from '@codemirror/state';
 import {EditorView} from '@codemirror/view';
+import {createEventStack} from '@solid-primitives/event-bus';
+import {createCompartmentExtension} from 'solid-codemirror';
 import {createEffect, createSignal, lazy, on} from 'solid-js';
-
-const syncAnnotation = Annotation.define<boolean>();
-
-function syncDispatch(tr: Transaction, other: EditorView) {
-  if (!tr.changes.empty && !tr.annotation(syncAnnotation)) {
-    const annotations: Annotation<unknown>[] = [syncAnnotation.of(true)];
-    const userEvent = tr.annotation(Transaction.userEvent);
-    if (userEvent) annotations.push(Transaction.userEvent.of(userEvent));
-    other.dispatch({changes: tr.changes, annotations});
-  }
-}
+import {diffMarkerStateIconGutter} from './plugins/diff/extension';
+import {syncDispatch} from './plugins/sync/sync';
 
 const CustomEditor = lazy(() => import('./CustomEditor'));
 
@@ -22,19 +15,40 @@ interface PreviewExportEditorProps {
 
 export default function PreviewExportEditor(props: PreviewExportEditorProps) {
   const [editorView, setEditorView] = createSignal<EditorView>();
+  const {canvasEditorEvents} = getRootEditorStore();
+  const transactions = createEventStack<Transaction>();
+  canvasEditorEvents.listen(tr => transactions.emit(tr));
 
+  const sync = (tr: Transaction, editorView: EditorView) => {
+    try {
+      syncDispatch(tr, editorView);
+      editorView.requestMeasure();
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  let unsubscribe: VoidFunction;
   createEffect(
     on(editorView, editorView => {
+      if (unsubscribe) unsubscribe();
       if (!editorView) return;
-      getRootEditorStore().canvasEditorEvents.listen(tr => {
-        setTimeout(() => syncDispatch(tr, editorView), 250);
-        setInterval(() => editorView.requestMeasure());
+      transactions.value().forEach(transaction => {
+        sync(transaction, editorView);
+        transactions.setValue(trs => trs.filter(tr => tr !== transaction));
+      });
+      unsubscribe = transactions.listen(({event: transaction, remove}) => {
+        sync(transaction, editorView);
+        remove();
       });
     }),
   );
 
+  createCompartmentExtension(diffMarkerStateIconGutter, editorView);
+
   return (
     <CustomEditor
+      dispatchTransaction={false}
       onEditorViewChange={editorView => {
         props.onSetEditorView(editorView);
         setEditorView(editorView);

apps/codeimage/src/components/CustomEditor/plugins/customEffectAnnotation.ts

@@ -0,0 +1,3 @@
+import {Annotation} from '@codemirror/state';
+
+export const customEffectAnnotation = Annotation.define<string>();

apps/codeimage/src/components/CustomEditor/plugins/diff/DiffCheckbox.css.ts

@@ -0,0 +1,51 @@
+import {themeTokens, themeVars} from '@codeui/kit';
+import {createVar, style} from '@vanilla-extract/css';
+import {recipe} from '@vanilla-extract/recipes';
+
+export const container = style({
+  opacity: 1,
+  transition: 'opacity 150ms ease-in-out',
+  display: 'flex',
+  height: '100%',
+});
+
+export const tooltip = style({
+  fontSize: themeTokens.fontSize.xs,
+});
+
+const iconBorder = createVar();
+export const icon = recipe({
+  base: {
+    width: '20px',
+    height: '20px',
+    outline: 'none',
+    border: `1px solid ${iconBorder}`,
+    vars: {
+      [iconBorder]: '#cccccc20',
+    },
+    ':active': {
+      transform: 'scale(1) !important',
+    },
+    ':focus-visible': {
+      outline: `none`,
+      borderColor: themeVars.brand,
+    },
+    selectors: {
+      '[data-theme-mode=light] &': {
+        background: 'rgba(0,0,0,0.05)',
+        color: 'black',
+      },
+      '[data-theme-mode=light] &:hover': {
+        background: 'rgba(0,0,0,0.1)',
+        color: 'black',
+      },
+      '[data-theme-mode=dark] &': {
+        background: 'rgba(0,0,0,0.3)',
+        color: 'white',
+      },
+      '[data-theme-mode=dark] &:hover': {
+        background: 'rgba(0,0,0,0.5)',
+      },
+    },
+  },
+});

apps/codeimage/src/components/CustomEditor/plugins/diff/DiffCheckbox.tsx

@@ -0,0 +1,76 @@
+import {IconButton, Tooltip} from '@codeui/kit';
+import {createSignal} from 'solid-js';
+import {icon, tooltip} from './DiffCheckbox.css';
+
+export type DiffCheckboxState = 'added' | 'removed' | 'untouched';
+
+interface DiffCheckboxProps {
+  value: DiffCheckboxState;
+  onChange: (value: DiffCheckboxState) => void;
+}
+
+export function DiffCheckbox(props: DiffCheckboxProps) {
+  let el!: HTMLButtonElement;
+  const [tooltipOpen, setTooltipOpen] = createSignal(false);
+  const statesTransition: Record<DiffCheckboxState, DiffCheckboxState> = {
+    added: 'removed',
+    removed: 'untouched',
+    untouched: 'added',
+  };
+
+  const onClick = (value: DiffCheckboxState) => {
+    props.onChange(statesTransition[value]);
+    if (el.matches(':hover').valueOf()) {
+      requestAnimationFrame(() => setTooltipOpen(true));
+    }
+  };
+
+  const label = () => {
+    switch (props.value) {
+      case 'added':
+        return '+';
+      case 'removed':
+        return '-';
+      case 'untouched':
+        return null;
+    }
+  };
+
+  const title = () => {
+    switch (props.value) {
+      case 'added':
+        return 'Set to removed';
+      case 'removed':
+        return 'Set to untouched';
+      case 'untouched':
+        return 'Set to added';
+    }
+  };
+
+  return (
+    <div>
+      <Tooltip
+        open={tooltipOpen()}
+        onOpenChange={setTooltipOpen}
+        slotClasses={{
+          content: tooltip,
+        }}
+        placement={'right'}
+        content={title()}
+        theme={'secondary'}
+        openDelay={300}
+        closeDelay={0}
+      >
+        <IconButton
+          ref={el}
+          size={'xs'}
+          class={icon()}
+          aria-label={title()}
+          onClick={() => onClick(props.value)}
+        >
+          {label()}
+        </IconButton>
+      </Tooltip>
+    </div>
+  );
+}