@quadrats/react 1.1.8 → 1.1.9

package/image/src/createReactImage.ts

@@ -1,191 +0,0 @@
-import { JSX } from 'react';
-import isHotkey from 'is-hotkey';
-import { readFileAsDataURL } from '@quadrats/utils';
-import { Transforms } from '@quadrats/core';
-import {
-  createImage,
-  CreateImageOptions,
-  getImageElementCommonProps,
-  getImageFigureElementCommonProps,
-  Image,
-  ImageElement,
-  ImageFigureElement,
-} from '@quadrats/common/image';
-import {
-  FILE_UPLOADER_TYPE,
-  FileUploaderUploadOptions,
-  createFileUploaderElementByType,
-  insertFileUploaderElement,
-} from '@quadrats/common/file-uploader';
-import { createRenderElements, QuadratsReactEditor, RenderElementProps } from '@quadrats/react';
-import { removePreviousElement } from '@quadrats/react/utils';
-import { ReactImage } from './typings';
-import { defaultRenderImageElements } from './defaultRenderImageElements';
-
-export type CreateReactImageOptions<Hosting extends string> = CreateImageOptions<Hosting>;
-
-export function createReactImage<Hosting extends string>(
-  options: CreateReactImageOptions<Hosting> = {},
-  getUploadOptions?: (image: Image<Hosting, QuadratsReactEditor>) => FileUploaderUploadOptions & {
-    type?: string;
-  },
-): ReactImage<Hosting> {
-  const core = createImage(options);
-  const uploadOptions = getUploadOptions?.(core);
-
-  const { types } = core;
-
-  return {
-    ...core,
-    createHandlers: () => ({
-      onKeyDown(event, editor, next) {
-        if (event.key === 'Backspace' || event.key === 'Delete') {
-          if (core.isCollapsedOnImage(editor)) {
-            const [, figurePath] = core.getAboveImageFigure(editor) || [];
-
-            if (figurePath) {
-              Transforms.removeNodes(editor, { at: figurePath });
-
-              return;
-            }
-          } else {
-            removePreviousElement({
-              event,
-              editor,
-              type: types.figure,
-              confirmModal: false,
-            });
-          }
-        }
-
-        const [, captionPath] = core.getAboveImageCaption(editor) || [];
-
-        if (captionPath) {
-          /**
-           * Override original behavior of select all.
-           * Only select the text in image caption if current selection is in image caption.
-           */
-          if (isHotkey('mod+a', event as any)) {
-            event.preventDefault();
-            Transforms.select(editor, captionPath);
-
-            return;
-          }
-        }
-
-        next();
-      },
-    }),
-    createRenderElement: (options = {}) => {
-      const renderFigure = options.figure || defaultRenderImageElements.figure;
-      const renderImage = options.image || defaultRenderImageElements.image;
-      const renderCaption = options.caption || defaultRenderImageElements.caption;
-
-      return createRenderElements([
-        {
-          type: types.figure,
-          render: (props) => {
-            const { attributes, children, element } = props as RenderElementProps<ImageFigureElement>;
-
-            return renderFigure({
-              ...getImageFigureElementCommonProps(element),
-              attributes,
-              element,
-              children,
-            });
-          },
-        },
-        {
-          type: types.image,
-          render: (props) => {
-            const { attributes, children, element } = props as RenderElementProps<ImageElement>;
-
-            return renderImage({
-              ...getImageElementCommonProps(element, core.hostingResolvers),
-              attributes,
-              element,
-              children,
-              parentType: core.types.figure,
-              resizeImage: core.resizeImage,
-            });
-          },
-        },
-        {
-          type: types.caption,
-          render: renderCaption as (props: RenderElementProps) => JSX.Element,
-        },
-      ]);
-    },
-    with(editor) {
-      const { insertData } = editor;
-
-      editor.insertData = (data) => {
-        const text = data.getData('text');
-        const { files } = data;
-
-        /**
-         * Insert image if inserted text is image url.
-         */
-        if (text) {
-          if (core.isImageUrl(text)) {
-            core.insertImage(editor, text);
-
-            return;
-          }
-        }
-
-        /**
-         * Insert each image which is image.
-         */
-        if (files.length) {
-          /**
-           * Insert each image when upload options are set.
-           */
-          if (uploadOptions) {
-            const createFileUploaderElement = createFileUploaderElementByType(uploadOptions.type ?? FILE_UPLOADER_TYPE);
-
-            Array.from(files).reduce(async (prev, file) => {
-              await prev;
-
-              return createFileUploaderElement(editor, file, uploadOptions).then((fileUploaderElement) => {
-                insertFileUploaderElement(editor, fileUploaderElement);
-              });
-            }, Promise.resolve());
-
-            return;
-          }
-
-          [...files]
-            .filter((file) => {
-              const [mime] = file.type.split('/');
-
-              return mime === 'image';
-            })
-            .reduce(async (prev, imageFile) => {
-              await prev;
-
-              return readFileAsDataURL(imageFile).then((dataURL) => core.insertImage(editor, dataURL));
-            }, Promise.resolve());
-
-          return;
-        }
-
-        const inCaption = core.isSelectionInImageCaption(editor);
-
-        if (inCaption) {
-          const inlineData = new DataTransfer();
-
-          inlineData.setData('text', data.getData('text').replace(/\r?\n/g, ''));
-
-          insertData(inlineData);
-
-          return;
-        }
-
-        insertData(data);
-      };
-
-      return core.with(editor);
-    },
-  };
-}

