@pie-element/complex-rubric 4.0.0 → 5.0.1-esmbeta.1

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/src/plugins/css/index.jsx

@@ -0,0 +1,346 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import List from '@material-ui/core/List';
+import { Leaf, Mark } from 'slate';
+import Immutable from 'immutable';
+import ListItem from '@material-ui/core/ListItem';
+import isEmpty from 'lodash/isEmpty';
+import debug from 'debug';
+import CssIcon from './icons';
+
+const log = debug('@pie-lib:editable-html:plugins:characters');
+
+export const removeDialogs = () => {
+  const prevDialogs = document.querySelectorAll('.insert-css-dialog');
+
+  log('[characters:removeDialogs]');
+  prevDialogs.forEach((s) => s.remove());
+};
+
+const insertDialog = ({ editorDOM, value, callback, opts, textNode, parentNode }) => {
+  const newEl = document.createElement('div');
+
+  log('[characters:insertDialog]');
+
+  removeDialogs();
+
+  newEl.className = 'insert-css-dialog';
+
+  let popoverEl;
+
+  const closePopOver = () => {
+    if (popoverEl) {
+      popoverEl.remove();
+    }
+  };
+
+  let firstCallMade = false;
+
+  const listener = (e) => {
+    // this will be triggered right after setting it because
+    // this toolbar is added on the mousedown event
+    // so right after mouseup, the click will be triggered
+    if (firstCallMade) {
+      const focusIsInModals = newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));
+      const focusIsInEditor = editorDOM.contains(e.target);
+
+      if (!(focusIsInModals || focusIsInEditor)) {
+        handleClose();
+      }
+    } else {
+      firstCallMade = true;
+    }
+  };
+
+  const handleClose = () => {
+    callback(undefined, true);
+    newEl.remove();
+    closePopOver();
+    document.body.removeEventListener('click', listener);
+  };
+
+  const handleChange = (name) => {
+    callback(name, true);
+    newEl.remove();
+    closePopOver();
+    document.body.removeEventListener('click', listener);
+  };
+
+  const selectedText = textNode.text.slice(value.selection.anchorOffset, value.selection.focusOffset);
+  const parentNodeClass = parentNode?.data?.get('attributes')?.class;
+  const createHTML = (name) => {
+    let html = `<span class="${name}">${selectedText}</span>`;
+
+    if (parentNode) {
+      let tag;
+
+      if (parentNode?.object === 'inline') {
+        tag = 'span';
+      }
+
+      if (parentNode?.object === 'block') {
+        tag = 'div';
+      }
+
+      html = `<${tag} class="${parentNodeClass}">${parentNode.text.slice(
+        0,
+        value.selection.anchorOffset,
+      )}${html}${parentNode.text.slice(value.selection.focusOffset)}</${tag}>`;
+    }
+
+    return html;
+  };
+
+  const el = (
+    <div
+      style={{ background: 'white', height: 500, padding: 20, overflow: 'hidden', display: 'flex', flexFlow: 'column' }}
+    >
+      <h2>Please choose a css class</h2>
+      {parentNodeClass && <div>The current parent has this class {parentNodeClass}</div>}
+      <List component="nav" style={{ overflow: 'scroll' }}>
+        {opts.names.map((name, i) => (
+          <ListItem key={`rule-${i}`} button onClick={() => handleChange(name)}>
+            <div style={{ marginRight: 20 }}>{name}</div>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: createHTML(name),
+              }}
+            />
+          </ListItem>
+        ))}
+      </List>
+    </div>
+  );
+
+  ReactDOM.render(el, newEl, () => {
+    const cursorItem = document.querySelector(`[data-key="${value.anchorKey}"]`);
+
+    if (cursorItem) {
+      const bodyRect = editorDOM.parentElement.parentElement.parentElement.getBoundingClientRect();
+      const boundRect = cursorItem.getBoundingClientRect();
+
+      editorDOM.parentElement.parentElement.parentElement.appendChild(newEl);
+
+      // when height of toolbar exceeds screen - can happen in scrollable contexts
+      let additionalTopOffset = 0;
+      if (boundRect.y < newEl.offsetHeight) {
+        additionalTopOffset = newEl.offsetHeight - boundRect.y + 10;
+      }
+
+      newEl.style.maxWidth = '500px';
+      newEl.style.position = 'absolute';
+      newEl.style.top = 0;
+      newEl.style.zIndex = 99999;
+
+      const leftValue = `${boundRect.left + Math.abs(bodyRect.left) + cursorItem.offsetWidth + 10}px`;
+
+      const rightValue = `${boundRect.x}px`;
+
+      newEl.style.left = leftValue;
+
+      const leftAlignedWidth = newEl.offsetWidth;
+
+      newEl.style.left = 'unset';
+      newEl.style.right = rightValue;
+
+      const rightAlignedWidth = newEl.offsetWidth;
+
+      newEl.style.left = 'unset';
+      newEl.style.right = 'unset';
+
+      if (leftAlignedWidth >= rightAlignedWidth) {
+        newEl.style.left = leftValue;
+      } else {
+        newEl.style.right = rightValue;
+      }
+
+      document.body.addEventListener('click', listener);
+    }
+  });
+};
+
+const findParentNodeInfo = (value, textNode) => {
+  const closestInline = value.document.getClosestInline(value.selection.endKey);
+  const closestBlock = value.document.getClosestBlock(value.selection.endKey);
+  let nodeToUse = null;
+
+  if (closestInline?.nodes?.find((n) => n.key === textNode.key)) {
+    nodeToUse = closestInline;
+  }
+
+  if (closestBlock?.nodes?.find((n) => n.key === textNode.key)) {
+    nodeToUse = closestBlock;
+  }
+
+  return nodeToUse;
+};
+
+/**
+ * Find the node that has a class attribute and return it.
+ * Keeping this in case the implementation of classes needs to be changed
+ * @param value
+ * @param opts
+ * @returns {*}
+ */
+const getNodeWithClass = (value, opts) => {
+  const blocksAtRange = value.document.getBlocksAtRangeAsArray(value.selection);
+  const inlinesAtRange = value.document.getInlinesAtRangeAsArray(value.selection);
+  const blockData = blocksAtRange[0]?.data.toJSON() || {};
+  const inlineData = inlinesAtRange[0]?.data.toJSON() || {};
+
+  if (!blockData.attributes?.class && !inlineData.attributes?.class) {
+    return null;
+  }
+
+  const { class: blockClass } = blockData.attributes || {};
+  const { class: inlineClass } = inlineData.attributes || {};
+  const inlineHasClass = opts.names.find((name) => inlineClass.includes(name));
+
+  if (inlineHasClass) {
+    return inlinesAtRange[0];
+  }
+
+  const blockHasClass = opts.names.find((name) => blockClass.includes(name));
+
+  if (blockHasClass) {
+    return blocksAtRange[0];
+  }
+
+  return null;
+};
+
+/**
+ * Plugin in order to be able to add a css clas that is provided through the model
+ * on a text element. Works like a mark (bold, italic etc.).
+ * @param opts
+ * @constructor
+ */
+export default function CSSPlugin(opts) {
+  const plugin = {
+    name: 'extraCSSRules',
+    toolbar: {
+      isMark: true,
+      icon: <CssIcon />,
+      ariaLabel: 'CSS editor',
+      type: 'css',
+      onToggle: (change) => {
+        const type = 'css';
+        const hasMark = change.value.activeMarks.find((entry) => {
+          return entry.type === type;
+        });
+
+        if (hasMark) {
+          change.removeMark(hasMark);
+        } else {
+          const newMark = Mark.create(type);
+
+          change.addMark(newMark);
+        }
+
+        return change;
+      },
+      onClick: (value, onChange, getFocusedValue) => {
+        const type = 'css';
+        const hasMark = value.activeMarks.find((entry) => {
+          return entry.type === type;
+        });
+
+        let change = value.change();
+
+        if (hasMark) {
+          change.removeMark(hasMark);
+          onChange(change);
+          return;
+        }
+
+        // keeping this if implementation needs to be changed to regular blocks instead of marks
+        // let nodeWithClass = getNodeWithClass(value, opts);
+        //
+        // if (nodeWithClass) {
+        //   const nodeAttributes = nodeWithClass.data.get('attributes');
+        //
+        //   opts.names.forEach((name) => {
+        //     if (nodeAttributes.class.includes(name)) {
+        //       nodeAttributes.class = nodeAttributes.class.replace(name, '');
+        //     }
+        //   });
+        //
+        //   // keeping only one space between classes
+        //   nodeAttributes.class = nodeAttributes.class.replace(/ +/g, ' ');
+        //
+        //   nodeWithClass.data.set('attributes', nodeAttributes);
+        //
+        //   let change = value.change();
+        //   change.replaceNodeByKey(nodeWithClass.key, nodeWithClass);
+        //
+        //   onChange(change);
+        //   return;
+        // }
+
+        const editorDOM = document.querySelector(`[data-key="${value.document.key}"]`);
+        let valueToUse = value;
+
+        const callback = (className, focus) => {
+          if (getFocusedValue) {
+            valueToUse = getFocusedValue() || valueToUse;
+          }
+
+          if (className) {
+            let change = valueToUse.change();
+
+            const newMark = Mark.create({
+              object: 'mark',
+              type: 'css',
+              data: {
+                attributes: {
+                  class: className,
+                },
+              },
+            });
+
+            change.addMark(newMark);
+            // keeping this if implementation needs to be changed to regular blocks instead of marks
+            // change = change.wrapInline({ type: 'span', data: { attributes: { class: className } } });
+            //
+            // // change = change.splitBlockAtRange(adaptedRange);
+            // //
+            // // const newBlock = change.value.document.getFurthestBlock(change.value.selection.endKey);
+            // //
+            // // change = change.setNodeByKey(newBlock.key, { data: { attributes: { class: className } } });
+            //
+            // valueToUse = change.value;
+            // log('[characters:insert]: ', value);
+            onChange(change);
+          }
+
+          log('[characters:click]');
+
+          if (focus) {
+            setTimeout(() => {
+              if (editorDOM) {
+                editorDOM.focus();
+              }
+            }, 0);
+          }
+        };
+        const textNode = value.document.getTextsAtRangeAsArray(value.selection)[0];
+
+        if (textNode) {
+          const parentNode = findParentNodeInfo(value, textNode, opts);
+
+          insertDialog({ editorDOM, value: valueToUse, callback, opts, textNode, parentNode });
+        }
+      },
+    },
+    renderMark(props) {
+      if (props.mark.type === 'css') {
+        const { data } = props.mark || {};
+        const jsonData = data?.toJSON() || {};
+
+        return <span {...jsonData.attributes}>{props.children}</span>;
+      }
+    },
+  };
+
+  return plugin;
+}

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/src/plugins/customPlugin/index.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { htmlToValue } from '../../serialization';
+
+// We're possibly going to have to support content types, so starting it as an enum
+export const CONTENT_TYPE = {
+  FRAGMENT: 'FRAGMENT',
+};
+
+// We're possibly going to have to support multiple icon types, so starting it as an enum
+export const ICON_TYPE = {
+  SVG: 'SVG',
+};
+
+const getIcon = (customPluginProps) => {
+  const svg = customPluginProps.icon;
+
+  switch (customPluginProps.iconType) {
+    case ICON_TYPE.SVG:
+      return <span style={{ width: 28, height: 28 }} dangerouslySetInnerHTML={{ __html: svg }} />;
+    default:
+      return <span>{customPluginProps.iconAlt}</span>;
+  }
+};
+
+export default function CustomPlugin(type, customPluginProps) {
+  const toolbar = {
+    icon: getIcon(customPluginProps),
+    onClick: (value, onChange, getFocusedValue) => {
+      const editorDOM = document.querySelector(`[data-key="${value.document.key}"]`);
+      let valueToUse = value;
+      const callback = ({ customContent, contentType }, focus) => {
+        valueToUse = getFocusedValue();
+
+        switch (contentType) {
+          case CONTENT_TYPE.FRAGMENT:
+          default: {
+            const contentValue = htmlToValue(customContent);
+            const change = valueToUse.change().insertFragment(contentValue.document);
+
+            valueToUse = change.value;
+            onChange(change);
+
+            break;
+          }
+        }
+
+        if (focus) {
+          if (editorDOM) {
+            editorDOM.focus();
+          }
+        }
+      };
+
+      // NOTE: the emitted event (custom event named by client) will be suffixed with "PIE-"
+      window.dispatchEvent(
+        new CustomEvent(`PIE-${customPluginProps.event}`, {
+          detail: {
+            ...customPluginProps,
+            callback,
+          },
+        }),
+      );
+    },
+    supports: (node) => node.object === 'inline' && node.type === type,
+  };
+
+  return {
+    name: type,
+    toolbar,
+    renderNode(props) {
+      if (props.node.type === type) {
+        const { node } = props;
+        const { data } = node;
+        const jsonData = data.toJSON();
+        const { customContent, contentType } = jsonData;
+
+        switch (contentType) {
+          case CONTENT_TYPE.FRAGMENT:
+          default:
+            return customContent;
+        }
+      }
+    },
+  };
+}

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/src/plugins/html/icons/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = (theme) => ({
+  icon: {
+    fontFamily: 'Cerebri Sans, Arial, sans-serif',
+    fontSize: theme.typography.fontSize,
+    fontWeight: 'bold',
+    lineHeight: '14px',
+    position: 'relative',
+    whiteSpace: 'nowrap',
+  },
+});
+
+const HtmlModeIcon = ({ classes, isHtmlMode }) => (
+  <div className={classes.icon}>{isHtmlMode ? 'Exit <HTML> mode' : '<HTML>'}</div>
+);
+
+export default withStyles(styles)(HtmlModeIcon);

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/src/plugins/html/index.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import HtmlModeIcon from './icons';
+import { htmlToValue, valueToHtml } from './../../serialization';
+
+const toggleToRichText = (value, onChange, dismiss) => {
+  const plainText = value.document.text;
+  const slateValue = dismiss ? value : htmlToValue(plainText);
+
+  const change = value
+    .change()
+    .selectAll()
+    .delete()
+    .insertFragment(slateValue.document);
+  onChange(change);
+};
+
+export default function HtmlPlugin(opts) {
+  const { isHtmlMode, isEditedInHtmlMode, toggleHtmlMode, handleAlertDialog, currentValue } = opts;
+
+  const handleHtmlModeOn = (value, onChange) => {
+    const dialogProps = {
+      title: 'Warning',
+      text: 'Returning to rich text mode without saving will cause edits to be lost.',
+      onConfirmText: 'Dismiss changes',
+      onCloseText: 'Continue Editing',
+      onConfirm: () => {
+        handleAlertDialog(false);
+        toggleToRichText(currentValue, onChange, true);
+        toggleHtmlMode();
+      },
+      onClose: () => {
+        handleAlertDialog(false);
+      },
+    };
+
+    handleAlertDialog(true, dialogProps);
+  };
+
+  const handleHtmlModeOff = (value, onChange) => {
+    const change = value
+      .change()
+      .selectAll()
+      .delete()
+      .insertText(valueToHtml(value));
+    onChange(change);
+  };
+
+  return {
+    name: 'html',
+    toolbar: {
+      icon: <HtmlModeIcon isHtmlMode={isHtmlMode} />,
+      ariaLabel: 'Html editor',
+      buttonStyles: {
+        margin: '0 20px 0 auto',
+      },
+      type: 'html',
+      onClick: (value, onChange) => {
+        if (isHtmlMode) {
+          if (isEditedInHtmlMode) {
+            handleHtmlModeOn(value, onChange);
+          } else {
+            toggleToRichText(value, onChange);
+            toggleHtmlMode();
+          }
+        } else {
+          handleHtmlModeOff(value, onChange);
+          toggleHtmlMode();
+        }
+      },
+    },
+  };
+}

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/src/plugins/image/__tests__/__snapshots__/component.test.jsx.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+Array [
+  <span>
+     
+  </span>,
+  <div
+    className=""
+    style={
+      Object {
+        "justifyContent": "flex-start",
+      }
+    }
+  >
+    <div
+      className="MuiLinearProgress-root-1 MuiLinearProgress-colorPrimary-2 MuiLinearProgress-indeterminate-5"
+      mode="determinate"
+      role="progressbar"
+    >
+      <div
+        className="MuiLinearProgress-bar-11 MuiLinearProgress-barColorPrimary-12 MuiLinearProgress-bar1Indeterminate-14"
+        style={Object {}}
+      />
+      <div
+        className="MuiLinearProgress-bar-11 MuiLinearProgress-barColorPrimary-12 MuiLinearProgress-bar2Indeterminate-17"
+        style={Object {}}
+      />
+    </div>
+    <div>
+      <img
+        className=""
+        onLoad={[Function]}
+        style={
+          Object {
+            "height": "50px",
+            "objectFit": "contain",
+            "width": "50px",
+          }
+        }
+      />
+      <div
+        className="resize"
+      />
+    </div>
+  </div>,
+  <span>
+     
+  </span>,
+]
+`;

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/src/plugins/image/__tests__/__snapshots__/image-toolbar-logic.test.jsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ImageToolbar onChange renders 1`] = `
+<div>
+  <AlignmentButton
+    active={false}
+    alignment="left"
+    onClick={[Function]}
+  />
+  <AlignmentButton
+    active={false}
+    alignment="center"
+    onClick={[Function]}
+  />
+  <AlignmentButton
+    active={false}
+    alignment="right"
+    onClick={[Function]}
+  />
+  <span
+    className="undefined"
+    onMouseDown={[Function]}
+  >
+    Alt text
+  </span>
+</div>
+`;

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/src/plugins/image/__tests__/__snapshots__/image-toolbar.test.jsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="ImageToolbar-holder-1 holder"
+>
+  <button
+    aria-label="left"
+    aria-pressed={false}
+    className="RawMarkButton-button-4"
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    tabIndex={0}
+  >
+    left
+  </button>
+  <button
+    aria-label="center"
+    aria-pressed={false}
+    className="RawMarkButton-button-4"
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    tabIndex={0}
+  >
+    center
+  </button>
+  <button
+    aria-label="right"
+    aria-pressed={false}
+    className="RawMarkButton-button-4"
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    tabIndex={0}
+  >
+    right
+  </button>
+  <span
+    className="ImageToolbar-disabled-2 ImageToolbar-altButton-3"
+    onMouseDown={[Function]}
+  >
+    Alt text
+  </span>
+</div>
+`;

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/src/plugins/image/__tests__/component.test.jsx

@@ -0,0 +1,41 @@
+import { Data, Block } from 'slate';
+import { Component } from '../component';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  const node = Block.fromJSON({
+    type: 'image',
+    data: Data.create({
+      width: 50,
+      height: 50,
+    }),
+  });
+
+  const editor = {
+    value: {},
+    change: jest.fn(),
+  };
+
+  const onDelete = jest.fn();
+
+  const classes = {
+    active: 'active',
+    loading: 'loading',
+    pendingDelete: 'pendingDelete',
+  };
+
+  const tree = renderer
+    .create(<Component node={node} editor={editor} classes={classes} onDelete={onDelete} />, {
+      createNodeMock: (el) => {
+        if (el.type === 'img') {
+          return {
+            naturalWidth: 100,
+            naturalHeight: 100,
+          };
+        }
+      },
+    })
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});