@mirrormedia/lilith-draft-editor 1.0.0-beta

package/lib/draft-js/block-renderer/background-image-block.tsx

@@ -0,0 +1,113 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { ContentBlock, ContentState } from 'draft-js'
+import draftConverter from '../editor/draft-converter'
+import { BGImageInput } from '../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 [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, body, 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}
+      />
+      <BGImageRenderWrapper
+        image={image?.imageFile?.url}
+        textBlockAlign={textBlockAlign}
+      >
+        <BGImageRenderBody dangerouslySetInnerHTML={{ __html: body }} />
+        <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>
+      </BGImageRenderWrapper>
+    </React.Fragment>
+  )
+}

package/lib/draft-js/block-renderer/background-video-block.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { ContentBlock, ContentState } from 'draft-js'
+import draftConverter from '../editor/draft-converter'
+import { BGVideoInput } from '../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 [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, body, 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}
+      />
+      <BGVideoRenderWrapper textBlockAlign={textBlockAlign}>
+        <BGVideoRednerVideo muted autoPlay loop>
+          <source src={video?.videoSrc} />
+          <source src={video?.videoFile?.url} />
+        </BGVideoRednerVideo>
+        <BGVideoRenderBody dangerouslySetInnerHTML={{ __html: body }} />
+        <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>
+      </BGVideoRenderWrapper>
+    </React.Fragment>
+  )
+}

package/lib/draft-js/block-renderer/color-box-block.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { ContentBlock, ContentState } from 'draft-js'
+import draftConverter from '../editor/draft-converter'
+import { ColorBoxInput } from '../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 [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, body, 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}
+      />
+      <ColorBoxRenderWrapper color={color}>
+        <div dangerouslySetInnerHTML={{ __html: body }} />
+        <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>
+      </ColorBoxRenderWrapper>
+    </React.Fragment>
+  )
+}

package/lib/draft-js/block-renderer/divider-block.tsx

@@ -0,0 +1,12 @@
+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 />
+}

package/lib/draft-js/block-renderer/embedded-code-block.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useRef } from 'react'
+import { DraftEntityInstance } from 'draft-js'
+import { Block, Caption } from '../buttons/embedded-code'
+
+export const EmbeddedCodeBlock = (entity: DraftEntityInstance) => {
+  const { caption, embeddedCode } = entity.getData()
+  const embedded = useRef(null)
+
+  useEffect(() => {
+    if (!embedded.current) return
+    const node: HTMLElement = embedded.current
+
+    const fragment = document.createDocumentFragment()
+
+    // `embeddedCode` is a string, which may includes
+    // multiple '<script>' tags and other html tags.
+    // For executing '<script>' tags on the browser,
+    // we need to extract '<script>' tags from `embeddedCode` string first.
+    //
+    // The approach we have here is to parse html string into elements,
+    // and we could use DOM element built-in functions,
+    // such as `querySelectorAll` method, to query '<script>' elements,
+    // and other non '<script>' elements.
+    const parser = new DOMParser()
+    const ele = parser.parseFromString(
+      `<div id="draft-embed">${embeddedCode}</div>`,
+      'text/html'
+    )
+    const scripts = ele.querySelectorAll('script')
+    const nonScripts = ele.querySelectorAll('div#draft-embed > :not(script)')
+
+    nonScripts.forEach((ele) => {
+      fragment.appendChild(ele)
+    })
+
+    scripts.forEach((s) => {
+      const scriptEle = document.createElement('script')
+      const attrs = s.attributes
+      for (let i = 0; i < attrs.length; i++) {
+        scriptEle.setAttribute(attrs[i].name, attrs[i].value)
+      }
+      scriptEle.text = s.text || ''
+      fragment.appendChild(scriptEle)
+    })
+
+    node.appendChild(fragment)
+  }, [embeddedCode])
+
+  return (
+    <div>
+      {
+        // WORKAROUND:
+        // The following `<input>` is to solve [issue 153](https://github.com/mirror-media/openwarehouse-k6/issues/153).
+        // If the emebed code generates `<input>` or `<textarea>` and appends them onto DOM,
+        // and then the generated `<input>` or `<textarea>` will hijack the users' cursors.
+        // It will cause that users could not edit the DraftJS Editor anymore.
+        // The following phony `<input>` is used to prevent the generated `<input>` or `<textare>` from
+        // hijacking the users' cursors.
+      }
+      <input hidden disabled />
+      <Block ref={embedded} />
+      {caption ? <Caption>{caption}</Caption> : null}
+    </div>
+  )
+}

