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

package/lib/draft-js/editor/basic-editor.tsx

@@ -1,384 +0,0 @@
-import React from 'react'
-import decorators from './entity-decorator'
-import {
-  Editor,
-  EditorState,
-  KeyBindingUtil,
-  RichUtils,
-  getDefaultKeyBinding,
-} from 'draft-js'
-import { LinkButton } from '../buttons/link'
-import {
-  FontColorButton,
-  CUSTOM_STYLE_PREFIX_FONT_COLOR,
-} from '../buttons/font-color'
-import styled, { css } from 'styled-components'
-
-const DraftEditor = styled.div`
-  position: relative;
-  margin-top: 4px;
-`
-
-const DraftEditorWrapper = styled.div`
-  /* Rich-editor default setting (.RichEditor-root)*/
-  background: #fff;
-  border: 1px solid #ddd;
-  font-family: 'Georgia', serif;
-  font-size: 14px;
-  padding: 15px;
-
-  /* Custom setting */
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  width: 100%;
-  height: 100%;
-  background: rgb(255, 255, 255);
-  border-radius: 6px;
-  padding: 0 1rem 1rem;
-`
-
-const DraftEditorControls = styled.div`
-  padding-top: 1rem;
-  width: 100%;
-  background: rgb(255, 255, 255);
-`
-
-const DraftEditorControlsWrapper = styled.div`
-  width: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  padding-right: 45px;
-`
-
-const ButtonGroup = styled.div`
-  margin: 0 10px 0 0;
-`
-
-const buttonStyle = css`
-  /* Rich-editor default setting (.RichEditor-styleButton)*/
-  cursor: pointer;
-  margin-right: 16px;
-  padding: 2px 0;
-  display: inline-block;
-  /* Custom Setting */
-  border-radius: 6px;
-  font-size: 1rem;
-  padding: 8px 12px;
-  margin: 0px 0px 10px 0px;
-  border: solid 1px rgb(193, 199, 208);
-`
-
-const CustomButton = styled.div<{ isActive: boolean }>`
-  ${buttonStyle}
-  border: solid 1px
-  ${(props) => (props.isActive ? 'rgb(38,132,255)' : 'rgb(193, 199, 208)')};
-  box-shadow: ${(props) =>
-    props.isActive ? 'rgba(38, 132, 255, 20%)  0px 0px 0px 3px  ' : 'unset'};
-  transition: box-shadow 100ms linear;
-  color: ${(props) => (props.isActive ? 'rgb(23, 43, 77)' : '#999')};
-`
-
-const CustomLinkButton = styled(LinkButton)<{ isActive: boolean }>`
-  ${buttonStyle}
-  color: ${(props) => (props.isActive ? '#5890ff' : '#999')};
-`
-
-const CustomFontColorButton = styled(FontColorButton)<{ isActive: boolean }>`
-  ${buttonStyle}
-  color: ${(props) => (props.isActive ? '#5890ff' : '#999')};
-`
-
-const TextEditorWrapper = styled.div`
-  /* Rich-editor default setting (.RichEditor-editor)*/
-  border-top: 1px solid #ddd;
-  cursor: text;
-  font-size: 16px;
-  margin-top: 10px;
-  /* Custom setting */
-  h2 {
-    font-size: 22px;
-  }
-  h3 {
-    font-size: 17.5px;
-  }
-  font-weight: normal;
-  max-width: 800px;
-`
-
-type BasicEditorProps = {
-  onChange: (editorState) => void
-  editorState: EditorState
-}
-
-export class BasicEditor extends React.Component<BasicEditorProps> {
-  onChange = (editorState) => {
-    this.props.onChange(editorState)
-  }
-
-  handleKeyCommand = (command, editorState) => {
-    const newState = RichUtils.handleKeyCommand(editorState, command)
-    if (newState) {
-      this.onChange(newState)
-      return true
-    }
-    return false
-  }
-
-  handleReturn = (event) => {
-    if (KeyBindingUtil.isSoftNewlineEvent(event)) {
-      const { onChange, editorState } = this.props
-      onChange(RichUtils.insertSoftNewline(editorState))
-      return 'handled'
-    }
-
-    return 'not-handled'
-  }
-
-  mapKeyToEditorCommand = (e) => {
-    if (e.keyCode === 9 /* TAB */) {
-      const newEditorState = RichUtils.onTab(
-        e,
-        this.props.editorState,
-        4 /* maxDepth */
-      )
-      if (newEditorState !== this.props.editorState) {
-        this.onChange(newEditorState)
-      }
-      return
-    }
-    return getDefaultKeyBinding(e)
-  }
-
-  toggleBlockType = (blockType) => {
-    this.onChange(RichUtils.toggleBlockType(this.props.editorState, blockType))
-  }
-
-  toggleInlineStyle = (inlineStyle) => {
-    this.onChange(
-      RichUtils.toggleInlineStyle(this.props.editorState, inlineStyle)
-    )
-  }
-
-  getEntityType = (editorState) => {
-    const contentState = editorState.getCurrentContent()
-    const selection = editorState.getSelection()
-    const startOffset = selection.getStartOffset()
-    const startBlock = editorState
-      .getCurrentContent()
-      .getBlockForKey(selection.getStartKey())
-
-    const endOffset = selection.getEndOffset()
-    let entityInstance
-    let entityKey
-
-    if (!selection.isCollapsed()) {
-      entityKey = startBlock.getEntityAt(startOffset)
-    } else {
-      entityKey = startBlock.getEntityAt(endOffset)
-    }
-
-    if (entityKey !== null) {
-      entityInstance = contentState.getEntity(entityKey)
-    }
-
-    let entityType = ''
-    if (entityInstance) {
-      entityType = entityInstance.getType()
-    }
-
-    return entityType
-  }
-
-  getCustomStyle = (style) => {
-    return style.reduce((styles, styleName) => {
-      if (styleName?.startsWith(CUSTOM_STYLE_PREFIX_FONT_COLOR)) {
-        styles['color'] = styleName.split(CUSTOM_STYLE_PREFIX_FONT_COLOR)[1]
-      }
-      return styles
-    }, {})
-  }
-
-  customStyleFn = (style) => {
-    return this.getCustomStyle(style)
-  }
-
-  render() {
-    let { editorState } = this.props
-    if (!(editorState instanceof EditorState)) {
-      editorState = EditorState.createEmpty(decorators)
-    }
-
-    const entityType = this.getEntityType(editorState)
-    const customStyle = this.getCustomStyle(editorState.getCurrentInlineStyle())
-
-    return (
-      <DraftEditor>
-        <DraftEditorWrapper>
-          <link
-            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
-            rel="stylesheet"
-            type="text/css"
-          />
-          <link
-            href="https://storage.googleapis.com/static-readr-tw-dev/cdn/draft-js/rich-editor.css"
-            rel="stylesheet"
-            type="text/css"
-          />
-          <link
-            href="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.11.7/Draft.css"
-            rel="stylesheet"
-            type="text/css"
-          />
-          <link
-            href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
-            rel="stylesheet"
-            type="text/css"
-          />
-          <DraftEditorControls>
-            <DraftEditorControlsWrapper>
-              <ButtonGroup>
-                <BlockStyleControls
-                  editorState={editorState}
-                  onToggle={this.toggleBlockType}
-                />
-              </ButtonGroup>
-              <ButtonGroup>
-                <InlineStyleControls
-                  editorState={editorState}
-                  onToggle={this.toggleInlineStyle}
-                />
-              </ButtonGroup>
-              <ButtonGroup>
-                <CustomLinkButton
-                  isActive={entityType === 'LINK'}
-                  editorState={editorState}
-                  onChange={this.onChange}
-                />
-                <CustomFontColorButton
-                  isActive={Object.prototype.hasOwnProperty.call(
-                    customStyle,
-                    'color'
-                  )}
-                  editorState={editorState}
-                  onChange={this.onChange}
-                />
-              </ButtonGroup>
-            </DraftEditorControlsWrapper>
-          </DraftEditorControls>
-          <TextEditorWrapper
-            onClick={() => {
-              // eslint-disable-next-line prettier/prettier
-              (this.refs.basicEditor as HTMLElement)?.focus()
-            }}
-          >
-            <Editor
-              blockStyleFn={getBlockStyle}
-              customStyleFn={this.customStyleFn}
-              editorState={editorState}
-              handleKeyCommand={this.handleKeyCommand}
-              handleReturn={this.handleReturn}
-              keyBindingFn={this.mapKeyToEditorCommand}
-              onChange={this.onChange}
-              placeholder="Tell a story..."
-              ref="basicEditor"
-              spellCheck={true}
-            />
-          </TextEditorWrapper>
-        </DraftEditorWrapper>
-      </DraftEditor>
-    )
-  }
-}
-
-function getBlockStyle(block) {
-  switch (block.getType()) {
-    case 'blockquote':
-      return 'RichEditor-blockquote'
-    default:
-      return null
-  }
-}
-
-type StyleButtonProps = {
-  active: boolean
-  label: string
-  onToggle: (string) => void
-  style: string
-  icon: string
-}
-
-class StyleButton extends React.Component<StyleButtonProps> {
-  onToggle = (e) => {
-    e.preventDefault()
-    this.props.onToggle(this.props.style)
-  }
-
-  render() {
-    return (
-      <CustomButton isActive={this.props.active} onMouseDown={this.onToggle}>
-        <i className={this.props.icon}></i>
-        <span>{!this.props.icon ? this.props.label : ''}</span>
-      </CustomButton>
-    )
-  }
-}
-
-const blockStyles = [
-  { label: 'H2', style: 'header-two', icon: '' },
-  { label: 'H3', style: 'header-three', icon: '' },
-  { label: 'H4', style: 'header-four', icon: '' },
-  { label: 'Blockquote', style: 'blockquote', icon: 'fas fa-quote-right' },
-  { label: 'UL', style: 'unordered-list-item', icon: 'fas fa-list-ul' },
-  { label: 'OL', style: 'ordered-list-item', icon: 'fas fa-list-ol' },
-]
-
-const BlockStyleControls = (props) => {
-  const { editorState } = props
-  const selection = editorState.getSelection()
-  const blockType = editorState
-    .getCurrentContent()
-    .getBlockForKey(selection.getStartKey())
-    .getType()
-  return (
-    <div className="RichEditor-controls">
-      {blockStyles.map((type) => (
-        <StyleButton
-          key={type.label}
-          active={type.style === blockType}
-          label={type.label}
-          onToggle={props.onToggle}
-          style={type.style}
-          icon={type.icon}
-        />
-      ))}
-    </div>
-  )
-}
-
-const inlineStyles = [
-  { label: 'Bold', style: 'BOLD', icon: 'fas fa-bold' },
-  { label: 'Italic', style: 'ITALIC', icon: 'fas fa-italic' },
-  { label: 'Underline', style: 'UNDERLINE', icon: 'fas fa-underline' },
-  { label: 'Monospace', style: 'CODE', icon: 'fas fa-terminal' },
-]
-
-const InlineStyleControls = (props) => {
-  const currentStyle = props.editorState.getCurrentInlineStyle()
-  return (
-    <div className="RichEditor-controls">
-      {inlineStyles.map((type) => (
-        <StyleButton
-          key={type.label}
-          active={currentStyle.has(type.style)}
-          label={type.label}
-          onToggle={props.onToggle}
-          style={type.style}
-          icon={type.icon}
-        />
-      ))}
-    </div>
-  )
-}

