@erxes/ui 0.0.0-stage → 3.2.19-2

package/src/modules/attachments/context.tsx

@@ -0,0 +1,116 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import type { AttachmentContextType, IAttachment } from './types';
+
+const AttachmentContext = createContext<AttachmentContextType | null>(null);
+
+export const useAttachmentContext = (): AttachmentContextType => {
+  const ctx = useContext(AttachmentContext);
+  if (!ctx) {
+    throw new Error(
+      'useAttachmentContext must be used within <Attachments.Root>',
+    );
+  }
+  return ctx;
+};
+
+function stripTypename<T extends object>(obj: T): T {
+  const { __typename, ...rest } = obj as T & { __typename?: unknown };
+  return rest as T;
+}
+
+const defaultConfirm = (attachment: IAttachment): Promise<boolean> =>
+  Promise.resolve(
+    window.confirm(`Are you sure you want to delete "${attachment.name}"?`),
+  );
+
+export type AttachmentRootProps = {
+  children: React.ReactNode;
+  initialAttachments?: IAttachment[];
+  onSave?: (attachments: IAttachment[]) => Promise<void> | void;
+  onRemove?: (
+    attachment: IAttachment,
+    remaining: IAttachment[],
+  ) => Promise<boolean | void> | boolean | void;
+  confirmRemove?: (attachment: IAttachment) => Promise<boolean> | boolean;
+  isLoading?: boolean;
+};
+
+export const AttachmentRoot = ({
+  children,
+  initialAttachments = [],
+  onSave,
+  onRemove,
+  confirmRemove = defaultConfirm,
+  isLoading: externalLoading = false,
+}: AttachmentRootProps) => {
+  const [attachments, setAttachments] =
+    useState<IAttachment[]>(initialAttachments);
+  const [removingUrl, setRemovingUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    setAttachments(initialAttachments);
+  }, [initialAttachments]);
+
+  const addAttachment = useCallback((attachment: IAttachment) => {
+    setAttachments((prev) => [...prev, attachment]);
+  }, []);
+
+  const resetAttachments = useCallback(() => {
+    setAttachments([]);
+  }, []);
+
+  const removeAttachment = useCallback(
+    async (attachment: IAttachment) => {
+      setRemovingUrl(attachment.url);
+
+      const remaining = attachments
+        .filter((a) => a.url !== attachment.url)
+        .map(stripTypename);
+
+      try {
+        if (onRemove) {
+          const result = await onRemove(attachment, remaining);
+          if (result === false) return;
+        }
+        setAttachments(remaining);
+        await onSave?.(remaining);
+      } catch (err) {
+        console.error('[Attachments.Root] Failed to remove attachment:', err);
+      } finally {
+        setRemovingUrl(null);
+      }
+    },
+    [attachments, onRemove, onSave],
+  );
+
+  const handleRemoveAttachment = useCallback(
+    (e: React.MouseEvent, attachment: IAttachment) => {
+      e.stopPropagation();
+      Promise.resolve(confirmRemove(attachment)).then((confirmed) => {
+        if (confirmed) removeAttachment(attachment);
+      });
+    },
+    [confirmRemove, removeAttachment],
+  );
+
+  return (
+    <AttachmentContext.Provider
+      value={{
+        attachments,
+        addAttachment,
+        handleRemoveAttachment,
+        removingUrl,
+        resetAttachments,
+        isLoading: externalLoading,
+      }}
+    >
+      {children}
+    </AttachmentContext.Provider>
+  );
+};

package/src/modules/attachments/index.ts

@@ -0,0 +1,11 @@
+export { Attachments } from './attachments';
+export type {
+  AttachmentRootProps,
+  AttachmentFilesProps,
+  AttachmentPreviewProps,
+  AttachmentUploaderProps,
+} from './attachments';
+
+export { useAttachmentContext } from './context';
+export { parseFilesAsAttachments } from './types';
+export type { IAttachment, AttachmentContextType } from './types';

package/src/modules/attachments/types.ts

