@mirrormedia/lilith-draft-editor 1.0.0-beta

package/lib/draft-js/buttons/background-video.tsx

@@ -0,0 +1,275 @@
+import React, { useState, useEffect } from 'react'
+import decorators from '../editor/entity-decorator'
+import {
+  AtomicBlockUtils,
+  EditorState,
+  RawDraftContentState,
+  convertToRaw,
+  convertFromRaw,
+} from 'draft-js'
+import { BasicEditor } from '../editor/basic-editor'
+import { Drawer, DrawerController } from '@keystone-ui/modals'
+import { Button } from '@keystone-ui/button'
+import draftConverter from '../editor/draft-converter'
+import styled from 'styled-components'
+import {
+  VideoSelector as DefaultVideoSelector,
+  VideoEntity,
+  VideoEntityWithMeta,
+} from './selector/video-selector'
+import { AlignSelector } from './selector/align-selector'
+
+const Label = styled.label`
+  display: block;
+  font-weight: 600;
+  margin: 10px 0;
+`
+
+const VideoInputText = styled.span`
+  display: inline-block;
+  margin-right: 10px;
+`
+
+type BGVideoInputOnChange = ({
+  textBlockAlign,
+  video,
+  rawContentState,
+}: {
+  textBlockAlign: string
+  video?: VideoEntity
+  rawContentState: RawDraftContentState
+}) => void
+
+type BGVideoInputType = {
+  textBlockAlign?: string
+  video?: VideoEntity
+  rawContentStateForBGVideoEditor?: RawDraftContentState
+  isOpen: boolean
+  onChange: BGVideoInputOnChange
+  onCancel: () => void
+  VideoSelector: typeof DefaultVideoSelector
+}
+
+export function BGVideoInput(props: BGVideoInputType) {
+  const {
+    isOpen,
+    onChange,
+    onCancel,
+    textBlockAlign,
+    video,
+    rawContentStateForBGVideoEditor,
+    VideoSelector = DefaultVideoSelector,
+  } = props
+  const rawContentState = rawContentStateForBGVideoEditor || {
+    blocks: [],
+    entityMap: {},
+  }
+  const options = [
+    { value: 'fixed', label: 'fixed (default)', isDisabled: false },
+    { value: 'bottom', label: 'bottom', isDisabled: false },
+    { value: 'left', label: 'left', isDisabled: false },
+    { value: 'right', label: 'right', isDisabled: false },
+  ]
+  const initialInputValue: {
+    textBlockAlign: string
+    video?: VideoEntity
+    editorStateOfBasicEditor: EditorState
+  } = {
+    textBlockAlign: textBlockAlign || 'fixed',
+    video: video || undefined,
+    // create an `editorState` from raw content state object
+    editorStateOfBasicEditor: EditorState.createWithContent(
+      convertFromRaw(rawContentState),
+      decorators
+    ),
+  }
+
+  const [inputValue, setInputValue] = useState(initialInputValue)
+  const [toShowVideoSelector, setToShowVideoSelector] = useState(false)
+
+  const clearInputValue = () => {
+    setInputValue((oldInputValue) => ({
+      ...oldInputValue,
+      editorStateOfBasicEditor: EditorState.createWithContent(
+        convertFromRaw({
+          blocks: [],
+          entityMap: {},
+        }),
+        decorators
+      ),
+    }))
+  }
+
+  const onVideoSelectorChange = (
+    selectedVideosWithMeta: VideoEntityWithMeta[]
+  ) => {
+    const video = selectedVideosWithMeta?.[0]?.video
+    if (!video) {
+      setToShowVideoSelector(false)
+      return
+    }
+
+    setInputValue((oldInputValue) => ({
+      ...oldInputValue,
+      video: video,
+    }))
+    setToShowVideoSelector(false)
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      setInputValue(initialInputValue)
+    }
+  }, [isOpen])
+
+  return (
+    <>
+      {toShowVideoSelector && (
+        <VideoSelector onChange={onVideoSelectorChange} />
+      )}
+      <DrawerController isOpen={isOpen}>
+        <Drawer
+          title={`Insert Background Video`}
+          actions={{
+            cancel: {
+              label: 'Cancel',
+              action: () => {
+                clearInputValue()
+                onCancel()
+              },
+            },
+            confirm: {
+              label: 'Confirm',
+              action: () => {
+                onChange({
+                  textBlockAlign: inputValue.textBlockAlign,
+                  video: inputValue.video,
+                  // convert `contentState` of the `editorState` into raw content state object
+                  rawContentState: convertToRaw(
+                    inputValue.editorStateOfBasicEditor.getCurrentContent()
+                  ),
+                })
+                clearInputValue()
+              },
+            },
+          }}
+        >
+          <Label>影片</Label>
+          <div>
+            <VideoInputText>
+              {inputValue.video?.name ? inputValue.video.name : '尚未選取影片'}
+            </VideoInputText>
+            <Button
+              type="button"
+              onClick={() => setToShowVideoSelector(true)}
+              tone="passive"
+            >
+              添加影片
+            </Button>
+          </div>
+          <AlignSelector
+            align={inputValue.textBlockAlign}
+            options={options}
+            onChange={(textBlockAlign) => {
+              setInputValue((oldInputValue) => ({
+                ...oldInputValue,
+                textBlockAlign,
+              }))
+            }}
+          />
+          <Label>內文</Label>
+          <BasicEditor
+            editorState={inputValue.editorStateOfBasicEditor}
+            onChange={(editorStateOfBasicEditor) => {
+              setInputValue((oldInputValue) => ({
+                ...oldInputValue,
+                editorStateOfBasicEditor,
+              }))
+            }}
+          />
+        </Drawer>
+      </DrawerController>
+    </>
+  )
+}
+
+type BGVideoButtonProps = {
+  className: string
+  editorState: EditorState
+  onChange: ({ editorState }: { editorState: EditorState }) => void
+  VideoSelector: typeof DefaultVideoSelector
+}
+
+export function BGVideoButton(props: BGVideoButtonProps) {
+  const [toShowInput, setToShowInput] = useState(false)
+  const {
+    className,
+    editorState,
+    onChange: onEditorStateChange,
+    VideoSelector,
+  } = props
+
+  const onChange: BGVideoInputOnChange = ({
+    textBlockAlign,
+    video,
+    rawContentState,
+  }) => {
+    const contentState = editorState.getCurrentContent()
+
+    // create an BGVideo entity
+    const contentStateWithEntity = contentState.createEntity(
+      'BACKGROUNDVIDEO',
+      'IMMUTABLE',
+      {
+        textBlockAlign,
+        video,
+        rawContentState,
+        body: draftConverter.convertToHtml(rawContentState),
+      }
+    )
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey()
+    const newEditorState = EditorState.set(editorState, {
+      currentContent: contentStateWithEntity,
+    })
+
+    //The third parameter here is a space string, not an empty string
+    //If you set an empty string, you will get an error: Unknown DraftEntity key: null
+    onEditorStateChange(
+      AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ')
+    )
+    setToShowInput(false)
+  }
+
+  return (
+    <React.Fragment>
+      <BGVideoInput
+        onChange={onChange}
+        onCancel={() => {
+          setToShowInput(false)
+        }}
+        isOpen={toShowInput}
+        VideoSelector={VideoSelector}
+      />
+      <div
+        className={className}
+        onClick={() => {
+          setToShowInput(true)
+        }}
+      >
+        <svg
+          width="16"
+          height="10"
+          viewBox="0 0 16 10"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10.6667 1.25V8.75C10.6667 9.44036 10.0697 10 9.33333 10H1.33333C0.596944 10 0 9.44036 0 8.75V1.25C0 0.559635 0.596944 0 1.33333 0H9.33333C10.0694 0 10.6667 0.559635 10.6667 1.25ZM16 1.65365V8.34375C16 9.00781 15.1897 9.39557 14.6003 9.01536L11.5556 7.04948V2.95052L14.6 0.982812C15.1917 0.602344 16 0.992188 16 1.65365Z"
+            fill="#6b7280"
+          />
+        </svg>
+        <span>Background Video</span>
+      </div>
+    </React.Fragment>
+  )
+}

