michelson/dante2

Embed Video missing HTML definition for block with type placeholder

indigofa opened this issue · 11 comments

indigofa commented

Hi,

I'm getting this error when i click the icon to embed a video, image upload is working fine

This is what I'm importing exactly how it's used in Dante site example

import { ImageBlockConfig } from "Dante2/package/es/components/blocks/image.js"
import { VideoBlockConfig } from "Dante2/package/es/components/blocks/video"
import { PlaceholderBlockConfig } from "Dante2/package/es/components/blocks/placeholder"

This is the component

                      <Dante
                        body_placeholder="Body"
                        widgets={[
                          VideoBlockConfig({
                            options: {
                              placeholder: "put an external video link",
                              endpoint: "//noembed.com/embed?url=",
                              caption: "optional caption",
                            },
                          }),
                          PlaceholderBlockConfig(),
                          ImageBlockConfig({
                            options: {
                              upload_handler: handleUploadContentMediaHander,
                            },
                          }),
                        ]}
                        default_wrappers={[
                          { className: "h1-level-1", block: "header-one" },
                        ]}
                        onChange={editor => {
                          const html = convertToHTML({
                            styleToHTML: style => {
                              if (style.startsWith("CUSTOM_COLOR_")) {
                                return (
                                  <span
                                    style={{
                                      color: style.substr(style.length - 7),
                                    }}
                                  />
                                )
                              }
                            },
                            entityToHTML: (entity, originalText) => {
                              if (entity.type === "LINK") {
                                return (
                                  <a href={entity.data.url}>{originalText}</a>
                                )
                              }
                              return originalText
                            },
                            blockToHTML: block => {
                              if (block.type === "image") {
                                return (
                                  <img
                                    src={block.data.url}
                                    alt={block.text}
                                    data-previewsource={block.data.prevUrl}
                                  />
                                )
                              }
                              if (block.type === "code-block") {
                                return (
                                  <code>
                                    <pre>{block.text}</pre>
                                  </code>
                                )
                              }
                            },
                          })(editor.state.editorState._immutable.currentContent)

What the issue can be!

Thank you

michelson commented

Hi , please add the error trace & hopefully an application example to test (codepen , stackblitz)

indigofa commented

Hi @michelson , In this URL codesandbox you can find the error when you click to add a Video

thanks

indigofa commented

Also is the code of this page public I would like to give a look https://michelson.github.io/dante2/#/

indigofa commented

I get this file as starting point image.js I want to create video uploader, my question is how can I allow to select video files ex mp4

thanks

michelson commented

You have to enable the add button which is the element which triggers the upload search.-
check this

dante2/src/editor/components/popovers/addButton.js

Line 288 in 8fc88a8

<input

you have to add video/mp4 to formats

indigofa commented

@michelson I have one button for Image and other for Video, is it possible to tell video select button to use video/mp4 and the image button to keep with Image files

Screen Shot 2020-04-20 at 1 06 12 PM

michelson commented

yes

indigofa commented

@michelson How can I do it, I'm trying to figure out
Now I have in Dante Component

                        widgets={[
                          ImageBlockConfig({
                            options: {
                              upload_handler: handleUploadContentMediaHander,
                            },
                          }),
                          VideoBlockConfig(),
                        ]}

And video.js I have

import React from "react"
import { addNewBlockAt } from "./model"

export default class VideoBlock extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      enabled: false,
      data: this.props.blockProps.data.toJS(),
    }
  }

  componentDidMount() {}

  render() {
    return <div>DEMO</div>
  }
}

