@peak-ai/canvas 1.4.21 → 1.4.22

package/src/GrapesjsCanvas.tsx

@@ -0,0 +1,494 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useEffect, useRef } from 'react';
+// eslint-disable-next-line import/no-named-as-default
+import grapesjs, { Component, Editor } from 'grapesjs';
+import 'grapesjs/dist/css/grapes.min.css';
+import tailwind from 'grapesjs-tailwind';
+import { TypesToRegister } from './constants';
+import { toKebabCase } from './helpers';
+import { createGrapesjsShadcnGenericPlugin } from './plugins/grapejs-plugin';
+import { StyledEditor } from './index.styles';
+import { tailwindCompiledCss } from './helpers/css';
+import { datePickerCss } from './helpers/date-picker';
+
+type NotificationHandler = (newData: {
+  componentId: string;
+  newProps: Record<string, any>;
+  newAttributes: Record<string, any>;
+}) => boolean;
+
+type GrapesjsCanvasProps = {
+  json: any;
+  mode?: 'editor' | 'preview';
+  setEditor: (editor: Editor) => void;
+  performInteraction: (payload: Record<string, any>) => Promise<Record<string, any> | undefined>;
+  newDataNotifier: (notifHandler: NotificationHandler) => void;
+  setHasChanged: (hasChanged: boolean) => void;
+  isStreaming: boolean;
+};
+
+function setComponentProperties(editor: Editor, isPreview: boolean) {
+  function setPropertiesRecursively(comp: Component) {
+    comp.set({
+      editable: !isPreview,
+      draggable: !isPreview,
+      droppable: !isPreview && comp.getName() !== 'Shadcn-generic',
+      selectable: !isPreview,
+      hoverable: !isPreview,
+      highlightable: !isPreview,
+      copyable: false,
+      resizable: false,
+      removable: !isPreview,
+      badgable: false,
+    });
+
+    if (!isPreview) {
+      comp.set('toolbar', [
+        { attributes: { class: 'fa fa-arrows' }, command: 'tlb-move' },
+        { attributes: { class: 'fa fa-trash' }, command: 'tlb-delete' },
+      ]);
+    }
+
+    comp.components().forEach(setPropertiesRecursively);
+  }
+
+  if (isPreview) {
+    editor.runCommand('core:preview');
+  } else {
+    editor.stopCommand('core:preview');
+  }
+
+  const wrapper = editor.getWrapper();
+  wrapper?.find('*').forEach(setPropertiesRecursively);
+}
+
+function convertStyles(stylesArray: any[]): string {
+  return stylesArray
+    .map((block) => {
+      const selectors = Array.isArray(block.selectors)
+        ? block.selectors.join(', ')
+        : block.selectors;
+      const declarations = Object.entries(block.style)
+        .map(([prop, value]) => `${toKebabCase(prop)}: ${value};`)
+        .join(' ');
+
+      return `${selectors} { ${declarations} }`;
+    })
+    .join('\n');
+}
+
+function createActionCardConfig(action: any, index?: number): any {
+  const { icon, title, description } = action;
+  
+  return {
+    type: 'shadcn-generic',
+    componentName: 'ActionCard',
+    badgable: false,
+    copyable: false,
+    removable: true,
+    draggable: true,
+    componentProps: {
+      icon,
+      headerContent: title,
+      bodyContent: description,
+    },
+  };
+}
+
+function expandActions(node: any): any {
+  if (
+    node.type === 'shadcn-generic' &&
+    node.componentName === 'Actions'
+  ) {
+    const actions = node.componentProps?.actions;
+
+    if (Array.isArray(actions) && actions.length > 0) {
+      return {
+        ...node,
+        type: 'div',
+        classes: ['dashboard-cards', ...(node.classes || [])],
+        componentName: undefined,
+        componentProps: undefined,
+        components: actions.map((action: any, i: number) => ({
+          ...createActionCardConfig(action, i),
+          id: `${node.id}--action-card-${i}`,
+        })),
+      };
+    }
+
+    return node;
+  }
+
+  if (Array.isArray(node.components)) {
+    return {
+      ...node,
+      components: node.components.map(expandActions),
+    };
+  }
+
+  return node;
+}
+
+function setInteracting(
+  renderedComponents: Record<string, Component>,
+  components: { componentId: string; showLoader: boolean }[],
+  inProgress: boolean,
+) {
+  components.forEach((component) => {
+    const { componentId, showLoader } = component;
+
+    if (!showLoader) {
+      return;
+    }
+
+    const gjsModel = renderedComponents[componentId];
+
+    if (gjsModel) {
+      gjsModel.set('attributes', {
+        ...gjsModel.get('attributes'),
+        interactionApiInProgress: inProgress,
+      });
+    }
+  });
+}
+
+function expandActionsComponent(model: Component, actions: any[]): void {
+  model.components('');
+  
+  actions.forEach((action: any) => {
+    model.append(createActionCardConfig(action));
+  });
+
+  model.set('type', 'div');
+  model.addClass('dashboard-cards');
+  model.set('componentName', undefined);
+  model.set('componentProps', {});
+}
+
+function GrapesjsCanvas({
+  json,
+  mode = 'preview',
+  setEditor,
+  performInteraction,
+  newDataNotifier = () => {
+    // no op
+  },
+  setHasChanged,
+  isStreaming,
+}: GrapesjsCanvasProps) {
+  const editorRef = useRef<HTMLDivElement>(null);
+  const editorInstance = useRef<Editor | null>(null);
+  const renderedComponents = useRef<Record<string, Component>>({});
+  const isStreamingRef = useRef(isStreaming);
+  const isSystemUpdateRef = useRef(false);
+  const lastJsonRef = useRef<string>('');
+  const isEditorAliveRef = useRef(false);
+
+  useEffect(() => {
+    isStreamingRef.current = isStreaming;
+  }, [isStreaming]);
+
+  function notificationHandler(
+    props: Parameters<NotificationHandler>[0],
+  ): ReturnType<NotificationHandler> {
+    if (!props) {
+      return true;
+    }
+
+    const { componentId, newProps = {}, newAttributes = {} } = props;
+
+    const model = renderedComponents.current[componentId];
+
+    if (!model) {
+      return false;
+    }
+
+    // Filter out complex placeholder objects that shouldn't be stored in the model, done intentionally to keep grapejs out of errors
+    const filteredProps = { ...newProps };
+
+    Object.keys(filteredProps).forEach((key) => {
+      const value = filteredProps[key];
+
+      if (value && typeof value === 'object' && value.name === '__peak_placeholder') {
+        delete filteredProps[key];
+      }
+    });
+
+    const parsedNewProps = {
+      ...filteredProps,
+    };
+
+    if (filteredProps.pagination) {
+      parsedNewProps.pagination = {
+        ...(model.get('componentProps').pagination || {}),
+        ...filteredProps.pagination,
+      };
+    }
+
+    // Handle Actions component: expand into ActionCards when data arrives via streaming
+    const isActionsComponent = model.get('componentName') === 'Actions';
+    const hasValidActionsData = parsedNewProps.actions && 
+      parsedNewProps.actions !== null && 
+      Array.isArray(parsedNewProps.actions) && 
+      parsedNewProps.actions.length > 0;
+    
+    if (isActionsComponent && hasValidActionsData) {
+      const isAlreadyExpanded = model.components().length > 0 && 
+        model.components().at(0)?.get('componentName') === 'ActionCard';
+
+      if (!isAlreadyExpanded) {
+        expandActionsComponent(model, parsedNewProps.actions);
+
+        return true;
+      }
+    }
+
+    model.set('componentProps', {
+      ...model.get('componentProps'),
+      ...parsedNewProps,
+    });
+
+    model.set('attributes', {
+      ...model.get('attributes'),
+      ...newAttributes,
+    });
+
+    return true;
+  }
+
+  useEffect(() => {
+    newDataNotifier(notificationHandler);
+  }, []);
+
+  async function performInteractionWrapper(payload: Record<string, any>) {
+    const updatedJson = await editorInstance.current?.store();
+    setInteracting(renderedComponents.current, payload.affectedComponents, true);
+
+    try {
+      const apiResponse = await performInteraction({
+        ...payload,
+        json: updatedJson,
+      });
+
+      const componentUpdates = apiResponse || {};
+
+      Object.entries(componentUpdates).forEach(([key, value]) => {
+        const model = renderedComponents.current[key];
+
+        if (model) {
+          model.set('attributes', {
+            ...model.get('attributes'),
+            error: undefined,
+          });
+
+          model.set('componentProps', {
+            ...model.get('componentProps'),
+            ...value,
+            error: undefined,
+            isMissing: undefined,
+          });
+        }
+      });
+
+      return componentUpdates;
+    } catch (error) {
+      payload.affectedComponents.forEach((componentId: string) => {
+        const model = renderedComponents.current[componentId];
+
+        if (model) {
+          const errorMessage =
+            error instanceof Error ? error.message : 'Something went wrong. Please try again.';
+
+          model.set('attributes', {
+            ...model.get('attributes'),
+            error: errorMessage,
+          });
+
+          model.set('componentProps', {
+            ...model.get('componentProps'),
+            error: errorMessage,
+            isMissing: undefined,
+          });
+        }
+      });
+
+      throw error;
+    } finally {
+      setInteracting(renderedComponents.current, payload.affectedComponents, false);
+    }
+  }
+
+  useEffect(() => {
+    if (!editorRef.current) {
+      return () => {
+        // no op
+      };
+    }
+
+    if (editorInstance.current) {
+      editorInstance.current.destroy();
+      editorInstance.current = null;
+      isEditorAliveRef.current = false;
+    }
+
+    const currentMode = mode;
+
+    const editor = grapesjs.init({
+      container: editorRef.current,
+      height: '100%',
+      plugins: [
+        tailwind,
+        createGrapesjsShadcnGenericPlugin(
+          currentMode,
+          performInteractionWrapper,
+          renderedComponents.current,
+          setHasChanged,
+        ),
+      ],
+      storageManager: { type: 'none' },
+      richTextEditor: {
+        actions: ['bold', 'italic', 'underline', 'strikethrough'],
+      },
+      canvas: {
+        customBadgeLabel: (component) => {
+          const tagName = component.get('tagName');
+
+          return tagName === 'body' ? '' : tagName || '';
+        },
+      },
+    });
+
+    isEditorAliveRef.current = true;
+
+    async function checkDirty() {
+      if (isStreamingRef.current || isSystemUpdateRef.current) {
+        return;
+      }
+
+      if (!isEditorAliveRef.current || !editorInstance.current) {
+        return;
+      }
+
+      let stored = null;
+
+      try {
+        stored = await editorInstance.current.store();
+      } catch (err) {
+        return;
+      }
+
+      if (!stored) {
+        return;
+      }
+
+      const newJson = JSON.stringify(stored);
+
+      if (newJson !== lastJsonRef.current) {
+        setHasChanged(true);
+        lastJsonRef.current = newJson;
+      }
+    }
+
+    const debouncedCheckDirty = (() => {
+      let timeout: NodeJS.Timeout | null = null;
+
+      return () => {
+        if (timeout) {
+          clearTimeout(timeout);
+        }
+
+        timeout = setTimeout(checkDirty, 200);
+      };
+    })();
+
+    [
+      'component:add',
+      'component:remove',
+      'component:update:content',
+      'style:update',
+      'component:drag:end',
+      'rte:change',
+    ].forEach((evt) => editor.on(evt, debouncedCheckDirty));
+
+    editor.on('component:update', (model, prop) => {
+      if (['attributes', 'componentProps', 'content'].includes(prop)) {
+        debouncedCheckDirty();
+      }
+    });
+
+    // Tailwind CSS rules aren't fully added to our component
+    // So, adding them from here!
+    editor.on('load', async () => {
+      const canvasHead = editor.Canvas.getDocument().head;
+      const style = document.createElement('style');
+      const fullCss = `
+        ${tailwindCompiledCss}
+        ${datePickerCss}
+        ::-webkit-scrollbar {
+          width: 0px;
+          height: 0px;
+        }
+        html, body {
+          overflow: auto !important;
+          -ms-overflow-style: none;  /* IE and Edge */
+          scrollbar-width: none;     /* Firefox */
+        }
+
+      `;
+      style.innerHTML = fullCss;
+      style.setAttribute('type', 'text/css');
+      canvasHead.appendChild(style);
+
+      isSystemUpdateRef.current = true;
+      setComponentProperties(editor, mode === 'preview');
+      lastJsonRef.current = JSON.stringify(await editor.store());
+      isSystemUpdateRef.current = false;
+    });
+
+    editorInstance.current = editor;
+
+    if (setEditor) {
+      setEditor(editor);
+    }
+
+    TypesToRegister.forEach(({ type, tagName }) => {
+      if (!editor.DomComponents.getType(type)) {
+        editor.DomComponents.addType(type, {
+          model: {
+            defaults: { tagName },
+          },
+          view: {},
+        });
+      }
+    });
+
+    if (json && json.pages?.length > 0 && json.pages[0].frames?.length > 0) {
+      isSystemUpdateRef.current = true;
+      const raw = json.pages[0].frames[0].component;
+      const processed = expandActions(raw);
+      editor.setComponents(processed);
+
+      const cssText = convertStyles(json.styles || []);
+      editor.setStyle(cssText);
+
+      editor.on('load', async () => {
+        lastJsonRef.current = JSON.stringify(await editor.store());
+        isSystemUpdateRef.current = false;
+      });
+    }
+
+    return function cleanup() {
+      editor.destroy();
+      isEditorAliveRef.current = false;
+    };
+  }, [json, mode]);
+
+  return (
+    <React.Fragment>
+      <StyledEditor />
+      <div ref={editorRef} id="grapesjs-editor" />
+    </React.Fragment>
+  );
+}
+
+export default GrapesjsCanvas;

