@quadrats/react 1.1.8 → 1.1.9

package/footnote/toolbar/src/useFootnoteTool.ts

@@ -1,22 +0,0 @@
-import { FootnoteUpsertFootnoteOptions } from '@quadrats/common/footnote';
-import { useQuadrats } from '@quadrats/react';
-import { ReactFootnote } from '@quadrats/react/footnote';
-import { useStartToolInput } from '@quadrats/react/toolbar';
-
-export type UseFootnoteToolOptions = FootnoteUpsertFootnoteOptions;
-
-export function useFootnoteTool(controller: ReactFootnote, options: UseFootnoteToolOptions = {}) {
-  const editor = useQuadrats();
-  const startToolInput = useStartToolInput();
-
-  return {
-    active: controller.isSelectionInFootnote(editor),
-    onClick: () => startToolInput({
-      getPlaceholder: locale => locale.editor.footnote.inputPlaceholder,
-      confirm: (footnoteText) => {
-        controller.upsertFootnoteAndUpdateIndex(editor, footnoteText, options);
-      },
-      defaultValue: controller.getFootnoteText(editor),
-    }),
-  };
-}

package/footnote/toolbar/tsconfig.build.json

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

package/footnote/tsconfig.build.json

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

package/heading/jsx-serializer/src/createJsxSerializeHeading.ts

@@ -1,13 +0,0 @@
-import { HEADING_TYPE } from '@quadrats/common/heading';
-import { createJsxSerializeElement, CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
-import { defaultRenderHeadingElement } from './defaultRenderHeadingElement';
-import { JsxSerializeHeadingElementProps } from './typings';
-
-export type CreateJsxSerializeHeadingOptions = Partial<
-CreateJsxSerializeElementOptions<JsxSerializeHeadingElementProps>
->;
-
-export function createJsxSerializeHeading(options: CreateJsxSerializeHeadingOptions = {}) {
-  const { type = HEADING_TYPE, render = defaultRenderHeadingElement } = options;
-  return createJsxSerializeElement<JsxSerializeHeadingElementProps>({ type, render });
-}

package/heading/jsx-serializer/src/typings.ts

@@ -1,4 +0,0 @@
-import { HeadingElement } from '@quadrats/common/heading';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-
-export type JsxSerializeHeadingElementProps = JsxSerializeElementProps<HeadingElement>;

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

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

package/heading/src/constants.ts

@@ -1,9 +0,0 @@
-/**
- * Default hotkey for toggling heading.
- *
- * @remarks
- * If the hotkey is `ctrl+opt`, the level 1 hotkey will be `ctrl+opt+1`, and so on.
- *
- * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
- */
-export const HEADING_HOTKEY = 'ctrl+opt';

package/heading/src/createReactHeading.ts

@@ -1,56 +0,0 @@
-import isHotkey from 'is-hotkey';
-import { createHeading, CreateHeadingOptions, HeadingLevel } from '@quadrats/common/heading';
-import { createRenderElement } from '@quadrats/react';
-import { createOnKeyDownBreak } from '@quadrats/react/line-break';
-import { ReactHeading } from './typings';
-import { HEADING_HOTKEY } from './constants';
-import { defaultRenderHeadingElement } from './defaultRenderHeadingElement';
-
-export type CreateReactHeadingOptions<L extends HeadingLevel> = CreateHeadingOptions<L>;
-
-export function createReactHeading<L extends HeadingLevel = HeadingLevel>(
-  options: CreateReactHeadingOptions<L> = {},
-): ReactHeading<L> {
-  const core = createHeading(options);
-  const { type } = core;
-
-  return {
-    ...core,
-    createHandlers: ({ hotkey = HEADING_HOTKEY } = {}) => {
-      const onKeyDownBreak = createOnKeyDownBreak({
-        exitBreak: {
-          rules: [
-            {
-              hotkey: 'enter',
-              match: {
-                onlyAtEdge: true,
-                includeTypes: [type],
-              },
-            },
-          ],
-        },
-      });
-
-      return {
-        onKeyDown(event, editor, next) {
-          /**
-           * Only toggle if the hotkey is fired and the key is the same as level.
-           */
-          const keyAsNumber = +event.key;
-
-          if (!Number.isNaN(keyAsNumber) && isHotkey(hotkey, event as any)) {
-            try {
-              core.toggleHeadingNodes(editor, keyAsNumber as L);
-              event.preventDefault();
-
-              // eslint-disable-next-line no-empty
-            } catch {}
-          } else {
-            onKeyDownBreak(event, editor, next);
-          }
-        },
-      };
-    },
-    createRenderElement: ({ render = defaultRenderHeadingElement } = {}) => createRenderElement({ type, render }),
-  };
-}

package/heading/src/defaultRenderHeadingElement.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { HeadingElement } from '@quadrats/common/heading';
-import { RenderElementProps } from '@quadrats/react';
-
-export const HEADING_COMPONENTS = {
-  1: 'h1',
-  2: 'h2',
-  3: 'h3',
-  4: 'h4',
-  5: 'h5',
-  6: 'h6',
-} as const;
-
-export const defaultRenderHeadingElement = ({
-  attributes,
-  children,
-  element,
-}: {
-  attributes?: RenderElementProps['attributes'];
-  children: RenderElementProps['children'];
-  element: HeadingElement;
-}) => {
-  const Component = HEADING_COMPONENTS[element.level];
-
-  if (!Component) {
-    return null;
-  }
-
-  const style = element.align ? { textAlign: element.align } : undefined;
-
-  return (
-    <Component {...attributes} className={`qdr-${Component}`} style={style}>
-      {children}
-    </Component>
-  );
-};

package/heading/src/typings.ts

@@ -1,21 +0,0 @@
-import { JSX } from 'react';
-import { Heading, HeadingElement, HeadingLevel } from '@quadrats/common/heading';
-import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, Editor } from '@quadrats/react';
-
-export type RenderHeadingElementProps = RenderElementProps<HeadingElement>;
-
-export interface ReactHeadingCreateHandlersOptions {
-  /**
-   * The hotkey to toggle heading w/ specific level.
-   */
-  hotkey?: string;
-}
-
-export interface ReactHeadingCreateRenderElementOptions {
-  render?: (props: RenderHeadingElementProps) => JSX.Element | null | undefined;
-}
-
-export interface ReactHeading<Level extends HeadingLevel>
-  extends Heading<Level, Editor>,
-  WithCreateHandlers<[ReactHeadingCreateHandlersOptions?]>,
-  WithCreateRenderElement<[ReactHeadingCreateRenderElementOptions?]> {}

