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

package/lib/website/readr/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/readr/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/readr/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/readr/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