@soul-refiner/design-system 0.1.25 → 0.1.27

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

@@ -0,0 +1,350 @@
+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 'components';
+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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Button, Dropdown } from 'components';
+import {
+  findNode,
+  isBlock,
+  isCollapsed,
+  PlateEditor,
+  toggleNodeType,
+  TElement,
+} from '@udecode/plate';
+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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import {
+  PlateElement,
+  PlateElementProps,
+  PlateRenderElementProps,
+} from '@udecode/plate';
+import { P } from 'components';
+
+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

@@ -0,0 +1,140 @@
+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 'components';
+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

@@ -0,0 +1,39 @@
+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,
+          ],
+        },
+      },
+    ],
+  },
+};