package/heading/toolbar/src/HeadingToolbarIcon.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { HeadingLevel } from '@quadrats/common/heading';
-import { ReactHeading } from '@quadrats/react/heading';
-import { ToolbarIcon, ToolbarIconProps } from '@quadrats/react/toolbar';
-import { useToggleHeadingTool } from './useToggleHeadingTool';
-
-export interface HeadingToolbarIconProps<Level extends HeadingLevel, ValidLevel extends Level>
-  extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
-  controller: ReactHeading<Level>;
-  level: ValidLevel;
-}
-
-function HeadingToolbarIcon<Level extends HeadingLevel, ValidLevel extends Level>(
-  props: HeadingToolbarIconProps<Level, ValidLevel>,
-) {
-  const { controller, level, ...rest } = props;
-  const { active, onClick } = useToggleHeadingTool(controller, level);
-
-  return <ToolbarIcon {...rest} active={active} onClick={onClick} />;
-}
-
-export default HeadingToolbarIcon;

package/heading/toolbar/src/index.ts

@@ -1,3 +0,0 @@
-export * from './useToggleHeadingTool';
-
-export { HeadingToolbarIconProps, default as HeadingToolbarIcon } from './HeadingToolbarIcon';

package/heading/toolbar/src/useToggleHeadingTool.ts

@@ -1,15 +0,0 @@
-import { HeadingLevel } from '@quadrats/common/heading';
-import { useQuadrats } from '@quadrats/react';
-import { ReactHeading } from '@quadrats/react/heading';
-
-export function useToggleHeadingTool<Level extends HeadingLevel, ValidLevel extends Level>(
-  controller: ReactHeading<Level>,
-  level: ValidLevel,
-) {
-  const editor = useQuadrats();
-
-  return {
-    active: controller.isSelectionInHeading(editor, level),
-    onClick: () => controller.toggleHeadingNodes(editor, level),
-  };
-}

package/heading/toolbar/tsconfig.build.json

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

package/heading/tsconfig.build.json

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

