video elements are block elements now

Author: nsfmc

package.json

@@ -16,8 +16,7 @@
   "license": "ISC",
   "dependencies": {
     "exenv": "^1.2.1",
-    "fetch": "^1.0.1",
-    "markdown-it-video": "^0.3.1",
+    "markdown-it-video": "github:nsfmc/markdown-it-video#video-block",
     "prosemirror": "github:spaced-out/prosemirror#upstream-master",
     "react": "^15.0.2",
     "whatwg-fetch": "^1.0.0"

src/video-url.js

@@ -0,0 +1,30 @@
+
+
+export const yt_regex = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
+export function youtube_parser (url) {
+  var match = url.match(yt_regex);
+  return match && match[7].length === 11 ? match[7] : url;
+}
+
+/*eslint-disable max-len */
+export const vimeo_regex = /https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|)(\d+)(?:$|\/|\?)/;
+/*eslint-enable max-len */
+export function vimeo_parser (url) {
+  var match = url.match(vimeo_regex);
+  return match && typeof match[3] === 'string' ? match[3] : url;
+}
+
+export const vine_regex = /^http(?:s?):\/\/(?:www\.)?vine\.co\/v\/([a-zA-Z0-9]{1,13}).*/;
+export function vine_parser (url) {
+  var match = url.match(vine_regex);
+  return match && match[1].length === 11 ? match[1] : url;
+}
+
+export const videoUrlParser = (videoUrl) => {
+  if (videoUrl.match(yt_regex)) {
+    return {service: 'youtube', videoId: youtube_parser(videoUrl)};
+  }
+  if (videoUrl.match(vimeo_regex)) {
+    return {service: 'vimeo', videoId: vimeo_parser(videoUrl)};
+  }
+}

src/video.js

@@ -1,6 +1,7 @@
-import {Inline, Attribute} from 'prosemirror/dist/model';
+import {Inline, Block, Attribute} from 'prosemirror/dist/model';
 import MarkdownVideoPlugin from 'markdown-it-video';
 import ExecutionEnvironment from 'exenv';
+import {videoUrlParser} from './video-url';
 
 
 let Dropdown = function(){}
@@ -13,16 +14,20 @@ if (ExecutionEnvironment.canUseDOM) {
 }
 
 
-export class VideoEmbed extends Inline {
+
+
+export class VideoEmbed extends Block {
   // Not sure what this is for other than tagging
   get attrs() {
     return {
+      // url: new Attribute({label: 'video url'}),
       videoId: new Attribute({label: 'video id'}),
       service: new Attribute({label: 'hosting service'}),
       width: new Attribute({label: 'embed width', default: 320}),
       height: new Attribute({label: 'embed height', default: 240}),
     }
   }
+  get contains() { return null }
 }
 
 const generateVideoUrl = (attrs) => {
@@ -35,22 +40,22 @@ const generateVideoUrl = (attrs) => {
   }
 }
 
-const generateTempVideoNode = (attrs) => {
+const generateTempVideoNode = (s, attrs) => {
   let {service, videoId} = attrs;
   const videoUrl = generateVideoUrl(attrs);
 
-  return elt('span', {
+  return s.elt('span', {
     'class': `prosemirror-video-embed prosemirror-video-embed-${service}`,
     'contenteditable': 'false'
-  }, elt('span', {
+  }, s.elt('span', {
     'class': `prosemirror-video-embed-label`
   }, `video at ${videoUrl}`))
 };
 
 VideoEmbed.prototype.serializeMarkdown = (state, node) => {
   state.write(`@[${node.attrs.service}](${node.attrs.videoId})`)
 }
-VideoEmbed.prototype.serializeDOM = (node) => {
+VideoEmbed.prototype.serializeDOM = (node, serializer) => {
   const {service, videoId} = node.attrs;
   if (['vimeo', 'youtube'].indexOf(service.toLowerCase()) < 0) {
     return;
@@ -64,7 +69,7 @@ VideoEmbed.prototype.serializeDOM = (node) => {
   //     })
   // }
 
-  return generateTempVideoNode(node.attrs);
+  return serializer.elt('div', null, generateTempVideoNode(serializer, node.attrs));
 }
 
 
@@ -86,14 +91,10 @@ VideoEmbed.register("command", "insert", {
   })
 
 VideoEmbed.register('parseMarkdown', 'video', {parse: function(state, tok) {
-  state.addNode(this, {service: tok.service, videoId: tok.videoID});
+  state.addNode(this, {service: tok.service, videoId: tok.videoID, markup: '<div>'});
 }})
 
 
 VideoEmbed.register('configureMarkdown', 'video', parser => {
   return parser.use(MarkdownVideoPlugin);
 })
-
-// export const dynamicMenu = new Dropdown({label: 'Insert dynamic field'}, new MenuCommandGroup('dynamic'))
-
-