@quadrats/react 1.1.7 → 1.1.8

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

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

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

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

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

package/embed/renderers/facebook/package.json

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

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

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

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

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

package/embed/renderers/instagram/package.json

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

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

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

package/embed/renderers/instagram/src/defaultRenderInstagramEmbedElement.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Transforms } from '@quadrats/core';
+import { useLocale } from '@quadrats/react';
+import { Icon } from '@quadrats/react/components';
+import { Instagram as InstagramIcon } from '@quadrats/icons';
+import { InstagramEmbedElement, InstagramEmbedStrategy } from '@quadrats/common/embed/strategies/instagram';
+import Instagram, { InstagramProps } from './components/Instagram';
+import { BaseEmbedElement, BaseEmbedElementWithoutToolbar } from '@quadrats/react/embed/renderers/base';
+
+export const defaultRenderInstagramEmbedElement = (props: InstagramProps) => {
+  const { element } = props;
+  const locale = useLocale();
+
+  return (
+    <BaseEmbedElement
+      element={element}
+      placeholder={locale.editor.instagram.inputPlaceholder}
+      hint={locale.editor.instagram.hint}
+      confirmText={locale.editor.instagram.confirmText}
+      onConfirm={(editor, path, value) => {
+        Transforms.setNodes(
+          editor,
+          { ...props.element, url: InstagramEmbedStrategy.serialize(value)?.url  } as InstagramEmbedElement,
+          { at: path },
+        );
+      }}
+    >
+      {toolbarElement => <Instagram {...props} toolbarElement={toolbarElement} />}
+    </BaseEmbedElement>
+  );
+};
+
+export const defaultRenderInstagramEmbedPlaceholderElement = () => {
+  const locale = useLocale();
+
+  return (
+    <div className="qdr-embed-instagram__placeholder">
+      <div className="qdr-embed-instagram__placeholder__title-wrapper">
+        <Icon className="qdr-embed__placeholder__icon" icon={InstagramIcon} width={48} height={48} />
+        <p className="qdr-embed__placeholder__title">{locale.editor.instagram.blockPlaceholder}</p>
+      </div>
+      <div className="qdr-embed__placeholder__body qdr-embed__placeholder__body--square" />
+      <div className="qdr-embed-instagram__placeholder__set-wrapper">
+        <div className="qdr-embed-instagram__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-instagram__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-instagram__placeholder__tools-set">
+          <div className="qdr-embed__placeholder__dot" />
+          <div className="qdr-embed__placeholder__line qdr-embed__placeholder__line--shortest" />
+        </div>
+      </div>
+      <div className="qdr-embed-instagram__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>
+  );
+};
+
+export const defaultRenderInstagramEmbedJsxSerializer = (props: InstagramProps) => {
+  const { element } = props;
+
+  return (
+    <BaseEmbedElementWithoutToolbar element={element}>
+      <Instagram {...props} />
+    </BaseEmbedElementWithoutToolbar>
+  );
+};

package/embed/renderers/instagram/src/hooks/useLoadInstagramEmbedApi.ts

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+
+function getInstagramEmbedApi():
+| {
+  Embeds: {
+    process: () => void;
+  };
+}
+| undefined {
+  return (window as any).instgrm;
+}
+
+export function useLoadInstagramEmbedApi(permalink: string) {
+  useEffect(() => {
+    if (permalink) {
+      let instgrm = getInstagramEmbedApi();
+
+      if (instgrm) {
+        instgrm.Embeds.process();
+
+        return;
+      }
+
+      const script = document.createElement('script');
+
+      script.src = '//www.instagram.com/embed.js';
+      script.onload = () => {
+        instgrm = getInstagramEmbedApi();
+        instgrm?.Embeds.process();
+
+        script.remove();
+      };
+
+      script.async = true;
+
+      document.body.appendChild(script);
+    }
+  }, [permalink]);
+}

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

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

package/embed/renderers/podcast-apple/package.json

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

package/embed/renderers/podcast-apple/src/components/PodcastApple.tsx

