@quadrats/react 1.1.7 → 1.1.8

package/read-more/src/createReactReadMore.ts

@@ -0,0 +1,16 @@
+import { createReadMore, CreateReadMoreOptions } from '@quadrats/common/read-more';
+import { createRenderElement } from '@quadrats/react';
+import { defaultRenderReadMoreElement } from './defaultRenderReadMoreElement';
+import { ReactReadMore } from './typings';
+
+export type CreateReactReadMoreOptions = CreateReadMoreOptions;
+
+export function createReactReadMore(options: CreateReactReadMoreOptions = {}): ReactReadMore {
+  const core = createReadMore(options);
+  const { type } = core;
+
+  return {
+    ...core,
+    createRenderElement: ({ render = defaultRenderReadMoreElement } = {}) => createRenderElement({ type, render }),
+  };
+}

package/read-more/src/defaultRenderReadMoreElement.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RenderElementPropsBase } from '@quadrats/react/_internal';
+import ReadMore from './components/ReadMore';
+
+export const defaultRenderReadMoreElement = (props: RenderElementPropsBase) => <ReadMore {...props} />;

package/read-more/src/typings.ts

@@ -0,0 +1,12 @@
+import { JSX } from 'react';
+import { ReadMore, ReadMoreElement } from '@quadrats/common/read-more';
+import { WithCreateRenderElement, RenderElementProps, Editor } from '@quadrats/react';
+
+export type RenderReadMoreElementProps = RenderElementProps<ReadMoreElement>;
+
+export interface ReactReadMoreCreateRenderElementOptions {
+  render?: (props: RenderReadMoreElementProps) => JSX.Element | null | undefined;
+}
+
+export interface ReactReadMore extends ReadMore<Editor>
+  , WithCreateRenderElement<[ReactReadMoreCreateRenderElementOptions?]> {}

package/read-more/toolbar/package.json

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

package/read-more/toolbar/src/ReadMoreToolbarIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ToolbarIcon, ToolbarIconProps } from '@quadrats/react/toolbar';
+import { ReactReadMore } from '@quadrats/react/read-more';
+import { useReadMoreTool } from './useReadMoreTool';
+
+export interface ReadMoreToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
+  controller: ReactReadMore;
+}
+
+function ReadMoreToolbarIcon(props: ReadMoreToolbarIconProps) {
+  const { controller, ...rest } = props;
+  const { onClick } = useReadMoreTool(controller);
+
+  return <ToolbarIcon {...rest} onClick={onClick} />;
+}
+
+export default ReadMoreToolbarIcon;

package/read-more/toolbar/src/index.ts

@@ -0,0 +1,3 @@
+export * from './useReadMoreTool';
+
+export { ReadMoreToolbarIconProps, default as ReadMoreToolbarIcon } from './ReadMoreToolbarIcon';

package/read-more/toolbar/src/useReadMoreTool.ts

@@ -0,0 +1,10 @@
+import { useSlateStatic } from '@quadrats/react';
+import { ReactReadMore } from '@quadrats/react/read-more';
+
+export function useReadMoreTool(controller: ReactReadMore) {
+  const editor = useSlateStatic();
+
+  return {
+    onClick: () => controller.insertReadMore(editor),
+  };
+}

package/read-more/toolbar/tsconfig.build.json

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

package/read-more/tsconfig.build.json

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

package/src/core/components/DefaultElement.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { RenderElementProps } from '../typings/renderer';
+
+const DefaultElement = ({ attributes, children }: RenderElementProps) => <div {...attributes}>{children}</div>;
+
+export default DefaultElement;

package/src/core/components/DefaultLeaf.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { RenderLeafProps } from '../typings/renderer';
+
+const DefaultLeaf = ({ attributes, children }: RenderLeafProps) => <span {...attributes}>{children}</span>;
+
+export default DefaultLeaf;

package/src/core/components/Editable.tsx