package/lib/draft-js/block-renderer/image-block.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import styled from 'styled-components'
+import { DraftEntityInstance } from 'draft-js'
+
+const Image = styled.img`
+  width: 100%;
+`
+
+const Figure = styled.figure`
+  margin-block: unset;
+  margin-inline: unset;
+  margin: 0 10px;
+`
+
+const Anchor = styled.a`
+  text-decoration: none;
+`
+
+export function ImageBlock(entity: DraftEntityInstance) {
+  const { desc, imageFile, resized, url } = entity.getData()
+
+  let imgBlock = (
+    <Figure>
+      <Image
+        src={resized?.w800}
+        onError={(e) => (e.currentTarget.src = imageFile?.url)}
+      />
+      <figcaption>{desc}</figcaption>
+    </Figure>
+  )
+
+  if (url) {
+    imgBlock = (
+      <Anchor href={url} target="_blank">
+        {imgBlock}
+      </Anchor>
+    )
+  }
+
+  return imgBlock
+}

package/lib/draft-js/block-renderer/info-box-block.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react'
+import { ContentBlock, ContentState } from 'draft-js'
+import styled from 'styled-components'
+import draftConverter from '../editor/draft-converter'
+import { InfoBoxInput } from '../buttons/info-box'
+
+const InfoBoxRenderWrapper = styled.div`
+  background-color: #f5f4f3;
+  padding: 30px;
+  position: relative;
+`
+
+const InfoBoxRenderButton = styled.div`
+  cursor: pointer;
+`
+
+type InfoBoxBlockProps = {
+  block: ContentBlock
+  blockProps: {
+    onEditStart: () => void
+    onEditFinish: ({
+      entityKey,
+      entityData,
+    }: {
+      entityKey?: string
+      entityData?: Record<string, unknown>
+    }) => void
+  }
+  contentState: ContentState
+}
+
+export function InfoBoxBlock(props: InfoBoxBlockProps) {
+  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 { title, body, rawContentState } = entity.getData()
+  const onChange = ({
+    title: newTitle,
+    rawContentState: newRawContentState,
+  }) => {
+    // close `InfoBoxInput`
+    setToShowInput(false)
+
+    onEditFinish({
+      entityKey,
+      entityData: {
+        title: newTitle,
+        body: draftConverter.convertToHtml(newRawContentState),
+        rawContentState: newRawContentState,
+      },
+    })
+  }
+
+  return (
+    <React.Fragment>
+      <InfoBoxInput
+        title={title}
+        rawContentStateForInfoBoxEditor={rawContentState}
+        onChange={onChange}
+        onCancel={() => {
+          onEditFinish({})
+          setToShowInput(false)
+        }}
+        isOpen={toShowInput}
+      />
+      <InfoBoxRenderWrapper>
+        <h2>{title}</h2>
+        <div dangerouslySetInnerHTML={{ __html: body }} />
+        <InfoBoxRenderButton
+          onClick={() => {
+            // call `onEditStart` prop as we are trying to update the InfoBox entity
+            onEditStart()
+            // open `InfoBoxInput`
+            setToShowInput(true)
+          }}
+        >
+          <i className="fa-solid fa-pen"></i>
+          <span>Modify</span>
+        </InfoBoxRenderButton>
+      </InfoBoxRenderWrapper>
+    </React.Fragment>
+  )
+}

package/lib/draft-js/block-renderer/media-block.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { DraftEntityInstance } from 'draft-js'
+
+const styles = {
+  media: {
+    width: '100%',
+  },
+}
+
+const Audio = (props) => {
+  return <audio controls src={props.src} style={styles.media} />
+}
+
+const Image = (props) => {
+  return <img src={props.src} style={styles.media} />
+}
+
+const Video = (props) => {
+  return <video controls src={props.src} style={styles.media} />
+}
+
+export const MediaBlock = (entity: DraftEntityInstance) => {
+  const { src } = entity.getData()
+  const type = entity.getType()
+
+  let media
+  if (type === 'audioLink') {
+    media = <Audio src={src} />
+  } else if (type === 'imageLink') {
+    media = <Image src={src} />
+  } else if (type === 'videoLink') {
+    media = <Video src={src} />
+  }
+
+  return media
+}

package/lib/draft-js/block-renderer/related-post-block.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import styled from 'styled-components'
+import { DraftEntityInstance } from 'draft-js'
+
+const RelatedPostRenderWrapper = styled.div`
+  display: flex;
+  width: 100%;
+`
+
+const RelatedPostItem = styled.div`
+  flex: 0 0 33.3333%;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+`
+
+const RelatedPostImage = styled.img`
+  display: block;
+  width: 100%;
+  aspect-ratio: 2;
+  object-fit: cover;
+`
+
+const RelatedPostTitle = styled.p`
+  margin: 0;
+  padding: 12px;
+`
+
+export function RelatedPostBlock(entity: DraftEntityInstance) {
+  const { posts } = entity.getData()
+
+  return (
+    <React.Fragment>
+      <RelatedPostRenderWrapper>
+        {posts.map((post) => (
+          <RelatedPostItem key={post.id}>
+            <RelatedPostImage
+              src={post.heroImage?.resized?.original}
+              onError={(e) =>
+                (e.currentTarget.src = post.heroImage?.imageFile?.url)
+              }
+            />
+            <RelatedPostTitle>{post.name}</RelatedPostTitle>
+          </RelatedPostItem>
+        ))}
+      </RelatedPostRenderWrapper>
+    </React.Fragment>
+  )
+}