export function customIcon() {
  return (
    <svg
      className="icon-signature"
      width="20px"
      height="20px"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill="#494B56"
        fillRule="nonzero"
        d="M9.9347554,11.8295455 C9.795059,11.8295455 9.68330189,11.7113637 9.68330189,11.5636364 L9.68330189,10.3522727 C9.68330189,10.3375 9.68330189,10.3227273 9.68330189,10.3079546 C10.2839964,9.7909091 10.6611767,9.00795455 10.6611767,8.13636364 L10.6611767,6.80681819 C10.6611767,5.25568182 9.47375729,4 8.00694511,4 C6.54013294,4 5.35271355,5.25568182 5.35271355,6.80681819 L5.35271355,8.13636364 C5.35271355,9.00795455 5.72989382,9.7909091 6.33058833,10.3079546 C6.33058833,10.3227273 6.33058833,10.3375 6.33058833,10.3522727 L6.33058833,11.5636364 C6.33058833,11.7113637 6.21883121,11.8295455 6.07913482,11.8295455 C3.83002281,11.8295455 2,13.7647727 2,16.1431819 C2,16.6159091 2.36321064,17 2.81023911,17 L13.1896814,17 C13.6367099,17 13.9999205,16.6159091 13.9999205,16.1431819 C14.0138902,13.7647727 12.1838674,11.8295455 9.9347554,11.8295455 Z M6.19089194,8.13636364 L6.19089194,6.80681819 C6.19089194,5.74318183 7.00113105,4.88636364 8.00694511,4.88636364 C9.01275918,4.88636364 9.82299828,5.74318183 9.82299828,6.80681819 L9.82299828,8.13636364 C9.82299828,9.20000001 9.01275918,10.0568182 8.00694511,10.0568182 C7.00113105,10.0568182 6.19089194,9.20000001 6.19089194,8.13636364 Z M2.83817839,16.1136363 C2.85214803,14.2375 4.29102093,12.7159091 6.07913482,12.7159091 C6.67982933,12.7159091 7.16876672,12.1988637 7.16876672,11.5636364 L7.16876672,10.7954546 C7.43418988,10.8840909 7.71358268,10.9431818 8.00694511,10.9431818 C8.30030755,10.9431818 8.57970034,10.8840909 8.8451235,10.7954546 L8.8451235,11.5488637 C8.8451235,12.1840909 9.33406089,12.7011364 9.9347554,12.7011364 C11.7228693,12.7159091 13.1617422,14.2375 13.1757119,16.1136363 L2.83817839,16.1136363 Z"
      ></path>
      <rect
        fill="#494B56"
        fillRule="nonzero"
        x="13"
        y="6"
        width="6"
        height="1"
      ></rect>
      <rect
        fill="#494B56"
        fillRule="nonzero"
        x="13"
        y="8"
        width="6"
        height="1"
      ></rect>
      <rect
        fill="#494B56"
        fillRule="nonzero"
        x="13"
        y="10"
        width="6"
        height="1"
      ></rect>
    </svg>
  )
}

export const VideoBlockConfig = (options = {}) => {
  let config = {
    title: "add a video",
    type: "video",
    icon: customIcon,
    block: VideoBlock,
    editable: false,
    renderable: true,
    breakOnContinuous: true,
    wrapper_class: "graf graf--figure",
    selected_class: "is-selected is-mediaFocused",

    handleEnterWithoutText(ctx, block) {
      const { editorState } = ctx.state
      return ctx.onChange(addNewBlockAt(editorState, block.getKey()))
    },

    handleEnterWithText(ctx, block) {
      const { editorState } = ctx.state
      return ctx.onChange(addNewBlockAt(editorState, block.getKey()))
    },

    widget_options: {
      displayOnInlineTooltip: true,
      insertion: "insertion",
      insert_block: "video",
    },
    options: {},
  }

  return Object.assign(config, options)
}

I tried to. have <input type="file" /> instead of icon, but this way is not working, as soon as i click the icon its rendering return <div>DEMO</div>

michelson commented
indigofa commented

@michelson If I change insertion: "insertion" to insertion: "upload", the component automatically is rendering the Image ( it became as it is Image Uploder ), I don't know how can I use something like addButton.js just for video file, I want to be able to select the video file formats and render it.

If I modify this line

dante2/src/editor/components/popovers/addButton.js

Line 290 in 8fc88a8

accept="image/*"

Then in image select it will be allowed to select video/mp4 formats, is it possible if I click on button to select video I want to be able to select video/mp4 formats, and If I click to select image, I want to keep it as it is allow to select only images.

Thanks

garmjs commented

@indigofa I think you need to fork the project and modify the addButton, check also in addButton you have to add a new insertion to handle video select file and modify input to accept="image/, video/"

    let request_block = this.widgets().find(o => o.type === type)
    switch (request_block.widget_options.insertion) {
      case "upload":
        return this.clickOnFileUpload(e, request_block)
      case "placeholder":
        return this.handlePlaceholder(request_block)
      case "insertion":
        return this.handleInsertion(request_block)
      default:
        return console.log(`WRONG TYPE FOR ${ request_block.widget_options.insertion }`)
    }
  }

@michelson can you confirm is this the only way to do it