package/highlight/jsx-serializer/src/createJsxSerializeHighlight.ts

@@ -1,8 +0,0 @@
-import { HIGHLIGHT_TYPE } from '@quadrats/common/highlight';
-import { createJsxSerializeToggleMarkCreator } from '@quadrats/react/toggle-mark/jsx-serializer';
-import { defaultRenderHighlight } from './defaultRenderHighlight';
-
-export const createJsxSerializeHighlight = (variant?: string) => createJsxSerializeToggleMarkCreator({
-  type: HIGHLIGHT_TYPE,
-  render: defaultRenderHighlight(variant),
-})();

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

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

package/highlight/src/constants.ts

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

package/highlight/src/createReactHighlight.ts

@@ -1,11 +0,0 @@
-import { createHighlight } from '@quadrats/common/highlight';
-import { createReactToggleMarkCreator } from '@quadrats/react/toggle-mark';
-import { defaultRenderHighlight } from './defaultRenderHighlight';
-import { HIGHLIGHT_HOTKEY } from './constants';
-
-export const createReactHighlight = (variant?: string) => createReactToggleMarkCreator(
-  createHighlight(variant), {
-    hotkey: HIGHLIGHT_HOTKEY,
-    render: defaultRenderHighlight(variant),
-  },
-)();

package/highlight/src/defaultRenderHighlight.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { RenderMarkPropsBase } from '@quadrats/react/_internal';
-import { HIGHLIGHT_TYPE } from '@quadrats/common/highlight';
-import { HighlightLeaf } from './typings';
-
-export const defaultRenderHighlight = (variant?: string) => ({ children, leaf }: RenderMarkPropsBase<boolean>) => (
-  <mark data-type={variant ?? undefined} className={(leaf as HighlightLeaf).highlightVariant
-    ? `${HIGHLIGHT_TYPE}.${(leaf as HighlightLeaf).highlightVariant}` : `${HIGHLIGHT_TYPE}`}
-  >
-    {children}
-  </mark>
-);

package/highlight/src/typings.ts

@@ -1,6 +0,0 @@
-import { Text } from 'slate';
-
-export interface HighlightLeaf extends Text {
-  highlight: boolean;
-  highlightVariant?: string;
-}

package/highlight/tsconfig.build.json

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

package/image/jsx-serializer/src/createJsxSerializeImage.ts

@@ -1,85 +0,0 @@
-import {
-  getFirstAncestor,
-  getMergedNodeTexts,
-  WithElementParent,
-} from '@quadrats/core/serializers';
-import {
-  getImageElementCommonProps,
-  getImageFigureElementCommonProps,
-  ImageCaptionTypeKey,
-  ImageElement,
-  ImageFigureElement,
-  ImageFigureTypeKey,
-  ImageHostingResolvers,
-  ImageTypeKey,
-  IMAGE_TYPES,
-} from '@quadrats/common/image';
-import { Descendant, QuadratsElement } from '@quadrats/core';
-import { CreateJsxSerializeElementOptions, createJsxSerializeElements } from '@quadrats/react/jsx-serializer';
-import { defaultRenderImageElements } from './defaultRenderImageElements';
-import {
-  JsxSerializeImageCaptionElementProps,
-  JsxSerializeImageElementProps,
-  JsxSerializeImageFigureElementProps,
-} from './typings';
-
-export type CreateJsxSerializeImageOptions<H extends string> = Partial<
-Record<ImageFigureTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeImageFigureElementProps>>> &
-Record<ImageTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeImageElementProps>>> &
-Record<ImageCaptionTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeImageCaptionElementProps>>> & {
-  hostingResolvers?: ImageHostingResolvers<H>;
-}
->;
-
-export function createJsxSerializeImage<H extends string>(options: CreateJsxSerializeImageOptions<H> = {}) {
-  const {
-    figure = {}, image = {}, caption = {}, hostingResolvers,
-  } = options;
-
-  const figureType = figure.type || IMAGE_TYPES.figure;
-  const captionType = caption.type || IMAGE_TYPES.caption;
-  const renderFigure = figure.render || defaultRenderImageElements.figure;
-  const renderImage = image.render || defaultRenderImageElements.image;
-  const renderCaption = caption.render || defaultRenderImageElements.caption;
-
-  return createJsxSerializeElements([
-    {
-      type: figureType,
-      render: (props) => {
-        const { children } = props;
-        const element = props.element as ImageFigureElement & WithElementParent;
-
-        return renderFigure({
-          ...getImageFigureElementCommonProps(element),
-          children,
-          element,
-        });
-      },
-    },
-    {
-      type: image.type || IMAGE_TYPES.image,
-      render: (props) => {
-        const { children } = props;
-        const element = props.element as ImageElement & WithElementParent;
-        const figure = getFirstAncestor<ImageFigureElement>(element, node => (
-          node as QuadratsElement).type === figureType);
-
-        const caption = figure?.children?.[1];
-
-        return renderImage({
-          ...getImageElementCommonProps(element, hostingResolvers),
-          caption: (caption as ImageElement)?.type === captionType ? getMergedNodeTexts(caption as Descendant) : '',
-          children,
-          element,
-        });
-      },
-    },
-    {
-      type: captionType,
-      render: props => renderCaption({
-        ...(props as JsxSerializeImageCaptionElementProps),
-        isEmpty: !getMergedNodeTexts(props.element),
-      }),
-    },
-  ]);
-}

