@quadrats/react 1.1.8 → 1.1.9

package/_internal/src/renderer/composeRenderElementsBase.ts

@@ -1,19 +0,0 @@
-import { JSX } from 'react';
-import { RenderElementPropsBase } from './typings';
-
-export function composeRenderElementsBase<P extends RenderElementPropsBase>(
-  renderDefault: (props: P) => JSX.Element,
-  renderElements: ((props: P) => JSX.Element | null | undefined)[],
-): (props: P) => JSX.Element {
-  return (props) => {
-    for (const renderElement of renderElements) {
-      const element = renderElement(props);
-
-      if (element) {
-        return element;
-      }
-    }
-
-    return renderDefault(props);
-  };
-}

package/_internal/src/renderer/composeRenderLeafsBase.ts

@@ -1,17 +0,0 @@
-import { JSX } from 'react';
-import { RenderLeafPropsBase } from './typings';
-
-export function composeRenderLeafsBase<P extends RenderLeafPropsBase>(
-  renderDefault: (props: P) => JSX.Element,
-  renderLeafs: ((props: P) => JSX.Element)[],
-): (props: P) => JSX.Element {
-  return (props) => {
-    props = { ...props };
-
-    renderLeafs.forEach((renderLeaf) => {
-      props.children = renderLeaf(props);
-    });
-
-    return renderDefault(props);
-  };
-}

package/_internal/src/renderer/createRenderElementBase.ts

@@ -1,14 +0,0 @@
-import { JSX } from 'react';
-import { QuadratsElement } from '@quadrats/core';
-import { CreateRenderElementOptionsBase, RenderElementPropsBase } from './typings';
-
-export function createRenderElementBase<P extends RenderElementPropsBase, RP extends RenderElementPropsBase>({
-  type,
-  render,
-}: CreateRenderElementOptionsBase<P>): (props: RP) => JSX.Element | null | undefined {
-  return (props) => {
-    if ((props.element as QuadratsElement).type === type) {
-      return render((props as any) as P);
-    }
-  };
-}

package/_internal/src/renderer/createRenderElementsBase.ts

@@ -1,15 +0,0 @@
-import { JSX } from 'react';
-import { QuadratsElement } from '@quadrats/core';
-import { CreateRenderElementOptionsBase, RenderElementPropsBase } from './typings';
-
-export function createRenderElementsBase<P extends RenderElementPropsBase, RP extends RenderElementPropsBase>(
-  options: CreateRenderElementOptionsBase<P>[],
-): (props: RP) => JSX.Element | null | undefined {
-  return (props) => {
-    for (const { type, render } of options) {
-      if ((props.element as QuadratsElement).type === type) {
-        return render((props as any) as P);
-      }
-    }
-  };
-}

package/_internal/src/renderer/createRenderMarkBase.ts

@@ -1,19 +0,0 @@
-import { JSX } from 'react';
-import { CreateRenderMarkOptionsBase, RenderLeafPropsBase, RenderMarkPropsBase } from './typings';
-
-export function createRenderMarkBase<M, P extends RenderMarkPropsBase<M>>(
-  options: CreateRenderMarkOptionsBase<M, P>,
-): (props: Omit<P, Exclude<keyof RenderMarkPropsBase<M>, keyof RenderLeafPropsBase>>) => JSX.Element {
-  const { type, render } = options;
-
-  return (props) => {
-    const { children, leaf } = props;
-    const mark = (leaf as any)[type] as M | undefined;
-
-    if (mark != null && leaf.text) {
-      return render({ ...props, mark } as P);
-    }
-
-    return children;
-  };
-}

package/_internal/src/renderer/typings.ts

@@ -1,30 +0,0 @@
-import { JSX } from 'react';
-import {
-  QuadratsElement,
-  Text,
-  WithElementType,
-  WithMarkType,
-} from '@quadrats/core';
-
-export interface RenderLeafPropsBase {
-  children: any;
-  leaf: Text;
-}
-
-export interface RenderMarkPropsBase<M> extends RenderLeafPropsBase {
-  mark: M;
-}
-
-export interface RenderElementPropsBase<E extends QuadratsElement = QuadratsElement> {
-  children: any;
-  element: E;
-}
-
-export interface CreateRenderMarkOptionsBase<M, P extends RenderMarkPropsBase<M>> extends WithMarkType {
-  render: (props: P) => JSX.Element;
-}
-
-export interface CreateRenderElementOptionsBase<P extends
-RenderElementPropsBase<QuadratsElement>> extends WithElementType {
-  render: (props: P) => JSX.Element | null | undefined;
-}

