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

package/lib/website/mirrormedia/draft-renderer/block-redender-fn.tsx

@@ -1,77 +0,0 @@
-import { EmbeddedCodeBlock } from '../custom/block-renderer/embedded-code-block'
-import { MediaBlock } from '../custom/block-renderer/media-block'
-import { ImageBlock } from '../custom/block-renderer/image-block'
-import { InfoBoxBlock } from '../custom/block-renderer/info-box-block'
-import {
-  SlideshowBlock,
-  SlideshowBlockV2,
-} from '../custom/block-renderer/slideshow-block'
-import { DividerBlock } from '../custom/block-renderer/divider-block'
-import { TableBlock } from '../custom/block-renderer/table-block'
-import { ColorBoxBlock } from '../custom/block-renderer/color-box-block'
-import { BGImageBlock } from '../custom/block-renderer/background-image-block'
-import { BGVideoBlock } from '../custom/block-renderer/background-video-block'
-import { RelatedPostBlock } from '../custom/block-renderer/related-post-block'
-import { SideIndexBlock } from '../custom/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/website/mirrormedia/draft-renderer/entity-decorator.tsx

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

package/lib/website/mirrormedia/draft-renderer/index-deprecated.tsx

@@ -1,43 +0,0 @@
-import React from 'react'
-import { Editor, EditorState, convertFromRaw } from 'draft-js'
-import decorators from '../draft-editor/entity-decorator'
-import { atomicBlockRenderer } from '../draft-editor/block-redender-fn'
-
-// to be separate
-const styleMap = {
-  CODE: {
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-    fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
-    fontSize: 16,
-    padding: 2,
-  },
-}
-const blockRendererFn = (block) => {
-  const atomicBlockObj = atomicBlockRenderer(block)
-  return atomicBlockObj
-}
-
-const getBlockStyle = (block) => {
-  switch (block.getType()) {
-    case 'blockquote':
-      return 'RichEditor-blockquote'
-
-    default:
-      return null
-  }
-}
-
-export default function DraftRenderer({ rawContentBlock }) {
-  const contentState = convertFromRaw(rawContentBlock)
-  const editorState = EditorState.createWithContent(contentState, decorators)
-
-  return (
-    <Editor
-      editorState={editorState}
-      readOnly
-      customStyleMap={styleMap}
-      blockRendererFn={blockRendererFn}
-      blockStyleFn={getBlockStyle}
-    />
-  )
-}

package/lib/website/mirrormedia/draft-renderer/index.tsx

