@pie-lib/editable-html-tip-tap 1.0.1 → 1.0.3

package/src/plugins/css/index.jsx

@@ -1,340 +0,0 @@
-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);
-
-      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/src/plugins/customPlugin/index.jsx

@@ -1,85 +0,0 @@
-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/src/plugins/html/icons/index.jsx

@@ -1,19 +0,0 @@
-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/src/plugins/html/index.jsx

@@ -1,72 +0,0 @@
-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/src/plugins/image/__tests__/__snapshots__/component.test.jsx.snap

@@ -1,51 +0,0 @@
-// 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/src/plugins/image/__tests__/__snapshots__/image-toolbar-logic.test.jsx.snap

@@ -1,27 +0,0 @@
-// 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/src/plugins/image/__tests__/__snapshots__/image-toolbar.test.jsx.snap

@@ -1,44 +0,0 @@
-// 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/src/plugins/image/__tests__/component.test.jsx

@@ -1,41 +0,0 @@
-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();
-});