@mirrormedia/lilith-draft-editor 1.0.0-beta

package/lib/website/readr/draft-renderer/block-redender-fn.tsx

@@ -0,0 +1,77 @@
+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 { 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 { TableBlock } from '../custom/block-renderer/table-block'
+import { ColorBoxBlock } from '../custom/block-renderer/color-box-block'
+import { BGImageBlock } from '../custom/block-renderer/background-image-block'
+import { BGVideoBlock } from '../custom/block-renderer/background-video-block'
+import { RelatedPostBlock } from '../custom/block-renderer/related-post-block'
+import { 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/readr/draft-renderer/entity-decorator.tsx

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

package/lib/website/readr/draft-renderer/index-deprecated.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Editor, EditorState, convertFromRaw } from 'draft-js'
+import decorators from '../draft-editor/entity-decorator'
+import { atomicBlockRenderer } from '../draft-editor/block-redender-fn'
+
+// to be separate
+const styleMap = {
+  CODE: {
+    backgroundColor: 'rgba(0, 0, 0, 0.05)',
+    fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
+    fontSize: 16,
+    padding: 2,
+  },
+}
+const blockRendererFn = (block) => {
+  const atomicBlockObj = atomicBlockRenderer(block)
+  return atomicBlockObj
+}
+
+const getBlockStyle = (block) => {
+  switch (block.getType()) {
+    case 'blockquote':
+      return 'RichEditor-blockquote'
+
+    default:
+      return null
+  }
+}
+
+export default function DraftRenderer({ rawContentBlock }) {
+  const contentState = convertFromRaw(rawContentBlock)
+  const editorState = EditorState.createWithContent(contentState, decorators)
+
+  return (
+    <Editor
+      editorState={editorState}
+      readOnly
+      customStyleMap={styleMap}
+      blockRendererFn={blockRendererFn}
+      blockStyleFn={getBlockStyle}
+    />
+  )
+}

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

@@ -0,0 +1,150 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { Editor, EditorState } from 'draft-js'
+
+import { atomicBlockRenderer } from './block-redender-fn'
+import decorators from './entity-decorator'
+
+import { CUSTOM_STYLE_PREFIX_FONT_COLOR } from '../../../draft-js/buttons/font-color'
+import { CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR } from '../../../draft-js/buttons/background-color'
+
+const DraftEditorWrapper = styled.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;
+  }
+`
+
+type RichTextEditorProps = {
+  onChange: (editorState) => void
+  editorState: EditorState
+}
+type State = {
+  isEnlarged?: boolean
+  readOnly?: boolean
+}
+
+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?.startsWith(CUSTOM_STYLE_PREFIX_FONT_COLOR)) {
+      styles['color'] = styleName.split(CUSTOM_STYLE_PREFIX_FONT_COLOR)[1]
+    }
+    if (styleName?.startsWith(CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)) {
+      styles['backgroundColor'] = styleName.split(
+        CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR
+      )[1]
+    }
+    return styles
+  }, {})
+}
+
+const blockStyleFn = (editorState, block) => {
+  const entityKey = block.getEntityAt(0)
+  const entity = entityKey
+    ? editorState.getCurrentContent().getEntity(entityKey)
+    : null
+
+  let result = ''
+  const blockData = block.getData()
+  if (blockData) {
+    const textAlign = 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()?.alignment) {
+        // support all atomic block to set alignment
+        result += ' ' + entity.getData().alignment
+      }
+      break
+    default:
+      break
+  }
+  return result
+}
+
+const blockRendererFn = (block) => {
+  const atomicBlockObj = atomicBlockRenderer(block)
+  return atomicBlockObj
+}
+
+function RichTextEditor({ editorState }) {
+  return (
+    <DraftEditorWrapper>
+      <Editor
+        editorState={editorState}
+        customStyleMap={customStyleMap}
+        blockStyleFn={blockStyleFn.bind(null, editorState)}
+        blockRendererFn={blockRendererFn}
+        customStyleFn={customStyleFn}
+        readOnly
+      />
+    </DraftEditorWrapper>
+  )
+}
+
+const DraftRenderer = {
+  RichTextEditor,
+  decorators,
+}
+export default DraftRenderer

package/lib/website/readr/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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
+};
+var _default = Readr;
+exports.default = _default;

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@mirrormedia/lilith-draft-editor",
+  "version": "1.0.0-beta",
+  "description": "",
+  "main": "lib/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "make dev",
+    "build": "make build",
+    "clean": "make clean",
+    "build-lib": "make build-lib"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/readr-media/react.git",
+    "directory": "packages/draft-editor"
+  },
+  "keywords": [
+    "react",
+    "readr",
+    "draft.js"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "draft-js": "^0.11.7"
+  },
+  "peerDependencies": {
+    "react": "18.1.0",
+    "react-dom": "^18.1.0",
+    "styled-components": "5.3.5",
+    "@keystone-6/core": "1.1.1",
+    "@keystone-ui/button": "^6.0.0",
+    "@keystone-ui/fields": "^6.0.0",
+    "@keystone-ui/modals": "^5.0.0"
+  },
+  "files": [
+    "lib"
+  ]
+}