package/_internal/tsconfig.build.json

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

package/accordion/jsx-serializer/src/createJsxSerializeAccordion.ts

@@ -1,79 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import {
-  WithElementParent,
-} from '@quadrats/core/serializers';
-import {
-  AccordionElement,
-  AccordionTypeKey,
-  AccordionTitleTypeKey,
-  AccordionContentTypeKey,
-  ACCORDION_TYPES,
-} from '@quadrats/common/accordion';
-import {
-  CreateJsxSerializeElementOptions,
-  createJsxSerializeElements,
-  JsxSerializeElementProps,
-} from '@quadrats/react/jsx-serializer';
-import { defaultRenderAccordionElements } from './defaultRenderAccordionElements';
-import {
-  JsxSerializeAccordionElementProps,
-} from './typings';
-
-export type CreateJsxSerializeAccordionOptions = Partial<
-Record<AccordionTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeAccordionElementProps>>> &
-Record<AccordionTitleTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> &
-Record<AccordionContentTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>>
->;
-
-export function createJsxSerializeAccordion(options: CreateJsxSerializeAccordionOptions = {}) {
-  const {
-    accordion = {},
-    accordion_title = {},
-    accordion_content = {},
-  } = options;
-
-  const accordionType = accordion.type || ACCORDION_TYPES.accordion;
-  const titleType = accordion_title.type || ACCORDION_TYPES.accordion_title;
-  const contentType = accordion_content.type || ACCORDION_TYPES.accordion_content;
-
-  const renderAccordion = accordion.render || defaultRenderAccordionElements.accordion;
-  const renderAccordionTitle = accordion_title.render || defaultRenderAccordionElements.accordion_title;
-  const renderAccordionContent = accordion_content.render || defaultRenderAccordionElements.accordion_content;
-
-  return createJsxSerializeElements([
-    {
-      type: accordionType,
-      render: (props) => {
-        const { children } = props;
-        const element = props.element as AccordionElement & WithElementParent;
-
-        return renderAccordion({
-          children,
-          element,
-        });
-      },
-    },
-    {
-      type: titleType,
-      render: (props) => {
-        const { children, element } = props;
-
-        return renderAccordionTitle({
-          children,
-          element,
-        });
-      },
-    },
-    {
-      type: contentType,
-      render: (props) => {
-        const { children, element } = props;
-
-        return renderAccordionContent({
-          children,
-          element,
-        });
-      },
-    },
-  ]);
-}

package/accordion/jsx-serializer/src/defaultRenderAccordionElements.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import {
-  defaultRenderAccordionElements as defaultRenderReactAccordionElements,
-  useAccordion,
-} from '@quadrats/react/accordion';
-import { AccordionJsxSerializeElements } from './typings';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-
-const AccordionContentJsxSerializeElement = ({ children }: JsxSerializeElementProps) => {
-  const { expanded } = useAccordion();
-
-  if (!expanded) return null;
-
-  return <p className="qdr-accordion__content">{children}</p>;
-};
-
-export const defaultRenderAccordionElements: AccordionJsxSerializeElements = {
-  accordion: defaultRenderReactAccordionElements.accordion,
-  accordion_title: ({ children }) => <p className="qdr-accordion__title">{children}</p>,
-  accordion_content: props => <AccordionContentJsxSerializeElement {...props} />,
-};

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

@@ -1,16 +0,0 @@
-import {
-  AccordionElement,
-  AccordionTypeKey,
-  AccordionTitleTypeKey,
-  AccordionContentTypeKey,
-} from '@quadrats/common/accordion';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-
-export type JsxSerializeAccordionElementProps = JsxSerializeElementProps<AccordionElement>;
-
-export type AccordionJsxSerializeElements = Record<
-AccordionTypeKey,
-(props: JsxSerializeAccordionElementProps) => JSX.Element | null | undefined
-> &
-Record<AccordionTitleTypeKey, (props: JsxSerializeElementProps) => JSX.Element | null | undefined> &
-Record<AccordionContentTypeKey, (props: JsxSerializeElementProps) => JSX.Element | null | undefined>;

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

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

