@quadrats/react 1.1.8 → 1.1.10

package/configs/src/ConfigsProvider.tsx

@@ -1,39 +0,0 @@
-import React, { ReactNode, useMemo } from 'react';
-import { Theme } from '@quadrats/theme';
-import { enUS, LocaleDefinition } from '@quadrats/locales';
-import { LocaleContext } from './locale';
-import { resolveThemeToProps, ThemeContext, ThemeContextValue } from './theme';
-
-export interface ConfigsProviderRenderProps {
-  theme: ThemeContextValue;
-  locale: LocaleDefinition;
-}
-
-export interface ConfigsProviderProps {
-  theme?: Theme;
-  locale?: LocaleDefinition;
-  /**
-   * Can pass any react elements or a render props which provide the resolved result.
-   */
-  children: ReactNode | ((props: ConfigsProviderRenderProps) => ReactNode);
-}
-
-function ConfigsProvider({ theme, locale = enUS, children }: ConfigsProviderProps) {
-  const themeContext: ThemeContextValue = useMemo(
-    () => ({
-      props: theme ? resolveThemeToProps(theme) : {},
-      theme,
-    }),
-    [theme],
-  );
-
-  return (
-    <ThemeContext.Provider value={themeContext}>
-      <LocaleContext.Provider value={locale}>
-        {typeof children === 'function' ? children({ theme: themeContext, locale }) : children}
-      </LocaleContext.Provider>
-    </ThemeContext.Provider>
-  );
-}
-
-export default ConfigsProvider;

package/configs/src/locale.ts

@@ -1,8 +0,0 @@
-import { createContext, useContext } from 'react';
-import { enUS, LocaleDefinition } from '@quadrats/locales';
-
-export const LocaleContext = createContext<LocaleDefinition>(enUS);
-
-export function useLocale() {
-  return useContext(LocaleContext);
-}

package/configs/src/theme.ts

@@ -1,50 +0,0 @@
-import { CSSProperties, createContext, useContext } from 'react';
-import { convertCamelToKebab } from '@quadrats/utils';
-import { Theme, ThemeObject } from '@quadrats/theme';
-
-export interface ThemeProps {
-  className?: string;
-  style?: CSSProperties;
-}
-
-export interface ThemeContextValue {
-  props: ThemeProps;
-  theme?: Theme;
-}
-
-export const ThemeContext = createContext<ThemeContextValue>({
-  props: {},
-});
-
-/**
- * Add prefix to theme name.
- */
-export function addThemeNamePrefix(theme?: string) {
-  return `qdr-theme-${theme || 'qdr'}`;
-}
-
-export function resolveThemeObjectToStyle(theme: ThemeObject): CSSProperties {
-  const cssProps: Record<string, string> = {};
-
-  for (const name in theme) {
-    cssProps[`--qdr-${convertCamelToKebab(name)}`] = theme[name as keyof ThemeObject];
-  }
-
-  return cssProps;
-}
-
-export function resolveThemeToProps(theme: Theme): ThemeProps {
-  const props: ThemeProps = {};
-
-  if (typeof theme === 'string') {
-    props.className = addThemeNamePrefix(theme);
-  } else {
-    props.style = resolveThemeObjectToStyle(theme);
-  }
-
-  return props;
-}
-
-export function useTheme() {
-  return useContext(ThemeContext);
-}

package/configs/tsconfig.build.json

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

package/divider/jsx-serializer/src/createJsxSerializeDivider.ts

@@ -1,12 +0,0 @@
-import { DIVIDER_TYPE } from '@quadrats/common/divider';
-import { createJsxSerializeElement, CreateJsxSerializeElementOptions } from '@quadrats/react/jsx-serializer';
-import { JsxSerializeDividerProps } from './typings';
-import { defaultRenderDividerElement } from './defaultRenderDividerElement';
-
-export type CreateJsxSerializeDividerOptions = Partial<CreateJsxSerializeElementOptions<JsxSerializeDividerProps>>;
-
-export function createJsxSerializeDivider(options: CreateJsxSerializeDividerOptions = {}) {
-  const { type = DIVIDER_TYPE, render = defaultRenderDividerElement } = options;
-
-  return createJsxSerializeElement({ type, render });
-}

