@quadrats/react 1.1.6 → 1.1.8

package/image/src/components/ImagePlaceholder.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+import { Icon } from '@quadrats/react/components';
+import { Image } from '@quadrats/icons';
+
+function ImagePlaceholder(props: RenderElementProps) {
+  const { attributes } = props;
+
+  return (
+    <div {...attributes} className="qdr-image__placeholder" contentEditable={false}>
+      <Icon className="qdr-image__placeholder__icon" icon={Image} width={48} height={48} />
+    </div>
+  );
+}
+
+export default ImagePlaceholder;

package/image/src/createReactImage.ts

@@ -0,0 +1,191 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,135 @@
+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

@@ -0,0 +1,50 @@
+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

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

package/input-block/package.json

@@ -4,7 +4,12 @@
     "**/*.css",
     "**/*.scss"
   ],
-  "main": "./index.cjs.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts"
+  "quadratsConfig": {
+    "deps": [
+      "__ROOT__"
+    ],
+    "styles": {
+      "input-block": "input-block"
+    }
+  }
 }

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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,19 @@
+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

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

package/italic/jsx-serializer/package.json

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

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

@@ -0,0 +1,8 @@
+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

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

package/italic/package.json

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

package/italic/src/constants.ts

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