@soul-refiner/design-system 0.1.26 → 0.1.27

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

@@ -2,46 +2,34 @@ import React from 'react';
 import styled from 'styled-components';
 import {
   createPluginFactory,
-  ELEMENT_LINK,
-  getAboveNode,
-  insertLink,
+  getBlockAbove,
+  getPluginType,
   isEditorReadOnly,
   setNodes,
+  someNode,
+  PlateElement,
+  PlateElementProps,
   PlateRenderElementProps,
 } from '@udecode/plate';
-import { Button as UIButton, P } from 'components';
-import {
-  BUTTON_COMMENT,
-  BUTTON_GIFT_SUBSCRIPTION,
-  BUTTON_LINK,
-  BUTTON_SHARE,
-  BUTTON_SHARE_PAGE,
-  BUTTON_SPECIAL_OFFER,
-  BUTTON_SUBSCRIBE,
-  BUTTON_SIGNUP,
-  COLORS,
-  ELEMENT_BUTTON,
-  ELEMENT_PARAGRAPH,
-} from '../constants';
+import { Button as UIButton } from 'components';
+import { COLORS, ELEMENT_BUTTON, ELEMENT_PARAGRAPH } from '../constants';
 
-export const Button = ({
-  attributes,
-  className,
-  children,
-  editor,
-  element,
-}: PlateRenderElementProps) => {
-  const [state, setState] = React.useState('');
-  const { ref: _, ...htmlAttributes } = attributes;
+export const Button = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ children, editor, element, ...props }: PlateRenderElementProps, ref) => {
   const { buttonType, color } = element;
 
-  const currAboveNode = getAboveNode(editor, {
-    /**
-     * @todo possibly wrong
-     */
-    at: editor.prevSelection?.focus,
+  const pressed =
+    !!editor?.selection &&
+    someNode(editor, {
+      match: { type: getPluginType(editor, ELEMENT_BUTTON) },
+    });
+
+  const currBlock = getBlockAbove(editor, {
+    at: editor.selection?.focus,
     match: {
-      type: ELEMENT_BUTTON,
+      type: getPluginType(editor, ELEMENT_BUTTON),
       buttonType: buttonType,
     },
   });
@@ -49,21 +37,21 @@ export const Button = ({
   const editable = !isEditorReadOnly(editor);
 
   const handleColorChange = (color: string) => {
-    if (currAboveNode) {
+    if (currBlock) {
       setNodes(
         editor,
         {
           color,
         },
         {
-          at: currAboveNode ? currAboveNode[1] : undefined,
+          at: currBlock ? currBlock[1] : undefined,
         }
       );
     }
   };
 
   const ColorMenu = () =>
-    !currAboveNode?.[1] || !editable ? null : (
+    !pressed || !editable ? null : (
       <ColorMenuComponent contentEditable={false}>
         {COLORS.map((color) => (
           <ColorItem
@@ -80,12 +68,38 @@ export const Button = ({
     );
 
   return (
-    <ButtonWrapper>
-      <ColorMenu />
-      <UIButton>{children}</UIButton>
-    </ButtonWrapper>
+    <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;
@@ -94,6 +108,7 @@ const ColorMenuComponent = styled.div`
   gap: 16px;
   z-index: 5;
   position: absolute;
+  transform: translateY(24px);
   left: calc(50% - 148px);
   border-radius: 16px;
   padding: 8px 16px;
@@ -109,14 +124,12 @@ const ColorItem = styled.div<{ $color: string }>`
   cursor: pointer;
 `;
 
-const ButtonWrapper = styled.div``;
-
 export const createButtonsPlugin = createPluginFactory({
   key: ELEMENT_BUTTON,
   type: ELEMENT_BUTTON,
   isElement: true,
   component: Button,
-  then: (editor) => ({
+  then: () => ({
     inject: {
       props: {
         classNames: undefined,

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

@@ -2,7 +2,6 @@ import { KEYS_HEADING } from '@udecode/plate';
 import {
   ELEMENT_BLOCKQUOTE,
   ELEMENT_BUTTON,
-  ELEMENT_CODE_BLOCK,
   ELEMENT_MEDIA,
   ELEMENT_MEDIA_EMBED,
   ELEMENT_OL,
@@ -27,7 +26,6 @@ export const exitBreakPlugin = {
           allow: [
             ELEMENT_BLOCKQUOTE,
             ELEMENT_BUTTON,
-            ELEMENT_CODE_BLOCK,
             ELEMENT_MEDIA,
             ELEMENT_MEDIA_EMBED,
             ELEMENT_OL,

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

@@ -0,0 +1,80 @@
+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,3 +1,6 @@
+/**
+ * PLUGINS
+ */
 import {
   createBlockquotePlugin,
   createCodeBlockPlugin,
@@ -5,6 +8,8 @@ import {
   createHorizontalRulePlugin,
   createIndentListPlugin,
   createImagePlugin,
+  createTextIndentPlugin,
+  createListPlugin,
   createMediaEmbedPlugin,
   createResetNodePlugin,
   createTablePlugin,
@@ -22,24 +27,11 @@ import {
   createIndentPlugin,
   createLineHeightPlugin,
   createLinkPlugin,
-  PlateFloatingLink,
   createExitBreakPlugin,
   createHistoryPlugin,
   createSelectOnBackspacePlugin,
   createSoftBreakPlugin,
 } from '@udecode/plate';
-
-import {
-  ELEMENT_PARAGRAPH,
-  ELEMENT_H1,
-  ELEMENT_H2,
-  ELEMENT_H3,
-  ELEMENT_H4,
-  ELEMENT_H5,
-  ELEMENT_H6,
-  ELEMENT_CODE_BLOCK,
-} from '../constants';
-
 import { createButtonsPlugin } from './buttons';
 import { exitBreakPlugin } from './exitBreak';
 import { resetBlockTypePlugin } from './resetBlockType';
@@ -55,6 +47,26 @@ import {
   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(),
@@ -68,6 +80,7 @@ export const blocks = [
       disableEmbedInsert: true,
     },
   }),
+  createTextIndentPlugin(),
   createIndentListPlugin({
     inject: {
       props: {
@@ -79,12 +92,13 @@ export const blocks = [
           ELEMENT_H4,
           ELEMENT_H5,
           ELEMENT_H6,
-          ELEMENT_CODE_BLOCK,
+          ELEMENT_OL,
+          ELEMENT_UL,
         ],
       },
     },
   }),
-  // createFootnotePlugin(),
+  createListPlugin(),
   createMediaEmbedPlugin(),
   createParagraphPlugin(),
   createHOnePlugin(),
@@ -138,7 +152,7 @@ export const inline = [
   }),
   createLineHeightPlugin(),
   createLinkPlugin({
-    renderAfterEditable: PlateFloatingLink,
+    renderAfterEditable: LinkFloatingMenu,
   }),
 ];
 

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

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

@@ -0,0 +1,34 @@
+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);
+  }
+`;