@quadrats/react 1.1.7 → 1.1.8

package/table/toolbar/package.json

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

package/table/toolbar/src/TableToolbarIcon.tsx

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

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

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

package/table/tsconfig.build.json

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

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

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

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

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

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

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

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

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

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

package/toggle-mark/package.json

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

package/toggle-mark/src/createReactToggleMarkCreator.ts

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

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

package/toggle-mark/src/typings.ts

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

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

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

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

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

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

package/toggle-mark/tsconfig.build.json

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

package/toolbar/package.json

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

package/toolbar/src/components/InlineToolbar.tsx

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

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