package/divider/jsx-serializer/src/defaultRenderDividerElement.tsx

@@ -1,3 +0,0 @@
-import React from 'react';
-
-export const defaultRenderDividerElement = () => <div className="qdr-divider" contentEditable={false}><hr /></div>;

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

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

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

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

package/divider/src/createReactDivider.ts

@@ -1,16 +0,0 @@
-import { createDivider, CreateDividerOptions } from '@quadrats/common/divider';
-import { createRenderElement } from '@quadrats/react';
-import { defaultRenderDividerElement } from './defaultRenderDividerElement';
-import { ReactDivider } from './typings';
-
-export type CreateReactDividerOptions = CreateDividerOptions;
-
-export function createReactDivider(options: CreateReactDividerOptions = {}): ReactDivider {
-  const core = createDivider(options);
-  const { type } = core;
-
-  return {
-    ...core,
-    createRenderElement: ({ render = defaultRenderDividerElement } = {}) => createRenderElement({ type, render }),
-  };
-}

package/divider/src/defaultRenderDividerElement.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { RenderDividerElementProps } from './typings';
-
-export const defaultRenderDividerElement = ({ attributes }: RenderDividerElementProps) => (
-  <div {...attributes} className="qdr-divider" contentEditable={false}>
-    <hr />
-  </div>
-);

package/divider/src/typings.ts

@@ -1,13 +0,0 @@
-import { JSX } from 'react';
-import { Divider, DividerElement } from '@quadrats/common/divider';
-import { Editor } from '@quadrats/core';
-import { WithCreateRenderElement, RenderElementProps } from '@quadrats/react';
-
-export type RenderDividerElementProps = RenderElementProps<DividerElement>;
-
-export interface ReactDividerCreateRenderElementOptions {
-  render?: (props: RenderDividerElementProps) => JSX.Element | null | undefined;
-}
-
-export interface ReactDivider
-  extends Divider<Editor>, WithCreateRenderElement<[ReactDividerCreateRenderElementOptions?]> {}

package/divider/toolbar/src/DividerToolbarIcon.tsx

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

package/divider/toolbar/src/index.ts

@@ -1,3 +0,0 @@
-export * from './useDividerTool';
-
-export { DividerToolbarIconProps, default as DividerToolbarIcon } from './DividerToolbarIcon';

package/divider/toolbar/src/useDividerTool.ts

@@ -1,10 +0,0 @@
-import { useSlateStatic } from '@quadrats/react';
-import { ReactDivider } from '@quadrats/react/divider';
-
-export function useDividerTool(controller: ReactDivider) {
-  const editor = useSlateStatic();
-
-  return {
-    onClick: () => controller.insertDivider(editor),
-  };
-}

package/divider/toolbar/tsconfig.build.json

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

package/divider/tsconfig.build.json

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

package/embed/jsx-serializer/facebook/tsconfig.build.json

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

package/embed/jsx-serializer/instagram/tsconfig.build.json

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

package/embed/jsx-serializer/src/createJsxSerializeEmbed.ts

@@ -1,20 +0,0 @@
-import { JSX } from 'react';
-import { EmbedStrategies, EMBED_TYPE } from '@quadrats/common/embed';
-import { createRenderEmbedElementBase } from '@quadrats/react/embed';
-import { createJsxSerializeElement } from '@quadrats/react/jsx-serializer';
-import { JsxSerializeEmbedElementProps } from './typings';
-
-export interface CreateJsxSerializeEmbedOptions<Provider extends string> {
-  type?: string;
-  strategies: EmbedStrategies<Provider>;
-  renderers: Record<Provider, (props: JsxSerializeEmbedElementProps<any, any>) => JSX.Element | null | undefined>;
-}
-
-export function createJsxSerializeEmbed<Provider extends string>(options: CreateJsxSerializeEmbedOptions<Provider>) {
-  const { type = EMBED_TYPE, strategies, renderers } = options;
-
-  return createJsxSerializeElement<JsxSerializeEmbedElementProps<any, any>>({
-    type,
-    render: createRenderEmbedElementBase({ strategies, renderers }),
-  });
-}

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

