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

package/lib/website/readr/draft-renderer/block-renderer-fn.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.atomicBlockRenderer = atomicBlockRenderer;
+
+var _embeddedCodeBlock = require("../custom/block-renderer/embedded-code-block");
+
+var _mediaBlock = require("../custom/block-renderer/media-block");
+
+var _imageBlock = require("../custom/block-renderer/image-block");
+
+var _infoBoxBlock = require("../custom/block-renderer/info-box-block");
+
+var _slideshowBlock = require("../custom/block-renderer/slideshow-block");
+
+var _dividerBlock = require("../custom/block-renderer/divider-block");
+
+var _tableBlock = require("../custom/block-renderer/table-block");
+
+var _colorBoxBlock = require("../custom/block-renderer/color-box-block");
+
+var _backgroundImageBlock = require("../custom/block-renderer/background-image-block");
+
+var _backgroundVideoBlock = require("../custom/block-renderer/background-video-block");
+
+var _relatedPostBlock = require("../custom/block-renderer/related-post-block");
+
+var _sideIndexBlock = require("../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 (0, _mediaBlock.MediaBlock)(entity);
+      }
+
+    case 'image':
+      {
+        return (0, _imageBlock.ImageBlock)(entity);
+      }
+
+    case 'slideshow':
+      {
+        return (0, _slideshowBlock.SlideshowBlock)(entity);
+      }
+
+    case 'slideshow-v2':
+      {
+        return (0, _slideshowBlock.SlideshowBlockV2)(entity);
+      }
+
+    case 'EMBEDDEDCODE':
+      {
+        return (0, _embeddedCodeBlock.EmbeddedCodeBlock)(entity);
+      }
+
+    case 'INFOBOX':
+      {
+        return (0, _infoBoxBlock.InfoBoxBlock)(props);
+      }
+
+    case 'DIVIDER':
+      {
+        return (0, _dividerBlock.DividerBlock)();
+      }
+
+    case 'TABLE':
+      {
+        return (0, _tableBlock.TableBlock)(props);
+      }
+
+    case 'COLORBOX':
+      {
+        return (0, _colorBoxBlock.ColorBoxBlock)(props);
+      }
+
+    case 'BACKGROUNDIMAGE':
+      {
+        return (0, _backgroundImageBlock.BGImageBlock)(props);
+      }
+
+    case 'BACKGROUNDVIDEO':
+      {
+        return (0, _backgroundVideoBlock.BGVideoBlock)(props);
+      }
+
+    case 'RELATEDPOST':
+      {
+        return (0, _relatedPostBlock.RelatedPostBlock)(entity);
+      }
+
+    case 'SIDEINDEX':
+      {
+        return (0, _sideIndexBlock.SideIndexBlock)(props);
+      }
+  }
+
+  return null;
+};
+
+function atomicBlockRenderer(block) {
+  if (block.getType() === 'atomic') {
+    return {
+      component: AtomicBlock,
+      editable: false
+    };
+  }
+
+  return null;
+}

package/lib/website/readr/draft-renderer/entity-decorator.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _draftJs = require("draft-js");
+
+var _annotationDecorator = require("../custom/entity-decorator/annotation-decorator");
+
+var _linkDecorator = require("../custom/entity-decorator/link-decorator");
+
+const decorators = new _draftJs.CompositeDecorator([_annotationDecorator.annotationDecorator, _linkDecorator.linkDecorator]);
+var _default = decorators;
+exports.default = _default;

package/lib/website/readr/draft-renderer/index.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _draftJs = require("draft-js");
+
+var _blockRendererFn = require("./block-renderer-fn");
+
+var _entityDecorator = _interopRequireDefault(require("./entity-decorator"));
+
+var _fontColor = require("../../../draft-js/buttons/font-color");
+
+var _backgroundColor = require("../../../draft-js/buttons/background-color");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const DraftEditorWrapper = _styledComponents.default.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;
+  }
+`;
+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 !== null && styleName !== void 0 && styleName.startsWith(_fontColor.CUSTOM_STYLE_PREFIX_FONT_COLOR)) {
+      styles['color'] = styleName.split(_fontColor.CUSTOM_STYLE_PREFIX_FONT_COLOR)[1];
+    }
+
+    if (styleName !== null && styleName !== void 0 && styleName.startsWith(_backgroundColor.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)) {
+      styles['backgroundColor'] = styleName.split(_backgroundColor.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)[1];
+    }
+
+    return styles;
+  }, {});
+};
+
+const blockStyleFn = (editorState, block) => {
+  var _entity$getData;
+
+  const entityKey = block.getEntityAt(0);
+  const entity = entityKey ? editorState.getCurrentContent().getEntity(entityKey) : null;
+  let result = '';
+  const blockData = block.getData();
+
+  if (blockData) {
+    const textAlign = blockData === null || blockData === void 0 ? void 0 : 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 = entity.getData()) !== null && _entity$getData !== void 0 && _entity$getData.alignment) {
+        // support all atomic block to set alignment
+        result += ' ' + entity.getData().alignment;
+      }
+
+      break;
+
+    default:
+      break;
+  }
+
+  return result;
+};
+
+const blockRendererFn = block => {
+  const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
+  return atomicBlockObj;
+};
+
+function RichTextEditor({
+  rawContentBlock
+}) {
+  const contentState = (0, _draftJs.convertFromRaw)(rawContentBlock);
+
+  const editorState = _draftJs.EditorState.createWithContent(contentState, _entityDecorator.default);
+
+  return /*#__PURE__*/_react.default.createElement(DraftEditorWrapper, null, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
+    editorState: editorState,
+    customStyleMap: customStyleMap,
+    blockStyleFn: blockStyleFn.bind(null, editorState),
+    blockRendererFn: blockRendererFn,
+    customStyleFn: customStyleFn,
+    readOnly: true
+  }));
+}
+
+const DraftRenderer = {
+  RichTextEditor,
+  decorators: _entityDecorator.default
+};
+var _default = DraftRenderer;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirrormedia/lilith-draft-editor",
-  "version": "1.0.0-beta",
+  "version": "1.0.0-beta2",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

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>
-  )
-}