package/accordion/src/components/Accordion.tsx

@@ -1,53 +0,0 @@
-import React, { useState } from 'react';
-import clsx from 'clsx';
-import { Icon } from '@quadrats/react/components';
-import { AccordionDown } from '@quadrats/icons';
-import { RenderElementProps } from '@quadrats/react';
-import { AccordionContext } from '../contexts/AccordionContext';
-import { RenderAccordionElementProps } from '../typings';
-
-function Accordion({
-  attributes,
-  children,
-}: {
-  attributes?: RenderElementProps['attributes'];
-  children: RenderElementProps['children'];
-  element: RenderAccordionElementProps['element'];
-}) {
-  const [expanded, setExpanded] = useState<boolean>(true);
-
-  return (
-    <AccordionContext.Provider
-      value={{
-        expanded,
-      }}
-    >
-      <div
-        {...attributes}
-        className="qdr-accordion"
-      >
-        <div
-          className="qdr-accordion__icon-wrapper"
-          contentEditable={false}
-          onClick={() => {
-            setExpanded(status => !status);
-          }}
-        >
-          <Icon
-            className={clsx('qdr-accordion__icon', {
-              'qdr-accordion__icon--expanded': expanded,
-            })}
-            icon={AccordionDown}
-            width={24}
-            height={24}
-          />
-        </div>
-        <div className="qdr-accordion__wrapper">
-          {children}
-        </div>
-      </div>
-    </AccordionContext.Provider>
-  );
-}
-
-export default Accordion;

package/accordion/src/components/AccordionContent.tsx

@@ -1,38 +0,0 @@
-import React, { useMemo } from 'react';
-import { Editor, Path } from '@quadrats/core';
-import { ReactEditor, useQuadrats, useLocale, useComposition } from '@quadrats/react';
-import { RenderElementProps } from '@quadrats/react';
-import { useAccordion } from '../hooks/useAccordion';
-
-function AccordionContent(props: {
-  attributes?: RenderElementProps['attributes'];
-  children: RenderElementProps['children'];
-  element: RenderElementProps['element'];
-}) {
-  const { compositionPath } = useComposition();
-  const { attributes, children, element } = props;
-  const editor = useQuadrats();
-  const path = ReactEditor.findPath(editor, element);
-  const text = Editor.string(editor, path);
-  const isEmpty = !text;
-  const locale = useLocale();
-  const placeholder = locale.editor.accordion.contentPlaceholder;
-  const composing = useMemo(() => Path.equals(compositionPath, path), [compositionPath, path]);
-
-  const { expanded } = useAccordion();
-
-  if (!expanded) return null;
-
-  return (
-    <p {...attributes} className="qdr-accordion__content">
-      {children}
-      {isEmpty && !composing && (
-        <span className="qdr-accordion__content__placeholder" contentEditable={false}>
-          {placeholder}
-        </span>
-      )}
-    </p>
-  );
-}
-
-export default AccordionContent;

package/accordion/src/components/AccordionTitle.tsx

@@ -1,33 +0,0 @@
-import React, { useMemo } from 'react';
-import { Editor, Path } from '@quadrats/core';
-import { ReactEditor, useQuadrats, useLocale, useComposition } from '@quadrats/react';
-import { RenderElementProps } from '@quadrats/react';
-
-function AccordionTitle(props: {
-  attributes?: RenderElementProps['attributes'];
-  children: RenderElementProps['children'];
-  element: RenderElementProps['element'];
-}) {
-  const { compositionPath } = useComposition();
-  const { attributes, children, element } = props;
-  const editor = useQuadrats();
-  const path = ReactEditor.findPath(editor, element);
-  const text = Editor.string(editor, path);
-  const isEmpty = !text;
-  const locale = useLocale();
-  const placeholder = locale.editor.accordion.titlePlaceholder;
-  const composing = useMemo(() => Path.equals(compositionPath, path), [compositionPath, path]);
-
-  return (
-    <p {...attributes} className="qdr-accordion__title">
-      {children}
-      {isEmpty && !composing && (
-        <span className="qdr-accordion__title__placeholder" contentEditable={false}>
-          {placeholder}
-        </span>
-      )}
-    </p>
-  );
-}
-
-export default AccordionTitle;

