@pie-lib/editable-html-tip-tap 1.2.0-next.2 → 1.2.0-next.21

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

@@ -101,6 +101,163 @@ describe('ResponseAreaExtension', () => {
       expect(commands).toHaveProperty('insertResponseArea');
       expect(typeof commands.insertResponseArea).toBe('function');
     });
+
+    it('returns refreshResponseArea command', () => {
+      const commands = ResponseAreaExtension.addCommands();
+
+      expect(commands).toHaveProperty('refreshResponseArea');
+      expect(typeof commands.refreshResponseArea).toBe('function');
+    });
+
+    it('refreshResponseArea handles node with attrs safely', () => {
+      const context = {
+        options: {
+          type: 'explicit-constructed-response',
+          maxResponseAreas: 5,
+        },
+      };
+
+      const commands = ResponseAreaExtension.addCommands.call(context);
+      const refreshCommand = commands.refreshResponseArea();
+
+      // Mock transaction and state
+      const mockNode = {
+        attrs: {
+          index: '0',
+          value: 'test',
+        },
+      };
+
+      const mockTr = {
+        setNodeMarkup: jest.fn(),
+        setSelection: jest.fn(),
+      };
+
+      const mockState = {
+        selection: {
+          from: 0,
+          $from: {
+            nodeAfter: mockNode,
+          },
+        },
+        tr: mockTr,
+      };
+
+      const mockCommands = {
+        focus: jest.fn(),
+      };
+
+      const mockDispatch = jest.fn();
+
+      refreshCommand({
+        tr: mockTr,
+        state: mockState,
+        commands: mockCommands,
+        dispatch: mockDispatch,
+      });
+
+      expect(mockTr.setNodeMarkup).toHaveBeenCalled();
+    });
+
+    it('refreshResponseArea handles node without attrs safely (optional chaining)', () => {
+      const context = {
+        options: {
+          type: 'explicit-constructed-response',
+          maxResponseAreas: 5,
+        },
+      };
+
+      const commands = ResponseAreaExtension.addCommands.call(context);
+      const refreshCommand = commands.refreshResponseArea();
+
+      // Mock transaction and state with node that has no attrs
+      const mockNode = null;
+
+      const mockTr = {
+        setNodeMarkup: jest.fn(),
+        setSelection: jest.fn(),
+      };
+
+      const mockState = {
+        selection: {
+          from: 0,
+          $from: {
+            nodeAfter: mockNode,
+          },
+        },
+        tr: mockTr,
+      };
+
+      const mockCommands = {
+        focus: jest.fn(),
+      };
+
+      const mockDispatch = jest.fn();
+
+      // This should not throw an error due to optional chaining on node?.attrs
+      expect(() => {
+        refreshCommand({
+          tr: mockTr,
+          state: mockState,
+          commands: mockCommands,
+          dispatch: mockDispatch,
+        });
+      }).not.toThrow();
+    });
+
+    it('refreshResponseArea updates timestamp in node attributes', () => {
+      const context = {
+        options: {
+          type: 'explicit-constructed-response',
+          maxResponseAreas: 5,
+        },
+      };
+
+      const commands = ResponseAreaExtension.addCommands.call(context);
+      const refreshCommand = commands.refreshResponseArea();
+
+      const mockNode = {
+        attrs: {
+          index: '0',
+          value: 'test',
+          updated: '1234567890',
+        },
+      };
+
+      const mockTr = {
+        setNodeMarkup: jest.fn((pos, type, attrs) => {
+          // Verify that updated timestamp is being set
+          expect(attrs.updated).toBeDefined();
+          expect(attrs.updated).not.toBe('1234567890');
+        }),
+        setSelection: jest.fn(),
+      };
+
+      const mockState = {
+        selection: {
+          from: 0,
+          $from: {
+            nodeAfter: mockNode,
+          },
+        },
+        tr: mockTr,
+      };
+
+      const mockCommands = {
+        focus: jest.fn(),
+      };
+
+      const mockDispatch = jest.fn();
+
+      refreshCommand({
+        tr: mockTr,
+        state: mockState,
+        commands: mockCommands,
+        dispatch: mockDispatch,
+      });
+
+      expect(mockTr.setNodeMarkup).toHaveBeenCalled();
+    });
   });
 });
 

package/src/extensions/div-node.js

@@ -0,0 +1,36 @@
+// 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() {
+    return {
+      Enter: () => {
+        const { state } = this.editor;
+        const { $from } = state.selection;
+
+        if ($from.parent.type.name !== 'div') {
+          return false;
+        }
+
+        return this.editor
+          .chain()
+          .focus()
+          .setNode('paragraph') // current div becomes <p>
+          .splitBlock() // create another <p>
+          .run();
+      },
+    };
+  },
+});

