Added video

[noamalffasy]

It uses draft-js-video-plugin for the video type and the markdown is based on remark-shortcodes

[kadikraman]

Hi @noamalffasy - thanks for the PR! Looks like your editor has prettier auto-formatting or something of the like turned on, so it's converted all the single quotes to double quotes, which violates the repo's eslint rules (and thus makes the CI fail).

Could you please revert the quotes back to single quotes so I could review the PR? Thanks!

[noamalffasy]

Hey, sorry about that. I fixed it

[kadikraman]

I've just added prettier to the project so we would have consistent formatting in the future, but merging master into this PR broke the build. All the tests still past, the build is failing at the eslint step, so I'm going to merge this now and fix the linting myself.

[kadikraman]

@noamalffasy published as v1.0.0 (there aren't any breaking changes, I just thought it's about time for a major version release so could do semver properly 😊)

[noamalffasy]

Awesome!

[omryr]

how does this work? if i use embbed video it should be able to work in my markdown? or do i need to add anything?

[noamalffasy]

@omryr I used a draftjs editor that supports plugins (draft-js-plugins-editor) and added draft-js-video-plugin to the plugins. Videos that are added using the plugin (videoPlugin.addVideo(editorState, { src: "https://www.youtube.com/embed/dQw4w9WgXcQ"})) will be formatted properly using this converter to markdown.

[omryr]

@noamalffasy so i dont need to add the plugins myself? or do i need to add them? and thanks for the help

[noamalffasy]

You do need to add the plugins (use this guide to understand how). The converter will convert the video from the editorState JSON format to markdown.

[omryr]

aw i see so i must change the main editor as well, ok thanks for the help, btw did you maybe encounter an issue with cors? "Cross-Origin Read Blocking (CORB) blocked cross-origin response" getting this when trying to load the youtube video

[noamalffasy]

I don't remember getting CORB, did you add the https://www.youtube.com/embed/[ID] url or https://www.youtube.com/watch?v=[ID]?

[omryr]

i added the url like this 'https://www.youtube.com/embed/3Wf29RiKp70'

[noamalffasy]

Does the CORB block the video or another resource?

[omryr]

seems like its the video "Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.youtube.com/embed/u7qkJ6xvJDg with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details."

[noamalffasy]

Try to add type="text/html" to the iframe manually and ?origin=[your domain] to the url and check if it still produces this error. I was unable to reproduce the error but I think that can help you.

[omryr]

in your example btw i dont see any usage of markdown right? because im trying to add the video to a markdown editor

[noamalffasy]

The guide I sent isn't related to markdown, it's only for implementing the video plugin in the editor

[omryr]

I see, so this is what i have already built in, inside the library I am using react-draft-wysiwyg, did you ever use it with markdown?

[noamalffasy]

I haven't used react-draft-wysiwyg and it doesn't seem like it supports plugins so you won't be able to use it with the video plugin. I have used the draft-js-plugins-editor and using plugins I made it a WYSIWYG editor. By using draftjs-md-converter I converted it to markdown and stored on the DB (it's weighs less than the editorState of draft.js), in the preview it converts it from markdown to html.