@quadrats/react 1.1.8 → 1.1.10

package/table/toolbar/src/TableToolbarIcon.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { ToolbarIcon, ToolbarIconProps } from '@quadrats/react/toolbar';
-import { ReactTable } from '@quadrats/react/table';
-import { useTableTool } from './useTableTool';
-
-export interface TableToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
-  controller: ReactTable;
-}
-
-function TableToolbarIcon(props: TableToolbarIconProps) {
-  const { controller, ...rest } = props;
-  const { insert } = useTableTool(controller);
-
-  return <ToolbarIcon {...rest} onClick={insert} />;
-}
-
-export default TableToolbarIcon;

package/table/toolbar/src/useTableTool.ts

@@ -1,14 +0,0 @@
-import { useCallback } from 'react';
-import { ReactTable } from '@quadrats/react/table';
-import { useQuadrats } from '@quadrats/react';
-
-export function useTableTool(table: ReactTable) {
-  const editor = useQuadrats();
-
-  const insert = useCallback(() => {
-    // Insert a 3x3 table
-    table.insertTable(editor, 3, 3);
-  }, [editor, table]);
-
-  return { insert };
-}

package/table/toolbar/tsconfig.build.json

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

package/table/tsconfig.build.json

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

package/toggle-mark/jsx-serializer/src/createJsxSerializeToggleMarkCreator.ts

@@ -1,12 +0,0 @@
-import { createJsxSerializeMark, CreateJsxSerializeMarkOptions } from '@quadrats/react/jsx-serializer';
-
-export type CreateJsxSerializeToggleMarkCreatorOptions = CreateJsxSerializeMarkOptions<boolean>;
-
-export type CreateJsxSerializeToggleMarkOptions = Partial<CreateJsxSerializeToggleMarkCreatorOptions>;
-
-export function createJsxSerializeToggleMarkCreator(defaults: CreateJsxSerializeToggleMarkCreatorOptions) {
-  return (options?: CreateJsxSerializeToggleMarkOptions) => createJsxSerializeMark<boolean>({
-    ...defaults,
-    ...options,
-  });
-}

package/toggle-mark/jsx-serializer/src/index.ts

@@ -1,6 +0,0 @@
-export * from './typings';
-export {
-  CreateJsxSerializeToggleMarkCreatorOptions,
-  CreateJsxSerializeToggleMarkOptions,
-  createJsxSerializeToggleMarkCreator,
-} from './createJsxSerializeToggleMarkCreator';

package/toggle-mark/jsx-serializer/src/typings.ts

@@ -1,3 +0,0 @@
-import { JsxSerializeMarkProps } from '@quadrats/react/jsx-serializer';
-
-export type JsxSerializeToggleMarkProps = JsxSerializeMarkProps<boolean>;

package/toggle-mark/jsx-serializer/tsconfig.build.json

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

package/toggle-mark/src/createReactToggleMarkCreator.ts

@@ -1,33 +0,0 @@
-import isHotkey from 'is-hotkey';
-import { createToggleMarkCreator, CreateToggleMarkOptions } from '@quadrats/common/toggle-mark';
-import { createRenderMark, CreateRenderMarkOptions } from '@quadrats/react';
-import { ReactToggleMark, ReactToggleMarkCreateHandlersOptions } from './typings';
-
-export type CreateReactToggleMarkCreatorOptions = Required<
-ReactToggleMarkCreateHandlersOptions & Omit<CreateRenderMarkOptions<boolean>, 'type'>
->;
-
-export type CreateReactToggleMarkOptions = CreateToggleMarkOptions;
-
-export function createReactToggleMarkCreator(
-  createCore: ReturnType<typeof createToggleMarkCreator>,
-  defaults: CreateReactToggleMarkCreatorOptions,
-) {
-  return ({ type }: CreateReactToggleMarkOptions = {}): ReactToggleMark => {
-    const core = createCore({ type });
-
-    return {
-      ...core,
-      createHandlers: ({ hotkey = defaults.hotkey } = {}) => ({
-        onKeyDown: (event, editor, next) => {
-          if (isHotkey(hotkey, event as any)) {
-            core.toggleMark(editor);
-          } else {
-            next();
-          }
-        },
-      }),
-      createRenderLeaf: ({ render = defaults.render } = {}) => createRenderMark<boolean>({ type: core.type, render }),
-    };
-  };
-}

