@pie-lib/editable-html-tip-tap 1.1.1-next.2 → 1.1.1-next.4

package/src/components/respArea/DragInTheBlank/choice.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDraggable, useDroppable } from '@dnd-kit/core';
 import { color } from '@pie-lib/render-ui';
@@ -107,38 +107,45 @@ BlankContent.propTypes = {
 };
 
 function DragDropChoice({ value, disabled, instanceId, children, n, onChange, removeResponse, duplicates, pos }) {
-  const { attributes: dragAttributes, listeners: dragListeners, setNodeRef: setDragNodeRef, isDragging } = useDraggable(
-    {
+  const {
+    attributes: dragAttributes,
+    listeners: dragListeners,
+    setNodeRef: setDragNodeRef,
+    isDragging,
+  } = useDraggable({
+    id: `drag-${n.index}`,
+    disabled: disabled || !value?.value,
+    data: {
       id: `drag-${n.index}`,
-      disabled: disabled || !value?.value,
-      data: {
-        id: `drag-${n.index}`,
-        value,
-        instanceId,
-        n,
-        pos,
-        opts: { duplicates },
-        type: 'drag-in-the-blank-placed-choice',
-        fromChoice: !value,
-        onRemove: (draggedData) => removeResponse(draggedData),
-        onDrop: (draggedData, dropData) => {
-          // check if we're dropping into a blank
-          const isValidBlank = dropData?.type === 'drag-in-the-blank-drop-choice';
-
-          if (!isValidBlank) return;
+      value,
+      instanceId,
+      n,
+      pos,
+      opts: { duplicates },
+      type: 'drag-in-the-blank-placed-choice',
+      fromChoice: !value,
+      onRemove: (draggedData) => removeResponse(draggedData),
+      onDrop: (draggedData, dropData) => {
+        // check if we're dropping into a blank
+        const isValidBlank = dropData?.type === 'drag-in-the-blank-drop-choice';
 
-          // place into blank
-          onChange(draggedData);
+        if (!isValidBlank) return;
 
-          if (!duplicates && draggedData.fromChoice) {
-            removeResponse(draggedData);
-          }
-        },
+        // place into blank
+        onChange(draggedData);
+
+        if (!duplicates && draggedData.fromChoice) {
+          removeResponse(draggedData);
+        }
       },
     },
-  );
+  });
 
-  const { setNodeRef: setDropNodeRef, isOver, active: dragItem } = useDroppable({
+  const {
+    setNodeRef: setDropNodeRef,
+    isOver,
+    active: dragItem,
+  } = useDroppable({
     id: `drop-${n.index}`,
     data: {
       type: 'drag-in-the-blank-drop-choice',

package/src/components/respArea/ExplicitConstructedResponse.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { NodeViewWrapper } from '@tiptap/react';
 import PropTypes from 'prop-types';
 

package/src/components/respArea/InlineDropdown.jsx

@@ -1,9 +1,8 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { NodeViewWrapper } from '@tiptap/react';
 import { Chevron } from '../icons/RespArea';
-import ReactDOM from "react-dom";
-import { MathToolbar } from "@pie-lib/math-toolbar";
+import ReactDOM from 'react-dom';
 
 const InlineDropdown = (props) => {
   const { editor, node, getPos, options, selected } = props;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import CustomToolbarWrapper from '../custom-toolbar-wrapper';
 
 jest.mock('../../components/common/done-button', () => ({

package/src/extensions/__tests__/extended-table.test.js

@@ -32,10 +32,6 @@ describe('ExtendedTable', () => {
       expect(mockParent).toHaveBeenCalledWith(props);
       expect(result[0]).toBe('table');
       expect(result[1]).toHaveProperty('style');
-      expect(result[1].style).toContain('width: 100%');
-      expect(result[1].style).toContain('table-layout: fixed');
-      expect(result[1].style).toContain('border-collapse: collapse');
-      expect(result[1].border).toBe('1');
     });
 
     it('renders table with custom border', () => {
@@ -54,23 +50,6 @@ describe('ExtendedTable', () => {
       expect(result[1].border).toBe('2');
     });
 
-    it('preserves existing styles', () => {
-      const props = {
-        HTMLAttributes: { border: '1' },
-      };
-
-      const mockParent = jest.fn(() => ['table', { style: 'margin: 10px;' }]);
-
-      const context = {
-        parent: mockParent,
-      };
-
-      const result = ExtendedTable.renderHTML.call(context, props);
-
-      expect(result[1].style).toContain('margin: 10px;');
-      expect(result[1].style).toContain('width: 100%');
-    });
-
     it('handles styles ending with semicolon', () => {
       const props = {
         HTMLAttributes: {},

package/src/extensions/__tests__/image-component.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import ImageComponent from '../image-component';
 
 jest.mock('@tiptap/react', () => ({

package/src/extensions/__tests__/media.test.js

@@ -1,4 +1,4 @@
-import { Media, insertDialog } from '../media';
+import { insertDialog, Media } from '../media';
 
 jest.mock('@tiptap/core', () => ({
   Node: { create: jest.fn((config) => config) },

package/src/extensions/__tests__/responseArea.test.js

@@ -1,8 +1,8 @@
 import {
-  ResponseAreaExtension,
-  ExplicitConstructedResponseNode,
   DragInTheBlankNode,
+  ExplicitConstructedResponseNode,
   InlineDropdownNode,
+  ResponseAreaExtension,
 } from '../responseArea';
 
 jest.mock('@tiptap/core', () => ({

package/src/extensions/css.js

@@ -188,31 +188,33 @@ export const CSSMark = Mark.create({
 
   addCommands() {
     return {
-      setCSSClass: (className) => ({ commands }) => {
-        return commands.setMark(this.name, { class: className });
-      },
+      setCSSClass:
+        (className) =>
+        ({ commands }) => {
+          return commands.setMark(this.name, { class: className });
+        },
 
-      unsetCSSClass: () => ({ commands }) => {
-        return commands.unsetMark(this.name);
-      },
+      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();
-            }
-          },
-        });
-      },
+      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,7 +1,6 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import IconButton from '@mui/material/IconButton';
 import Delete from '@mui/icons-material/Delete';
-import classNames from 'classnames';
 import { PIE_TOOLBAR__CLASS } from '../constants';
 import { styled } from '@mui/material/styles';
 import { DoneButton } from '../components/common/done-button';

package/src/extensions/extended-table.js

@@ -12,7 +12,9 @@ const ExtendedTable = Table.extend({
 
     const previousStyle = `${originalTable[1].style}${originalTable[1].style.match(/.*; */) ? '' : ';'}`;
 
-    originalTable[1].style = `${previousStyle}`;
+    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;

package/src/extensions/image-component.jsx

@@ -1,6 +1,6 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import isEqual from 'lodash/isEqual';
+import { isEqual } from 'lodash-es';
 import debug from 'debug';
 import LinearProgress from '@mui/material/LinearProgress';
 import { styled } from '@mui/material/styles';

package/src/extensions/image.js

@@ -1,4 +1,4 @@
-import { Node, mergeAttributes } from '@tiptap/core';
+import { mergeAttributes, Node } from '@tiptap/core';
 import { ReactNodeViewRenderer } from '@tiptap/react';
 import React from 'react';
 import ImageComponent from './image-component';

package/src/extensions/index.js

@@ -1,6 +1,4 @@
-import React from 'react';
-import compact from 'lodash/compact';
-import isEmpty from 'lodash/isEmpty';
+import { compact, isEmpty } from 'lodash-es';
 import debug from 'debug';
 
 const log = debug('@pie-lib:editable-html:plugins');

package/src/extensions/math.js

@@ -1,10 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { Extension, Node, mergeAttributes } from '@tiptap/core';
-import { NodeViewWrapper, ReactRenderer, ReactNodeViewRenderer } from '@tiptap/react';
-import { Plugin, PluginKey, NodeSelection, TextSelection } from 'prosemirror-state';
+import { Node } from '@tiptap/core';
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
+import { NodeSelection, Plugin, PluginKey, TextSelection } from 'prosemirror-state';
 import { MathPreview, MathToolbar } from '@pie-lib/math-toolbar';
-import { wrapMath, mmlToLatex, renderMath } from '@pie-lib/math-rendering';
+import { wrapMath } from '@pie-lib/math-rendering';
 
 const ensureTextAfterMathPluginKey = new PluginKey('ensureTextAfterMath');
 
@@ -118,30 +118,32 @@ export const MathNode = Node.create({
 
   addCommands() {
     return {
-      insertMath: (latex = '') => ({ tr, editor, dispatch }) => {
-        const { state } = editor.view;
-        const node = state.schema.nodes.math.create({
-          latex,
-        });
-        const { selection } = state;
-
-        // The inserted node is typically just before the cursor
-        const pos = selection.$from.pos;
-
-        tr.insert(pos, node);
-
-        if (node?.type?.name === this.name) {
-          // Create a NodeSelection from the current doc
-          const sel = NodeSelection.create(tr.doc, selection.$from.pos);
-
-          // Build a fresh transaction from the current state and set the selection
-          tr.setSelection(sel);
-        }
+      insertMath:
+        (latex = '') =>
+        ({ tr, editor, dispatch }) => {
+          const { state } = editor.view;
+          const node = state.schema.nodes.math.create({
+            latex,
+          });
+          const { selection } = state;
+
+          // The inserted node is typically just before the cursor
+          const pos = selection.$from.pos;
+
+          tr.insert(pos, node);
+
+          if (node?.type?.name === this.name) {
+            // Create a NodeSelection from the current doc
+            const sel = NodeSelection.create(tr.doc, selection.$from.pos);
+
+            // Build a fresh transaction from the current state and set the selection
+            tr.setSelection(sel);
+          }
 
-        dispatch(tr);
+          dispatch(tr);
 
-        return true;
-      },
+          return true;
+        },
       // insertMath: (latex = '') => ({ commands }) => {
       //   return commands.insertContent({
       //     type: this.name,

package/src/extensions/media.js

@@ -78,12 +78,16 @@ export const Media = Node.create({
 
   addCommands() {
     return {
-      insertMedia: (attrs) => ({ commands }) => {
-        return commands.insertContent({ type: this.name, attrs });
-      },
-      updateMedia: (attrs) => ({ commands }) => {
-        return commands.updateAttributes(this.name, attrs);
-      },
+      insertMedia:
+        (attrs) =>
+        ({ commands }) => {
+          return commands.insertContent({ type: this.name, attrs });
+        },
+      updateMedia:
+        (attrs) =>
+        ({ commands }) => {
+          return commands.updateAttributes(this.name, attrs);
+        },
     };
   },
 
@@ -143,10 +147,7 @@ export default function MediaNodeView({ editor, node, updateAttributes, deleteNo
           updateAttributes(data);
         }
 
-        editor
-          .chain()
-          .focus()
-          .run();
+        editor.chain().focus().run();
       },
     });
   };
@@ -163,10 +164,7 @@ export default function MediaNodeView({ editor, node, updateAttributes, deleteNo
           deleteNode();
         }
 
-        editor
-          .chain()
-          .focus()
-          .run();
+        editor.chain().focus().run();
       },
     });
   }, []);

package/src/extensions/responseArea.js

@@ -1,11 +1,10 @@
 import React from 'react';
-import { Plugin, PluginKey, TextSelection, NodeSelection } from 'prosemirror-state';
+import { NodeSelection, Plugin, PluginKey, TextSelection } from 'prosemirror-state';
 import { Extension } from '@tiptap/core';
 import { Node, ReactNodeViewRenderer } from '@tiptap/react';
 import ExplicitConstructedResponse from '../components/respArea/ExplicitConstructedResponse';
 import DragInTheBlank from '../components/respArea/DragInTheBlank/DragInTheBlank';
 import InlineDropdown from '../components/respArea/InlineDropdown';
-import PropTypes from 'prop-types';
 
 const lastIndexMap = {};
 
@@ -130,94 +129,100 @@ export const ResponseAreaExtension = Extension.create({
 
   addCommands() {
     return {
-      insertResponseArea: (type) => ({ tr, state, dispatch, commands }) => {
-        const typeName = normalizeType(type);
-
-        // --- Slate: currentRespAreaList + max check ---
-        const currentCount = countNodesOfType(state.doc, typeName);
-        if (currentCount >= this.options.maxResponseAreas) {
-          return false;
-        }
-
-        // --- Slate: indexing logic (kept identical) ---
-        if (lastIndexMap[typeName] === undefined) lastIndexMap[typeName] = 0;
-
-        const prevIndex = lastIndexMap[typeName];
-        const newIndex = prevIndex === 0 ? prevIndex : prevIndex + 1;
-
-        // Slate increments map even if newIndex === 0
-        lastIndexMap[typeName] += 1;
-
-        const newInline = getDefaultNode({
-          schema: state.schema,
-          typeName,
-          index: newIndex,
-        });
-
-        if (!newInline) return false;
-
-        // --- Insert logic ---
-        const { selection } = state;
-        let insertPos = selection.from;
-
-        // If we're in a NodeSelection, insert before/after is ambiguous;
-        // We'll insert at its "from" (like your current code).
-        // If insertion fails, we fallback to end of doc.
-        const tryInsertAt = (pos) => {
-          try {
-            tr.insert(pos, newInline);
-            return pos;
-          } catch (e) {
-            return null;
+      insertResponseArea:
+        (type) =>
+        ({ tr, state, dispatch, commands }) => {
+          const typeName = normalizeType(type);
+
+          // --- Slate: currentRespAreaList + max check ---
+          const currentCount = countNodesOfType(state.doc, typeName);
+          if (currentCount >= this.options.maxResponseAreas) {
+            return false;
           }
-        };
-
-        let usedPos = tryInsertAt(insertPos);
-
-        // Slate branch: "markup empty and there's no focus"
-        // ProseMirror doesn't expose "no focus" the same way, so the closest
-        // equivalent fallback is inserting at end of document.
-        if (usedPos == null) {
-          usedPos = tryInsertAt(tr.doc.content.size);
-        }
-        if (usedPos == null) return false;
-
-        // Optionally select the node you just inserted (like your original command)
-        // tr.setSelection(NodeSelection.create(tr.doc, usedPos))
-
-        // --- Cursor move behavior for certain types (Slate: moveFocusTo next text) ---
-        if (
-          ['math_templated', 'inline_dropdown', 'drag_in_the_blank', 'explicit_constructed_response'].includes(typeName)
-        ) {
-          tr.setSelection(NodeSelection.create(tr.doc, usedPos));
-        } else {
-          // Default: put cursor after inserted node
-          const after = usedPos + newInline.nodeSize;
-          tr.setSelection(selectionAfterPos(tr.doc, after));
-        }
-
-        if (dispatch) {
-          commands.focus();
-          dispatch(tr);
-        }
-
-        return true;
-      },
-      refreshResponseArea: () => ({ tr, state, commands, dispatch }) => {
-        const { selection } = state;
-        const node = selection.$from.nodeAfter;
-        const nodePos = selection.from;
 
-        tr.setNodeMarkup(nodePos, undefined, { ...node.attrs, updated: `${Date.now()}` });
-        tr.setSelection(NodeSelection.create(tr.doc, nodePos));
+          // --- Slate: indexing logic (kept identical) ---
+          if (lastIndexMap[typeName] === undefined) lastIndexMap[typeName] = 0;
+
+          const prevIndex = lastIndexMap[typeName];
+          const newIndex = prevIndex === 0 ? prevIndex : prevIndex + 1;
+
+          // Slate increments map even if newIndex === 0
+          lastIndexMap[typeName] += 1;
+
+          const newInline = getDefaultNode({
+            schema: state.schema,
+            typeName,
+            index: newIndex,
+          });
+
+          if (!newInline) return false;
+
+          // --- Insert logic ---
+          const { selection } = state;
+          let insertPos = selection.from;
+
+          // If we're in a NodeSelection, insert before/after is ambiguous;
+          // We'll insert at its "from" (like your current code).
+          // If insertion fails, we fallback to end of doc.
+          const tryInsertAt = (pos) => {
+            try {
+              tr.insert(pos, newInline);
+              return pos;
+            } catch (e) {
+              return null;
+            }
+          };
 
-        if (dispatch) {
-          commands.focus();
-          dispatch(tr);
-        }
+          let usedPos = tryInsertAt(insertPos);
 
-        return true;
-      },
+          // Slate branch: "markup empty and there's no focus"
+          // ProseMirror doesn't expose "no focus" the same way, so the closest
+          // equivalent fallback is inserting at end of document.
+          if (usedPos == null) {
+            usedPos = tryInsertAt(tr.doc.content.size);
+          }
+          if (usedPos == null) return false;
+
+          // Optionally select the node you just inserted (like your original command)
+          // tr.setSelection(NodeSelection.create(tr.doc, usedPos))
+
+          // --- Cursor move behavior for certain types (Slate: moveFocusTo next text) ---
+          if (
+            ['math_templated', 'inline_dropdown', 'drag_in_the_blank', 'explicit_constructed_response'].includes(
+              typeName,
+            )
+          ) {
+            tr.setSelection(NodeSelection.create(tr.doc, usedPos));
+          } else {
+            // Default: put cursor after inserted node
+            const after = usedPos + newInline.nodeSize;
+            tr.setSelection(selectionAfterPos(tr.doc, after));
+          }
+
+          if (dispatch) {
+            commands.focus();
+            dispatch(tr);
+          }
+
+          return true;
+        },
+      refreshResponseArea:
+        () =>
+        ({ tr, state, commands, dispatch }) => {
+          const { selection } = state;
+          const node = selection.$from.nodeAfter;
+          const nodePos = selection.from;
+
+          tr.setNodeMarkup(nodePos, undefined, { ...node.attrs, updated: `${Date.now()}` });
+          tr.setSelection(NodeSelection.create(tr.doc, nodePos));
+
+          if (dispatch) {
+            commands.focus();
+            dispatch(tr);
+          }
+
+          return true;
+        },
     };
   },
 });

package/src/styles/editorContainerStyles.js

@@ -1,5 +1,4 @@
 import { color } from '@pie-lib/render-ui';
-import { primary } from '../theme';
 
 const styles = (theme) => ({
   root: {