diff --git a/TODO b/TODO index a882f23ef..1e5cef12d 100644 --- a/TODO +++ b/TODO @@ -7,7 +7,6 @@ ### In-Progress - Tables -- Iframe/Media ### Features @@ -33,8 +32,9 @@ - Clear formatting, If no selection range, clear the formatting of parent block. - If no marks, clear the block type if text type? - Remove links button? (Action already in place if link href is empty). -- Links - Limit target attribute options and validate URL. +- Links - Validate URL. - Links - Integrate entity picker. +- iFrame - Parse iframe HTML & auto-convert youtube/vimeo urls to embeds. ### Notes diff --git a/resources/js/editor/menu/item-iframe-button.js b/resources/js/editor/menu/item-iframe-button.js index da2596fca..23a6ad74e 100644 --- a/resources/js/editor/menu/item-iframe-button.js +++ b/resources/js/editor/menu/item-iframe-button.js @@ -107,6 +107,7 @@ function iframeButtonItem() { title: "Embed Content", run: onPress, enable: state => true, + active: state => (state.selection.node || {type: ''}).type === schema.nodes.iframe, icon: icons.iframe, }); } diff --git a/resources/js/editor/node-views/IframeView.js b/resources/js/editor/node-views/IframeView.js new file mode 100644 index 000000000..06a959889 --- /dev/null +++ b/resources/js/editor/node-views/IframeView.js @@ -0,0 +1,26 @@ +class IframeView { + /** + * @param {PmNode} node + * @param {PmView} view + * @param {(function(): number)} getPos + */ + constructor(node, view, getPos) { + this.dom = document.createElement('div'); + this.dom.classList.add('ProseMirror-iframewrap'); + + this.iframe = document.createElement("iframe"); + for (const [key, value] of Object.entries(node.attrs)) { + if (value) { + this.iframe.setAttribute(key, value); + } + } + + this.dom.appendChild(this.iframe); + } + + stopEvent() { + return false; + } +} + +export default IframeView; \ No newline at end of file diff --git a/resources/js/editor/node-views/index.js b/resources/js/editor/node-views/index.js index 997ab0803..e675a1b2e 100644 --- a/resources/js/editor/node-views/index.js +++ b/resources/js/editor/node-views/index.js @@ -1,7 +1,9 @@ import ImageView from "./ImageView"; +import IframeView from "./IframeView"; const views = { image: (node, view, getPos) => new ImageView(node, view, getPos), + iframe: (node, view, getPos) => new IframeView(node, view, getPos), }; export default views; \ No newline at end of file diff --git a/resources/sass/_editor.scss b/resources/sass/_editor.scss index 9b6a5ea5e..5ef0b15e6 100644 --- a/resources/sass/_editor.scss +++ b/resources/sass/_editor.scss @@ -517,7 +517,7 @@ img.ProseMirror-separator { } } -.ProseMirror-imagewrap { +.ProseMirror-imagewrap, .ProseMirror-iframewrap { display: inline-block; line-height: 0; font-size: 0; @@ -532,6 +532,10 @@ img.ProseMirror-separator { outline: 4px solid #000; } +.ProseMirror .ProseMirror-iframewrap iframe { + pointer-events: none !important; +} + .ProseMirror-dragdummy { position: absolute; z-index: 2;