package/lib/draft-js/buttons/color-box.tsx

@@ -0,0 +1,207 @@
+import React, { useState, useEffect } from 'react'
+import decorators from '../editor/entity-decorator'
+import {
+  AtomicBlockUtils,
+  EditorState,
+  RawDraftContentState,
+  convertToRaw,
+  convertFromRaw,
+} from 'draft-js'
+import { BasicEditor } from '../editor/basic-editor'
+import { Drawer, DrawerController } from '@keystone-ui/modals'
+import { TextInput } from '@keystone-ui/fields'
+import draftConverter from '../editor/draft-converter'
+import styled from 'styled-components'
+
+const Label = styled.label`
+  display: block;
+  font-weight: 600;
+  margin: 10px 0;
+`
+
+const ColorHexInput = styled(TextInput)`
+  margin-bottom: 10px;
+`
+
+type ColorBoxInputType = {
+  color?: string
+  rawContentStateForColorBoxEditor?: RawDraftContentState
+  isOpen: boolean
+  onChange: ({
+    color,
+    rawContentState,
+  }: {
+    color: string
+    rawContentState: RawDraftContentState
+  }) => void
+  onCancel: () => void
+}
+
+export function ColorBoxInput(props: ColorBoxInputType) {
+  const {
+    isOpen,
+    onChange,
+    onCancel,
+    color,
+    rawContentStateForColorBoxEditor,
+  } = props
+  const rawContentState = rawContentStateForColorBoxEditor || {
+    blocks: [],
+    entityMap: {},
+  }
+  const initialInputValue = {
+    color: color || '',
+    // create an `editorState` from raw content state object
+    editorStateOfBasicEditor: EditorState.createWithContent(
+      convertFromRaw(rawContentState),
+      decorators
+    ),
+  }
+
+  const [inputValue, setInputValue] = useState(initialInputValue)
+
+  const clearInputValue = () => {
+    setInputValue({
+      color: '',
+      editorStateOfBasicEditor: EditorState.createWithContent(
+        convertFromRaw({
+          blocks: [],
+          entityMap: {},
+        }),
+        decorators
+      ),
+    })
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      setInputValue(initialInputValue)
+    }
+  }, [isOpen])
+
+  return (
+    <DrawerController isOpen={isOpen}>
+      <Drawer
+        title={`Insert Color Box`}
+        actions={{
+          cancel: {
+            label: 'Cancel',
+            action: () => {
+              clearInputValue()
+              onCancel()
+            },
+          },
+          confirm: {
+            label: 'Confirm',
+            action: () => {
+              onChange({
+                color: inputValue.color,
+                // convert `contentState` of the `editorState` into raw content state object
+                rawContentState: convertToRaw(
+                  inputValue.editorStateOfBasicEditor.getCurrentContent()
+                ),
+              })
+              clearInputValue()
+            },
+          },
+        }}
+      >
+        <Label>Hex Color Code (#ffffff)</Label>
+        <ColorHexInput
+          onChange={(e) =>
+            setInputValue({
+              color: e.target.value,
+              editorStateOfBasicEditor: inputValue.editorStateOfBasicEditor,
+            })
+          }
+          type="text"
+          placeholder="Color"
+          value={inputValue.color}
+        />
+        <Label>內文</Label>
+        <BasicEditor
+          editorState={inputValue.editorStateOfBasicEditor}
+          onChange={(editorStateOfBasicEditor) => {
+            setInputValue({
+              color: inputValue.color,
+              editorStateOfBasicEditor,
+            })
+          }}
+        />
+      </Drawer>
+    </DrawerController>
+  )
+}
+
+type ColorBoxButtonProps = {
+  className: string
+  editorState: EditorState
+  onChange: ({ editorState }: { editorState: EditorState }) => void
+}
+
+export function ColorBoxButton(props: ColorBoxButtonProps) {
+  const [toShowInput, setToShowInput] = useState(false)
+  const { className, editorState, onChange: onEditorStateChange } = props
+
+  const onChange = ({ color, rawContentState }) => {
+    const contentState = editorState.getCurrentContent()
+
+    // create an ColorBox entity
+    const contentStateWithEntity = contentState.createEntity(
+      'COLORBOX',
+      'IMMUTABLE',
+      {
+        color,
+        rawContentState,
+        body: draftConverter.convertToHtml(rawContentState),
+      }
+    )
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey()
+    const newEditorState = EditorState.set(editorState, {
+      currentContent: contentStateWithEntity,
+    })
+
+    //The third parameter here is a space string, not an empty string
+    //If you set an empty string, you will get an error: Unknown DraftEntity key: null
+    onEditorStateChange(
+      AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ')
+    )
+    setToShowInput(false)
+  }
+
+  return (
+    <React.Fragment>
+      <ColorBoxInput
+        onChange={onChange}
+        onCancel={() => {
+          setToShowInput(false)
+        }}
+        isOpen={toShowInput}
+      />
+      <div
+        className={className}
+        onClick={() => {
+          setToShowInput(true)
+        }}
+      >
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 0H2C0.895431 0 0 0.895431 0 2V14C0 15.1046 0.895431 16 2 16H14C15.1046 16 16 15.1046 16 14V2C16 0.895431 15.1046 0 14 0Z"
+            fill="#6b7280"
+          />
+          <path
+            d="M12.3867 2.66667H3.61332C3.36225 2.66667 3.12146 2.76641 2.94393 2.94394C2.76639 3.12148 2.66666 3.36227 2.66666 3.61334V5.51112C2.68312 5.75156 2.79025 5.97678 2.96639 6.14127C3.14253 6.30576 3.37454 6.39725 3.61555 6.39725C3.85655 6.39725 4.08856 6.30576 4.2647 6.14127C4.44084 5.97678 4.54797 5.75156 4.56443 5.51112V4.56445H6.94221V11.4356H5.99555C5.86547 11.4267 5.73496 11.4446 5.61211 11.4882C5.48926 11.5319 5.3767 11.6003 5.28141 11.6893C5.18612 11.7783 5.11015 11.8859 5.0582 12.0055C5.00626 12.1251 4.97946 12.2541 4.97946 12.3844C4.97946 12.5148 5.00626 12.6438 5.0582 12.7634C5.11015 12.883 5.18612 12.9906 5.28141 13.0796C5.3767 13.1686 5.48926 13.237 5.61211 13.2807C5.73496 13.3243 5.86547 13.3422 5.99555 13.3333H9.78666C10.0271 13.3169 10.2523 13.2097 10.4168 13.0336C10.5813 12.8575 10.6728 12.6255 10.6728 12.3844C10.6728 12.1434 10.5813 11.9114 10.4168 11.7353C10.2523 11.5592 10.0271 11.452 9.78666 11.4356H8.83999V4.56445H11.4355V5.51112C11.452 5.75156 11.5591 5.97678 11.7353 6.14127C11.9114 6.30576 12.1434 6.39725 12.3844 6.39725C12.6254 6.39725 12.8575 6.30576 13.0336 6.14127C13.2097 5.97678 13.3169 5.75156 13.3333 5.51112V3.61334C13.3333 3.36227 13.2336 3.12148 13.0561 2.94394C12.8785 2.76641 12.6377 2.66667 12.3867 2.66667Z"
+            fill="white"
+          />
+        </svg>
+        <span> ColorBox</span>
+      </div>
+    </React.Fragment>
+  )
+}

