@pie-lib/mask-markup 3.1.4 → 4.0.0-next.37

package/src/mask.jsx

@@ -1,174 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { get } from 'lodash-es';
-import { styled } from '@mui/material/styles';
-import { renderMath } from '@pie-lib/math-rendering';
-import { MARK_TAGS } from './serialization';
-
-const Paragraph = styled('div')(({ theme }) => ({
-  paddingTop: theme.spacing(0.5),
-  paddingBottom: theme.spacing(0.5),
-}));
-
-const Spacer = styled('span')(() => ({
-  display: 'inline-block',
-  width: '.75em',
-}));
-
-const restrictWhitespaceTypes = ['tbody', 'tr'];
-
-const addText = (parentNode, text) => {
-  const isWhitespace = text.trim() === '';
-  const parentType = parentNode && parentNode.type;
-
-  if (isWhitespace && restrictWhitespaceTypes.includes(parentType)) {
-    return undefined;
-  } else {
-    return text;
-  }
-};
-
-const getMark = (n) => {
-  const mark = n.leaves.find((leave) => get(leave, 'marks', []).length);
-
-  if (mark) {
-    return mark.marks;
-  }
-
-  return null;
-};
-
-export const renderChildren = (layout, value, onChange, rootRenderChildren, parentNode, elementType) => {
-  if (!value) {
-    return null;
-  }
-
-  const children = [];
-
-  (layout.nodes || []).forEach((n, index) => {
-    const key = n.type ? `${n.type}-${index}` : `${index}`;
-
-    if (n.isMath) {
-      children.push(
-        <span
-          dangerouslySetInnerHTML={{
-            __html: `<math displaystyle="true">${n.nodes[0].innerHTML}</math>`,
-          }}
-        />,
-      );
-      return children;
-    }
-
-    if (rootRenderChildren) {
-      const c = rootRenderChildren(n, value, onChange);
-      if (c) {
-        const isDndComponent = n.data?.dataset?.component === 'blank';
-
-        if (isDndComponent) {
-          children.push(<Spacer key={`spacer-${index}`} />);
-        }
-
-        children.push(c);
-
-        if (isDndComponent) {
-          children.push(<Spacer key={`spacer-${index}`} />);
-        }
-        return;
-      }
-    }
-
-    if (n.object === 'text') {
-      const content = n.leaves.reduce((acc, l) => {
-        const t = l.text;
-        const extraText = addText(parentNode, t);
-        return extraText ? acc + extraText : acc;
-      }, '');
-      const marks = getMark(n);
-
-      if (marks?.length > 0) {
-        const tagsToWrap = marks
-          .map((mark) => Object.keys(MARK_TAGS).find((markKey) => MARK_TAGS[markKey] === mark.type))
-          .filter(Boolean);
-
-        if (tagsToWrap.length > 0) {
-          // nest from the inside out so the first mark ends up as the outermost tag: <b><em>content</em></b>
-          children.push(
-            tagsToWrap.reduceRight((acc, Tag, tagIndex) => <Tag key={`${key}-${Tag}-${tagIndex}`}>{acc}</Tag>, content),
-          );
-        } else {
-          children.push(content);
-        }
-      } else if (content.length > 0) {
-        children.push(content);
-      }
-    } else {
-      const subNodes = renderChildren(n, value, onChange, rootRenderChildren, n, elementType);
-      if (n.type === 'p' || n.type === 'paragraph') {
-        children.push(<Paragraph key={key}>{subNodes}</Paragraph>);
-      } else {
-        const Tag = n.type;
-        if (n.nodes && n.nodes.length > 0) {
-          children.push(
-            <Tag key={key} {...n.data.attributes}>
-              {subNodes}
-            </Tag>,
-          );
-        } else {
-          children.push(<Tag key={key} {...n.data.attributes} />);
-        }
-      }
-    }
-  });
-  return children;
-};
-
-const MaskContainer = styled('div')(() => ({
-  display: 'initial',
-  '&:not(.MathJax) table': {
-    borderCollapse: 'collapse',
-  },
-  // align table content to left as per STAR requirement PD-3687
-  '&:not(.MathJax) table td, &:not(.MathJax) table th': {
-    padding: '8px 12px',
-    textAlign: 'left',
-  },
-}));
-
-/**
- * Renders a layout that uses the slate.js Value model structure.
- */
-export default class Mask extends React.Component {
-  constructor(props) {
-    super(props);
-    this.internalContainerRef = React.createRef();
-  }
-
-  static propTypes = {
-    renderChildren: PropTypes.func,
-    layout: PropTypes.object,
-    value: PropTypes.object,
-    onChange: PropTypes.func,
-    elementType: PropTypes.string,
-    containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })]),
-  };
-
-  componentDidMount() {
-    const containerRef = this.props.containerRef || this.internalContainerRef;
-    if (containerRef.current && typeof renderMath === 'function') {
-      renderMath(containerRef.current);
-    }
-  }
-
-  handleChange = (id, value) => {
-    const data = { ...this.props.value, [id]: value };
-    this.props.onChange(data);
-  };
-
-  render() {
-    const { value, layout, elementType, containerRef } = this.props;
-    const children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);
-    const ref = containerRef || this.internalContainerRef;
-
-    return <MaskContainer ref={ref}>{children}</MaskContainer>;
-  }
-}