package/image/jsx-serializer/src/defaultRenderImageElements.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { ImageJsxSerializeElements } from './typings';
-
-export const defaultRenderImageElements: ImageJsxSerializeElements = {
-  figure: ({ children, style }) => (
-    <figure className="qdr-image__figure" style={style}>
-      {children}
-    </figure>
-  ),
-  image: ({ caption, src }) => (
-    <div className="qdr-image">
-      <img src={src} alt={caption} />
-    </div>
-  ),
-  caption: ({ children, isEmpty }) =>
-    isEmpty ? (
-      <span className="qdr-image__caption-placeholder" />
-    ) : (
-      <figcaption className="qdr-image__caption">{children}</figcaption>
-    ),
-};

package/image/jsx-serializer/src/typings.ts

@@ -1,34 +0,0 @@
-import { JSX } from 'react';
-import {
-  ImageCaptionElement,
-  ImageCaptionTypeKey,
-  ImageElement,
-  ImageFigureElement,
-  ImageFigureTypeKey,
-  ImageTypeKey,
-} from '@quadrats/common/image';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-
-export interface JsxSerializeImageFigureElementProps extends JsxSerializeElementProps<ImageFigureElement> {
-  style?: {
-    '--qdr-image-align': 'flex-start' | 'center' | 'flex-end',
-    '--qdr-image-caption-align': 'left' | 'center' | 'right',
-    width: string;
-  };
-}
-
-export interface JsxSerializeImageElementProps extends JsxSerializeElementProps<ImageElement> {
-  src: string;
-  caption?: string;
-}
-
-export interface JsxSerializeImageCaptionElementProps extends JsxSerializeElementProps<ImageCaptionElement> {
-  isEmpty: boolean;
-}
-
-export type ImageJsxSerializeElements = Record<
-ImageFigureTypeKey,
-(props: JsxSerializeImageFigureElementProps) => JSX.Element | null | undefined
-> &
-Record<ImageTypeKey, (props: JsxSerializeImageElementProps) => JSX.Element | null | undefined> &
-Record<ImageCaptionTypeKey, (props: JsxSerializeImageCaptionElementProps) => JSX.Element | null | undefined>;

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

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

package/image/src/components/Image.tsx

