@quadrats/react 1.1.8 → 1.1.9

package/jsx-serializer/src/createJsxSerializeMark.ts

@@ -1,6 +0,0 @@
-import { createRenderMarkBase } from '@quadrats/react/_internal';
-import { CreateJsxSerializeMarkOptions } from './typings';
-
-export function createJsxSerializeMark<M>(options: CreateJsxSerializeMarkOptions<M>) {
-  return createRenderMarkBase(options);
-}

package/jsx-serializer/src/createJsxSerializer.tsx

@@ -1,84 +0,0 @@
-import React, { JSX, cloneElement, CSSProperties, ReactElement } from 'react';
-import { Descendant, QuadratsElement } from '@quadrats/core';
-import { isText, WithElementParent } from '@quadrats/core/serializers';
-import { composeRenderElementsBase, composeRenderLeafsBase } from '@quadrats/react/_internal';
-import { JsxSerializeElementProps, JsxSerializeLeafProps } from './typings';
-
-let key = 0;
-
-function addKey(element: ReactElement) {
-  key += 1;
-
-  return cloneElement(element, { key });
-}
-
-export interface CreateJsxSerializerOptioons {
-  /**
-   * Invoked while no any `elements` matching.
-   */
-  defaultElement?: (props: JsxSerializeElementProps) => JSX.Element;
-  /**
-   * Invoked while no any `leafs` matching.
-   */
-  defaultLeaf?: (props: JsxSerializeLeafProps) => JSX.Element;
-  elements?: ((props: JsxSerializeElementProps) => JSX.Element | null | undefined)[];
-  leafs?: ((props: JsxSerializeLeafProps) => JSX.Element)[];
-}
-
-export function createJsxSerializer(options: CreateJsxSerializerOptioons) {
-  const {
-    defaultElement: defaultSerializeElement = ({ children }) => <div>{children}</div>,
-    defaultLeaf: defaultSerializeLeaf = ({ children }) => <span>{children}</span>,
-    elements: serializeElements = [],
-    leafs: serializeLeafs = [],
-  } = options;
-
-  const serializeElement = composeRenderElementsBase(defaultSerializeElement, serializeElements);
-  const serializeLeaf = composeRenderLeafsBase(defaultSerializeLeaf, serializeLeafs);
-  const leafStyle: CSSProperties = {
-    whiteSpace: 'pre-wrap',
-  };
-
-  function serializeNode(node: Descendant & WithElementParent): JSX.Element {
-    const { parent } = node;
-    let result: JSX.Element;
-
-    if (!isText(node)) {
-      result = serializeElement({
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        children: serializeNodes(
-          node.children as Descendant[],
-          node as ((QuadratsElement & WithElementParent) | undefined),
-        ),
-        element: {
-          ...(node as unknown as QuadratsElement),
-          parent,
-        },
-      });
-    } else if (node.text) {
-      result = serializeLeaf({
-        leaf: node,
-        children: (
-          <span style={leafStyle}>
-            {node.text
-              .split('\n')
-              .map(t => t || ' ')
-              .join('\n')}
-          </span>
-        ),
-      });
-    } else {
-      result = <span>&#65279;</span>;
-    }
-
-    return addKey(result);
-  }
-
-  function serializeNodes(nodes: Descendant[], parent: (QuadratsElement & WithElementParent) | undefined): JSX.Element {
-    return <>{nodes.map(node => serializeNode({ ...node, parent }))}</>;
-  }
-
-  return {
-    serialize: (nodes: Descendant[]) => serializeNodes(nodes, undefined),
-  };
-}

package/jsx-serializer/src/typings.ts

@@ -1,20 +0,0 @@
-import { QuadratsElement } from '@quadrats/core';
-import { WithElementParent } from '@quadrats/core/serializers';
-import {
-  CreateRenderElementOptionsBase,
-  CreateRenderMarkOptionsBase,
-  RenderElementPropsBase,
-  RenderLeafPropsBase,
-  RenderMarkPropsBase,
-} from '@quadrats/react/_internal';
-
-export type JsxSerializeLeafProps = RenderLeafPropsBase;
-
-export type JsxSerializeMarkProps<M> = RenderMarkPropsBase<M>;
-
-export type JsxSerializeElementProps<E extends QuadratsElement = QuadratsElement>
-  = RenderElementPropsBase<E & WithElementParent>;
-
-export type CreateJsxSerializeMarkOptions<M> = CreateRenderMarkOptionsBase<M, JsxSerializeMarkProps<M>>;
-
-export type CreateJsxSerializeElementOptions<P extends JsxSerializeElementProps> = CreateRenderElementOptionsBase<P>;