@@ -0,0 +1,37 @@
+import React, { PropsWithChildren, useRef, ReactNode } from 'react';
+import { PodcastAppleEmbedElement } from '@quadrats/common/embed/strategies/podcast-apple';
+import { RenderElementProps } from '@quadrats/react';
+import { composeRefs } from '@quadrats/react/utils';
+
+export interface PodcastAppleProps {
+  attributes?: RenderElementProps['attributes'];
+  data: string;
+  element: PodcastAppleEmbedElement;
+  toolbarElement: ReactNode;
+}
+
+function PodcastApple({ attributes, children, data: src, toolbarElement }: PropsWithChildren<PodcastAppleProps>) {
+  const containerRef = useRef<HTMLElement | null>(null);
+  const composedRef = composeRefs([attributes?.ref, containerRef]);
+
+  return (
+    <div
+      {...attributes}
+      className="qdr-embed-podcast-apple"
+      ref={composedRef}
+      contentEditable={false}
+    >
+      {toolbarElement}
+      <iframe
+        title={src}
+        src={src}
+        frameBorder="0"
+        width="100%"
+        height="450px"
+      />
+      {attributes ? children : undefined}
+    </div>
+  );
+}
+
+export default PodcastApple;

package/embed/renderers/podcast-apple/src/defaultRenderPodcastAppleEmbedElement.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Transforms } from '@quadrats/core';
+import { useLocale } from '@quadrats/react';
+import { Icon } from '@quadrats/react/components';
+import { PodcastApple as PodcastAppleIcon } from '@quadrats/icons';
+import { PodcastAppleEmbedElement, PodcastAppleEmbedStrategy } from '@quadrats/common/embed/strategies/podcast-apple';
+import PodcastApple, { PodcastAppleProps } from './components/PodcastApple';
+import { BaseEmbedElement, BaseEmbedElementWithoutToolbar } from '@quadrats/react/embed/renderers/base';
+
+export const defaultRenderPodcastAppleEmbedElement = (props: PodcastAppleProps) => {
+  const { element } = props;
+  const locale = useLocale();
+
+  return (
+    <BaseEmbedElement
+      element={element}
+      placeholder={locale.editor.podcastApple.inputPlaceholder}
+      hint={locale.editor.podcastApple.hint}
+      confirmText={locale.editor.podcastApple.confirmText}
+      onConfirm={(editor, path, value) => {
+        Transforms.setNodes(
+          editor,
+          { ...props.element,
+            embedType: PodcastAppleEmbedStrategy.serialize(value)?.embedType,
+            language: PodcastAppleEmbedStrategy.serialize(value)?.language,
+            contextId: PodcastAppleEmbedStrategy.serialize(value)?.contextId,
+          } as PodcastAppleEmbedElement,
+          { at: path },
+        );
+      }}
+    >
+      {toolbarElement => <PodcastApple {...props} toolbarElement={toolbarElement} />}
+    </BaseEmbedElement>
+  );
+};
+
+export const defaultRenderPodcastAppleEmbedPlaceholderElement = () => {
+  const locale = useLocale();
+
+  return (
+    <div className="qdr-embed-podcast-apple__placeholder">
+      <Icon className="qdr-embed__placeholder__icon" icon={PodcastAppleIcon} width={24} height={24} />
+      <div className="qdr-embed-podcast-apple__placeholder__wrapper">
+        <div style={{ width: 120 }} className="qdr-embed__placeholder__body qdr-embed__placeholder__body--square" />
+        <div className="qdr-embed-podcast-apple__placeholder__content-wrapper">
+          <div className="qdr-embed-podcast-apple__placeholder__title-wrapper">
+            <p className="qdr-embed__placeholder__title">{locale.editor.podcastApple.blockPlaceholder}</p>
+            <div className="qdr-embed__placeholder__line" style={{ marginRight: 'var(--qdr-spacing-18)' }} />
+            <div className="qdr-embed__placeholder__line" style={{ marginRight: 'var(--qdr-spacing-24)' }} />
+          </div>
+          <div className="qdr-embed-podcast-apple__placeholder__blocks-wrapper">
+            <div className="qdr-embed__placeholder__block" />
+            <div className="qdr-embed__placeholder__block" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const defaultRenderPodcastAppleEmbedJsxSerializer = (props: PodcastAppleProps) => {
+  const { element } = props;
+
+  return (
+    <BaseEmbedElementWithoutToolbar element={element}>
+      <PodcastApple {...props} />
+    </BaseEmbedElementWithoutToolbar>
+  );
+};

package/embed/renderers/podcast-apple/tsconfig.build.json

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

package/embed/renderers/spotify/package.json

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