package/src/serialization.js

@@ -1,260 +0,0 @@
-import { object as toStyleObject } from 'to-style';
-import debug from 'debug';
-
-const log = debug('@pie-lib:mask-markup:serialization');
-
-const INLINE = ['span'];
-const MARK = ['em', 'strong', 'u'];
-const TEXT_NODE = 3;
-const COMMENT_NODE = 8;
-const ELEMENT_NODE = 1;
-
-const attr = (el) => {
-  if (!el.attributes || el.attributes.length <= 0) {
-    return undefined;
-  }
-
-  const out = {};
-  let i;
-
-  for (i = 0; i < el.attributes.length; i++) {
-    const a = el.attributes[i];
-
-    out[a.name] = a.value;
-  }
-
-  return out;
-};
-
-const getObject = (type) => {
-  if (INLINE.includes(type)) {
-    return 'inline';
-  } else if (MARK.includes(type)) {
-    return 'mark';
-  }
-  return 'block';
-};
-
-export const parseStyleString = (s) => {
-  const regex = /([\w-]*)\s*:\s*([^;]*)/g;
-  let match;
-  const result = {};
-  while ((match = regex.exec(s))) {
-    result[match[1]] = match[2].trim();
-  }
-  return result;
-};
-
-export const reactAttributes = (o) => toStyleObject(o, { camelize: true, addUnits: false });
-
-const handleStyles = (el, attribute) => {
-  const styleString = el.getAttribute(attribute);
-
-  return reactAttributes(parseStyleString(styleString));
-};
-
-const handleClass = (el, acc, attribute) => {
-  const classNames = el.getAttribute(attribute);
-
-  delete acc.class;
-
-  return classNames;
-};
-
-const attributesToMap = (el) => (acc, attribute) => {
-  if (!el.getAttribute) {
-    return acc;
-  }
-
-  const value = el.getAttribute(attribute);
-
-  if (value) {
-    switch (attribute) {
-      case 'style':
-        acc.style = handleStyles(el, attribute);
-        break;
-      case 'class':
-        acc.className = handleClass(el, acc, attribute);
-        break;
-      default:
-        acc[attribute] = el.getAttribute(attribute);
-        break;
-    }
-  }
-
-  return acc;
-};
-
-const attributes = ['border', 'class', 'style'];
-
-/**
- * Tags to marks.
- *
- * @type {Object}
- */
-
-export const MARK_TAGS = {
-  b: 'bold',
-  em: 'italic',
-  u: 'underline',
-  s: 'strikethrough',
-  code: 'code',
-  strong: 'strong',
-};
-
-/**
- * Recursively process DOM nodes and convert them to Slate JSON format
- */
-const processNode = (node, marks = []) => {
-  // Skip comment nodes
-  if (node.nodeType === COMMENT_NODE) {
-    return null;
-  }
-
-  // Handle text nodes
-  if (node.nodeType === TEXT_NODE) {
-    const text = node.textContent;
-    const leaf = { text };
-
-    if (marks.length > 0) {
-      leaf.marks = marks.map((m) => ({ type: m, data: undefined }));
-    }
-
-    return {
-      object: 'text',
-      leaves: [leaf],
-    };
-  }
-
-  // Handle element nodes
-  if (node.nodeType === ELEMENT_NODE) {
-    const type = node.tagName.toLowerCase();
-
-    // Check if this is a mark tag
-    const markType = MARK_TAGS[type];
-    if (markType) {
-      log('[deserialize] mark: ', markType);
-      // Process children with this mark added and return them flattened
-      const childNodes = processNodes(node.childNodes, [...marks, markType]);
-      // Return an array indicator with the nodes (will be flattened by parent)
-      return { _flatten: true, nodes: childNodes };
-    }
-
-    // Handle math elements specially
-    if (type === 'math') {
-      return {
-        isMath: true,
-        nodes: [node],
-      };
-    }
-
-    // Process regular elements
-    const normalAttrs = attr(node) || {};
-
-    if (type === 'audio' && normalAttrs.controls === '') {
-      normalAttrs.controls = true;
-    }
-
-    const allAttrs = attributes.reduce(attributesToMap(node), { ...normalAttrs });
-    const object = getObject(type);
-
-    const childNodes = processNodes(node.childNodes, marks);
-
-    return {
-      object,
-      type,
-      data: { dataset: { ...node.dataset }, attributes: { ...allAttrs } },
-      nodes: childNodes,
-    };
-  }
-
-  return null;
-};
-
-/**
- * Process a NodeList and convert to array of Slate nodes
- */
-const processNodes = (nodeList, marks = []) => {
-  const nodes = [];
-  for (let i = 0; i < nodeList.length; i++) {
-    const result = processNode(nodeList[i], marks);
-    if (result !== null) {
-      // Handle flattening for mark nodes
-      if (result._flatten && result.nodes) {
-        nodes.push(...result.nodes);
-      } else {
-        nodes.push(result);
-      }
-    }
-  }
-  return nodes;
-};
-
-/**
- * Deserialize HTML string to Slate JSON format
- */
-export const deserialize = (htmlString) => {
-  // Handle empty or whitespace-only strings
-  if (!htmlString || !htmlString.trim()) {
-    return {
-      object: 'value',
-      document: {
-        object: 'document',
-        data: {},
-        nodes: [
-          {
-            object: 'block',
-            type: 'span',
-            data: {},
-            isVoid: false,
-            nodes: [],
-          },
-        ],
-      },
-    };
-  }
-
-  // Use DOMParser to parse the HTML
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(htmlString, 'text/html');
-
-  // Process all nodes in the body
-  let nodes = processNodes(doc.body.childNodes);
-
-  // If we only have text nodes (no block elements), wrap in default span block
-  const hasBlockElements = nodes.some((node) => node.object === 'block' || node.object === 'inline');
-
-  if (!hasBlockElements && nodes.length > 0) {
-    nodes = [
-      {
-        object: 'block',
-        type: 'span',
-        data: {},
-        isVoid: false,
-        nodes: nodes,
-      },
-    ];
-  }
-
-  // If no nodes were produced, add a default span block
-  if (nodes.length === 0) {
-    nodes = [
-      {
-        object: 'block',
-        type: 'span',
-        data: {},
-        isVoid: false,
-        nodes: [],
-      },
-    ];
-  }
-
-  return {
-    object: 'value',
-    document: {
-      object: 'document',
-      data: {},
-      nodes,
-    },
-  };
-};

