@pie-lib/editable-html 11.7.0 → 11.9.0

package/lib/plugins/media/index.js

@@ -0,0 +1,387 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = MediaPlugin;
+exports.serialization = exports.insertDialog = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _slate = require("slate");
+
+var _Theaters = _interopRequireDefault(require("@material-ui/icons/Theaters"));
+
+var _VolumeUp = _interopRequireDefault(require("@material-ui/icons/VolumeUp"));
+
+var _debug = _interopRequireDefault(require("debug"));
+
+var _mediaDialog = _interopRequireDefault(require("./media-dialog"));
+
+var _mediaToolbar = _interopRequireDefault(require("./media-toolbar"));
+
+var _mediaWrapper = _interopRequireDefault(require("./media-wrapper"));
+
+var _excluded = ["type", "callback", "opts"],
+    _excluded2 = ["src", "height", "width", "editing", "tag"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:image');
+
+var removeDialogs = function removeDialogs() {
+  var prevDialogs = document.querySelectorAll('.insert-media-dialog');
+  prevDialogs.forEach(function (s) {
+    return s.remove();
+  });
+};
+
+var insertDialog = function insertDialog(props) {
+  var newEl = document.createElement('div');
+  var type = props.type,
+      callback = props.callback,
+      opts = props.opts,
+      rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var initialBodyOverflow = document.body.style.overflow;
+  removeDialogs();
+  newEl.className = 'insert-media-dialog';
+  document.body.style.overflow = 'hidden';
+
+  var handleClose = function handleClose(val, data) {
+    callback(val, data);
+    newEl.remove();
+    document.body.style.overflow = initialBodyOverflow;
+  };
+
+  var el = /*#__PURE__*/_react["default"].createElement(_mediaDialog["default"], (0, _extends2["default"])({}, rest, {
+    uploadSoundSupport: opts.uploadSoundSupport,
+    type: type,
+    disablePortal: true,
+    open: true,
+    handleClose: handleClose
+  }));
+
+  _reactDom["default"].render(el, newEl);
+
+  document.body.appendChild(newEl);
+};
+
+exports.insertDialog = insertDialog;
+var types = ['audio', 'video'];
+
+function MediaPlugin(type, opts) {
+  var toolbar = {
+    icon: type === 'audio' ? /*#__PURE__*/_react["default"].createElement(_VolumeUp["default"], null) : /*#__PURE__*/_react["default"].createElement(_Theaters["default"], null),
+    ariaLabel: type === 'audio' ? 'Insert audio' : 'Insert video',
+    onClick: function onClick(value, onChange) {
+      log('[toolbar] onClick');
+
+      var inline = _slate.Inline.create({
+        type: type,
+        isVoid: true,
+        data: {
+          editing: false,
+          ends: undefined,
+          height: undefined,
+          title: undefined,
+          starts: undefined,
+          src: undefined,
+          url: undefined,
+          width: undefined
+        }
+      });
+
+      var change = value.change().insertInline(inline);
+      onChange(change);
+      insertDialog({
+        type: type,
+        opts: opts,
+        callback: function callback(val, data) {
+          var nodeIsThere = change.value.document.findDescendant(function (d) {
+            return d.key === inline.key;
+          });
+
+          if (nodeIsThere) {
+            if (!val) {
+              var c = change.removeNodeByKey(inline.key);
+              onChange(c, function () {
+                return opts.focus();
+              });
+            } else {
+              var _c = change.setNodeByKey(inline.key, {
+                data: data
+              });
+
+              onChange(_c, function () {
+                return opts.focus('beginning', nodeIsThere);
+              });
+            }
+          } else {
+            opts.focus();
+          }
+        }
+      });
+    },
+    supports: function supports(node) {
+      return node.object === 'inline' && node.type === type;
+    }
+  };
+  return {
+    name: type,
+    toolbar: toolbar,
+    deleteNode: function deleteNode(e, node, value, onChange) {
+      e.preventDefault();
+      var change = value.change().removeNodeByKey(node.key);
+      onChange(change);
+    },
+    renderNode: function renderNode(props) {
+      if (props.node.type === type) {
+        var node = props.node,
+            key = props.key;
+        var data = node.data;
+        var jsonData = data.toJSON();
+        var src = jsonData.src,
+            height = jsonData.height,
+            width = jsonData.width,
+            editing = jsonData.editing,
+            tag = jsonData.tag,
+            rest = (0, _objectWithoutProperties2["default"])(jsonData, _excluded2);
+
+        var handleEdit = function handleEdit() {
+          var change = opts.createChange();
+          var c = change.setNodeByKey(key, {
+            data: _objectSpread(_objectSpread({}, jsonData), {}, {
+              editing: true
+            })
+          });
+          opts.onChange(c, function () {
+            insertDialog(_objectSpread(_objectSpread({}, jsonData), {}, {
+              edit: true,
+              type: type,
+              opts: opts,
+              callback: function callback(val, data) {
+                var key = node.key;
+                var nodeIsThere = change.value.document.findDescendant(function (d) {
+                  return d.type === type && d.data.get('editing');
+                });
+
+                if (nodeIsThere && val) {
+                  var _c2 = change.setNodeByKey(key, {
+                    data: data,
+                    editing: false
+                  });
+
+                  opts.onChange(_c2, function () {
+                    return opts.focus('beginning', nodeIsThere);
+                  });
+                } else {
+                  opts.focus();
+                }
+              }
+            }));
+          });
+        };
+
+        var handleDelete = function handleDelete() {
+          var change = opts.createChange();
+          var c = change.removeNodeByKey(node.key);
+          opts.onChange(c);
+        };
+
+        var style = {};
+
+        if (width) {
+          style.width = "".concat(width, "px");
+        }
+
+        if (height) {
+          style.height = "".concat(height, "px");
+        }
+
+        if (tag === 'audio') {
+          return /*#__PURE__*/_react["default"].createElement(_mediaWrapper["default"], (0, _extends2["default"])({
+            editor: true,
+            "data-type": type,
+            width: style.width
+          }, rest), /*#__PURE__*/_react["default"].createElement("audio", {
+            controls: "controls",
+            controlsList: "nodownload"
+          }, /*#__PURE__*/_react["default"].createElement("source", {
+            type: "audio/mp3",
+            src: src
+          })), /*#__PURE__*/_react["default"].createElement(_mediaToolbar["default"], {
+            hideEdit: true,
+            onRemove: handleDelete
+          }));
+        }
+
+        return /*#__PURE__*/_react["default"].createElement(_mediaWrapper["default"], (0, _extends2["default"])({
+          editor: true,
+          "data-type": type,
+          width: style.width
+        }, rest), /*#__PURE__*/_react["default"].createElement("iframe", (0, _extends2["default"])({
+          frameBorder: "0",
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+          allowFullScreen: true,
+          src: src,
+          editing: editing ? 1 : 0
+        }, rest, style)), /*#__PURE__*/_react["default"].createElement(_mediaToolbar["default"], {
+          onEdit: handleEdit,
+          onRemove: handleDelete
+        }));
+      }
+    },
+    normalizeNode: function normalizeNode(node) {
+      var textNodeMap = {};
+      var updateNodesArray = [];
+      var index = 0;
+      if (node.object !== 'document') return;
+      node.findDescendant(function (d) {
+        if (d.object === 'text') {
+          textNodeMap[index] = d;
+        }
+
+        var isMedia = types.indexOf(d.type) >= 0;
+
+        if (isMedia) {
+          if (index > 0 && textNodeMap[index - 1] && textNodeMap[index - 1].text === '') {
+            updateNodesArray.push(textNodeMap[index - 1]);
+          }
+        }
+
+        index++;
+      });
+      if (!updateNodesArray.length) return;
+      return function (change) {
+        change.withoutNormalization(function () {
+          updateNodesArray.forEach(function (n) {
+            return change.insertTextByKey(n.key, 0, ' ');
+          });
+        });
+      };
+    }
+  };
+}
+
+var serialization = {
+  deserialize: function deserialize(el
+  /*, next*/
+  ) {
+    var type = el.dataset && el.dataset.type;
+    var tag = 'iframe';
+    var src;
+    var typeIndex = types.indexOf(type);
+
+    if (typeIndex < 0) {
+      if (el instanceof Element && el.tagName.toLowerCase() === 'audio') {
+        var _el$firstChild;
+
+        type = 'audio';
+        tag = 'audio';
+        src = (_el$firstChild = el.firstChild) === null || _el$firstChild === void 0 ? void 0 : _el$firstChild.getAttribute('src');
+      } else {
+        return;
+      }
+    }
+
+    var _ref = el.dataset || {},
+        ends = _ref.ends,
+        starts = _ref.starts,
+        title = _ref.title,
+        editing = _ref.editing,
+        url = _ref.url;
+
+    log('deserialize: ', name);
+    var width = parseInt(el.getAttribute('width'), 10) || null;
+    var height = parseInt(el.getAttribute('height'), 10) || null;
+    var out = {
+      object: 'inline',
+      type: type,
+      isVoid: true,
+      data: {
+        tag: tag,
+        src: src || el.getAttribute('src'),
+        editing: editing,
+        ends: ends,
+        height: height,
+        starts: starts,
+        title: title,
+        width: width,
+        url: url
+      }
+    };
+    log('return object: ', out);
+    return out;
+  },
+  serialize: function serialize(object
+  /*, children*/
+  ) {
+    var typeIndex = types.indexOf(object.type);
+    if (typeIndex < 0) return;
+    var type = types[typeIndex];
+    var data = object.data;
+    var editing = data.get('editing');
+    var tag = data.get('tag');
+    var ends = data.get('ends');
+    var src = data.get('src');
+    var starts = data.get('starts');
+    var title = data.get('title');
+    var width = data.get('width');
+    var height = data.get('height');
+    var url = data.get('url');
+    var style = {};
+
+    if (width) {
+      style.width = "".concat(width, "px");
+    }
+
+    if (height) {
+      style.height = "".concat(height, "px");
+    }
+
+    var divProps = {
+      'data-editing': editing,
+      'data-ends': ends,
+      'data-starts': starts,
+      'data-title': title,
+      'data-url': url
+    };
+
+    var props = _objectSpread(_objectSpread({}, style), {}, {
+      src: src
+    });
+
+    if (tag === 'audio') {
+      return /*#__PURE__*/_react["default"].createElement("audio", {
+        controls: "controls",
+        controlsList: "nodownload"
+      }, /*#__PURE__*/_react["default"].createElement("source", {
+        type: "audio/mp3",
+        src: src
+      }));
+    }
+
+    return /*#__PURE__*/_react["default"].createElement("iframe", (0, _extends2["default"])({
+      "data-type": type,
+      src: src
+    }, divProps, {
+      frameBorder: "0",
+      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+      allowFullScreen: true
+    }, props));
+  }
+};
+exports.serialization = serialization;
+//# sourceMappingURL=index.js.map

package/lib/plugins/media/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plugins/media/index.jsx"],"names":["log","removeDialogs","prevDialogs","document","querySelectorAll","forEach","s","remove","insertDialog","props","newEl","createElement","type","callback","opts","rest","initialBodyOverflow","body","style","overflow","className","handleClose","val","data","el","uploadSoundSupport","ReactDOM","render","appendChild","types","MediaPlugin","toolbar","icon","ariaLabel","onClick","value","onChange","inline","Inline","create","isVoid","editing","ends","undefined","height","title","starts","src","url","width","change","insertInline","nodeIsThere","findDescendant","d","key","c","removeNodeByKey","focus","setNodeByKey","supports","node","object","name","deleteNode","e","preventDefault","renderNode","jsonData","toJSON","tag","handleEdit","createChange","edit","get","handleDelete","normalizeNode","textNodeMap","updateNodesArray","index","isMedia","indexOf","text","push","length","withoutNormalization","n","insertTextByKey","serialization","deserialize","dataset","typeIndex","Element","tagName","toLowerCase","firstChild","getAttribute","parseInt","out","serialize","divProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Inline } from 'slate';\nimport TheatersIcon from '@material-ui/icons/Theaters';\nimport VolumeUpIcon from '@material-ui/icons/VolumeUp';\nimport debug from 'debug';\n\nimport MediaDialog from './media-dialog';\nimport MediaToolbar from './media-toolbar';\nimport MediaWrapper from './media-wrapper';\n\nconst log = debug('@pie-lib:editable-html:plugins:image');\n\nconst removeDialogs = () => {\n  const prevDialogs = document.querySelectorAll('.insert-media-dialog');\n\n  prevDialogs.forEach((s) => s.remove());\n};\n\nexport const insertDialog = (props) => {\n  const newEl = document.createElement('div');\n  const { type, callback, opts, ...rest } = props;\n  const initialBodyOverflow = document.body.style.overflow;\n\n  removeDialogs();\n\n  newEl.className = 'insert-media-dialog';\n  document.body.style.overflow = 'hidden';\n\n  const handleClose = (val, data) => {\n    callback(val, data);\n    newEl.remove();\n    document.body.style.overflow = initialBodyOverflow;\n  };\n\n  const el = (\n    <MediaDialog\n      {...rest}\n      uploadSoundSupport={opts.uploadSoundSupport}\n      type={type}\n      disablePortal={true}\n      open={true}\n      handleClose={handleClose}\n    />\n  );\n\n  ReactDOM.render(el, newEl);\n\n  document.body.appendChild(newEl);\n};\n\nconst types = ['audio', 'video'];\n\nexport default function MediaPlugin(type, opts) {\n  const toolbar = {\n    icon: type === 'audio' ? <VolumeUpIcon /> : <TheatersIcon />,\n    ariaLabel: type === 'audio' ? 'Insert audio' : 'Insert video',\n    onClick: (value, onChange) => {\n      log('[toolbar] onClick');\n      const inline = Inline.create({\n        type: type,\n        isVoid: true,\n        data: {\n          editing: false,\n          ends: undefined,\n          height: undefined,\n          title: undefined,\n          starts: undefined,\n          src: undefined,\n          url: undefined,\n          width: undefined,\n        },\n      });\n\n      const change = value.change().insertInline(inline);\n      onChange(change);\n      insertDialog({\n        type,\n        opts,\n        callback: (val, data) => {\n          const nodeIsThere = change.value.document.findDescendant((d) => d.key === inline.key);\n\n          if (nodeIsThere) {\n            if (!val) {\n              const c = change.removeNodeByKey(inline.key);\n              onChange(c, () => opts.focus());\n            } else {\n              const c = change.setNodeByKey(inline.key, { data });\n              onChange(c, () => opts.focus('beginning', nodeIsThere));\n            }\n          } else {\n            opts.focus();\n          }\n        },\n      });\n    },\n    supports: (node) => node.object === 'inline' && node.type === type,\n  };\n\n  return {\n    name: type,\n    toolbar,\n    deleteNode: (e, node, value, onChange) => {\n      e.preventDefault();\n      const change = value.change().removeNodeByKey(node.key);\n\n      onChange(change);\n    },\n    renderNode(props) {\n      if (props.node.type === type) {\n        const { node, key } = props;\n        const { data } = node;\n        const jsonData = data.toJSON();\n        const { src, height, width, editing, tag, ...rest } = jsonData;\n        const handleEdit = () => {\n          const change = opts.createChange();\n          const c = change.setNodeByKey(key, {\n            data: {\n              ...jsonData,\n              editing: true,\n            },\n          });\n\n          opts.onChange(c, () => {\n            insertDialog({\n              ...jsonData,\n              edit: true,\n              type,\n              opts,\n              callback: (val, data) => {\n                const { key } = node;\n\n                const nodeIsThere = change.value.document.findDescendant(\n                  (d) => d.type === type && d.data.get('editing'),\n                );\n\n                if (nodeIsThere && val) {\n                  const c = change.setNodeByKey(key, { data, editing: false });\n                  opts.onChange(c, () => opts.focus('beginning', nodeIsThere));\n                } else {\n                  opts.focus();\n                }\n              },\n            });\n          });\n        };\n        const handleDelete = () => {\n          const change = opts.createChange();\n          const c = change.removeNodeByKey(node.key);\n\n          opts.onChange(c);\n        };\n        const style = {};\n\n        if (width) {\n          style.width = `${width}px`;\n        }\n\n        if (height) {\n          style.height = `${height}px`;\n        }\n\n        if (tag === 'audio') {\n          return (\n            <MediaWrapper editor data-type={type} width={style.width} {...rest}>\n              <audio controls=\"controls\" controlsList=\"nodownload\">\n                <source type=\"audio/mp3\" src={src} />\n              </audio>\n              <MediaToolbar hideEdit onRemove={handleDelete} />\n            </MediaWrapper>\n          );\n        }\n\n        return (\n          <MediaWrapper editor data-type={type} width={style.width} {...rest}>\n            <iframe\n              frameBorder=\"0\"\n              allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n              allowFullScreen\n              src={src}\n              editing={editing ? 1 : 0}\n              {...rest}\n              {...style}\n            />\n            <MediaToolbar onEdit={handleEdit} onRemove={handleDelete} />\n          </MediaWrapper>\n        );\n      }\n    },\n    normalizeNode: (node) => {\n      const textNodeMap = {};\n      const updateNodesArray = [];\n      let index = 0;\n\n      if (node.object !== 'document') return;\n\n      node.findDescendant((d) => {\n        if (d.object === 'text') {\n          textNodeMap[index] = d;\n        }\n\n        const isMedia = types.indexOf(d.type) >= 0;\n\n        if (isMedia) {\n          if (index > 0 && textNodeMap[index - 1] && textNodeMap[index - 1].text === '') {\n            updateNodesArray.push(textNodeMap[index - 1]);\n          }\n        }\n\n        index++;\n      });\n\n      if (!updateNodesArray.length) return;\n\n      return (change) => {\n        change.withoutNormalization(() => {\n          updateNodesArray.forEach((n) => change.insertTextByKey(n.key, 0, ' '));\n        });\n      };\n    },\n  };\n}\n\nexport const serialization = {\n  deserialize(el /*, next*/) {\n    let type = el.dataset && el.dataset.type;\n    let tag = 'iframe';\n    let src;\n    const typeIndex = types.indexOf(type);\n\n    if (typeIndex < 0) {\n      if (el instanceof Element && el.tagName.toLowerCase() === 'audio') {\n        type = 'audio';\n        tag = 'audio';\n        src = el.firstChild?.getAttribute('src');\n      } else {\n        return;\n      }\n    }\n\n    const { ends, starts, title, editing, url } = el.dataset || {};\n\n    log('deserialize: ', name);\n    const width = parseInt(el.getAttribute('width'), 10) || null;\n    const height = parseInt(el.getAttribute('height'), 10) || null;\n\n    const out = {\n      object: 'inline',\n      type: type,\n      isVoid: true,\n      data: {\n        tag,\n        src: src || el.getAttribute('src'),\n        editing,\n        ends,\n        height,\n        starts,\n        title,\n        width,\n        url,\n      },\n    };\n    log('return object: ', out);\n    return out;\n  },\n  serialize(object /*, children*/) {\n    const typeIndex = types.indexOf(object.type);\n\n    if (typeIndex < 0) return;\n\n    const type = types[typeIndex];\n\n    const { data } = object;\n    const editing = data.get('editing');\n    const tag = data.get('tag');\n    const ends = data.get('ends');\n    const src = data.get('src');\n    const starts = data.get('starts');\n    const title = data.get('title');\n    const width = data.get('width');\n    const height = data.get('height');\n    const url = data.get('url');\n    const style = {};\n\n    if (width) {\n      style.width = `${width}px`;\n    }\n\n    if (height) {\n      style.height = `${height}px`;\n    }\n\n    const divProps = {\n      'data-editing': editing,\n      'data-ends': ends,\n      'data-starts': starts,\n      'data-title': title,\n      'data-url': url,\n    };\n    const props = {\n      ...style,\n      src,\n    };\n\n    if (tag === 'audio') {\n      return (\n        <audio controls=\"controls\" controlsList=\"nodownload\">\n          <source type=\"audio/mp3\" src={src} />\n        </audio>\n      );\n    }\n\n    return (\n      <iframe\n        data-type={type}\n        src={src}\n        {...divProps}\n        frameBorder=\"0\"\n        allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n        allowFullScreen\n        {...props}\n      />\n    );\n  },\n};\n"],"file":"index.js"}