@@ -1,150 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { Editor, EditorState } from 'draft-js'
-
-import { atomicBlockRenderer } from './block-redender-fn'
-import decorators from './entity-decorator'
-
-import { CUSTOM_STYLE_PREFIX_FONT_COLOR } from '../../../draft-js/buttons/font-color'
-import { CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR } from '../../../draft-js/buttons/background-color'
-
-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;
-
-  /* Draft built-in buttons' style */
-  .public-DraftStyleDefault-header-two {
-  }
-  .public-DraftStyleDefault-header-three {
-  }
-  .public-DraftStyleDefault-header-four {
-  }
-  .public-DraftStyleDefault-blockquote {
-  }
-  .public-DraftStyleDefault-ul {
-  }
-  .public-DraftStyleDefault-unorderedListItem {
-  }
-  .public-DraftStyleDefault-ol {
-  }
-  .public-DraftStyleDefault-orderedListItem {
-  }
-  /* code-block */
-  .public-DraftStyleDefault-pre {
-  }
-  .alignCenter * {
-    text-align: center;
-  }
-  .alignLeft * {
-    text-align: left;
-  }
-`
-
-type RichTextEditorProps = {
-  onChange: (editorState) => void
-  editorState: EditorState
-}
-type State = {
-  isEnlarged?: boolean
-  readOnly?: boolean
-}
-
-const customStyleMap = {
-  CODE: {
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-    fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
-    fontSize: 16,
-    padding: 2,
-  },
-}
-
-const customStyleFn = (style) => {
-  return style.reduce((styles, styleName) => {
-    if (styleName?.startsWith(CUSTOM_STYLE_PREFIX_FONT_COLOR)) {
-      styles['color'] = styleName.split(CUSTOM_STYLE_PREFIX_FONT_COLOR)[1]
-    }
-    if (styleName?.startsWith(CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)) {
-      styles['backgroundColor'] = styleName.split(
-        CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR
-      )[1]
-    }
-    return styles
-  }, {})
-}
-
-const blockStyleFn = (editorState, block) => {
-  const entityKey = block.getEntityAt(0)
-  const entity = entityKey
-    ? editorState.getCurrentContent().getEntity(entityKey)
-    : null
-
-  let result = ''
-  const blockData = block.getData()
-  if (blockData) {
-    const textAlign = blockData?.get('textAlign')
-    if (textAlign === 'center') {
-      result += 'alignCenter '
-    } else if (textAlign === 'left') {
-      result += 'alignLeft '
-    }
-  }
-
-  switch (block.getType()) {
-    case 'header-two':
-    case 'header-three':
-    case 'header-four':
-    case 'blockquote':
-      result += 'public-DraftStyleDefault-' + block.getType()
-      break
-    case 'atomic':
-      if (entity.getData()?.alignment) {
-        // support all atomic block to set alignment
-        result += ' ' + entity.getData().alignment
-      }
-      break
-    default:
-      break
-  }
-  return result
-}
-
-const blockRendererFn = (block) => {
-  const atomicBlockObj = atomicBlockRenderer(block)
-  return atomicBlockObj
-}
-
-function RichTextEditor({ editorState }) {
-  return (
-    <DraftEditorWrapper>
-      <Editor
-        editorState={editorState}
-        customStyleMap={customStyleMap}
-        blockStyleFn={blockStyleFn.bind(null, editorState)}
-        blockRendererFn={blockRendererFn}
-        customStyleFn={customStyleFn}
-        readOnly
-      />
-    </DraftEditorWrapper>
-  )
-}
-
-const DraftRenderer = {
-  RichTextEditor,
-  decorators,
-}
-export default DraftRenderer

package/lib/website/readr/custom/block-renderer/background-image-block.tsx

@@ -1,128 +0,0 @@
-import React, { useState } from 'react'
-import styled from 'styled-components'
-import { ContentBlock, ContentState } from 'draft-js'
-import draftConverter from '../../../../draft-js/editor/draft-converter'
-import { BGImageInput } from '../../../../draft-js/buttons/background-image'
-
-const BGImageRenderWrapper = styled.div`
-  padding: 30px;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background-image: url(${({ image }) => image});
-  background-size: cover;
-  background-position: center center;
-  ${({ textBlockAlign }) => {
-    if (textBlockAlign === 'left') {
-      return `padding-right: 50%;`
-    } else if (textBlockAlign === 'right') {
-      return `padding-left: 50%;`
-    } else if (textBlockAlign === 'bottom') {
-      return `padding-top: 50%;`
-    }
-  }}
-`
-
-const BGImageRenderBody = styled.div`
-  background: rgba(0, 0, 0, 0.5);
-  padding: 4px 20px;
-  margin-bottom: 10px;
-`
-
-const BGImageRenderButton = styled.span`
-  cursor: pointer;
-  background-color: white;
-  padding: 6px;
-  border-radius: 6px;
-`
-
-type BGImageBlockProps = {
-  block: ContentBlock
-  blockProps: {
-    onEditStart: () => void
-    onEditFinish: ({
-      entityKey,
-      entityData,
-    }: {
-      entityKey?: string
-      entityData?: Record<string, unknown>
-    }) => void
-  }
-  contentState: ContentState
-}
-
-export function BGImageBlock(props: BGImageBlockProps) {
-  const { block, contentState } = props
-  const entityKey = block.getEntityAt(0)
-  const entity = contentState.getEntity(entityKey)
-  const { textBlockAlign, image, body } = entity.getData()
-
-  return (
-    <React.Fragment>
-      <BGImageRenderWrapper
-        image={image?.imageFile?.url}
-        textBlockAlign={textBlockAlign}
-      >
-        <BGImageRenderBody dangerouslySetInnerHTML={{ __html: body }} />
-      </BGImageRenderWrapper>
-    </React.Fragment>
-  )
-}
-
-export function BGImageEditorBlock(props: BGImageBlockProps) {
-  const [toShowInput, setToShowInput] = useState(false)
-  const { block, blockProps, contentState } = props
-  const { onEditStart, onEditFinish } = blockProps
-  const entityKey = block.getEntityAt(0)
-  const entity = contentState.getEntity(entityKey)
-  const { textBlockAlign, image, rawContentState } = entity.getData()
-  const onChange = ({
-    textBlockAlign: newTextBlockAlign,
-    image: newImage,
-    rawContentState: newRawContentState,
-  }) => {
-    // close `BGImageInput`
-    setToShowInput(false)
-    onEditFinish({
-      entityKey,
-      entityData: {
-        textBlockAlign: newTextBlockAlign,
-        image: newImage,
-        body: draftConverter.convertToHtml(newRawContentState),
-        rawContentState: newRawContentState,
-      },
-    })
-  }
-
-  return (
-    <React.Fragment>
-      <BGImageInput
-        textBlockAlign={textBlockAlign}
-        image={image}
-        rawContentStateForBGImageEditor={rawContentState}
-        onChange={onChange}
-        onCancel={() => {
-          onEditFinish({})
-          setToShowInput(false)
-        }}
-        isOpen={toShowInput}
-      />
-      <div>
-        <BGImageBlock {...props} />
-        <div>
-          <BGImageRenderButton
-            onClick={() => {
-              // call `onEditStart` prop as we are trying to update the BGImage entity
-              onEditStart()
-              // open `BGImageInput`
-              setToShowInput(true)
-            }}
-          >
-            <i className="fa-solid fa-pen"></i>
-            <span>Modify</span>
-          </BGImageRenderButton>
-        </div>
-      </div>
-    </React.Fragment>
-  )
-}

package/lib/website/readr/custom/block-renderer/background-video-block.tsx

@@ -1,135 +0,0 @@
-import React, { useState } from 'react'
-import styled from 'styled-components'
-import { ContentBlock, ContentState } from 'draft-js'
-import draftConverter from '../../../../draft-js/editor/draft-converter'
-import { BGVideoInput } from '../../../../draft-js/buttons/background-video'
-
-const BGVideoRenderWrapper = styled.div`
-  position: relative;
-  padding: 30px;
-  width: 100%;
-  ${({ textBlockAlign }) => {
-    if (textBlockAlign === 'left') {
-      return `padding-right: 50%;`
-    } else if (textBlockAlign === 'right') {
-      return `padding-left: 50%;`
-    } else if (textBlockAlign === 'bottom') {
-      return `padding-top: 50%;`
-    }
-  }}
-`
-
-const BGVideoRednerVideo = styled.video`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  background-color: black;
-`
-
-const BGVideoRenderBody = styled.div`
-  background: rgba(0, 0, 0, 0.5);
-  padding: 4px 20px;
-  margin-bottom: 10px;
-`
-
-const BGVideoRenderButton = styled.span`
-  cursor: pointer;
-  background-color: white;
-  padding: 6px;
-  border-radius: 6px;
-`
-
-type BGVideoBlockProps = {
-  block: ContentBlock
-  blockProps: {
-    onEditStart: () => void
-    onEditFinish: ({
-      entityKey,
-      entityData,
-    }: {
-      entityKey?: string
-      entityData?: Record<string, unknown>
-    }) => void
-  }
-  contentState: ContentState
-}
-
-export function BGVideoBlock(props: BGVideoBlockProps) {
-  const { block, contentState } = props
-  const entityKey = block.getEntityAt(0)
-  const entity = contentState.getEntity(entityKey)
-  const { textBlockAlign, video, body } = entity.getData()
-
-  return (
-    <React.Fragment>
-      <BGVideoRenderWrapper textBlockAlign={textBlockAlign}>
-        <BGVideoRednerVideo muted autoPlay loop>
-          <source src={video?.url} />
-          <source src={video?.file?.url} />
-        </BGVideoRednerVideo>
-        <BGVideoRenderBody dangerouslySetInnerHTML={{ __html: body }} />
-      </BGVideoRenderWrapper>
-    </React.Fragment>
-  )
-}
-
-export function BGVideoEditorBlock(props: BGVideoBlockProps) {
-  const [toShowInput, setToShowInput] = useState(false)
-  const { block, blockProps, contentState } = props
-  const { onEditStart, onEditFinish } = blockProps
-  const entityKey = block.getEntityAt(0)
-  const entity = contentState.getEntity(entityKey)
-  const { textBlockAlign, video, rawContentState } = entity.getData()
-  const onChange = ({
-    textBlockAlign: newTextBlockAlign,
-    video: newVideo,
-    rawContentState: newRawContentState,
-  }) => {
-    // close `BGVideoInput`
-    setToShowInput(false)
-    onEditFinish({
-      entityKey,
-      entityData: {
-        textBlockAlign: newTextBlockAlign,
-        video: newVideo,
-        body: draftConverter.convertToHtml(newRawContentState),
-        rawContentState: newRawContentState,
-      },
-    })
-  }
-
-  return (
-    <React.Fragment>
-      <BGVideoInput
-        textBlockAlign={textBlockAlign}
-        video={video}
-        rawContentStateForBGVideoEditor={rawContentState}
-        onChange={onChange}
-        onCancel={() => {
-          onEditFinish({})
-          setToShowInput(false)
-        }}
-        isOpen={toShowInput}
-      />
-      <div>
-        <BGVideoBlock {...props} />
-        <div>
-          <BGVideoRenderButton
-            onClick={() => {
-              // call `onEditStart` prop as we are trying to update the BGVideo entity
-              onEditStart()
-              // open `BGVideoInput`
-              setToShowInput(true)
-            }}
-          >
-            <i className="fa-solid fa-pen"></i>
-            <span>Modify</span>
-          </BGVideoRenderButton>
-        </div>
-      </div>
-    </React.Fragment>
-  )
-}

package/lib/website/readr/custom/block-renderer/color-box-block.tsx

@@ -1,98 +0,0 @@
-import React, { useState } from 'react'
-import styled from 'styled-components'
-import { ContentBlock, ContentState } from 'draft-js'
-import draftConverter from '../../../../draft-js/editor/draft-converter'
-import { ColorBoxInput } from '../../../../draft-js/buttons/color-box'
-
-const ColorBoxRenderWrapper = styled.div`
-  background-color: ${(props) => (props.color ? props.color : '#F5F4F3')};
-  padding: 30px;
-  position: relative;
-  color: white;
-`
-
-const ColorBoxRenderButton = styled.div`
-  cursor: pointer;
-`
-
-type ColorBoxBlockProps = {
-  block: ContentBlock
-  blockProps: {
-    onEditStart: () => void
-    onEditFinish: ({
-      entityKey,
-      entityData,
-    }: {
-      entityKey?: string
-      entityData?: Record<string, unknown>
-    }) => void
-  }
-  contentState: ContentState
-}
-
-export function ColorBoxBlock(props: ColorBoxBlockProps) {
-  const { block, contentState } = props
-  const entityKey = block.getEntityAt(0)
-  const entity = contentState.getEntity(entityKey)
-  const { color, body } = entity.getData()
-
-  return (
-    <ColorBoxRenderWrapper color={color}>
-      <div dangerouslySetInnerHTML={{ __html: body }} />
-    </ColorBoxRenderWrapper>
-  )
-}
-
-export function ColorBoxEditorBlock(props: ColorBoxBlockProps) {
-  const [toShowInput, setToShowInput] = useState(false)
-  const { block, blockProps, contentState } = props
-  const { onEditStart, onEditFinish } = blockProps
-  const entityKey = block.getEntityAt(0)
-  const entity = contentState.getEntity(entityKey)
-  const { color, rawContentState } = entity.getData()
-  const onChange = ({
-    color: newColor,
-    rawContentState: newRawContentState,
-  }) => {
-    // close `ColorBoxInput`
-    setToShowInput(false)
-
-    onEditFinish({
-      entityKey,
-      entityData: {
-        color: newColor,
-        body: draftConverter.convertToHtml(newRawContentState),
-        rawContentState: newRawContentState,
-      },
-    })
-  }
-
-  return (
-    <React.Fragment>
-      <ColorBoxInput
-        color={color}
-        rawContentStateForColorBoxEditor={rawContentState}
-        onChange={onChange}
-        onCancel={() => {
-          onEditFinish({})
-          setToShowInput(false)
-        }}
-        isOpen={toShowInput}
-      />
-      <div>
-        <ColorBoxBlock {...props} />
-        <ColorBoxRenderButton
-          onClick={() => {
-            // call `onEditStart` prop as we are trying to update the ColorBox entity
-            onEditStart()
-            // open `ColorBoxInput`
-            setToShowInput(true)
-          }}
-        >
-          <i className="fa-solid fa-pen"></i>
-          <span>Modify</span>
-        </ColorBoxRenderButton>
-      </div>
-    </React.Fragment>
-  )
-}

package/lib/website/readr/custom/block-renderer/divider-block.tsx

@@ -1,12 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-const Divider = styled.hr`
-  box-sizing: border-box;
-  border-width: 1px;
-  border-style: inset;
-`
-
-export const DividerBlock = () => {
-  return <Divider />
-}