@@ -1,7 +0,0 @@
-import { EmbedElement } from '@quadrats/common/embed';
-import { WithEmbedRenderData } from '@quadrats/react/embed';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-
-export interface JsxSerializeEmbedElementProps<EmbedData extends Record<string, unknown>, RenderData>
-  extends JsxSerializeElementProps<EmbedElement & EmbedData>,
-  WithEmbedRenderData<RenderData> {}

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

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

package/embed/jsx-serializer/twitter/tsconfig.build.json

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

package/embed/jsx-serializer/vimeo/tsconfig.build.json

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

package/embed/jsx-serializer/youtube/tsconfig.build.json

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

package/embed/renderers/base/src/components/BaseEmbedElement.tsx

@@ -1,107 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Path, Transforms } from '@quadrats/core';
-import { EmbedElement } from '@quadrats/common/embed';
-import { AlignLeft, AlignCenter, AlignRight, Edit, Trash } from '@quadrats/icons';
-import { QuadratsReactEditor, ReactEditor, useSlateStatic, useModal } from '@quadrats/react';
-import { InlineToolbar } from '@quadrats/react/toolbar';
-
-export interface BaseEmbedElementWithoutToolbarProps {
-  element: EmbedElement;
-  children: ReactNode;
-}
-
-export interface BaseEmbedElementProps {
-  element: EmbedElement;
-  haveAlignConfig?: boolean;
-  type?: 'input' | 'textarea';
-  placeholder?: string;
-  hint?: string;
-  confirmText?: string;
-  onConfirm?: (editor: QuadratsReactEditor, path: Path, value: string) => void;
-  children: (toolbarElement: ReactNode) => ReactNode;
-}
-
-export const BaseEmbedElementWithoutToolbar = ({ children }: BaseEmbedElementWithoutToolbarProps) => {
-  return <div className="qdr-embed">{children}</div>;
-};
-
-const BaseEmbedElement = ({
-  element,
-  haveAlignConfig = true,
-  type = 'input',
-  placeholder,
-  hint,
-  confirmText,
-  onConfirm,
-  children,
-}: BaseEmbedElementProps) => {
-  const { setEmbedModalConfig } = useModal();
-  const editor = useSlateStatic();
-  const path = ReactEditor.findPath(editor, element);
-
-  return (
-    <div className="qdr-embed">
-      {children(
-        <InlineToolbar
-          className="qdr-embed__inline-toolbar"
-          iconGroups={[
-            haveAlignConfig
-              ? {
-                  enabledBgColor: true,
-                  icons: [
-                    {
-                      icon: AlignLeft,
-                      onClick: () => {
-                        Transforms.setNodes(editor, { align: 'left' } as EmbedElement, { at: path });
-                      },
-                      active: element.align === 'left' || !element.align,
-                    },
-                    {
-                      icon: AlignCenter,
-                      onClick: () => {
-                        Transforms.setNodes(editor, { align: 'center' } as EmbedElement, { at: path });
-                      },
-                      active: element.align === 'center',
-                    },
-                    {
-                      icon: AlignRight,
-                      onClick: () => {
-                        Transforms.setNodes(editor, { align: 'right' } as EmbedElement, { at: path });
-                      },
-                      active: element.align === 'right',
-                    },
-                  ],
-                }
-              : { icons: [] },
-            {
-              icons: [
-                {
-                  icon: Edit,
-                  onClick: () => {
-                    setEmbedModalConfig({
-                      placeholder: placeholder || '',
-                      confirmText: confirmText || '',
-                      hint: hint || '',
-                      type,
-                      onConfirm: (value) => {
-                        onConfirm?.(editor, path, value);
-                      },
-                    });
-                  },
-                },
-                {
-                  icon: Trash,
-                  onClick: () => {
-                    Transforms.removeNodes(editor, { at: path });
-                  },
-                },
-              ],
-            },
-          ]}
-        />,
-      )}
-    </div>
-  );
-};
-
-export default BaseEmbedElement;

package/embed/renderers/base/src/index.ts

@@ -1,5 +0,0 @@
-export {
-  BaseEmbedElementProps,
-  default as BaseEmbedElement,
-  BaseEmbedElementWithoutToolbar,
-} from './components/BaseEmbedElement';