@@ -0,0 +1,129 @@
+import React, { JSX, CompositionEvent, useCallback, useState } from 'react';
+import { Editable as SlateEditable, useSlate } from 'slate-react';
+import { Element } from 'slate';
+import { EditableProps as SlateEditableProps } from 'slate-react/dist/components/editable';
+import clsx from 'clsx';
+import { BaseRange, Editor, isAncestorEmpty, Path } from '@quadrats/core';
+import { useLocale, useTheme } from '@quadrats/react/configs';
+import DefaultLeaf from './DefaultLeaf';
+import { RenderElementProps, RenderLeafProps } from '../typings/renderer';
+import { CompositionProvider } from '../contexts/composition/CompositionProvider';
+import { PLACEHOLDER_KEY } from '../constants';
+
+export type EditableProps = Omit<SlateEditableProps, 'renderLeaf' | 'renderElement'> & {
+  renderLeaf?: (props: RenderLeafProps) => JSX.Element;
+  renderElement?: (props: RenderElementProps) => JSX.Element;
+};
+
+function Editable(props: EditableProps) {
+  const locale = useLocale();
+  const {
+    className,
+    decorate: decorateProp,
+    onCompositionEnd: onCompositionEndProp,
+    onCompositionStart: onCompositionStartProp,
+    placeholder = locale.editor.placeholder,
+    renderLeaf: renderLeafProp,
+    style,
+    ...slateEditableProps
+  } = props;
+
+  const { props: themeProps } = useTheme();
+  const editor = useSlate();
+  const isEditorEmpty = isAncestorEmpty(editor);
+  const [placeholderShowable, setPlaceholderShowable] = useState(isEditorEmpty);
+  const [compositionType, setCompositionType] = useState<string>('');
+  const [compositionPath, setCompositionPath] = useState<Path>([]);
+
+  const decorate: NonNullable<EditableProps['decorate']> = useCallback(
+    (entry) => {
+      const result = decorateProp ? decorateProp(entry) : [];
+      const [node] = entry;
+
+      if (isEditorEmpty && Editor.isEditor(node)) {
+        const start = Editor.start(node, []);
+
+        result.push({
+          [PLACEHOLDER_KEY]: true,
+          anchor: start,
+          focus: start,
+        } as BaseRange);
+      }
+
+      return result;
+    },
+    [decorateProp, isEditorEmpty],
+  );
+
+  const onCompositionEnd = useCallback(
+    (event: CompositionEvent<HTMLDivElement>) => {
+      setCompositionType('');
+      setCompositionPath([]);
+      onCompositionEndProp?.(event);
+      setPlaceholderShowable(true);
+    },
+    [onCompositionEndProp],
+  );
+
+  const onCompositionStart = useCallback(
+    (event: CompositionEvent<HTMLDivElement>) => {
+      if (editor.selection) {
+        const [, path] = Editor.node(editor, editor.selection);
+
+        const match = Editor.above(editor, {
+          at: path,
+          match: (n) => Element.isElement(n),
+          mode: 'lowest',
+        });
+
+        if (match) {
+          setCompositionPath(match[1]);
+          setCompositionType(match[0].type);
+        }
+      }
+
+      onCompositionStartProp?.(event);
+
+      if (isEditorEmpty) {
+        setPlaceholderShowable(false);
+      }
+    },
+    [editor, onCompositionStartProp, isEditorEmpty],
+  );
+
+  const renderLeaf = useCallback(
+    (props: RenderLeafProps) => {
+      const children = renderLeafProp ? renderLeafProp(props) : <DefaultLeaf {...props} />;
+
+      if (placeholderShowable && props.leaf[PLACEHOLDER_KEY]) {
+        return (
+          <>
+            <span className="qdr-editable__placeholder" contentEditable={false}>
+              {placeholder}
+            </span>
+            {children}
+          </>
+        );
+      }
+
+      return children;
+    },
+    [renderLeafProp, placeholder, placeholderShowable],
+  );
+
+  return (
+    <CompositionProvider compositionType={compositionType} compositionPath={compositionPath}>
+      <SlateEditable
+        {...slateEditableProps}
+        className={clsx('qdr-editable', themeProps.className, className)}
+        decorate={decorate}
+        onCompositionStart={onCompositionStart}
+        onCompositionEnd={onCompositionEnd}
+        renderLeaf={renderLeaf}
+        style={{ ...themeProps.style, ...style }}
+      />
+    </CompositionProvider>
+  );
+}
+
+export default Editable;

