@pie-lib/mask-markup 0.1.0

package/src/serialization.ts

@@ -0,0 +1,270 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/mask-markup/src/serialization.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+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.tsx

@@ -0,0 +1,85 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/mask-markup/src/with-mask.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Mask from './mask.js';
+import componentize from './componentize.js';
+import { deserialize } from './serialization.js';
+
+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)}
+        />
+      );
+    }
+  };
+};