@erxes/ui 0.0.0-stage → 3.2.19-2

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

@@ -0,0 +1,156 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useBlockEditor } from '../hooks/useBlockEditor';
+import { BlockEditor } from './BlockEditor';
+import { Block } from '@blocknote/core';
+import { BlockEditorProps, IEditorProps } from '../types';
+import { cn } from 'erxes-ui/lib';
+import { parseBlocks } from '../utils';
+
+export const Editor = ({
+  onChange,
+  initialContent,
+  scope,
+  className,
+  isHTML = false,
+  uploadFile,
+  ...props
+}: Omit<BlockEditorProps, 'editor' | 'onChange'> & IEditorProps) => {
+  const skipNextOnChangeRef = useRef(false);
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastEditorOutputRef = useRef<string>('');
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    };
+  }, []);
+  const parsedInitialContent = parseBlocks(initialContent ?? '');
+  const editor = useBlockEditor({
+    initialContent: parsedInitialContent || undefined,
+    uploadFile,
+  });
+
+  useEffect(() => {
+    if (!isHTML || !initialContent) return;
+
+    let isActive = true;
+
+    const syncHTMLContent = async () => {
+      // Skip if this change was emitted by the editor itself — no need to re-sync
+      if (initialContent === lastEditorOutputRef.current) return;
+
+      // Support legacy JSON content stored before isHTML mode was introduced
+      const parsed = parseBlocks(initialContent);
+      if (parsed) {
+        const currentSerialized = JSON.stringify(editor.document);
+        const nextSerialized = JSON.stringify(parsed);
+        if (isActive && currentSerialized !== nextSerialized) {
+          skipNextOnChangeRef.current = true;
+          editor.replaceBlocks(editor.document, parsed);
+        }
+        return;
+      }
+
+      try {
+        const blocks = await editor.tryParseHTMLToBlocks(initialContent);
+        if (!isActive) return;
+
+        const currentSerialized = JSON.stringify(editor.document);
+        const nextSerialized = JSON.stringify(blocks);
+        if (currentSerialized !== nextSerialized) {
+          skipNextOnChangeRef.current = true;
+          editor.replaceBlocks(editor.document, blocks);
+        }
+      } catch {
+        // ignore
+      }
+    };
+
+    syncHTMLContent();
+
+    return () => {
+      isActive = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, initialContent, isHTML]);
+
+  useEffect(() => {
+    if (isHTML) return;
+
+    let isActive = true;
+    const syncContent = async () => {
+      const parsed = parseBlocks(initialContent ?? '');
+      if (parsed) {
+        const currentSerialized = JSON.stringify(editor.document);
+        const nextSerialized = JSON.stringify(parsed);
+
+        if (!isActive) return;
+
+        if (currentSerialized !== nextSerialized) {
+          skipNextOnChangeRef.current = true;
+          editor.replaceBlocks(editor.document, parsed);
+        }
+        return;
+      }
+
+      if (typeof initialContent !== 'string' || !initialContent.trim()) {
+        return;
+      }
+
+      try {
+        const blocks = await editor.tryParseHTMLToBlocks(initialContent);
+        if (!isActive) return;
+
+        const currentSerialized = JSON.stringify(editor.document);
+        const nextSerialized = JSON.stringify(blocks);
+
+        if (currentSerialized !== nextSerialized) {
+          skipNextOnChangeRef.current = true;
+          editor.replaceBlocks(editor.document, blocks);
+        }
+      } catch {
+        // ignore parsing errors for legacy/plain text content
+      }
+    };
+
+    syncContent();
+
+    return () => {
+      isActive = false;
+    };
+  }, [editor, initialContent, isHTML]);
+
+  const handleChange = useCallback(() => {
+    if (skipNextOnChangeRef.current) {
+      skipNextOnChangeRef.current = false;
+      return;
+    }
+
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+
+    debounceTimerRef.current = setTimeout(async () => {
+      const content = editor?.document;
+      if (!content) return;
+      if (isHTML) {
+        const htmlContent = await editor.blocksToHTMLLossy(content as Block[]);
+        lastEditorOutputRef.current = htmlContent;
+        onChange(htmlContent);
+      } else {
+        onChange(JSON.stringify(content));
+      }
+    }, 300);
+  }, [editor, isHTML, onChange]);
+
+  return (
+    <BlockEditor
+      variant="outline"
+      className={cn(
+        'min-w-0 w-full overflow-x-hidden overflow-y-auto h-28 rounded-md min-h-28 styled-scroll shadow-xs transition-[color,box-shadow] pt-1',
+        className,
+      )}
+      {...props}
+      editor={editor}
+      onChange={handleChange}
+    />
+  );
+};

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