package/lib/draft-js/editor/block-redender-fn.tsx

@@ -1,77 +0,0 @@
-import { EmbeddedCodeBlock } from '../block-renderer/embedded-code-block'
-import { MediaBlock } from '../block-renderer/media-block'
-import { ImageBlock } from '../block-renderer/image-block'
-import { InfoBoxBlock } from '../block-renderer/info-box-block'
-import {
-  SlideshowBlock,
-  SlideshowBlockV2,
-} from '../block-renderer/slideshow-block'
-import { DividerBlock } from '../block-renderer/divider-block'
-import { TableBlock } from '../block-renderer/table-block'
-import { ColorBoxBlock } from '../block-renderer/color-box-block'
-import { BGImageBlock } from '../block-renderer/background-image-block'
-import { BGVideoBlock } from '../block-renderer/background-video-block'
-import { RelatedPostBlock } from '../block-renderer/related-post-block'
-import { SideIndexBlock } from '../block-renderer/side-index-block'
-
-const AtomicBlock = (props) => {
-  const entity = props.contentState.getEntity(props.block.getEntityAt(0))
-
-  const entityType = entity.getType()
-
-  switch (entityType) {
-    case 'audioLink':
-    case 'imageLink':
-    case 'videoLink': {
-      return MediaBlock(entity)
-    }
-    case 'image': {
-      return ImageBlock(entity)
-    }
-    case 'slideshow': {
-      return SlideshowBlock(entity)
-    }
-    case 'slideshow-v2': {
-      return SlideshowBlockV2(entity)
-    }
-    case 'EMBEDDEDCODE': {
-      return EmbeddedCodeBlock(entity)
-    }
-    case 'INFOBOX': {
-      return InfoBoxBlock(props)
-    }
-    case 'DIVIDER': {
-      return DividerBlock()
-    }
-    case 'TABLE': {
-      return TableBlock(props)
-    }
-    case 'COLORBOX': {
-      return ColorBoxBlock(props)
-    }
-    case 'BACKGROUNDIMAGE': {
-      return BGImageBlock(props)
-    }
-    case 'BACKGROUNDVIDEO': {
-      return BGVideoBlock(props)
-    }
-    case 'RELATEDPOST': {
-      return RelatedPostBlock(entity)
-    }
-    case 'SIDEINDEX': {
-      return SideIndexBlock(props)
-    }
-  }
-  return null
-}
-
-export function atomicBlockRenderer(block) {
-  if (block.getType() === 'atomic') {
-    return {
-      component: AtomicBlock,
-      editable: false,
-    }
-  }
-
-  return null
-}

