@quadrats/react 1.1.7 → 1.1.8

package/src/core/contexts/modal/CarouselModal/FilesDropZone.tsx

@@ -0,0 +1,118 @@
+import React, { Dispatch, SetStateAction, ReactNode, useCallback } from 'react';
+import clsx from 'clsx';
+import { Editor } from '@quadrats/core';
+import { Carousel } from '@quadrats/common/carousel';
+import { Upload } from '@quadrats/icons';
+import { Icon } from '@quadrats/react/components';
+import { useMessage } from '../../message/message';
+
+interface FilesDropZoneProps {
+  isDragging: boolean;
+  setIsDragging: Dispatch<SetStateAction<boolean>>;
+  children: ReactNode;
+  isOverMaxLength: boolean;
+  controller?: Carousel<Editor>;
+  uploadFiles: (files: File[]) => Promise<void>;
+}
+
+const FilesDropZone = ({
+  isDragging,
+  setIsDragging,
+  children,
+  isOverMaxLength,
+  controller,
+  uploadFiles,
+}: FilesDropZoneProps) => {
+  const { message } = useMessage();
+
+  const validateFile = useCallback(
+    (file: File) => {
+      if (!controller?.accept.find((a) => a === file.type)) {
+        return false;
+      }
+
+      return true;
+    },
+    [controller?.accept],
+  );
+
+  const validateFiles = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      const files = Array.from(event.dataTransfer.files);
+
+      if (!files || isOverMaxLength) {
+        if (isOverMaxLength) {
+          message({ type: 'error', content: '超過數量上限，請刪除已存在圖片' });
+        }
+
+        return false;
+      }
+
+      return true;
+    },
+    [isOverMaxLength, message],
+  );
+
+  const handleDrop = useCallback(
+    async (event: React.DragEvent<HTMLDivElement>) => {
+      if (event.dataTransfer?.types?.includes('Files')) {
+        event.preventDefault();
+        setIsDragging(false);
+
+        const files = Array.from(event.dataTransfer.files);
+
+        if (!validateFiles(event)) {
+          return;
+        }
+
+        const correctFiles = files.filter(
+          (f) => validateFile(f) && controller?.limitSize && f.size <= controller.limitSize * 1024 * 1024,
+        );
+
+        if (files.find((f) => !validateFile(f))) {
+          message({ type: 'error', content: '檔案類型錯誤。' });
+        }
+
+        if (files.find((f) => controller?.limitSize && f.size > controller.limitSize * 1024 * 1024)) {
+          message({ type: 'error', content: `圖片檔案過大，檔案需小於 ${controller?.limitSize}MB` });
+        }
+
+        if (correctFiles.length > 0) {
+          await uploadFiles(correctFiles);
+        }
+      }
+    },
+    [setIsDragging, validateFiles, validateFile, controller?.limitSize, message, uploadFiles],
+  );
+
+  // TODO: i18n
+
+  return (
+    <div
+      className={clsx('qdr-carousel-modal__zone')}
+      onDragOver={(e) => {
+        e.preventDefault();
+
+        if (e.dataTransfer?.types?.includes('Files')) {
+          setIsDragging(true);
+        }
+      }}
+      onDragLeave={() => {
+        setIsDragging(false);
+      }}
+      onDrop={handleDrop}
+    >
+      {isDragging && (
+        <div className="qdr-carousel-modal__zone__wrapper">
+          <div className="qdr-carousel-modal__zone__block">
+            <Icon icon={Upload} width={24} height={24} />
+            將檔案拖曳到這裡即可上傳
+          </div>
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default FilesDropZone;

package/src/core/contexts/modal/ConfirmModal/ConfirmModal.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { useLocale } from '@quadrats/react/configs';
+import { Modal, Icon, Button } from '@quadrats/react/components';
+import { Warning } from '@quadrats/icons';
+
+export interface ConfirmModalProps {
+  isOpen: boolean;
+  close: VoidFunction;
+  title: string;
+  content: string;
+  confirmText: string;
+  onConfirm?: () => void;
+  haveFooter?: boolean;
+  mask?: boolean;
+  maskClosable?: boolean;
+  escToExit?: boolean;
+}
+
+export const ConfirmModal = ({
+  isOpen,
+  title,
+  content,
+  confirmText,
+  close,
+  onConfirm,
+  haveFooter = true,
+  mask,
+  maskClosable,
+  escToExit,
+}: ConfirmModalProps) => {
+  const locale = useLocale();
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      className="qdr-confirm-modal"
+      size="small"
+      mask={mask}
+      maskClosable={maskClosable}
+      escToExit={escToExit}
+      onClose={() => {
+        close();
+      }}
+      haveFooter={false}
+    >
+      <div className="qdr-confirm-modal__container">
+        <Icon icon={Warning} width={28} height={28} className="qdr-confirm-modal__icon" />
+        <div className="qdr-confirm-modal__body">
+          <div className="qdr-confirm-modal__title">{title}</div>
+          <div className="qdr-confirm-modal__content">{content}</div>
+        </div>
+      </div>
+      {haveFooter && (
+        <div className="qdr-confirm-modal__footer">
+          <Button variant="secondary" onClick={close}>
+            {locale.editor.cancel}
+          </Button>
+          <Button
+            variant="primary"
+            danger
+            onClick={() => {
+              close();
+              onConfirm?.();
+            }}
+          >
+            {confirmText || locale.editor.confirm}
+          </Button>
+        </div>
+      )}
+    </Modal>
+  );
+};

package/src/core/contexts/modal/EmbedModal/EmbedModal.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Textarea, Input, Modal } from '@quadrats/react/components';
+import { useLocale } from '@quadrats/react/configs';
+
+export interface EmbedModalProps {
+  isOpen: boolean;
+  close: VoidFunction;
+  placeholder: string;
+  confirmText: string;
+  hint: string;
+  type: 'input' | 'textarea';
+  onConfirm: (value: string) => void;
+}
+
+export const EmbedModal = ({ isOpen, close, placeholder, confirmText, hint, type, onConfirm }: EmbedModalProps) => {
+  const [value, setValue] = useState('');
+  const locale = useLocale();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      textareaRef.current?.focus();
+      inputRef.current?.focus();
+    }
+  }, [isOpen]);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      title={locale.editor.embedTitle}
+      confirmText={confirmText}
+      onClose={() => {
+        close();
+        setValue('');
+      }}
+      onConfirm={() => {
+        close();
+        setValue('');
+        onConfirm(value);
+      }}
+    >
+      {type === 'textarea' ? (
+        <Textarea
+          textareaRef={textareaRef}
+          value={value}
+          onChange={setValue}
+          placeholder={placeholder}
+          hint={hint}
+          height={86}
+        />
+      ) : (
+        <Input inputRef={inputRef} value={value} onChange={setValue} placeholder={placeholder} hint={hint} />
+      )}
+    </Modal>
+  );
+};