@@ -0,0 +1,72 @@
+export type IAttachment = {
+  url: string;
+  name: string;
+  size: number;
+  type: string;
+  duration?: number;
+};
+
+export type AttachmentContextType = {
+  attachments: IAttachment[];
+  addAttachment: (attachment: IAttachment) => void;
+  handleRemoveAttachment: (
+    e: React.MouseEvent,
+    attachment: IAttachment,
+  ) => void;
+  resetAttachments: () => void;
+  removingUrl: string | null;
+  isLoading: boolean;
+};
+
+export type AttachmentSavePayload = {
+  attachments: IAttachment[];
+};
+
+const EXT_TO_MIME: Record<string, string> = {
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  png: 'image/png',
+  gif: 'image/gif',
+  webp: 'image/webp',
+  svg: 'image/svg+xml',
+  bmp: 'image/bmp',
+  ico: 'image/x-icon',
+  avif: 'image/avif',
+  tiff: 'image/tiff',
+  tif: 'image/tiff',
+  pdf: 'application/pdf',
+  txt: 'text/plain',
+  doc: 'application/msword',
+  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  xls: 'application/vnd.ms-excel',
+  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  ppt: 'application/vnd.ms-powerpoint',
+  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+};
+
+export const parseFilesAsAttachments = (value: unknown): IAttachment[] => {
+  let urls: string[] = [];
+  if (!value) return [];
+  if (typeof value === 'string' && value.trim()) {
+    try {
+      const parsed = JSON.parse(value);
+      if (Array.isArray(parsed)) urls = parsed;
+      else if (parsed?.url) urls = [parsed.url];
+    } catch {
+      urls = [value];
+    }
+  } else if (Array.isArray(value)) {
+    urls = value as string[];
+  } else if (typeof value === 'object' && value !== null && 'url' in value) {
+    urls = [(value as { url: string }).url];
+  }
+  return urls.map((url) => {
+    const ext = url.split('?')[0].split('.').pop()?.toLowerCase() ?? '';
+    return {
+      url,
+      name: url.split('/').pop() ?? url,
+      size: 0,
+      type: EXT_TO_MIME[ext] ?? 'application/octet-stream',
+    };
+  });
+};

package/src/modules/blocks/components/BarcodeAttribute.tsx

