@soul-refiner/design-system 0.1.38 → 0.1.39

package/src/components/editor/plugins/image.tsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import {
-  Box,
-  Caption,
-  CaptionTextarea,
-  Image,
-  PlateElement,
-  PlateElementProps,
-  Resizable,
-  TImageElement,
-  useMediaState,
-  Value,
-} from '@udecode/plate';
-import { useReadOnly } from 'slate-react';
-
-const align = 'center';
-
-export const ImageElement = ({
-  ...props
-}: PlateElementProps<Value, TImageElement>) => {
-  const { children, nodeProps } = props;
-
-  const readOnly = useReadOnly();
-
-  useMediaState();
-
-  return (
-    <PlateElement {...props}>
-      <Figure className="group" contentEditable={false}>
-        <Resizable
-          style={{
-            alignItems: 'center',
-            width: '100%',
-            maxWidth: '100%',
-            marginLeft: 'auto',
-            marginRight: 'auto',
-          }}
-          options={{
-            renderHandleLeft: (htmlProps) => <Box {...htmlProps} />,
-            renderHandleRight: (htmlProps) => <Box {...htmlProps} />,
-            align,
-            readOnly,
-          }}
-        >
-          <Image {...nodeProps} />
-        </Resizable>
-        <Caption className="HERE">
-          <Textarea
-            $readOnly={readOnly}
-            placeholder="Write a caption..."
-            readOnly={readOnly}
-          />
-        </Caption>
-      </Figure>
-      {children}
-    </PlateElement>
-  );
-};
-
-const Figure = styled.figure`
-  position: relative;
-  margin: 0px;
-  width: 100%;
-
-  img {
-    width: 100%;
-  }
-`;
-
-const Textarea = styled(CaptionTextarea)<{ $readOnly: boolean }>`
-  width: 100%;
-  padding: 8px 16px;
-  box-sizing: border-box;
-  text-align: center;
-  resize: none;
-  outline: none;
-  border: 1px solid
-    ${({ $readOnly }) => ($readOnly ? 'transparent' : 'var(--color-grey-9)')};
-`;

package/src/components/editor/plugins/index.ts

@@ -1,162 +0,0 @@
-/**
- * PLUGINS
- */
-import {
-  createBlockquotePlugin,
-  createCodeBlockPlugin,
-  createHeadingPlugin,
-  createHorizontalRulePlugin,
-  createIndentListPlugin,
-  createImagePlugin,
-  createTextIndentPlugin,
-  createListPlugin,
-  createMediaEmbedPlugin,
-  createResetNodePlugin,
-  createTablePlugin,
-  createBoldPlugin,
-  createCodePlugin,
-  createFontBackgroundColorPlugin,
-  createFontSizePlugin,
-  createFontFamilyPlugin,
-  createItalicPlugin,
-  createStrikethroughPlugin,
-  createSubscriptPlugin,
-  createSuperscriptPlugin,
-  createUnderlinePlugin,
-  createAlignPlugin,
-  createIndentPlugin,
-  createLineHeightPlugin,
-  createLinkPlugin,
-  createExitBreakPlugin,
-  createHistoryPlugin,
-  createSelectOnBackspacePlugin,
-  createSoftBreakPlugin,
-} from '@udecode/plate';
-import { createButtonsPlugin } from './buttons';
-import { exitBreakPlugin } from './exitBreak';
-import { resetBlockTypePlugin } from './resetBlockType';
-import { selectOnBackspace } from './selectOnBackspace';
-import { softBreakPlugin } from './softBreak';
-import {
-  createParagraphPlugin,
-  createHOnePlugin,
-  createHTwoPlugin,
-  createHThreePlugin,
-  createHFourPlugin,
-  createHFivePlugin,
-  createHSixPlugin,
-} from './text';
-
-import { LinkFloatingMenu } from './link';
-
-/**
- * ELEMENT TYPES
- */
-import {
-  ELEMENT_PARAGRAPH,
-  ELEMENT_H1,
-  ELEMENT_H2,
-  ELEMENT_H3,
-  ELEMENT_H4,
-  ELEMENT_H5,
-  ELEMENT_H6,
-  ELEMENT_OL,
-  ELEMENT_UL,
-} from '../constants';
-
-/**
- * ELEMENT TYPES
- */
-export const blocks = [
-  createButtonsPlugin(),
-  createBlockquotePlugin(),
-  createCodeBlockPlugin(),
-  createHeadingPlugin(),
-  createHorizontalRulePlugin(),
-  createImagePlugin({
-    options: {
-      disableUploadInsert: true,
-      disableCaption: true,
-      disableEmbedInsert: true,
-    },
-  }),
-  createTextIndentPlugin(),
-  createIndentListPlugin({
-    inject: {
-      props: {
-        validTypes: [
-          ELEMENT_PARAGRAPH,
-          ELEMENT_H1,
-          ELEMENT_H2,
-          ELEMENT_H3,
-          ELEMENT_H4,
-          ELEMENT_H5,
-          ELEMENT_H6,
-          ELEMENT_OL,
-          ELEMENT_UL,
-        ],
-      },
-    },
-  }),
-  createListPlugin(),
-  createMediaEmbedPlugin(),
-  createParagraphPlugin(),
-  createHOnePlugin(),
-  createHTwoPlugin(),
-  createHThreePlugin(),
-  createHFourPlugin(),
-  createHFivePlugin(),
-  createHSixPlugin(),
-  createResetNodePlugin(),
-  createTablePlugin(),
-];
-
-export const marks = [
-  createBoldPlugin(),
-  createCodePlugin(),
-  createFontBackgroundColorPlugin(),
-  createFontSizePlugin(),
-  createFontFamilyPlugin(),
-  createItalicPlugin(),
-  createStrikethroughPlugin(),
-  createSubscriptPlugin(),
-  createSuperscriptPlugin(),
-  createUnderlinePlugin(),
-];
-
-export const inline = [
-  createAlignPlugin({
-    inject: {
-      props: {
-        validTypes: [
-          ELEMENT_PARAGRAPH,
-          ELEMENT_H1,
-          ELEMENT_H2,
-          ELEMENT_H3,
-          ELEMENT_H4,
-          ELEMENT_H5,
-          ELEMENT_H6,
-        ],
-      },
-    },
-  }),
-  createIndentPlugin({
-    inject: {
-      props: {
-        validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1],
-      },
-    },
-  }),
-  createLineHeightPlugin(),
-  createLinkPlugin({
-    renderAfterEditable: LinkFloatingMenu,
-  }),
-];
-
-export const utils = [
-  createExitBreakPlugin(exitBreakPlugin),
-  createHistoryPlugin(),
-  createResetNodePlugin(resetBlockTypePlugin),
-  createSelectOnBackspacePlugin(selectOnBackspace),
-  createSoftBreakPlugin(softBreakPlugin),
-];