package/image/src/defaultRenderImageElements.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import ImageFigure from './components/ImageFigure';
-import Image from './components/Image';
-import ImageCaption from './components/ImageCaption';
-import { ImageRenderElements } from './typings';
-
-export const defaultRenderImageElements: ImageRenderElements = {
-  figure: props => <ImageFigure {...props} />,
-  image: props => <Image {...props} />,
-  caption: props => <ImageCaption {...props} />,
-};

package/image/src/hooks/useImageResizer.ts

@@ -1,135 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { ImageElement } from '@quadrats/common/image';
-import {
-  ReactEditor,
-  Editor,
-  useSlateStatic,
-  useFocused,
-  useSelected,
-} from '@quadrats/react';
-import { ReactImage } from '../typings';
-
-function isTouchEvent<M, T>(event: M | T): event is T {
-  const { touches } = event as any;
-
-  return !!(touches && touches.length);
-}
-
-function getEditorWidth(editor: Editor) {
-  const el = ReactEditor.toDOMNode(editor, editor);
-  const computedStyle = window.getComputedStyle(el);
-  const paddingX = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
-  const borderX = parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
-
-  return el.clientWidth - paddingX - borderX;
-}
-
-const moveEvents = ['mousemove', 'touchmove'] as const;
-const endEvents = ['mouseup', 'touchend'] as const;
-
-interface ImageResizeStartPoint {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  ratio: number;
-}
-
-export function useImageResizer(element: ImageElement, resizeImage: ReactImage<any>['resizeImage']) {
-  const editor = useSlateStatic();
-  const focused = useFocused();
-  const selected = useSelected();
-  const focusedAndSelected = focused && selected;
-  const imageRef = useRef<HTMLImageElement>(null);
-  const [startPoint, setStartPoint] = useState<ImageResizeStartPoint | undefined>(undefined);
-  const onResizeStart = (event: React.MouseEvent | React.TouchEvent) => {
-    const imageEl = imageRef.current;
-
-    if (!imageEl) {
-      return;
-    }
-
-    const { clientWidth: width, clientHeight: height } = imageEl;
-    let x; let
-      y;
-
-    if (isTouchEvent<React.MouseEvent, React.TouchEvent>(event)) {
-      x = event.touches[0].clientX;
-      y = event.touches[0].clientY;
-    } else {
-      x = event.clientX;
-      y = event.clientY;
-    }
-
-    setStartPoint({
-      x,
-      y,
-      width,
-      height,
-      ratio: width / height,
-    });
-  };
-
-  useEffect(() => {
-    if (!focusedAndSelected || !startPoint) {
-      return;
-    }
-
-    function onResize(event: MouseEvent | TouchEvent) {
-      if (!startPoint) {
-        return;
-      }
-
-      const {
-        x,
-        y,
-        width,
-        height,
-        ratio,
-      } = startPoint;
-
-      let left; let
-        top;
-
-      if (isTouchEvent<MouseEvent, TouchEvent>(event)) {
-        left = event.touches[0].clientX - x;
-        top = event.touches[0].clientY - y;
-      } else {
-        left = event.clientX - x;
-        top = event.clientY - y;
-      }
-
-      let newWidth: number;
-
-      if (Math.abs(left) >= Math.abs(top)) {
-        newWidth = width + left;
-      } else {
-        const newHeight = height + top;
-
-        newWidth = newHeight * ratio;
-      }
-
-      const percentage = Math.round((newWidth / getEditorWidth(editor)) * 100);
-
-      resizeImage(editor, [element, ReactEditor.findPath(editor, element)], percentage);
-    }
-
-    function onCancelResize() {
-      setStartPoint(undefined);
-    }
-
-    moveEvents.forEach(moveEvent => document.addEventListener(moveEvent, onResize));
-    endEvents.forEach(endEvent => document.addEventListener(endEvent, onCancelResize));
-
-    return () => {
-      moveEvents.forEach(moveEvent => document.removeEventListener(moveEvent, onResize));
-      endEvents.forEach(endEvent => document.removeEventListener(endEvent, onCancelResize));
-    };
-  }, [editor, element, focusedAndSelected, resizeImage, startPoint]);
-
-  return {
-    imageRef,
-    focusedAndSelected,
-    onResizeStart,
-  };
-}