@@ -0,0 +1,121 @@
+import {
+  useBlockNoteEditor,
+  useComponentsContext,
+  useEditorContentOrSelectionChange,
+} from '@blocknote/react';
+import { useState } from 'react';
+import { IconTypography, IconCheck } from '@tabler/icons-react';
+
+interface FontStyles {
+  fontFamily?: string;
+}
+
+interface BlockSpecConfig {
+  config?: { isFileBlock?: boolean };
+}
+
+interface EditorWithFontFamily {
+  addStyles(styles: FontStyles): void;
+  removeStyles(styles: FontStyles): void;
+}
+
+const FONT_FAMILIES = [
+  { name: 'Default', value: '' },
+  { name: 'Arial', value: 'Arial, sans-serif' },
+  { name: 'Helvetica', value: 'Helvetica, sans-serif' },
+  { name: 'Times New Roman', value: '"Times New Roman", serif' },
+  { name: 'Georgia', value: 'Georgia, serif' },
+  { name: 'Garamond', value: 'Garamond, serif' },
+  { name: 'Courier New', value: '"Courier New", monospace' },
+  { name: 'Verdana', value: 'Verdana, sans-serif' },
+  { name: 'Trebuchet MS', value: '"Trebuchet MS", sans-serif' },
+  { name: 'Palatino', value: 'Palatino, serif' },
+  { name: 'Tahoma', value: 'Tahoma, sans-serif' },
+  { name: 'Century Gothic', value: '"Century Gothic", sans-serif' },
+  { name: 'Lucida Sans', value: '"Lucida Sans", sans-serif' },
+  { name: 'Monaco', value: 'Monaco, monospace' },
+  { name: 'Consolas', value: 'Consolas, monospace' },
+  { name: 'Calibri', value: 'Calibri, sans-serif' },
+  { name: 'Cambria', value: 'Cambria, serif' },
+  { name: 'Didot', value: 'Didot, serif' },
+  { name: 'Rockwell', value: 'Rockwell, serif' },
+  { name: 'Franklin Gothic', value: '"Franklin Gothic Medium", sans-serif' },
+  { name: 'Impact', value: 'Impact, fantasy' },
+];
+
+export const FontFamilyButton = () => {
+  const editor = useBlockNoteEditor();
+  const Components = useComponentsContext();
+  const [currentFont, setCurrentFont] = useState('');
+  const [isFileBlock, setIsFileBlock] = useState(false);
+
+  useEditorContentOrSelectionChange(() => {
+    if (!editor) return;
+    try {
+      const styles = editor.getActiveStyles() as FontStyles;
+      setCurrentFont(styles?.fontFamily || '');
+      const block = editor.getTextCursorPosition()?.block;
+      const blockSpecs = editor.schema.blockSpecs as Record<
+        string,
+        BlockSpecConfig
+      >;
+      const blockSpec = block ? blockSpecs[block.type] : null;
+      setIsFileBlock(!!blockSpec?.config?.isFileBlock);
+    } catch {
+      // ignore
+    }
+  }, editor);
+
+  const handleFontChange = (fontValue: string) => {
+    if (!editor) return;
+
+    try {
+      const typedEditor = editor as unknown as EditorWithFontFamily;
+      if (fontValue === '') {
+        typedEditor.removeStyles({ fontFamily: '' });
+      } else {
+        typedEditor.addStyles({ fontFamily: fontValue });
+      }
+      editor.focus();
+    } catch (error) {
+      console.error('Error changing font:', error);
+    }
+  };
+
+  if (!Components || isFileBlock) {
+    return null;
+  }
+
+  const currentFontName =
+    FONT_FAMILIES.find((f) => f.value === currentFont)?.name || 'Default';
+
+  return (
+    <Components.Generic.Menu.Root>
+      <Components.Generic.Menu.Trigger>
+        <Components.FormattingToolbar.Button
+          className="bn-button"
+          label="Font"
+          mainTooltip="Font Family"
+          icon={<IconTypography size={16} />}
+        />
+      </Components.Generic.Menu.Trigger>
+      <Components.Generic.Menu.Dropdown className="bn-menu-dropdown bn-drag-handle-menu">
+        {FONT_FAMILIES.map((font) => (
+          <Components.Generic.Menu.Item
+            key={font.value || 'default'}
+            onClick={() => handleFontChange(font.value)}
+          >
+            <div
+              className="flex items-center gap-2 w-full"
+              style={{ fontFamily: font.value }}
+            >
+              {currentFont === font.value && <IconCheck size={14} />}
+              {currentFont !== font.value && <span className="w-[14px]" />}
+              {font.name}
+            </div>
+          </Components.Generic.Menu.Item>
+        ))}
+      </Components.Generic.Menu.Dropdown>
+    </Components.Generic.Menu.Root>
+  );
+};

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

