@quadrats/react 1.1.8 → 1.1.9

package/toolbar/src/components/ToolbarIcon.tsx

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

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

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

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

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

package/toolbar/src/contexts/toolbar.ts

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

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

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

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

package/toolbar/src/index.ts

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

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

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

package/tsconfig.build.json

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

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

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

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

package/underline/src/constants.ts

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

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

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

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

package/underline/tsconfig.build.json

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

package/utils/src/composeRefs.ts

@@ -1,34 +0,0 @@
-import { Ref } from 'react';
-
-/**
- * Compose all refs to single one.
- * It's helpful if you want to use useRef in an forwardRef component.
- *
- * @example
- *
- * const Some = forwardRef((props, ref) => {
- *   const refFromHook = useRef(null);
- *   const composedRef = composeRefs([ref, refFromHook]);
- *
- *   return (
- *     <div ref{composedRef}>
- *       ...
- *     </div>
- *   );
- * });
- */
-export function composeRefs<T>(refs: Ref<T>[]) {
-  return (element: T) => {
-    refs.forEach((ref) => {
-      if (!ref) {
-        return;
-      }
-
-      if (typeof ref === 'function') {
-        return ref(element);
-      }
-
-      (ref as any).current = element;
-    });
-  };
-}

package/utils/src/removePreviousElement.ts

@@ -1,62 +0,0 @@
-import { KeyboardEvent } from 'react';
-import { Range, QuadratsEditor, Editor, Element, QuadratsElement, Node, Transforms, Path } from '@quadrats/core';
-
-export function removePreviousElement({
-  event,
-  editor,
-  type,
-  confirmModal,
-  doConfirm,
-}: {
-  event: KeyboardEvent<HTMLElement>;
-  editor: QuadratsEditor & Editor;
-  type: string;
-  confirmModal: boolean;
-  doConfirm?: (remove: VoidFunction) => void;
-}) {
-  const { selection } = editor;
-
-  if (selection && Range.isCollapsed(selection)) {
-    const currentEntry = Editor.above(editor, {
-      match: (n) => Element.isElement(n),
-    });
-
-    if (currentEntry) {
-      const [, currentPath] = currentEntry;
-
-      if (Editor.isStart(editor, selection.anchor, currentPath)) {
-        // const previousEntry = Editor.previous(editor, {
-        //   at: currentPath,
-        //   match: (n) => Element.isElement(n) && (n as QuadratsElement).type === type,
-        // });
-        let prevPath: Path = currentPath;
-
-        try {
-          prevPath = Path.previous(currentPath);
-        } catch (ex) {
-          // error
-        }
-
-        const prevNode = Node.get(editor, prevPath);
-
-        if (Element.isElement(prevNode) && (prevNode as QuadratsElement).type === type) {
-          event.preventDefault();
-
-          const remove = () => {
-            Transforms.removeNodes(editor, {
-              at: prevPath,
-            });
-          };
-
-          if (confirmModal) {
-            doConfirm?.(remove);
-          } else {
-            remove();
-          }
-
-          return;
-        }
-      }
-    }
-  }
-}