feat: optional format on paste event

* updated solid-toast to 0.5.0
riccardoperra · Jul 29, 2023 · 7055f3a · 7055f3a
1 parent a166585
commit 7055f3a
Show file tree

Hide file tree

Showing 5 changed files with 225 additions and 106 deletions.
diff --git a/apps/codeimage/src/components/CustomEditor/CanvasEditor.tsx b/apps/codeimage/src/components/CustomEditor/CanvasEditor.tsx
@@ -1,12 +1,18 @@
+import {useI18n} from '@codeimage/locale';
 import {getRootEditorStore} from '@codeimage/store/editor';
 import {getActiveEditorStore} from '@codeimage/store/editor/activeEditor';
+import {getUiStore} from '@codeimage/store/ui';
+import {HStack, toast} from '@codeimage/ui';
 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 {AppLocaleEntries} from '../../i18n';
+import {SparklesIcon} from '../Icons/SparklesIcon';
 import CustomEditor from './CustomEditor';
 
 interface CanvasEditorProps {
@@ -46,18 +52,48 @@ export default function CanvasEditor(props: CanvasEditorProps) {
     ),
   );
 
-  createCompartmentExtension(
-    () =>
-      EditorView.domEventHandlers({
-        paste(event, view) {
-          setTimeout(() => {
-            const localValue = view.state.doc.toString();
-            activeEditorStore.format(localValue);
-          });
-        },
-      }),
-    editorView,
-  );
+  createCompartmentExtension(() => {
+    let activeToastId: string | null = null;
+    return EditorView.domEventHandlers({
+      paste(event, view) {
+        if (activeToastId) toast.dismiss(activeToastId);
+        activeToastId = toast.success(
+          activeToast => {
+            const [t] = useI18n<AppLocaleEntries>();
+            return (
+              <div>
+                <HStack
+                  spacing={5}
+                  display={'flex'}
+                  justifyContent={'spaceBetween'}
+                  alignItems={'center'}
+                >
+                  <span>{t('canvas.pastedCode')}</span>
+                  <Button
+                    size={'xs'}
+                    theme={'primary'}
+                    leftIcon={<SparklesIcon size={'xs'} />}
+                    disabled={!activeEditorStore.canFormat()}
+                    onClick={() => {
+                      const localValue = view.state.doc.toString();
+                      activeEditorStore.format(localValue);
+                      toast.dismiss(activeToast.id);
+                    }}
+                  >
+                    Format
+                  </Button>
+                </HStack>
+              </div>
+            );
+          },
+          {
+            position: 'bottom-center',
+            theme: getUiStore().invertedThemeMode(),
+          },
+        );
+      },
+    });
+  }, editorView);
 
   createEditorControlledValue(
     editorView as Accessor<EditorView>,

diff --git a/apps/codeimage/src/i18n/index.ts b/apps/codeimage/src/i18n/index.ts
@@ -22,6 +22,7 @@ export const locale = {
       copiedToClipboard: 'Snippet copiato negli appunti',
       linkGeneratedToClipboard: 'Link copiato negli appunti',
       formattedCode: 'Il codice é stato formattato',
+      pastedCode: 'Codice incollato',
       errorFormattedCode: 'Il codice da formattare non è valido',
     },
     readOnlyBanner: {
@@ -99,6 +100,7 @@ export const locale = {
       copiedToClipboard: 'Snippet copied to clipboard',
       linkGeneratedToClipboard: 'Link copied to clipboard',
       formattedCode: 'Code has been formatted',
+      pastedCode: 'Code has been pasted',
       errorFormattedCode: 'Invalid code while formatting',
     },
     common: {
@@ -195,6 +197,7 @@ export const locale = {
       copiedToClipboard: 'Code-Schnipsel in Zwischenablage kopiert',
       linkGeneratedToClipboard: 'Link in Zwischenablage kopiert',
       formattedCode: 'Code has been formatted',
+      pastedCode: 'Code has been pasted',
       errorFormattedCode: 'Invalid code while formatting',
     },
     readOnlyBanner: {
@@ -281,6 +284,7 @@ export const locale = {
       copiedToClipboard: 'Snippet copiado al portapapeles',
       linkGeneratedToClipboard: 'Link copiado al portapapeles',
       formattedCode: 'Code has been formatted',
+      pastedCode: 'Code has been pasted',
       errorFormattedCode: 'Invalid code while formatting',
     },
     readOnlyBanner: {

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -96,7 +96,7 @@
     "@vanilla-extract/sprinkles": "^1.5.1",
     "clsx": "^1.2.1",
     "solid-headless": "^0.13.1",
-    "solid-toast": "^0.3.5",
+    "solid-toast": "^0.5.0",
     "solid-use": "^0.6.2"
   },
   "devDependencies": {

diff --git a/packages/ui/src/lib/primitives/Snackbar/SnackbarHost.tsx b/packages/ui/src/lib/primitives/Snackbar/SnackbarHost.tsx
@@ -10,12 +10,15 @@ export interface SnackbarData {
   wrapper?: Component;
 }
 
+type Toast = typeof $toast;
+
 let toast: {
   success: AugmentedToastHandler;
   error: AugmentedToastHandler;
-  custom: (typeof $toast)['custom'];
+  custom: AugmentedToastHandler;
   default: ToastHandler;
-  remove: (typeof $toast)['remove'];
+  remove: Toast['remove'];
+  dismiss: Toast['dismiss'];
 };
 
 interface SnackbarHostProps {
@@ -26,9 +29,10 @@ export function SnackbarHost(props: VoidProps<SnackbarHostProps>) {
   toast = {
     success: createPatch($toast, 'success'),
     error: createPatch($toast, 'error'),
-    custom: $toast.custom,
+    custom: createPatch($toast, 'custom'),
     default: $toast,
     remove: $toast.remove,
+    dismiss: $toast.dismiss,
   };
   return (
     <ToasterV2