@pie-lib/editable-html 11.1.1 → 11.2.1-beta.0

package/src/plugins/media/media-dialog.js

@@ -36,6 +36,9 @@ const matchVimeoUrl = (url) =>
     url,
   );
 
+const matchDriveUrl = (url) =>
+  url && /^https:\/\/drive\.google\.com\/(?:file\/d\/|drive\/(?:u\/\d+\/)?folders\/|uc\?id=)([a-zA-Z0-9_-]+)/.test(url);
+
 const matchSoundCloudUrl = (url) => {
   if (!url) {
     return false;
@@ -74,6 +77,11 @@ const typeMap = {
   audio: 'Audio',
 };
 
+const tabsTypeMap = {
+  uploadFile: 'upload-file',
+  insertUrl: 'insert-url',
+};
+
 export class MediaDialog extends React.Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -98,7 +106,8 @@ export class MediaDialog extends React.Component {
   constructor(props) {
     super(props);
 
-    const { src, starts, ends, height, url, urlToUse, width } = props;
+    const { ends, height, src, starts, type, uploadSoundSupport, url, urlToUse, width } = props;
+    const showUploadFile = uploadSoundSupport?.add && uploadSoundSupport?.delete && type !== 'video';
 
     this.state = {
       ends: ends || 0,
@@ -109,12 +118,14 @@ export class MediaDialog extends React.Component {
       invalid: false,
       starts: starts || 0,
       width: width || 560,
-      tabValue: 0,
+      // default selected tab should be upload file if available
+      tabValue: showUploadFile ? tabsTypeMap.uploadFile : tabsTypeMap.insertUrl,
       fileUpload: {
         error: null,
         loading: false,
         scheduled: false,
         url: '',
+        mimeType: '',
       },
     };
   }
@@ -173,57 +184,79 @@ export class MediaDialog extends React.Component {
 
   handleStateChange = (newState) => this.setState(newState, this.formatUrl);
 
-  urlChange = (e) => {
-    const { value } = e.target || {};
-    const { type } = this.props;
+  checkAudio = (value) => {
+    if (matchSoundCloudUrl(value)) {
+      makeApiRequest(value)
+        .then((urlToUse) => {
+          this.handleStateChange({
+            urlToUse,
+            invalid: !urlToUse,
+            url: value,
+          });
+        })
+        .catch(log);
+    }
+  };
 
-    if (type && type === 'audio') {
-      if (matchSoundCloudUrl(value)) {
-        makeApiRequest(value)
-          .then((urlToUse) => {
-            this.handleStateChange({
-              urlToUse,
-              invalid: !urlToUse,
-              url: value,
-            });
-          })
-          .catch(log);
-
-        return;
-      }
-    } else if (type && type === 'video') {
-      if (matchYoutubeUrl(value)) {
-        const regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
-        const match = value.match(regExp);
-        const id = match[2];
-        const urlToUse = `https://youtube.com/embed/${id}`;
-
-        log('is youtube');
-
-        this.handleStateChange({
-          urlToUse,
-          url: value,
-          invalid: false,
-        });
+  checkVideo = (value) => {
+    if (matchYoutubeUrl(value)) {
+      const regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+      const match = value.match(regExp);
+      const id = match[2];
+      const urlToUse = `https://youtube.com/embed/${id}`;
 
-        return;
-      }
+      log('is youtube');
 
-      if (matchVimeoUrl(value)) {
-        const id = value.replace(/.*vimeo.com\/(.*)/g, '$1');
-        const urlToUse = `https://player.vimeo.com/video/${id}`;
+      this.handleStateChange({
+        urlToUse,
+        url: value,
+        invalid: false,
+      });
+    }
 
-        log('is vimeo');
+    if (matchVimeoUrl(value)) {
+      const id = value.replace(/.*vimeo.com\/(.*)/g, '$1');
+      const urlToUse = `https://player.vimeo.com/video/${id}`;
 
-        this.handleStateChange({
-          urlToUse,
-          url: value,
-          ends: null,
-          invalid: false,
-        });
+      log('is vimeo');
 
-        return;
-      }
+      this.handleStateChange({
+        urlToUse,
+        url: value,
+        ends: null,
+        invalid: false,
+      });
+    }
+
+    if (matchDriveUrl(value)) {
+      // https://drive.google.com/file/d/11QkK_gUO068amNvZBm9cxZpKX74WYb8q/view
+      const id = value.replace(
+        /^https:\/\/drive\.google\.com\/(?:file\/d\/|drive\/(?:u\/\d+\/)?folders\/|uc\?id=)([a-zA-Z0-9_-]+)\/.*/,
+        '$1',
+      );
+      const urlToUse = `https://drive.google.com/file/d/${id}/preview`;
+
+      log('is google drive');
+
+      this.handleStateChange({
+        urlToUse,
+        url: value,
+        ends: null,
+        invalid: false,
+      });
+    }
+  };
+
+  urlChange = (e) => {
+    const { value } = e.target || {};
+    const { type } = this.props;
+
+    if (type && type === 'audio') {
+      this.checkAudio();
+      return;
+    } else if (type && type === 'video') {
+      this.checkVideo(value);
+      return;
     }
 
     this.handleStateChange({
@@ -238,7 +271,7 @@ export class MediaDialog extends React.Component {
   handleDone = (val) => {
     const { handleClose } = this.props;
     const { tabValue, fileUpload } = this.state;
-    const isInsertURL = tabValue === 0;
+    const isInsertURL = tabValue === tabsTypeMap.insertUrl;
 
     if (!val) {
       if (fileUpload.url) {
@@ -303,6 +336,7 @@ export class MediaDialog extends React.Component {
         fileUpload: {
           ...this.state.fileUpload,
           url: dataURL,
+          mimeType: fileChosen.type,
         },
       });
     };
@@ -364,19 +398,33 @@ export class MediaDialog extends React.Component {
         ...this.state.fileUpload,
         loading: false,
         url: '',
+        mimeType: '',
       },
     });
   };
 
   render() {
     const { classes, open, disablePortal, type, edit, uploadSoundSupport } = this.props;
-    const { ends, height, invalid, starts, width, url, formattedUrl, updating, tabValue, fileUpload } = this.state;
+    const {
+      ends,
+      height,
+      invalid,
+      starts,
+      width,
+      url,
+      mimeType,
+      formattedUrl,
+      updating,
+      tabValue,
+      fileUpload,
+    } = this.state;
     const isYoutube = matchYoutubeUrl(url);
-    const isInsertURL = tabValue === 0;
-    const isUploadMedia = tabValue === 1;
+    const isInsertURL = tabValue === tabsTypeMap.insertUrl;
+    const isUploadMedia = tabValue === tabsTypeMap.uploadFile;
     const submitIsDisabled = isInsertURL
       ? invalid || url === null || url === undefined
       : !fileUpload.url || fileUpload.scheduled;
+    const showUploadFile = uploadSoundSupport?.add && uploadSoundSupport?.delete && type !== 'video';
 
     return (
       <Dialog
@@ -399,10 +447,11 @@ export class MediaDialog extends React.Component {
                   this.setState({ tabValue: value });
                 }}
               >
-                <MuiTab label={type === 'video' ? 'Insert YouTube or Vimeo URL' : 'Insert SoundCloud URL'} />
-                {uploadSoundSupport?.add && uploadSoundSupport?.delete && type !== 'video' ? (
-                  <MuiTab label="Upload file" />
-                ) : null}
+                {showUploadFile ? <MuiTab value={tabsTypeMap.uploadFile} label="Upload file" /> : null}
+                <MuiTab
+                  value={tabsTypeMap.insertUrl}
+                  label={type === 'video' ? 'Insert YouTube, Vimeo, or Google Drive URL' : 'Insert SoundCloud URL'}
+                />
               </MuiTabs>
             </div>
             {isInsertURL && (
@@ -499,8 +548,8 @@ export class MediaDialog extends React.Component {
                   {fileUpload.url ? (
                     <>
                       <div className={classes.row}>
-                        <audio controls="controls">
-                          <source type="audio/mp3" src={fileUpload.url} />
+                        <audio controls="controls" controlsList="nodownload">
+                          <source type={mimeType} src={fileUpload.url} />
                         </audio>
                         <IconButton aria-label="delete" className={classes.deleteIcon} onClick={this.handleRemoveFile}>
                           <ActionDelete />

package/src/plugins/rendering/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+/**
+ * Plugin to render the normal divs and spans with attributes (if they are provided)
+ */
+export default () => {
+  return {
+    name: 'renderingPlugin',
+    renderNode: (props) => {
+      const { attributes, children, node } = props;
+
+      if (node.object !== 'block' && node.object !== 'inline') {
+        return;
+      }
+
+      const Tag = node.object === 'block' ? 'div' : 'span';
+      const style = { position: 'relative' };
+      const extraAttributes = node.data.get('attributes');
+
+      return React.createElement(
+        Tag,
+        {
+          ...attributes,
+          ...extraAttributes,
+          style: style,
+        },
+        children,
+      );
+    },
+  };
+};

package/src/plugins/respArea/drag-in-the-blank/choice.jsx

@@ -7,11 +7,14 @@ import { renderMath } from '@pie-lib/math-rendering';
 import { withStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
 
-import { GripIcon } from '../icons';
+import { GripIcon } from '@pie-lib/icons';
 
 const useStyles = withStyles((theme) => ({
   content: {
     border: `solid 0px ${theme.palette.primary.main}`,
+    '& mjx-frac': {
+      fontSize: '120% !important',
+    },
   },
   chip: {
     minWidth: '90px',

package/src/plugins/respArea/explicit-constructed-response/index.jsx

@@ -9,25 +9,26 @@ const ExplicitConstructedResponse = (props) => {
       {...attributes}
       style={{
         display: 'inline-flex',
-        minHeight: '50px',
+        visibility: props.isFocused ? 'hidden' : 'visible',
+        minHeight: '55px',
         minWidth: '178px',
         position: 'relative',
-        margin: '0 5px',
         cursor: 'pointer',
       }}
     >
       <div
         style={{
           display: 'inline-flex',
-          minWidth: '178px',
-          minHeight: '36px',
-          height: '36px',
-          background: '#FFF',
+          width: '100%',
+          minHeight: '46px',
+          height: '46px',
+          backgroundColor: '#FFF',
           border: `1px solid ${error ? 'red' : '#C0C3CF'}`,
           boxSizing: 'border-box',
-          borderRadius: '3px',
+          borderRadius: '4px',
           overflow: 'hidden',
-          padding: '8px',
+          padding: '12px 21px',
+          marginLeft: '4px',
         }}
         dangerouslySetInnerHTML={{
           __html: value || '<div>&nbsp;</div>',
@@ -41,6 +42,7 @@ ExplicitConstructedResponse.propTypes = {
   attributes: PropTypes.object,
   error: PropTypes.any,
   value: PropTypes.string,
+  isFocused: PropTypes.bool,
 };
 
 export default ExplicitConstructedResponse;

package/src/plugins/respArea/index.jsx

@@ -5,6 +5,7 @@ import isUndefined from 'lodash/isUndefined';
 import InlineDropdown from './inline-dropdown';
 import DragInTheBlank from './drag-in-the-blank';
 import ExplicitConstructedResponse from './explicit-constructed-response';
+import MathTemplated from './math-templated';
 import { getDefaultElement } from './utils';
 import { ToolbarIcon } from './icons';
 
@@ -14,6 +15,7 @@ const lastIndexMap = {};
 const elTypesMap = {
   'inline-dropdown': 'inline_dropdown',
   'explicit-constructed-response': 'explicit_constructed_response',
+  'math-templated': 'math_templated',
   'drag-in-the-blank': 'drag_in_the_blank',
 };
 const elTypesArray = Object.values(elTypesMap);
@@ -70,6 +72,13 @@ export default function ResponseAreaPlugin(opts) {
             change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);
           }
         }
+        if (newInline.type === 'math_templated') {
+          const nextText = change.value.document.getNextText(newInline.key);
+
+          if (nextText) {
+            change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);
+          }
+        }
 
         onChange(change);
       }
@@ -83,7 +92,11 @@ export default function ResponseAreaPlugin(opts) {
     name: 'response_area',
     toolbar,
     filterPlugins: (node, plugins) => {
-      if (node.type === 'explicit_constructed_response' || node.type === 'drag_in_the_blank') {
+      if (
+        node.type === 'explicit_constructed_response' ||
+        node.type === 'math_templated' ||
+        node.type === 'drag_in_the_blank'
+      ) {
         return [];
       }
 
@@ -97,7 +110,7 @@ export default function ResponseAreaPlugin(opts) {
       onChange(change);
     },
     renderNode(props) {
-      const { attributes, node: n } = props;
+      const { attributes, node: n, isFocused } = props;
 
       if (n.type === 'explicit_constructed_response') {
         const data = n.data.toJSON();
@@ -110,12 +123,34 @@ export default function ResponseAreaPlugin(opts) {
         return (
           <ExplicitConstructedResponse
             attributes={attributes}
+            isFocused={isFocused}
             value={data.value}
             error={error && error[data.index] && error[data.index][0]}
           />
         );
       }
 
+      if (n.type === 'math_templated') {
+        const data = n.data.toJSON();
+        let error;
+
+        if (opts.error) {
+          error = opts.error();
+        }
+
+        // add 1 to index to display R 1 instead of R 0
+        const keyToDisplay = `R ${parseInt(data.index) + 1}`;
+
+        return (
+          <MathTemplated
+            attributes={attributes}
+            keyToDisplay={keyToDisplay}
+            value={data.value || ''}
+            error={error && error[data.index] && error[data.index][0]}
+          />
+        );
+      }
+
       if (n.type === 'drag_in_the_blank') {
         const data = n.data.toJSON();
 
@@ -152,11 +187,7 @@ export default function ResponseAreaPlugin(opts) {
       const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
       const oldRespAreaList = editor.value.document.filterDescendants(isOfCurrentType);
 
-      if (currentRespAreaList.size >= opts.maxResponseAreas) {
-        toolbar.disabled = true;
-      } else {
-        toolbar.disabled = false;
-      }
+      toolbar.disabled = currentRespAreaList.size >= opts.maxResponseAreas;
 
       const arrayToFilter = oldRespAreaList.size > currentRespAreaList.size ? oldRespAreaList : currentRespAreaList;
       const arrayToUseForFilter = arrayToFilter === oldRespAreaList ? currentRespAreaList : oldRespAreaList;
@@ -205,6 +236,16 @@ export const serialization = {
             value: el.dataset.value,
           },
         };
+      case 'math_templated':
+        return {
+          object: 'inline',
+          type: 'math_templated',
+          isVoid: true,
+          data: {
+            index: el.dataset.index,
+            value: el.dataset.value,
+          },
+        };
       case 'drag_in_the_blank':
         return {
           object: 'inline',
@@ -235,6 +276,11 @@ export const serialization = {
 
         return <span data-type="explicit_constructed_response" data-index={data.index} data-value={data.value} />;
       }
+      case 'math_templated': {
+        const data = object.data.toJSON();
+
+        return <span data-type="math_templated" data-index={data.index} data-value={data.value} />;
+      }
       case 'drag_in_the_blank': {
         const data = object.data.toJSON();
 

package/src/plugins/respArea/inline-dropdown/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Chevron } from '../icons';
+import { Chevron } from '@pie-lib/icons';
 
 const InlineDropdown = ({ attributes, selectedItem }) => {
   // TODO: Investigate
@@ -27,6 +27,7 @@ const InlineDropdown = ({ attributes, selectedItem }) => {
           boxSizing: 'border-box',
           borderRadius: '3px',
           position: 'relative',
+          alignItems: 'center',
         }}
       >
         <div
@@ -36,12 +37,18 @@ const InlineDropdown = ({ attributes, selectedItem }) => {
             padding: '0 25px 0 8px',
             whiteSpace: 'nowrap',
             textOverflow: 'ellipsis',
-            lineHeight: '35px',
           }}
-          dangerouslySetInnerHTML={{
-            __html: html,
-          }}
-        />
+        >
+          <span
+            style={{
+              display: 'inline-block',
+              verticalAlign: 'middle',
+            }}
+            dangerouslySetInnerHTML={{
+              __html: html,
+            }}
+          />
+        </div>
         <Chevron
           direction="down"
           style={{

package/src/plugins/respArea/math-templated/index.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { mq } from '@pie-lib/math-input';
+
+const MathTemplated = ({ attributes, value, classes, keyToDisplay }) => (
+  <span {...attributes} className={classes.spanContainer}>
+    <div className={classes.responseBox}>{keyToDisplay}</div>
+    <div className={classes.mathBlock}>
+      <mq.Static latex={value} />
+    </div>
+  </span>
+);
+
+MathTemplated.propTypes = {
+  attributes: PropTypes.object,
+  classes: PropTypes.object.isRequired,
+  value: PropTypes.string,
+  keyToDisplay: PropTypes.string,
+};
+
+const styles = (theme) => ({
+  responseBox: {
+    background: theme.palette.grey['A100'],
+    color: theme.palette.grey['A700'],
+    display: 'inline-flex',
+    borderRight: '2px solid #C0C3CF',
+    boxSizing: 'border-box',
+    overflow: 'hidden',
+    fontSize: '12px',
+    minHeight: '36px',
+    height: '100%',
+    alignItems: 'center',
+    fontFamily: 'Symbola, Times New Roman, serif',
+    padding: '0 2px',
+  },
+  spanContainer: {
+    display: 'inline-flex',
+    border: '1px solid #C0C3CF',
+    margin: '1px 5px',
+    cursor: 'pointer',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: '50px',
+    minHeight: '36px',
+    height: 'fit-content',
+  },
+  mathBlock: {
+    flex: 8,
+    color: 'var(--pie-text, black)',
+    padding: '4px !important',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'var(--pie-background, rgba(255, 255, 255, 0))',
+    '& > .mq-math-mode sup.mq-nthroot': {
+      fontSize: '70% !important',
+      verticalAlign: '1em !important',
+    },
+    '& > .mq-math-mode .mq-sqrt-stem': {
+      borderTop: '0.07em solid',
+      marginLeft: '-1.5px',
+      marginTop: '-2px !important',
+      paddingTop: '5px !important',
+    },
+    '& .mq-overarrow-inner': {
+      paddingTop: '0 !important',
+      border: 'none !important',
+    },
+    '& .mq-overarrow.mq-arrow-both': {
+      marginTop: '0px',
+      minWidth: '1.23em',
+      '& *': {
+        lineHeight: '1 !important',
+      },
+      '&:before': {
+        top: '-0.4em',
+        left: '-1px',
+      },
+      '&:after': {
+        top: '0px !important',
+        position: 'absolute !important',
+        right: '-2px',
+      },
+      '&.mq-empty:after': {
+        top: '-0.45em',
+      },
+    },
+    '& .mq-overarrow.mq-arrow-right': {
+      '&:before': {
+        top: '-0.4em',
+        right: '-1px',
+      },
+    },
+    '& .mq-overarrow-inner-right': {
+      display: 'none !important',
+    },
+    '& .mq-overarrow-inner-left': {
+      display: 'none !important',
+    },
+  },
+});
+
+export default withStyles(styles)(MathTemplated);

package/src/plugins/respArea/utils.jsx

@@ -42,6 +42,14 @@ export const defaultECR = (index) =>
       index,
     },
   });
+export const defaultMT = (index) =>
+  Inline.create({
+    type: 'math_templated',
+    isVoid: true,
+    data: {
+      index,
+    },
+  });
 
 export const defaultDIB = (opts, index) =>
   Inline.create({
@@ -69,6 +77,9 @@ export const getDefaultElement = (opts, index) => {
     case 'explicit-constructed-response':
       return defaultECR(index);
 
+    case 'math-templated':
+      return defaultMT(index);
+
     case 'drag-in-the-blank':
       return defaultDIB(opts, index);