@pie-lib/editable-html-tip-tap 2.1.2-next.31 → 2.1.2-next.36

package/src/extensions/css.js

@@ -0,0 +1,220 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Mark, mergeAttributes } from '@tiptap/core';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+
+export const removeDialogs = () => {
+  const prevDialogs = document.querySelectorAll('.insert-css-dialog');
+
+  prevDialogs.forEach((s) => s.remove());
+};
+
+const insertDialog = ({ editor, callback, opts, selectedText, parentNode }) => {
+  const editorDOM = editor.options.element;
+  const newEl = document.createElement('div');
+  const { selection } = editor.state;
+
+  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 parentNodeClass = parentNode?.attrs.class;
+  const createHTML = (name) => {
+    let html = `<span class="${name}">${selectedText}</span>`;
+
+    if (parentNode) {
+      let tag = 'span';
+
+      if (parentNode?.object === 'inline') {
+        tag = 'span';
+      }
+
+      if (parentNode?.object === 'block') {
+        tag = 'div';
+      }
+
+      html = `<${tag} class="${parentNodeClass}">${parentNode.text.slice(
+        0,
+        selection.$anchor.textOffset,
+      )}${html}${parentNode.text.slice(selection.$head.textOffset)}</${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 = editor.view.nodeDOM(editor.state.selection.from);
+    const cursorNode = cursorItem?.parentNode;
+
+    if (cursorNode) {
+      const bodyRect = editorDOM.parentElement.parentElement.parentElement.getBoundingClientRect();
+      const boundRect = cursorNode.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) + cursorNode.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);
+    }
+  });
+};
+
+export const CSSMark = Mark.create({
+  name: 'cssmark',
+
+  addOptions() {
+    return {
+      classes: [],
+    };
+  },
+
+  addAttributes() {
+    return {
+      class: {
+        default: null,
+        parseHTML: (el) => el.getAttribute('class'),
+        renderHTML: (attributes) => {
+          if (!attributes.class) return {};
+          return { class: attributes.class };
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    // Any span with a class that matches one of allowed classes
+    return [
+      {
+        tag: 'span[class]',
+        getAttrs: (el) => {
+          const cls = el.getAttribute('class') || '';
+          const match = this.options.classes.find((name) => cls.includes(name));
+          return match ? { class: match } : false;
+        },
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['span', mergeAttributes(HTMLAttributes), 0];
+  },
+
+  addCommands() {
+    return {
+      setCSSClass:
+        (className) =>
+        ({ commands }) => {
+          return commands.setMark(this.name, { class: className });
+        },
+
+      unsetCSSClass:
+        () =>
+        ({ commands }) => {
+          return commands.unsetMark(this.name);
+        },
+
+      openCSSClassDialog:
+        () =>
+        ({ editor }) => {
+          insertDialog({
+            editor,
+            selectedText: editor.state.doc.textBetween(editor.state.selection.from, editor.state.selection.to),
+            parentNode: editor.state.selection.$from.nodeAfter,
+            opts: this.options.extraCSSRules,
+            callback: (className) => {
+              if (className) {
+                editor.chain().focus().setCSSClass(className).run();
+              }
+            },
+          });
+        },
+    };
+  },
+});

package/src/extensions/custom-toolbar-wrapper.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Delete from '@mui/icons-material/Delete';
+import { PIE_TOOLBAR__CLASS } from '../constants';
+import { styled } from '@mui/material/styles';
+import { DoneButton } from '../components/common/done-button';
+
+const StyledToolbar = styled('div', {
+  shouldForwardProp: (prop) => !['showDone', 'toolbarAlignment', 'isFocused', 'autoWidth', 'isHidden'].includes(prop),
+})(({ showDone, toolbarAlignment, isFocused, autoWidth, isHidden }) => ({
+  position: 'absolute',
+  zIndex: 10,
+  cursor: 'pointer',
+  justifyContent: 'space-between',
+  background: 'var(--editable-html-toolbar-bg, #efefef)',
+  minWidth: showDone ? '280px' : '265px',
+  margin: '5px 0 0 0',
+  padding: '2px',
+  boxShadow:
+    '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
+  boxSizing: 'border-box',
+  display: 'flex',
+  opacity: 1,
+  ...(toolbarAlignment === 'right' && {
+    right: 0,
+  }),
+  ...(autoWidth
+    ? {
+        width: 'auto',
+      }
+    : {
+        width: '100%',
+      }),
+  ...(isHidden && {
+    visibility: 'hidden',
+  }),
+}));
+
+const StyledIconButton = styled(IconButton)({
+  width: '28px',
+  height: '28px',
+  padding: '4px',
+  verticalAlign: 'top',
+});
+
+const SharedContainer = styled('div')({
+  display: 'flex',
+});
+
+function CustomToolbarWrapper(props) {
+  const { children, deletable, toolbarOpts, autoWidth, isFocused, doneButtonRef, onDelete, showDone, onDone, style } = props;
+  const customStyles = toolbarOpts.minWidth !== undefined ? { minWidth: toolbarOpts.minWidth } : {};
+
+  return (
+    <StyledToolbar
+      className={PIE_TOOLBAR__CLASS}
+      showDone={showDone}
+      toolbarAlignment={toolbarOpts.alignment}
+      isFocused={toolbarOpts.alwaysVisible || isFocused}
+      autoWidth={autoWidth}
+      isHidden={toolbarOpts.isHidden === true}
+      style={{ ...customStyles, ...style }}
+    >
+      {children}
+
+      <SharedContainer>
+        {deletable && (
+          <StyledIconButton aria-label="Delete" onMouseDown={(e) => onDelete?.(e)}>
+            <Delete />
+          </StyledIconButton>
+        )}
+        {showDone && <DoneButton doneButtonRef={doneButtonRef} onClick={onDone} />}
+      </SharedContainer>
+    </StyledToolbar>
+  );
+}
+
+export default CustomToolbarWrapper;

package/src/extensions/div-node.js

@@ -0,0 +1,86 @@
+// DivNode.ts
+import { Node } from '@tiptap/core';
+
+export const DivNode = Node.create({
+  name: 'div',
+  group: 'block',
+  content: 'inline*',
+
+  parseHTML() {
+    return [{ tag: 'div' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', HTMLAttributes, 0];
+  },
+
+  addKeyboardShortcuts() {
+    const isInsideListItem = ($from) => {
+      for (let depth = $from.depth; depth >= 0; depth -= 1) {
+        if ($from.node(depth).type.name === 'listItem') {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    return {
+      Enter: () => {
+        const { state } = this.editor;
+        const { $from } = state.selection;
+
+        if ($from.parent.type.name !== 'div') {
+          return false;
+        }
+        if (isInsideListItem($from)) {
+          return false;
+        }
+
+        return this.editor
+          .chain()
+          .focus()
+          .setNode('paragraph') // current div becomes <p>
+          .splitBlock() // create another <p>
+          .run();
+      },
+
+      // When the cursor is in a div and the user presses Backspace,
+      // ProseMirror's default handler may try to join/delete the block node
+      // once it becomes empty. That triggers the Enter shortcut above
+      // (div → p conversion + split), making it look like a new line is
+      // inserted instead of deleting.
+      // We handle two cases explicitly:
+      //  1. The div already IS empty → swallow the event (nothing to delete).
+      //  2. The div has exactly ONE character left → delete just that character
+      //     using a precise transaction, then stop. This prevents ProseMirror
+      //     from following up with a block-join that triggers the Enter handler.
+      Backspace: () => {
+        const { state } = this.editor;
+        const { $from, empty: selectionEmpty } = state.selection;
+
+        if ($from.parent.type.name !== 'div') {
+          return false;
+        }
+
+        if (!selectionEmpty) {
+          return false;
+        }
+
+        const parentText = $from.parent.textContent;
+
+        if (parentText.length === 0) {
+          return state.doc.childCount === 1 ? true : false;
+        }
+
+        if (parentText.length === 1 && $from.parentOffset === 1) {
+          const { tr } = state;
+          tr.delete($from.pos - 1, $from.pos);
+          this.editor.view.dispatch(tr);
+          return true;
+        }
+
+        return false;
+      },
+    };
+  },
+});

package/src/extensions/ensure-empty-root-div.js

@@ -0,0 +1,47 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+/**
+ * After ProseMirror repairs an empty document, it often inserts a `paragraph`.
+ * We want a lone empty top-level block to be `div` (DivNode) so typing stays `<div>A</div>`.
+ */
+export const EnsureEmptyRootIsDiv = Extension.create({
+  name: 'ensureEmptyRootIsDiv',
+
+  addProseMirrorPlugins() {
+    const key = new PluginKey(this.name);
+
+    return [
+      new Plugin({
+        key,
+        appendTransaction(transactions, _oldState, newState) {
+          if (!transactions.some((tr) => tr.docChanged)) {
+            return null;
+          }
+
+          const { doc } = newState;
+          if (doc.childCount !== 1) {
+            return null;
+          }
+
+          const first = doc.firstChild;
+          if (first.type.name !== 'paragraph' || first.content.size > 0) {
+            return null;
+          }
+
+          const divType = newState.schema.nodes.div;
+          if (!divType) {
+            return null;
+          }
+
+          // Top-level content positions are 0 .. doc.content.size. The first block spans
+          // [0, first.nodeSize). Using start=1 replaces the wrong slice and can leave the
+          // document inconsistent after a full delete (Cmd+A, Backspace).
+          const start = 0;
+          const end = first.nodeSize;
+          return newState.tr.replaceWith(start, end, divType.create());
+        },
+      }),
+    ];
+  },
+});

package/src/extensions/ensure-list-item-content-is-div.js

@@ -0,0 +1,62 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+/**
+ * Some list operations preserve/create `paragraph` children in `listItem`.
+ * Normalize direct `listItem > paragraph` children into `div` so list content
+ * stays consistent with DivNode-based editing.
+ */
+export const EnsureListItemContentIsDiv = Extension.create({
+  name: 'ensureListItemContentIsDiv',
+
+  addProseMirrorPlugins() {
+    const key = new PluginKey(this.name);
+
+    return [
+      new Plugin({
+        key,
+        appendTransaction(transactions, _oldState, newState) {
+          if (!transactions.some((tr) => tr.docChanged)) {
+            return null;
+          }
+
+          const { doc, schema } = newState;
+          const divType = schema.nodes.div;
+          if (!divType) {
+            return null;
+          }
+
+          const positionsToConvert = [];
+
+          doc.descendants((node, pos) => {
+            if (node.type.name !== 'listItem') {
+              return;
+            }
+
+            let childOffset = 1;
+            node.forEach((child) => {
+              if (child.type.name === 'paragraph') {
+                positionsToConvert.push({
+                  pos: pos + childOffset,
+                  attrs: child.attrs,
+                });
+              }
+              childOffset += child.nodeSize;
+            });
+          });
+
+          if (positionsToConvert.length === 0) {
+            return null;
+          }
+
+          const tr = newState.tr;
+          positionsToConvert
+            .sort((a, b) => b.pos - a.pos)
+            .forEach(({ pos, attrs }) => tr.setNodeMarkup(pos, divType, attrs));
+
+          return tr;
+        },
+      }),
+    ];
+  },
+});

package/src/extensions/extended-list-item.js

@@ -0,0 +1,10 @@
+import { ListItem } from '@tiptap/extension-list-item';
+
+/**
+ * Default list items use `paragraph block*`, so empty/new items become `<p>`.
+ * Prefer `div` first to keep consistency with DivNode at root and table cells.
+ */
+export const ExtendedListItem = ListItem.extend({
+  content:
+    '(div | paragraph | heading | bulletList | orderedList | blockquote | codeBlock | horizontalRule | image | imageUploadNode)+',
+});

package/src/extensions/extended-table-cell.js

@@ -0,0 +1,19 @@
+import { TableCell } from '@tiptap/extension-table-cell';
+import { TableHeader } from '@tiptap/extension-table-header';
+
+/**
+ * Default table cells use ProseMirror `createAndFill()`, which prefers the first
+ * block type allowed by the content expression. Stock cells use `block+`, so
+ * `paragraph` wins. Listing `div` first matches the editor default for plain text
+ * (see DivNode) while still allowing other blocks (lists, headings, images, …).
+ */
+const TABLE_CELL_BLOCK_CONTENT =
+  '(div | paragraph | heading | bulletList | orderedList | blockquote | codeBlock | horizontalRule | image | imageUploadNode)+';
+
+export const ExtendedTableCell = TableCell.extend({
+  content: TABLE_CELL_BLOCK_CONTENT,
+});
+
+export const ExtendedTableHeader = TableHeader.extend({
+  content: TABLE_CELL_BLOCK_CONTENT,
+});

package/src/extensions/extended-table.js

@@ -0,0 +1,60 @@
+import { Table, TableView } from '@tiptap/extension-table';
+
+const applyPresentationToTableElement = (table, attrs) => {
+  const border = attrs?.border != null && attrs.border !== '' ? attrs.border : '1';
+
+  table.setAttribute('border', border);
+  table.style.setProperty('color', 'var(--pie-text, black)');
+  table.style.setProperty('background-color', 'var(--pie-background, rgba(255, 255, 255))');
+};
+
+class ExtendedTableView extends TableView {
+  constructor(node, cellMinWidth, view) {
+    super(node, cellMinWidth, view);
+    applyPresentationToTableElement(this.table, node.attrs);
+  }
+
+  update(node) {
+    const ok = super.update(node);
+
+    if (ok) {
+      applyPresentationToTableElement(this.table, node.attrs);
+    }
+
+    return ok;
+  }
+}
+
+const ExtendedTable = Table.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      // ProseMirror's default table DOM does not prune extra <col> nodes when a column
+      // is removed; TableView (via column resizing) does.
+      resizable: true,
+      handleWidth: 0,
+      View: ExtendedTableView,
+    };
+  },
+  addAttributes() {
+    return {
+      border: { default: '1' },
+    };
+  },
+  renderHTML(props) {
+    const originalTable = this.parent(props);
+    const { border } = props.HTMLAttributes;
+
+    const previousStyle = `${originalTable[1].style}${originalTable[1].style.match(/.*; */) ? '' : ';'}`;
+
+    originalTable[1].style = `${previousStyle}
+    color: var(--pie-text, black);
+    background-color: var(--pie-background, rgba(255, 255, 255))`;
+    originalTable[1].border = border ? border : '1';
+
+    return originalTable;
+  },
+});
+
+export { applyPresentationToTableElement, ExtendedTableView };
+export default ExtendedTable;

package/src/extensions/heading-paragraph.js

@@ -0,0 +1,53 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+
+/**
+ * HeadingParagraph extension
+ *
+ * Renders as <p data-heading="heading1"> in the HTML output instead of <h3>.
+ * This provides semantic heading styling without using a native heading element,
+ * as required by PIE's accessibility conventions.
+ */
+export const HeadingParagraph = Node.create({
+  name: 'headingParagraph',
+
+  group: 'block',
+
+  content: 'inline*',
+
+  defining: true,
+
+  addAttributes() {
+    return {
+      'data-heading': {
+        default: 'heading1',
+        parseHTML: (element) => element.getAttribute('data-heading'),
+        renderHTML: (attributes) => ({
+          'data-heading': attributes['data-heading'],
+        }),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      { tag: 'p[data-heading]' },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['p', mergeAttributes(HTMLAttributes), 0];
+  },
+
+  addCommands() {
+    return {
+      toggleHeadingParagraph:
+        () =>
+        ({ commands, editor }) => {
+          if (editor.isActive('headingParagraph')) {
+            return commands.setNode('paragraph');
+          }
+          return commands.setNode('headingParagraph', { 'data-heading': 'heading1' });
+        },
+    };
+  },
+});