package/jsx-serializer/tsconfig.build.json

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

package/line-break/jsx-serializer/src/createJsxSerializeLineBreak.ts

@@ -1,13 +0,0 @@
-/* eslint-disable max-len */
-import { createJsxSerializeElement, CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
-import { JsxSerializeLineBreakElementProps } from './typings';
-import { defaultRenderLineBreakElement } from './defaultRenderLineBreakElement';
-import { LINE_BREAK_TYPE } from '@quadrats/core';
-
-export type CreateJsxSerializeLineBreakOptions = Partial<CreateJsxSerializeElementOptions<JsxSerializeLineBreakElementProps>>;
-
-export function createJsxSerializeLineBreak(options: CreateJsxSerializeLineBreakOptions = {}) {
-  const { type = LINE_BREAK_TYPE, render = defaultRenderLineBreakElement } = options;
-
-  return createJsxSerializeElement({ type, render });
-}

package/line-break/jsx-serializer/src/defaultRenderLineBreakElement.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export const defaultRenderLineBreakElement = () => (
-  <span style={{ userSelect: 'none' }} contentEditable={false}>
-    <br />
-  </span>
-);

package/line-break/jsx-serializer/src/typings.ts

@@ -1,4 +0,0 @@
-import { LineBreakElement } from '@quadrats/core';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-
-export type JsxSerializeLineBreakElementProps = JsxSerializeElementProps<LineBreakElement>;

package/line-break/jsx-serializer/tsconfig.build.json

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

package/line-break/src/commonBreak.ts

@@ -1,32 +0,0 @@
-import { createOnKeyDownBreak } from './createOnKeyDownBreak';
-import { ExitBreakRule, SoftBreakRule } from './typings';
-
-export const COMMON_EXIT_BREAK_ON_BEFORE_HOTKEY = 'mod+enter';
-export const COMMON_EXIT_BREAK_ON_AFTER_HOTKEY = 'mod+shift+enter';
-export const COMMON_EXIT_BREAK_ON_BEFORE_RULE: ExitBreakRule = {
-  hotkey: COMMON_EXIT_BREAK_ON_BEFORE_HOTKEY,
-};
-export const COMMON_EXIT_BREAK_ON_AFTER_RULE: ExitBreakRule = {
-  hotkey: COMMON_EXIT_BREAK_ON_AFTER_HOTKEY,
-  before: true,
-};
-export const COMMON_EXIT_BREAK_RULES = [COMMON_EXIT_BREAK_ON_AFTER_RULE, COMMON_EXIT_BREAK_ON_BEFORE_RULE];
-
-export const COMMON_SOFT_BREAK_HOTKEY = 'shift+enter';
-export const COMMON_SOFT_BREAK_RULE: SoftBreakRule = {
-  hotkey: COMMON_SOFT_BREAK_HOTKEY,
-};
-
-/**
- * Common behavior of exit.
- *
- * Using `shift+enter` for soft break and `mod+enter` for exit break.
- */
-export const COMMON_ON_KEY_DOWN_BREAK = createOnKeyDownBreak({
-  exitBreak: {
-    rules: COMMON_EXIT_BREAK_RULES,
-  },
-  softBreak: {
-    rules: [COMMON_SOFT_BREAK_RULE],
-  },
-});

package/line-break/src/createOnKeyDownBreak.ts

@@ -1,88 +0,0 @@
-import { KeyboardEvent } from 'react';
-import isHotkey from 'is-hotkey';
-import {
-  Path,
-  Transforms,
-  PARAGRAPH_TYPE,
-  getAboveBlock,
-  isNodeMatch,
-  isSelectionAtBlockEdge,
-} from '@quadrats/core';
-import { Handler, Editor } from '@quadrats/react';
-import { ExitBreakRule, SoftBreakRule } from './typings';
-
-export interface CreateOnKeyDownBreakOptions {
-  exitBreak?: {
-    rules: ExitBreakRule[];
-  };
-  softBreak?: {
-    rules: SoftBreakRule[];
-  };
-}
-
-export function createOnKeyDownBreak({ exitBreak, softBreak }: CreateOnKeyDownBreakOptions): Handler<'onKeyDown'> {
-  return (event: KeyboardEvent, editor: Editor, next) => {
-    const { selection } = editor;
-
-    if (selection) {
-      /**
-       * Take vscode as reference. Won't delete fragment and only use `selection.focus` as the anchor of exit break.
-       */
-      const entry = getAboveBlock(editor, { at: selection.focus });
-
-      if (exitBreak) {
-        const { rules } = exitBreak;
-
-        for (const rule of rules) {
-          const {
-            hotkey,
-            match: { onlyAtEdge = false, ...match } = {},
-            before = false,
-            defaultType = PARAGRAPH_TYPE,
-          } = rule;
-
-          if (
-            isHotkey(hotkey, event as any)
-            && isNodeMatch(entry, match)
-            && (!onlyAtEdge || isSelectionAtBlockEdge(editor))
-          ) {
-            let [, at] = entry;
-
-            if (!before) {
-              at = Path.next(at);
-            }
-
-            event.preventDefault();
-
-            Transforms.insertNodes(
-              editor,
-              { type: defaultType, children: [{ text: '' }] },
-              {
-                at,
-                select: true,
-              },
-            );
-
-            return;
-          }
-        }
-      }
-
-      if (softBreak) {
-        const { rules } = softBreak;
-
-        for (const { hotkey, match } of rules) {
-          if (isHotkey(hotkey, event as any) && (!match || isNodeMatch(entry, match))) {
-            event.preventDefault();
-
-            editor.insertText('\n');
-
-            return;
-          }
-        }
-      }
-    }
-
-    next();
-  };
-}

package/line-break/src/createReactLineBreak.ts

@@ -1,20 +0,0 @@
-import { createLineBreak, CreateLineBreakOptions } from '@quadrats/core';
-import { createRenderElement } from '@quadrats/react';
-import { COMMON_ON_KEY_DOWN_BREAK } from './commonBreak';
-import { defaultRenderLineBreakElement } from './defaultRenderLineBreakElement';
-import { ReactBreak } from './typings';
-
-export type CreateReactLineBreakOptions = CreateLineBreakOptions;
-
-export function createReactLineBreak(options: CreateReactLineBreakOptions = {}): ReactBreak {
-  const core = createLineBreak(options);
-  const { type } = core;
-
-  return {
-    ...core,
-    createHandlers: () => ({
-      onKeyDown: COMMON_ON_KEY_DOWN_BREAK,
-    }),
-    createRenderElement: ({ render = defaultRenderLineBreakElement } = {}) => createRenderElement({ type, render }),
-  };
-}

package/line-break/src/defaultRenderLineBreakElement.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { RenderLineBreakElementProps } from './typings';
-
-export const defaultRenderLineBreakElement = ({ attributes, children }: RenderLineBreakElementProps) => (
-  <span {...attributes} className="qdr-line-break">
-    {children}
-  </span>
-);

package/line-break/src/renderLineBreakElementWithSymbol.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { RenderLineBreakElementProps } from './typings';
-
-export const renderLineBreakElementWithSymbol = ({ attributes, children }: RenderLineBreakElementProps) => (
-  <span {...attributes} className="qdr-line-break qdr-line-break__with-symbol">
-    {children}
-  </span>
-);

package/line-break/src/typings.ts

@@ -1,38 +0,0 @@
-import { JSX } from 'react';
-import { IsNodeMatchOptions, LineBreak, LineBreakElement } from '@quadrats/core';
-import { WithCreateRenderElement, RenderElementProps, WithCreateHandlers } from '@quadrats/react';
-
-export interface ExitBreakRule {
-  hotkey: string;
-  /**
-   * @default ParagraphType
-   */
-  defaultType?: string;
-  match?: IsNodeMatchOptions & {
-    /**
-     * Only match at if selection on edge of block.
-     * @default false
-     */
-    onlyAtEdge?: boolean;
-  };
-  /**
-   * Exit before the selected block if true.
-   * @default false
-   */
-  before?: boolean;
-}
-
-export interface SoftBreakRule {
-  hotkey: string;
-  match?: IsNodeMatchOptions;
-}
-
-export type RenderLineBreakElementProps = RenderElementProps<LineBreakElement>;
-
-export interface ReactLineBreakCreateRenderElementOptions {
-  render?: (props: RenderLineBreakElementProps) => JSX.Element | null | undefined;
-}
-
-export interface ReactBreak extends LineBreak,
-  WithCreateHandlers,
-  WithCreateRenderElement<[ReactLineBreakCreateRenderElementOptions?]> { }

package/line-break/tsconfig.build.json

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

package/link/jsx-serializer/src/createJsxSerializeLink.ts

@@ -1,11 +0,0 @@
-import { LINK_TYPE } from '@quadrats/common/link';
-import { createJsxSerializeElement, CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
-import { JsxSerializeLinkElementProps } from './typings';
-import { defaultRenderLinkElement } from './defaultRenderLinkElement';
-
-export type CreateJsxSerializeLinkOptions = Partial<CreateJsxSerializeElementOptions<JsxSerializeLinkElementProps>>;
-
-export function createJsxSerializeLink(options: CreateJsxSerializeLinkOptions = {}) {
-  const { type = LINK_TYPE, render = defaultRenderLinkElement } = options;
-  return createJsxSerializeElement({ type, render });
-}

package/link/jsx-serializer/src/defaultRenderLinkElement.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { JsxSerializeLinkElementProps } from './typings';
-
-export const defaultRenderLinkElement = ({ children, element }: JsxSerializeLinkElementProps) => (
-  <a target="_blank" className="qdr-link" href={element.url}>
-    {children}
-  </a>
-);

package/link/jsx-serializer/src/typings.ts

@@ -1,4 +0,0 @@
-import { LinkElement } from '@quadrats/common/link';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-
-export type JsxSerializeLinkElementProps = JsxSerializeElementProps<LinkElement>;

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

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

package/link/src/createReactLink.ts

@@ -1,49 +0,0 @@
-import { createLink, CreateLinkOptions } from '@quadrats/common/link';
-import { createRenderElement } from '@quadrats/react';
-import { ReactLink } from './typings';
-import { defaultRenderLinkElement } from './defaultRenderLinkElement';
-
-export interface CreateReactLinkOptions extends CreateLinkOptions {
-  /**
-   * If `true`, transform pasted url text to link.
-   *
-   * @default true
-   */
-  pastedUrlToLink?: boolean;
-}
-
-export function createReactLink(options: CreateReactLinkOptions = {}): ReactLink {
-  const { pastedUrlToLink = true } = options;
-  const core = createLink(options);
-  const { type, isUrl } = core;
-
-  return {
-    ...core,
-    createRenderElement: ({ render = defaultRenderLinkElement } = {}) => createRenderElement({ type, render }),
-    with(editor) {
-      const { insertData, insertText } = editor;
-
-      editor.insertData = (data) => {
-        const text = data.getData('text/plain');
-
-        if (text) {
-          if (core.isSelectionInLink(editor)) {
-            insertText(text);
-
-            return;
-          }
-
-          if (pastedUrlToLink && isUrl(text)) {
-            core.upsertLink(editor, text);
-
-            return;
-          }
-        }
-
-        insertData(data);
-      };
-
-      return core.with(editor);
-    },
-  };
-}

package/link/src/defaultRenderLinkElement.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Tooltip } from '@quadrats/react/components';
-import { RenderLinkElementProps } from './typings';
-
-/**
- * Set placement of tooltip to `bottom` to avoid conflicting w/ toolbar.
- */
-export const defaultRenderLinkElement = ({
-  attributes,
-  children,
-  element,
-  placement = 'bottom',
-  target = '_blank',
-}: RenderLinkElementProps & {
-  placement?: 'top' | 'bottom';
-  target?: string;
-}) => {
-  const { url } = element;
-
-  return (
-    <Tooltip placement={placement} popup={url}>
-      <a {...attributes} className="qdr-link" href={url} target={target}>
-        {children}
-      </a>
-    </Tooltip>
-  );
-};

package/link/src/typings.ts

@@ -1,14 +0,0 @@
-import { JSX } from 'react';
-import { Link, LinkElement } from '@quadrats/common/link';
-import { RenderElementProps, ReactWithable, WithCreateRenderElement, Editor } from '@quadrats/react';
-
-export type RenderLinkElementProps = RenderElementProps<LinkElement>;
-
-export interface ReactLinkCreateRenderElementOptions {
-  render?: (props: RenderLinkElementProps) => JSX.Element | null | undefined;
-}
-
-export interface ReactLink
-  extends Omit<Link<Editor>, 'with'>,
-  WithCreateRenderElement<[ReactLinkCreateRenderElementOptions?]>,
-  ReactWithable {}

package/link/toolbar/src/LinkToolbarIcon.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { ToolbarIcon, ToolbarIconProps } from '@quadrats/react/toolbar';
-import { ReactLink } from '@quadrats/react/link';
-import { useLinkTool, UseLinkToolOptions } from './useLinkTool';
-
-export interface LinkToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
-  controller: ReactLink;
-  options?: UseLinkToolOptions;
-}
-
-function LinkToolbarIcon(props: LinkToolbarIconProps) {
-  const { controller, options = {}, ...rest } = props;
-  const { active, onClick } = useLinkTool(controller, options);
-
-  return <ToolbarIcon {...rest} active={active} onClick={onClick} />;
-}
-
-export default LinkToolbarIcon;

