@erxes/ui 0.0.0-stage → 3.2.19-2

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

@@ -0,0 +1,100 @@
+import {
+  useBlockNoteEditor,
+  useComponentsContext,
+  useSelectedBlocks,
+} from '@blocknote/react';
+import {
+  IconAlignLeft,
+  IconAlignRight,
+  IconArrowsMaximize,
+  IconCheck,
+  IconPhoto,
+  TablerIconsProps,
+} from '@tabler/icons-react';
+import { IMAGE_STYLE_PRESETS, ImageStyle } from './CustomImageBlock';
+
+type IconComponent = (props: TablerIconsProps) => JSX.Element;
+
+const IMAGE_STYLE_OPTIONS: Array<{
+  label: string;
+  value: ImageStyle;
+  Icon: IconComponent;
+}> = [
+  { label: 'Normal',      value: 'normal',      Icon: IconPhoto },
+  { label: 'Wide',        value: 'wide',        Icon: IconArrowsMaximize },
+  { label: 'Float Left',  value: 'float-left',  Icon: IconAlignLeft },
+  { label: 'Float Right', value: 'float-right', Icon: IconAlignRight },
+];
+
+type ImageBlock = {
+  id: string;
+  type: string;
+  props?: {
+    imageStyle?: string;
+  };
+};
+
+const ALL_STYLES: ImageStyle[] = ['normal', 'wide', 'float-left', 'float-right'];
+
+export const ImageStyleButton = () => {
+  const editor = useBlockNoteEditor();
+  const Components = useComponentsContext();
+  const selectedBlocks = useSelectedBlocks(editor);
+  const selectedBlock =
+    (selectedBlocks.find((block) => block.type === 'image') as
+      | ImageBlock
+      | undefined) ?? null;
+  const rawStyle = selectedBlock?.props?.imageStyle ?? '';
+  const currentStyle: ImageStyle = ALL_STYLES.includes(rawStyle as ImageStyle)
+    ? (rawStyle as ImageStyle)
+    : 'normal';
+
+  if (!Components || !editor || !selectedBlock) {
+    return null;
+  }
+
+  const handleStyleChange = (imageStyle: ImageStyle) => {
+    editor.updateBlock(selectedBlock, {
+      props: {
+        imageStyle,
+        previewWidth: IMAGE_STYLE_PRESETS[imageStyle].previewWidth,
+      },
+    });
+    editor.focus();
+  };
+
+  const currentLabel =
+    IMAGE_STYLE_OPTIONS.find((option) => option.value === currentStyle)
+      ?.label || 'Image';
+
+  return (
+    <Components.Generic.Menu.Root>
+      <Components.Generic.Menu.Trigger>
+        <Components.FormattingToolbar.Button
+          className="bn-button"
+          label={currentLabel}
+          mainTooltip="Image Style"
+          icon={<IconPhoto size={16} />}
+        />
+      </Components.Generic.Menu.Trigger>
+      <Components.Generic.Menu.Dropdown className="bn-menu-dropdown bn-drag-handle-menu">
+        {IMAGE_STYLE_OPTIONS.map(({ value, label, Icon }) => (
+          <Components.Generic.Menu.Item
+            key={value}
+            onClick={() => handleStyleChange(value)}
+          >
+            <div className="flex items-center gap-2 w-full">
+              {currentStyle === value ? (
+                <IconCheck size={14} />
+              ) : (
+                <span className="w-[14px]" />
+              )}
+              <Icon size={14} />
+              {label}
+            </div>
+          </Components.Generic.Menu.Item>
+        ))}
+      </Components.Generic.Menu.Dropdown>
+    </Components.Generic.Menu.Root>
+  );
+};

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