@@ -0,0 +1,142 @@
+import {
+  PointerEvent as ReactPointerEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Button } from 'erxes-ui/components';
+import { IconArrowsDiagonal } from '@tabler/icons-react';
+
+const MIN_WIDTH = 80;
+const MIN_HEIGHT = 30;
+const MAX_WIDTH = 600;
+const MAX_HEIGHT = 300;
+
+type BarcodeSize = Readonly<{ width: number; height: number }>;
+
+type BarcodeAttributeProps = Readonly<{
+  editable: boolean;
+  height: number;
+  onResize: (size: BarcodeSize) => void;
+  width: number;
+}>;
+
+export const BarcodeAttribute = ({
+  editable,
+  height,
+  onResize,
+  width,
+}: BarcodeAttributeProps) => {
+  const [size, setSize] = useState<BarcodeSize>({ width, height });
+  const dragStart = useRef<
+    (BarcodeSize & { clientX: number; clientY: number }) | null
+  >(null);
+
+  useEffect(() => {
+    if (!dragStart.current) {
+      setSize({ width, height });
+    }
+  }, [height, width]);
+
+  const getResizedDimensions = (event: ReactPointerEvent) => {
+    const start = dragStart.current;
+
+    if (!start) {
+      return size;
+    }
+
+    return {
+      width: Math.min(
+        MAX_WIDTH,
+        Math.max(MIN_WIDTH, start.width + event.clientX - start.clientX),
+      ),
+      height: Math.min(
+        MAX_HEIGHT,
+        Math.max(MIN_HEIGHT, start.height + start.clientY - event.clientY),
+      ),
+    };
+  };
+
+  const handleResizeStart = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    dragStart.current = {
+      ...size,
+      clientX: event.clientX,
+      clientY: event.clientY,
+    };
+  };
+
+  const handleResize = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    if (dragStart.current) {
+      setSize(getResizedDimensions(event));
+    }
+  };
+
+  const handleResizeEnd = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    if (!dragStart.current) {
+      return;
+    }
+
+    const resizedDimensions = getResizedDimensions(event);
+    dragStart.current = null;
+    setSize(resizedDimensions);
+    onResize(resizedDimensions);
+  };
+
+  return (
+    <span
+      className="relative inline-block align-middle"
+      contentEditable={false}
+      title="Barcode preview — prints the selected product’s barcode"
+      style={size}
+    >
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 202 69"
+        preserveAspectRatio="none"
+        role="img"
+        aria-label="Product barcode preview"
+        className="block bg-white"
+      >
+        <path
+          stroke="#000"
+          strokeWidth="4"
+          d="M2 69L2 0M28 69L28 0M58 69L58 0M84 69L84 0M90 69L90 0M112 69L112 0M128 69L128 0M138 69L138 0M168 69L168 0M178 69L178 0M200 69L200 0"
+        />
+        <path
+          stroke="#000"
+          strokeWidth="2"
+          d="M7 69L7 0M23 69L23 0M45 69L45 0M53 69L53 0M79 69L79 0M101 69L101 0M105 69L105 0M133 69L133 0M163 69L163 0M195 69L195 0"
+        />
+        <path
+          stroke="#000"
+          strokeWidth="6"
+          d="M15 69L15 0M37 69L37 0M69 69L69 0M147 69L147 0M157 69L157 0M189 69L189 0"
+        />
+        <path stroke="#000" strokeWidth="8" d="M120 69L120 0" />
+      </svg>
+      {editable && (
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          aria-label="Resize barcode"
+          title="Drag up to increase height; drag right to increase width"
+          className="absolute -right-1 -top-1 z-10 size-5 touch-none cursor-nesw-resize rounded-full border border-primary bg-background p-0 text-primary"
+          onPointerDown={handleResizeStart}
+          onPointerMove={handleResize}
+          onPointerUp={handleResizeEnd}
+          onPointerCancel={() => {
+            dragStart.current = null;
+            setSize({ width, height });
+          }}
+        >
+          <IconArrowsDiagonal className="size-3" />
+        </Button>
+      )}
+    </span>
+  );
+};

package/src/modules/blocks/components/BlockEditor.tsx

