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

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

@@ -1,113 +0,0 @@
-import React, { useState } from 'react'
-import { BasicEditor } from '../editor/basic-editor'
-import { EditorState, RichUtils, convertToRaw } from 'draft-js'
-import { Drawer, DrawerController } from '@keystone-ui/modals'
-import decorators from '../editor/entity-decorator'
-import draftConverter from '../editor/draft-converter'
-
-function escapeHTML(s) {
-  return s
-    .replace(/&/g, '&')
-    .replace(/"/g, '"')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/'/g, '&#39;')
-}
-
-export function AnnotationButton(props) {
-  const toggleEntity = RichUtils.toggleLink
-  const { isActive, editorState, onChange } = props
-  const [toShowInput, setToShowInput] = useState(false)
-  const [inputValue, setInputValue] = useState({
-    editorStateOfBasicEditor: EditorState.createEmpty(decorators),
-  })
-
-  const promptForAnnotation = (e) => {
-    e.preventDefault()
-    const selection = editorState.getSelection()
-    if (!selection.isCollapsed()) {
-      setToShowInput(true)
-    }
-  }
-
-  const confirmAnnotation = () => {
-    const contentState = editorState.getCurrentContent()
-    const rawContentState = convertToRaw(
-      inputValue.editorStateOfBasicEditor.getCurrentContent()
-    )
-    const bodyHTML = draftConverter.convertToHtml(rawContentState)
-    const contentStateWithEntity = contentState.createEntity(
-      'ANNOTATION',
-      'MUTABLE',
-      {
-        rawContentState,
-        bodyHTML,
-        bodyEscapedHTML: escapeHTML(bodyHTML),
-      }
-    )
-    const entityKey = contentStateWithEntity.getLastCreatedEntityKey()
-    const newEditorState = EditorState.set(editorState, {
-      currentContent: contentStateWithEntity,
-    })
-
-    onChange(
-      toggleEntity(newEditorState, newEditorState.getSelection(), entityKey)
-    )
-
-    setToShowInput(false)
-    setInputValue({
-      editorStateOfBasicEditor: EditorState.createEmpty(decorators),
-    })
-  }
-
-  const removeAnnotation = () => {
-    const selection = editorState.getSelection()
-    if (!selection.isCollapsed()) {
-      onChange(toggleEntity(editorState, selection, null))
-    }
-    setToShowInput(false)
-    setInputValue({
-      editorStateOfBasicEditor: EditorState.createEmpty(decorators),
-    })
-  }
-
-  const urlInput = (
-    <DrawerController isOpen={toShowInput}>
-      <Drawer
-        title="Insert Annotation"
-        actions={{
-          cancel: {
-            label: 'Cancel',
-            action: removeAnnotation,
-          },
-          confirm: {
-            label: 'Confirm',
-            action: confirmAnnotation,
-          },
-        }}
-      >
-        <BasicEditor
-          editorState={inputValue.editorStateOfBasicEditor}
-          onChange={(editorStateOfBasicEditor) => {
-            setInputValue({
-              editorStateOfBasicEditor,
-            })
-          }}
-        />
-      </Drawer>
-    </DrawerController>
-  )
-
-  return (
-    <React.Fragment>
-      {urlInput}
-      <div
-        className={props.className}
-        onMouseDown={isActive ? removeAnnotation : promptForAnnotation}
-      >
-        <i className="far"></i>
-        <span>Annotation</span>
-      </div>
-    </React.Fragment>
-  )
-}

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>
-  )
-}