From 0e2d5db0845ccaabb708dcac1ddbaf27a6617abb Mon Sep 17 00:00:00 2001 From: Marcos Ojeda Date: Fri, 27 May 2016 16:16:29 -0500 Subject: [PATCH] move param prompt modifications into their own file --- demo/bundle.js | 653 ++++++++------------------------------------ demo/index.html | 1 + src/index.js | 2 +- src/param-prompt.js | 67 +++++ src/video.js | 83 +----- 5 files changed, 201 insertions(+), 605 deletions(-) create mode 100644 src/param-prompt.js diff --git a/demo/bundle.js b/demo/bundle.js index 88f4226..1fad83c 100644 --- a/demo/bundle.js +++ b/demo/bundle.js @@ -21,7 +21,7 @@ _reactDom2.default.render(_react2.default.createElement( _react2.default.createElement(_index2.default, { value: 'ohai {name} \n\n@[vimeo](82570177)', debug: true, dynamicLabels: ['name', 'email', 'blam'] }) ), document.getElementById('editor')); -},{"../src/index.js":131,"react":"react","react-dom":"react-dom"}],2:[function(require,module,exports){ +},{"../src/index.js":130,"react":"react","react-dom":"react-dom"}],2:[function(require,module,exports){ (function(mod) { if (typeof exports == "object" && typeof module == "object") // CommonJS module.exports = mod() @@ -21811,441 +21811,6 @@ module.exports.Z = require('./categories/Z/regex'); },{"./categories/Cc/regex":122,"./categories/Cf/regex":123,"./categories/P/regex":124,"./categories/Z/regex":125,"./properties/Any/regex":127}],127:[function(require,module,exports){ module.exports=/[\0-\uD7FF\uDC00-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF]/ },{}],128:[function(require,module,exports){ -(function(self) { - 'use strict'; - - if (self.fetch) { - return - } - - var support = { - searchParams: 'URLSearchParams' in self, - iterable: 'Symbol' in self && 'iterator' in Symbol, - blob: 'FileReader' in self && 'Blob' in self && (function() { - try { - new Blob() - return true - } catch(e) { - return false - } - })(), - formData: 'FormData' in self, - arrayBuffer: 'ArrayBuffer' in self - } - - function normalizeName(name) { - if (typeof name !== 'string') { - name = String(name) - } - if (/[^a-z0-9\-#$%&'*+.\^_`|~]/i.test(name)) { - throw new TypeError('Invalid character in header field name') - } - return name.toLowerCase() - } - - function normalizeValue(value) { - if (typeof value !== 'string') { - value = String(value) - } - return value - } - - // Build a destructive iterator for the value list - function iteratorFor(items) { - var iterator = { - next: function() { - var value = items.shift() - return {done: value === undefined, value: value} - } - } - - if (support.iterable) { - iterator[Symbol.iterator] = function() { - return iterator - } - } - - return iterator - } - - function Headers(headers) { - this.map = {} - - if (headers instanceof Headers) { - headers.forEach(function(value, name) { - this.append(name, value) - }, this) - - } else if (headers) { - Object.getOwnPropertyNames(headers).forEach(function(name) { - this.append(name, headers[name]) - }, this) - } - } - - Headers.prototype.append = function(name, value) { - name = normalizeName(name) - value = normalizeValue(value) - var list = this.map[name] - if (!list) { - list = [] - this.map[name] = list - } - list.push(value) - } - - Headers.prototype['delete'] = function(name) { - delete this.map[normalizeName(name)] - } - - Headers.prototype.get = function(name) { - var values = this.map[normalizeName(name)] - return values ? values[0] : null - } - - Headers.prototype.getAll = function(name) { - return this.map[normalizeName(name)] || [] - } - - Headers.prototype.has = function(name) { - return this.map.hasOwnProperty(normalizeName(name)) - } - - Headers.prototype.set = function(name, value) { - this.map[normalizeName(name)] = [normalizeValue(value)] - } - - Headers.prototype.forEach = function(callback, thisArg) { - Object.getOwnPropertyNames(this.map).forEach(function(name) { - this.map[name].forEach(function(value) { - callback.call(thisArg, value, name, this) - }, this) - }, this) - } - - Headers.prototype.keys = function() { - var items = [] - this.forEach(function(value, name) { items.push(name) }) - return iteratorFor(items) - } - - Headers.prototype.values = function() { - var items = [] - this.forEach(function(value) { items.push(value) }) - return iteratorFor(items) - } - - Headers.prototype.entries = function() { - var items = [] - this.forEach(function(value, name) { items.push([name, value]) }) - return iteratorFor(items) - } - - if (support.iterable) { - Headers.prototype[Symbol.iterator] = Headers.prototype.entries - } - - function consumed(body) { - if (body.bodyUsed) { - return Promise.reject(new TypeError('Already read')) - } - body.bodyUsed = true - } - - function fileReaderReady(reader) { - return new Promise(function(resolve, reject) { - reader.onload = function() { - resolve(reader.result) - } - reader.onerror = function() { - reject(reader.error) - } - }) - } - - function readBlobAsArrayBuffer(blob) { - var reader = new FileReader() - reader.readAsArrayBuffer(blob) - return fileReaderReady(reader) - } - - function readBlobAsText(blob) { - var reader = new FileReader() - reader.readAsText(blob) - return fileReaderReady(reader) - } - - function Body() { - this.bodyUsed = false - - this._initBody = function(body) { - this._bodyInit = body - if (typeof body === 'string') { - this._bodyText = body - } else if (support.blob && Blob.prototype.isPrototypeOf(body)) { - this._bodyBlob = body - } else if (support.formData && FormData.prototype.isPrototypeOf(body)) { - this._bodyFormData = body - } else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) { - this._bodyText = body.toString() - } else if (!body) { - this._bodyText = '' - } else if (support.arrayBuffer && ArrayBuffer.prototype.isPrototypeOf(body)) { - // Only support ArrayBuffers for POST method. - // Receiving ArrayBuffers happens via Blobs, instead. - } else { - throw new Error('unsupported BodyInit type') - } - - if (!this.headers.get('content-type')) { - if (typeof body === 'string') { - this.headers.set('content-type', 'text/plain;charset=UTF-8') - } else if (this._bodyBlob && this._bodyBlob.type) { - this.headers.set('content-type', this._bodyBlob.type) - } else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) { - this.headers.set('content-type', 'application/x-www-form-urlencoded;charset=UTF-8') - } - } - } - - if (support.blob) { - this.blob = function() { - var rejected = consumed(this) - if (rejected) { - return rejected - } - - if (this._bodyBlob) { - return Promise.resolve(this._bodyBlob) - } else if (this._bodyFormData) { - throw new Error('could not read FormData body as blob') - } else { - return Promise.resolve(new Blob([this._bodyText])) - } - } - - this.arrayBuffer = function() { - return this.blob().then(readBlobAsArrayBuffer) - } - - this.text = function() { - var rejected = consumed(this) - if (rejected) { - return rejected - } - - if (this._bodyBlob) { - return readBlobAsText(this._bodyBlob) - } else if (this._bodyFormData) { - throw new Error('could not read FormData body as text') - } else { - return Promise.resolve(this._bodyText) - } - } - } else { - this.text = function() { - var rejected = consumed(this) - return rejected ? rejected : Promise.resolve(this._bodyText) - } - } - - if (support.formData) { - this.formData = function() { - return this.text().then(decode) - } - } - - this.json = function() { - return this.text().then(JSON.parse) - } - - return this - } - - // HTTP methods whose capitalization should be normalized - var methods = ['DELETE', 'GET', 'HEAD', 'OPTIONS', 'POST', 'PUT'] - - function normalizeMethod(method) { - var upcased = method.toUpperCase() - return (methods.indexOf(upcased) > -1) ? upcased : method - } - - function Request(input, options) { - options = options || {} - var body = options.body - if (Request.prototype.isPrototypeOf(input)) { - if (input.bodyUsed) { - throw new TypeError('Already read') - } - this.url = input.url - this.credentials = input.credentials - if (!options.headers) { - this.headers = new Headers(input.headers) - } - this.method = input.method - this.mode = input.mode - if (!body) { - body = input._bodyInit - input.bodyUsed = true - } - } else { - this.url = input - } - - this.credentials = options.credentials || this.credentials || 'omit' - if (options.headers || !this.headers) { - this.headers = new Headers(options.headers) - } - this.method = normalizeMethod(options.method || this.method || 'GET') - this.mode = options.mode || this.mode || null - this.referrer = null - - if ((this.method === 'GET' || this.method === 'HEAD') && body) { - throw new TypeError('Body not allowed for GET or HEAD requests') - } - this._initBody(body) - } - - Request.prototype.clone = function() { - return new Request(this) - } - - function decode(body) { - var form = new FormData() - body.trim().split('&').forEach(function(bytes) { - if (bytes) { - var split = bytes.split('=') - var name = split.shift().replace(/\+/g, ' ') - var value = split.join('=').replace(/\+/g, ' ') - form.append(decodeURIComponent(name), decodeURIComponent(value)) - } - }) - return form - } - - function headers(xhr) { - var head = new Headers() - var pairs = (xhr.getAllResponseHeaders() || '').trim().split('\n') - pairs.forEach(function(header) { - var split = header.trim().split(':') - var key = split.shift().trim() - var value = split.join(':').trim() - head.append(key, value) - }) - return head - } - - Body.call(Request.prototype) - - function Response(bodyInit, options) { - if (!options) { - options = {} - } - - this.type = 'default' - this.status = options.status - this.ok = this.status >= 200 && this.status < 300 - this.statusText = options.statusText - this.headers = options.headers instanceof Headers ? options.headers : new Headers(options.headers) - this.url = options.url || '' - this._initBody(bodyInit) - } - - Body.call(Response.prototype) - - Response.prototype.clone = function() { - return new Response(this._bodyInit, { - status: this.status, - statusText: this.statusText, - headers: new Headers(this.headers), - url: this.url - }) - } - - Response.error = function() { - var response = new Response(null, {status: 0, statusText: ''}) - response.type = 'error' - return response - } - - var redirectStatuses = [301, 302, 303, 307, 308] - - Response.redirect = function(url, status) { - if (redirectStatuses.indexOf(status) === -1) { - throw new RangeError('Invalid status code') - } - - return new Response(null, {status: status, headers: {location: url}}) - } - - self.Headers = Headers - self.Request = Request - self.Response = Response - - self.fetch = function(input, init) { - return new Promise(function(resolve, reject) { - var request - if (Request.prototype.isPrototypeOf(input) && !init) { - request = input - } else { - request = new Request(input, init) - } - - var xhr = new XMLHttpRequest() - - function responseURL() { - if ('responseURL' in xhr) { - return xhr.responseURL - } - - // Avoid security warnings on getResponseHeader when not allowed by CORS - if (/^X-Request-URL:/m.test(xhr.getAllResponseHeaders())) { - return xhr.getResponseHeader('X-Request-URL') - } - - return - } - - xhr.onload = function() { - var options = { - status: xhr.status, - statusText: xhr.statusText, - headers: headers(xhr), - url: responseURL() - } - var body = 'response' in xhr ? xhr.response : xhr.responseText - resolve(new Response(body, options)) - } - - xhr.onerror = function() { - reject(new TypeError('Network request failed')) - } - - xhr.ontimeout = function() { - reject(new TypeError('Network request failed')) - } - - xhr.open(request.method, request.url, true) - - if (request.credentials === 'include') { - xhr.withCredentials = true - } - - if ('responseType' in xhr && support.blob) { - xhr.responseType = 'blob' - } - - request.headers.forEach(function(value, name) { - xhr.setRequestHeader(name, value) - }) - - xhr.send(typeof request._bodyInit === 'undefined' ? null : request._bodyInit) - }) - } - self.fetch.polyfill = true -})(typeof self !== 'undefined' ? self : this); - -},{}],129:[function(require,module,exports){ 'use strict'; Object.defineProperty(exports, "__esModule", { @@ -22324,7 +21889,7 @@ var curlyTextParser = function curlyTextParser(state, silent) { ; -},{}],130:[function(require,module,exports){ +},{}],129:[function(require,module,exports){ 'use strict'; Object.defineProperty(exports, "__esModule", { @@ -22473,7 +22038,7 @@ function dynamicTextWithLabels(labels) { return DynamicText; } -},{"./curly":129,"exenv":"exenv","prosemirror/dist/dom":63,"prosemirror/dist/inputrules":88,"prosemirror/dist/menu/menu":94,"prosemirror/dist/model":99}],131:[function(require,module,exports){ +},{"./curly":128,"exenv":"exenv","prosemirror/dist/dom":63,"prosemirror/dist/inputrules":88,"prosemirror/dist/menu/menu":94,"prosemirror/dist/model":99}],130:[function(require,module,exports){ 'use strict'; Object.defineProperty(exports, "__esModule", { @@ -22496,6 +22061,8 @@ var _model = require('prosemirror/dist/model'); var _video = require('./video'); +require('./param-prompt'); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -22669,7 +22236,110 @@ var Placeholder = function Placeholder(props) { ); }; -},{"./dynamic-text":130,"./video":132,"exenv":"exenv","prosemirror/dist/edit":73,"prosemirror/dist/markdown":91,"prosemirror/dist/menu/menu":94,"prosemirror/dist/menu/menubar":95,"prosemirror/dist/model":99,"react":"react"}],132:[function(require,module,exports){ +},{"./dynamic-text":129,"./param-prompt":131,"./video":132,"exenv":"exenv","prosemirror/dist/edit":73,"prosemirror/dist/markdown":91,"prosemirror/dist/menu/menu":94,"prosemirror/dist/menu/menubar":95,"prosemirror/dist/model":99,"react":"react"}],131:[function(require,module,exports){ +'use strict'; + +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _exenv = require('exenv'); + +var _exenv2 = _interopRequireDefault(_exenv); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var elt = function elt() {}; +if (_exenv2.default.canUseDOM) { + var ParamPrompt = require('prosemirror/dist/ui/prompt').ParamPrompt; + var defineOption = require('prosemirror/dist/edit').defineOption; + + + // lifted from prosemirror-widgets + + var _require = require('prosemirror/dist/dom'); + + elt = _require.elt; + + var WidgetParamPrompt = function (_ParamPrompt) { + _inherits(WidgetParamPrompt, _ParamPrompt); + + function WidgetParamPrompt() { + _classCallCheck(this, WidgetParamPrompt); + + return _possibleConstructorReturn(this, Object.getPrototypeOf(WidgetParamPrompt).apply(this, arguments)); + } + + _createClass(WidgetParamPrompt, [{ + key: 'prompt', + value: function prompt() { + var _this2 = this; + + return openWidgetPrompt(this, { onClose: function onClose() { + return _this2.close(); + } }); + } + }]); + + return WidgetParamPrompt; + }(ParamPrompt); + + defineOption("commandParamPrompt", WidgetParamPrompt); +} + +function openWidgetPrompt(wpp, options) { + var close = function close() { + wpp.pm.off("interaction", close); + if (dialog.parentNode) { + dialog.parentNode.removeChild(dialog); + if (options && options.onClose) options.onClose(); + } + }; + + var submit = function submit() { + var params = wpp.values(); + if (params) { + wpp.command.exec(wpp.pm, params); + close(); + } + }; + + wpp.pm.on("interaction", close); + + var save = elt("input", { name: "save", type: "button", value: "Save" }); + save.addEventListener("mousedown", function (e) { + submit(); + }); + + var cancel = elt("input", { name: "cancel", type: "button", value: "Cancel" }); + cancel.addEventListener("mousedown", function (e) { + e.preventDefault();e.stopPropagation(); + close(); + }); + + var buttons = elt("div", { class: "widgetButtons" }, save, cancel); + wpp.form = elt("form", { class: "widgetForm" }, elt("h4", null, wpp.command.label), wpp.fields.map(function (f) { + return elt('div', { 'class': 'prosemirror-prompt-row' }, elt('label', { 'class': 'prosemirror-prompt-row-label' }, f.placeholder, f)); + }), buttons); + + // Submit if Enter pressed and all fields are valid + wpp.form.addEventListener("keypress", function (e) { + if (e.keyCode == 13) { + e.preventDefault();e.stopPropagation(); + save.click(); + } + }); + + var dialog = elt("div", { class: "ProseMirror-prompt" }, wpp.form); + wpp.pm.wrapper.appendChild(dialog); + return { close: close }; +} + +},{"exenv":"exenv","prosemirror/dist/dom":63,"prosemirror/dist/edit":73,"prosemirror/dist/ui/prompt":114}],132:[function(require,module,exports){ 'use strict'; Object.defineProperty(exports, "__esModule", { @@ -22689,10 +22359,6 @@ var _exenv = require('exenv'); var _exenv2 = _interopRequireDefault(_exenv); -var _prompt = require('prosemirror/dist/ui/prompt'); - -var _edit = require('prosemirror/dist/edit'); - function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -22710,11 +22376,11 @@ if (_exenv2.default.canUseDOM) { Dropdown = _require.Dropdown; MenuCommandGroup = _require.MenuCommandGroup; + // const fetch = require('whatwg-fetch').default; + var _require2 = require('prosemirror/dist/dom'); elt = _require2.elt; - - var _fetch = require('whatwg-fetch').default; } var VideoEmbed = exports.VideoEmbed = function (_Inline) { @@ -22762,7 +22428,8 @@ var generateTempVideoNode = function generateTempVideoNode(attrs) { var videoUrl = generateVideoUrl(attrs); return elt('span', { - 'class': 'prosemirror-video-embed prosemirror-video-embed-' + service + 'class': 'prosemirror-video-embed prosemirror-video-embed-' + service, + 'contenteditable': 'false' }, elt('span', { 'class': 'prosemirror-video-embed-label' }, 'video at ' + videoUrl)); @@ -22780,14 +22447,13 @@ VideoEmbed.prototype.serializeDOM = function (node) { return; } - if (service === 'vimeo') { - var videoUrl = encodeURIComponent('https://vimeo.com/' + videoId); - fetch('https://vimeo.com/api/oembed.json/?url=' + videoUrl).then(function (response) { - return response.json(); - }).then(function (response) { - // console.log(response) - }); - } + // if (service === 'vimeo') { + // const videoUrl = encodeURIComponent(`https://vimeo.com/${videoId}`); + // fetch(`https://vimeo.com/api/oembed.json/?url=${videoUrl}`).then(response => response.json()) + // .then(response => { + // // console.log(response) + // }) + // } return generateTempVideoNode(node.attrs); }; @@ -22813,81 +22479,4 @@ VideoEmbed.register('configureMarkdown', 'video', function (parser) { // export const dynamicMenu = new Dropdown({label: 'Insert dynamic field'}, new MenuCommandGroup('dynamic')) -// lifted from prosemirror-widgets - -var WidgetParamPrompt = function (_ParamPrompt) { - _inherits(WidgetParamPrompt, _ParamPrompt); - - function WidgetParamPrompt() { - _classCallCheck(this, WidgetParamPrompt); - - return _possibleConstructorReturn(this, Object.getPrototypeOf(WidgetParamPrompt).apply(this, arguments)); - } - - _createClass(WidgetParamPrompt, [{ - key: 'prompt', - value: function prompt() { - var _this3 = this; - - return openWidgetPrompt(this, { onClose: function onClose() { - return _this3.close(); - } }); - } - }]); - - return WidgetParamPrompt; -}(_prompt.ParamPrompt); - -/// whoa, so cool! better menu! todo(marcos): refactor out - -(0, _edit.defineOption)("commandParamPrompt", WidgetParamPrompt); - -function openWidgetPrompt(wpp, options) { - var close = function close() { - wpp.pm.off("interaction", close); - if (dialog.parentNode) { - dialog.parentNode.removeChild(dialog); - if (options && options.onClose) options.onClose(); - } - }; - - var submit = function submit() { - var params = wpp.values(); - if (params) { - wpp.command.exec(wpp.pm, params); - close(); - } - }; - - wpp.pm.on("interaction", close); - - var save = elt("input", { name: "save", type: "button", value: "Save" }); - save.addEventListener("mousedown", function (e) { - submit(); - }); - - var cancel = elt("input", { name: "cancel", type: "button", value: "Cancel" }); - cancel.addEventListener("mousedown", function (e) { - e.preventDefault();e.stopPropagation(); - close(); - }); - - var buttons = elt("div", { class: "widgetButtons" }, save, cancel); - wpp.form = elt("form", { class: "widgetForm" }, elt("h4", null, wpp.command.label), wpp.fields.map(function (f) { - return elt('div', { 'class': 'prosemirror-prompt-row' }, elt('label', { 'class': 'prosemirror-prompt-row-label' }, f.placeholder, f)); - }), buttons); - - // Submit if Enter pressed and all fields are valid - wpp.form.addEventListener("keypress", function (e) { - if (e.keyCode == 13) { - e.preventDefault();e.stopPropagation(); - save.click(); - } - }); - - var dialog = elt("div", { class: "ProseMirror-prompt" }, wpp.form); - wpp.pm.wrapper.appendChild(dialog); - return { close: close }; -} - -},{"exenv":"exenv","markdown-it-video":6,"prosemirror/dist/dom":63,"prosemirror/dist/edit":73,"prosemirror/dist/menu/menu":94,"prosemirror/dist/model":99,"prosemirror/dist/ui/prompt":114,"whatwg-fetch":128}]},{},[1]); +},{"exenv":"exenv","markdown-it-video":6,"prosemirror/dist/dom":63,"prosemirror/dist/menu/menu":94,"prosemirror/dist/model":99}]},{},[1]); diff --git a/demo/index.html b/demo/index.html index 9d6061c..e613134 100644 --- a/demo/index.html +++ b/demo/index.html @@ -29,6 +29,7 @@ font-family: sans-serif; background-color: #eee; align-items: flex-end; + /*cursor: move;*/ } .prosemirror-prompt-row-label { diff --git a/src/index.js b/src/index.js index b363005..a893370 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,7 @@ import ExecutionEnvironment from 'exenv'; import {DynamicText, dynamicTextWithLabels, dynamicMenu} from './dynamic-text'; import {Schema, defaultSchema} from 'prosemirror/dist/model'; import {VideoEmbed} from './video'; - +import './param-prompt'; let ProseMirror = () => {}; let renderGrouped, inlineGroup, insertMenu, textblockMenu, blockGroup, historyGroup; diff --git a/src/param-prompt.js b/src/param-prompt.js new file mode 100644 index 0000000..f85b801 --- /dev/null +++ b/src/param-prompt.js @@ -0,0 +1,67 @@ +import ExecutionEnvironment from 'exenv'; + +let elt = function(){}; +if (ExecutionEnvironment.canUseDOM) { + const ParamPrompt = require('prosemirror/dist/ui/prompt').ParamPrompt; + const defineOption = require('prosemirror/dist/edit').defineOption; + ({elt} = require('prosemirror/dist/dom')); + + // lifted from prosemirror-widgets + class WidgetParamPrompt extends ParamPrompt { + prompt() { + return openWidgetPrompt(this,{onClose: () => this.close()}); + } + } + + defineOption("commandParamPrompt", WidgetParamPrompt); +} + + +function openWidgetPrompt(wpp, options) { + let close = () => { + wpp.pm.off("interaction", close) + if (dialog.parentNode) { + dialog.parentNode.removeChild(dialog) + if (options && options.onClose) options.onClose() + } + } + + let submit = () => { + let params = wpp.values() + if (params) { + wpp.command.exec(wpp.pm, params) + close() + } + } + + wpp.pm.on("interaction", close) + + let save = elt("input",{name: "save", type: "button", value: "Save"}) + save.addEventListener("mousedown", e => { submit() }) + + let cancel = elt("input",{name: "cancel", type: "button", value: "Cancel"}) + cancel.addEventListener("mousedown", e => { + e.preventDefault(); e.stopPropagation() + close() + }) + + let buttons = elt("div",{class: "widgetButtons"},save,cancel) + wpp.form = elt("form",{class: "widgetForm"}, + elt("h4", null, wpp.command.label), + wpp.fields.map(f => elt('div', {'class': 'prosemirror-prompt-row'}, + elt('label', {'class': 'prosemirror-prompt-row-label'}, f.placeholder, f))), + buttons + ) + + // Submit if Enter pressed and all fields are valid + wpp.form.addEventListener("keypress", e => { + if (e.keyCode == 13) { + e.preventDefault(); e.stopPropagation() + save.click() + } + }) + + let dialog = elt("div",{class: "ProseMirror-prompt"}, wpp.form) + wpp.pm.wrapper.appendChild(dialog) + return {close} +} diff --git a/src/video.js b/src/video.js index 451c969..c799051 100644 --- a/src/video.js +++ b/src/video.js @@ -1,8 +1,6 @@ import {Inline, Attribute} from 'prosemirror/dist/model'; import MarkdownVideoPlugin from 'markdown-it-video'; import ExecutionEnvironment from 'exenv'; -import {ParamPrompt} from "prosemirror/dist/ui/prompt" -import {defineOption} from "prosemirror/dist/edit" let Dropdown = function(){} @@ -11,7 +9,7 @@ let elt = function(){}; if (ExecutionEnvironment.canUseDOM) { ({Dropdown, MenuCommandGroup} = require('prosemirror/dist/menu/menu')); ({elt} = require('prosemirror/dist/dom')); - const fetch = require('whatwg-fetch').default; + // const fetch = require('whatwg-fetch').default; } @@ -42,11 +40,12 @@ const generateTempVideoNode = (attrs) => { const videoUrl = generateVideoUrl(attrs); return elt('span', { - 'class': `prosemirror-video-embed prosemirror-video-embed-${service}` + 'class': `prosemirror-video-embed prosemirror-video-embed-${service}`, + 'contenteditable': 'false' }, elt('span', { 'class': `prosemirror-video-embed-label` }, `video at ${videoUrl}`)) -} +}; VideoEmbed.prototype.serializeMarkdown = (state, node) => { state.write(`@[${node.attrs.service}](${node.attrs.videoId})`) @@ -57,13 +56,13 @@ VideoEmbed.prototype.serializeDOM = (node) => { return; } - if (service === 'vimeo') { - const videoUrl = encodeURIComponent(`https://vimeo.com/${videoId}`); - fetch(`https://vimeo.com/api/oembed.json/?url=${videoUrl}`).then(response => response.json()) - .then(response => { - // console.log(response) - }) - } + // if (service === 'vimeo') { + // const videoUrl = encodeURIComponent(`https://vimeo.com/${videoId}`); + // fetch(`https://vimeo.com/api/oembed.json/?url=${videoUrl}`).then(response => response.json()) + // .then(response => { + // // console.log(response) + // }) + // } return generateTempVideoNode(node.attrs); } @@ -98,63 +97,3 @@ VideoEmbed.register('configureMarkdown', 'video', parser => { // export const dynamicMenu = new Dropdown({label: 'Insert dynamic field'}, new MenuCommandGroup('dynamic')) -// lifted from prosemirror-widgets -class WidgetParamPrompt extends ParamPrompt { - prompt() { - return openWidgetPrompt(this,{onClose: () => this.close()}) - } -} - -/// whoa, so cool! better menu! todo(marcos): refactor out - - -defineOption("commandParamPrompt", WidgetParamPrompt) - -function openWidgetPrompt(wpp, options) { - let close = () => { - wpp.pm.off("interaction", close) - if (dialog.parentNode) { - dialog.parentNode.removeChild(dialog) - if (options && options.onClose) options.onClose() - } - } - - let submit = () => { - let params = wpp.values() - if (params) { - wpp.command.exec(wpp.pm, params) - close() - } - } - - wpp.pm.on("interaction", close) - - let save = elt("input",{name: "save", type: "button", value: "Save"}) - save.addEventListener("mousedown", e => { submit() }) - - let cancel = elt("input",{name: "cancel", type: "button", value: "Cancel"}) - cancel.addEventListener("mousedown", e => { - e.preventDefault(); e.stopPropagation() - close() - }) - - let buttons = elt("div",{class: "widgetButtons"},save,cancel) - wpp.form = elt("form",{class: "widgetForm"}, - elt("h4", null, wpp.command.label), - wpp.fields.map(f => elt('div', {'class': 'prosemirror-prompt-row'}, - elt('label', {'class': 'prosemirror-prompt-row-label'}, f.placeholder, f))), - buttons - ) - - // Submit if Enter pressed and all fields are valid - wpp.form.addEventListener("keypress", e => { - if (e.keyCode == 13) { - e.preventDefault(); e.stopPropagation() - save.click() - } - }) - - let dialog = elt("div",{class: "ProseMirror-prompt"}, wpp.form) - wpp.pm.wrapper.appendChild(dialog) - return {close} -}