@@ -0,0 +1,248 @@
+import {
+  createReactInlineContentSpec,
+  DefaultReactSuggestionItem,
+  getDefaultReactSlashMenuItems,
+  SuggestionMenuController,
+  TableHandlesController,
+} from '@blocknote/react';
+import { filterSuggestionItems } from '@blocknote/core';
+import { BlockNoteView } from '@blocknote/shadcn';
+
+import { Button, Tooltip } from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib';
+import { themeState } from 'erxes-ui/state';
+import { IconPhoto } from '@tabler/icons-react';
+import { useAtomValue } from 'jotai';
+import { KeyboardEvent, useState } from 'react';
+import { BlockEditorProps } from '../types';
+import { SlashMenu } from './SlashMenu';
+import { Toolbar } from './Toolbar';
+import { BarcodeAttribute } from './BarcodeAttribute';
+import { TableHandleWithRemove } from './TableHandleWithRemove';
+
+type EditorBlock = ReturnType<
+  BlockEditorProps['editor']['getTextCursorPosition']
+>['block'];
+
+const isEmptyBlock = (block?: EditorBlock) =>
+  !!block &&
+  Array.isArray(block.content) &&
+  !block.content.length &&
+  !block.children?.length;
+
+export const BlockEditor = ({
+  editor,
+  onFocus,
+  onBlur,
+  onPaste,
+  onChange,
+  readonly,
+  children,
+  className,
+  style,
+  disabled,
+  variant = 'default',
+  sideMenu = true,
+  linkToolbar = true,
+  slashMenuOnTop = false,
+  additionalSlashMenuItems,
+}: BlockEditorProps) => {
+  const theme = useAtomValue(themeState);
+  const [focus, setFocus] = useState(false);
+  const getSlashMenuItems = (query: string) => {
+    const items = getDefaultReactSlashMenuItems(editor);
+    const hasImageItem = items.some((item) => item.title === 'Image');
+    const hasCustomImageBlock = 'image' in editor.schema.blockSchema;
+    const filePanelPlugin = editor.filePanel?.plugins[0];
+
+    if (!hasImageItem && hasCustomImageBlock && filePanelPlugin) {
+      items.splice(9, 0, {
+        title: editor.dictionary.slash_menu.image.title,
+        subtext: editor.dictionary.slash_menu.image.subtext,
+        aliases: editor.dictionary.slash_menu.image.aliases,
+        badge: undefined,
+        group: editor.dictionary.slash_menu.image.group,
+        onItemClick: () => {
+          const currentBlock = editor.getTextCursorPosition().block;
+          const insertedBlock = editor.insertBlocks(
+            [{ type: 'image' }],
+            currentBlock,
+            'after',
+          )[0];
+
+          editor.transact((tr) =>
+            tr.setMeta(filePanelPlugin, {
+              block: insertedBlock,
+            }),
+          );
+        },
+      } satisfies DefaultReactSuggestionItem);
+    }
+
+    if ('gallery' in editor.schema.blockSchema) {
+      items.push({
+        title: 'Gallery',
+        subtext: 'Insert a multi-image gallery grid',
+        aliases: ['gallery', 'images', 'grid'],
+        badge: undefined,
+        group: editor.dictionary.slash_menu.image.group,
+        icon: <IconPhoto size={18} />,
+        onItemClick: () => {
+          const currentBlock = editor.getTextCursorPosition().block;
+          editor.insertBlocks([{ type: 'gallery' }], currentBlock, 'after');
+        },
+      } satisfies DefaultReactSuggestionItem);
+    }
+
+    const customItems =
+      typeof additionalSlashMenuItems === 'function'
+        ? additionalSlashMenuItems(editor)
+        : additionalSlashMenuItems;
+
+    if (customItems?.length) {
+      items.push(...customItems);
+    }
+
+    return Promise.resolve(filterSuggestionItems(items, query));
+  };
+
+  const handleKeyDownCapture = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (readonly || disabled || (e.key !== 'Backspace' && e.key !== 'Delete')) {
+      return;
+    }
+
+    const { block, prevBlock, nextBlock, parentBlock } =
+      editor.getTextCursorPosition();
+
+    if (parentBlock || !nextBlock || !isEmptyBlock(block)) {
+      return;
+    }
+
+    if (e.key === 'Backspace' && prevBlock) {
+      return;
+    }
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    editor.removeBlocks([block]);
+    editor.setTextCursorPosition(nextBlock, 'start');
+  };
+
+  return (
+    <div
+      onKeyDownCapture={handleKeyDownCapture}
+      className={cn(
+        'erxes-blocknote',
+        'transition-shadow',
+        variant === 'outline' && (focus ? 'shadow-focus' : 'shadow-xs'),
+        className,
+      )}
+    >
+      <BlockNoteView
+        theme={theme as 'light' | 'dark'}
+        editor={editor}
+        slashMenu={false}
+        sideMenu={sideMenu}
+        linkToolbar={linkToolbar}
+        onFocus={() => {
+          setFocus(true);
+          onFocus?.();
+        }}
+        onBlur={() => {
+          setFocus(false);
+          onBlur?.();
+        }}
+        editable={!readonly && !disabled}
+        onChange={onChange}
+        formattingToolbar={false}
+        tableHandles={false}
+        shadCNComponents={{
+          Button: { Button },
+          Tooltip: {
+            Tooltip,
+            TooltipContent: Tooltip.Content,
+            TooltipProvider: Tooltip.Provider,
+            TooltipTrigger: Tooltip.Trigger,
+          },
+        }}
+        style={style}
+      >
+        <SuggestionMenuController
+          triggerCharacter="/"
+          getItems={getSlashMenuItems}
+          suggestionMenuComponent={SlashMenu}
+          floatingOptions={
+            slashMenuOnTop ? { placement: 'top-start' } : undefined
+          }
+        />
+        <Toolbar />
+        <TableHandlesController tableHandle={TableHandleWithRemove} />
+        {children}
+      </BlockNoteView>
+    </div>
+  );
+};
+
+export const Mention = createReactInlineContentSpec(
+  {
+    type: 'mention',
+    propSchema: {
+      fullName: {
+        default: 'Unknown',
+      },
+      _id: {
+        default: '',
+      },
+    },
+    content: 'none',
+  },
+  {
+    render: (props) => (
+      <span className="bg-primary/10 p-1 rounded font-bold text-sm text-primary inline-flex items-center">
+        @{props.inlineContent.props.fullName}
+      </span>
+    ),
+  },
+);
+
+export const Attribute = createReactInlineContentSpec(
+  {
+    type: 'attribute',
+    propSchema: {
+      name: {
+        default: 'Unknown',
+      },
+      value: {
+        default: '',
+      },
+      width: {
+        default: 150,
+      },
+      height: {
+        default: 50,
+      },
+    },
+    content: 'none',
+  },
+  {
+    render: (props) =>
+      props.inlineContent.props.value === 'barcode' ? (
+        <BarcodeAttribute
+          editable={props.editor.isEditable}
+          height={props.inlineContent.props.height}
+          width={props.inlineContent.props.width}
+          onResize={({ width, height }) =>
+            props.updateInlineContent({
+              type: 'attribute',
+              props: { ...props.inlineContent.props, width, height },
+            })
+          }
+        />
+      ) : (
+        <span className="bg-yellow-50 p-1 rounded font-bold text-sm text-yellow-900 inline-flex items-center">
+          {props.inlineContent.props.name}
+        </span>
+      ),
+  },
+);

