@erxes/ui 0.0.0-stage → 3.2.20-1

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

@@ -0,0 +1,85 @@
+import {
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  fileBlockConfig,
+} from '@blocknote/core';
+import {
+  FileBlockWrapper,
+  ReactCustomBlockRenderProps,
+  createReactBlockSpec,
+  useUploadLoading,
+} from '@blocknote/react';
+import { IconFile } from '@tabler/icons-react';
+import { Spinner } from 'erxes-ui/components';
+import { FC } from 'react';
+import { readImage } from '../../../utils/core';
+
+type FileRenderProps = ReactCustomBlockRenderProps<
+  typeof fileBlockConfig,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema
+>;
+
+type FileBlockWrapperProps = Parameters<typeof FileBlockWrapper>[0];
+type FileWrapperRenderProps = Omit<
+  FileBlockWrapperProps,
+  'buttonText' | 'buttonIcon' | 'children'
+>;
+
+const toFileWrapperProps = (props: FileRenderProps): FileWrapperRenderProps =>
+  props;
+
+const CustomFilePreview: FC<Pick<FileRenderProps, 'block'>> = ({ block }) => {
+  const url = readImage(block.props.url, undefined, true);
+
+  return (
+    <div
+      className="bn-file-name-with-icon"
+      contentEditable={false}
+      draggable={false}
+    >
+      <a
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+        className="flex items-center gap-2 hover:underline"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="bn-file-icon">
+          <IconFile size={24} />
+        </div>
+        <p className="bn-file-name">{block.props.name || block.props.url}</p>
+      </a>
+    </div>
+  );
+};
+
+const CustomFileBlockContent: FC<FileRenderProps> = (props) => {
+  const loading = useUploadLoading(props.block.id);
+  const wrapperProps = toFileWrapperProps(props);
+
+  if (loading) {
+    return (
+      <div className="bn-file-block-content-wrapper">
+        <div className="bn-file-loading-preview flex items-center gap-2">
+          <Spinner size="sm" />
+          <span className="text-sm text-muted-foreground">Uploading...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <FileBlockWrapper
+      {...wrapperProps}
+      buttonText={props.editor.dictionary.file_blocks.file.add_button_text}
+      buttonIcon={<IconFile size={24} />}
+    >
+      <CustomFilePreview block={props.block} />
+    </FileBlockWrapper>
+  );
+};
+
+export const customFileBlock = createReactBlockSpec(fileBlockConfig, {
+  render: CustomFileBlockContent,
+});

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

@@ -0,0 +1,366 @@
+import {
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  imageBlockConfig,
+} from '@blocknote/core';
+import {
+  createReactBlockSpec,
+  ReactCustomBlockRenderProps,
+  ResizableFileBlockWrapper,
+  useResolveUrl,
+  useUploadLoading,
+} from '@blocknote/react';
+import { IconPhoto } from '@tabler/icons-react';
+import { CSSProperties, FC, SyntheticEvent, useEffect, useState } from 'react';
+import { Button, Dialog, Spinner } from 'erxes-ui/components';
+
+const MAX_IMAGE_HEIGHT = 320;
+
+const IMAGE_STYLES = ['normal', 'wide', 'float-left', 'float-right'] as const;
+
+export type ImageStyle = (typeof IMAGE_STYLES)[number];
+
+export const IMAGE_STYLE_PRESETS: Record<
+  ImageStyle,
+  {
+    previewWidth: number;
+    maxWidth: number;
+  }
+> = {
+  normal: { previewWidth: 480, maxWidth: 480 },
+  wide: { previewWidth: 720, maxWidth: 720 },
+  'float-left': { previewWidth: 300, maxWidth: 400 },
+  'float-right': { previewWidth: 300, maxWidth: 400 },
+};
+
+const getImageStyle = (value?: string): ImageStyle =>
+  (IMAGE_STYLES as readonly string[]).includes(value ?? '')
+    ? (value as ImageStyle)
+    : 'normal';
+
+const getEditorMaxImageWidth = (
+  editor: Pick<ImageRenderProps['editor'], 'domElement'>,
+  imageStyle: ImageStyle,
+  dimensions?: { width: number; height: number },
+) => {
+  const editorWidth =
+    editor.domElement?.firstElementChild?.clientWidth ||
+    IMAGE_STYLE_PRESETS[imageStyle].maxWidth;
+
+  return Math.min(
+    editorWidth,
+    IMAGE_STYLE_PRESETS[imageStyle].maxWidth,
+    dimensions?.width || Infinity,
+    dimensions?.height
+      ? (dimensions.width / dimensions.height) * MAX_IMAGE_HEIGHT
+      : Infinity,
+  );
+};
+
+const getImageStyleFromElement = (element: HTMLElement): ImageStyle => {
+  const explicitStyle =
+    element.getAttribute('data-image-style') ||
+    element
+      .getAttribute('class')
+      ?.match(/erxes-editor-image--(normal|wide|float-left|float-right)/)?.[1];
+
+  return getImageStyle(explicitStyle);
+};
+
+const customImageBlockConfig = {
+  ...imageBlockConfig,
+  propSchema: {
+    ...imageBlockConfig.propSchema,
+    imageStyle: {
+      default: 'normal' as const,
+      values: IMAGE_STYLES,
+    },
+  },
+};
+
+type ImageRenderProps = ReactCustomBlockRenderProps<
+  typeof customImageBlockConfig,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema
+>;
+
+type FileBlockWrapperProps = Parameters<typeof ResizableFileBlockWrapper>[0];
+type FileBlockRenderProps = Omit<
+  FileBlockWrapperProps,
+  'buttonText' | 'buttonIcon' | 'children'
+>;
+
+const toFileBlockProps = (props: ImageRenderProps): FileBlockRenderProps =>
+  props as unknown as FileBlockRenderProps;
+
+const CustomImagePreview: FC<
+  Pick<ImageRenderProps, 'block'> & {
+    onImageLoad: (event: SyntheticEvent<HTMLImageElement>) => void;
+  }
+> = ({ block, onImageLoad }) => {
+  const { loadingState, downloadUrl } = useResolveUrl(block.props.url ?? '');
+  const [imgLoaded, setImgLoaded] = useState(false);
+  const [previewOpen, setPreviewOpen] = useState(false);
+
+  const src = downloadUrl ?? block.props.url;
+  const isResolving = loadingState === 'loading';
+  const handleImageLoad = (event: SyntheticEvent<HTMLImageElement>) => {
+    setImgLoaded(true);
+    onImageLoad(event);
+  };
+
+  return (
+    <div className="bn-visual-media-wrapper" contentEditable={false}>
+      {(!imgLoaded || isResolving) && (
+        <div className="flex min-h-24 w-full items-center justify-center">
+          <Spinner size="sm" />
+        </div>
+      )}
+
+      {!isResolving && src && (
+        <>
+          <Button
+            variant="ghost"
+            aria-label="Preview image"
+            className="bn-visual-media mx-auto h-auto max-w-full cursor-pointer border-0 bg-transparent p-0 hover:bg-transparent"
+            style={imgLoaded ? undefined : { display: 'none' }}
+            contentEditable={false}
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={(event) => {
+              event.stopPropagation();
+              setPreviewOpen(true);
+            }}
+          >
+            <img
+              className="block h-auto w-full max-w-full object-contain"
+              src={src}
+              alt={block.props.caption || block.props.name || ''}
+              draggable={false}
+              style={{
+                maxHeight: MAX_IMAGE_HEIGHT,
+              }}
+              onLoad={handleImageLoad}
+              onError={() => setImgLoaded(true)}
+            />
+          </Button>
+
+          <Dialog open={previewOpen} onOpenChange={setPreviewOpen}>
+            <Dialog.Content
+              className="w-auto max-w-[90vw] border-0 bg-transparent p-0 shadow-none"
+              aria-describedby={undefined}
+            >
+              <Dialog.Title className="sr-only">
+                {block.props.caption || block.props.name || 'Image preview'}
+              </Dialog.Title>
+              <img
+                src={src}
+                alt={block.props.caption || block.props.name || ''}
+                className="max-h-[85vh] max-w-[90vw] rounded object-contain shadow-2xl"
+              />
+            </Dialog.Content>
+          </Dialog>
+        </>
+      )}
+    </div>
+  );
+};
+
+const getFloatContainerStyle = (
+  imageStyle: ImageStyle,
+  maxWidth: number,
+): CSSProperties => {
+  const base: CSSProperties = {
+    width: '100%',
+    maxWidth: `${maxWidth}px`,
+  };
+
+  if (imageStyle === 'float-left') {
+    return {
+      ...base,
+      float: 'left',
+      marginRight: '1.25em',
+      marginBottom: '0.5em',
+    };
+  }
+
+  if (imageStyle === 'float-right') {
+    return {
+      ...base,
+      float: 'right',
+      marginLeft: '1.25em',
+      marginBottom: '0.5em',
+    };
+  }
+
+  return { ...base, margin: '0 auto' };
+};
+
+const ExternalImageHtml: FC<ImageRenderProps> = ({ block }) => {
+  const { url, caption, name, previewWidth } = block.props;
+  const imageStyle = getImageStyle(
+    (block.props as { imageStyle?: string }).imageStyle,
+  );
+
+  if (!url) return <p>Add image</p>;
+
+  const maxWidth = previewWidth || IMAGE_STYLE_PRESETS[imageStyle].maxWidth;
+  const containerStyle = getFloatContainerStyle(imageStyle, maxWidth);
+
+  const img = (
+    <img
+      src={url}
+      alt={caption || name || ''}
+      className={`erxes-editor-image erxes-editor-image--${imageStyle}`}
+      data-image-style={imageStyle}
+      style={{ width: '100%', height: 'auto', display: 'block' }}
+      {...(previewWidth ? { width: previewWidth } : {})}
+    />
+  );
+
+  return (
+    <figure
+      className={`erxes-editor-image erxes-editor-image--${imageStyle}`}
+      data-image-style={imageStyle}
+      style={containerStyle}
+    >
+      {img}
+      {caption && <figcaption>{caption}</figcaption>}
+    </figure>
+  );
+};
+
+const CustomImageBlockContent: FC<ImageRenderProps> = (props) => {
+  const loading = useUploadLoading(props.block.id);
+  const fileProps = toFileBlockProps(props);
+  const imageStyle = getImageStyle(props.block.props.imageStyle);
+  const previewWidth = props.block.props.previewWidth;
+  const [imageDimensions, setImageDimensions] = useState<{
+    url: string;
+    width: number;
+    height: number;
+  }>();
+  const maxWidth = getEditorMaxImageWidth(
+    props.editor,
+    imageStyle,
+    imageDimensions?.url === props.block.props.url
+      ? imageDimensions
+      : undefined,
+  );
+
+  const handleImageLoad = (event: SyntheticEvent<HTMLImageElement>) => {
+    const dimensions = {
+      url: props.block.props.url,
+      width: event.currentTarget.naturalWidth,
+      height: event.currentTarget.naturalHeight,
+    };
+    setImageDimensions(dimensions);
+
+    if (!previewWidth && props.editor.isEditable) {
+      props.editor.updateBlock(props.block, {
+        props: {
+          previewWidth: getEditorMaxImageWidth(
+            props.editor,
+            imageStyle,
+            dimensions,
+          ),
+        },
+      });
+    }
+  };
+
+  useEffect(() => {
+    const blockId = props.block.id;
+    const styleId = `erxes-img-float-${blockId}`;
+
+    document.getElementById(styleId)?.remove();
+
+    if (imageStyle !== 'float-left' && imageStyle !== 'float-right') return;
+
+    const floatWidth = Math.min(previewWidth || maxWidth, maxWidth);
+    const dir = imageStyle === 'float-left' ? 'left' : 'right';
+    const margin =
+      imageStyle === 'float-left'
+        ? 'margin-right:1.25em'
+        : 'margin-left:1.25em';
+
+    const styleEl = document.createElement('style');
+    styleEl.id = styleId;
+    styleEl.textContent = `[data-id="${blockId}"]{float:${dir};max-width:${floatWidth}px;width:100%;${margin};margin-bottom:.75em}`;
+    document.head.appendChild(styleEl);
+
+    return () => {
+      document.getElementById(styleId)?.remove();
+    };
+  }, [props.block.id, imageStyle, previewWidth, maxWidth]);
+
+  if (loading) {
+    return (
+      <div className="bn-file-block-content-wrapper">
+        <div className="bn-file-loading-preview flex items-center gap-2">
+          <Spinner size="sm" />
+          <span className="text-sm text-muted-foreground">Uploading...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="max-w-full [&>.bn-file-block-content-wrapper]:max-w-full"
+      style={{ maxWidth: `min(100%, ${maxWidth}px)` }}
+    >
+      <ResizableFileBlockWrapper
+        block={fileProps.block}
+        editor={fileProps.editor}
+        buttonText={props.editor.dictionary.file_blocks.image.add_button_text}
+        buttonIcon={<IconPhoto size={24} />}
+      >
+        <CustomImagePreview block={props.block} onImageLoad={handleImageLoad} />
+      </ResizableFileBlockWrapper>
+    </div>
+  );
+};
+
+export const customImageBlock = createReactBlockSpec(customImageBlockConfig, {
+  render: CustomImageBlockContent,
+  toExternalHTML: ExternalImageHtml,
+  parse: (element) => {
+    if (element.tagName === 'IMG') {
+      if (element.closest('figure')) return undefined;
+
+      const img = element as HTMLImageElement;
+      const imageStyle = getImageStyleFromElement(img);
+
+      return {
+        url: img.src || undefined,
+        previewWidth:
+          img.width ||
+          IMAGE_STYLE_PRESETS[imageStyle].previewWidth ||
+          undefined,
+        imageStyle,
+      };
+    }
+
+    if (element.tagName === 'FIGURE') {
+      const img = element.querySelector('img');
+
+      if (!img) return undefined;
+
+      const caption =
+        element.querySelector('figcaption')?.textContent || undefined;
+      const imageStyle = getImageStyleFromElement(element);
+
+      return {
+        url: img.src || undefined,
+        caption,
+        previewWidth:
+          img.width ||
+          IMAGE_STYLE_PRESETS[imageStyle].previewWidth ||
+          undefined,
+        imageStyle,
+      };
+    }
+
+    return undefined;
+  },
+});

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

@@ -0,0 +1,118 @@
+import {
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  videoBlockConfig,
+  videoParse,
+} from '@blocknote/core';
+import {
+  createReactBlockSpec,
+  FigureWithCaption,
+  ReactCustomBlockRenderProps,
+  ResizableFileBlockWrapper,
+  VideoBlock,
+  VideoToExternalHTML,
+} from '@blocknote/react';
+import { IconVideo } from '@tabler/icons-react';
+import { FC } from 'react';
+import {
+  getCloudflareStreamBase,
+  parseVideoEmbedUrl,
+} from 'erxes-ui/utils';
+
+type VideoRenderProps = ReactCustomBlockRenderProps<
+  typeof videoBlockConfig,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema
+>;
+
+type FileBlockRenderProps = Omit<
+  Parameters<typeof ResizableFileBlockWrapper>[0],
+  'buttonText' | 'buttonIcon' | 'children'
+>;
+
+const getVideoEmbedSource = (url: string): string | undefined => {
+  const embed = parseVideoEmbedUrl(url);
+  const streamBase = getCloudflareStreamBase(url);
+
+  return embed?.embedUrl || (streamBase ? `${streamBase}/iframe` : undefined);
+};
+
+const EmbeddedVideo: FC<{ src: string; title: string }> = ({ src, title }) => (
+  <iframe
+    className="bn-visual-media aspect-video h-auto max-w-full border-0"
+    width="640"
+    height="360"
+    src={src}
+    title={title || 'Video'}
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    allowFullScreen
+    referrerPolicy="strict-origin-when-cross-origin"
+    contentEditable={false}
+  />
+);
+
+export const CustomVideoBlockContent: FC<VideoRenderProps> = (props) => {
+  const src = getVideoEmbedSource(props.block.props.url);
+
+  if (!src) {
+    return <VideoBlock {...props} />;
+  }
+
+  const fileProps = props as unknown as FileBlockRenderProps;
+
+  return (
+    <ResizableFileBlockWrapper
+      {...fileProps}
+      buttonText={props.editor.dictionary.file_blocks.video.add_button_text}
+      buttonIcon={<IconVideo size={24} />}
+    >
+      <EmbeddedVideo src={src} title={props.block.props.name} />
+    </ResizableFileBlockWrapper>
+  );
+};
+
+const ExternalVideoHtml: FC<VideoRenderProps> = (props) => {
+  const src = getVideoEmbedSource(props.block.props.url);
+
+  if (!src || !props.block.props.showPreview) {
+    return <VideoToExternalHTML {...props} />;
+  }
+
+  const video = <EmbeddedVideo src={src} title={props.block.props.name} />;
+
+  return props.block.props.caption ? (
+    <FigureWithCaption caption={props.block.props.caption}>
+      {video}
+    </FigureWithCaption>
+  ) : (
+    video
+  );
+};
+
+export const customVideoBlock = createReactBlockSpec(videoBlockConfig, {
+  render: CustomVideoBlockContent,
+  toExternalHTML: ExternalVideoHtml,
+  parse: (element) => {
+    const video = videoParse(element);
+
+    if (video) return video;
+    if (element.tagName === 'IFRAME' && element.closest('figure')) {
+      return undefined;
+    }
+
+    const iframe =
+      element.tagName === 'IFRAME'
+        ? element
+        : element.tagName === 'FIGURE'
+          ? element.querySelector('iframe')
+          : null;
+    const url = getVideoEmbedSource(iframe?.getAttribute('src') || '');
+
+    if (!url) return undefined;
+
+    return {
+      url,
+      caption: element.querySelector('figcaption')?.textContent || '',
+    };
+  },
+});

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

@@ -0,0 +1,114 @@
+import type {
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+} from '@blocknote/core';
+import { createReactBlockSpec } from '@blocknote/react';
+import type { ReactCustomBlockRenderProps } from '@blocknote/react';
+import { IconFileText } from '@tabler/icons-react';
+import type { FC } from 'react';
+
+const documentPlaceholderBlockConfig = {
+  type: 'documentPlaceholder' as const,
+  propSchema: {
+    documentId: {
+      default: '',
+    },
+    documentName: {
+      default: 'Untitled document',
+    },
+    documentCode: {
+      default: '',
+    },
+    documentPreview: {
+      default: '',
+    },
+  },
+  content: 'none' as const,
+  isFileBlock: false as const,
+};
+
+type DocumentPlaceholderRenderProps = ReactCustomBlockRenderProps<
+  typeof documentPlaceholderBlockConfig,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema
+>;
+
+const DocumentPlaceholderBlockContent: FC<DocumentPlaceholderRenderProps> = ({
+  block,
+}) => {
+  const { documentId, documentName, documentCode, documentPreview } =
+    block.props;
+  const documentLabel = documentCode
+    ? `Document placeholder - ${documentCode}`
+    : 'Document placeholder';
+
+  return (
+    <div
+      className="my-2 rounded-md border bg-muted/30 px-3 py-2"
+      contentEditable={false}
+    >
+      <div className="flex items-start gap-2">
+        <div className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded bg-background text-muted-foreground">
+          <IconFileText size={16} />
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-sm font-medium text-foreground">
+            {documentName || 'Untitled document'}
+          </div>
+          <div className="truncate text-xs text-muted-foreground">
+            {documentId ? documentLabel : 'Select a document'}
+          </div>
+          {documentPreview && (
+            <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+              {documentPreview}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const DocumentPlaceholderExternalHTML: FC<
+  DocumentPlaceholderRenderProps
+> = ({ block }) => {
+  const { documentId, documentName } = block.props;
+
+  if (!documentId) {
+    return null;
+  }
+
+  return (
+    <div
+      className="erxes-document-placeholder"
+      data-document-id={documentId}
+      data-document-name={documentName}
+    >
+      {`{{ document.${documentId} }}`}
+    </div>
+  );
+};
+
+export const documentPlaceholderBlock = createReactBlockSpec(
+  documentPlaceholderBlockConfig,
+  {
+    render: DocumentPlaceholderBlockContent,
+    toExternalHTML: DocumentPlaceholderExternalHTML,
+    parse: (element) => {
+      if (
+        element.tagName === 'DIV' &&
+        element.classList.contains('erxes-document-placeholder')
+      ) {
+        return {
+          documentId: element.getAttribute('data-document-id') || '',
+          documentName:
+            element.getAttribute('data-document-name') || 'Untitled document',
+          documentCode: '',
+          documentPreview: '',
+        };
+      }
+
+      return undefined;
+    },
+  },
+);