package/embed/renderers/base/tsconfig.build.json

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

package/embed/renderers/facebook/src/components/Facebook.tsx

@@ -1,56 +0,0 @@
-import React, { ReactNode } from 'react';
-import clsx from 'clsx';
-import { FacebookDeserializedEmbedData, FacebookEmbedElement } from '@quadrats/common/embed/strategies/facebook';
-import { RenderElementProps } from '@quadrats/react';
-
-export interface FacebookProps {
-  attributes?: RenderElementProps['attributes'];
-  children?: any;
-  data: FacebookDeserializedEmbedData;
-  element: FacebookEmbedElement;
-  toolbarElement: ReactNode;
-}
-
-function Facebook({
-  attributes,
-  children,
-  data: { url, width, height },
-  element: { align },
-  toolbarElement,
-}: FacebookProps) {
-  return (
-    <div
-      {...attributes}
-      className={clsx('qdr-embed-facebook', {
-        'qdr-embed-facebook--left': align === 'left' || !align,
-        'qdr-embed-facebook--center': align === 'center',
-        'qdr-embed-facebook--right': align === 'right',
-      })}
-      contentEditable={false}
-    >
-      <div className="qdr-embed__inline-toolbar-wrapper" style={{ width, height }}>
-        {toolbarElement}
-        <iframe
-          title={url}
-          src={url}
-          width={width}
-          height={height}
-          style={{
-            border: 0,
-            overflow: 'hidden',
-          }}
-          scrolling="no"
-          frameBorder="0"
-          //  eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          //  @ts-ignore
-          //  eslint-disable-next-line react/no-unknown-property
-          allowtransparency="true"
-          allow="encrypted-media"
-        />
-        {attributes ? children : undefined}
-      </div>
-    </div>
-  );
-}
-
-export default Facebook;

