feat(dashboard): repeat/digest can't be nested inside another repeat (#8136)

Author: ChmaraX

apps/dashboard/package.json

@@ -25,7 +25,7 @@
     "@hookform/resolvers": "^3.9.0",
     "@lezer/highlight": "^1.2.1",
     "@maily-to/core": "github:novuhq/maily.to.git#release/v0.2.7-novu.6-core&path:/packages/core",
-    "@maily-to/core-digest": "github:novuhq/maily.to.git#release/v0.2.7-novu.8-core&path:/packages/core",
+    "@maily-to/core-digest": "github:novuhq/maily.to.git#release/v0.2.7-novu.9-core&path:/packages/core",
     "@novu/api": "workspace:*",
     "@novu/framework": "workspace:*",
     "@novu/js": "workspace:*",

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

@@ -22,23 +22,32 @@ import {
   text,
 } from '@maily-to/core/blocks';
 import {
+  getSlashCommandSuggestions,
   getVariableSuggestions,
   HTMLCodeBlockExtension,
   RepeatExtension,
+  SlashCommandExtension,
   VariableExtension,
   Variables,
 } from '@maily-to/core/extensions';
 import { ReactNodeViewRenderer } from '@tiptap/react';
+import { searchSlashCommands } from '@maily-to/core-digest/extensions';
+import { StepResponseDto } from '@novu/shared';
+import { createDigestBlock } from './blocks/digest';
+import {
+  CalculateVariablesProps,
+  insertVariableToEditor,
+  isInsideRepeatBlock,
+  VariableFrom,
+} from './variables/variables';
 import { ForView } from './views/for-view';
 import { createVariableView } from './views/variable-view';
 import { MailyVariablesListView } from './views/maily-variables-list-view';
 import { HTMLCodeBlockView } from './views/html-view';
-import { CalculateVariablesProps, insertVariableToEditor, VariableFrom } from './variables/variables';
 import { VariablePill } from '@/components/variable/variable-pill';
 import { IsAllowedVariable } from '@/utils/parseStepVariables';
-import { StepResponseDto } from '@novu/shared';
-import { createDigestBlock } from './blocks/digest';
 
+import type { Editor as TiptapEditor } from '@tiptap/core';
 export const VARIABLE_TRIGGER_CHARACTER = '{{';
 
 /**
@@ -117,12 +126,29 @@ export const createEditorBlocks = (props: {
   return blocks;
 };
 
+const getAvailableBlocks = (blocks: BlockGroupItem[], editor: TiptapEditor | null) => {
+  // 'Repeat' and 'Digest' blocks can't be used inside another 'Repeat' block
+  const isInsideRepeat = editor && isInsideRepeatBlock(editor);
+
+  if (isInsideRepeat) {
+    const filteredBlocks = ['Repeat', 'Digest block'];
+
+    return blocks.map((block) => ({
+      ...block,
+      commands: block.commands.filter((cmd) => !filteredBlocks.includes(cmd.title)),
+    }));
+  }
+
+  return blocks;
+};
+
 export const createExtensions = (props: {
   handleCalculateVariables: (props: CalculateVariablesProps) => Variables | undefined;
   parsedVariables: { isAllowedVariable: IsAllowedVariable };
+  blocks: BlockGroupItem[];
   isEnhancedDigestEnabled: boolean;
 }) => {
-  const { handleCalculateVariables, parsedVariables, isEnhancedDigestEnabled } = props;
+  const { handleCalculateVariables, parsedVariables, blocks, isEnhancedDigestEnabled } = props;
 
   return [
     RepeatExtension.extend({
@@ -139,6 +165,14 @@ export const createExtensions = (props: {
         };
       },
     }),
+    SlashCommandExtension.configure({
+      suggestion: {
+        ...getSlashCommandSuggestions(blocks),
+        items: ({ query, editor }) => {
+          return searchSlashCommands(query, editor, getAvailableBlocks(blocks, editor));
+        },
+      },
+    }),
     VariableExtension.extend({
       addNodeView() {
         return ReactNodeViewRenderer(createVariableView(parsedVariables.isAllowedVariable), {

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

@@ -39,6 +39,10 @@ export const Maily = ({ value, onChange, className, ...rest }: MailyProps) => {
   const [_, setEditor] = useState<any>();
   const track = useTelemetry();
 
+  const blocks = useMemo(() => {
+    return createEditorBlocks({ track, digestStepBeforeCurrent, isEnhancedDigestEnabled });
+  }, [digestStepBeforeCurrent, isEnhancedDigestEnabled, track]);
+
   const handleCalculateVariables = useCallback(
     ({ query, editor, from }: { query: string; editor: TiptapEditor; from: VariableFrom }) => {
       return calculateVariables({
@@ -64,8 +68,14 @@ export const Maily = ({ value, onChange, className, ...rest }: MailyProps) => {
   );
 
   const extensions = useMemo(
-    () => createExtensions({ handleCalculateVariables, parsedVariables, isEnhancedDigestEnabled }),
-    [handleCalculateVariables, parsedVariables, isEnhancedDigestEnabled]
+    () =>
+      createExtensions({
+        handleCalculateVariables,
+        parsedVariables,
+        blocks,
+        isEnhancedDigestEnabled,
+      }),
+    [handleCalculateVariables, parsedVariables, blocks, isEnhancedDigestEnabled]
   );
 
   /*
@@ -109,10 +119,6 @@ export const Maily = ({ value, onChange, className, ...rest }: MailyProps) => {
     [onChange]
   );
 
-  const blocks = useMemo(() => {
-    return createEditorBlocks({ track, digestStepBeforeCurrent, isEnhancedDigestEnabled });
-  }, [track]);
-
   const _Editor = isEnhancedDigestEnabled ? EditorDigest : Editor;
 
   return (

apps/dashboard/src/components/workflow-editor/steps/email/variables/variables.ts

@@ -286,8 +286,8 @@ const updateRepeatBlockChildAliases = (editor: Editor, isEnhancedDigestEnabled:
     .run();
 };
 
-const isInsideRepeatBlock = (editor: TiptapEditor): boolean => {
-  return findRepeatBlock(editor) !== null;
+export const isInsideRepeatBlock = (editor: TiptapEditor): boolean => {
+  return editor?.isActive('repeat') ?? false;
 };
 
 const getRepeatBlockEachVariables = (editor: TiptapEditor): Array<LiquidVariable> => {