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

package/lib/website/mirrormedia/custom/selector/video-selector.tsx

@@ -1,310 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import styled from 'styled-components'
-import { Drawer, DrawerController } from '@keystone-ui/modals'
-import { gql, useLazyQuery } from '@keystone-6/core/admin-ui/apollo'
-import { ImageEntity } from './image-selector'
-import { SearchBox, SearchBoxOnChangeFn } from './search-box'
-import { Pagination } from './pagination'
-
-const videosQuery = gql`
-  query Videos($searchText: String!, $take: Int, $skip: Int) {
-    videosCount(where: { name: { contains: $searchText } })
-    videos(
-      where: { name: { contains: $searchText } }
-      take: $take
-      skip: $skip
-    ) {
-      id
-      name
-      urlOriginal
-      file {
-        filename
-        filesize
-        url
-      }
-      heroImage {
-        id
-        name
-        imageFile {
-          url
-        }
-        resized {
-          original
-        }
-      }
-    }
-  }
-`
-
-const VideoSearchBox = styled(SearchBox)`
-  margin-top: 10px;
-`
-
-const VideoSelectionWrapper = styled.div`
-  overflow: auto;
-  margin-top: 10px;
-`
-
-const VideoGridsWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  overflow: auto;
-`
-
-const VideoGridWrapper = styled.div`
-  flex: 0 0 33.3333%;
-  cursor: pointer;
-  padding: 0 10px 10px;
-`
-
-const VideoMetaGridsWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  overflow: auto;
-`
-
-const VideoMetaGridWrapper = styled.div`
-  flex: 0 0 33.3333%;
-  cursor: pointer;
-  padding: 0 10px 10px;
-`
-
-const Video = styled.video`
-  display: block;
-  width: 100%;
-  aspect-ratio: 2;
-  object-fit: cover;
-`
-
-const SeparationLine = styled.div`
-  border: #e1e5e9 1px solid;
-  margin-top: 10px;
-  margin-bottom: 10px;
-`
-
-const VideoSelected = styled.div`
-  height: 1.4rem;
-`
-
-const ErrorWrapper = styled.div`
-  & * {
-    margin: 0;
-  }
-`
-
-type ID = string
-
-export type VideoEntity = {
-  id: ID
-  name?: string
-  urlOriginal: string
-  youtubeUrl?: string
-  file: {
-    filename?: string
-    filesize: number
-    url: string
-  }
-  heroImage: ImageEntity
-}
-
-export type VideoEntityWithMeta = {
-  video: VideoEntity
-}
-
-type VideoEntityOnSelectFn = (param: VideoEntity) => void
-
-function VideosGrids(props: {
-  videos: VideoEntity[]
-  selected: VideoEntity[]
-  onSelect: VideoEntityOnSelectFn
-}): React.ReactElement {
-  const { videos, selected, onSelect } = props
-
-  return (
-    <VideoGridsWrapper>
-      {videos.map((video) => {
-        return (
-          <VideoGrid
-            key={video.id}
-            isSelected={selected?.includes(video)}
-            onSelect={() => onSelect(video)}
-            video={video}
-          />
-        )
-      })}
-    </VideoGridsWrapper>
-  )
-}
-
-function VideoGrid(props: {
-  video: VideoEntity
-  isSelected: boolean
-  onSelect: VideoEntityOnSelectFn
-}) {
-  const { video, onSelect, isSelected } = props
-  return (
-    <VideoGridWrapper key={video?.id} onClick={() => onSelect(video)}>
-      <VideoSelected>
-        {isSelected ? <i className="fas fa-check-circle"></i> : null}
-      </VideoSelected>
-      <Video muted loop>
-        <source src={video?.urlOriginal} />
-        <source src={video?.file?.url} />
-      </Video>
-    </VideoGridWrapper>
-  )
-}
-
-function VideoMetaGrids(props: { videoMetas: VideoEntityWithMeta[] }) {
-  const { videoMetas } = props
-  return (
-    <VideoMetaGridsWrapper>
-      {videoMetas.map((videoMeta) => (
-        <VideoMetaGrid key={videoMeta?.video?.id} videoMeta={videoMeta} />
-      ))}
-    </VideoMetaGridsWrapper>
-  )
-}
-
-function VideoMetaGrid(props: {
-  videoMeta: VideoEntityWithMeta
-}): React.ReactElement {
-  const { videoMeta } = props
-  const { video } = videoMeta
-
-  return (
-    <VideoMetaGridWrapper>
-      <Video muted autoPlay loop>
-        <source src={video?.urlOriginal} />
-        <source src={video?.file?.url} />
-      </Video>
-    </VideoMetaGridWrapper>
-  )
-}
-
-type VideoSelectorOnChangeFn = (params: VideoEntityWithMeta[]) => void
-
-export function VideoSelector(props: { onChange: VideoSelectorOnChangeFn }) {
-  const [
-    queryVideos,
-    { loading, error, data: { videos = [], videosCount = 0 } = {} },
-  ] = useLazyQuery(videosQuery, { fetchPolicy: 'no-cache' })
-  const [currentPage, setCurrentPage] = useState(0) // page starts with 1, 0 is used to detect initialization
-  const [searchText, setSearchText] = useState('')
-  const [selected, setSelected] = useState<VideoEntityWithMeta[]>([])
-
-  const pageSize = 6
-
-  const { onChange } = props
-
-  const onSave = () => {
-    onChange(selected)
-  }
-
-  const onCancel = () => {
-    onChange([])
-  }
-
-  const onSearchBoxChange: SearchBoxOnChangeFn = async (searchInput) => {
-    setSearchText(searchInput)
-    setCurrentPage(1)
-  }
-
-  const onVideosGridSelect: VideoEntityOnSelectFn = (videoEntity) => {
-    setSelected((selected) => {
-      const filterdSelected = selected.filter(
-        (ele) => ele.video?.id !== videoEntity.id
-      )
-
-      // deselect the video
-      if (filterdSelected.length !== selected.length) {
-        return filterdSelected
-      }
-
-      // single select
-      return [{ video: videoEntity }]
-    })
-  }
-
-  const selectedVideos = selected.map((ele: VideoEntityWithMeta) => {
-    return ele.video
-  })
-
-  useEffect(() => {
-    if (currentPage !== 0) {
-      queryVideos({
-        variables: {
-          searchText: searchText,
-          skip: (currentPage - 1) * pageSize,
-          take: pageSize,
-        },
-      })
-    }
-  }, [currentPage, searchText])
-
-  let searchResult = (
-    <React.Fragment>
-      <VideosGrids
-        videos={videos}
-        selected={selectedVideos}
-        onSelect={onVideosGridSelect}
-      />
-      <Pagination
-        currentPage={currentPage}
-        total={videosCount}
-        pageSize={pageSize}
-        onChange={(pageIndex) => {
-          setCurrentPage(pageIndex)
-        }}
-      />
-    </React.Fragment>
-  )
-  if (loading) {
-    searchResult = <p>searching...</p>
-  }
-  if (error) {
-    searchResult = (
-      <ErrorWrapper>
-        <h3>Errors occurs in the `videos` query</h3>
-        <div>
-          <br />
-          <b>Message:</b>
-          <div>{error.message}</div>
-          <br />
-          <b>Stack:</b>
-          <div>{error.stack}</div>
-          <br />
-          <b>Query:</b>
-          <pre>{videosQuery.loc.source.body}</pre>
-        </div>
-      </ErrorWrapper>
-    )
-  }
-
-  return (
-    <DrawerController isOpen={true}>
-      <Drawer
-        title="Select video"
-        actions={{
-          cancel: {
-            label: 'Cancel',
-            action: onCancel,
-          },
-          confirm: {
-            label: 'Confirm',
-            action: onSave,
-          },
-        }}
-      >
-        <div>
-          <VideoSearchBox onChange={onSearchBoxChange} />
-          <VideoSelectionWrapper>
-            <div>{searchResult}</div>
-            {!!selected.length && <SeparationLine />}
-            <VideoMetaGrids videoMetas={selected} />
-          </VideoSelectionWrapper>
-        </div>
-      </Drawer>
-    </DrawerController>
-  )
-}

package/lib/website/mirrormedia/draft-editor/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 { InfoBoxEditorBlock as 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 { TableEditorBlock as TableBlock } from '../custom/block-renderer/table-block'
-import { ColorBoxEditorBlock as ColorBoxBlock } from '../custom/block-renderer/color-box-block'
-import { BGImageEditorBlock as BGImageBlock } from '../custom/block-renderer/background-image-block'
-import { BGVideoEditorBlock as BGVideoBlock } from '../custom/block-renderer/background-video-block'
-import { RelatedPostBlock } from '../custom/block-renderer/related-post-block'
-import { SideIndexEditorBlock as 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-editor/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