@mirrormedia/lilith-draft-editor 1.0.0-beta → 1.0.0-beta2

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

@@ -1,125 +0,0 @@
-import React, { useState } from 'react'
-import { AlertDialog } from '@keystone-ui/modals'
-import { EditorState } from 'draft-js'
-import { TextInput } from '@keystone-ui/fields'
-import styled from 'styled-components'
-import { Modifier } from '../editor/modifier'
-
-const ColorHexInput = styled(TextInput)`
-  font-family: Georgia, serif;
-  margin-right: 10px;
-  padding: 10px;
-`
-
-export const CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR = 'BACKGROUND_COLOR_'
-
-export function BackgroundColorButton(props) {
-  const { isActive, editorState, onChange } = props
-
-  const [toShowColorInput, setToShowColorInput] = useState(false)
-  const [colorValue, setColorValue] = useState('')
-
-  const promptForColor = (e) => {
-    e.preventDefault()
-    const selection = editorState.getSelection()
-    if (!selection.isCollapsed()) {
-      setToShowColorInput(true)
-    }
-  }
-
-  const confirmColor = () => {
-    const selection = editorState.getSelection()
-    const contentState = editorState.getCurrentContent()
-    let newContentState = Modifier.removeInlineStyleByPrefix(
-      contentState,
-      selection,
-      CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR
-    )
-    if (colorValue) {
-      newContentState = Modifier.applyInlineStyle(
-        newContentState,
-        selection,
-        CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR + colorValue
-      )
-    }
-    onChange(
-      EditorState.push(editorState, newContentState, 'change-inline-style')
-    )
-
-    setToShowColorInput(false)
-    setColorValue('')
-  }
-
-  const onColorInputKeyDown = (e) => {
-    if (e.which === 13) {
-      e.preventDefault()
-      confirmColor()
-    }
-  }
-
-  const removeColor = () => {
-    const selection = editorState.getSelection()
-
-    if (!selection.isCollapsed()) {
-      const contentState = editorState.getCurrentContent()
-      const newContentState = Modifier.removeInlineStyleByPrefix(
-        contentState,
-        selection,
-        CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR
-      )
-      onChange(
-        EditorState.push(editorState, newContentState, 'change-inline-style')
-      )
-    }
-    setToShowColorInput(false)
-    setColorValue('')
-  }
-
-  const colorInput = (
-    <AlertDialog
-      title="Hex Color Code (#ffffff)"
-      isOpen={toShowColorInput}
-      actions={{
-        cancel: {
-          label: 'Cancel',
-          action: removeColor,
-        },
-        confirm: {
-          label: 'Confirm',
-          action: confirmColor,
-        },
-      }}
-    >
-      <ColorHexInput
-        onChange={(e) => setColorValue(e.target.value)}
-        type="text"
-        value={colorValue}
-        onKeyDown={onColorInputKeyDown}
-      />
-    </AlertDialog>
-  )
-
-  return (
-    <React.Fragment>
-      {colorInput}
-      <div
-        className={props.className}
-        onMouseDown={isActive ? removeColor : promptForColor}
-      >
-        <svg
-          width="16"
-          height="14"
-          viewBox="0 0 16 14"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M3.74443 8.75V6.78945C3.74443 6.37109 3.98306 5.98008 4.34542 5.73125L12.3911 0.229633C12.6091 0.0804726 12.8477 0 13.1453 0C13.4811 0 13.8022 0.124113 14.0409 0.345078L15.6553 1.84242C15.8939 2.06336 16 2.36305 16 2.67531C16 2.92578 15.9411 3.14727 15.779 3.37422L9.85159 10.8418C9.5835 11.1781 9.1357 11.375 8.71147 11.375H6.57264L5.85086 12.0695C5.4826 12.4113 4.8875 12.4113 4.51924 12.0695L3.02265 10.6805C2.65439 10.3387 2.65439 9.78633 3.02265 9.44453L3.74443 8.75ZM13.9466 2.73219L13.0834 1.9302L6.74646 6.26172L9.25354 8.58867L13.9466 2.73219ZM0.207107 12.7504L2.064 11.0277L4.14509 12.9582L3.23182 13.784C3.09925 13.9316 2.91954 14 2.73099 14H0.707052C0.3167 14 0 13.7074 0 13.3438V13.2152C0 13.0184 0.0745351 12.8734 0.207107 12.7504Z"
-            fill={isActive ? '#ED8B00' : '#6b7280'}
-          />
-        </svg>
-        <span> Highlight</span>
-      </div>
-    </React.Fragment>
-  )
-}

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

