feat: add git diff syntax highlight

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

@@ -19,8 +19,9 @@ interface CanvasEditorProps {
   readOnly: boolean;
 }
 
+export const [editorView, setEditorView] = createSignal<EditorView>();
+export const globalEditorView = editorView;
 export default function CanvasEditor(props: CanvasEditorProps) {
-  const [editorView, setEditorView] = createSignal<EditorView>();
   const activeEditorStore = getActiveEditorStore();
   const {
     state: editorState,

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

@@ -35,6 +35,7 @@ import {
   VoidProps,
 } from 'solid-js';
 import {createTabIcon} from '../../hooks/use-tab-icon';
+import {diffMarkerExtension} from './plugins/diff/diff-checkbox-marker';
 
 const EDITOR_BASE_SETUP: Extension = [
   highlightSpecialChars(),
@@ -130,6 +131,11 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
       padding: '0 16px 0 8px',
       lineHeight: '21px',
     },
+    '.cm-breakpoint-gutter': {
+      position: 'sticky',
+      flexDirection: 'column',
+      flexShrink: 0,
+    },
     '.cm-line': {
       padding: '0 2px 0 8px',
     },
@@ -181,9 +187,36 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
       ? lineNumbers({formatNumber: lineNo => String(newLn(lineNo))})
       : [];
   });
+
+  createExtension(() => {
+    return [
+      editorState.options.enableDiff
+        ? diffMarkerExtension({readOnly: props.readOnly})
+        : [],
+    ];
+  });
+
   createExtension(() => themeConfiguration()?.editorTheme || []);
   createExtension(baseTheme);
 
+  createExtension(() =>
+    editorState.options.enableDiff
+      ? [
+          EditorView.theme({
+            '.cm-line': {
+              'padding-left': '2rem',
+            },
+            '.cm-remove-line': {
+              backgroundColor: '#ff226e25',
+            },
+            '.cm-add-line': {
+              backgroundColor: '#12af1225',
+            },
+          }),
+        ]
+      : [],
+  );
+
   const reconfigureBaseSetup = createExtension(EDITOR_BASE_SETUP);
 
   createEffect(

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

@@ -1,16 +1,40 @@
 import {getRootEditorStore} from '@codeimage/store/editor';
-import {Annotation, Transaction} from '@codemirror/state';
+import {Annotation, StateEffect, Transaction} from '@codemirror/state';
 import {EditorView} from '@codemirror/view';
+import {createCompartmentExtension} from 'solid-codemirror';
 import {createEffect, createSignal, lazy, on} from 'solid-js';
+import {globalEditorView} from './CanvasEditor';
+import {diffCheckboxEffect} from './plugins/diff/diff-checkbox-marker';
+import {diffMarkerStateIconGutterExtension} from './plugins/diff/diff-marker-state-icon';
 
 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)];
+  if (tr.annotation(syncAnnotation)) {
+    return;
+  }
+  const annotations: Annotation<unknown>[] = [syncAnnotation.of(true)];
+  const effects: StateEffect<unknown>[] = [];
+  let changed = false;
+  if (!tr.changes.empty) {
+    changed = true;
     const userEvent = tr.annotation(Transaction.userEvent);
     if (userEvent) annotations.push(Transaction.userEvent.of(userEvent));
-    other.dispatch({changes: tr.changes, annotations});
+  }
+  const stateEffects = tr.effects
+    .filter(effect => !!effect)
+    // TODO: add configuration
+    .filter(effect => effect.is(diffCheckboxEffect));
+  if (stateEffects.length) {
+    changed = true;
+    effects.push(...stateEffects);
+  }
+  if (changed) {
+    other.dispatch({
+      changes: tr.changes,
+      effects,
+      annotations,
+    });
   }
 }
 
@@ -27,12 +51,22 @@ export default function PreviewExportEditor(props: PreviewExportEditorProps) {
     on(editorView, editorView => {
       if (!editorView) return;
       getRootEditorStore().canvasEditorEvents.listen(tr => {
-        setTimeout(() => syncDispatch(tr, editorView), 250);
-        setInterval(() => editorView.requestMeasure());
+        setTimeout(() => syncDispatch(tr, editorView), 100);
+        setTimeout(() => editorView.requestMeasure());
       });
     }),
   );
 
+  createEffect(() => {
+    const value = globalEditorView();
+    if (!value) return;
+  });
+
+  createCompartmentExtension(
+    () => diffMarkerStateIconGutterExtension,
+    editorView,
+  );
+
   return (
     <CustomEditor
       onEditorViewChange={editorView => {

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>
+  );
+}

apps/codeimage/src/components/CustomEditor/plugins/diff/diff-checkbox-events.ts

@@ -0,0 +1,11 @@
+import {Line} from '@codemirror/state';
+import {createEventBus} from '@solid-primitives/event-bus';
+import {createRoot} from 'solid-js';
+import {DiffCheckboxState} from './DiffCheckbox';
+
+export const diffCheckboxEvents = createRoot(() =>
+  createEventBus<{
+    state: DiffCheckboxState | null;
+    line: Line;
+  }>(),
+);