package/src/core/contexts/modal/ModalProvider.tsx

@@ -0,0 +1,114 @@
+import React, { Dispatch, SetStateAction, ReactNode, useCallback, useState, useEffect } from 'react';
+import { EmbedModal } from './EmbedModal/EmbedModal';
+import { CarouselModal } from './CarouselModal/CarouselModal';
+import { CardModal } from './CardModal/CardModal';
+import { ConfirmModal } from './ConfirmModal/ConfirmModal';
+import {
+  ModalContext,
+  ModalName,
+  EmbedModalConfig,
+  CarouselModalConfig,
+  CardModalConfig,
+  ConfirmModalConfig,
+} from './modal';
+
+export interface ModalProviderProps {
+  children: ReactNode;
+  needConfirmModal?: ConfirmModalConfig | null;
+  setNeedConfirmModal?: Dispatch<SetStateAction<ConfirmModalConfig | null>>;
+}
+
+export const ModalProvider = ({ children, needConfirmModal, setNeedConfirmModal }: ModalProviderProps) => {
+  const [modalName, setModalName] = useState<ModalName>('');
+  const [isModalClosed, setIsModalClosed] = useState<boolean>(false);
+  const [embedModalConfig, setEmbedModalConfig] = useState<EmbedModalConfig | null>(null);
+  const [carouselModalConfig, setCarouselModalConfig] = useState<CarouselModalConfig | null>(null);
+  const [cardModalConfig, setCardModalConfig] = useState<CardModalConfig | null>(null);
+  const [confirmModalConfig, setConfirmModalConfig] = useState<ConfirmModalConfig | null>(null);
+
+  const close = useCallback(() => {
+    setModalName('');
+    setIsModalClosed(true);
+
+    if (needConfirmModal) {
+      setNeedConfirmModal?.(null);
+    }
+  }, [needConfirmModal, setNeedConfirmModal]);
+
+  useEffect(() => {
+    if (needConfirmModal) {
+      setModalName('confirm-modal');
+      setConfirmModalConfig(needConfirmModal);
+    }
+  }, [needConfirmModal]);
+
+  return (
+    <ModalContext.Provider
+      value={{
+        isModalClosed,
+        setIsModalClosed,
+        setEmbedModalConfig: (config) => {
+          setModalName('embed-modal');
+          setEmbedModalConfig(config);
+        },
+        setCarouselModalConfig: (config) => {
+          setModalName('carousel-modal');
+          setCarouselModalConfig(config);
+        },
+        setCardModalConfig: (config) => {
+          setModalName('card-modal');
+          setCardModalConfig(config);
+        },
+        setConfirmModalConfig: (config) => {
+          setModalName('confirm-modal');
+          setConfirmModalConfig(config);
+        },
+      }}
+    >
+      {children}
+      <EmbedModal
+        isOpen={modalName === 'embed-modal'}
+        close={close}
+        placeholder={embedModalConfig?.placeholder || ''}
+        confirmText={embedModalConfig?.confirmText || ''}
+        hint={embedModalConfig?.hint || ''}
+        type={embedModalConfig?.type || 'input'}
+        onConfirm={(value) => {
+          embedModalConfig?.onConfirm?.(value);
+        }}
+      />
+      <CarouselModal
+        isOpen={modalName === 'carousel-modal'}
+        close={close}
+        controller={carouselModalConfig?.controller}
+        initialValue={carouselModalConfig?.initialValue}
+        onConfirm={carouselModalConfig?.onConfirm}
+      />
+      <CardModal
+        isOpen={modalName === 'card-modal'}
+        close={close}
+        controller={cardModalConfig?.controller}
+        initialValue={cardModalConfig?.initialValue}
+        onConfirm={({ values, imageItem, haveLink }) => {
+          cardModalConfig?.onConfirm?.({
+            values,
+            imageItem,
+            haveLink,
+          });
+        }}
+      />
+      <ConfirmModal
+        isOpen={modalName === 'confirm-modal'}
+        close={close}
+        title={confirmModalConfig?.title ?? ''}
+        content={confirmModalConfig?.content ?? ''}
+        confirmText={confirmModalConfig?.confirmText ?? ''}
+        onConfirm={confirmModalConfig?.onConfirm}
+        haveFooter={confirmModalConfig?.haveFooter}
+        mask={confirmModalConfig?.mask}
+        maskClosable={confirmModalConfig?.maskClosable}
+        escToExit={confirmModalConfig?.escToExit}
+      />
+    </ModalContext.Provider>
+  );
+};