package/lib/draft-js/editor/entity-decorator.tsx

@@ -1,7 +0,0 @@
-import { CompositeDecorator } from 'draft-js'
-import { annotationDecorator } from '../entity-decorator/annotation-decorator'
-import { linkDecorator } from '../entity-decorator/link-decorator'
-
-const decorators = new CompositeDecorator([annotationDecorator, linkDecorator])
-
-export default decorators

package/lib/draft-js/editor/modifier.tsx

@@ -1,71 +0,0 @@
-import { Modifier as DraftModifier, CharacterMetadata } from 'draft-js'
-import { Map } from 'immutable'
-
-const Modifier = { ...DraftModifier }
-
-/* 
-    This method is specified for custom inline style such as 'FONT_COLOR_#ffffff'.
-    For this kind of inline style there may be more than one style name 'FONT_COLOR_#ffffff', 'FONT_COLOR_#000000'.
-    To prevent any nested specific inline style got rendered after the outer inline style being removed, 
-    clear all specific inline styles when custom inline style is applied or removed.
-
-    Since getCurrentInlineStyle only return the inline style the starting position contains,
-    loop through all char of blocks to remove all nested inline styles.
-
-    Reference: https://github.com/facebook/draft-js/blob/main/src/model/transaction/ContentStateInlineStyle.js#L39-L88
-  */
-Modifier.removeInlineStyleByPrefix = (
-  contentState,
-  selectionState,
-  inlineStylePrefix
-) => {
-  const blockMap = contentState.getBlockMap()
-  const startKey = selectionState.getStartKey()
-  const startOffset = selectionState.getStartOffset()
-  const endKey = selectionState.getEndKey()
-  const endOffset = selectionState.getEndOffset()
-
-  // loop through all selected blocks and every block chars to remove specific inline style
-  const newBlocks = blockMap
-    .skipUntil((_, k) => k === startKey)
-    .takeUntil((_, k) => k === endKey)
-    .concat(Map([[endKey, blockMap.get(endKey)]]))
-    .map((block, blockKey) => {
-      let sliceStart
-      let sliceEnd
-
-      if (startKey === endKey) {
-        sliceStart = startOffset
-        sliceEnd = endOffset
-      } else {
-        sliceStart = blockKey === startKey ? startOffset : 0
-        sliceEnd = blockKey === endKey ? endOffset : block.getLength()
-      }
-
-      let chars = block.getCharacterList()
-      let current
-      while (sliceStart < sliceEnd) {
-        current = chars.get(sliceStart)
-        const inlineStyle = current
-          .getStyle()
-          .find((styleName) => styleName.startsWith(inlineStylePrefix))
-        if (inlineStyle) {
-          chars = chars.set(
-            sliceStart,
-            CharacterMetadata.removeStyle(current, inlineStyle)
-          )
-        }
-        sliceStart++
-      }
-
-      return block.set('characterList', chars)
-    })
-
-  return contentState.merge({
-    blockMap: blockMap.merge(newBlocks),
-    selectionBefore: selectionState,
-    selectionAfter: selectionState,
-  })
-}
-
-export { Modifier }