package/lib/draft-js/buttons/divider.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { AtomicBlockUtils, EditorState } from 'draft-js'
+import styled from 'styled-components'
+
+const IconWrapper = styled.span`
+  display: inline-block;
+  position: relative;
+  top: 2px;
+`
+
+export function DividerButton(props) {
+  const { editorState, onChange, className } = props
+
+  const onClick = () => {
+    const contentState = editorState.getCurrentContent()
+    const contentStateWithEntity = contentState.createEntity(
+      'DIVIDER',
+      'IMMUTABLE',
+      {}
+    )
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey()
+    const newEditorState = EditorState.set(editorState, {
+      currentContent: contentStateWithEntity,
+    })
+
+    // The third parameter here is a space string, not an empty string
+    // If you set an empty string, you will get an error: Unknown DraftEntity key: null
+    onChange(AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '))
+  }
+
+  return (
+    <React.Fragment>
+      <div onClick={onClick} className={className}>
+        <IconWrapper>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <g fill="none" fillRule="evenodd">
+              <path d="M0 0h16v16H0z" />
+              <path
+                d="M15 10.501a0.5 0.5 0 0 1 0.496 0.442l0.004 0.059v2.031a2.468 2.468 0 0 1 -2.361 2.466l-0.107 0.003H2.967a2.467 2.467 0 0 1 -2.465 -2.36L0.5 13.032v-2.03a0.5 0.5 0 0 1 0.997 -0.058l0.004 0.059v2.03a1.468 1.468 0 0 0 1.381 1.464l0.086 0.003h10.065a1.468 1.468 0 0 0 1.466 -1.382l0.003 -0.086v-2.031a0.5 0.5 0 0 1 0.5 -0.5zM15.5 7.5a0.5 0.5 0 0 1 0 1H0.5a0.5 0.5 0 0 1 0 -1zM13.029 0.5a2.471 2.471 0 0 1 2.469 2.364l0.003 0.107v2.031a0.5 0.5 0 0 1 -0.997 0.058L14.5 5.003V2.971a1.471 1.471 0 0 0 -1.385 -1.468L13.029 1.5H2.97a1.47 1.47 0 0 0 -1.467 1.383L1.5 2.97V5a0.5 0.5 0 0 1 -0.997 0.058L0.5 5V2.97a2.47 2.47 0 0 1 2.362 -2.467L2.97 0.5z"
+                fill="#6b7280"
+                fillRule="nonzero"
+                stroke="#6b7280"
+                strokeWidth="0.5"
+              />
+            </g>
+          </svg>
+        </IconWrapper>
+      </div>
+    </React.Fragment>
+  )
+}

package/lib/draft-js/buttons/embedded-code.tsx

@@ -0,0 +1,126 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { AtomicBlockUtils, EditorState } from 'draft-js'
+import { Drawer, DrawerController } from '@keystone-ui/modals'
+import { TextInput, TextArea } from '@keystone-ui/fields'
+
+export const Block = styled.div`
+  position: relative;
+  /* styles for image link */
+  img.img-responsive {
+    margin: 0 auto;
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+`
+
+export const Caption = styled.div`
+  line-height: 1.43;
+  letter-spacing: 0.4px;
+  font-size: 14px;
+  color: #808080;
+  padding: 15px 15px 0 15px;
+`
+
+export function EmbeddedCodeButton(props) {
+  const { editorState, onChange, className } = props
+
+  const [toShowInput, setToShowInput] = useState(false)
+  const [inputValue, setInputValue] = useState({
+    caption: '',
+    embeddedCode: '',
+  })
+
+  const promptForInput = () => {
+    setToShowInput(true)
+    setInputValue({
+      caption: '',
+      embeddedCode: '',
+    })
+  }
+
+  const confirmInput = () => {
+    const contentState = editorState.getCurrentContent()
+    const contentStateWithEntity = contentState.createEntity(
+      'EMBEDDEDCODE',
+      'IMMUTABLE',
+      inputValue
+    )
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey()
+    const newEditorState = EditorState.set(editorState, {
+      currentContent: contentStateWithEntity,
+    })
+
+    // The third parameter here is a space string, not an empty string
+    // If you set an empty string, you will get an error: Unknown DraftEntity key: null
+    onChange(AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '))
+
+    setToShowInput(false)
+    setInputValue({
+      caption: '',
+      embeddedCode: '',
+    })
+  }
+
+  const input = (
+    <DrawerController isOpen={toShowInput}>
+      <Drawer
+        title={`Insert Embedded Code`}
+        //isOpen={toShowInput}
+        actions={{
+          cancel: {
+            label: 'Cancel',
+            action: () => {
+              setToShowInput(false)
+            },
+          },
+          confirm: {
+            label: 'Confirm',
+            action: confirmInput,
+          },
+        }}
+      >
+        <TextInput
+          onChange={(e) =>
+            setInputValue({
+              caption: e.target.value,
+              embeddedCode: inputValue.embeddedCode,
+            })
+          }
+          type="text"
+          placeholder="Caption"
+          value={inputValue.caption}
+          style={{ marginBottom: '10px', marginTop: '30px' }}
+        />
+        <TextArea
+          onChange={(e) =>
+            setInputValue({
+              caption: inputValue.caption,
+              embeddedCode: e.target.value,
+            })
+          }
+          placeholder="Embedded Code"
+          type="text"
+          value={inputValue.embeddedCode}
+          style={{ marginBottom: '30px' }}
+        />
+      </Drawer>
+    </DrawerController>
+  )
+
+  return (
+    <React.Fragment>
+      {input}
+      <div
+        onClick={() => {
+          promptForInput()
+        }}
+        className={className}
+      >
+        <i className="far"></i>
+        <span>Embed</span>
+      </div>
+    </React.Fragment>
+  )
+}

package/lib/draft-js/buttons/enlarge.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export function EnlargeButton(props) {
+  const { onToggle, isEnlarged, className } = props
+
+  return (
+    <div className={className} onClick={onToggle}>
+      <i className={isEnlarged ? 'fas fa-compress' : 'fas fa-expand'}></i>
+    </div>
+  )
+}