@@ -0,0 +1,76 @@
+import {
+  IconCode,
+  IconFile,
+  IconH1,
+  IconH2,
+  IconH3,
+  IconLayoutGrid,
+  IconLetterT,
+  IconList,
+  IconListCheck,
+  IconListNumbers,
+  IconMicrophone,
+  IconMoodHappy,
+  IconPhoto,
+  IconQuote,
+  IconTable,
+  IconVideo,
+} from '@tabler/icons-react';
+import { SuggestionMenu, SuggestionMenuItem } from './SuggestionMenu';
+import {
+  DefaultReactSuggestionItem,
+  SuggestionMenuProps,
+} from '@blocknote/react';
+
+export const SlashMenu = ({
+  items,
+  selectedIndex,
+  loadingState,
+  onItemClick,
+}: SuggestionMenuProps<DefaultReactSuggestionItem>) => {
+  return (
+    <SuggestionMenu className="max-h-80 [&>div]:max-h-72">
+      {items.map((item, index) => (
+        <SuggestionMenuItem
+          isSelected={selectedIndex === index}
+          key={item.title}
+          onClick={() => onItemClick?.(item)}
+        >
+          <span className="flex items-center gap-2">
+            {icons[item.title as keyof typeof icons] ?? item.icon}
+            {item.title}
+          </span>
+          <p className="text-xs font-normal text-muted-foreground">
+            {item.badge?.replace(/-/g, ' ')}
+          </p>
+        </SuggestionMenuItem>
+      ))}
+      {loadingState !== 'loaded' && (
+        <p role="status" className="p-2 text-sm text-muted-foreground">
+          Loading commands…
+        </p>
+      )}
+      {loadingState === 'loaded' && items.length === 0 && (
+        <p className="p-2 text-sm text-muted-foreground">No commands found.</p>
+      )}
+    </SuggestionMenu>
+  );
+};
+
+const icons = {
+  'Heading 1': <IconH1 />,
+  'Heading 2': <IconH2 />,
+  'Heading 3': <IconH3 />,
+  'Numbered List': <IconListNumbers />,
+  'Bullet List': <IconList />,
+  'Check List': <IconListCheck />,
+  Paragraph: <IconLetterT />,
+  Table: <IconTable />,
+  Image: <IconPhoto />,
+  Gallery: <IconLayoutGrid />,
+  Video: <IconVideo />,
+  Audio: <IconMicrophone />,
+  File: <IconFile />,
+  Emoji: <IconMoodHappy />,
+  Quote: <IconQuote />,
+};

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