package/accordion/src/contexts/AccordionContext.ts

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-import { AccordionContextType } from '../typings';
-
-export const AccordionContext = createContext<AccordionContextType>({ expanded: true });

package/accordion/src/createReactAccordion.ts

@@ -1,194 +0,0 @@
-import { AccordionElement, createAccordion, CreateAccordionOptions } from '@quadrats/common/accordion';
-import { createRenderElements, RenderElementProps } from '@quadrats/react';
-import { Editor, getParent, PARAGRAPH_TYPE, Path, QuadratsElement, Transforms, Element, Node } from '@quadrats/core';
-import { defaultRenderAccordionElements } from './defaultRenderAccordionElements';
-import { ReactAccordion } from './typings';
-
-export type CreateReactAccordionOptions = CreateAccordionOptions;
-
-export function createReactAccordion(options: CreateReactAccordionOptions = {}): ReactAccordion {
-  const core = createAccordion(options);
-  const { types } = core;
-
-  return {
-    ...core,
-    createHandlers: () => ({
-      onKeyDown(event, editor, next) {
-        if (event.nativeEvent.isComposing) {
-          return;
-        }
-
-        if (core.isSelectionInAccordionTitle(editor)) {
-          const blockEntry = editor.above({
-            match: (node) => (node as QuadratsElement).type === types.accordion_title,
-          });
-
-          if (!blockEntry) return;
-
-          const [, currentPath] = blockEntry;
-
-          const parentEntry = getParent(editor, currentPath);
-
-          if (!parentEntry) return;
-
-          const [, parentPath] = parentEntry;
-
-          const isFirst = Path.equals(currentPath, parentPath.concat(0));
-
-          if (isFirst) {
-            if (event.key === 'Backspace') {
-              const text = Editor.string(editor, currentPath);
-
-              if (!text) {
-                event.preventDefault();
-                Transforms.removeNodes(editor, { at: parentPath });
-
-                return;
-              }
-
-              if (editor.selection && editor.selection.anchor.offset === 0) {
-                event.preventDefault();
-
-                return;
-              }
-            }
-
-            if (editor.selection && event.key === 'Enter') {
-              event.preventDefault();
-
-              Transforms.select(editor, Editor.end(editor, Path.next(currentPath)));
-
-              return;
-            }
-          }
-
-          return;
-        }
-
-        if (core.isSelectionInAccordionContent(editor)) {
-          const blockEntry = editor.above({
-            match: (node) => (node as QuadratsElement).type === types.accordion_content,
-          });
-
-          if (!blockEntry) return;
-
-          const [, blockPath] = blockEntry;
-
-          const prePath = Path.previous(blockPath);
-          const [preNode] = Editor.node(editor, prePath);
-
-          const text = Editor.string(editor, blockPath);
-
-          if (event.key === 'Backspace') {
-            if (Element.isElement(preNode)) {
-              const preType = preNode.type as string;
-
-              if (preType === types.accordion_title) {
-                const firstTextEntry = Node.first(editor, blockPath);
-                const [, firstTextPath] = firstTextEntry;
-
-                if (
-                  editor.selection &&
-                  Path.equals(editor.selection.anchor.path, firstTextPath) &&
-                  editor.selection.anchor.offset === 0
-                ) {
-                  event.preventDefault();
-
-                  Transforms.select(editor, Editor.end(editor, prePath));
-
-                  return;
-                }
-              }
-
-              return;
-            }
-
-            return;
-          }
-
-          if (!text && editor.selection && event.key === 'Enter') {
-            const parentEntry = getParent(editor, blockPath);
-
-            if (!parentEntry) return;
-
-            const [, parentPath] = parentEntry;
-
-            event.preventDefault();
-            const moveto = parentPath.slice();
-
-            if (Element.isElement(preNode)) {
-              const preType = preNode.type as string;
-
-              if (preType === types.accordion_content) {
-                Transforms.removeNodes(editor, { at: editor.selection });
-              }
-            }
-
-            Transforms.insertNodes(
-              editor,
-              { type: PARAGRAPH_TYPE, children: [{ text: '' }] },
-              {
-                at: editor.selection,
-                select: true,
-              },
-            );
-
-            moveto[parentPath.length - 1] += 1;
-            Transforms.moveNodes(editor, {
-              at: editor.selection,
-              to: moveto,
-            });
-
-            return;
-          }
-        }
-
-        next();
-      },
-    }),
-    createRenderElement: (options = {}) => {
-      const renderAccordion = options.accordion || defaultRenderAccordionElements.accordion;
-      const renderAccordionTitle = options.accordion_title || defaultRenderAccordionElements.accordion_title;
-      const renderAccordionContent = options.accordion_content || defaultRenderAccordionElements.accordion_content;
-
-      return createRenderElements([
-        {
-          type: types.accordion,
-          render: (props) => {
-            const { attributes, children, element } = props as RenderElementProps<AccordionElement>;
-
-            return renderAccordion({
-              attributes,
-              element,
-              children,
-            });
-          },
-        },
-        {
-          type: types.accordion_title,
-          render: (props) => {
-            const { attributes, children, element } = props as RenderElementProps;
-
-            return renderAccordionTitle({
-              attributes,
-              element,
-              children,
-            });
-          },
-        },
-        {
-          type: types.accordion_content,
-          render: (props) => {
-            const { attributes, children, element } = props as RenderElementProps;
-
-            return renderAccordionContent({
-              attributes,
-              element,
-              children,
-            });
-          },
-        },
-      ]);
-    },
-  };
-}