package/image/src/typings.ts

@@ -1,50 +0,0 @@
-import { JSX } from 'react';
-import {
-  Image,
-  ImageCaptionElement,
-  ImageCaptionTypeKey,
-  ImageElement,
-  ImageFigureElement,
-  ImageFigureTypeKey,
-  ImageTypeKey,
-} from '@quadrats/common/image';
-import {
-  WithCreateHandlers,
-  WithCreateRenderElement,
-  RenderElementProps,
-  ReactWithable,
-  Editor,
-} from '@quadrats/react';
-
-export interface RenderImageFigureElementProps extends RenderElementProps<ImageFigureElement> {
-  style?: {
-    '--qdr-image-align': 'flex-start' | 'center' | 'flex-end';
-    '--qdr-image-caption-align': 'left' | 'center' | 'right';
-    width: string;
-  };
-}
-
-export interface RenderImageElementProps extends RenderElementProps<ImageElement> {
-  resizeImage: ReactImage<any>['resizeImage'];
-  parentType: string;
-  src: string;
-}
-
-export type RenderImageCaptionElementProps = RenderElementProps<ImageCaptionElement>;
-
-export type ImageRenderElements = Record<
-  ImageFigureTypeKey,
-  (props: RenderImageFigureElementProps) => JSX.Element | null | undefined
-> &
-  Record<ImageTypeKey, (props: RenderImageElementProps) => JSX.Element | null | undefined> &
-  Record<ImageCaptionTypeKey, (props: RenderImageCaptionElementProps) => JSX.Element | null | undefined>;
-
-export type ReactImageCreateRenderElementOptions = {
-  [K in ImageFigureTypeKey | ImageTypeKey | ImageCaptionTypeKey]?: ImageRenderElements[K];
-};
-
-export interface ReactImage<Hosting extends string>
-  extends Omit<Image<Hosting, Editor>, 'with'>,
-    WithCreateHandlers,
-    WithCreateRenderElement<[ReactImageCreateRenderElementOptions?]>,
-    ReactWithable {}

package/image/tsconfig.build.json

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

package/input-block/src/components/InputBlock.tsx

