@soul-refiner/design-system 0.1.26 → 0.1.27

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

@@ -1,24 +1,16 @@
 import React from 'react';
 import styled from 'styled-components';
 import {
-  Alignment,
-  AlignToolbarButton,
-  focusEditor,
   getPluginType,
-  // getPreventDefaultHandler,
-  ImageToolbarButton,
   insertImage,
   insertNodes,
-  isCollapsed,
-  LinkToolbarButton,
-  MarkToolbarButton,
-  PlateEditor,
-  setMarks,
-  setAlign,
-  someNode,
-  toggleIndentList,
   toggleNodeType,
-  ToolbarButton,
+  useLinkToolbarButton,
+  useLinkToolbarButtonState,
+  useListToolbarButton,
+  useListToolbarButtonState,
+  useMarkToolbarButton,
+  useMarkToolbarButtonState,
   usePlateEditorRef,
   usePlateEditorState,
 } from '@udecode/plate';
@@ -26,8 +18,9 @@ import {
 import { Tooltip } from 'components';
 import {
   Bold,
-  Dollar,
   FileCode,
+  Headphones,
+  Image,
   Italic,
   Link,
   ListOrdered,
@@ -37,38 +30,80 @@ import {
   Strikethrough,
   Underline,
   Undo,
+  Video,
 } from 'icons';
 import {
-  BUTTON_SUBSCRIBE,
   ELEMENT_BLOCKQUOTE,
   ELEMENT_BUTTON,
-  ELEMENT_DEFAULT,
-  ELEMENT_H2,
-  ELEMENT_PARAGRAPH,
-  ELEMENT_PAYWALL,
-  ELEMENT_QA,
+  ELEMENT_OL,
+  ELEMENT_UL,
   MARK_BOLD,
   MARK_CODE,
   MARK_ITALIC,
-  MARK_HIGHLIGHT,
   MARK_STRIKETHROUGH,
-  MARK_SUBSCRIPT,
-  MARK_SUPERSCRIPT,
   MARK_UNDERLINE,
 } from '../constants';
 import { AlignmentDropdown } from './alignment_dropdown';
+import { ButtonModal } from './button_modal';
+import { StyleDropdown } from './style_dropdown';
 
 export interface EditorBarProps {
-  communityName: string;
+  handleUploadImage: (dataURL: File) => Promise<string>;
 }
 
-export const EditorBar = ({ communityName }: EditorBarProps) => {
+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;
@@ -77,110 +112,37 @@ export const EditorBar = ({ communityName }: EditorBarProps) => {
      */
   };
 
-  const handleBlockquote = (event: React.MouseEvent) => {
+  const handleBlockquote = () => {
     toggleNodeType(stateEditor, { activeType: ELEMENT_BLOCKQUOTE });
   };
 
-  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 handleFont = (value: string) => {
-    const type = getPluginType(editorRef, 'fontSize');
-    focusEditor(editorRef);
-    setMarks(stateEditor, { [type]: `${value}px` });
-  };
-
-  const handleOrderedList = (event: any) => {
-    event.preventDefault();
-    toggleIndentList(editorRef, {
-      listStyleType: 'decimals',
-    });
-  };
-
-  const handlePaywall = () => {
+  const handleButton = (type: string) => {
     insertNodes(editorRef, [
       {
-        type: ELEMENT_PAYWALL,
+        type: getPluginType(editorRef, ELEMENT_BUTTON),
+        buttonType: type,
         children: [
           {
-            type: ELEMENT_H2,
-            children: [
-              {
-                text: 'Keep reading with a paid subscription',
-              },
-            ],
-          },
-          {
-            type: ELEMENT_PARAGRAPH,
-            children: [
-              {
-                text: 'Subscribe to ',
-              },
-              {
-                text: communityName,
-                italic: true,
-              },
-              {
-                text: ' to keep reading this content.',
-              },
-            ],
-          },
-          {
-            type: ELEMENT_BUTTON,
-            buttonType: BUTTON_SUBSCRIBE,
-            children: [
-              {
-                text: 'Get Access',
-              },
-            ],
-          },
-        ],
-      },
-      {
-        type: ELEMENT_DEFAULT,
-        children: [
-          {
-            text: '',
+            text: 'Subscribe',
           },
         ],
       },
     ]);
-    focusEditor(editorRef);
   };
 
-  const handleQA = () => {
-    insertNodes(editorRef, {
-      type: ELEMENT_QA,
-      children: [
-        {
-          type: ELEMENT_PARAGRAPH,
-          children: [
-            {
-              text: 'Ask your question here...',
-            },
-          ],
-        },
-      ],
-    });
+  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 handleUnorderedList = (event: any) => {
-    event.preventDefault();
-    toggleIndentList(editorRef, {
-      listStyleType: 'disc',
-    });
-  };
-
   const handleVideoChange = async (event: React.FormEvent) => {
     const file = (event.target as HTMLInputElement)?.files?.[0];
     if (!file) return;
@@ -205,57 +167,38 @@ export const EditorBar = ({ communityName }: EditorBarProps) => {
           </Tooltip>
         </MenuSection>
         <Divider />
+        <MenuSection>
+          <StyleDropdown editorRef={editorRef} />
+        </MenuSection>
+        <Divider />
         <MenuSection>
           <Tooltip content="Bold" place="top">
-            <MarkToolbarButton
-              as="div"
-              type={getPluginType(editorRef, MARK_BOLD)}
-              icon={
-                <MenuButton $active={true}>
-                  <Bold size={24} color="grey-5" />
-                </MenuButton>
-              }
-            />
+            <MenuButton $active={currBold} onClick={handleBold}>
+              <Bold size={24} color="grey-5" />
+            </MenuButton>
           </Tooltip>
           <Tooltip content="Italic" place="top">
-            <MarkToolbarButton
-              as="div"
-              type={getPluginType(editorRef, MARK_ITALIC)}
-              icon={
-                <MenuButton $active={false}>
-                  <Italic size={24} color="grey-5" />
-                </MenuButton>
-              }
-            />
+            <MenuButton $active={currItalic} onClick={handleItalic}>
+              <Italic size={24} color="grey-5" />
+            </MenuButton>
           </Tooltip>
           <Tooltip content="Underline" place="top">
-            <MarkToolbarButton
-              as="div"
-              type={getPluginType(editorRef, MARK_UNDERLINE)}
-              icon={<Underline size={24} color="grey-5" />}
-            />
+            <MenuButton $active={currUnderline} onClick={handleUnderline}>
+              <Underline size={24} color="grey-5" />
+            </MenuButton>
           </Tooltip>
           <Tooltip content="Strikethrough" place="top">
-            <MarkToolbarButton
-              as="div"
-              type={getPluginType(editorRef, MARK_STRIKETHROUGH)}
-              icon={
-                <MenuButton $active={false}>
-                  <Strikethrough size={24} color="grey-5" />
-                </MenuButton>
-              }
-            />
+            <MenuButton
+              $active={currStrikethrough}
+              onClick={handleStrikethrough}
+            >
+              <Strikethrough size={24} color="grey-5" />
+            </MenuButton>
           </Tooltip>
           <Tooltip content="Inline code" place="top">
-            <MarkToolbarButton
-              as="div"
-              type={getPluginType(editorRef, MARK_CODE)}
-              icon={
-                <MenuButton $active={false}>
-                  <FileCode size={24} color="grey-5" />
-                </MenuButton>
-              }
-            />
+            <MenuButton $active={currInlineCode} onClick={handleInlineCode}>
+              <FileCode size={24} color="grey-5" />
+            </MenuButton>
           </Tooltip>
         </MenuSection>
         <Divider />
@@ -264,6 +207,77 @@ export const EditorBar = ({ communityName }: EditorBarProps) => {
             <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>
   );
@@ -326,7 +340,7 @@ export const MenuButton = styled.button<{
   }
 
   background-color: ${({ $active }) =>
-    $active ? 'background-color: var(--color-grey-9)' : 'transparent'};
+    $active ? 'var(--color-grey-9)' : 'transparent'};
 `;
 
 const Divider = styled.div`

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

@@ -1,17 +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 {
-  CodeBlockElement,
-  BlockquoteElement,
-  CodeLineElement,
-  CodeSyntaxLeaf,
-  ImageElement,
-  createPlateUI,
-} from '@udecode/plate';
+  ParagraphElement,
+  HOneElement,
+  HTwoElement,
+  HThreeElement,
+  HFourElement,
+  HFiveElement,
+  HSixElement,
+} from './plugins/text';
+
 import * as Elements from './constants';
 
-export const plateUI = createPlateUI({
+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_CODE_BLOCK]: CodeBlockElement,
-  [Elements.ELEMENT_CODE_LINE]: CodeLineElement,
-  [Elements.ELEMENT_CODE_SYNTAX]: CodeSyntaxLeaf,
+  [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>
+  );
+});