@pie-lib/editable-html-tip-tap 1.0.2 → 1.0.4

package/src/plugins/media/index.jsx

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

package/src/plugins/rendering/index.js

@@ -1,31 +0,0 @@
-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/index.jsx

@@ -1,299 +0,0 @@
-import React from 'react';
-import debug from 'debug';
-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';
-
-const log = debug('@pie-lib:editable-html:plugins:respArea');
-
-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);
-
-export default function ResponseAreaPlugin(opts) {
-  const isOfCurrentType = (d) => d.type === opts.type || d.type === elTypesMap[opts.type];
-
-  const toolbar = {
-    icon: <ToolbarIcon />,
-    buttonStyles: {
-      margin: '0 20px 0 auto',
-    },
-    onClick: (value, onChange) => {
-      log('[toolbar] onClick');
-      const change = value.change();
-      const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
-
-      if (currentRespAreaList.size >= opts.maxResponseAreas) {
-        return;
-      }
-
-      const type = opts.type.replace(/-/g, '_');
-      const prevIndex = lastIndexMap[type];
-      const newIndex = prevIndex === 0 ? prevIndex : prevIndex + 1;
-      const newInline = getDefaultElement(opts, newIndex);
-
-      lastIndexMap[type] += 1;
-
-      if (newInline) {
-        if (change.value.selection.startKey || change.value.selection.endKey) {
-          change.insertInline(newInline);
-        } else {
-          // If the markup is empty and there's no focus
-          const lastText = value.document.getLastText();
-
-          if (!lastText) {
-            return;
-          }
-          const parentNode = value.document.getParent(lastText.key);
-
-          if (parentNode) {
-            const index = parentNode.nodes.indexOf(lastText.key);
-
-            if (parentNode.isVoid) return;
-
-            change.insertNodeByKey(parentNode.key, index + 1, newInline);
-          }
-        }
-
-        if (newInline.type === 'drag_in_the_blank') {
-          const nextText = change.value.document.getNextText(newInline.key);
-
-          if (nextText) {
-            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);
-      }
-    },
-    customToolbar: opts.respAreaToolbar,
-    supports: (node) => node.object === 'inline' && elTypesArray.indexOf(node.type) >= 0,
-    showDone: false,
-  };
-
-  return {
-    name: 'response_area',
-    toolbar,
-    filterPlugins: (node, plugins) => {
-      if (
-        node.type === 'explicit_constructed_response' ||
-        node.type === 'math_templated' ||
-        node.type === 'drag_in_the_blank'
-      ) {
-        return [];
-      }
-
-      return plugins.filter((p) => p.name !== 'response_area');
-    },
-    deleteNode: (e, node, value, onChange) => {
-      e.preventDefault();
-
-      const change = value.change().removeNodeByKey(node.key);
-
-      onChange(change);
-    },
-    renderNode(props) {
-      const { attributes, node: n, isFocused } = props;
-
-      if (n.type === 'explicit_constructed_response') {
-        const data = n.data.toJSON();
-        let error;
-
-        if (opts.error) {
-          error = opts.error();
-        }
-
-        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();
-
-        return <DragInTheBlank attributes={attributes} data={data} n={n} nodeProps={props} opts={opts} />;
-      }
-
-      if (n.type === 'inline_dropdown') {
-        const data = n.data.toJSON();
-
-        return <InlineDropdown attributes={attributes} selectedItem={data.value} />;
-      }
-    },
-    onChange(change, editor) {
-      const type = opts.type.replace(/-/g, '_');
-
-      if (isUndefined(lastIndexMap[type])) {
-        lastIndexMap[type] = 0;
-
-        change.value.document.forEachDescendant((d) => {
-          if (d.type === type) {
-            const newIndex = parseInt(d.data.get('index'), 10);
-
-            if (newIndex > lastIndexMap[type]) {
-              lastIndexMap[type] = newIndex;
-            }
-          }
-        });
-      }
-
-      if (!editor.value) {
-        return;
-      }
-
-      const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
-      const oldRespAreaList = editor.value.document.filterDescendants(isOfCurrentType);
-
-      toolbar.disabled = currentRespAreaList.size >= opts.maxResponseAreas;
-
-      const arrayToFilter = oldRespAreaList.size > currentRespAreaList.size ? oldRespAreaList : currentRespAreaList;
-      const arrayToUseForFilter = arrayToFilter === oldRespAreaList ? currentRespAreaList : oldRespAreaList;
-
-      const elementsWithChangedStatus = arrayToFilter.filter(
-        (d) => !arrayToUseForFilter.find((e) => e.data.get('index') === d.data.get('index')),
-      );
-
-      if (elementsWithChangedStatus.size && oldRespAreaList.size > currentRespAreaList.size) {
-        opts.onHandleAreaChange(elementsWithChangedStatus);
-      }
-    },
-    onDrop(event, change, editor) {
-      const closestEl = event.target.closest('[data-key]');
-      const inline = editor.value.document.findDescendant((d) => d.key === closestEl.dataset.key);
-
-      if (inline.type === 'drag_in_the_blank') {
-        return false;
-      }
-    },
-  };
-}
-
-export const serialization = {
-  deserialize(el) {
-    const type = el.dataset && el.dataset.type;
-
-    switch (type) {
-      case 'inline_dropdown':
-        return {
-          object: 'inline',
-          type: 'inline_dropdown',
-          isVoid: true,
-          data: {
-            index: el.dataset.index,
-            value: el.dataset.value,
-          },
-        };
-      case 'explicit_constructed_response':
-        return {
-          object: 'inline',
-          type: 'explicit_constructed_response',
-          isVoid: true,
-          data: {
-            index: el.dataset.index,
-            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',
-          type: 'drag_in_the_blank',
-          isVoid: true,
-          data: {
-            index: el.dataset.index,
-            id: el.dataset.id,
-            value: el.dataset.value,
-            inTable: el.dataset.inTable,
-          },
-        };
-    }
-  },
-  serialize(object) {
-    if (object.object !== 'inline') {
-      return;
-    }
-
-    switch (object.type) {
-      case 'inline_dropdown': {
-        const data = object.data.toJSON();
-
-        return <span data-type="inline_dropdown" data-index={data.index} data-value={data.value} />;
-      }
-      case 'explicit_constructed_response': {
-        const data = object.data.toJSON();
-
-        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();
-
-        return (
-          <span
-            data-type="drag_in_the_blank"
-            data-index={data.index}
-            data-id={data.id}
-            data-value={data.value}
-            data-in-table={data.inTable}
-          />
-        );
-      }
-    }
-  },
-};