@@ -1,70 +0,0 @@
-import React, { useRef } from 'react';
-import { Icon } from '@quadrats/react/components';
-import { Edit, Trash } from '@quadrats/icons';
-import { useClickAway } from '@quadrats/react/utils';
-import { RenderInputBlockElementProps } from '../typings';
-import { useInputBlock } from '../hooks/useInputBlock';
-
-function InputBlock(props: RenderInputBlockElementProps) {
-  const { attributes } = props;
-  const blockRef = useRef(null);
-
-  const {
-    inputRef, onConfirm, onRemove, onKeyDown, placeholder,
-  } = useInputBlock(props);
-
-  useClickAway(
-    () => {
-      return () => {
-        onRemove();
-      };
-    },
-    blockRef,
-    [blockRef],
-  );
-
-  return (
-    <div
-      {...attributes}
-      ref={blockRef}
-      contentEditable={false}
-      className="qdr-input-block"
-    >
-      <input
-        ref={inputRef}
-        onKeyDown={onKeyDown}
-        placeholder={placeholder}
-        className="qdr-input-block__input"
-        style={{
-          display: 'block',
-          color: 'currentColor',
-          width: '100%',
-          margin: 0,
-          border: 0,
-          padding: 0,
-          background: 'none',
-          outline: 0,
-          boxSizing: 'border-box',
-        }}
-      />
-      <div className="qdr-input-block__icons">
-        <div className="qdr-input-block__icon" onClick={onConfirm}>
-          <Icon
-            icon={Edit}
-            width={24}
-            height={24}
-          />
-        </div>
-        <div className="qdr-input-block__icon" onClick={onRemove}>
-          <Icon
-            icon={Trash}
-            width={24}
-            height={24}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default InputBlock;

package/input-block/src/createReactInputBlock.ts

@@ -1,34 +0,0 @@
-import { createInputBlock, CreateInputBlockOptions } from '@quadrats/common/input-block';
-import { createRenderElement, ReactEditor } from '@quadrats/react';
-import { ReactInputBlock, RenderInputBlockElementProps } from './typings';
-import { defaultRenderInputBlockElement } from './defaultRenderInputBlockElement';
-
-export type CreateReactInputBlockOptions = CreateInputBlockOptions;
-
-export function createReactInputBlock(options: CreateInputBlockOptions = {}): ReactInputBlock {
-  const core = createInputBlock(options);
-  const { type } = core;
-  const remove: ReactInputBlock['remove'] = (editor, element) => core.remove(
-    editor,
-    [element, ReactEditor.findPath(editor, element)],
-    () => ReactEditor.focus(editor),
-  );
-
-  const confirm: ReactInputBlock['confirm'] = (editor, element, value) => core.confirm(
-    element,
-    value,
-    () => remove(editor, element),
-  );
-
-  return {
-    ...core,
-    remove,
-    confirm,
-    createRenderElement: ({
-      render = defaultRenderInputBlockElement,
-    } = {}) => createRenderElement<RenderInputBlockElementProps>({
-      type,
-      render: props => render({ ...props, remove, confirm }),
-    }),
-  };
-}

package/input-block/src/defaultRenderInputBlockElement.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-import InputBlock from './components/InputBlock';
-import { RenderInputBlockElement } from './typings';
-
-export const defaultRenderInputBlockElement: RenderInputBlockElement = props => <InputBlock {...props} />;

package/input-block/src/hooks/useInputBlock.ts

@@ -1,61 +0,0 @@
-import { KeyboardEvent, useLayoutEffect, useRef } from 'react';
-import { useLocale, useQuadrats } from '@quadrats/react';
-import { RenderInputBlockElementProps } from '../typings';
-
-export function useInputBlock({ confirm, element, remove }: RenderInputBlockElementProps) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const editor = useQuadrats();
-  const locale = useLocale();
-  const placeholder = element.getPlaceholder?.(locale) ?? '';
-  /**
-   * Since keying `Enter` or `Escape` will also cause input blurred
-   * Add a `removeable` flag to avoid.
-   */
-
-  const removeable = useRef(true);
-
-  const onRemove = () => {
-    removeable.current = false;
-    remove(editor, element);
-  };
-
-  const onConfirm = () => {
-    const value = inputRef.current?.value;
-
-    if (value) {
-      removeable.current = false;
-      confirm(editor, element, value);
-    }
-  };
-
-  const removeIfRemovable = () => {
-    if (removeable.current) {
-      onRemove();
-    }
-  };
-
-  useLayoutEffect(() => {
-    /**
-     * To avoid from selection of quadrats broken, delay autoFocus.
-     */
-    window.requestAnimationFrame(() => inputRef.current?.focus());
-  }, [inputRef]);
-
-  return {
-    inputRef,
-    onRemove,
-    onConfirm,
-    onBlur: removeIfRemovable,
-    onKeyDown: (event: KeyboardEvent) => {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-
-        onConfirm();
-      } else if (event.key === 'Escape') {
-        event.preventDefault();
-        removeIfRemovable();
-      }
-    },
-    placeholder,
-  };
-}

