@mirrormedia/lilith-draft-editor 1.0.0-beta

package/lib/draft-js/buttons/selector/align-selector.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react'
+import styled from 'styled-components'
+import { Select } from '@keystone-ui/fields'
+
+const Label = styled.label`
+  display: block;
+  margin: 10px 0;
+  font-weight: 600;
+`
+
+const AlignSelect = styled(Select)`
+  ${({ menuHeight }) => {
+    return `margin-bottom: ${menuHeight}px;`
+  }}
+`
+
+type Option = { label: string; value: string; isDisabled?: boolean }
+type AlignSelectorOnChangeFn = (param: string) => void
+type Options = Option[]
+
+export function AlignSelector(props: {
+  align: string
+  options: Options
+  onChange: AlignSelectorOnChangeFn
+  onOpen?: () => void
+}) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [menuHeight, setMenuHeight] = useState(0)
+  const { align, options, onChange, onOpen } = props
+
+  useEffect(() => {
+    const selectMenu = document.querySelector(
+      '.css-nabggt-menu'
+    ) as HTMLElement | null
+
+    if (selectMenu) {
+      const styles = window.getComputedStyle(selectMenu)
+      const margin =
+        parseFloat(styles['marginTop']) + parseFloat(styles['marginBottom'])
+      setMenuHeight(selectMenu.offsetHeight + margin)
+    } else {
+      setMenuHeight(0)
+    }
+    if (isOpen && onOpen) {
+      onOpen()
+    }
+  }, [isOpen])
+  return (
+    <React.Fragment>
+      <Label htmlFor="alignment">對齊</Label>
+      <AlignSelect
+        id="alignment"
+        // default align === undefined
+        value={options.find((option) => option.value === align)}
+        options={options}
+        onChange={(option) => {
+          onChange(option.value)
+        }}
+        onMenuOpen={() => setIsOpen(true)}
+        onMenuClose={() => setIsOpen(false)}
+        menuHeight={menuHeight}
+      />
+    </React.Fragment>
+  )
+}

package/lib/draft-js/buttons/selector/image-selector.tsx