package/link/toolbar/src/UnlinkToolbarIcon.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { ToolbarIcon, ToolbarIconProps } from '@quadrats/react/toolbar';
-import { ReactLink } from '@quadrats/react/link';
-import { useUnlinkTool } from './useUnlinkTool';
-
-export interface UnlinkToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
-  controller: ReactLink;
-}
-
-function UnlinkToolbarIcon(props: UnlinkToolbarIconProps) {
-  const { controller, ...rest } = props;
-  const { onClick } = useUnlinkTool(controller);
-
-  return <ToolbarIcon {...rest} onClick={onClick} />;
-}
-
-export default UnlinkToolbarIcon;

package/link/toolbar/src/index.ts

@@ -1,5 +0,0 @@
-export * from './useLinkTool';
-export * from './useUnlinkTool';
-
-export { LinkToolbarIconProps, default as LinkToolbarIcon } from './LinkToolbarIcon';
-export { UnlinkToolbarIconProps, default as UnlinkToolbarIcon } from './UnlinkToolbarIcon';

package/link/toolbar/src/useLinkTool.ts

@@ -1,31 +0,0 @@
-import { LinkUpsertLinkOptions } from '@quadrats/common/link';
-import { useQuadrats } from '@quadrats/react';
-import { ReactLink } from '@quadrats/react/link';
-import { useStartToolInput } from '@quadrats/react/toolbar';
-
-export type UseLinkToolOptions = LinkUpsertLinkOptions;
-
-export function useLinkTool(controller: ReactLink, options: UseLinkToolOptions = {}) {
-  const editor = useQuadrats();
-  const startToolInput = useStartToolInput();
-
-  return {
-    active: controller.isSelectionInLink(editor),
-    onClick: () => startToolInput({
-      getPlaceholder: locale => locale.editor.link.inputPlaceholder,
-      confirm: (url) => {
-        const urlValidation = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/;
-
-        if (!urlValidation.test(url)) {
-          window.alert('請輸入正確的網址格式');
-
-          return;
-        }
-
-        if (controller.isUrl(url)) {
-          controller.upsertLink(editor, url, options);
-        }
-      },
-    }),
-  };
-}

