@pie-lib/editable-html 12.1.1-next.0 → 12.2.0-next.0

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

@@ -22,7 +22,8 @@ const matchYoutubeUrl = (url) => {
     return false;
   }
 
-  const p = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
+  const p =
+    /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
   if (url.match(p)) {
     return url.match(p)[1];
   }
@@ -433,19 +434,8 @@ export class MediaDialog extends React.Component {
 
   render() {
     const { open, disablePortal, type, edit, uploadSoundSupport } = this.props;
-    const {
-      ends,
-      height,
-      invalid,
-      starts,
-      width,
-      url,
-      mimeType,
-      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 === tabsTypeMap.insertUrl;
     const isUploadMedia = tabValue === tabsTypeMap.uploadFile;
@@ -568,10 +558,7 @@ export class MediaDialog extends React.Component {
                         <audio controls="controls" controlsList="nodownload">
                           <source type={mimeType} src={fileUpload.url} />
                         </audio>
-                        <StyledDeleteIcon
-                          aria-label="delete"
-                          onClick={this.handleRemoveFile}
-                          size="large">
+                        <StyledDeleteIcon aria-label="delete" onClick={this.handleRemoveFile} size="large">
                           <ActionDelete />
                         </StyledDeleteIcon>
                       </StyledRow>
@@ -587,11 +574,7 @@ export class MediaDialog extends React.Component {
                   ) : !fileUpload.loading ? (
                     <input accept="audio/*" onChange={this.handleUploadFile} type="file" />
                   ) : null}
-                  {!!fileUpload.error && (
-                    <StyledError variant="caption">
-                      {fileUpload.error}
-                    </StyledError>
-                  )}
+                  {!!fileUpload.error && <StyledError variant="caption">{fileUpload.error}</StyledError>}
                 </div>
               </StyledUploadInput>
             )}

package/src/plugins/media/media-toolbar.jsx

@@ -39,14 +39,8 @@ class MediaToolbar extends React.Component {
 
     return (
       <StyledMediaToolbar>
-        {hideEdit ? null : (
-          <StyledEditContainer onClick={onEdit}>
-            Edit Settings
-          </StyledEditContainer>
-        )}
-        <StyledRemoveContainer onClick={onRemove}>
-          Remove
-        </StyledRemoveContainer>
+        {hideEdit ? null : <StyledEditContainer onClick={onEdit}>Edit Settings</StyledEditContainer>}
+        <StyledRemoveContainer onClick={onRemove}>Remove</StyledRemoveContainer>
       </StyledMediaToolbar>
     );
   }

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

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useDraggable, useDroppable } from '@dnd-kit/core';
@@ -7,7 +7,7 @@ import { renderMath } from '@pie-lib/math-rendering';
 import { styled } from '@mui/material/styles';
 
 import { GripIcon } from '../icons';