package/src/components/editor/plugins/link.tsx

@@ -1,144 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import {
-  FloatingLinkUrlInput,
-  LinkOpenButton,
-  PlateElement,
-  PlateElementProps,
-  TEditableProps,
-  TLinkElement,
-  useFloatingLinkEdit,
-  useFloatingLinkEditState,
-  useFloatingLinkInsert,
-  useFloatingLinkInsertState,
-  useFloatingLinkSelectors,
-  useLink,
-  Value,
-} from '@udecode/plate';
-import { Box } from '../../';
-import { AASansSerif, Link, Upload } from '../../../icons';
-
-export const LinkElement = React.forwardRef<
-  React.ElementRef<typeof PlateElement>,
-  PlateElementProps<Value, TLinkElement>
->(({ children, ...props }, ref) => {
-  const { props: linkProps } = useLink({ element: props.element });
-
-  return (
-    <PlateElement asChild ref={ref} {...linkProps} {...(props as any)}>
-      <a>{children}</a>
-    </PlateElement>
-  );
-});
-
-export const LinkFloatingMenu = ({ readOnly }: TEditableProps) => {
-  const isEditing = useFloatingLinkSelectors().isEditing();
-
-  const state = useFloatingLinkInsertState();
-  const {
-    props: insertProps,
-    ref: insertRef,
-    textInputProps,
-  } = useFloatingLinkInsert(state);
-
-  const editState = useFloatingLinkEditState();
-  const {
-    props: editProps,
-    ref: editRef,
-    editButtonProps,
-  } = useFloatingLinkEdit(editState);
-
-  if (readOnly) return null;
-
-  const input = (
-    <Box
-      $dir="column"
-      sx={`
-        background-color: var(--color-white);
-        gap: 16px;
-        padding: 16px;
-        border-radius: 16px;
-        box-shadow: var(--elevation-2);
-      `}
-    >
-      <Box $align="center" $justify="center" $gap={8}>
-        <Box $align="center" $justify="center">
-          <Link />
-        </Box>
-        <FloatingLinkUrlInput
-          style={{
-            border: 'none',
-            outline: 'none',
-            padding: '8px 12px',
-          }}
-          placeholder="Paste link"
-        />
-      </Box>
-      <Box $align="center" $justify="center" $gap={8}>
-        <Box $align="center" $justify="center">
-          <AASansSerif />
-        </Box>
-        <Input placeholder="Text to display" {...textInputProps} />
-      </Box>
-    </Box>
-  );
-
-  const editContent = isEditing ? (
-    input
-  ) : (
-    <Box
-      $align="center"
-      $justify="center"
-      sx={`
-        box-sizing: box-content;
-        background-color: var(--color-white);
-        gap: 8px;
-        padding: 16px;
-        border-radius: 16px;
-        box-shadow: var(--elevation-2);
-
-        a,
-        button {
-          padding: 8px 12px;
-          background-color: transparent;
-          outline: none;
-          border: none;
-          border-radius: 8px;
-          cursor: pointer;
-          width: max-content;
-          font-size: 16px;
-          line-height: 16px;
-
-          &:hover {
-            background-color: var(--color-grey-9);
-          }
-        }
-      `}
-      $gap={8}
-    >
-      <button type="button" {...editButtonProps}>
-        Edit link
-      </button>
-      <LinkOpenButton>
-        <Upload />
-      </LinkOpenButton>
-    </Box>
-  );
-
-  return (
-    <>
-      <div ref={insertRef} {...insertProps}>
-        {input}
-      </div>
-      <div ref={editRef} {...editProps}>
-        {editContent}
-      </div>
-    </>
-  );
-};
-
-const Input = styled.input`
-  border: none;
-  outline: none;
-  padding: 8px 12px;
-`;