package/link/toolbar/src/useUnlinkTool.ts

@@ -1,10 +0,0 @@
-import { useSlateStatic } from '@quadrats/react';
-import { ReactLink } from '@quadrats/react/link';
-
-export function useUnlinkTool(controller: ReactLink) {
-  const editor = useSlateStatic();
-
-  return {
-    onClick: () => controller.unwrapLink(editor),
-  };
-}

package/link/toolbar/tsconfig.build.json

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

package/link/tsconfig.build.json

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

package/list/jsx-serializer/src/createJsxSerializeList.ts

@@ -1,21 +0,0 @@
-import { ListTypeKey, LIST_TYPES } from '@quadrats/common/list';
-import { createJsxSerializeElements, CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
-import { defaultRenderListElements } from './defaultRenderListElements';
-import { JsxSerializeListElementProps } from './typings';
-
-export type CreateJsxSerializeListOptions = {
-  [key in ListTypeKey]?: CreateJsxSerializeElementOptions<JsxSerializeListElementProps>;
-};
-
-export function createJsxSerializeList(options: CreateJsxSerializeListOptions = {}) {
-  return createJsxSerializeElements<JsxSerializeListElementProps>(
-    (['ol', 'ul', 'li'] as ListTypeKey[]).map((key) => {
-      const { type = LIST_TYPES[key], render = defaultRenderListElements[key] } = options[key] || {};
-
-      return {
-        type,
-        render,
-      };
-    }),
-  );
-}

package/list/jsx-serializer/src/typings.ts

@@ -1,4 +0,0 @@
-import { ListElement } from '@quadrats/common/list';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-
-export type JsxSerializeListElementProps = JsxSerializeElementProps<ListElement>;

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

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