@soul-refiner/design-system 0.1.38 → 0.1.40

package/src/components/editor/navbar/navbar.tsx

@@ -1,350 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import {
-  getPluginType,
-  insertImage,
-  insertNodes,
-  toggleNodeType,
-  useLinkToolbarButton,
-  useLinkToolbarButtonState,
-  useListToolbarButton,
-  useListToolbarButtonState,
-  useMarkToolbarButton,
-  useMarkToolbarButtonState,
-  usePlateEditorRef,
-  usePlateEditorState,
-} from '@udecode/plate';
-
-import { Tooltip } from '../../';
-import {
-  Bold,
-  FileCode,
-  Headphones,
-  Image,
-  Italic,
-  Link,
-  ListOrdered,
-  ListUnordered,
-  Quote,
-  Redo,
-  Strikethrough,
-  Underline,
-  Undo,
-  Video,
-} from '../../../icons';
-import {
-  ELEMENT_BLOCKQUOTE,
-  ELEMENT_BUTTON,
-  ELEMENT_OL,
-  ELEMENT_UL,
-  MARK_BOLD,
-  MARK_CODE,
-  MARK_ITALIC,
-  MARK_STRIKETHROUGH,
-  MARK_UNDERLINE,
-} from '../constants';
-import { AlignmentDropdown } from './alignment_dropdown';
-import { ButtonModal } from './button_modal';
-import { StyleDropdown } from './style_dropdown';
-
-export interface EditorBarProps {
-  handleUploadImage: (dataURL: File) => Promise<string>;
-}
-
-export const EditorBar = ({ handleUploadImage }: EditorBarProps) => {
-  const editorRef = usePlateEditorRef('main');
-  const stateEditor = usePlateEditorState();
-  const audioRef = React.useRef<HTMLInputElement>(null);
-  const imageRef = React.useRef<HTMLInputElement>(null);
-  const videoRef = React.useRef<HTMLInputElement>(null);
-
-  const boldState = useMarkToolbarButtonState({ nodeType: MARK_BOLD });
-  const {
-    props: { pressed: currBold, onClick: handleBold },
-  } = useMarkToolbarButton(boldState);
-
-  const italicState = useMarkToolbarButtonState({ nodeType: MARK_ITALIC });
-  const {
-    props: { pressed: currItalic, onClick: handleItalic },
-  } = useMarkToolbarButton(italicState);
-
-  const strikethroughState = useMarkToolbarButtonState({
-    nodeType: MARK_STRIKETHROUGH,
-  });
-  const {
-    props: { pressed: currStrikethrough, onClick: handleStrikethrough },
-  } = useMarkToolbarButton(strikethroughState);
-
-  const underlineState = useMarkToolbarButtonState({
-    nodeType: MARK_UNDERLINE,
-  });
-  const {
-    props: { pressed: currUnderline, onClick: handleUnderline },
-  } = useMarkToolbarButton(underlineState);
-
-  const inlineCodeState = useMarkToolbarButtonState({ nodeType: MARK_CODE });
-  const {
-    props: { pressed: currInlineCode, onClick: handleInlineCode },
-  } = useMarkToolbarButton(inlineCodeState);
-
-  const linkState = useLinkToolbarButtonState();
-  const {
-    props: { pressed: currLink, onClick: handleLink },
-  } = useLinkToolbarButton(linkState);
-
-  const orderedListState = useListToolbarButtonState({ nodeType: ELEMENT_OL });
-  const {
-    props: { pressed: currOrderedList, onClick: handleOrderedList },
-  } = useListToolbarButton(orderedListState);
-
-  const unorderedListState = useListToolbarButtonState({
-    nodeType: ELEMENT_UL,
-  });
-  const {
-    props: { pressed: currUnorderedList, onClick: handleUnorderedList },
-  } = useListToolbarButton(unorderedListState);
-
-  const handleAudioChange = async (event: React.FormEvent) => {
-    const file = (event.target as HTMLInputElement)?.files?.[0];
-    if (!file) return;
-    /**
-     * TODO: Insert audio component
-     */
-  };
-
-  const handleBlockquote = () => {
-    toggleNodeType(stateEditor, { activeType: ELEMENT_BLOCKQUOTE });
-  };
-
-  const handleButton = (type: string) => {
-    insertNodes(editorRef, [
-      {
-        type: getPluginType(editorRef, ELEMENT_BUTTON),
-        buttonType: type,
-        children: [
-          {
-            text: 'Subscribe',
-          },
-        ],
-      },
-    ]);
-  };
-
-  const handleImageChange = async (event: React.FormEvent) => {
-    const file = (event.target as HTMLInputElement)?.files?.[0];
-    if (!file) return;
-    const imageurl = await handleUploadImage(file);
-    if (imageurl) {
-      insertImage(editorRef, imageurl);
-    }
-  };
-
-  const handleRedo = () => editorRef.redo();
-
-  const handleUndo = () => editorRef.undo();
-
-  const handleVideoChange = async (event: React.FormEvent) => {
-    const file = (event.target as HTMLInputElement)?.files?.[0];
-    if (!file) return;
-    /**
-     * TODO: Insert video component
-     */
-  };
-
-  return (
-    <Wrapper>
-      <Menu aria-label="editor-navigation">
-        <MenuSection>
-          <Tooltip content="Undo" place="top">
-            <MenuButton $active={false} onClick={handleUndo}>
-              <Undo size={24} color="grey-5" />
-            </MenuButton>
-          </Tooltip>
-          <Tooltip content="Redo" place="top">
-            <MenuButton $active={false} onClick={handleRedo}>
-              <Redo size={24} color="grey-5" />
-            </MenuButton>
-          </Tooltip>
-        </MenuSection>
-        <Divider />
-        <MenuSection>
-          <StyleDropdown editorRef={editorRef} />
-        </MenuSection>
-        <Divider />
-        <MenuSection>
-          <Tooltip content="Bold" place="top">
-            <MenuButton $active={currBold} onClick={handleBold}>
-              <Bold size={24} color="grey-5" />
-            </MenuButton>
-          </Tooltip>
-          <Tooltip content="Italic" place="top">
-            <MenuButton $active={currItalic} onClick={handleItalic}>
-              <Italic size={24} color="grey-5" />
-            </MenuButton>
-          </Tooltip>
-          <Tooltip content="Underline" place="top">
-            <MenuButton $active={currUnderline} onClick={handleUnderline}>
-              <Underline size={24} color="grey-5" />
-            </MenuButton>
-          </Tooltip>
-          <Tooltip content="Strikethrough" place="top">
-            <MenuButton
-              $active={currStrikethrough}
-              onClick={handleStrikethrough}
-            >
-              <Strikethrough size={24} color="grey-5" />
-            </MenuButton>
-          </Tooltip>
-          <Tooltip content="Inline code" place="top">
-            <MenuButton $active={currInlineCode} onClick={handleInlineCode}>
-              <FileCode size={24} color="grey-5" />
-            </MenuButton>
-          </Tooltip>
-        </MenuSection>
-        <Divider />
-        <MenuSection>
-          <MenuButton $active={false} as="div">
-            <AlignmentDropdown editorRef={editorRef} />
-          </MenuButton>
-        </MenuSection>
-        <Divider />
-        <MenuSection>
-          <Tooltip content="Link" place="top">
-            <MenuButton $active={currLink} onClick={handleLink}>
-              <Link size={24} color="grey-5" />
-            </MenuButton>
-          </Tooltip>
-          <Tooltip content="Image" place="top">
-            <MenuButton $active={false} as="label" onChange={handleImageChange}>
-              <div onClick={() => imageRef.current?.click()}>
-                <input
-                  accept="image/*"
-                  ref={imageRef}
-                  style={{ display: 'none' }}
-                  type="file"
-                />
-                <Image size={24} color="grey-5" />
-              </div>
-            </MenuButton>
-          </Tooltip>
-          <Tooltip content="Video" place="top">
-            <MenuButton $active={false} as="label" onChange={handleVideoChange}>
-              <div onClick={() => videoRef.current?.click()}>
-                <input
-                  accept="video/*"
-                  ref={videoRef}
-                  style={{ display: 'none' }}
-                  type="file"
-                />
-                <Video size={24} color="grey-5" />
-              </div>
-            </MenuButton>
-          </Tooltip>
-          <Tooltip content="Audio" place="top">
-            <MenuButton $active={false} as="label" onChange={handleAudioChange}>
-              <div onClick={() => audioRef.current?.click()}>
-                <input
-                  accept="audio/*"
-                  ref={audioRef}
-                  style={{ display: 'none' }}
-                  type="file"
-                />
-                <Headphones size={24} color="grey-5" />
-              </div>
-            </MenuButton>
-          </Tooltip>
-          <Tooltip content="Blockquote" place="top">
-            <MenuButton $active={false} onClick={handleBlockquote}>
-              <Quote size={24} color="grey-5" />
-            </MenuButton>
-          </Tooltip>
-          <Tooltip content="Add a button" place="top">
-            <ButtonModal onButtonInsert={handleButton} />
-          </Tooltip>
-        </MenuSection>
-        <Divider />
-        <MenuSection>
-          <Tooltip content="Unordered List" place="top">
-            <MenuButton
-              $active={currUnorderedList}
-              onClick={handleUnorderedList}
-            >
-              <ListUnordered size={24} color="grey-5" />
-            </MenuButton>
-          </Tooltip>
-          <Tooltip content="Ordered List" place="top">
-            <MenuButton $active={currOrderedList} onClick={handleOrderedList}>
-              <ListOrdered size={24} color="grey-5" />
-            </MenuButton>
-          </Tooltip>
-        </MenuSection>
-      </Menu>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  position: sticky;
-  z-index: 2;
-  left: 0;
-  right: 0;
-  top: 0;
-`;
-
-const Menu = styled.nav`
-  display: flex;
-  gap: 12px;
-  justify-content: center;
-  max-width: 1200px;
-  width: 100%;
-  margin: 0 auto;
-  padding: 14px 24px;
-  background-color: var(--color-white);
-`;
-
-const MenuSection = styled.div`
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  width: fit-content;
-  flex-shrink: 0;
-`;
-
-export const MenuButton = styled.button<{
-  $active?: boolean;
-}>`
-  padding: 2px;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  box-sizing: border-box;
-  height: 28px;
-  width: 28px;
-  border-radius: 2px;
-
-  &:hover:not(:disabled) {
-    padding: 1px;
-    border: 1px solid var(--color-grey-8);
-  }
-
-  &:active:not(:disabled) {
-    background-color: var(--color-grey-9);
-  }
-
-  &:disabled {
-    background-color: var(--color-white) !important;
-    cursor: initial;
-    svg {
-      fill: var(--color-grey-7) !important;
-    }
-  }
-
-  background-color: ${({ $active }) =>
-    $active ? 'var(--color-grey-9)' : 'transparent'};
-`;
-
-const Divider = styled.div`
-  width: 1px;
-  height: 28px;
-  background-color: var(--color-grey-9);
-`;

package/src/components/editor/navbar/style_dropdown.tsx

@@ -1,107 +0,0 @@
-import React from 'react';
-import {
-  findNode,
-  isBlock,
-  isCollapsed,
-  PlateEditor,
-  toggleNodeType,
-  TElement,
-} from '@udecode/plate';
-import { Button, Dropdown } from '../../';
-import {
-  ELEMENT_H1,
-  ELEMENT_H2,
-  ELEMENT_H3,
-  ELEMENT_H4,
-  ELEMENT_H5,
-  ELEMENT_H6,
-  ELEMENT_PARAGRAPH,
-} from '../constants';
-
-const items = [
-  {
-    value: ELEMENT_PARAGRAPH,
-    label: 'Paragraph',
-    description: 'Paragraph',
-  },
-  {
-    value: ELEMENT_H1,
-    label: 'Heading 1',
-    description: 'Heading 1',
-  },
-  {
-    value: ELEMENT_H2,
-    label: 'Heading 2',
-    description: 'Heading 2',
-  },
-  {
-    value: ELEMENT_H3,
-    label: 'Heading 3',
-    description: 'Heading 3',
-  },
-  {
-    value: ELEMENT_H4,
-    label: 'Heading 4',
-    description: 'Heading 4',
-  },
-  {
-    value: ELEMENT_H5,
-    label: 'Heading 5',
-    description: 'Heading 5',
-  },
-  {
-    value: ELEMENT_H6,
-    label: 'Heading 6',
-    description: 'Heading 6',
-  },
-];
-
-// eslint-disable-next-line
-const defaultItem = items.find((item) => item.value === ELEMENT_PARAGRAPH)!;
-
-export interface StyleDropdown {
-  editorRef: PlateEditor;
-}
-
-export const StyleDropdown = ({ editorRef }: StyleDropdown) => {
-  let value: string = ELEMENT_PARAGRAPH;
-
-  const handleChange = (event: React.FormEvent) => {
-    const value = (event.target as any).getAttribute('data-value');
-    if (!value) return;
-    toggleNodeType(editorRef, { activeType: value });
-  };
-
-  if (isCollapsed(editorRef?.selection)) {
-    const entry = findNode<TElement>(editorRef, {
-      match: (n) => isBlock(editorRef, n),
-    });
-    if (entry) {
-      value =
-        items.find((item) => item.value === entry[0].type)?.value ??
-        ELEMENT_PARAGRAPH;
-    }
-  }
-
-  const selectedItem =
-    items.find((item) => item.value === value) ?? defaultItem;
-
-  const { label: selectedItemLabel } = selectedItem;
-
-  return (
-    <Dropdown
-      maintainState={false}
-      onChange={handleChange}
-      options={items}
-      trigger={
-        <Button
-          type="special"
-          size="small"
-          sx="padding: 1px 4px; & > * { color: var(--color-grey-5); }"
-        >
-          {selectedItemLabel}
-        </Button>
-      }
-    />
-  );
-};

package/src/components/editor/plate.ts

@@ -1,37 +0,0 @@
-import { withProps } from '@udecode/plate';
-import { BlockquoteElement } from './plugins/blockquote';
-import { Button } from './plugins/buttons';
-import { ImageElement } from './plugins/image';
-import { LinkElement } from './plugins/link';
-import { ListElement } from './plugins/list';
-import {
-  ParagraphElement,
-  HOneElement,
-  HTwoElement,
-  HThreeElement,
-  HFourElement,
-  HFiveElement,
-  HSixElement,
-} from './plugins/text';
-
-import * as Elements from './constants';
-
-export const plateUI = {
-  [Elements.ELEMENT_PARAGRAPH]: ParagraphElement,
-  [Elements.ELEMENT_H1]: HOneElement,
-  [Elements.ELEMENT_H2]: HTwoElement,
-  [Elements.ELEMENT_H3]: HThreeElement,
-  [Elements.ELEMENT_H4]: HFourElement,
-  [Elements.ELEMENT_H5]: HFiveElement,
-  [Elements.ELEMENT_H6]: HSixElement,
-  [Elements.ELEMENT_BLOCKQUOTE]: BlockquoteElement,
-  [Elements.ELEMENT_LINK]: LinkElement,
-  [Elements.ELEMENT_OL]: withProps(ListElement, {
-    variant: Elements.ELEMENT_OL,
-  }),
-  [Elements.ELEMENT_UL]: withProps(ListElement, {
-    variant: Elements.ELEMENT_UL,
-  }),
-  [Elements.ELEMENT_IMAGE]: ImageElement,
-  [Elements.ELEMENT_BUTTON]: Button,
-};

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import {
-  PlateElement,
-  PlateElementProps,
-  PlateRenderElementProps,
-} from '@udecode/plate';
-import { P } from '../../';
-
-export const BlockquoteElement = React.forwardRef<
-  React.ElementRef<typeof PlateElement>,
-  PlateElementProps
->(({ children, ...props }: PlateRenderElementProps, ref) => {
-  return (
-    <PlateElement asChild ref={ref} {...props}>
-      <>
-        <P
-          as="blockquote"
-          sx="padding-left: 16px; border-left: 1px solid var(--color-grey-8);"
-        >
-          {children}
-        </P>
-      </>
-    </PlateElement>
-  );
-});

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

@@ -1,140 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import {
-  createPluginFactory,
-  getBlockAbove,
-  getPluginType,
-  isEditorReadOnly,
-  setNodes,
-  someNode,
-  PlateElement,
-  PlateElementProps,
-  PlateRenderElementProps,
-} from '@udecode/plate';
-import { Button as UIButton } from '../../';
-import { COLORS, ELEMENT_BUTTON, ELEMENT_PARAGRAPH } from '../constants';
-
-export const Button = React.forwardRef<
-  React.ElementRef<typeof PlateElement>,
-  PlateElementProps
->(({ children, editor, element, ...props }: PlateRenderElementProps, ref) => {
-  const { buttonType, color } = element;
-
-  const pressed =
-    !!editor?.selection &&
-    someNode(editor, {
-      match: { type: getPluginType(editor, ELEMENT_BUTTON) },
-    });
-
-  const currBlock = getBlockAbove(editor, {
-    at: editor.selection?.focus,
-    match: {
-      type: getPluginType(editor, ELEMENT_BUTTON),
-      buttonType: buttonType,
-    },
-  });
-
-  const editable = !isEditorReadOnly(editor);
-
-  const handleColorChange = (color: string) => {
-    if (currBlock) {
-      setNodes(
-        editor,
-        {
-          color,
-        },
-        {
-          at: currBlock ? currBlock[1] : undefined,
-        }
-      );
-    }
-  };
-
-  const ColorMenu = () =>
-    !pressed || !editable ? null : (
-      <ColorMenuComponent contentEditable={false}>
-        {COLORS.map((color) => (
-          <ColorItem
-            $color={color}
-            contentEditable={false}
-            key={color}
-            onClick={(event: React.MouseEvent) => {
-              event.stopPropagation();
-              handleColorChange(color);
-            }}
-          />
-        ))}
-      </ColorMenuComponent>
-    );
-
-  return (
-    <PlateElement
-      asChild
-      editor={editor}
-      element={element}
-      ref={ref}
-      {...props}
-    >
-      <>
-        <ColorMenu />
-        <UIButton
-          size="small"
-          sx={`
-            margin-left: auto !important; 
-            margin-right: auto !important;
-            background-color: ${
-              color ? color : 'var(--color-blue-5)'
-            } !important;
-            border-color: ${color ? color : 'var(--color-blue-5)'} !important;
-            &:hover {
-              background-color: ${
-                color ? color : 'var(--color-blue-5)'
-              } !important;
-              filter: brightness(85%);
-            }
-          `}
-        >
-          {children}
-        </UIButton>
-      </>
-    </PlateElement>
-  );
-});
-
-const ColorMenuComponent = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 16px;
-  z-index: 5;
-  position: absolute;
-  transform: translateY(24px);
-  left: calc(50% - 148px);
-  border-radius: 16px;
-  padding: 8px 16px;
-  box-shadow: var(--elevation-1);
-  background-color: var(--color-white);
-`;
-
-const ColorItem = styled.div<{ $color: string }>`
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: ${({ $color }) => $color};
-  cursor: pointer;
-`;
-
-export const createButtonsPlugin = createPluginFactory({
-  key: ELEMENT_BUTTON,
-  type: ELEMENT_BUTTON,
-  isElement: true,
-  component: Button,
-  then: () => ({
-    inject: {
-      props: {
-        classNames: undefined,
-        validTypes: [ELEMENT_PARAGRAPH],
-      },
-    },
-  }),
-});

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

@@ -1,39 +0,0 @@
-import { KEYS_HEADING } from '@udecode/plate';
-import {
-  ELEMENT_BLOCKQUOTE,
-  ELEMENT_BUTTON,
-  ELEMENT_MEDIA,
-  ELEMENT_MEDIA_EMBED,
-  ELEMENT_OL,
-  ELEMENT_UL,
-} from '../constants';
-
-export const exitBreakPlugin = {
-  options: {
-    rules: [
-      {
-        hotkey: 'mod+enter',
-      },
-      {
-        hotkey: 'mod+shift+enter',
-        before: true,
-      },
-      {
-        hotkey: 'enter',
-        query: {
-          start: true,
-          end: true,
-          allow: [
-            ELEMENT_BLOCKQUOTE,
-            ELEMENT_BUTTON,
-            ELEMENT_MEDIA,
-            ELEMENT_MEDIA_EMBED,
-            ELEMENT_OL,
-            ELEMENT_UL,
-            ...KEYS_HEADING,
-          ],
-        },
-      },
-    ],
-  },
-};