@pie-lib/editable-html 9.1.6 → 9.2.0

package/lib/plugins/toolbar/editor-and-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plugins/toolbar/editor-and-toolbar.jsx"],"names":["log","EditorAndToolbar","IS_FIREFOX","editorRef","tmp","isUpdatingSelection","props","classes","children","value","plugins","onChange","getFocusedValue","onDone","focusedNode","autoWidth","readOnly","disableUnderline","pluginProps","toolbarOpts","onDataChange","toolbarRef","inFocus","isFocused","undefined","holderNames","editorHolder","editorInFocus","disabledUnderline","clonedChildren","React","cloneElement","ref","el","noBorder","error","root","noPadding","Component","PropTypes","oneOfType","arrayOf","node","isRequired","SlatePropTypes","array","func","bool","object","shape","position","oneOf","alwaysVisible","string","style","padding","border","borderRadius","cursor","wordBreak","overflow","maxHeight","overflowY","color","text","backgroundColor","background","left","right","bottom","height","content","transition","pointerEvents","transform","primary","display","backgroundSize","backgroundImage","backgroundRepeat","backgroundPosition"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Toolbar from './toolbar';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport { primary } from '../../theme';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport SlatePropTypes from 'slate-prop-types';\nimport { IS_FIREFOX } from 'slate-dev-environment';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('@pie-lib:editable-html:plugins:toolbar:editor-and-toolbar');\n\nexport class EditorAndToolbar extends React.Component {\n  static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    value: SlatePropTypes.value.isRequired,\n    plugins: PropTypes.array.isRequired,\n    onChange: PropTypes.func.isRequired,\n    getFocusedValue: PropTypes.func.isRequired,\n    onDone: PropTypes.func.isRequired,\n    onDataChange: PropTypes.func,\n    toolbarRef: PropTypes.func,\n    focusedNode: SlatePropTypes.node,\n    readOnly: PropTypes.bool,\n    disableUnderline: PropTypes.bool,\n    autoWidth: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    pluginProps: PropTypes.object,\n    toolbarOpts: PropTypes.shape({\n      position: PropTypes.oneOf(['bottom', 'top']),\n      alwaysVisible: PropTypes.bool,\n      error: PropTypes.string\n    })\n  };\n\n  /** This is an interim fix until this PR is merged in slate:\n   * https://github.com/ianstormtaylor/slate/pull/2236\n   */\n  componentDidMount() {\n    if (IS_FIREFOX) {\n      this.editorRef.tmp.isUpdatingSelection = true;\n    }\n  }\n\n  render() {\n    const {\n      classes,\n      children,\n      value,\n      plugins,\n      onChange,\n      getFocusedValue,\n      onDone,\n      focusedNode,\n      autoWidth,\n      readOnly,\n      disableUnderline,\n      pluginProps,\n      toolbarOpts,\n      onDataChange,\n      toolbarRef\n    } = this.props;\n\n    const inFocus = value.isFocused || (focusedNode !== null && focusedNode !== undefined);\n    const holderNames = classNames(\n      classes.editorHolder,\n      inFocus && classes.editorInFocus,\n      readOnly && classes.readOnly,\n      disableUnderline && classes.disabledUnderline\n    );\n    let clonedChildren = children;\n\n    if (typeof children !== 'string') {\n      clonedChildren = React.cloneElement(children, {\n        ref: el => (this.editorRef = el)\n      });\n    }\n\n    log(\n      '[render] inFocus: ',\n      inFocus,\n      'value.isFocused:',\n      value.isFocused,\n      'focused node: ',\n      focusedNode\n    );\n\n    return (\n      <div\n        className={classNames(\n          {\n            [classes.noBorder]: toolbarOpts && toolbarOpts.noBorder,\n            [classes.error]: toolbarOpts && toolbarOpts.error\n          },\n          classes.root\n        )}\n      >\n        <div className={holderNames}>\n          <div\n            className={classNames(\n              {\n                [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder\n              },\n              classes.children\n            )}\n          >\n            {clonedChildren}\n          </div>\n        </div>\n        <Toolbar\n          autoWidth={autoWidth}\n          plugins={plugins}\n          focusedNode={focusedNode}\n          value={value}\n          isFocused={inFocus}\n          onChange={onChange}\n          getFocusedValue={getFocusedValue}\n          onDone={onDone}\n          onDataChange={onDataChange}\n          toolbarRef={toolbarRef}\n          pluginProps={pluginProps}\n          toolbarOpts={toolbarOpts}\n        />\n      </div>\n    );\n  }\n}\n\nconst style = {\n  root: {\n    position: 'relative',\n    padding: '0px',\n    border: '1px solid #ccc',\n    borderRadius: '4px',\n    cursor: 'text',\n    '& [data-slate-editor=\"true\"]': {\n      wordBreak: 'break-word',\n      overflow: 'visible',\n      maxHeight: '500px',\n      // needed in order to be able to put the focus before a void element when it is the first one in the editor\n      padding: '5px'\n    }\n  },\n  children: {\n    padding: '10px 16px'\n  },\n  editorHolder: {\n    position: 'relative',\n    padding: '0px',\n    overflowY: 'scroll',\n    color: color.text(),\n    backgroundColor: color.background(),\n    '&::before': {\n      left: '0',\n      right: '0',\n      bottom: '0',\n      height: '1px',\n      content: '\"\"',\n      position: 'absolute',\n      transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n      pointerEvents: 'none',\n      backgroundColor: 'rgba(0, 0, 0, 0.42)'\n    },\n    '&::after': {\n      left: '0',\n      right: '0',\n      bottom: '0',\n      height: '1px',\n      content: '\"\"',\n      position: 'absolute',\n      transform: 'scaleX(0)',\n      transition:\n        'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 200ms linear',\n      backgroundColor: 'rgba(0, 0, 0, 0.42)'\n    },\n    '&:focus': {\n      '&::after': {\n        transform: 'scaleX(1)',\n        backgroundColor: primary,\n        height: '2px'\n      }\n    },\n    '&:hover': {\n      '&::after': {\n        transform: 'scaleX(1)',\n        backgroundColor: 'black',\n        height: '2px'\n      }\n    }\n  },\n  disabledUnderline: {\n    '&::before': {\n      display: 'none'\n    },\n    '&::after': {\n      display: 'none'\n    }\n  },\n\n  readOnly: {\n    '&::before': {\n      background: 'transparent',\n      backgroundSize: '5px 1px',\n      backgroundImage: 'linear-gradient(to right, rgba(0, 0, 0, 0.42) 33%, transparent 0%)',\n      backgroundRepeat: 'repeat-x',\n      backgroundPosition: 'left top'\n    },\n    '&::after': {\n      left: '0',\n      right: '0',\n      bottom: '0',\n      height: '1px',\n      content: '\"\"',\n      position: 'absolute',\n      transform: 'scaleX(0)',\n      transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 0ms linear',\n      backgroundColor: 'rgba(0, 0, 0, 0)'\n    },\n    '&:hover': {\n      '&::after': {\n        transform: 'scaleX(0)',\n        backgroundColor: 'black',\n        height: '2px'\n      }\n    }\n  },\n  editorInFocus: {\n    '&::after': {\n      transform: 'scaleX(1)',\n      backgroundColor: primary,\n      height: '2px'\n    },\n    '&:hover': {\n      '&::after': {\n        backgroundColor: primary\n      }\n    }\n  },\n  error: {\n    border: '2px solid red'\n  },\n  noBorder: {\n    border: 'none'\n  },\n  noPadding: {\n    padding: 0\n  }\n};\n\nexport default withStyles(style)(EditorAndToolbar);\n"],"file":"editor-and-toolbar.js"}
+{"version":3,"sources":["../../../src/plugins/toolbar/editor-and-toolbar.jsx"],"names":["log","EditorAndToolbar","IS_FIREFOX","editorRef","tmp","isUpdatingSelection","props","classes","children","value","plugins","onChange","getFocusedValue","onDone","focusedNode","autoWidth","readOnly","disableScrollbar","disableUnderline","pluginProps","toolbarOpts","onDataChange","toolbarRef","inFocus","isFocused","undefined","holderNames","editorHolder","editorInFocus","disabledUnderline","disabledScrollbar","clonedChildren","React","cloneElement","ref","el","noBorder","error","root","noPadding","Component","PropTypes","oneOfType","arrayOf","node","isRequired","SlatePropTypes","array","func","bool","object","shape","position","oneOf","alwaysVisible","string","style","padding","border","borderRadius","cursor","wordBreak","overflow","maxHeight","overflowY","color","text","backgroundColor","background","left","right","bottom","height","content","transition","pointerEvents","transform","primary","display","scrollbarWidth","backgroundSize","backgroundImage","backgroundRepeat","backgroundPosition"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Toolbar from './toolbar';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport { primary } from '../../theme';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport SlatePropTypes from 'slate-prop-types';\nimport { IS_FIREFOX } from 'slate-dev-environment';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('@pie-lib:editable-html:plugins:toolbar:editor-and-toolbar');\n\nexport class EditorAndToolbar extends React.Component {\n  static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    value: SlatePropTypes.value.isRequired,\n    plugins: PropTypes.array.isRequired,\n    onChange: PropTypes.func.isRequired,\n    getFocusedValue: PropTypes.func.isRequired,\n    onDone: PropTypes.func.isRequired,\n    onDataChange: PropTypes.func,\n    toolbarRef: PropTypes.func,\n    focusedNode: SlatePropTypes.node,\n    readOnly: PropTypes.bool,\n    disableScrollbar: PropTypes.bool,\n    disableUnderline: PropTypes.bool,\n    autoWidth: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    pluginProps: PropTypes.object,\n    toolbarOpts: PropTypes.shape({\n      position: PropTypes.oneOf(['bottom', 'top']),\n      alwaysVisible: PropTypes.bool,\n      error: PropTypes.string\n    })\n  };\n\n  /** This is an interim fix until this PR is merged in slate:\n   * https://github.com/ianstormtaylor/slate/pull/2236\n   */\n  componentDidMount() {\n    if (IS_FIREFOX) {\n      this.editorRef.tmp.isUpdatingSelection = true;\n    }\n  }\n\n  render() {\n    const {\n      classes,\n      children,\n      value,\n      plugins,\n      onChange,\n      getFocusedValue,\n      onDone,\n      focusedNode,\n      autoWidth,\n      readOnly,\n      disableScrollbar,\n      disableUnderline,\n      pluginProps,\n      toolbarOpts,\n      onDataChange,\n      toolbarRef\n    } = this.props;\n\n    const inFocus = value.isFocused || (focusedNode !== null && focusedNode !== undefined);\n    const holderNames = classNames(classes.editorHolder, {\n      [classes.editorInFocus]: inFocus,\n      [classes.readOnly]: readOnly,\n      [classes.disabledUnderline]: disableUnderline,\n      [classes.disabledScrollbar]: disableScrollbar\n    });\n    let clonedChildren = children;\n\n    if (typeof children !== 'string') {\n      clonedChildren = React.cloneElement(children, {\n        ref: el => (this.editorRef = el)\n      });\n    }\n\n    log(\n      '[render] inFocus: ',\n      inFocus,\n      'value.isFocused:',\n      value.isFocused,\n      'focused node: ',\n      focusedNode\n    );\n\n    return (\n      <div\n        className={classNames(\n          {\n            [classes.noBorder]: toolbarOpts && toolbarOpts.noBorder,\n            [classes.error]: toolbarOpts && toolbarOpts.error\n          },\n          classes.root\n        )}\n      >\n        <div className={holderNames}>\n          <div\n            className={classNames(\n              {\n                [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder\n              },\n              classes.children\n            )}\n          >\n            {clonedChildren}\n          </div>\n        </div>\n        <Toolbar\n          autoWidth={autoWidth}\n          plugins={plugins}\n          focusedNode={focusedNode}\n          value={value}\n          isFocused={inFocus}\n          onChange={onChange}\n          getFocusedValue={getFocusedValue}\n          onDone={onDone}\n          onDataChange={onDataChange}\n          toolbarRef={toolbarRef}\n          pluginProps={pluginProps}\n          toolbarOpts={toolbarOpts}\n        />\n      </div>\n    );\n  }\n}\n\nconst style = {\n  root: {\n    position: 'relative',\n    padding: '0px',\n    border: '1px solid #ccc',\n    borderRadius: '4px',\n    cursor: 'text',\n    '& [data-slate-editor=\"true\"]': {\n      wordBreak: 'break-word',\n      overflow: 'visible',\n      maxHeight: '500px',\n      // needed in order to be able to put the focus before a void element when it is the first one in the editor\n      padding: '5px'\n    }\n  },\n  children: {\n    padding: '10px 16px'\n  },\n  editorHolder: {\n    position: 'relative',\n    padding: '0px',\n    overflowY: 'scroll',\n    color: color.text(),\n    backgroundColor: color.background(),\n    '&::before': {\n      left: '0',\n      right: '0',\n      bottom: '0',\n      height: '1px',\n      content: '\"\"',\n      position: 'absolute',\n      transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n      pointerEvents: 'none',\n      backgroundColor: 'rgba(0, 0, 0, 0.42)'\n    },\n    '&::after': {\n      left: '0',\n      right: '0',\n      bottom: '0',\n      height: '1px',\n      content: '\"\"',\n      position: 'absolute',\n      transform: 'scaleX(0)',\n      transition:\n        'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 200ms linear',\n      backgroundColor: 'rgba(0, 0, 0, 0.42)'\n    },\n    '&:focus': {\n      '&::after': {\n        transform: 'scaleX(1)',\n        backgroundColor: primary,\n        height: '2px'\n      }\n    },\n    '&:hover': {\n      '&::after': {\n        transform: 'scaleX(1)',\n        backgroundColor: 'black',\n        height: '2px'\n      }\n    }\n  },\n  disabledUnderline: {\n    '&::before': {\n      display: 'none'\n    },\n    '&::after': {\n      display: 'none'\n    }\n  },\n  disabledScrollbar: {\n    '&::-webkit-scrollbar': {\n      display: 'none'\n    },\n    scrollbarWidth: 'none',\n    '-ms-overflow-style': 'none'\n  },\n  readOnly: {\n    '&::before': {\n      background: 'transparent',\n      backgroundSize: '5px 1px',\n      backgroundImage: 'linear-gradient(to right, rgba(0, 0, 0, 0.42) 33%, transparent 0%)',\n      backgroundRepeat: 'repeat-x',\n      backgroundPosition: 'left top'\n    },\n    '&::after': {\n      left: '0',\n      right: '0',\n      bottom: '0',\n      height: '1px',\n      content: '\"\"',\n      position: 'absolute',\n      transform: 'scaleX(0)',\n      transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 0ms linear',\n      backgroundColor: 'rgba(0, 0, 0, 0)'\n    },\n    '&:hover': {\n      '&::after': {\n        transform: 'scaleX(0)',\n        backgroundColor: 'black',\n        height: '2px'\n      }\n    }\n  },\n  editorInFocus: {\n    '&::after': {\n      transform: 'scaleX(1)',\n      backgroundColor: primary,\n      height: '2px'\n    },\n    '&:hover': {\n      '&::after': {\n        backgroundColor: primary\n      }\n    }\n  },\n  error: {\n    border: '2px solid red'\n  },\n  noBorder: {\n    border: 'none'\n  },\n  noPadding: {\n    padding: 0\n  }\n};\n\nexport default withStyles(style)(EditorAndToolbar);\n"],"file":"editor-and-toolbar.js"}

package/lib/plugins/toolbar/index.js

@@ -23,6 +23,7 @@ function ToolbarPlugin(opts) {
     renderEditor: function renderEditor(props) {
       return /*#__PURE__*/_react["default"].createElement(_editorAndToolbar["default"], (0, _extends2["default"])({}, props, {
         mainEditorRef: opts.mainEditorRef,
+        disableScrollbar: opts.disableScrollbar,
         disableUnderline: opts.disableUnderline,
         onDone: opts.onDone
       }));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plugins/toolbar/index.jsx"],"names":["ToolbarPlugin","opts","renderEditor","props","mainEditorRef","disableUnderline","onDone"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AAEA;AACA;AACA;AACA;AACe,SAASA,aAAT,CAAuBC,IAAvB,EAA6B;AAC1C,SAAO;AACL;AACAC,IAAAA,YAAY,EAAE,sBAAAC,KAAK;AAAA,0BACjB,gCAAC,4BAAD,gCACMA,KADN;AAEE,QAAA,aAAa,EAAEF,IAAI,CAACG,aAFtB;AAGE,QAAA,gBAAgB,EAAEH,IAAI,CAACI,gBAHzB;AAIE,QAAA,MAAM,EAAEJ,IAAI,CAACK;AAJf,SADiB;AAAA;AAFd,GAAP;AAWD","sourcesContent":["import React from 'react';\n\nimport EditorAndToolbar from './editor-and-toolbar';\n\n/**\n * Adds a toolbar which is shown when the editor is focused.\n * @param {*} opts\n */\nexport default function ToolbarPlugin(opts) {\n  return {\n    /* eslint-disable-next-line */\n    renderEditor: props => (\n      <EditorAndToolbar\n        {...props}\n        mainEditorRef={opts.mainEditorRef}\n        disableUnderline={opts.disableUnderline}\n        onDone={opts.onDone}\n      />\n    )\n  };\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/plugins/toolbar/index.jsx"],"names":["ToolbarPlugin","opts","renderEditor","props","mainEditorRef","disableScrollbar","disableUnderline","onDone"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AAEA;AACA;AACA;AACA;AACe,SAASA,aAAT,CAAuBC,IAAvB,EAA6B;AAC1C,SAAO;AACL;AACAC,IAAAA,YAAY,EAAE,sBAAAC,KAAK;AAAA,0BACjB,gCAAC,4BAAD,gCACMA,KADN;AAEE,QAAA,aAAa,EAAEF,IAAI,CAACG,aAFtB;AAGE,QAAA,gBAAgB,EAAEH,IAAI,CAACI,gBAHzB;AAIE,QAAA,gBAAgB,EAAEJ,IAAI,CAACK,gBAJzB;AAKE,QAAA,MAAM,EAAEL,IAAI,CAACM;AALf,SADiB;AAAA;AAFd,GAAP;AAYD","sourcesContent":["import React from 'react';\n\nimport EditorAndToolbar from './editor-and-toolbar';\n\n/**\n * Adds a toolbar which is shown when the editor is focused.\n * @param {*} opts\n */\nexport default function ToolbarPlugin(opts) {\n  return {\n    /* eslint-disable-next-line */\n    renderEditor: props => (\n      <EditorAndToolbar\n        {...props}\n        mainEditorRef={opts.mainEditorRef}\n        disableScrollbar={opts.disableScrollbar}\n        disableUnderline={opts.disableUnderline}\n        onDone={opts.onDone}\n      />\n    )\n  };\n}\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html",
-  "version": "9.1.6",
+  "version": "9.2.0",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -13,7 +13,7 @@
     "@pie-lib/drag": "^1.1.52",
     "@pie-lib/math-rendering": "^2.5.0",
     "@pie-lib/math-toolbar": "^1.11.1",
-    "@pie-lib/render-ui": "^4.13.5",
+    "@pie-lib/render-ui": "^4.13.6",
     "change-case": "^3.0.2",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
@@ -47,6 +47,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "945cf008fd2a4a0d136813a9034274288ae95510",
+  "gitHead": "7ad98ca33a39276da5e170339b3bd8bb626dd54b",
   "scripts": {}
 }

package/src/editor.jsx

@@ -54,6 +54,10 @@ export class Editor extends React.Component {
     focus: PropTypes.func.isRequired,
     value: SlateTypes.value.isRequired,
     imageSupport: PropTypes.object,
+    uploadSoundSupport: PropTypes.shape({
+      add: PropTypes.func,
+      delete: PropTypes.func
+    }),
     charactersLimit: PropTypes.number,
     width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -64,6 +68,7 @@ export class Editor extends React.Component {
     disabled: PropTypes.bool,
     spellCheck: PropTypes.bool,
     nonEmpty: PropTypes.bool,
+    disableScrollbar: PropTypes.bool,
     disableUnderline: PropTypes.bool,
     autoWidthToolbar: PropTypes.bool,
     pluginProps: PropTypes.any,
@@ -170,6 +175,7 @@ export class Editor extends React.Component {
          * To minimize converting html -> state -> html
          * We only emit markup once 'done' is clicked.
          */
+        disableScrollbar: !!props.disableScrollbar,
         disableUnderline: props.disableUnderline,
         autoWidth: props.autoWidthToolbar,
         onDone: () => {
@@ -218,7 +224,8 @@ export class Editor extends React.Component {
       media: {
         focus: this.focus,
         createChange: () => this.state.value.change(),
-        onChange: this.onChange
+        onChange: this.onChange,
+        uploadSoundSupport: props.uploadSoundSupport
       }
     });
   };
@@ -672,7 +679,8 @@ export class Editor extends React.Component {
           maxWidth: '100%',
           whiteSpace: 'nowrap',
           opacity: '0.33',
-          pointerEvents: 'none'
+          pointerEvents: 'none',
+          userSelect: 'none'
         }}
       >
         {editor.props.placeholder}

package/src/plugins/media/index.jsx

@@ -19,7 +19,7 @@ const removeDialogs = () => {
 
 export const insertDialog = props => {
   const newEl = document.createElement('div');
-  const { type, callback, ...rest } = props;
+  const { type, callback, opts, ...rest } = props;
   const initialBodyOverflow = document.body.style.overflow;
 
   removeDialogs();
@@ -34,7 +34,14 @@ export const insertDialog = props => {
   };
 
   const el = (
-    <MediaDialog {...rest} type={type} disablePortal={true} open={true} handleClose={handleClose} />
+    <MediaDialog
+      {...rest}
+      uploadSoundSupport={opts.uploadSoundSupport}
+      type={type}
+      disablePortal={true}
+      open={true}
+      handleClose={handleClose}
+    />
   );
 
   ReactDOM.render(el, newEl);
@@ -68,6 +75,7 @@ export default function MediaPlugin(type, opts) {
       onChange(change);
       insertDialog({
         type,
+        opts,
         callback: (val, data) => {
           const nodeIsThere = change.value.document.findDescendant(d => d.key === inline.key);
 
@@ -102,7 +110,7 @@ export default function MediaPlugin(type, opts) {
         const { node, key } = props;
         const { data } = node;
         const jsonData = data.toJSON();
-        const { src, height, width, editing, ...rest } = jsonData;
+        const { src, height, width, editing, tag, ...rest } = jsonData;
         const handleEdit = () => {
           const change = opts.createChange();
           const c = change.setNodeByKey(key, {
@@ -117,6 +125,7 @@ export default function MediaPlugin(type, opts) {
               ...jsonData,
               edit: true,
               type,
+              opts,
               callback: (val, data) => {
                 const { key } = node;
 
@@ -150,6 +159,17 @@ export default function MediaPlugin(type, opts) {
           style.height = `${height}px`;
         }
 
+        if (tag === 'audio') {
+          return (
+            <MediaWrapper editor data-type={type} width={style.width} {...rest}>
+              <audio controls="controls">
+                <source type="audio/mp3" src={src} />
+              </audio>
+              <MediaToolbar hideEdit onRemove={handleDelete} />
+            </MediaWrapper>
+          );
+        }
+
         return (
           <MediaWrapper editor data-type={type} width={style.width} {...rest}>
             <iframe
@@ -202,10 +222,20 @@ export default function MediaPlugin(type, opts) {
 
 export const serialization = {
   deserialize(el /*, next*/) {
-    const type = el.dataset && el.dataset.type;
+    let type = el.dataset && el.dataset.type;
+    let tag = 'iframe';
+    let src;
     const typeIndex = types.indexOf(type);
 
-    if (typeIndex < 0) return;
+    if (typeIndex < 0) {
+      if (el instanceof Element && el.tagName.toLowerCase() === 'audio') {
+        type = 'audio';
+        tag = 'audio';
+        src = el.firstChild.getAttribute('src');
+      } else {
+        return;
+      }
+    }
 
     const { ends, starts, title, editing, url } = el.dataset || {};
 
@@ -218,7 +248,8 @@ export const serialization = {
       type: type,
       isVoid: true,
       data: {
-        src: el.getAttribute('src'),
+        tag,
+        src: src || el.getAttribute('src'),
         editing,
         ends,
         height,
@@ -240,6 +271,7 @@ export const serialization = {
 
     const { data } = object;
     const editing = data.get('editing');
+    const tag = data.get('tag');
     const ends = data.get('ends');
     const src = data.get('src');
     const starts = data.get('starts');
@@ -269,6 +301,14 @@ export const serialization = {
       src
     };
 
+    if (tag === 'audio') {
+      return (
+        <audio controls="controls">
+          <source type="audio/mp3" src={src} />
+        </audio>
+      );
+    }
+
     return (
       <iframe
         data-type={type}