@quadrats/react 1.1.7 → 1.1.8

package/heading/package.json

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

package/heading/src/constants.ts

@@ -0,0 +1,9 @@
+/**
+ * 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

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

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

@@ -0,0 +1,21 @@
+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/package.json

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

package/heading/toolbar/src/HeadingToolbarIcon.tsx

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

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

package/heading/toolbar/src/useToggleHeadingTool.ts

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

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

package/heading/tsconfig.build.json

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

package/highlight/jsx-serializer/package.json

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

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

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

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

package/highlight/package.json

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

package/highlight/src/constants.ts

@@ -0,0 +1,6 @@
+/**
+ * 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

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

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

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

package/highlight/tsconfig.build.json

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

package/image/jsx-serializer/package.json

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

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

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

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

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

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

package/image/package.json

@@ -4,7 +4,14 @@
     "**/*.css",
     "**/*.scss"
   ],
-  "main": "./index.cjs.js",
-  "module": "./index.js",
-  "typings": "./index.d.ts"
+  "quadratsConfig": {
+    "deps": [
+      "__ROOT__",
+      "toolbar",
+      "utils"
+    ],
+    "styles": {
+      "components/image": "image"
+    }
+  }
 }

package/image/src/components/Image.tsx

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

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

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