package/src/with-mask.jsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Mask from './mask';
-import componentize from './componentize';
-import { deserialize } from './serialization';
-
-export const buildLayoutFromMarkup = (markup, type) => {
-  const { markup: processed } = componentize(markup, type);
-  const value = deserialize(processed);
-  return value.document;
-};
-
-export const withMask = (type, renderChildren) => {
-  return class WithMask extends React.Component {
-    static propTypes = {
-      /**
-       * At the start we'll probably work with markup
-       */
-      markup: PropTypes.string,
-      /**
-       * Once we start authoring, it may make sense for use to us layout, which will be a simple js object that maps to `slate.Value`.
-       */
-      layout: PropTypes.object,
-      value: PropTypes.object,
-      onChange: PropTypes.func,
-      customMarkMarkupComponent: PropTypes.func,
-      elementType: PropTypes.string,
-    };
-
-    constructor(props) {
-      super(props);
-      this.containerRef = React.createRef();
-    }
-
-    componentDidUpdate(prevProps) {
-      if (this.props.markup !== prevProps.markup) {
-        const domNode = this.containerRef.current;
-        const mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled="true"]');
-
-        // Clean up for fresh MathJax processing
-        (mathElements || []).forEach((el) => {
-          // Remove the MathJax container to allow for clean updates
-          const mjxContainer = el.querySelector('mjx-container');
-
-          if (mjxContainer) {
-            el.removeChild(mjxContainer);
-          }
-
-          // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly
-          const latexCode = el.getAttribute('data-raw');
-          el.innerHTML = latexCode;
-
-          // Remove the attribute to signal that MathJax should reprocess this element
-          el.removeAttribute('data-math-handled');
-        });
-      }
-    }
-
-    render() {
-      const { markup, layout, value, onChange, elementType } = this.props;
-
-      const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);
-      return (
-        <Mask
-          containerRef={this.containerRef}
-          elementType={elementType}
-          layout={maskLayout}
-          value={value}
-          onChange={onChange}
-          renderChildren={renderChildren(this.props)}
-        />
-      );
-    }
-  };
-};