@@ -0,0 +1,380 @@
+import {
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+} from '@blocknote/core';
+import {
+  createReactBlockSpec,
+  ReactCustomBlockRenderProps,
+  useResolveUrl,
+} from '@blocknote/react';
+import {
+  IconLayoutGrid,
+  IconPhoto,
+  IconPlus,
+  IconX,
+  IconLoader2,
+} from '@tabler/icons-react';
+import { FC, useRef, useState } from 'react';
+import { cn } from 'erxes-ui/lib';
+import { readImage } from 'erxes-ui/utils';
+import { Button, Spinner } from 'erxes-ui/components';
+import { Attachments } from 'erxes-ui/modules/attachments';
+import { useToast } from 'erxes-ui/hooks';
+
+export interface GalleryImage {
+  url: string;
+  caption?: string;
+}
+
+const COLUMN_OPTIONS = [2, 3, 4] as const;
+
+const galleryBlockConfig = {
+  type: 'gallery' as const,
+  propSchema: {
+    images: {
+      default: '[]' as string,
+    },
+    columns: {
+      default: '3' as string,
+    },
+  },
+  content: 'none' as const,
+};
+
+type GalleryRenderProps = ReactCustomBlockRenderProps<
+  typeof galleryBlockConfig,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema
+>;
+
+const parseImages = (raw: string): GalleryImage[] => {
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+};
+
+const GalleryItem: FC<{
+  image: GalleryImage;
+  readonly: boolean;
+  onRemove: () => void;
+  onPreview: () => void;
+}> = ({ image, readonly, onRemove, onPreview }) => {
+  const { loadingState, downloadUrl } = useResolveUrl(image.url);
+  const isResolving = loadingState === 'loading';
+  const src = downloadUrl ?? image.url;
+
+  return (
+    <div className="relative group aspect-square overflow-hidden rounded-md bg-muted">
+      {isResolving ? (
+        <div className="flex h-full w-full items-center justify-center">
+          <Spinner size="sm" />
+        </div>
+      ) : (
+        <Button
+          variant="ghost"
+          aria-label="Preview image"
+          className="h-full w-full p-0 rounded-none"
+          onClick={onPreview}
+        >
+          <img
+            src={src}
+            alt={image.caption ?? ''}
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+              display: 'block',
+            }}
+            draggable={false}
+          />
+        </Button>
+      )}
+
+      {!readonly && (
+        <Button
+          variant="ghost"
+          aria-label="Remove image"
+          className="absolute top-1 right-1 h-5 w-5 p-0 rounded-full bg-black/50 text-white opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity [&>svg]:size-3"
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={onRemove}
+        >
+          <IconX />
+        </Button>
+      )}
+      {image.caption && (
+        <div className="absolute bottom-0 inset-x-0 bg-black/50 text-white text-xs px-1.5 py-0.5 truncate">
+          {image.caption}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const GalleryBlockContent: FC<GalleryRenderProps> = ({ block, editor }) => {
+  const [uploading, setUploading] = useState(false);
+  const { toast } = useToast();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const images = parseImages(block.props.images);
+  const columns = Math.max(2, Math.min(4, parseInt(block.props.columns) || 3));
+  const readonly = !editor.isEditable;
+  const uploadFile = editor.uploadFile;
+  const canUpload = Boolean(uploadFile);
+
+  const updateBlock = (patch: Partial<typeof block.props>) => {
+    editor.updateBlock(block, { props: patch });
+  };
+
+  const handleFiles = async (files: FileList | null) => {
+    if (!files?.length || !uploadFile) return;
+    setUploading(true);
+    try {
+      const results = await Promise.allSettled(
+        Array.from(files).map(async (file) => {
+          const uploadedFile = await uploadFile(file);
+          const url =
+            typeof uploadedFile === 'string'
+              ? uploadedFile
+              : uploadedFile.props?.url;
+          if (typeof url !== 'string' || !url) {
+            throw new Error(`Failed to upload ${file.name}`);
+          }
+          return { url };
+        }),
+      );
+      const uploaded = results.flatMap((result) =>
+        result.status === 'fulfilled' ? [result.value] : [],
+      );
+      const currentBlock = editor.getBlock(block.id);
+      if (uploaded.length && currentBlock) {
+        updateBlock({
+          images: JSON.stringify([
+            ...parseImages(currentBlock.props.images),
+            ...uploaded,
+          ]),
+        });
+      }
+      const failedNames = Array.from(files)
+        .filter((_, index) => results[index].status === 'rejected')
+        .map((file) => file.name);
+      if (failedNames.length) {
+        toast({
+          title: 'Failed to upload gallery images',
+          description: failedNames.join(', '),
+          variant: 'destructive',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: 'Failed to upload gallery images',
+        description:
+          error instanceof Error ? error.message : 'Please try again.',
+        variant: 'destructive',
+      });
+    } finally {
+      setUploading(false);
+      if (inputRef.current) inputRef.current.value = '';
+    }
+  };
+
+  const removeImage = (index: number) => {
+    updateBlock({
+      images: JSON.stringify(images.filter((_, i) => i !== index)),
+    });
+  };
+
+  const setColumns = (n: number) => {
+    updateBlock({ columns: String(n) });
+  };
+
+  let uploadButtonLabel = 'Add more';
+  let uploadButtonIcon = <IconPlus size={15} />;
+  if (uploading) {
+    uploadButtonLabel = 'Uploading...';
+    uploadButtonIcon = <IconLoader2 size={15} className="animate-spin" />;
+  } else if (images.length === 0) {
+    uploadButtonLabel = 'Add images to gallery';
+    uploadButtonIcon = <IconPhoto size={15} />;
+  }
+
+  if (readonly && images.length === 0) return null;
+
+  return (
+    <div className="w-full my-1 select-none" contentEditable={false}>
+      {images.length > 0 && (
+        <Attachments.Root
+          initialAttachments={images.map((image) => ({
+            url: image.url,
+            name: image.caption ?? '',
+            type: 'image/*',
+            size: 0,
+          }))}
+        >
+          <Attachments.Preview
+            heading=""
+            className="p-0"
+            renderThumbnails={(openPreview) => (
+              <div
+                className="grid gap-2"
+                style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
+              >
+                {images.map((img, i) => (
+                  <GalleryItem
+                    key={`${img.url}-${i}`}
+                    image={img}
+                    readonly={readonly}
+                    onRemove={() => removeImage(i)}
+                    onPreview={() => openPreview(i)}
+                  />
+                ))}
+              </div>
+            )}
+          />
+        </Attachments.Root>
+      )}
+
+      {!readonly && (
+        <div className="flex items-center gap-2 mt-2">
+          <input
+            ref={inputRef}
+            type="file"
+            accept="image/*"
+            multiple
+            className="hidden"
+            onChange={(e) => handleFiles(e.target.files)}
+          />
+
+          {canUpload ? (
+            <Button
+              variant="ghost"
+              disabled={uploading}
+              className="flex-1 h-auto gap-1.5 py-2 text-muted-foreground border border-dashed rounded-md hover:bg-muted"
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => inputRef.current?.click()}
+            >
+              {uploadButtonIcon}
+              <span>{uploadButtonLabel}</span>
+            </Button>
+          ) : (
+            images.length === 0 && (
+              <div className="flex flex-1 items-center justify-center gap-1.5 text-sm text-muted-foreground border border-dashed rounded-md px-3 py-2">
+                <IconPhoto size={15} />
+                <span>No upload handler configured</span>
+              </div>
+            )
+          )}
+
+          {images.length > 0 && (
+            <div className="flex items-center gap-1 shrink-0">
+              <IconLayoutGrid size={14} className="text-muted-foreground" />
+              {COLUMN_OPTIONS.map((n) => (
+                <Button
+                  key={n}
+                  variant="ghost"
+                  aria-label={`${n} columns`}
+                  aria-pressed={columns === n}
+                  className={cn(
+                    'h-6 w-6 p-0 text-xs',
+                    columns === n
+                      ? 'bg-primary text-primary-foreground hover:bg-primary'
+                      : 'text-muted-foreground hover:bg-muted',
+                  )}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={() => setColumns(n)}
+                >
+                  {n}
+                </Button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const GalleryExternalHTML: FC<GalleryRenderProps> = ({ block }) => {
+  const images = parseImages(block.props.images);
+  const columns = Math.max(2, Math.min(4, parseInt(block.props.columns) || 3));
+
+  return (
+    <div
+      className="erxes-editor-gallery"
+      data-columns={String(columns)}
+      style={
+        images.length > 0
+          ? {
+              display: 'grid',
+              gridTemplateColumns: `repeat(${columns}, 1fr)`,
+              gap: '8px',
+            }
+          : { display: 'none' }
+      }
+    >
+      {images.map((img, i) =>
+        img.caption ? (
+          <figure key={`${img.url}-${i}`} style={{ margin: 0 }}>
+            <img
+              src={readImage(img.url)}
+              alt={img.caption}
+              style={{
+                width: '100%',
+                aspectRatio: '1 / 1',
+                objectFit: 'cover',
+                display: 'block',
+              }}
+            />
+            <figcaption>{img.caption}</figcaption>
+          </figure>
+        ) : (
+          <img
+            key={`${img.url}-${i}`}
+            src={readImage(img.url)}
+            alt=""
+            style={{
+              width: '100%',
+              aspectRatio: '1 / 1',
+              objectFit: 'cover',
+              display: 'block',
+            }}
+          />
+        ),
+      )}
+    </div>
+  );
+};
+
+export const galleryBlock = createReactBlockSpec(galleryBlockConfig, {
+  render: GalleryBlockContent,
+  toExternalHTML: GalleryExternalHTML,
+  parse: (element) => {
+    if (
+      element.tagName === 'DIV' &&
+      element.classList.contains('erxes-editor-gallery')
+    ) {
+      const columns = element.getAttribute('data-columns') ?? '3';
+      const images: GalleryImage[] = [];
+
+      element.querySelectorAll('figure, img').forEach((el) => {
+        if (el.closest('figure') && el.tagName !== 'FIGURE') return;
+        if (el.tagName === 'FIGURE') {
+          const img = el.querySelector('img') as HTMLImageElement | null;
+          if (img?.src)
+            images.push({
+              url: img.src,
+              caption: el.querySelector('figcaption')?.textContent ?? undefined,
+            });
+        } else {
+          const img = el as HTMLImageElement;
+          if (img.src) images.push({ url: img.src });
+        }
+      });
+
+      return { images: JSON.stringify(images), columns };
+    }
+    return undefined;
+  },
+});