@@ -1,276 +0,0 @@
-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 {
-  ImageSelector as DefaultImageSelector,
-  ImageEntityWithMeta,
-  ImageEntity,
-} from './selector/image-selector'
-import { AlignSelector } from './selector/align-selector'
-
-const Label = styled.label`
-  display: block;
-  font-weight: 600;
-  margin: 10px 0;
-`
-
-const ImageInputText = styled.span`
-  display: inline-block;
-  margin-right: 10px;
-`
-
-type BGImageInputOnChange = ({
-  textBlockAlign,
-  image,
-  rawContentState,
-}: {
-  textBlockAlign: string
-  image?: ImageEntity
-  rawContentState: RawDraftContentState
-}) => void
-
-type BGImageInputType = {
-  textBlockAlign?: string
-  image?: ImageEntity
-  rawContentStateForBGImageEditor?: RawDraftContentState
-  isOpen: boolean
-  onChange: BGImageInputOnChange
-  onCancel: () => void
-  ImageSelector: typeof DefaultImageSelector
-}
-
-export function BGImageInput(props: BGImageInputType) {
-  const {
-    isOpen,
-    onChange,
-    onCancel,
-    textBlockAlign,
-    image,
-    rawContentStateForBGImageEditor,
-    ImageSelector = DefaultImageSelector,
-  } = props
-
-  const rawContentState = rawContentStateForBGImageEditor || {
-    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
-    image?: ImageEntity
-    editorStateOfBasicEditor: EditorState
-  } = {
-    textBlockAlign: textBlockAlign || 'fixed',
-    image: image || undefined,
-    // create an `editorState` from raw content state object
-    editorStateOfBasicEditor: EditorState.createWithContent(
-      convertFromRaw(rawContentState),
-      decorators
-    ),
-  }
-
-  const [inputValue, setInputValue] = useState(initialInputValue)
-  const [toShowImageSelector, setToShowImageSelector] = useState(false)
-
-  const clearInputValue = () => {
-    setInputValue((oldInputValue) => ({
-      ...oldInputValue,
-      editorStateOfBasicEditor: EditorState.createWithContent(
-        convertFromRaw({
-          blocks: [],
-          entityMap: {},
-        }),
-        decorators
-      ),
-    }))
-  }
-
-  const onImageSelectorChange = (
-    selectedImagesWithMeta: ImageEntityWithMeta[]
-  ) => {
-    const image = selectedImagesWithMeta?.[0]?.image
-    if (!image) {
-      setToShowImageSelector(false)
-      return
-    }
-
-    setInputValue((oldInputValue) => ({
-      ...oldInputValue,
-      image: image,
-    }))
-    setToShowImageSelector(false)
-  }
-
-  useEffect(() => {
-    if (isOpen) {
-      setInputValue(initialInputValue)
-    }
-  }, [isOpen])
-
-  return (
-    <>
-      {toShowImageSelector && (
-        <ImageSelector onChange={onImageSelectorChange} />
-      )}
-      <DrawerController isOpen={isOpen}>
-        <Drawer
-          title={`Insert Background Image`}
-          actions={{
-            cancel: {
-              label: 'Cancel',
-              action: () => {
-                clearInputValue()
-                onCancel()
-              },
-            },
-            confirm: {
-              label: 'Confirm',
-              action: () => {
-                onChange({
-                  textBlockAlign: inputValue.textBlockAlign,
-                  image: inputValue.image,
-                  // convert `contentState` of the `editorState` into raw content state object
-                  rawContentState: convertToRaw(
-                    inputValue.editorStateOfBasicEditor.getCurrentContent()
-                  ),
-                })
-                clearInputValue()
-              },
-            },
-          }}
-        >
-          <Label>圖片</Label>
-          <div>
-            <ImageInputText>
-              {inputValue.image?.name ? inputValue.image.name : '尚未選取圖片'}
-            </ImageInputText>
-            <Button
-              type="button"
-              onClick={() => setToShowImageSelector(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 BGImageButtonProps = {
-  className: string
-  editorState: EditorState
-  onChange: ({ editorState }: { editorState: EditorState }) => void
-  ImageSelector: typeof DefaultImageSelector
-}
-
-export function BGImageButton(props: BGImageButtonProps) {
-  const [toShowInput, setToShowInput] = useState(false)
-  const {
-    className,
-    editorState,
-    onChange: onEditorStateChange,
-    ImageSelector,
-  } = props
-
-  const onChange: BGImageInputOnChange = ({
-    textBlockAlign,
-    image,
-    rawContentState,
-  }) => {
-    const contentState = editorState.getCurrentContent()
-
-    // create an BGImage entity
-    const contentStateWithEntity = contentState.createEntity(
-      'BACKGROUNDIMAGE',
-      'IMMUTABLE',
-      {
-        textBlockAlign,
-        image,
-        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>
-      <BGImageInput
-        onChange={onChange}
-        onCancel={() => {
-          setToShowInput(false)
-        }}
-        isOpen={toShowInput}
-        ImageSelector={ImageSelector}
-      />
-      <div
-        className={className}
-        onClick={() => {
-          setToShowInput(true)
-        }}
-      >
-        <svg
-          width="16"
-          height="14"
-          viewBox="0 0 16 14"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M7.42974 10.2188C7.01697 9.80208 6.81059 9.29167 6.81059 8.6875C6.81059 8.08333 7.02783 7.57292 7.46232 7.15625C7.89681 6.73958 8.41819 6.53125 9.02648 6.53125C9.65648 6.53125 10.1887 6.73958 10.6232 7.15625C11.0577 7.57292 11.2749 8.08333 11.2749 8.6875C11.2749 9.27083 11.0577 9.77083 10.6232 10.1875C10.1887 10.6042 9.65648 10.8125 9.02648 10.8125C8.39647 10.8125 7.86422 10.6146 7.42974 10.2188ZM6.58248 11.0312C7.25594 11.6771 8.0706 12 9.02648 12C9.98235 12 10.797 11.6771 11.4705 11.0312C12.1656 10.3854 12.5132 9.60417 12.5132 8.6875C12.5132 7.77083 12.1656 6.98958 11.4705 6.34375C10.797 5.67708 9.98235 5.34375 9.02648 5.34375C8.0706 5.34375 7.25594 5.67708 6.58248 6.34375C5.90903 6.98958 5.5723 7.77083 5.5723 8.6875C5.5723 9.60417 5.90903 10.3854 6.58248 11.0312ZM4.17108 6V4H6.25662V2H11.112L12.3829 3.34375H14.5988C14.9681 3.34375 15.294 3.47917 15.5764 3.75C15.8588 4.02083 16 4.33333 16 4.6875V12.6875C16 13.0417 15.8588 13.3542 15.5764 13.625C15.294 13.875 14.9681 14 14.5988 14H3.48676C3.11745 14 2.79158 13.875 2.50916 13.625C2.22675 13.3542 2.08554 13.0417 2.08554 12.6875V6H4.17108ZM2.08554 2V0H3.48676V2H5.5723V3.34375H3.48676V5.34375H2.08554V3.34375H0V2H2.08554Z"
-            fill="#6b7280"
-          />
-        </svg>
-        <span>Background Image</span>
-      </div>
-    </React.Fragment>
-  )
-}

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

@@ -1,275 +0,0 @@
-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>
-  )
-}