package/src/components/editor/plugins/list.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { PlateElement, PlateElementProps } from '@udecode/plate';
-import { styled } from 'styled-components';
-
-export const ListElement = ({
-  children,
-  variant = 'ul',
-  ...props
-}: PlateElementProps & {
-  variant: 'ul' | 'ol';
-}) => {
-  const Element = variant;
-
-  return (
-    <PlateElement asChild {...props}>
-      <>
-        <Element>
-          {React.Children.map(children, (child) => (
-            <Li>{child}</Li>
-          ))}
-        </Element>
-      </>
-    </PlateElement>
-  );
-};
-
-const Li = styled.li`
-  margin: 16px 0px;
-  padding-left: 8px;
-
-  &::marker {
-    color: var(--color-grey-4);
-  }
-`;

package/src/components/editor/plugins/resetBlockType.ts

@@ -1,29 +0,0 @@
-import { isBlockAboveEmpty, isSelectionAtBlockStart } from '@udecode/plate';
-
-import {
-  ELEMENT_BLOCKQUOTE,
-  ELEMENT_PARAGRAPH,
-  ELEMENT_TODO_LI,
-} from '../constants';
-
-const resetBlockTypesCommonRule = {
-  types: [ELEMENT_BLOCKQUOTE, ELEMENT_TODO_LI],
-  defaultType: ELEMENT_PARAGRAPH,
-};
-
-export const resetBlockTypePlugin = {
-  options: {
-    rules: [
-      {
-        ...resetBlockTypesCommonRule,
-        hotkey: 'Enter',
-        predicate: isBlockAboveEmpty,
-      },
-      {
-        ...resetBlockTypesCommonRule,
-        hotkey: 'Backspace',
-        predicate: isSelectionAtBlockStart,
-      },
-    ],
-  },
-};

package/src/components/editor/plugins/selectOnBackspace.ts

@@ -1,7 +0,0 @@
-import { ELEMENT_HR, ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED } from '../constants';
-
-export const selectOnBackspace = {
-  options: {
-    query: { allow: [ELEMENT_HR, ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED] },
-  },
-};

package/src/components/editor/plugins/softBreak.ts

@@ -1,19 +0,0 @@
-import {
-  ELEMENT_BLOCKQUOTE,
-  ELEMENT_CODE_BLOCK,
-  ELEMENT_TD,
-} from '@udecode/plate';
-
-export const softBreakPlugin = {
-  options: {
-    rules: [
-      { hotkey: 'shift+enter' },
-      {
-        hotkey: 'enter',
-        query: {
-          allow: [ELEMENT_CODE_BLOCK, ELEMENT_BLOCKQUOTE, ELEMENT_TD],
-        },
-      },
-    ],
-  },
-};

package/src/components/editor/plugins/text.tsx