package/toggle-mark/src/index.ts

@@ -1,6 +0,0 @@
-export * from './typings';
-export {
-  CreateReactToggleMarkCreatorOptions,
-  CreateReactToggleMarkOptions,
-  createReactToggleMarkCreator,
-} from './createReactToggleMarkCreator';

package/toggle-mark/src/typings.ts

@@ -1,24 +0,0 @@
-import { ToggleMark } from '@quadrats/common/toggle-mark';
-import {
-  CreateRenderMarkOptions,
-  Editor,
-  RenderMarkProps,
-  WithCreateHandlers,
-  WithCreateRenderLeaf,
-} from '@quadrats/react';
-
-export type RenderToggleMarkProps = RenderMarkProps<boolean>;
-
-export interface ReactToggleMarkCreateHandlersOptions {
-  /**
-   * The hotkey to toggle the mark.
-   */
-  hotkey?: string;
-}
-
-export type ReactToggleMarkCreateRenderLeafOptions = Partial<Omit<CreateRenderMarkOptions<boolean>, 'type'>>;
-
-export interface ReactToggleMark
-  extends ToggleMark<Editor>,
-  WithCreateHandlers<[ReactToggleMarkCreateHandlersOptions?]>,
-  WithCreateRenderLeaf<[ReactToggleMarkCreateRenderLeafOptions?]> {}

package/toggle-mark/toolbar/src/ToggleMarkToolbarIcon.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { ToolbarIcon, ToolbarIconProps } from '@quadrats/react/toolbar';
-import { ReactToggleMark } from '@quadrats/react/toggle-mark';
-import { useToggleMarkTool } from './useToggleMarkTool';
-
-export interface ToggleMarkToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
-  controller: ReactToggleMark;
-}
-
-function ToggleMarkToolbarIcon(props: ToggleMarkToolbarIconProps) {
-  const { controller, ...rest } = props;
-  const { active, onClick } = useToggleMarkTool(controller);
-
-  return <ToolbarIcon {...rest} active={active} onClick={onClick} />;
-}
-
-export default ToggleMarkToolbarIcon;

package/toggle-mark/toolbar/src/useToggleMarkTool.ts

@@ -1,11 +0,0 @@
-import { useQuadrats } from '@quadrats/react';
-import { ReactToggleMark } from '@quadrats/react/toggle-mark';
-
-export function useToggleMarkTool(controller: ReactToggleMark) {
-  const editor = useQuadrats();
-
-  return {
-    active: controller.isToggleMarkActive(editor),
-    onClick: () => controller.toggleMark(editor),
-  };
-}

package/toggle-mark/toolbar/tsconfig.build.json

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

package/toggle-mark/tsconfig.build.json

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

package/toolbar/src/components/InlineToolbar.tsx

@@ -1,81 +0,0 @@
-import React, { Fragment, useRef } from 'react';
-import clsx from 'clsx';
-import { Icon } from '@quadrats/react/components';
-import { IconDefinition } from '@quadrats/icons';
-import { useClickAway } from '@quadrats/react/utils';
-
-export interface InlineToolbarProps {
-  className?: string;
-  iconGroups: {
-    enabledBgColor?: boolean;
-    icons: (
-      | {
-          icon: IconDefinition;
-          onClick: VoidFunction;
-          active?: boolean;
-          disabled?: boolean;
-          className?: string;
-        }
-      | React.JSX.Element
-    )[];
-  }[];
-  style?: React.CSSProperties;
-  onClickAway?: VoidFunction;
-}
-
-function InlineToolbar({ className, iconGroups, style, onClickAway }: InlineToolbarProps) {
-  const validIconsGroup = iconGroups.filter((group) => group.icons.length);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useClickAway(
-    () => {
-      return onClickAway
-        ? () => {
-            onClickAway();
-          }
-        : undefined;
-    },
-    ref,
-    [onClickAway],
-  );
-
-  return (
-    <div ref={ref} contentEditable={false} className={clsx('qdr-inline-toolbar', className)} style={style}>
-      {validIconsGroup.map((group, index) => (
-        <Fragment key={index}>
-          <div
-            className={clsx('qdr-inline-toolbar__wrapper', {
-              'qdr-inline-toolbar__wrapper--enabledBgColor': group.enabledBgColor,
-            })}
-          >
-            {group.icons.map((child) =>
-              'icon' in child ? (
-                <Icon
-                  key={child.icon.name}
-                  className={clsx('qdr-inline-toolbar__icon', child.className, {
-                    'qdr-inline-toolbar__icon--active': child.active,
-                    'qdr-inline-toolbar__icon--disabled': child.disabled,
-                  })}
-                  icon={child.icon}
-                  width={24}
-                  height={24}
-                  onClick={(e) => {
-                    if (!child.disabled) {
-                      e.preventDefault();
-                      child.onClick();
-                    }
-                  }}
-                />
-              ) : (
-                child
-              ),
-            )}
-          </div>
-          {index < validIconsGroup.length - 1 && <div className="qdr-inline-toolbar__divider" />}
-        </Fragment>
-      ))}
-    </div>
-  );
-}
-
-export default InlineToolbar;

