Merge branch 'next' into feat-provider-overrides

Author: scopsy

.source

@@ -3,6 +3,7 @@ import { Editor } from '@maily-to/core';
 import { Editor as EditorDigest } from '@maily-to/core-digest';
 import type { Editor as TiptapEditor } from '@tiptap/core';
 import { Editor as TiptapEditorReact } from '@tiptap/react';
+import { FeatureFlagsKeysEnum } from '@novu/shared';
 
 import { useWorkflow } from '@/components/workflow-editor/workflow-provider';
 import { useParseVariables } from '@/hooks/use-parse-variables';
@@ -11,8 +12,8 @@ import { cn } from '@/utils/ui';
 import { createEditorBlocks, createExtensions, DEFAULT_EDITOR_CONFIG, MAILY_EMAIL_WIDTH } from './maily-config';
 import { calculateVariables, VariableFrom } from './variables/variables';
 import { RepeatMenuDescription } from './views/repeat-menu-description';
-import { FeatureFlagsKeysEnum } from '@novu/shared';
 import { useFeatureFlag } from '@/hooks/use-feature-flag';
+import { useRemoveGrammarly } from '@/hooks/use-remove-grammarly';
 
 type MailyProps = HTMLAttributes<HTMLDivElement> & {
   value: string;
@@ -42,6 +43,7 @@ export const Maily = ({ value, onChange, className, ...rest }: MailyProps) => {
   const blocks = useMemo(() => {
     return createEditorBlocks({ track, digestStepBeforeCurrent, isEnhancedDigestEnabled });
   }, [digestStepBeforeCurrent, isEnhancedDigestEnabled, track]);
+  const editorParentRef = useRemoveGrammarly<HTMLDivElement>();
 
   const handleCalculateVariables = useCallback(
     ({ query, editor, from }: { query: string; editor: TiptapEditor; from: VariableFrom }) => {
@@ -125,10 +127,19 @@ export const Maily = ({ value, onChange, className, ...rest }: MailyProps) => {
     <>
       {overrideTippyBoxStyles()}
       <div
+        ref={editorParentRef}
         className={cn(
           `shadow-xs mx-auto flex min-h-full max-w-[${MAILY_EMAIL_WIDTH}px] flex-col items-start rounded-lg bg-white [&_a]:pointer-events-none`,
           className
         )}
+        data-gramm={false}
+        data-gramm_editor={false}
+        data-enable-grammarly="false"
+        aria-autocomplete="none"
+        aria-multiline={false}
+        autoCapitalize="off"
+        autoCorrect="off"
+        spellCheck={false}
         {...rest}
       >
         <_Editor

apps/dashboard/src/components/workflow-editor/steps/email/maily.tsx

@@ -12,7 +12,7 @@ export function ForView(props: NodeViewProps) {
       draggable="true"
       data-drag-handle=""
       data-type="repeat"
-      className="mly-relative border-soft-100 mx-[-0.5rem] rounded-md border px-2 py-2"
+      className="mly-relative border-soft-100 mx-[-0.5rem] rounded-md border px-3 py-3"
     >
       <NodeViewContent className="is-editable" />
       <div

apps/dashboard/src/components/workflow-editor/steps/email/views/for-view.tsx

@@ -0,0 +1,50 @@
+import { useLayoutEffect, useRef } from 'react';
+import { useDataRef } from './use-data-ref';
+
+type MutationObserverOptions = {
+  childList?: boolean;
+  attributes?: boolean;
+  characterData?: boolean;
+  subtree?: boolean;
+  attributeOldValue?: boolean;
+  characterDataOldValue?: boolean;
+  attributeFilter?: string[];
+};
+
+type UseMutationObserverProps = {
+  target: React.RefObject<Node> | Node | null;
+  callback: MutationCallback;
+  options?: MutationObserverOptions;
+};
+
+export function useMutationObserver({
+  target,
+  callback,
+  options = { childList: true, subtree: true },
+}: UseMutationObserverProps) {
+  const observerRef = useRef<MutationObserver | null>(null);
+  const callbackRef = useDataRef<MutationCallback>(callback);
+
+  useLayoutEffect(() => {
+    const targetNode = target && 'current' in target ? target.current : target;
+    if (!targetNode) return;
+
+    // Create MutationObserver with reference to the latest callback
+    const observer = new MutationObserver((mutations, observer) => {
+      callbackRef.current(mutations, observer);
+    });
+
+    // Store observer in ref
+    observerRef.current = observer;
+
+    // Start observing
+    observer.observe(targetNode, options);
+
+    return () => {
+      observer.disconnect();
+      observerRef.current = null;
+    };
+  }, [callbackRef, target, options]);
+
+  return observerRef;
+}

apps/dashboard/src/hooks/use-mutation-observer.ts

@@ -0,0 +1,29 @@
+import { useRef, useCallback } from 'react';
+
+import { useMutationObserver } from './use-mutation-observer';
+
+export function useRemoveGrammarly<T extends HTMLElement>() {
+  const target = useRef<T>(null);
+  const handleGrammarlyRemoval = useCallback((mutations: MutationRecord[]) => {
+    for (const mutation of mutations) {
+      if (mutation.type === 'childList') {
+        for (const node of mutation.addedNodes) {
+          const isGrammarlyElement =
+            node instanceof HTMLElement && node.shadowRoot && node.tagName === 'GRAMMARLY-EXTENSION';
+
+          if (isGrammarlyElement) {
+            node.remove();
+          }
+        }
+      }
+    }
+  }, []);
+
+  useMutationObserver({
+    target: target,
+    callback: handleGrammarlyRemoval,
+    options: { childList: true, subtree: true },
+  });
+
+  return target;
+}