package/src/extensions/index.js

@@ -31,6 +31,8 @@ export const ALL_PLUGINS = [
 
 export const PLUGINS_MAP = {
   'text-align': 'textAlign',
+  'bulleted-list': 'ul_list',
+  'numbered-list': 'ol_list',
 };
 
 export const DEFAULT_PLUGINS = ALL_PLUGINS.filter((plug) => !['responseArea', 'h3', 'blockquote'].includes(plug));

package/src/extensions/math.js

@@ -209,12 +209,14 @@ export const MathNodeView = (props) => {
     };
 
     if (showToolbar) {
-      document.addEventListener('mousedown', handleClickOutside);
+      // Use `click` (not `mousedown`) so interacting with browser UI like the scrollbar
+      // doesn't automatically dismiss the math toolbar.
+      document.addEventListener('click', handleClickOutside);
     } else {
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('click', handleClickOutside);
     }
 
-    return () => document.removeEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
   }, [editor, showToolbar]);
 
   const handleChange = (newLatex) => {
@@ -253,6 +255,7 @@ export const MathNodeView = (props) => {
         ReactDOM.createPortal(
           <div
             ref={toolbarRef}
+            data-toolbar-for={editor.instanceId}
             style={{
               position: 'absolute',
               top: `${position.top}px`,

package/src/extensions/media.js

@@ -153,20 +153,23 @@ export default function MediaNodeView({ editor, node, updateAttributes, deleteNo
   };
 
   useEffect(() => {
-    insertDialog({
-      ...node.attrs,
-      options: options,
-      edit: true,
-      callback: (val, data) => {
-        if (val) {
-          updateAttributes(data);
-        } else {
-          deleteNode();
-        }
-
-        editor.chain().focus().run();
-      },
-    });
+    // Only open dialog for newly inserted media without a src
+    if (!src) {
+      insertDialog({
+        ...node.attrs,
+        options: options,
+        edit: true,
+        callback: (val, data) => {
+          if (val) {
+            updateAttributes(data);
+          } else {
+            deleteNode();
+          }
+
+          editor.chain().focus().run();
+        },
+      });
+    }
   }, []);
 
   return (

package/src/extensions/responseArea.js

@@ -5,6 +5,7 @@ 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 MathTemplated from '../components/respArea/MathTemplated';
 
 const lastIndexMap = {};
 
@@ -187,14 +188,9 @@ export const ResponseAreaExtension = Extension.create({
           // 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,
-            )
-          ) {
+          if (['math_templated', 'inline_dropdown', '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));
           }
@@ -213,7 +209,7 @@ export const ResponseAreaExtension = Extension.create({
           const node = selection.$from.nodeAfter;
           const nodePos = selection.from;
 
-          tr.setNodeMarkup(nodePos, undefined, { ...node.attrs, updated: `${Date.now()}` });
+          tr.setNodeMarkup(nodePos, undefined, { ...node?.attrs, updated: `${Date.now()}` });
           tr.setSelection(NodeSelection.create(tr.doc, nodePos));
 
           if (dispatch) {
@@ -305,7 +301,7 @@ export const MathTemplatedNode = Node.create({
     ];
   },
   addNodeView() {
-    return ReactNodeViewRenderer(() => <div></div>);
+    return ReactNodeViewRenderer((props) => <MathTemplated {...{ ...props, options: this.options }} />);
   },
 });
 

package/src/styles/editorContainerStyles.js

@@ -68,7 +68,7 @@ const styles = (theme) => ({
       background: 'var(--black)',
       borderRadius: '0.5rem',
       color: 'var(--white)',
-      fontFamily: "'JetBrainsMono', monospace",
+      fontFamily: '\'JetBrainsMono\', monospace',
       margin: '1.5rem 0',
       padding: '0.75rem 1rem',
 
@@ -81,9 +81,10 @@ const styles = (theme) => ({
     },
 
     '& blockquote': {
-      borderLeft: '3px solid var(--gray-3)',
-      margin: '1.5rem 0',
-      paddingLeft: '1rem',
+      background: '#f9f9f9',
+      borderLeft: '5px solid #ccc',
+      margin: '1.5em 10px',
+      padding: '.5em 10px',
     },
 
     '& hr': {

package/src/utils/helper.js

@@ -0,0 +1,17 @@
+const escapeHtml = (str) =>
+  String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+
+export const normalizeInitialMarkup = (markup) => {
+  const trimmed = String(markup ?? '').trim();
+  if (!trimmed) return '<div></div>';
+
+  const looksLikeHtml = /<[^>]+>/.test(trimmed);
+  if (looksLikeHtml) return trimmed;
+
+  return `<div>${escapeHtml(trimmed)}</div>`;
+};