@@ -1,151 +0,0 @@
-import React from 'react';
-import {
-  createPluginFactory,
-  PlateElement,
-  PlateElementProps,
-  PlateRenderElementProps,
-} from '@udecode/plate';
-import { H, P } from '../../';
-import * as Elements from '../constants';
-
-export const ParagraphElement = React.forwardRef<
-  React.ElementRef<typeof PlateElement>,
-  PlateElementProps
->(({ children, ...props }: PlateRenderElementProps, ref) => {
-  const textAlign = (props as any)?.style?.textAlign;
-  return (
-    <PlateElement asChild ref={ref} {...props}>
-      <>
-        <P as="div" $textAlign={textAlign}>
-          {children}
-        </P>
-      </>
-    </PlateElement>
-  );
-});
-
-export const createParagraphPlugin = createPluginFactory({
-  key: Elements.ELEMENT_PARAGRAPH,
-  type: Elements.ELEMENT_PARAGRAPH,
-  isElement: true,
-});
-
-export const HOneElement = React.forwardRef<
-  React.ElementRef<typeof PlateElement>,
-  PlateElementProps
->(({ children, ...props }: PlateRenderElementProps, ref) => {
-  const textAlign = (props as any)?.style?.textAlign;
-  return (
-    <PlateElement asChild ref={ref} {...props}>
-      <>
-        <H.One $textAlign={textAlign}>{children}</H.One>
-      </>
-    </PlateElement>
-  );
-});
-
-export const createHOnePlugin = createPluginFactory({
-  key: Elements.ELEMENT_H1,
-  type: Elements.ELEMENT_H1,
-  isElement: true,
-});
-
-export const HTwoElement = React.forwardRef<
-  React.ElementRef<typeof PlateElement>,
-  PlateElementProps
->(({ children, ...props }: PlateRenderElementProps, ref) => {
-  const textAlign = (props as any)?.style?.textAlign;
-  return (
-    <PlateElement asChild ref={ref} {...props}>
-      <>
-        <H.Two $textAlign={textAlign}>{children}</H.Two>
-      </>
-    </PlateElement>
-  );
-});
-
-export const createHTwoPlugin = createPluginFactory({
-  key: Elements.ELEMENT_H2,
-  type: Elements.ELEMENT_H2,
-  isElement: true,
-});
-
-export const HThreeElement = React.forwardRef<
-  React.ElementRef<typeof PlateElement>,
-  PlateElementProps
->(({ children, ...props }: PlateRenderElementProps, ref) => {
-  const textAlign = (props as any)?.style?.textAlign;
-  return (
-    <PlateElement asChild ref={ref} {...props}>
-      <>
-        <H.Three $textAlign={textAlign}>{children}</H.Three>
-      </>
-    </PlateElement>
-  );
-});
-
-export const createHThreePlugin = createPluginFactory({
-  key: Elements.ELEMENT_H3,
-  type: Elements.ELEMENT_H3,
-  isElement: true,
-});
-
-export const HFourElement = React.forwardRef<
-  React.ElementRef<typeof PlateElement>,
-  PlateElementProps
->(({ children, ...props }: PlateRenderElementProps, ref) => {
-  const textAlign = (props as any)?.style?.textAlign;
-  return (
-    <PlateElement asChild ref={ref} {...props}>
-      <>
-        <H.Four $textAlign={textAlign}>{children}</H.Four>
-      </>
-    </PlateElement>
-  );
-});
-
-export const createHFourPlugin = createPluginFactory({
-  key: Elements.ELEMENT_H4,
-  type: Elements.ELEMENT_H4,
-  isElement: true,
-});
-
-export const HFiveElement = React.forwardRef<
-  React.ElementRef<typeof PlateElement>,
-  PlateElementProps
->(({ children, ...props }: PlateRenderElementProps, ref) => {
-  const textAlign = (props as any)?.style?.textAlign;
-  return (
-    <PlateElement asChild ref={ref} {...props}>
-      <>
-        <H.Five $textAlign={textAlign}>{children}</H.Five>
-      </>
-    </PlateElement>
-  );
-});
-
-export const createHFivePlugin = createPluginFactory({
-  key: Elements.ELEMENT_H5,
-  type: Elements.ELEMENT_H5,
-  isElement: true,
-});
-
-export const HSixElement = React.forwardRef<
-  React.ElementRef<typeof PlateElement>,
-  PlateElementProps
->(({ children, ...props }: PlateRenderElementProps, ref) => {
-  const textAlign = (props as any)?.style?.textAlign;
-  return (
-    <PlateElement asChild ref={ref} {...props}>
-      <>
-        <H.Six $textAlign={textAlign}>{children}</H.Six>
-      </>
-    </PlateElement>
-  );
-});
-
-export const createHSixPlugin = createPluginFactory({
-  key: Elements.ELEMENT_H6,
-  type: Elements.ELEMENT_H6,
-  isElement: true,
-});