package/src/core/components/Quadrats.tsx

@@ -0,0 +1,40 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { Slate } from 'slate-react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend'; // dnd provider 只能有一個，所以必須放在 root
+import { ConfigsProvider, ConfigsProviderProps } from '@quadrats/react/configs';
+import { ModalProvider } from '../contexts/modal/ModalProvider';
+import { MessageProvider } from '../contexts/message/MessageProvider';
+import { ConfirmModalConfig } from '../contexts/modal/modal';
+import { Descendant } from '..';
+
+export type QuadratsProps = Pick<Parameters<typeof Slate>[0], 'children' | 'editor'> &
+  Omit<ConfigsProviderProps, 'children'> & {
+    onChange: (value: Descendant[]) => void;
+    value: Descendant[];
+    needConfirmModal?: ConfirmModalConfig | null;
+    setNeedConfirmModal?: Dispatch<SetStateAction<ConfirmModalConfig | null>>;
+  };
+
+/**
+ * Provide configs of quadrats and control the value.
+ */
+function Quadrats(props: QuadratsProps) {
+  const { children, editor, locale, onChange, theme, value, needConfirmModal, setNeedConfirmModal } = props;
+
+  return (
+    <ConfigsProvider theme={theme} locale={locale}>
+      <DndProvider backend={HTML5Backend}>
+        <MessageProvider>
+          <ModalProvider needConfirmModal={needConfirmModal} setNeedConfirmModal={setNeedConfirmModal}>
+            <Slate editor={editor} onChange={onChange} initialValue={value}>
+              {children}
+            </Slate>
+          </ModalProvider>
+        </MessageProvider>
+      </DndProvider>
+    </ConfigsProvider>
+  );
+}
+
+export default Quadrats;

package/src/core/composeHandlers.ts

@@ -0,0 +1,58 @@
+import { QuadratsReactEditor } from '..';
+import {
+  EventHandlerName,
+  EventHandlers,
+  GetEventByName,
+  Handler,
+} from './typings/handler';
+
+function createEventHandler(
+  editor: QuadratsReactEditor,
+  handlers: Handler<any>[],
+): (event: GetEventByName<any>) => void {
+  const [handler, ...restHandlers] = handlers;
+
+  return event => handler(event, editor, () => {
+    const next = restHandlers.length > 0 ? createEventHandler(editor, restHandlers) : () => {};
+
+    next(event);
+  });
+}
+
+/**
+ * To compose sequential `event handlers` to single for each event types.
+ */
+export function composeHandlers<H extends EventHandlerName>(
+  handlersList: {
+    [HH in H]?: Handler<HH>;
+  }[],
+): (editor: QuadratsReactEditor) => EventHandlers {
+  const handlersListRecord = handlersList.reduce(
+    (acc, handlers) => {
+      Object.entries(handlers).forEach(([key, value]) => {
+        const name = key as H;
+        const handler = value as Handler<H>;
+        const origin = acc[name] as Handler<H>[] | undefined;
+
+        if (origin) {
+          origin.push(handler);
+        } else {
+          acc[name] = [handler];
+        }
+      });
+
+      return acc;
+    },
+    {} as {
+      [HH in H]?: Handler<HH>[];
+    },
+  );
+
+  const handlersEntries = Object.entries(handlersListRecord) as [H, Handler<any>[]][];
+
+  return editor => handlersEntries.reduce((acc, [name, handlers]) => {
+    acc[name] = createEventHandler(editor, handlers);
+
+    return acc;
+  }, {} as EventHandlers);
+}

package/src/core/composeRenderElements.tsx