package/src/modules/blocks/components/BlockEditorReadOnly.tsx

@@ -0,0 +1,67 @@
+import { useCreateBlockNote } from '@blocknote/react';
+import { BLOCK_SCHEMA } from 'erxes-ui/modules/blocks/constant/blockEditorSchema';
+import { BlockNoteView } from '@blocknote/shadcn';
+import { useAtomValue } from 'jotai';
+import { themeState } from 'erxes-ui/state';
+import { parseBlocks } from '../utils';
+import DOMPurify from 'dompurify';
+import { cn } from 'erxes-ui/lib';
+import React, { useEffect, useMemo } from 'react';
+import { readImage } from '../../../utils/core';
+
+export const BlockEditorReadOnly = React.forwardRef<
+  HTMLDivElement,
+  {
+    content: string;
+    className?: string;
+  }
+>(({ content, className }, ref) => {
+  const contentBlocks = parseBlocks(content);
+
+  const editor = useCreateBlockNote({
+    schema: BLOCK_SCHEMA,
+    initialContent: contentBlocks || undefined,
+    resolveFileUrl: (url) => Promise.resolve(readImage(url)),
+  });
+  const theme = useAtomValue(themeState);
+
+  // The editor instance keeps its initialContent; sync blocks when the
+  // content prop changes after mount.
+  useEffect(() => {
+    const blocks = parseBlocks(content);
+
+    if (blocks) {
+      editor.replaceBlocks(editor.document, blocks);
+    }
+  }, [editor, content]);
+
+  const sanitized = useMemo(
+    () => (content ? DOMPurify.sanitize(content) : ''),
+    [content],
+  );
+
+  if (!contentBlocks) {
+    if (content) {
+      return (
+        <div
+          dangerouslySetInnerHTML={{ __html: sanitized }}
+          className={className}
+          ref={ref}
+        />
+      );
+    }
+    return null;
+  }
+
+  return (
+    <BlockNoteView
+      className={cn('read-only', className)}
+      editor={editor}
+      editable={false}
+      formattingToolbar={false}
+      slashMenu={false}
+      sideMenu={false}
+      theme={theme as 'light' | 'dark'}
+    />
+  );
+});