package/accordion/src/defaultRenderAccordionElements.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import Accordion from './components/Accordion';
-import AccordionTitle from './components/AccordionTitle';
-import AccordionContent from './components/AccordionContent';
-import { AccordionRenderElements } from './typings';
-
-export const defaultRenderAccordionElements: AccordionRenderElements = {
-  accordion: props => <Accordion {...props} />,
-  accordion_title: props => <AccordionTitle {...props} />,
-  accordion_content: props => <AccordionContent {...props} />,
-};

package/accordion/src/hooks/useAccordion.ts

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

package/accordion/src/typings.ts

@@ -1,41 +0,0 @@
-import { Editor } from '@quadrats/core';
-import {
-  Accordion,
-  AccordionElement,
-  AccordionTypeKey,
-  AccordionTitleTypeKey,
-  AccordionContentTypeKey,
-} from '@quadrats/common/accordion';
-import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps } from '@quadrats/react';
-
-export type AccordionContextType = {
-  expanded: boolean;
-};
-
-export type RenderAccordionElementProps = RenderElementProps<AccordionElement>;
-
-export type AccordionRenderElements = Record<
-AccordionTypeKey,
-(props: {
-  attributes?: RenderElementProps['attributes'];
-  children: RenderElementProps['children'];
-  element: RenderAccordionElementProps['element'];
-}) => JSX.Element | null | undefined
-> &
-Record<AccordionTitleTypeKey, (props: {
-  attributes?: RenderElementProps['attributes'];
-  children: RenderElementProps['children'];
-  element: RenderElementProps['element'];
-}) => JSX.Element | null | undefined> &
-Record<AccordionContentTypeKey, (props: {
-  attributes?: RenderElementProps['attributes'];
-  children: RenderElementProps['children'];
-  element: RenderElementProps['element'];
-}) => JSX.Element | null | undefined>;
-
-export type ReactAccordionCreateRenderElementOptions = {
-  [K in AccordionTypeKey | AccordionTitleTypeKey | AccordionContentTypeKey]?: AccordionRenderElements[K];
-};
-
-export interface ReactAccordion
-  extends Accordion<Editor>, WithCreateHandlers, WithCreateRenderElement<[ReactAccordionCreateRenderElementOptions?]> {}

package/accordion/toolbar/src/AccordionToolbarIcon.tsx

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

package/accordion/toolbar/src/index.ts

@@ -1,3 +0,0 @@
-export * from './useAccordionTool';
-
-export { AccordionToolbarIconProps, default as AccordionToolbarIcon } from './AccordionToolbarIcon';

package/accordion/toolbar/src/useAccordionTool.ts

@@ -1,10 +0,0 @@
-import { useSlateStatic } from '@quadrats/react';
-import { ReactAccordion } from '@quadrats/react/accordion';
-
-export function useAccordionTool(controller: ReactAccordion) {
-  const editor = useSlateStatic();
-
-  return {
-    onClick: () => controller.insertAccordion(editor),
-  };
-}