package/src/core/contexts/modal/modal.ts

@@ -0,0 +1,36 @@
+import { createContext, useContext, Dispatch, SetStateAction } from 'react';
+import { EmbedModalProps } from './EmbedModal/EmbedModal';
+import { CarouselModalProps } from './CarouselModal/CarouselModal';
+import { CardModalProps } from './CardModal/CardModal';
+import { ConfirmModalProps } from './ConfirmModal/ConfirmModal';
+
+export type ModalName = 'embed-modal' | 'carousel-modal' | 'card-modal' | 'confirm-modal' | '';
+
+export interface EmbedModalConfig extends Omit<EmbedModalProps, 'isOpen' | 'close'> {}
+export interface CarouselModalConfig extends Omit<CarouselModalProps, 'isOpen' | 'close'> {}
+export interface CardModalConfig extends Omit<CardModalProps, 'isOpen' | 'close'> {}
+export interface ConfirmModalConfig extends Omit<ConfirmModalProps, 'isOpen' | 'close'> {}
+
+export interface ModalContextValue {
+  isModalClosed: boolean;
+  setIsModalClosed: Dispatch<SetStateAction<boolean>>;
+
+  setEmbedModalConfig: (config: EmbedModalConfig) => void;
+  setCarouselModalConfig: (config: CarouselModalConfig) => void;
+  setCardModalConfig: (config: CardModalConfig) => void;
+  setConfirmModalConfig: (config: ConfirmModalConfig) => void;
+}
+
+export const ModalContext = createContext<ModalContextValue>({
+  isModalClosed: false,
+  setIsModalClosed: () => {},
+
+  setEmbedModalConfig: () => {},
+  setCarouselModalConfig: () => {},
+  setCardModalConfig: () => {},
+  setConfirmModalConfig: () => {},
+});
+
+export function useModal() {
+  return useContext(ModalContext);
+}