@@ -0,0 +1,13 @@
+import React, { JSX } from 'react';
+import { composeRenderElementsBase } from '@quadrats/react/_internal';
+import { RenderElementProps } from './typings/renderer';
+import DefaultElement from './components/DefaultElement';
+
+/**
+ * To compose sequential `renderElement`s to single.
+ */
+export function composeRenderElements(
+  renderElements: ((props: RenderElementProps) => JSX.Element | null | undefined)[],
+) {
+  return composeRenderElementsBase(props => <DefaultElement {...props} />, renderElements);
+}

package/src/core/composeRenderLeafs.tsx

@@ -0,0 +1,11 @@
+import React, { JSX } from 'react';
+import { composeRenderLeafsBase } from '@quadrats/react/_internal';
+import { RenderLeafProps } from './typings/renderer';
+import DefaultLeaf from './components/DefaultLeaf';
+
+/**
+ * To compose sequential `renderLeaf`s or `renderMark`s to single.
+ */
+export function composeRenderLeafs(renderLeafs: ((props: RenderLeafProps) => JSX.Element)[]) {
+  return composeRenderLeafsBase(props => <DefaultLeaf {...props} />, renderLeafs);
+}

package/src/core/constants.ts

@@ -0,0 +1 @@
+export const PLACEHOLDER_KEY = '__quadrats-placeholder__';

package/src/core/contexts/composition/CompositionProvider.tsx

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import { Path } from '@quadrats/core';
+import { CompositionContext } from './composition';
+
+export interface CompositionProviderProps {
+  compositionType: string;
+  compositionPath: Path;
+  children: ReactNode;
+}
+
+export const CompositionProvider = ({ compositionType, compositionPath, children }: CompositionProviderProps) => {
+  return (
+    <CompositionContext.Provider value={{ compositionType, compositionPath }}>{children}</CompositionContext.Provider>
+  );
+};

package/src/core/contexts/composition/composition.ts

@@ -0,0 +1,16 @@
+import { Path } from '@quadrats/core';
+import { createContext, useContext } from 'react';
+
+export interface CompositionContextValue {
+  compositionType: string;
+  compositionPath: Path;
+}
+
+export const CompositionContext = createContext<CompositionContextValue>({
+  compositionType: '',
+  compositionPath: [],
+});
+
+export function useComposition() {
+  return useContext(CompositionContext);
+}

package/src/core/contexts/message/MessageProvider.tsx

@@ -0,0 +1,46 @@
+import React, { ReactNode, useCallback, useContext } from 'react';
+import { MessageSeverity, Message } from '@quadrats/react/components';
+import { ThemeContext } from '@quadrats/react/configs';
+import { MessageContext } from './message';
+
+export interface MessageProviderProps {
+  children: ReactNode;
+}
+
+export const MessageProvider = ({ children }: MessageProviderProps) => {
+  const { props: themeProps } = useContext(ThemeContext);
+
+  const message = useCallback(
+    ({ type, content, duration }: { type?: MessageSeverity; content: string; duration?: number }) => {
+      switch (type) {
+        case 'info': {
+          Message.info(content, themeProps, { duration });
+          break;
+        }
+
+        case 'error': {
+          Message.error(content, themeProps, { duration });
+          break;
+        }
+
+        case 'warning': {
+          Message.warning(content, themeProps, { duration });
+          break;
+        }
+
+        case 'success': {
+          Message.success(content, themeProps, { duration });
+          break;
+        }
+
+        default: {
+          Message.info(content, themeProps, { duration });
+          break;
+        }
+      }
+    },
+    [themeProps],
+  );
+
+  return <MessageContext.Provider value={{ message }}>{children}</MessageContext.Provider>;
+};

package/src/core/contexts/message/message.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+import { MessageSeverity } from '@quadrats/react/components';
+
+export interface MessageContextValue {
+  message: ({ type, content, duration }: { type?: MessageSeverity; content: string; duration?: number }) => void;
+}
+
+export const MessageContext = createContext<MessageContextValue>({
+  message: () => {},
+});
+
+export function useMessage() {
+  return useContext(MessageContext);
+}