@@ -1,107 +0,0 @@
-import React from 'react';
-import { Transforms, Element, Editor, QuadratsElement } from '@quadrats/core';
-import { ImageFigureElement } from '@quadrats/common/image';
-import { AlignLeft, AlignCenter, AlignRight, Trash } from '@quadrats/icons';
-import { ReactEditor, useSlateStatic } from '@quadrats/react';
-import { InlineToolbar } from '@quadrats/react/toolbar';
-import { RenderImageElementProps } from '../typings';
-// import { useImageResizer } from '../hooks/useImageResizer';
-
-function Image(props: RenderImageElementProps) {
-  const {
-    attributes,
-    children,
-    element,
-    parentType,
-    // resizeImage,
-    src,
-  } = props;
-
-  const editor = useSlateStatic();
-  const path = ReactEditor.findPath(editor, element);
-
-  const parentEntry = Editor.above(editor, {
-    at: path,
-    match: (node) => Element.isElement(node) && (node as QuadratsElement).type === parentType,
-    mode: 'lowest',
-  });
-
-  const parentNode = parentEntry?.[0] as ImageFigureElement;
-  const parentPath = parentEntry?.[1];
-  // const { focusedAndSelected, imageRef, onResizeStart } = useImageResizer(element, resizeImage);
-
-  return (
-    <div
-      {...attributes}
-      className="qdr-image qdr-image--with-inline-toolbar"
-      onClick={() => Transforms.select(editor, ReactEditor.findPath(editor, element))}
-      onMouseDown={(event) => event.preventDefault()}
-      role="img"
-    >
-      <div className="qdr-image__spacer">{children}</div>
-      <div contentEditable={false} style={{ position: 'relative' }}>
-        <InlineToolbar
-          className="qdr-image__inline-toolbar"
-          iconGroups={[
-            {
-              enabledBgColor: true,
-              icons: [
-                {
-                  icon: AlignLeft,
-                  onClick: () => {
-                    Transforms.setNodes(editor, { align: 'start' } as ImageFigureElement, { at: parentPath });
-                  },
-                  active: parentNode.align === 'start' || !parentNode.align,
-                },
-                {
-                  icon: AlignCenter,
-                  onClick: () => {
-                    Transforms.setNodes(editor, { align: 'center' } as ImageFigureElement, { at: parentPath });
-                  },
-                  active: parentNode.align === 'center',
-                },
-                {
-                  icon: AlignRight,
-                  onClick: () => {
-                    Transforms.setNodes(editor, { align: 'end' } as ImageFigureElement, { at: parentPath });
-                  },
-                  active: parentNode.align === 'end',
-                },
-              ],
-            },
-            {
-              icons: [
-                {
-                  icon: Trash,
-                  onClick: () => {
-                    Transforms.removeNodes(editor, { at: parentPath });
-                  },
-                },
-              ],
-            },
-          ]}
-        />
-        {/* {focusedAndSelected && (
-          <>
-            <span className="qdr-image__boundary" />
-            <span
-              aria-label="resize image"
-              className="qdr-image__resizer"
-              onMouseDown={onResizeStart}
-              onTouchStart={onResizeStart}
-              role="button"
-              tabIndex={-1}
-            />
-          </>
-        )} */}
-        <img
-          // ref={imageRef}
-          src={src}
-          alt={src}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default Image;

package/image/src/components/ImageCaption.tsx

@@ -1,35 +0,0 @@
-import React, { useMemo } from 'react';
-import clsx from 'clsx';
-import { Editor, Path } from '@quadrats/core';
-import { ReactEditor, useSlateStatic, useLocale, useComposition } from '@quadrats/react';
-import { RenderImageCaptionElementProps } from '../typings';
-
-function ImageCaption(props: RenderImageCaptionElementProps) {
-  const { compositionPath } = useComposition();
-  const { attributes, children, element } = props;
-  const editor = useSlateStatic();
-  const path = ReactEditor.findPath(editor, element);
-  const text = Editor.string(editor, path);
-  const isEmpty = !text;
-  const locale = useLocale();
-  const placeholder = locale.editor.image.captionInputPlaceholder;
-  const composing = useMemo(() => Path.equals(compositionPath, path), [compositionPath, path]);
-
-  return (
-    <figcaption
-      {...attributes}
-      className={clsx('qdr-image__caption', {
-        'qdr-image__caption--empty': isEmpty,
-      })}
-    >
-      {isEmpty && !composing && (
-        <span className="qdr-image__caption-placeholder" contentEditable={false}>
-          {placeholder}
-        </span>
-      )}
-      {children}
-    </figcaption>
-  );
-}
-
-export default ImageCaption;

package/image/src/components/ImageFigure.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { useFocused, useSelected } from '@quadrats/react';
-import { RenderImageFigureElementProps } from '../typings';
-
-function ImageFigure(props: RenderImageFigureElementProps) {
-  const { attributes, children, style } = props;
-
-  const focused = useFocused();
-  const selected = useSelected();
-  const blurred = !focused || !selected;
-
-  return (
-    <figure
-      {...attributes}
-      className={clsx('qdr-image__figure', {
-        'qdr-image__figure--blurred': blurred,
-      })}
-      style={style}
-    >
-      {children}
-    </figure>
-  );
-}
-
-export default ImageFigure;

package/image/src/components/ImagePlaceholder.tsx

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