package/embed/renderers/facebook/src/defaultRenderFacebookEmbedElement.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import { Transforms } from '@quadrats/core';
-import { useLocale } from '@quadrats/react';
-import { Icon } from '@quadrats/react/components';
-import { Facebook as FacebookIcon } from '@quadrats/icons';
-import Facebook, { FacebookProps } from './components/Facebook';
-import { FacebookEmbedElement, FacebookEmbedStrategy } from '@quadrats/common/embed/strategies/facebook';
-import { BaseEmbedElement, BaseEmbedElementWithoutToolbar } from '@quadrats/react/embed/renderers/base';
-
-export const defaultRenderFacebookEmbedElement = (props: FacebookProps) => {
-  const { element } = props;
-  const locale = useLocale();
-
-  return (
-    <BaseEmbedElement
-      element={element}
-      placeholder={locale.editor.facebook.inputPlaceholder}
-      hint={locale.editor.facebook.hint}
-      confirmText={locale.editor.facebook.confirmText}
-      type="textarea"
-      onConfirm={(editor, path, value) => {
-        Transforms.setNodes(
-          editor,
-          {
-            ...props.element,
-            url: FacebookEmbedStrategy.serialize(value)?.url,
-            width: FacebookEmbedStrategy.serialize(value)?.width,
-            height: FacebookEmbedStrategy.serialize(value)?.height,
-            embedType: FacebookEmbedStrategy.serialize(value)?.embedType,
-          } as FacebookEmbedElement,
-          { at: path },
-        );
-      }}
-    >
-      {toolbarElement => <Facebook {...props} toolbarElement={toolbarElement} />}
-    </BaseEmbedElement>
-  );
-};
-
-export const defaultRenderFacebookEmbedPlaceholderElement = () => {
-  const locale = useLocale();
-
-  return (
-    <div className="qdr-embed-facebook__placeholder">
-      <div className="qdr-embed-facebook__placeholder__title-wrapper">
-        <Icon className="qdr-embed__placeholder__icon" icon={FacebookIcon} width={48} height={48} />
-        <p className="qdr-embed__placeholder__title">{locale.editor.facebook.blockPlaceholder}</p>
-      </div>
-      <div className="qdr-embed-facebook__placeholder__line-wrapper">
-        <div className="qdr-embed__placeholder__line" style={{ marginRight: 'var(--qdr-spacing-28)' }} />
-        <div className="qdr-embed__placeholder__line" />
-        <div className="qdr-embed__placeholder__line" style={{ marginRight: 'var(--qdr-spacing-21)' }} />
-      </div>
-      <div className="qdr-embed__placeholder__body" />
-      <div className="qdr-embed-facebook__placeholder__set-wrapper">
-        <div className="qdr-embed-facebook__placeholder__tools-set">
-          <div className="qdr-embed__placeholder__dot" />
-          <div className="qdr-embed__placeholder__line qdr-embed__placeholder__line--shortest" />
-        </div>
-        <div className="qdr-embed-facebook__placeholder__tools-set">
-          <div className="qdr-embed__placeholder__dot" />
-          <div className="qdr-embed__placeholder__line qdr-embed__placeholder__line--shortest" />
-        </div>
-        <div className="qdr-embed-facebook__placeholder__tools-set">
-          <div className="qdr-embed__placeholder__dot" />
-          <div className="qdr-embed__placeholder__line qdr-embed__placeholder__line--shortest" />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const defaultRenderFacebookEmbedJsxSerializer = (props: FacebookProps) => {
-  const { element } = props;
-
-  return (
-    <BaseEmbedElementWithoutToolbar element={element}>
-      <Facebook {...props} />
-    </BaseEmbedElementWithoutToolbar>
-  );
-};

package/embed/renderers/facebook/tsconfig.build.json

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

package/embed/renderers/instagram/src/components/Instagram.tsx

@@ -1,86 +0,0 @@
-import React, { useEffect, ReactNode } from 'react';
-import clsx from 'clsx';
-import { InstagramEmbedElement } from '@quadrats/common/embed/strategies/instagram';
-import { RenderElementProps } from '@quadrats/react';
-import { useLoadInstagramEmbedApi } from '../hooks/useLoadInstagramEmbedApi';
-
-export interface InstagramProps {
-  attributes?: RenderElementProps['attributes'];
-  children?: any;
-  data: string;
-  element: InstagramEmbedElement;
-  toolbarElement: ReactNode;
-}
-
-function Instagram({ attributes, children, data: permalink, element: { align }, toolbarElement }: InstagramProps) {
-  useLoadInstagramEmbedApi(permalink);
-
-  useEffect(() => {
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        mutation.addedNodes.forEach((node) => {
-          if ((node as HTMLElement).tagName === 'IFRAME') {
-            const iframeNode = node as HTMLIFrameElement;
-
-            if (iframeNode.src.includes('instagram.com')) {
-              iframeNode.setAttribute('title', 'Instagram 貼文');
-            }
-          }
-        });
-      });
-    });
-
-    observer.observe(document.body, { childList: true, subtree: true });
-
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
-  return (
-    <div
-      {...attributes}
-      className={clsx('qdr-embed-instagram', {
-        'qdr-embed-instagram--left': align === 'left' || !align,
-        'qdr-embed-instagram--center': align === 'center',
-        'qdr-embed-instagram--right': align === 'right',
-      })}
-      contentEditable={false}
-      style={{
-        display: 'flex',
-        marginBottom: -12,
-      }}
-    >
-      <div
-        className="qdr-embed__inline-toolbar-wrapper"
-        style={{
-          maxWidth: 540,
-          minWidth: 326,
-          width: 'calc(100% - 2px)',
-        }}
-      >
-        {toolbarElement}
-        <blockquote
-          className="instagram-media"
-          data-instgrm-captioned
-          data-instgrm-permalink={permalink}
-          data-instgrm-version="13"
-          style={{
-            background: '#FFF',
-            border: 0,
-            borderRadius: 3,
-            boxShadow: '0 0 1px 0 rgba(0,0,0,0.5), 0 1px 10px 0 rgba(0,0,0,0.15)',
-            margin: 1,
-            maxWidth: 540,
-            minWidth: 326,
-            padding: 0,
-            width: 'calc(100% - 2px)',
-          }}
-        />
-        {attributes ? children : undefined}
-      </div>
-    </div>
-  );
-}
-
-export default Instagram;