@peak-ai/canvas 1.4.22 → 1.4.23

package/src/GrapesjsCanvas.tsx

@@ -1,494 +0,0 @@
-/* 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

@@ -1,25 +0,0 @@
-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

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