package/src/core/createReactEditor.ts

@@ -0,0 +1,7 @@
+import { ReactEditor, withReact } from 'slate-react';
+import { createEditor } from '@quadrats/core';
+import { QuadratsReactEditor } from '..';
+
+export function createReactEditor() {
+  return withReact(createEditor() as unknown as ReactEditor) as QuadratsReactEditor;
+}

package/src/core/createRenderElement.ts

@@ -0,0 +1,6 @@
+import { createRenderElementBase } from '@quadrats/react/_internal';
+import { CreateRenderElementOptions, RenderElementProps } from './typings/renderer';
+
+export function createRenderElement<P extends RenderElementProps>(options: CreateRenderElementOptions<P>) {
+  return createRenderElementBase<P, RenderElementProps>(options);
+}

package/src/core/createRenderElements.ts

@@ -0,0 +1,6 @@
+import { createRenderElementsBase } from '@quadrats/react/_internal';
+import { CreateRenderElementOptions, RenderElementProps } from './typings/renderer';
+
+export function createRenderElements<P extends RenderElementProps>(options: CreateRenderElementOptions<P>[]) {
+  return createRenderElementsBase<P, RenderElementProps>(options);
+}

package/src/core/createRenderMark.ts

@@ -0,0 +1,6 @@
+import { createRenderMarkBase } from '@quadrats/react/_internal';
+import { CreateRenderMarkOptions } from './typings/renderer';
+
+export function createRenderMark<M>(options: CreateRenderMarkOptions<M>) {
+  return createRenderMarkBase(options);
+}

package/src/core/index.ts

@@ -0,0 +1,53 @@
+import { QuadratsEditor, QuadratsElement, QuadratsText } from '@quadrats/core';
+import { ReactEditor } from 'slate-react';
+import { PLACEHOLDER_KEY } from './constants';
+
+export {
+  useSlateStatic,
+  useFocused,
+  useReadOnly,
+  useSelected,
+  useSlate as useQuadrats,
+  ReactEditor,
+} from 'slate-react';
+
+export * from './typings/handler';
+export * from './typings/renderer';
+export * from './typings/with';
+export * from './typings/descendant';
+
+export { Editor } from '@quadrats/core';
+export { default as Editable, EditableProps } from './components/Editable';
+export { default as DefaultElement } from './components/DefaultElement';
+export { default as DefaultLeaf } from './components/DefaultLeaf';
+export { default as Quadrats, QuadratsProps } from './components/Quadrats';
+
+export * from './contexts/modal/modal';
+export * from './contexts/modal/ModalProvider';
+
+export * from './contexts/message/message';
+export * from './contexts/message/MessageProvider';
+
+export * from './contexts/composition/composition';
+export * from './contexts/composition/CompositionProvider';
+
+export { composeHandlers } from './composeHandlers';
+export { composeRenderElements } from './composeRenderElements';
+export { composeRenderLeafs } from './composeRenderLeafs';
+export { createReactEditor } from './createReactEditor';
+export { createRenderElement } from './createRenderElement';
+export { createRenderElements } from './createRenderElements';
+export { createRenderMark } from './createRenderMark';
+export { PLACEHOLDER_KEY };
+
+export type QuadratsReactEditor = QuadratsEditor & ReactEditor;
+
+declare module '@quadrats/core' {
+  interface CustomTypes {
+    Editor: QuadratsReactEditor;
+    Element: QuadratsElement;
+    Text: QuadratsText & {
+      [PLACEHOLDER_KEY]?: boolean;
+    };
+  }
+}

