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

package/lib/website/readr/index.js

@@ -7,13 +7,10 @@ exports.default = void 0;
 
 var _draftEditor = _interopRequireDefault(require("./draft-editor"));
 
-var _draftRenderer = _interopRequireDefault(require("./draft-renderer"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Readr = {
-  DraftEditor: _draftEditor.default,
-  DraftRenderer: _draftRenderer.default
+  DraftEditor: _draftEditor.default
 };
 var _default = Readr;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirrormedia/lilith-draft-editor",
-  "version": "1.0.0-beta",
+  "version": "1.0.0-beta4",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -22,7 +22,8 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "draft-js": "^0.11.7"
+    "draft-js": "^0.11.7",
+    "@mirrormedia/lilith-draft-renderer": "1.0.0-beta4"
   },
   "peerDependencies": {
     "react": "18.1.0",

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

@@ -1,113 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -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 />
-}

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

@@ -1,65 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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>
-  )
-}