@quadrats/react 1.1.6 → 1.1.8

package/toolbar/src/components/ToolbarGroupIcon.tsx

@@ -0,0 +1,131 @@
+import React, { useState, useCallback, useRef, useLayoutEffect } from 'react';
+import clsx from 'clsx';
+import { ArrowDown } from '@quadrats/icons';
+import { Icon, IconProps } from '@quadrats/react/components';
+import { useClickAway } from '@quadrats/react/utils';
+import { useToolbar } from '../contexts/toolbar';
+import { ToolbarMenuContext } from '../contexts/toolbarMenu';
+
+export interface ToolbarGroupIconProps extends Omit<IconProps, 'ref' | 'onClick' | 'onMouseDown'> {
+  withArrow?: boolean;
+}
+
+function ToolbarGroupIcon(props: ToolbarGroupIconProps) {
+  const {
+    className,
+    children,
+    withArrow = true,
+    ...rest
+  } = props;
+
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const iconRef = useRef<HTMLDivElement | null>(null);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  const { toolbarRef } = useToolbar();
+  const [placement, setPlacement] = useState<'top' | 'bottom'>('bottom');
+  const [menuExpanded, setMenuExpanded] = useState<boolean>(false);
+
+  useClickAway(
+    () => {
+      if (!menuExpanded) {
+        return;
+      }
+
+      return () => {
+        setMenuExpanded(false);
+      };
+    },
+    wrapperRef,
+    [menuExpanded, wrapperRef],
+  );
+
+  useLayoutEffect(() => {
+    function handler() {
+      const icon = iconRef.current;
+      const menu = menuRef.current;
+      const toolbar = toolbarRef?.current;
+
+      if (icon && menu) {
+        const rect = icon.getBoundingClientRect();
+        const toolbarRect = toolbar?.getBoundingClientRect();
+        const menuWidth = menu.clientWidth;
+        const menuHeight = menu.clientHeight;
+
+        if (rect.left + menuWidth > window.innerWidth) {
+          if (rect.left + (menuWidth + rect.width) / 2 > window.innerWidth) {
+            menu.style.right = '0';
+            menu.style.left = 'unset';
+          } else {
+            menu.style.right = 'unset';
+            menu.style.left = `-${(menuWidth - rect.width) / 2}px`;
+          }
+        } else {
+          menu.style.right = 'unset';
+          menu.style.left = '0';
+        }
+
+        if (toolbarRect && toolbarRect.top + toolbarRect.height + menuHeight > window.innerHeight) {
+          setPlacement('top');
+        } else {
+          setPlacement('bottom');
+        }
+      }
+    }
+
+    handler();
+
+    window.addEventListener('resize', handler);
+    window.addEventListener('scroll', handler);
+
+    return () => {
+      window.removeEventListener('resize', handler);
+      window.removeEventListener('scroll', handler);
+    };
+  }, [toolbarRef]);
+
+  const onClick = useCallback(() => {
+    setMenuExpanded(expanded => !expanded);
+  }, []);
+
+  return (
+    <ToolbarMenuContext.Provider
+      value={{
+        isInGroup: true,
+        menuExpanded,
+      }}
+    >
+      <div ref={wrapperRef} className="qdr-toolbar__icon__wrapper">
+        <div
+          ref={iconRef}
+          className={clsx('qdr-toolbar__icon', { 'qdr-toolbar__icon--expanded': menuExpanded }, className)}
+          onClick={onClick}
+        >
+          <Icon
+            {...rest}
+          />
+          {withArrow && (
+            <Icon
+              icon={ArrowDown}
+              className="qdr-toolbar__icon__arrow"
+              width={12}
+              height={12}
+            />
+          )}
+        </div>
+        <div
+          ref={menuRef}
+          className={clsx(
+            'qdr-toolbar__icon__menu',
+            { 'qdr-toolbar__icon__menu--expanded': menuExpanded },
+            { 'qdr-toolbar__icon__menu--top': placement === 'top' },
+            { 'qdr-toolbar__icon__menu--bottom': placement === 'bottom' },
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </ToolbarMenuContext.Provider>
+  );
+}
+
+export default ToolbarGroupIcon;

package/toolbar/src/components/ToolbarIcon.tsx

@@ -0,0 +1,84 @@
+import React, { useCallback } from 'react';
+import clsx from 'clsx';
+import { Check } from '@quadrats/icons';
+import { Icon, IconProps } from '@quadrats/react/components';
+import { useLocale } from '@quadrats/react';
+import { getIconNameInGroup } from './toolbarIconName';
+import { useToolbarMenu } from '../contexts/toolbarMenu';
+
+export interface ToolbarIconProps extends Omit<IconProps, 'ref' | 'onClick' | 'onMouseDown'> {
+  active?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+
+function ToolbarIcon(props: ToolbarIconProps) {
+  const {
+    active,
+    className,
+    icon,
+    onClick: onClickProps,
+    onMouseDown: onMouseDownProps,
+    ...rest
+  } = props;
+
+  const locale = useLocale();
+  const { isInGroup } = useToolbarMenu();
+
+  const onClick = useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    onClickProps?.(event);
+  }, [onClickProps]);
+
+  const onMouseDown = useCallback((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    event.preventDefault();
+    onMouseDownProps?.(event);
+  }, [onMouseDownProps]);
+
+  if (isInGroup) {
+    return (
+      <div
+        className={clsx(
+          'qdr-toolbar__icon',
+          'qdr-toolbar__icon--with-name',
+          { 'qdr-toolbar__icon--with-name--active': active },
+          className,
+        )}
+        onClick={onClick}
+        onMouseDown={onMouseDown}
+      >
+        <Icon
+          {...rest}
+          icon={icon}
+          width={20}
+          height={20}
+        />
+        <p className="qdr-toolbar__icon__name">{getIconNameInGroup(icon.name, locale)}</p>
+        {active && (
+          <Icon
+            className="qdr-toolbar__icon__check"
+            icon={Check}
+            width={20}
+            height={20}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="qdr-toolbar__icon__wrapper">
+      <div
+        className={clsx('qdr-toolbar__icon', { 'qdr-toolbar__icon--active': active }, className)}
+        onClick={onClick}
+        onMouseDown={onMouseDown}
+      >
+        <Icon
+          {...rest}
+          icon={icon}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default ToolbarIcon;

package/toolbar/src/components/ToolbarInput.tsx

@@ -0,0 +1,66 @@
+import React, { KeyboardEventHandler, KeyboardEvent, MouseEvent } from 'react';
+import { useLocale } from '@quadrats/react';
+import { ToolInputConfig } from '../typings';
+
+export interface ToolbarInputProps {
+  exit: VoidFunction;
+  toolInput: ToolInputConfig;
+}
+
+function ToolbarInput({ exit, toolInput }: ToolbarInputProps) {
+  const { confirm, getPlaceholder } = toolInput;
+  const onExit = (event: KeyboardEvent | MouseEvent) => {
+    event.preventDefault();
+    exit();
+  };
+
+  let composing = false;
+
+  const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
+    if (composing) return;
+
+    const isEnter = event.key === 'Enter';
+
+    if (isEnter || event.key === 'Escape') {
+      onExit(event);
+
+      if (isEnter) {
+        confirm((event.target as HTMLInputElement).value);
+      }
+    }
+  };
+
+  const locale = useLocale();
+  const placeholder = getPlaceholder(locale);
+
+  const onCompositionStart = () => {
+    composing = true;
+  };
+
+  const onCompositionEnd = () => {
+    composing = false;
+  };
+
+  return (
+    <div className="qdr-toolbar__input__wrapper">
+      <input
+        defaultValue={toolInput.defaultValue}
+        autoFocus
+        onCompositionStart={onCompositionStart}
+        onCompositionEnd={onCompositionEnd}
+        className="qdr-toolbar__input"
+        placeholder={placeholder}
+        onKeyDown={onKeyDown}
+        onBlur={exit}
+      />
+      <svg className="qdr-toolbar__input__cross" viewBox="0 0 320 512" onMouseDown={onExit}>
+        <path
+          // eslint-disable-next-line max-len
+          d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"
+        />
+      </svg>
+    </div>
+  );
+}
+
+export default ToolbarInput;

package/toolbar/src/components/toolbarIconName.ts

@@ -0,0 +1,125 @@
+import { LocaleDefinition } from '@quadrats/locales';
+
+export function getIconNameInGroup(iconOriginName: string, locale: LocaleDefinition): string {
+  switch (iconOriginName) {
+    case 'accordion':
+      return locale.editor.toolbar.accordion;
+
+    case 'align-center':
+      return locale.editor.toolbar.alignCenter;
+
+    case 'align-left':
+      return locale.editor.toolbar.alignLeft;
+
+    case 'align-right':
+      return locale.editor.toolbar.alignRight;
+
+    case 'blockquote':
+      return locale.editor.toolbar.quote;
+
+    case 'bold':
+      return locale.editor.toolbar.bold;
+
+    case 'card':
+      return locale.editor.toolbar.card;
+
+    case 'carousel':
+      return locale.editor.toolbar.carousel;
+
+    case 'dance':
+      return locale.editor.toolbar.dance;
+
+    case 'divider':
+      return locale.editor.toolbar.divider;
+
+    case 'drama':
+      return locale.editor.toolbar.drama;
+
+    case 'erase':
+      return locale.editor.toolbar.erase;
+
+    case 'facebook':
+      return locale.editor.toolbar.facebook;
+
+    case 'fn':
+      return locale.editor.toolbar.footnote;
+
+    case 'heading1':
+      return locale.editor.toolbar.heading1;
+
+    case 'heading2':
+      return locale.editor.toolbar.heading2;
+
+    case 'heading3':
+      return locale.editor.toolbar.heading3;
+
+    case 'heading4':
+      return locale.editor.toolbar.heading4;
+
+    case 'heading5':
+      return locale.editor.toolbar.heading5;
+
+    case 'heading6':
+      return locale.editor.toolbar.heading6;
+
+    case 'highlight':
+      return locale.editor.toolbar.highlight;
+
+    case 'image':
+      return locale.editor.toolbar.image;
+
+    case 'instagram':
+      return locale.editor.toolbar.instagram;
+
+    case 'italic':
+      return locale.editor.toolbar.italic;
+
+    case 'link':
+      return locale.editor.toolbar.link;
+
+    case 'ordered list':
+      return locale.editor.toolbar.orderedList;
+
+    case 'paragraph':
+      return locale.editor.toolbar.paragraph;
+
+    case 'podcast-apple':
+      return locale.editor.toolbar.podcastApple;
+
+    case 'read-more':
+      return locale.editor.toolbar.readMore;
+
+    case 'sheet-music':
+      return locale.editor.toolbar.sheetMusic;
+
+    case 'spotify':
+      return locale.editor.toolbar.spotify;
+
+    case 'strikethrough':
+      return locale.editor.toolbar.strikethrough;
+
+    case 'twitter':
+      return locale.editor.toolbar.twitter;
+
+    case 'underline':
+      return locale.editor.toolbar.underline;
+
+    case 'unlink':
+      return locale.editor.toolbar.unlink;
+
+    case 'unordered list':
+      return locale.editor.toolbar.unorderedList;
+
+    case 'video':
+      return locale.editor.toolbar.video;
+
+    case 'vimeo':
+      return locale.editor.toolbar.vimeo;
+
+    case 'youtube':
+      return locale.editor.toolbar.youtube;
+
+    default:
+      return '';
+  }
+}

package/toolbar/src/constants.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+/**
+ * A react element constant of toolbar divider.
+ */
+export const TOOLBAR_DIVIDER = <span className="qdr-toolbar__divider" />;

package/toolbar/src/contexts/StartToolInputContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { StartToolInput } from '../typings';
+
+export const StartToolInputContext = createContext<StartToolInput>(() => {});

package/toolbar/src/contexts/toolbar.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext, RefObject } from 'react';
+
+export interface ToolbarContextValue {
+  fixed: boolean;
+  toolbarRef?: RefObject<HTMLDivElement | null>
+}
+
+export const ToolbarContext = createContext<ToolbarContextValue>({
+  fixed: false,
+});
+
+export function useToolbar() {
+  return useContext(ToolbarContext);
+}

package/toolbar/src/contexts/toolbarMenu.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+export interface ToolbarMenuContextValue {
+  isInGroup: boolean;
+  menuExpanded: boolean;
+}
+
+export const ToolbarMenuContext = createContext<ToolbarMenuContextValue>({
+  isInGroup: false,
+  menuExpanded: false,
+});
+
+export function useToolbarMenu() {
+  return useContext(ToolbarMenuContext);
+}

package/toolbar/src/hooks/useAutoGroupIcons.tsx

@@ -0,0 +1,98 @@
+import React, { useLayoutEffect, useRef, useEffect, useMemo, useState, ReactElement, useCallback } from 'react';
+
+function usePreviousValue<T>(value: T): T {
+  const ref = useRef(value);
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}
+
+export function useAutoGroupIcons(tools: JSX.Element | null | undefined, renderExpandedStatus: boolean) {
+  const preRenderExpandedStatus = usePreviousValue(renderExpandedStatus);
+
+  const fakeToolbarId = useMemo(() => (
+    renderExpandedStatus ? 'fake-expanded-tools-wrapper' : 'fake-tools-wrapper'
+  ), [renderExpandedStatus]);
+
+  const fakeTools = useMemo(() => (
+    <div
+      id={fakeToolbarId}
+      className="qdr-toolbar"
+      style={{ position: 'absolute', top: 0, left: 0, visibility: 'hidden', pointerEvents: 'none' }}
+    >
+      {tools}
+    </div>
+  ), [fakeToolbarId, tools]);
+
+  const [takeCount, setTakeCount] = useState<number>(0);
+
+  const toolsElements = useMemo(() => (tools?.props.children as ReactElement[])?.filter(c => !!c).map((c, index) => ({
+    ...c,
+    id: index,
+  })) ?? [], [tools]);
+
+  const calcGroupIcons = useCallback(() => {
+    const fakeToolsWrapper = document.getElementById(fakeToolbarId);
+
+    if (fakeToolsWrapper) {
+      const toolbarRect = fakeToolsWrapper.getBoundingClientRect();
+
+      if (toolbarRect.right - window.innerWidth > 0) {
+        const iconWrappers = fakeToolsWrapper!.getElementsByClassName('qdr-toolbar__icon__wrapper');
+
+        const targetIndex = Array.from(iconWrappers).findIndex((wrapper) => {
+          const rect = wrapper.getBoundingClientRect();
+
+          return rect.right > window.innerWidth;
+        });
+
+        const groupIcons = (Array.from(iconWrappers).slice(targetIndex - 1, iconWrappers.length) as HTMLElement[]);
+
+        setTakeCount(groupIcons.length);
+      } else {
+        setTakeCount(0);
+      }
+    }
+  }, [fakeToolbarId]);
+
+  useLayoutEffect(() => {
+    calcGroupIcons();
+
+    window.addEventListener('resize', calcGroupIcons);
+
+    return () => {
+      window.removeEventListener('resize', calcGroupIcons);
+    };
+  }, [calcGroupIcons]);
+
+  useEffect(() => {
+    if (renderExpandedStatus !== preRenderExpandedStatus) {
+      calcGroupIcons();
+    }
+  }, [renderExpandedStatus, preRenderExpandedStatus, calcGroupIcons]);
+
+  const takeIndex = useMemo(() => toolsElements.findIndex(
+    el => el.id === toolsElements.filter(e => e.type !== 'span').slice(-takeCount)[0].id,
+  ), [toolsElements, takeCount]);
+
+  const shownElements = useMemo(() => toolsElements.slice(0, takeIndex), [toolsElements, takeIndex]);
+  const groupElements = useMemo(() => toolsElements.slice(takeIndex).filter(g => g.type !== 'span').map((g) => {
+    if (((g.props as any)?.children as ReactElement[])?.length > 0) {
+      return (g.props as any).children;
+    }
+
+    return g;
+  }).reduce((acc, val) => {
+    return acc.concat(val);
+  }, []), [toolsElements, takeIndex]);
+
+  return {
+    fakeTools,
+    takeCount,
+    shownElements,
+    groupElements,
+  };
+}

package/toolbar/src/hooks/useStartToolInput.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { StartToolInputContext } from '../contexts/StartToolInputContext';
+
+export function useStartToolInput() {
+  return useContext(StartToolInputContext);
+}

package/toolbar/src/index.ts

@@ -0,0 +1,7 @@
+export { TOOLBAR_DIVIDER } from './constants';
+export * from './typings';
+export { InlineToolbarProps, default as InlineToolbar } from './components/InlineToolbar';
+export { ToolbarProps, default as Toolbar } from './components/Toolbar';
+export { ToolbarIconProps, default as ToolbarIcon } from './components/ToolbarIcon';
+export { ToolbarGroupIconProps, default as ToolbarGroupIcon } from './components/ToolbarGroupIcon';
+export { useStartToolInput } from './hooks/useStartToolInput';

package/toolbar/src/typings.ts

@@ -0,0 +1,8 @@
+import { Range } from '@quadrats/core';
+import { InputWidgetConfig } from '@quadrats/common/input-widget';
+
+export interface ToolInputConfig extends InputWidgetConfig {
+  currentSelection: Range | null;
+}
+
+export type StartToolInput = (config: InputWidgetConfig) => void;

package/toolbar/tsconfig.build.json

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

package/tsconfig.build.json

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

package/underline/jsx-serializer/package.json

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

package/underline/jsx-serializer/src/createJsxSerializeUnderline.ts

@@ -0,0 +1,8 @@
+import { UNDERLINE_TYPE } from '@quadrats/common/underline';
+import { createJsxSerializeToggleMarkCreator } from '@quadrats/react/toggle-mark/jsx-serializer';
+import { defaultRenderUnderline } from './defaultRenderUnderline';
+
+export const createJsxSerializeUnderline = createJsxSerializeToggleMarkCreator({
+  type: UNDERLINE_TYPE,
+  render: defaultRenderUnderline,
+});

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

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

package/underline/package.json

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

package/underline/src/constants.ts

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

package/underline/src/createReactUnderline.ts

@@ -0,0 +1,11 @@
+import { createUnderline } from '@quadrats/common/underline';
+import { createReactToggleMarkCreator } from '@quadrats/react/toggle-mark';
+import { defaultRenderUnderline } from './defaultRenderUnderline';
+import { UNDERLINE_HOTKEY } from './constants';
+
+export const createReactUnderline = (variant?: string) => createReactToggleMarkCreator(
+  createUnderline(variant), {
+    hotkey: UNDERLINE_HOTKEY,
+    render: defaultRenderUnderline,
+  },
+)();

package/underline/src/defaultRenderUnderline.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { RenderMarkPropsBase } from '@quadrats/react/_internal';
+import { UNDERLINE_TYPE } from '@quadrats/common/underline';
+import { UnderlineLeaf } from './typings';
+
+export const defaultRenderUnderline = ({ children, leaf }: RenderMarkPropsBase<boolean>) => (
+  <u className={(leaf as UnderlineLeaf).underlineVariant
+    ? `${UNDERLINE_TYPE}.${(leaf as UnderlineLeaf).underlineVariant}` : `${UNDERLINE_TYPE}`}
+  >
+    {children}
+  </u>
+);

package/underline/src/typings.ts

@@ -0,0 +1,6 @@
+import { Text } from 'slate';
+
+export interface UnderlineLeaf extends Text {
+  underline: boolean;
+  underlineVariant?: string;
+}