package/src/core/typings/descendant.ts

@@ -0,0 +1,3 @@
+import { QuadratsElement, QuadratsText } from '@quadrats/core';
+
+export type Descendant = QuadratsElement | QuadratsText;

package/src/core/typings/handler.ts

@@ -0,0 +1,32 @@
+import { Editor } from 'slate';
+import { DOMAttributes, EventHandler } from 'react';
+
+export type EventHandlerName = {
+  [K in keyof Required<DOMAttributes<HTMLElement>>]: NonNullable<DOMAttributes<HTMLElement>[K]> extends EventHandler<
+  any
+  >
+    ? K
+    : never;
+}[keyof DOMAttributes<HTMLElement>];
+
+export type EventHandlers = Pick<DOMAttributes<HTMLElement>, EventHandlerName>;
+
+export type GetEventHandlerByName<H extends EventHandlerName> = NonNullable<EventHandlers[H]>;
+
+export type GetEventByName<H extends EventHandlerName> = GetEventHandlerByName<H> extends (event: infer E) => void
+  ? E
+  : never;
+
+export type Handler<H extends EventHandlerName> = (
+  event: GetEventByName<H>,
+  editor: Editor,
+  next: VoidFunction
+) => void;
+
+export type Handlers = {
+  [H in EventHandlerName]?: Handler<H>;
+};
+
+export interface WithCreateHandlers<P extends any[] = []> {
+  createHandlers: (...params: P) => Handlers;
+}

package/src/core/typings/renderer.ts

@@ -0,0 +1,33 @@
+import { JSX } from 'react';
+import {
+  RenderElementProps as SlateReactRenderElementProps,
+  RenderLeafProps as SlateRenderLeafProps,
+} from 'slate-react';
+import { QuadratsElement } from '@quadrats/core';
+import {
+  CreateRenderElementOptionsBase,
+  CreateRenderMarkOptionsBase,
+  RenderElementPropsBase,
+  RenderLeafPropsBase,
+  RenderMarkPropsBase,
+} from '@quadrats/react/_internal';
+
+export type RenderLeafProps = RenderLeafPropsBase & Pick<SlateRenderLeafProps, 'attributes'>;
+
+export type RenderMarkProps<M> = RenderMarkPropsBase<M>;
+
+export type RenderElementProps<E extends QuadratsElement = QuadratsElement> = RenderElementPropsBase<E> &
+Pick<SlateReactRenderElementProps, 'attributes'>;
+
+export type CreateRenderMarkOptions<M> = CreateRenderMarkOptionsBase<M, RenderMarkProps<M>>;
+
+export type CreateRenderElementOptions<P extends RenderElementProps<QuadratsElement>>
+  = CreateRenderElementOptionsBase<P>;
+
+export interface WithCreateRenderLeaf<P extends any[] = []> {
+  createRenderLeaf: (...params: P) => (props: RenderLeafProps) => JSX.Element;
+}
+
+export interface WithCreateRenderElement<P extends any[] = []> {
+  createRenderElement: (...params: P) => (props: RenderElementProps) => JSX.Element | null | undefined;
+}

