@pie-lib/editable-html-tip-tap 2.2.0-beta.9 → 3.0.0-next.36

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' });
-        },
-    };
-  },
-});

package/src/extensions/image-component.jsx

@@ -1,340 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import isEqual from 'lodash-es/isEqual';
-import debug from 'debug';
-import LinearProgress from '@mui/material/LinearProgress';
-import { styled } from '@mui/material/styles';
-import { NodeViewWrapper } from '@tiptap/react';
-import ReactDOM from 'react-dom';
-import InsertImageHandler from '../components/image/InsertImageHandler';
-import ImageToolbar from '../components/image/ImageToolbar';
-import CustomToolbarWrapper from './custom-toolbar-wrapper';
-
-const log = debug('@pie-lib:editable-html:plugins:image:component');
-
-const StyledProgress = styled(LinearProgress, {
-  shouldForwardProp: (prop) => prop !== 'hideProgress',
-})(({ hideProgress }) => ({
-  position: 'absolute',
-  left: '0',
-  width: 'fit-content',
-  top: '0%',
-  transition: 'opacity 200ms linear',
-  ...(hideProgress && {
-    opacity: 0,
-  }),
-}));
-
-const StyledRoot = styled('div', {
-  shouldForwardProp: (prop) => !['active', 'loading', 'pendingDelete'].includes(prop),
-})(({ loading, pendingDelete }) => ({
-  position: 'relative',
-  display: 'flex',
-  transition: 'opacity 200ms linear',
-  ...(loading && {
-    opacity: 0.3,
-  }),
-  ...(pendingDelete && {
-    opacity: 0.3,
-  }),
-}));
-
-const StyledImageContainer = styled('div')(({ theme }) => ({
-  position: 'relative',
-  width: 'fit-content',
-  display: 'flex',
-  alignItems: 'center',
-  '&&:hover > .resize': {
-    display: 'block',
-  },
-}));
-
-const StyledImage = styled('img', {
-  shouldForwardProp: (prop) => prop !== 'active',
-})(({ theme, active }) => ({
-  border: active ? `solid 1px ${theme.palette.primary.main}` : 'solid 1px transparent',
-}));
-
-const StyledResize = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.primary.main,
-  cursor: 'col-resize',
-  height: '35px',
-  width: '5px',
-  borderRadius: 8,
-  marginLeft: '5px',
-  marginRight: '10px',
-  display: 'none',
-}));
-
-const sizePx = (s) => (s ? `${s}px` : 'calc(20px)');
-
-function ImageComponent(props) {
-  const {
-    node,
-    editor,
-    attributes,
-    onFocus,
-    getPos,
-    selected,
-    options,
-    maxImageWidth = 700,
-    maxImageHeight = 900,
-  } = props;
-  const { alt } = node.attrs;
-  const pos = getPos();
-
-  const selFrom = editor.state.selection.from;
-  const selTo = editor.state.selection.to;
-  const onlyThisNodeSelected = useMemo(() => selFrom + node.nodeSize === selTo, [selFrom, selTo, node.nodeSize]);
-
-  const [showToolbar, setShowToolbar] = useState(false);
-
-  const latestNodeRef = useRef(node);
-  const imgRef = useRef(null);
-  const resizeRef = useRef(null);
-  const toolbarRef = useRef(null);
-
-  const getPercentFromWidth = useCallback((width) => {
-    const floored = (width / imgRef.current.naturalWidth) * 4;
-    return parseInt(floored.toFixed(0) * 25, 10);
-  }, []);
-
-  const findNodePos = useCallback(() => {
-    const key = latestNodeRef.current.attrs.nodeKey;
-    let found = null;
-    editor.state.doc.descendants((n, pos) => {
-      if (found !== null) return false;
-      if (n.type.name === 'imageUploadNode' && n.attrs.nodeKey === key) {
-        found = pos;
-        return false;
-      }
-    });
-    return found;
-  }, [editor]);
-
-  // dispatch an attribute update targeted precisely at this node by nodeKey.
-  const updateThisNode = useCallback(
-    (newAttrs) => {
-      const nodePos = findNodePos();
-      if (nodePos === null) return;
-      const currentNode = editor.state.doc.nodeAt(nodePos);
-      if (!currentNode) return;
-      editor.view.dispatch(editor.state.tr.setNodeMarkup(nodePos, undefined, { ...currentNode.attrs, ...newAttrs }));
-    },
-    [editor, findNodePos],
-  );
-
-  const applySizeData = useCallback(() => {
-    if (!node.attrs.width || !imgRef.current || !imgRef.current.naturalWidth) return;
-    const resizePercent = getPercentFromWidth(node.attrs.width);
-    if (node.attrs.resizePercent === resizePercent) return;
-    updateThisNode({ resizePercent });
-  }, [node.attrs.width, node.attrs.resizePercent, getPercentFromWidth, updateThisNode]);
-
-  // keep ref in sync with latest node
-  useEffect(() => {
-    latestNodeRef.current = { ...node, pos };
-  }, [node, pos]);
-
-  useEffect(() => {
-    if (selected) {
-      if (onlyThisNodeSelected && editor.isEditable) {
-        // Only open the upload UI for a fresh placeholder. Remounting after tab switch
-        // would otherwise call insertImageRequested again and reopen the file modal.
-        const hasImageSrc = String(node.attrs?.src ?? '').trim();
-
-        if (!hasImageSrc && options.imageHandling?.insertImageRequested) {
-          options.imageHandling.insertImageRequested(
-            editor,
-            [node, pos],
-            (finish) => new InsertImageHandler(editor, [node, pos], finish),
-          );
-        }
-
-        setShowToolbar(selected);
-      }
-    } else {
-      setShowToolbar(selected);
-    }
-  }, [onlyThisNodeSelected, selected, editor.isEditable]);
-
-  useEffect(() => {
-    applySizeData();
-
-    const resizeHandle = resizeRef?.current;
-
-    if (resizeHandle && editor.isEditable) {
-      resizeHandle.addEventListener('mousedown', initResize, false);
-    }
-
-    return () => {
-      if (resizeHandle) {
-        resizeHandle.removeEventListener('mousedown', initResize, false);
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    applySizeData();
-  });
-
-  const loadImage = useCallback(() => {
-    const box = imgRef.current;
-    if (!box) return;
-
-    if (!box.style.width || box.style.width === 'calc(20px)') {
-      const w = Math.min(box.naturalWidth, maxImageWidth);
-      const h = Math.min(box.naturalHeight, maxImageHeight);
-
-      box.style.width = `${w}px`;
-      box.style.height = `${h}px`;
-
-      const update = { width: w, height: h };
-      if (!isEqual(update, { width: node.attrs.width, height: node.attrs.height })) {
-        updateThisNode(update);
-      }
-    }
-  }, [node.attrs.width, node.attrs.height, maxImageWidth, maxImageHeight, updateThisNode]);
-
-  const updateAspect = (initial, next, keepAspect = true, resizeType) => {
-    if (keepAspect) {
-      const ratio = initial.width / initial.height;
-      if (resizeType === 'height') return { width: next.height * ratio, height: next.height };
-      return { width: next.width, height: next.width / ratio };
-    }
-    return next;
-  };
-
-  const startResize = useCallback(
-    (e) => {
-      const box = imgRef.current;
-      if (!box) return;
-
-      const bounds = e.target.getBoundingClientRect();
-      const initial = { width: box.naturalWidth, height: box.naturalHeight };
-
-      const next = updateAspect(initial, {
-        width: e.clientX - bounds.left,
-        height: e.clientY - bounds.top,
-      });
-
-      if (next.width > 50 && next.height > 50 && next.width <= 700 && next.height <= 900) {
-        box.style.width = `${next.width}px`;
-        box.style.height = `${next.height}px`;
-
-        updateThisNode({ width: next.width, height: next.height });
-      }
-    },
-    [editor, updateThisNode],
-  );
-
-  const onChange = useCallback(
-    (newValues) => {
-      updateThisNode(newValues);
-    },
-    [editor, updateThisNode],
-  );
-
-  const stopResize = useCallback(() => {
-    window.removeEventListener('mousemove', startResize);
-    window.removeEventListener('mouseup', stopResize);
-  }, [startResize]);
-
-  const initResize = useCallback(() => {
-    window.addEventListener('mousemove', startResize);
-    window.addEventListener('mouseup', stopResize);
-  }, [startResize, stopResize]);
-
-  const style = {
-    width: sizePx(node.attrs.width),
-    height: sizePx(node.attrs.height),
-    objectFit: 'contain',
-  };
-
-  const flexAlign = { left: 'flex-start', center: 'center', right: 'flex-end' }[node.attrs.alignment] || 'flex-start';
-
-  return (
-    <NodeViewWrapper>
-      <StyledRoot
-        onFocus={onFocus}
-        loading={!node.attrs.loaded}
-        pendingDelete={node.attrs.deleteStatus === 'pending'}
-        style={{ justifyContent: flexAlign }}
-      >
-        <StyledProgress mode="determinate" value={node.attrs.percent || 0} hideProgress={node.attrs.loaded} />
-
-        <StyledImageContainer onDragStart={(e) => e.preventDefault()}>
-          <StyledImage
-            {...attributes}
-            active={selected && node.attrs.loaded}
-            draggable={false}
-            ref={imgRef}
-            src={node.attrs.src}
-            style={style}
-            onLoad={loadImage}
-            alt={node.attrs.alt}
-          />
-          <StyledResize ref={resizeRef} className="resize" style={{ display: editor.isEditable ? undefined : 'none' }} />
-        </StyledImageContainer>
-      </StyledRoot>
-
-      {showToolbar &&
-        editor._tiptapContainerEl &&
-        ReactDOM.createPortal(
-          <div
-            ref={toolbarRef}
-            style={{
-              zIndex: 20,
-              background: 'var(--editable-html-toolbar-bg, #efefef)',
-              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)',
-              width: '100%',
-            }}
-          >
-            <CustomToolbarWrapper
-              showDone
-              deletable
-              toolbarOpts={options.toolbarOpts || {}}
-              onDelete={() => {
-                const nodePos = findNodePos();
-                if (nodePos === null) return;
-
-                options.imageHandling?.onDelete?.(latestNodeRef.current);
-
-                editor.view.dispatch(
-                  editor.state.tr.delete(nodePos, nodePos + editor.state.doc.nodeAt(nodePos).nodeSize),
-                );
-                setShowToolbar(false);
-                editor.commands.focus();
-              }}
-              onDone={() => {
-                setShowToolbar(false);
-                options.imageHandling?.onDone?.(editor);
-                editor.commands.focus('end');
-              }}
-            >
-              <ImageToolbar
-                disableImageAlignmentButtons={options.imageHandling?.disableImageAlignmentButtons}
-                alt={node.attrs.alt}
-                imageLoaded={node.attrs.loaded}
-                alignment={node.attrs.alignment || 'left'}
-                onChange={onChange}
-              />
-            </CustomToolbarWrapper>
-          </div>,
-          editor._tiptapContainerEl,
-        )}
-    </NodeViewWrapper>
-  );
-}
-
-ImageComponent.propTypes = {
-  node: PropTypes.object.isRequired,
-  editor: PropTypes.object.isRequired,
-  attributes: PropTypes.object,
-  onFocus: PropTypes.func,
-  maxImageWidth: PropTypes.number,
-  maxImageHeight: PropTypes.number,
-};
-
-export default ImageComponent;

package/src/extensions/image.js

@@ -1,109 +0,0 @@
-import { mergeAttributes, Node } from '@tiptap/core';
-import { ReactNodeViewRenderer } from '@tiptap/react';
-import { Plugin } from '@tiptap/pm/state';
-import React from 'react';
-import ImageComponent from './image-component';
-import { node } from 'prop-types';
-
-export const ImageUploadNode = Node.create({
-  name: 'imageUploadNode',
-
-  group: 'block',
-  atom: true, // ✅ prevents content holes
-  selectable: true, // optional
-  draggable: true, // optional
-
-  addAttributes() {
-    return {
-      nodeKey: { default: null },
-      loaded: { default: false },
-      deleteStatus: { default: null },
-      alignment: { default: null },
-      percent: { default: null },
-      width: { default: null },
-      height: { default: null },
-      src: { default: null },
-      alt: { default: null },
-    };
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: 'img[data-type="image-upload-node"]',
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ['img', mergeAttributes(HTMLAttributes, { 'data-type': 'image-upload-node' })];
-  },
-
-  addNodeView() {
-    return ReactNodeViewRenderer((props) => <ImageComponent {...{ ...props, options: this.options }} />);
-  },
-
-  addCommands() {
-    return {
-      setImageUploadNode:
-        () =>
-        ({ commands }) => {
-          return commands.insertContent({
-            type: this.name,
-              // adding a unique nodeKey attribute to help identify this node instance later due to issues with multiple images
-              attrs: { nodeKey: `img-${Date.now()}-${Math.random().toString(36).slice(2)}` },
-          });
-        },
-    };
-  },
-
-  addProseMirrorPlugins() {
-    const editor = this.editor;
-
-    return [
-      new Plugin({
-        props: {
-          handlePaste(view, event) {
-            const items = Array.from(event.clipboardData?.items || []);
-
-            const imageItem = items.find((item) => item.kind === 'file' && item.type.startsWith('image/'));
-
-            if (!imageItem) {
-              return false;
-            }
-
-            const file = imageItem.getAsFile();
-
-            if (!file) {
-              return false;
-            }
-
-            // Example 1: insert as base64 immediately
-            const reader = new FileReader();
-
-            reader.onload = () => {
-              const src = reader.result;
-
-              if (typeof src !== 'string') {
-                return;
-              }
-
-              editor.commands.insertContent({
-                type: 'imageUploadNode',
-                attrs: {
-                  src,
-                  loaded: true,
-                  nodeKey: `img-${Date.now()}-${Math.random().toString(36).slice(2)}`,
-                },
-              });
-            };
-
-            reader.readAsDataURL(file);
-
-            return true;
-          },
-        },
-      }),
-    ];
-  },
-});