@pie-lib/editable-html-tip-tap 2.2.0-beta.7 → 3.0.0-next.35

package/src/extensions/css.js

@@ -1,233 +0,0 @@
-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 any span that carries a class attribute
-    // so that pre-existing spans are preserved when loading content
-    return [
-      {
-        tag: 'span[class]',
-        getAttrs: (el) => {
-          const cls = el.getAttribute('class') || '';
-
-          if (!cls) {
-            return false;
-          }
-
-          const allowedClasses = (this.options && this.options.classes) || [];
-
-          if (allowedClasses.length > 0) {
-            const match = this.options.classes.find((name) => cls.includes(name));
-
-            return match ? { class: match } : false;
-          }
-
-          return { class: cls };
-        },
-      },
-    ];
-  },
-
-  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

@@ -1,78 +0,0 @@
-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

@@ -1,86 +0,0 @@
-// 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

@@ -1,47 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

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