package/src/constants/index.ts

@@ -0,0 +1,25 @@
+export const TypesToRegister = [
+  { tagName: 'div', type: 'div' },
+  { tagName: 'h1', type: 'heading' },
+  { tagName: 'p', type: 'text' },
+  { tagName: 'div', type: 'container' },
+  { tagName: 'div', type: 'grid' },
+  { tagName: 'table', type: 'table' },
+  { tagName: 'thead', type: 'thead' },
+  { tagName: 'tbody', type: 'tbody' },
+  { tagName: 'tr', type: 'tr' },
+  { tagName: 'th', type: 'th' },
+  { tagName: 'td', type: 'td' },
+  { tagName: 'button', type: 'button' },
+  { tagName: 'section', type: 'section' },
+  { tagName: 'a', type: 'link' },
+  { tagName: 'form', type: 'form' },
+  { tagName: 'input', type: 'input' },
+  { tagName: 'textarea', type: 'textarea' },
+  { tagName: 'select', type: 'select' },
+  { tagName: 'ul', type: 'ul' },
+  { tagName: 'ol', type: 'ol' },
+  { tagName: 'li', type: 'li' },
+  { tagName: 'header', type: 'header' },
+  { tagName: 'footer', type: 'footer' },
+];

package/src/declaration.d.ts

@@ -0,0 +1 @@
+declare module '*.gif';