-import { onValueChange, onRemoveResponse } from './utils';
+import { onRemoveResponse, onValueChange } from './utils';
 
 const StyledContent = styled('span')(({ theme }) => ({
   border: `solid 0px ${theme.palette.primary.main}`,
@@ -28,15 +28,7 @@ const StyledContent = styled('span')(({ theme }) => ({
   },
 }));
 
-export function BlankContent({
-  n,
-  children,
-  isDragging,
-  isOver,
-  dragItem,
-  value,
-  style: externalStyle
-}) {
+export function BlankContent({ n, children, isDragging, isOver, dragItem, value, style: externalStyle }) {
   const [hoveredElementSize, setHoveredElementSize] = useState(null);
   const elementRef = useRef(null);
 
@@ -142,15 +134,7 @@ BlankContent.propTypes = {
   style: PropTypes.object,
 };
 
-function DragDropChoice({
-  value,
-  disabled,
-  instanceId,
-  children,
-  n,
-  nodeProps,
-  opts,
-}) {
+function DragDropChoice({ value, disabled, instanceId, children, n, nodeProps, opts }) {
   const {
     attributes: dragAttributes,
     listeners: dragListeners,
@@ -171,8 +155,7 @@ function DragDropChoice({
       onRemove: (draggedData) => onRemoveResponse(nodeProps, draggedData.value),
       onDrop: (draggedData, dropData) => {
         // check if we're dropping into a blank
-        const isValidBlank =
-          dropData?.type === 'drag-in-the-blank-drop-choice';
+        const isValidBlank = dropData?.type === 'drag-in-the-blank-drop-choice';
 
         if (!isValidBlank) return;
 
@@ -182,8 +165,8 @@ function DragDropChoice({
         if (!opts.options.duplicates && draggedData.fromChoice) {
           onRemoveResponse(nodeProps, draggedData.value);
         }
-      }
-    }
+      },
+    },
   });
 
   const {
@@ -203,8 +186,7 @@ function DragDropChoice({
       opts,
       onDrop: (draggedData, dropData) => {
         // check if we're dropping into a blank
-        const isValidBlank =
-          dropData?.type === 'drag-in-the-blank-drop-choice';
+        const isValidBlank = dropData?.type === 'drag-in-the-blank-drop-choice';
 
         if (!isValidBlank) return;
 
@@ -232,8 +214,8 @@ function DragDropChoice({
           // clear original blank - slight delay to ensure state updates correctly
           setTimeout(() => onRemoveResponse(nodeProps, draggedData.value), 10);
         }
-      }
-    }
+      },
+    },
   });
 
   const setNodeRef = (node) => {
@@ -262,11 +244,7 @@ function DragDropChoice({
     </span>
   );
 
-  const content = (
-    <StyledContent className={classnames(isOver && 'over')}>
-      {dragEl}
-    </StyledContent>
-  );
+  const content = <StyledContent className={classnames(isOver && 'over')}>{dragEl}</StyledContent>;
 
   return content;
 }

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

@@ -1,38 +1,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import DragDropTile from './choice';
-import { onValueChange, onRemoveResponse } from './utils';
+import { onRemoveResponse, onValueChange } from './utils';
 
 const DragDrop = ({ attributes, data, n, nodeProps, opts }) => {
   const { inTable } = data;
 
   return (
-      <span
-        {...attributes}
-        style={{
-          display: 'inline-flex',
-          minHeight: '50px',
-          minWidth: '178px',
-          position: 'relative',
-          margin: inTable ? '10px' : '0 10px',
-          cursor: 'pointer',
-        }}
+    <span
+      {...attributes}
+      style={{
+        display: 'inline-flex',
+        minHeight: '50px',
+        minWidth: '178px',
+        position: 'relative',
+        margin: inTable ? '10px' : '0 10px',
+        cursor: 'pointer',
+      }}
+    >
+      <DragDropTile
+        n={n}
+        dragKey={n.key}
+        targetId={`drop-${n.key}`}
+        value={data}
+        duplicates={opts.options.duplicates}
+        onChange={(value) => onValueChange(nodeProps, n, value)}
+        removeResponse={(value) => onRemoveResponse(nodeProps, value)}
+        instanceId={nodeProps.editor?.props?.instanceId || 'default'}
+        nodeProps={nodeProps}
+        opts={opts}
       >
-        <DragDropTile
-          n={n}
-          dragKey={n.key}
-          targetId={`drop-${n.key}`}
-          value={data}
-          duplicates={opts.options.duplicates}
-          onChange={(value) => onValueChange(nodeProps, n, value)}
-          removeResponse={(value) => onRemoveResponse(nodeProps, value)}
-          instanceId={nodeProps.editor?.props?.instanceId || 'default'}
-          nodeProps={nodeProps}
-          opts={opts}
-        >
-          {nodeProps.children}
-        </DragDropTile>
-      </span>
+        {nodeProps.children}
+      </DragDropTile>
+    </span>
   );
 };
 

package/src/plugins/respArea/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import debug from 'debug';
-import isUndefined from 'lodash/isUndefined';
+import { isUndefined } from 'lodash-es';
 
 import InlineDropdown from './inline-dropdown';
 import DragInTheBlank from './drag-in-the-blank';

package/src/plugins/table/__tests__/index.test.jsx

@@ -1,6 +1,6 @@
 import EditTable from 'slate-edit-table';
-import TablePlugin, { serialization, parseStyleString, reactAttributes } from '../index';
-import { Data, Block, PathUtils } from 'slate';
+import TablePlugin, { parseStyleString, reactAttributes, serialization } from '../index';
+import { Block, Data, PathUtils } from 'slate';
 import React from 'react';
 
 jest.mock('slate-edit-table', () => {
@@ -8,14 +8,14 @@ jest.mock('slate-edit-table', () => {
     default: jest.fn().mockReturnThis(),
     utils: {
       isSelectionInTable: jest.fn().mockReturnValue(true),
-      createTable: jest.fn(function(c) {
+      createTable: jest.fn(function (c) {
         return {
           toJSON: jest.fn().mockReturnValue({ object: 'block', type: 'table' }),
         };
       }),
     },
     changes: {
-      insertTable: jest.fn(function(c) {
+      insertTable: jest.fn(function (c) {
         return c;
       }),
     },
@@ -328,7 +328,7 @@ describe('serialization', () => {
       const el = {
         tagName: 'td',
         childNodes: [],
-        getAttribute: jest.fn(function(name) {
+        getAttribute: jest.fn(function (name) {
           const o = {
             class: 'class name',
             colspan: '1',

package/src/plugins/table/index.jsx

@@ -30,12 +30,7 @@ const Table = (props) => {
   const nodeAttributes = dataToAttributes(props.node.data);
 
   return (
-    <StyledTable
-      {...props.attributes}
-      {...nodeAttributes}
-      onFocus={props.onFocus}
-      onBlur={props.onBlur}
-    >
+    <StyledTable {...props.attributes} {...nodeAttributes} onFocus={props.onFocus} onBlur={props.onBlur}>
       <tbody>{props.children}</tbody>
     </StyledTable>
   );

package/src/plugins/table/table-toolbar.jsx

@@ -5,7 +5,7 @@ import { DoneButton } from '../toolbar/done-button';
 import BorderAll from '@mui/icons-material/BorderAll';
 import { ToolbarButton } from '../toolbar/default-toolbar';
 
-import { AddRow, AddColumn, RemoveColumn, RemoveRow, RemoveTable } from './icons';
+import { AddColumn, AddRow, RemoveColumn, RemoveRow, RemoveTable } from './icons';
 import PropTypes from 'prop-types';
 import debug from 'debug';
 

package/src/plugins/toolbar/__tests__/default-toolbar.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { render, screen, within, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { Value } from 'slate';
 import { DefaultToolbar } from '../default-toolbar';
 
@@ -50,10 +49,7 @@ describe('default-toolbar', () => {
 
     it('renders with 1 plugin', () => {
       const { container } = render(
-        <DefaultToolbar
-          {...defaultProps}
-          plugins={[{ toolbar: { icon: <span>Icon1</span> }, name: 'plugin-one' }]}
-        />,
+        <DefaultToolbar {...defaultProps} plugins={[{ toolbar: { icon: <span>Icon1</span> }, name: 'plugin-one' }]} />,
       );
 
       expect(container.firstChild).toBeInTheDocument();

package/src/plugins/toolbar/__tests__/editor-and-toolbar.test.jsx

@@ -1,7 +1,7 @@
 import { classObject, mockIconButton } from '../../../__tests__/utils';
 
-import { Data, Value } from 'slate';
-import { EditorAndToolbar, getClonedChildren } from '../editor-and-toolbar';
+import { Value } from 'slate';
+import { EditorAndToolbar } from '../editor-and-toolbar';
 import React from 'react';
 import debug from 'debug';
 import { render, screen } from '@testing-library/react';

package/src/plugins/toolbar/__tests__/toolbar-buttons.test.jsx

@@ -1,5 +1,5 @@
 import { classObject } from '../../../__tests__/utils';
-import { RawMarkButton, RawButton } from '../toolbar-buttons';
+import { RawButton, RawMarkButton } from '../toolbar-buttons';
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

package/src/plugins/toolbar/__tests__/toolbar.test.jsx

@@ -1,5 +1,5 @@
 import { classObject, mockMathInput } from '../../../__tests__/utils';
-import { Data, Value, Inline } from 'slate';
+import { Inline, Value } from 'slate';
 import { Toolbar } from '../toolbar';
 import React from 'react';
 import { render, screen } from '@testing-library/react';

package/src/plugins/toolbar/done-button.jsx

@@ -14,12 +14,7 @@ const StyledIconButton = styled(IconButton)({
 });
 
 export const RawDoneButton = ({ onClick, doneButtonRef }) => (
-  <StyledIconButton
-    aria-label="Done"
-    buttonRef={doneButtonRef}
-    onClick={onClick}
-    size="large"
-  >
+  <StyledIconButton aria-label="Done" buttonRef={doneButtonRef} onClick={onClick} size="large">
     <Check />
   </StyledIconButton>
 );

package/src/plugins/toolbar/editor-and-toolbar.jsx

@@ -193,19 +193,14 @@ export class EditorAndToolbar extends React.Component {
     log('[render] inFocus: ', inFocus, 'value.isFocused:', value.isFocused, 'focused node: ', focusedNode);
 
     return (
-      <Root
-        noBorder={toolbarOpts && toolbarOpts.noBorder}
-        error={toolbarOpts && toolbarOpts.error}
-      >
+      <Root noBorder={toolbarOpts && toolbarOpts.noBorder} error={toolbarOpts && toolbarOpts.error}>
         <EditorHolder
           inFocus={inFocus}
           readOnly={readOnly}
           disableUnderline={disableUnderline}
           disableScrollbar={disableScrollbar}
         >
-          <ChildrenContainer noPadding={toolbarOpts && toolbarOpts.noPadding}>
-            {clonedChildren}
-          </ChildrenContainer>
+          <ChildrenContainer noPadding={toolbarOpts && toolbarOpts.noPadding}>{clonedChildren}</ChildrenContainer>
         </EditorHolder>
 
         <Toolbar

package/src/plugins/toolbar/toolbar.jsx

@@ -5,11 +5,11 @@ import IconButton from '@mui/material/IconButton';
 import PropTypes from 'prop-types';
 import debug from 'debug';
 import SlatePropTypes from 'slate-prop-types';
-import debounce from 'lodash/debounce';
+import { debounce } from 'lodash-es';
 
 import { DoneButton } from './done-button';
 
-import { findSingleNode, findParentNode } from '../utils';
+import { findParentNode, findSingleNode } from '../utils';
 import { styled } from '@mui/material/styles';
 import DefaultToolbar from './default-toolbar';
 import { removeDialogs as removeCharacterDialogs } from '../characters';
@@ -18,7 +18,8 @@ import { PIE_TOOLBAR__CLASS } from '../../constants';
 const log = debug('@pie-lib:editable-html:plugins:toolbar');
 
 const StyledToolbar = styled('div', {
-  shouldForwardProp: (prop) => !['hasDoneButton', 'position', 'alignment', 'focused', 'autoWidth', 'hidden'].includes(prop),
+  shouldForwardProp: (prop) =>
+    !['hasDoneButton', 'position', 'alignment', 'focused', 'autoWidth', 'hidden'].includes(prop),
 })(({ hasDoneButton, position, alignment, focused, autoWidth, hidden }) => ({
   position: 'absolute',
   zIndex: 10,

package/src/serialization.jsx

@@ -2,7 +2,7 @@ import Html from 'slate-html-serializer';
 import React from 'react';
 import debug from 'debug';
 import { object as toStyleObject } from 'to-style';
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from 'lodash-es';
 
 import { serialization as imgSerialization } from './plugins/image';
 import { serialization as mathSerialization } from './plugins/math';
@@ -368,7 +368,7 @@ const serializer = new Html({
 
 const _extends =
   Object.assign ||
-  function(target) {
+  function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -403,7 +403,7 @@ serializer.deserialize = function deserialize(html) {
   let nodes = this.deserializeElements(children);
 
   // COMPAT: ensure that all top-level inline nodes are wrapped into a block.
-  nodes = nodes.reduce(function(memo, node, i, original) {
+  nodes = nodes.reduce(function (memo, node, i, original) {
     if (node.object === 'block') {
       memo.push(node);
       return memo;
@@ -467,7 +467,7 @@ export const reduceMultipleBrs = (markup) => {
     return markup.replace(/(<br\s*\/?>){3,}/gi, '<br>');
   } catch (e) {
     // eslint-disable-next-line no-console
-    console.log('Couldn\'t remove <br/> tags: ', e);
+    console.log("Couldn't remove <br/> tags: ", e);
   }
 
   return markup;
@@ -478,7 +478,7 @@ const reduceRedundantNewLineCharacters = (markup) => {
     return markup.replace(/\n/gi, '');
   } catch (e) {
     // eslint-disable-next-line no-console
-    console.log('Couldn\'t remove <br/> tags: ', e);
+    console.log("Couldn't remove <br/> tags: ", e);
   }
 
   return markup;
@@ -605,7 +605,7 @@ export const htmlToValue = (html) => {
     return serializer.deserialize(handleHtml(html));
   } catch (e) {
     // eslint-disable-next-line no-console
-    console.log('Couldn\'t parse html: ', e);
+    console.log("Couldn't parse html: ", e);
     return {};
   }
 };

package/NEXT.CHANGELOG.json

@@ -1 +0,0 @@
-[]