package/toolbar/src/components/Toolbar.tsx

@@ -1,243 +0,0 @@
-import React, { useRef, useLayoutEffect, useState, useContext, useCallback, JSX } from 'react';
-import clsx from 'clsx';
-import { getSelectionText, isNodesTypeIn, Range as QuadratsRange, Transforms } from '@quadrats/core';
-import { More as MoreIcon } from '@quadrats/icons';
-import { ReactEditor, ThemeContext, useQuadrats } from '@quadrats/react';
-import { Portal } from '@quadrats/react/components';
-import { StartToolInput, ToolInputConfig } from '../typings';
-import ToolbarGroupIcon from './ToolbarGroupIcon';
-import { ToolbarContext } from '../contexts/toolbar';
-import { StartToolInputContext } from '../contexts/StartToolInputContext';
-import { useAutoGroupIcons } from '../hooks/useAutoGroupIcons';
-import ToolbarInput from './ToolbarInput';
-
-function roundNumber(value: number, min: number, max: number) {
-  if (value < min) {
-    return min;
-  }
-
-  if (value > max) {
-    return max;
-  }
-
-  return value;
-}
-
-/**
- * @todo
- * Also round top.
- */
-function setPosition(el: HTMLElement, range: Range) {
-  const rect = range.getBoundingClientRect();
-  const top = rect.top + window.pageYOffset - el.offsetHeight;
-  const left = roundNumber(
-    rect.left + window.pageXOffset - (el.offsetWidth - rect.width) / 2,
-    0,
-    window.innerWidth - el.offsetWidth,
-  );
-
-  el.style.top = `${top}px`;
-  el.style.left = `${left}px`;
-}
-
-export interface ToolbarProps {
-  /**
-   * If there are any nodes which type match it, toolbar will hide.
-   */
-  disabledElementTypes?: string[];
-  /**
-   * A render props which provide a flag `expanded` which useful for rendering different things between collapsed and expanded.
-   */
-  children: (expanded: boolean) => JSX.Element | null | undefined;
-  /**
-   * Toolbar container
-   */
-  containerRef?: React.MutableRefObject<HTMLElement | undefined>;
-  /**
-   * only render expanded case toolbar or not.
-   */
-  onlyRenderExpanded?: boolean;
-  /**
-   * fix main toolbar or not.
-   */
-  fixed?: boolean;
-}
-
-function Toolbar(props: ToolbarProps) {
-  const { children, disabledElementTypes, onlyRenderExpanded = false, fixed = false } = props;
-  const { props: themeProps } = useContext(ThemeContext);
-  const editor = useQuadrats();
-  const toolbarRef = useRef<HTMLDivElement>(null);
-  const lastNativeRangeRef = useRef<Range>(undefined);
-  const focused = ReactEditor.isFocused(editor);
-  const { selection } = editor;
-  const [toolInput, setToolInput] = useState<ToolInputConfig>();
-  const startToolInput: StartToolInput = useCallback(
-    (inputConfig) =>
-      setToolInput({
-        ...inputConfig,
-        currentSelection: selection,
-      }),
-    [selection],
-  );
-
-  let renderExpandedStatus: boolean | undefined;
-
-  if (toolInput) {
-    const { currentSelection } = toolInput;
-
-    if (currentSelection) {
-      if (QuadratsRange.isExpanded(currentSelection)) {
-        renderExpandedStatus = true;
-      } else {
-        renderExpandedStatus = false;
-      }
-    }
-  } else if (focused) {
-    if (selection && QuadratsRange.isCollapsed(selection)) {
-      renderExpandedStatus = false;
-    } else if (getSelectionText(editor) !== '') {
-      renderExpandedStatus = true;
-    }
-  }
-
-  const shouldRender = typeof renderExpandedStatus === 'boolean';
-
-  useLayoutEffect(() => {
-    /**
-     * The native selection is not yet synchronized while effect invoked.
-     * Thus invoke handler on next frame to avoid from this issue.
-     */
-    window.requestAnimationFrame(() => {
-      /**
-       * Editor will be blurred after getting into input process.
-       * Thus cache the last range of selection to recalculate position of toolbar.
-       */
-      if (!toolInput) {
-        const nativeSelection = window.getSelection();
-
-        if (nativeSelection && nativeSelection.rangeCount > 0) {
-          lastNativeRangeRef.current = nativeSelection.getRangeAt(0);
-        }
-      }
-
-      const el = toolbarRef.current;
-      const range = lastNativeRangeRef.current;
-
-      if (shouldRender && el && range && !fixed) {
-        setPosition(el, range);
-      }
-    });
-  });
-
-  const getPortalContainer = useCallback(() => {
-    if (props.containerRef?.current) {
-      return props.containerRef.current;
-    }
-
-    return document.body;
-  }, [props.containerRef]);
-
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const tools = children(renderExpandedStatus! && !fixed);
-  const { fakeTools, takeCount, shownElements, groupElements } = useAutoGroupIcons(
-    tools,
-    renderExpandedStatus! && !fixed,
-  );
-
-  const toolbarBody = (
-    <>
-      <StartToolInputContext.Provider value={startToolInput}>
-        {takeCount > 0 ? (
-          <>
-            {shownElements}
-            <ToolbarGroupIcon icon={MoreIcon} withArrow={false}>
-              {groupElements}
-            </ToolbarGroupIcon>
-          </>
-        ) : (
-          tools
-        )}
-      </StartToolInputContext.Provider>
-      {toolInput && (
-        <ToolbarInput
-          exit={() => {
-            const { currentSelection } = toolInput;
-
-            if (currentSelection) {
-              Transforms.select(editor, currentSelection);
-            }
-
-            ReactEditor.focus(editor);
-            setToolInput(undefined);
-          }}
-          toolInput={toolInput}
-        />
-      )}
-    </>
-  );
-
-  if (fixed) {
-    return (
-      <ToolbarContext.Provider
-        value={{
-          fixed: true,
-          toolbarRef: toolbarRef,
-        }}
-      >
-        <div
-          ref={toolbarRef}
-          className={clsx(
-            'qdr-toolbar__wrapper',
-            'qdr-toolbar__wrapper--fixed',
-            { 'qdr-toolbar__wrapper--inputting': toolInput },
-            themeProps.className,
-          )}
-          style={themeProps.style}
-        >
-          <div className="qdr-toolbar">{toolbarBody}</div>
-          {fakeTools}
-        </div>
-      </ToolbarContext.Provider>
-    );
-  }
-
-  if (!shouldRender || (disabledElementTypes && isNodesTypeIn(editor, disabledElementTypes, { mode: 'all' }))) {
-    return null;
-  }
-
-  if (onlyRenderExpanded && !renderExpandedStatus) {
-    return null;
-  }
-
-  if (!tools) {
-    return null;
-  }
-
-  return (
-    <Portal getContainer={getPortalContainer}>
-      <ToolbarContext.Provider
-        value={{
-          fixed: false,
-          toolbarRef: toolbarRef,
-        }}
-      >
-        <div
-          ref={toolbarRef}
-          className={clsx(
-            'qdr-toolbar__wrapper',
-            'qdr-toolbar__wrapper--float',
-            { 'qdr-toolbar__wrapper--inputting': toolInput },
-            themeProps.className,
-          )}
-          style={themeProps.style}
-        >
-          <div className="qdr-toolbar qdr-toolbar--radius qdr-toolbar--shadow">{toolbarBody}</div>
-          {fakeTools}
-        </div>
-      </ToolbarContext.Provider>
-    </Portal>
-  );
-}
-
-export default Toolbar;

package/toolbar/src/components/ToolbarGroupIcon.tsx

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