package/src/core/typings/with.ts

@@ -0,0 +1,5 @@
+import { Editor } from 'slate';
+
+export interface ReactWithable<R = undefined> {
+  with: <T extends Editor>(editor: T) => R extends undefined ? T : T & R;
+}

package/strikethrough/jsx-serializer/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@quadrats/react/strikethrough/jsx-serializer",
   "sideEffects": false,
-  "main": "./index.cjs.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts"
+  "quadratsConfig": {
+    "deps": [
+      "toggle-mark/jsx-serializer",
+      "strikethrough"
+    ]
+  }
 }

package/strikethrough/jsx-serializer/src/createJsxSerializeStrikethrough.ts

@@ -0,0 +1,8 @@
+import { STRIKETHROUGH_TYPE } from '@quadrats/common/strikethrough';
+import { createJsxSerializeToggleMarkCreator } from '@quadrats/react/toggle-mark/jsx-serializer';
+import { defaultRenderStrikethrough } from './defaultRenderStrikethrough';
+
+export const createJsxSerializeStrikethrough = createJsxSerializeToggleMarkCreator({
+  type: STRIKETHROUGH_TYPE,
+  render: defaultRenderStrikethrough,
+});

package/strikethrough/jsx-serializer/tsconfig.build.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "exclude": ["**/*.spec.*"],
+  "include": ["./src"]
+}

package/strikethrough/package.json

@@ -1,7 +1,9 @@
 {
   "name": "@quadrats/react/strikethrough",
   "sideEffects": false,
-  "main": "./index.cjs.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts"
+  "quadratsConfig": {
+    "deps": [
+      "toggle-mark"
+    ]
+  }
 }

package/strikethrough/src/constants.ts

@@ -0,0 +1,6 @@
+/**
+ * Default hotkey for toggling strikethrough.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
+export const STRIKETHROUGH_HOTKEY = 'mod+opt+s';

package/strikethrough/src/createReactStrikethrough.ts

@@ -0,0 +1,11 @@
+import { createStrikethrough } from '@quadrats/common/strikethrough';
+import { createReactToggleMarkCreator } from '@quadrats/react/toggle-mark';
+import { defaultRenderStrikethrough } from './defaultRenderStrikethrough';
+import { STRIKETHROUGH_HOTKEY } from './constants';
+
+export const createReactStrikethrough = (variant?: string) => createReactToggleMarkCreator(
+  createStrikethrough(variant), {
+    hotkey: STRIKETHROUGH_HOTKEY,
+    render: defaultRenderStrikethrough,
+  },
+)();

package/strikethrough/src/defaultRenderStrikethrough.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { STRIKETHROUGH_TYPE } from '@quadrats/common/strikethrough';
+import { RenderMarkPropsBase } from '@quadrats/react/_internal';
+import { StrikethroughLeaf } from './typings';
+
+export const defaultRenderStrikethrough = ({ children, leaf }: RenderMarkPropsBase<boolean>) => (
+  <del className={(leaf as StrikethroughLeaf).strikethroughVariant
+    ? `${STRIKETHROUGH_TYPE}.${(leaf as StrikethroughLeaf).strikethroughVariant}` : `${STRIKETHROUGH_TYPE}`}
+  >
+    {children}
+  </del>
+);

package/strikethrough/src/typings.ts

@@ -0,0 +1,6 @@
+import { Text } from 'slate';
+
+export interface StrikethroughLeaf extends Text {
+  strikethrough: boolean;
+  strikethroughVariant?: string;
+}

package/strikethrough/tsconfig.build.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "exclude": ["**/*.spec.*"],
+  "include": ["./src"]
+}

package/table/jsx-serializer/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@quadrats/react/table/jsx-serializer",
   "sideEffects": false,
-  "main": "./index.cjs.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts"
+  "quadratsConfig": {
+    "deps": [
+      "jsx-serializer",
+      "table"
+    ]
+  }
 }