Merge pull request #5 from procraft/addbutton

Add widget AddButton v1  #4

src/components/HtmlTag/index.tsx

@@ -57,6 +57,7 @@ export const HtmlTag: RedactorComponent = ({
         case 'link':
         case 'img':
         case 'video':
+        case 'button':
           hoverable = true
           break
 

src/hooks/useRedactorComponentInit/RedactorComponentWrapper/index.tsx

@@ -23,7 +23,7 @@ import { RedactorComponentWrapperAddComponentButton } from './buttons/AddCompone
 /**
  * Выводить дополнительные отладочные инструменты
  */
-const debug = true
+const debug = false
 
 /**
  * Враппер для компонентов редактора.

src/ui/AddWidgetButton/AddWidgetModal/buttons/AddButton/index.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { AddWidgetModalButtonStyled } from '../../styles'
+import { AddWidgetButtonButtonProps } from '../interfaces'
+
+export const AddButtonWidgetButton: React.FC<AddWidgetButtonButtonProps> = ({
+  closeHandler,
+  object,
+  addComponent,
+  ...other
+}) => {
+  const buttonState = useState<HTMLButtonElement | null>(null)
+
+  useEffect(() => {
+    if (!buttonState[0]) {
+      return
+    }
+
+    const button = buttonState[0]
+
+    const onClick = () => {
+      //
+
+      addComponent({
+        name: 'HtmlTag',
+        component: 'HtmlTag',
+        props: {
+          style: {
+            borderRadius: '4px',
+            lineHeight: '120%',
+            display: 'inline-block',
+            textDecoration: 'none',
+            textAlign: 'center',
+            padding: '10px 20px',
+            backgroundColor: '#0087ee',
+            color: 'rgb(255, 255, 255)',
+            width: 'auto',
+            maxWidth: '100%',
+            overflowWrap: 'break-word',
+            position: 'relative',
+            border: 'none',
+          },
+          tag: 'button',
+        },
+        components: [
+          {
+            name: 'HtmlTag',
+            component: 'HtmlTag',
+            props: {
+              text: 'Отправить',
+            },
+            components: [],
+          },
+        ],
+      })
+
+      closeHandler()
+    }
+
+    button.addEventListener('click', onClick)
+
+    return () => {
+      button.removeEventListener('click', onClick)
+    }
+  }, [buttonState, object, closeHandler, addComponent])
+
+  return useMemo(() => {
+    return (
+      <>
+        <AddWidgetModalButtonStyled ref={buttonState[1]} {...other}>
+          <div
+            style={{
+              border: '1px solid',
+              padding: 10,
+              width: 85,
+              margin: '0 auto',
+              borderRadius: 5,
+            }}
+          >
+            Button
+            <br />
+            <br />
+          </div>
+        </AddWidgetModalButtonStyled>
+      </>
+    )
+  }, [buttonState, other])
+}

src/ui/AddWidgetButton/AddWidgetModal/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import { RedactorComponentObject } from '../../..'
 import { AddContentEditorWidgetButton } from './buttons/AddContentEditorWidgetButton'
 import { AddHeadWidgetButton } from './buttons/AddHead'
+import { AddButtonWidgetButton } from './buttons/AddButton'
 import { AddImageWidgetButton } from './buttons/AddImageWidgetButton'
 import { AddVideoWidgetButton } from './buttons/AddVideoWidgetButton'
 import { AddWidgetModalContext } from './Context'
@@ -83,6 +84,11 @@ export const AddWidgetModal: React.FC<AddWidgetModalProps> = ({
             object={object}
             addComponent={addComponent}
           />
+          <AddButtonWidgetButton
+            closeHandler={closeHandler}
+            object={object}
+            addComponent={addComponent}
+          />
           {buttons}
         </div>
       </AddWidgetModalStyled>,