package/input-block/src/typings.ts

@@ -1,19 +0,0 @@
-import { JSX } from 'react';
-import { InputBlock, InputBlockElement } from '@quadrats/common/input-block';
-import { Editor, RenderElementProps, WithCreateRenderElement } from '@quadrats/react';
-
-export type RenderInputBlockElementProps = RenderElementProps<InputBlockElement> &
-Pick<ReactInputBlock, 'remove' | 'confirm'>;
-
-export type RenderInputBlockElement = (props: RenderInputBlockElementProps) => JSX.Element | null | undefined;
-
-export interface ReactInputBlockCreateRenderElementOptions {
-  render?: RenderInputBlockElement;
-}
-
-export interface ReactInputBlock
-  extends Omit<InputBlock<Editor>, 'remove' | 'confirm'>,
-  WithCreateRenderElement<[ReactInputBlockCreateRenderElementOptions?]> {
-  remove(editor: Editor, element: InputBlockElement): void;
-  confirm(editor: Editor, element: InputBlockElement, value: string): void;
-}

package/input-block/tsconfig.build.json

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

package/italic/jsx-serializer/src/createJsxSerializeItalic.ts

@@ -1,8 +0,0 @@
-import { ITALIC_TYPE } from '@quadrats/common/italic';
-import { createJsxSerializeToggleMarkCreator } from '@quadrats/react/toggle-mark/jsx-serializer';
-import { defaultRenderItalic } from './defaultRenderItalic';
-
-export const createJsxSerializeItalic = createJsxSerializeToggleMarkCreator({
-  type: ITALIC_TYPE,
-  render: defaultRenderItalic,
-});

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

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

package/italic/src/constants.ts

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

package/italic/src/createReactItalic.ts

@@ -1,11 +0,0 @@
-import { createItalic } from '@quadrats/common/italic';
-import { createReactToggleMarkCreator } from '@quadrats/react/toggle-mark';
-import { defaultRenderItalic } from './defaultRenderItalic';
-import { ITALIC_HOTKEY } from './constants';
-
-export const createReactItalic = (variant?: string) => createReactToggleMarkCreator(
-  createItalic(variant), {
-    hotkey: ITALIC_HOTKEY,
-    render: defaultRenderItalic,
-  },
-)();

package/italic/src/defaultRenderItalic.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { ITALIC_TYPE } from '@quadrats/common/italic';
-import { RenderMarkPropsBase } from '@quadrats/react/_internal';
-import { ItalicLeaf } from './typings';
-
-export const defaultRenderItalic = ({ children, leaf }: RenderMarkPropsBase<boolean>) => (
-  <i className={(leaf as ItalicLeaf).italicVariant
-    ? `${ITALIC_TYPE}.${(leaf as ItalicLeaf).italicVariant}` : `${ITALIC_TYPE}`}
-  >
-    {children}
-  </i>
-);

package/italic/src/typings.ts

@@ -1,6 +0,0 @@
-import { Text } from 'slate';
-
-export interface ItalicLeaf extends Text {
-  italic: boolean;
-  italicVariant?: string;
-}

package/italic/tsconfig.build.json

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

package/jsx-serializer/src/createJsxSerializeElement.ts

@@ -1,8 +0,0 @@
-import { createRenderElementBase } from '@quadrats/react/_internal';
-import { CreateJsxSerializeElementOptions, JsxSerializeElementProps } from './typings';
-
-export function createJsxSerializeElement<P extends JsxSerializeElementProps>(
-  options: CreateJsxSerializeElementOptions<P>,
-) {
-  return createRenderElementBase<P, JsxSerializeElementProps>(options);
-}

package/jsx-serializer/src/createJsxSerializeElements.ts

@@ -1,8 +0,0 @@
-import { createRenderElementsBase } from '@quadrats/react/_internal';
-import { CreateJsxSerializeElementOptions, JsxSerializeElementProps } from './typings';
-
-export function createJsxSerializeElements<P extends JsxSerializeElementProps>(
-  options: CreateJsxSerializeElementOptions<P>[],
-) {
-  return createRenderElementsBase<P, JsxSerializeElementProps>(options);
-}