@@ -0,0 +1,57 @@
+import { buttonVariants } from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib';
+import React, { useEffect, useRef, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { mergeRefs } from 'react-merge-refs';
+
+export const SuggestionMenu = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { children: React.ReactNode }
+>(({ children, className, ...props }, ref) => (
+  <div
+    ref={ref}
+    {...props}
+    className={cn(
+      'w-72 rounded-md bg-background shadow-md border border/50 p-2 outline-hidden overflow-hidden',
+      className,
+    )}
+  >
+    <div className="overflow-auto flex flex-col gap-1 h-full">{children}</div>
+  </div>
+));
+
+export const SuggestionMenuItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { isSelected: boolean }
+>(({ isSelected, ...props }, ref) => {
+  const [isMounted, setIsMounted] = useState(false);
+  const { ref: inViewRef, inView } = useInView();
+  const itemRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setIsMounted(true);
+    if (isSelected && !inView && isMounted) {
+      itemRef.current?.scrollIntoView({
+        block: 'nearest',
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSelected]);
+
+  return (
+    <div
+      ref={mergeRefs([itemRef, inViewRef, ref])}
+      {...props}
+      onMouseDown={(e) => {
+        e.preventDefault();
+        props.onMouseDown?.(e);
+      }}
+      className={cn(
+        buttonVariants({ variant: 'ghost', size: 'lg' }),
+        'justify-between p-2 font-medium [&>svg]:size-4 hover:bg-transparent',
+        isSelected && 'bg-muted',
+        props.className,
+      )}
+    />
+  );
+});

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

@@ -0,0 +1,238 @@
+import {
+  AddButton,
+  DeleteButton,
+  TableHandle,
+  TableHandleMenu,
+  TableHandleMenuProps,
+  TableHandleProps,
+  useBlockNoteEditor,
+  useComponentsContext,
+  useDictionary,
+} from '@blocknote/react';
+import { isTableCell, mapTableCell } from '@blocknote/core';
+import { IconGripVertical } from '@tabler/icons-react';
+import { CSSProperties, useMemo } from 'react';
+
+const COLORS = [
+  'default',
+  'gray',
+  'brown',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'blue',
+  'purple',
+  'pink',
+] as const;
+
+const ColorIcon = ({
+  backgroundColor = 'default',
+  textColor = 'default',
+}: {
+  backgroundColor?: string;
+  textColor?: string;
+}) => (
+  <span
+    className="bn-color-icon"
+    data-background-color={backgroundColor}
+    data-text-color={textColor}
+    style={
+      {
+        pointerEvents: 'none',
+        fontSize: '13.5px',
+        height: '18px',
+        lineHeight: '18px',
+        textAlign: 'center',
+        width: '18px',
+      } satisfies CSSProperties
+    }
+  >
+    A
+  </span>
+);
+
+const TableColorPicker = (props: TableHandleMenuProps) => {
+  const editor = useBlockNoteEditor();
+  const Components = useComponentsContext();
+  const dictionary = useDictionary();
+  const tableHandles = editor.tableHandles;
+  const currentCells = useMemo(() => {
+    if (!tableHandles) {
+      return [];
+    }
+
+    return props.orientation === 'row'
+      ? tableHandles.getCellsAtRowHandle(props.block, props.index)
+      : tableHandles.getCellsAtColumnHandle(props.block, props.index);
+  }, [props.block, props.index, props.orientation, tableHandles]);
+
+  if (!Components || !tableHandles || !currentCells[0]) {
+    return null;
+  }
+
+  const firstCell = mapTableCell(currentCells[0].cell);
+  const updateColor = (color: string, type: 'text' | 'background') => {
+    const rows = props.block.content.rows.map((row) => ({
+      ...row,
+      cells: row.cells.map((cell) => mapTableCell(cell)),
+    }));
+
+    currentCells.forEach(({ row, col }) => {
+      if (type === 'text') {
+        rows[row].cells[col].props.textColor = color;
+      } else {
+        rows[row].cells[col].props.backgroundColor = color;
+      }
+    });
+
+    editor.updateBlock(props.block, {
+      content: { ...props.block.content, rows },
+    });
+    editor.setTextCursorPosition(props.block);
+  };
+
+  return (
+    <Components.Generic.Menu.Root position="right" sub>
+      <Components.Generic.Menu.Trigger sub>
+        <Components.Generic.Menu.Item className="bn-menu-item" subTrigger>
+          {dictionary.drag_handle.colors_menuitem}
+        </Components.Generic.Menu.Item>
+      </Components.Generic.Menu.Trigger>
+      <Components.Generic.Menu.Dropdown
+        sub
+        className="bn-menu-dropdown bn-color-picker-dropdown"
+      >
+        <Components.Generic.Menu.Label>
+          {dictionary.color_picker.text_title}
+        </Components.Generic.Menu.Label>
+        {COLORS.map((color) => (
+          <Components.Generic.Menu.Item
+            key={`text-color-${color}`}
+            icon={<ColorIcon textColor={color} />}
+            checked={
+              currentCells.every(
+                ({ cell }) =>
+                  isTableCell(cell) &&
+                  cell.props.textColor === firstCell.props.textColor,
+              ) && firstCell.props.textColor === color
+            }
+            onClick={() => updateColor(color, 'text')}
+          >
+            {dictionary.color_picker.colors[color]}
+          </Components.Generic.Menu.Item>
+        ))}
+        <Components.Generic.Menu.Label>
+          {dictionary.color_picker.background_title}
+        </Components.Generic.Menu.Label>
+        {COLORS.map((color) => (
+          <Components.Generic.Menu.Item
+            key={`background-color-${color}`}
+            icon={<ColorIcon backgroundColor={color} />}
+            checked={
+              currentCells.every(
+                ({ cell }) =>
+                  isTableCell(cell) &&
+                  cell.props.backgroundColor ===
+                    firstCell.props.backgroundColor,
+              ) && firstCell.props.backgroundColor === color
+            }
+            onClick={() => updateColor(color, 'background')}
+          >
+            {dictionary.color_picker.colors[color]}
+          </Components.Generic.Menu.Item>
+        ))}
+      </Components.Generic.Menu.Dropdown>
+    </Components.Generic.Menu.Root>
+  );
+};
+
+const TableHandleMenuWithRemove = (props: TableHandleMenuProps) => {
+  const editor = useBlockNoteEditor();
+  const Components = useComponentsContext();
+
+  if (!Components || !props.block?.content) {
+    return null;
+  }
+
+  const isHeader =
+    props.orientation === 'row'
+      ? Boolean(props.block.content.headerRows)
+      : Boolean(props.block.content.headerCols);
+
+  const toggleHeader = () => {
+    const block = editor.getBlock(props.block.id);
+
+    if (block?.type !== 'table') {
+      return;
+    }
+
+    editor.updateBlock(block, {
+      content: {
+        ...block.content,
+        ...(props.orientation === 'row'
+          ? { headerRows: isHeader ? undefined : 1 }
+          : { headerCols: isHeader ? undefined : 1 }),
+      },
+    });
+  };
+
+  return (
+    <TableHandleMenu {...props}>
+      <DeleteButton {...props} />
+      {props.orientation === 'row' ? (
+        <>
+          <AddButton {...props} orientation="row" side="above" />
+          <AddButton {...props} orientation="row" side="below" />
+        </>
+      ) : (
+        <>
+          <AddButton {...props} orientation="column" side="left" />
+          <AddButton {...props} orientation="column" side="right" />
+        </>
+      )}
+      {props.index === 0 && (
+        <Components.Generic.Menu.Item
+          className="bn-menu-item"
+          checked={isHeader}
+          onClick={toggleHeader}
+        >
+          {props.orientation === 'row' ? 'Header row' : 'Header column'}
+        </Components.Generic.Menu.Item>
+      )}
+      <TableColorPicker {...props} />
+      <Components.Generic.Menu.Divider />
+      <Components.Generic.Menu.Item
+        className="bn-menu-item"
+        onClick={() => {
+          requestAnimationFrame(() => {
+            const block = editor.getBlock(props.block.id);
+            if (block?.type !== 'table') return;
+
+            const { insertedBlocks } = editor.replaceBlocks(
+              [block],
+              [{ type: 'paragraph' }],
+            );
+            editor.setTextCursorPosition(insertedBlocks[0], 'start');
+            editor.focus();
+          });
+        }}
+      >
+        Delete table
+      </Components.Generic.Menu.Item>
+    </TableHandleMenu>
+  );
+};
+
+export const TableHandleWithRemove = (props: TableHandleProps) => {
+  return (
+    <TableHandle
+      {...props}
+      tableHandleMenu={
+        TableHandleMenuWithRemove as unknown as TableHandleProps['tableHandleMenu']
+      }
+    >
+      <IconGripVertical size={24} data-test="tableHandle" />
+    </TableHandle>
+  );
+};

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

@@ -0,0 +1,67 @@
+import {
+  BasicTextStyleButton,
+  BlockTypeSelect,
+  ColorStyleButton,
+  CreateLinkButton,
+  FileCaptionButton,
+  FileReplaceButton,
+  FormattingToolbar,
+  FormattingToolbarController,
+  NestBlockButton,
+  TableCellMergeButton,
+  TextAlignButton,
+  UnnestBlockButton,
+} from '@blocknote/react';
+import { FontFamilyButton } from './FontFamilyButton';
+import { ImageStyleButton } from './ImageStyleButton';
+
+export const Toolbar = () => {
+  return (
+    <FormattingToolbarController
+      formattingToolbar={() => (
+        <FormattingToolbar>
+          <BlockTypeSelect key={'blockTypeSelect'} />
+          <FontFamilyButton key={'fontFamilyButton'} />
+          <ImageStyleButton />
+          <FileCaptionButton key={'fileCaptionButton'} />
+          <FileReplaceButton key={'replaceFileButton'} />
+          <BasicTextStyleButton
+            basicTextStyle={'bold'}
+            key={'boldStyleButton'}
+          />
+          <BasicTextStyleButton
+            basicTextStyle={'italic'}
+            key={'italicStyleButton'}
+          />
+          <BasicTextStyleButton
+            basicTextStyle={'underline'}
+            key={'underlineStyleButton'}
+          />
+          <BasicTextStyleButton
+            basicTextStyle={'strike'}
+            key={'strikeStyleButton'}
+          />
+          {/* Extra button to toggle code styles */}
+          <BasicTextStyleButton
+            key={'codeStyleButton'}
+            basicTextStyle={'code'}
+          />
+          <TextAlignButton textAlignment={'left'} key={'textAlignLeftButton'} />
+          <TextAlignButton
+            textAlignment={'center'}
+            key={'textAlignCenterButton'}
+          />
+          <TextAlignButton
+            textAlignment={'right'}
+            key={'textAlignRightButton'}
+          />
+          <ColorStyleButton key={'colorStyleButton'} />
+          <NestBlockButton key={'nestBlockButton'} />
+          <UnnestBlockButton key={'unnestBlockButton'} />
+          <CreateLinkButton key={'createLinkButton'} />
+          <TableCellMergeButton key={'mergeTableCellButton'} />
+        </FormattingToolbar>
+      )}
+    />
+  );
+};

package/src/modules/blocks/components/index.ts

@@ -0,0 +1,6 @@
+export * from './BlockEditorReadOnly';
+export * from './BlockEditor';
+export * from './SlashMenu';
+export * from './SuggestionMenu';
+export * from './Toolbar';
+export * from './Editor';

package/src/modules/blocks/constant/blockEditorSchema.ts

@@ -0,0 +1,56 @@
+import {
+  BlockNoteSchema,
+  defaultBlockSpecs,
+  defaultInlineContentSpecs,
+  defaultStyleSpecs,
+  createStyleSpec,
+} from '@blocknote/core';
+import { Attribute, Mention } from '../components/BlockEditor';
+import { customFileBlock } from '../components/CustomFileBlock';
+import { customImageBlock } from '../components/CustomImageBlock';
+import { documentPlaceholderBlock } from '../components/DocumentPlaceholderBlock';
+import { galleryBlock } from '../components/GalleryBlock';
+import { customVideoBlock } from '../components/CustomVideoBlock';
+
+export const fontFamily = createStyleSpec(
+  {
+    type: 'fontFamily',
+    propSchema: 'string',
+  },
+  {
+    render: (value) => {
+      const span = document.createElement('span');
+      span.style.fontFamily = value;
+      return {
+        dom: span,
+      };
+    },
+  },
+);
+
+export const BLOCK_SCHEMA = BlockNoteSchema.create({
+  blockSpecs: {
+    ...defaultBlockSpecs,
+    image: customImageBlock,
+    video: customVideoBlock,
+    file: customFileBlock,
+    gallery: galleryBlock,
+    documentPlaceholder: documentPlaceholderBlock,
+  },
+  inlineContentSpecs: {
+    ...defaultInlineContentSpecs,
+    mention: Mention,
+    attribute: Attribute,
+  },
+  styleSpecs: {
+    ...defaultStyleSpecs,
+    fontFamily,
+  },
+});
+
+export const TABLE_SCHEMA = {
+  splitCells: true,
+  cellBackgroundColor: true,
+  cellTextColor: true,
+  headers: true,
+};

package/src/modules/blocks/constant/index.ts

@@ -0,0 +1 @@
+export * from './blockEditorSchema';

package/src/modules/blocks/hooks/useBlockEditor.tsx

@@ -0,0 +1,65 @@
+import { Block } from '@blocknote/core';
+import { useCreateBlockNote } from '@blocknote/react';
+import { useCallback, useEffect } from 'react';
+import { useErxesUpload, useUploadChunked, useToast } from 'erxes-ui/hooks';
+import { readImage } from 'erxes-ui/utils';
+import { BLOCK_SCHEMA, TABLE_SCHEMA } from '../constant';
+import type { IBlockEditor } from '../types';
+
+export const useBlockEditor = (args?: {
+  initialContent?: Block[];
+  placeholder?: string;
+  uploadFile?: (file: File) => Promise<string>;
+}): IBlockEditor => {
+  const { placeholder, uploadFile, ...restArgs } = args || {};
+
+  const { uploadFile: uploadEditorFile } = useErxesUpload({ maxFiles: 1 });
+  const { upload: uploadVideo, error: videoUploadError } = useUploadChunked();
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (videoUploadError) {
+      toast({
+        title: 'Video upload failed',
+        description: videoUploadError,
+        variant: 'destructive',
+      });
+    }
+  }, [videoUploadError, toast]);
+
+  const defaultUploadFile = useCallback(
+    async (file: File): Promise<string> => {
+      if (file.type.startsWith('video/')) {
+        const video = await uploadVideo(file);
+
+        if (!video?.url) {
+          throw new Error('Video upload failed');
+        }
+
+        return video.url;
+      }
+
+      const result = await uploadEditorFile(file);
+
+      if (!result.url) {
+        throw new Error(result.message || 'Upload failed');
+      }
+
+      return result.url;
+    },
+    [uploadEditorFile, uploadVideo],
+  );
+
+  const editor = useCreateBlockNote({
+    schema: BLOCK_SCHEMA,
+    tables: TABLE_SCHEMA,
+    placeholders: {
+      default: placeholder || "Type '/' for commands...",
+    },
+    uploadFile: uploadFile ?? defaultUploadFile,
+    resolveFileUrl: (url) => Promise.resolve(readImage(url)),
+    ...restArgs,
+  });
+
+  return editor;
+};

package/src/modules/blocks/index.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './utils';
+export * from './types';
+export * from './constant';
+export * from './hooks/useBlockEditor';