@@ -0,0 +1,485 @@
+import React, { useState, useEffect, useRef } from 'react'
+import debounce from 'lodash/debounce'
+import styled from 'styled-components'
+import { TextInput } from '@keystone-ui/fields'
+import { Drawer, DrawerController } from '@keystone-ui/modals'
+import { gql, useLazyQuery } from '@keystone-6/core/admin-ui/apollo'
+import { AlignSelector } from './align-selector'
+import { SearchBox, SearchBoxOnChangeFn } from './search-box'
+import { Pagination } from './pagination'
+
+const _ = {
+  debounce,
+}
+
+const ImageSearchBox = styled(SearchBox)`
+  margin-top: 10px;
+`
+
+const ImageSelectionWrapper = styled.div`
+  overflow: auto;
+  margin-top: 10px;
+`
+const ImageBlockMetaWrapper = styled.div``
+
+const ImageGridsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  overflow: auto;
+  margin-top: 5px;
+`
+
+const ImageGridWrapper = styled.div`
+  flex: 0 0 33.3333%;
+  cursor: pointer;
+  padding: 0 10px 10px;
+`
+
+const ImageMetaGridsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  overflow: auto;
+`
+
+const ImageMetaGridWrapper = styled.div`
+  flex: 0 0 33.3333%;
+  cursor: pointer;
+  padding: 0 10px 10px;
+`
+
+const Image = styled.img`
+  display: block;
+  width: 100%;
+  aspect-ratio: 2;
+  object-fit: cover;
+`
+
+const Label = styled.label`
+  display: block;
+  margin: 10px 0;
+  font-weight: 600;
+`
+
+const SeparationLine = styled.div`
+  border: #e1e5e9 1px solid;
+  margin-top: 10px;
+  margin-bottom: 10px;
+`
+
+const ImageSelected = styled.div`
+  height: 1.4rem;
+`
+
+const ErrorWrapper = styled.div`
+  & * {
+    margin: 0;
+  }
+`
+
+type ID = string
+
+export type ImageEntity = {
+  id: ID
+  name?: string
+  imageFile: {
+    url: string
+  }
+  resized: {
+    original: string
+    w480: string
+    w800: string
+    w1200: string
+    w1600: string
+    w2400: string
+  }
+}
+
+export type ImageEntityWithMeta = {
+  image: ImageEntity
+  desc?: string
+  url?: string
+}
+
+type ImageEntityOnSelectFn = (param: ImageEntity) => void
+
+function ImageGrids(props: {
+  images: ImageEntity[]
+  selected: ImageEntity[]
+  onSelect: ImageEntityOnSelectFn
+}): React.ReactElement {
+  const { images, selected, onSelect } = props
+
+  return (
+    <ImageGridsWrapper>
+      {images.map((image) => {
+        return (
+          <ImageGrid
+            key={image.id}
+            isSelected={selected?.includes(image)}
+            onSelect={() => onSelect(image)}
+            image={image}
+          />
+        )
+      })}
+    </ImageGridsWrapper>
+  )
+}
+
+function ImageGrid(props: {
+  image: ImageEntity
+  isSelected: boolean
+  onSelect: ImageEntityOnSelectFn
+}) {
+  const { image, onSelect, isSelected } = props
+  return (
+    <ImageGridWrapper key={image?.id} onClick={() => onSelect(image)}>
+      <ImageSelected>
+        {isSelected ? <i className="fas fa-check-circle"></i> : null}
+      </ImageSelected>
+      <Image
+        src={image?.resized?.w800}
+        onError={(e) => (e.currentTarget.src = image?.imageFile?.url)}
+      />
+    </ImageGridWrapper>
+  )
+}
+
+type ImageMetaOnChangeFn = (params: ImageEntityWithMeta) => void
+
+function ImageMetaGrids(props: {
+  imageMetas: ImageEntityWithMeta[]
+  onChange: ImageMetaOnChangeFn
+  enableCaption: boolean
+  enableUrl: boolean
+}) {
+  const { imageMetas, onChange, enableCaption, enableUrl } = props
+  return (
+    <ImageMetaGridsWrapper>
+      {imageMetas.map((imageMeta) => (
+        <ImageMetaGrid
+          key={imageMeta?.image?.id}
+          imageMeta={imageMeta}
+          enableCaption={enableCaption}
+          enableUrl={enableUrl}
+          onChange={onChange}
+        />
+      ))}
+    </ImageMetaGridsWrapper>
+  )
+}
+
+function ImageMetaGrid(props: {
+  imageMeta: ImageEntityWithMeta
+  onChange: ImageMetaOnChangeFn
+  enableCaption: boolean
+  enableUrl: boolean
+}): React.ReactElement {
+  const { imageMeta, enableCaption, enableUrl, onChange } = props
+  const { image, desc, url } = imageMeta
+
+  return (
+    <ImageMetaGridWrapper>
+      <Image
+        src={image?.resized?.w800}
+        onError={(e) => (e.currentTarget.src = image?.imageFile?.url)}
+      />
+      {enableCaption && (
+        <React.Fragment>
+          <Label htmlFor="caption">Image Caption:</Label>
+          <TextInput
+            id="caption"
+            type="text"
+            placeholder={image?.name}
+            defaultValue={desc}
+            onChange={_.debounce((e) => {
+              onChange({
+                image,
+                desc: e.target.value,
+                url,
+              })
+            })}
+          />
+        </React.Fragment>
+      )}
+      {enableUrl && (
+        <React.Fragment>
+          <Label htmlFor="url">Url:</Label>
+          <TextInput
+            id="url"
+            type="text"
+            placeholder="(Optional)"
+            defaultValue={url}
+            onChange={_.debounce((e) => {
+              onChange({
+                image,
+                desc,
+                url: e.target.value,
+              })
+            })}
+          />
+        </React.Fragment>
+      )}
+    </ImageMetaGridWrapper>
+  )
+}
+
+type DelayInputOnChangeFn = (param: string) => void
+
+function DelayInput(props: {
+  delay: string
+  onChange: DelayInputOnChangeFn
+}): React.ReactElement {
+  const { delay, onChange } = props
+
+  return (
+    <React.Fragment>
+      <Label>Slideshow delay:</Label>
+      <TextInput
+        type="number"
+        placeholder="請輸入自動切換秒數"
+        step="0.5"
+        min="1"
+        value={delay}
+        onChange={(e) => {
+          onChange(e.target.value)
+        }}
+      />
+    </React.Fragment>
+  )
+}
+
+const imagesQuery = gql`
+  query Photos($searchText: String!, $take: Int, $skip: Int) {
+    photosCount(where: { name: { contains: $searchText } })
+    photos(
+      where: { name: { contains: $searchText } }
+      take: $take
+      skip: $skip
+    ) {
+      id
+      name
+      imageFile {
+        url
+      }
+      resized {
+        original
+        w480
+        w800
+        w1200
+        w1600
+        w2400
+      }
+    }
+  }
+`
+
+type ImageSelectorOnChangeFn = (
+  params: ImageEntityWithMeta[],
+  align?: string,
+  delay?: number
+) => void
+
+export function ImageSelector(props: {
+  enableMultiSelect?: boolean
+  enableCaption?: boolean
+  enableUrl?: boolean
+  enableAlignment?: boolean
+  enableDelay?: boolean
+  onChange: ImageSelectorOnChangeFn
+}) {
+  const [
+    queryImages,
+    {
+      loading,
+      error,
+      data: { photos: images = [], photosCount: imagesCount = 0 } = {},
+    },
+  ] = useLazyQuery(imagesQuery, { 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<ImageEntityWithMeta[]>([])
+  const [delay, setDelay] = useState('5')
+  const [align, setAlign] = useState(undefined)
+  const contentWrapperRef = useRef<HTMLDivElement>()
+
+  const pageSize = 6
+
+  const options = [
+    { value: undefined, label: 'default', isDisabled: false },
+    { value: 'left', label: 'left', isDisabled: false },
+    { value: 'right', label: 'right', isDisabled: false },
+  ]
+
+  const {
+    enableMultiSelect = false,
+    enableCaption = false,
+    enableUrl = false,
+    enableAlignment = false,
+    enableDelay = false,
+    onChange,
+  } = props
+
+  const onSave = () => {
+    let adjustedDelay = +delay
+    adjustedDelay = adjustedDelay < 1 ? 1 : adjustedDelay
+    onChange(selected, align, adjustedDelay)
+  }
+
+  const onCancel = () => {
+    onChange([])
+  }
+
+  const onSearchBoxChange: SearchBoxOnChangeFn = async (searchInput) => {
+    setSearchText(searchInput)
+    setCurrentPage(1)
+  }
+
+  const onDealyChange = (delay: string) => {
+    setDelay(delay)
+  }
+
+  const onAlignSelectChange = (align: string) => {
+    setAlign(align)
+  }
+
+  const onAlignSelectOpen = () => {
+    const scrollWrapper = contentWrapperRef.current?.parentElement
+    scrollWrapper.scrollTop = scrollWrapper.scrollHeight
+  }
+
+  const onImageMetaChange: ImageMetaOnChangeFn = (imageEntityWithMeta) => {
+    if (enableMultiSelect) {
+      const foundIndex = selected.findIndex(
+        (ele) => ele?.image?.id === imageEntityWithMeta?.image?.id
+      )
+      if (foundIndex !== -1) {
+        selected[foundIndex] = imageEntityWithMeta
+        setSelected(selected)
+      }
+      return
+    }
+    setSelected([imageEntityWithMeta])
+  }
+
+  const onImagesGridSelect: ImageEntityOnSelectFn = (imageEntity) => {
+    setSelected((selected) => {
+      const filterdSelected = selected.filter(
+        (ele) => ele.image?.id !== imageEntity.id
+      )
+
+      // deselect the image
+      if (filterdSelected.length !== selected.length) {
+        return filterdSelected
+      }
+
+      // add new selected one
+      if (enableMultiSelect) {
+        return selected.concat([{ image: imageEntity, desc: '' }])
+      }
+
+      // single select
+      return [{ image: imageEntity, desc: '' }]
+    })
+  }
+
+  const selectedImages = selected.map((ele: ImageEntityWithMeta) => {
+    return ele.image
+  })
+
+  useEffect(() => {
+    if (currentPage !== 0) {
+      queryImages({
+        variables: {
+          searchText: searchText,
+          skip: (currentPage - 1) * pageSize,
+          take: pageSize,
+        },
+      })
+    }
+  }, [currentPage, searchText])
+
+  let searchResult = (
+    <React.Fragment>
+      <ImageGrids
+        images={images}
+        selected={selectedImages}
+        onSelect={onImagesGridSelect}
+      />
+      <Pagination
+        currentPage={currentPage}
+        total={imagesCount}
+        pageSize={pageSize}
+        onChange={(pageIndex) => {
+          setCurrentPage(pageIndex)
+        }}
+      />
+    </React.Fragment>
+  )
+  if (loading) {
+    searchResult = <p>searching...</p>
+  }
+  if (error) {
+    searchResult = (
+      <ErrorWrapper>
+        <h3>Errors occurs in the `images` query</h3>
+        <div>
+          <br />
+          <b>Message:</b>
+          <div>{error.message}</div>
+          <br />
+          <b>Stack:</b>
+          <div>{error.stack}</div>
+          <br />
+          <b>Query:</b>
+          <pre>{imagesQuery.loc.source.body}</pre>
+        </div>
+      </ErrorWrapper>
+    )
+  }
+
+  return (
+    <DrawerController isOpen={true}>
+      <Drawer
+        title="Select image"
+        actions={{
+          cancel: {
+            label: 'Cancel',
+            action: onCancel,
+          },
+          confirm: {
+            label: 'Confirm',
+            action: onSave,
+          },
+        }}
+      >
+        <div ref={contentWrapperRef}>
+          <ImageSearchBox onChange={onSearchBoxChange} />
+          <ImageSelectionWrapper>
+            <div>{searchResult}</div>
+            {!!selected.length && <SeparationLine />}
+            <ImageMetaGrids
+              imageMetas={selected}
+              onChange={onImageMetaChange}
+              enableCaption={enableCaption}
+              enableUrl={enableUrl}
+            />
+          </ImageSelectionWrapper>
+          <ImageBlockMetaWrapper>
+            {(enableDelay || enableAlignment) && <SeparationLine />}
+            {enableDelay && (
+              <DelayInput delay={delay} onChange={onDealyChange} />
+            )}
+            {enableAlignment && (
+              <AlignSelector
+                align={align}
+                options={options}
+                onChange={onAlignSelectChange}
+                onOpen={onAlignSelectOpen}
+              />
+            )}
+          </ImageBlockMetaWrapper>
+        </div>
+      </Drawer>
+    </DrawerController>
+  )
+}

package/lib/draft-js/buttons/selector/pagination.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const PaginationWrapper = styled.div`
+  display: flex;
+  justify-content: end;
+`
+
+const Arrows = styled.div`
+  display: flex;
+`
+
+const ArrowButtonWrapper = styled.a`
+  color: #415269;
+  cursor: pointer;
+  ${({ disable }) => {
+    if (disable) {
+      return `
+        pointer-events: none;
+        opacity: 0.65;
+        cursor: unset;
+      `
+    }
+  }}
+`
+
+export function Pagination({ currentPage, total, pageSize, onChange }) {
+  const minPage = 1
+  const limit = Math.ceil(total / pageSize)
+  const nextPage = currentPage + 1
+  const prevPage = currentPage - 1
+
+  // Don't render the pagiantion component if the pageSize is greater than the total number of items in the list.
+  if (total <= pageSize) return null
+
+  return (
+    <PaginationWrapper>
+      <div>
+        {currentPage} of {limit} pages
+      </div>
+      <Arrows>
+        <ArrowButtonWrapper
+          onClick={() => {
+            onChange(prevPage)
+          }}
+          disable={prevPage < minPage}
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            height="24px"
+            width="24px"
+            role="img"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            className="css-bztyua"
+          >
+            <polyline points="15 18 9 12 15 6"></polyline>{' '}
+          </svg>
+        </ArrowButtonWrapper>
+        <ArrowButtonWrapper
+          onClick={() => {
+            onChange(nextPage)
+          }}
+          disable={nextPage > limit}
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            height="24px"
+            width="24px"
+            role="img"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            className="css-bztyua"
+          >
+            <polyline points="9 18 15 12 9 6"></polyline>
+          </svg>
+        </ArrowButtonWrapper>
+      </Arrows>
+    </PaginationWrapper>
+  )
+}