package/lib/draft-js/entity-decorator/annotation-decorator.tsx

@@ -1,81 +0,0 @@
-import React, { useState } from 'react'
-import styled from 'styled-components'
-
-const AnnotatedText = styled.span`
-  vertical-align: middle;
-  color: #d0a67d;
-
-  svg {
-    vertical-align: middle;
-    margin-left: 5px;
-  }
-`
-
-const AnnotationBody = styled.div`
-  background-color: #f1f1f1;
-  padding: 10px;
-  margin-top: 5px;
-  margin-bottom: 10px;
-`
-
-function indicatorSvg(shouldRotate: boolean) {
-  const transform = shouldRotate ? 'rotate(180 10 10)' : ''
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle cx="10" cy="10" r="10" fill="#f1f1f1" />
-      <path
-        d="M10 15L5.66987 7.5L14.3301 7.5L10 15Z"
-        fill="#D0A67D"
-        transform={transform}
-      />
-    </svg>
-  )
-}
-
-function AnnotationBlock(props) {
-  const { children: annotated } = props
-  const [toShowAnnotation, setToShowAnnotation] = useState(false)
-  const { bodyHTML } = props.contentState.getEntity(props.entityKey).getData()
-  return (
-    <React.Fragment>
-      <AnnotatedText>
-        {annotated}
-        <span
-          onClick={(e) => {
-            e.preventDefault()
-            setToShowAnnotation(!toShowAnnotation)
-          }}
-        >
-          {toShowAnnotation ? indicatorSvg(false) : indicatorSvg(true)}
-        </span>
-      </AnnotatedText>
-      {toShowAnnotation ? (
-        <AnnotationBody
-          contentEditable={false}
-          dangerouslySetInnerHTML={{ __html: bodyHTML }}
-        ></AnnotationBody>
-      ) : null}
-    </React.Fragment>
-  )
-}
-
-function findAnnotationEntities(contentBlock, callback, contentState) {
-  contentBlock.findEntityRanges((character) => {
-    const entityKey = character.getEntity()
-    return (
-      entityKey !== null &&
-      contentState.getEntity(entityKey).getType() === 'ANNOTATION'
-    )
-  }, callback)
-}
-
-export const annotationDecorator = {
-  strategy: findAnnotationEntities,
-  component: AnnotationBlock,
-}

package/lib/draft-js/entity-decorator/link-decorator.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-const LinkWrapper = styled.a`
-  color: #3b5998;
-  text-decoration: underline;
-`
-
-function findLinkEntities(contentBlock, callback, contentState) {
-  contentBlock.findEntityRanges((character) => {
-    const entityKey = character.getEntity()
-    return (
-      entityKey !== null &&
-      contentState.getEntity(entityKey).getType() === 'LINK'
-    )
-  }, callback)
-}
-
-export const linkDecorator = {
-  strategy: findLinkEntities,
-  component: Link,
-}
-
-function Link(props) {
-  const { url } = props.contentState.getEntity(props.entityKey).getData()
-  return <LinkWrapper href={url}>{props.children}</LinkWrapper>
-}