@pie-lib/editable-html-tip-tap 1.1.0-next.6059 → 1.1.1-next.1

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

@@ -0,0 +1,270 @@
+import { Media, insertDialog } from '../media';
+
+jest.mock('@tiptap/core', () => ({
+  Node: { create: jest.fn((config) => config) },
+  mergeAttributes: jest.fn((...args) => Object.assign({}, ...args)),
+}));
+
+jest.mock('@tiptap/react', () => ({
+  NodeViewWrapper: ({ children }) => <div data-testid="node-view-wrapper">{children}</div>,
+  ReactNodeViewRenderer: jest.fn((component) => component),
+}));
+
+jest.mock('react-dom', () => ({
+  render: jest.fn(),
+}));
+
+jest.mock('../../components/media/MediaDialog', () => ({
+  __esModule: true,
+  default: jest.fn(() => <div data-testid="media-dialog" />),
+}));
+
+jest.mock('../../components/media/MediaToolbar', () => ({
+  __esModule: true,
+  default: jest.fn(() => <div data-testid="media-toolbar" />),
+}));
+
+describe('Media', () => {
+  describe('configuration', () => {
+    it('has correct name', () => {
+      expect(Media.name).toBe('media');
+    });
+
+    it('is inline', () => {
+      expect(Media.inline).toBe(true);
+    });
+
+    it('is in inline group', () => {
+      expect(Media.group).toBe('inline');
+    });
+
+    it('is atomic', () => {
+      expect(Media.atom).toBe(true);
+    });
+  });
+
+  describe('addAttributes', () => {
+    it('returns all media attributes with defaults', () => {
+      const attributes = Media.addAttributes();
+
+      expect(attributes).toHaveProperty('type');
+      expect(attributes).toHaveProperty('src');
+      expect(attributes).toHaveProperty('width');
+      expect(attributes).toHaveProperty('height');
+      expect(attributes).toHaveProperty('title');
+      expect(attributes).toHaveProperty('starts');
+      expect(attributes).toHaveProperty('ends');
+      expect(attributes).toHaveProperty('editing');
+      expect(attributes).toHaveProperty('tag');
+      expect(attributes).toHaveProperty('url');
+
+      expect(attributes.type.default).toBe('video');
+      expect(attributes.src.default).toBeNull();
+      expect(attributes.tag.default).toBe('iframe');
+      expect(attributes.editing.default).toBe(false);
+    });
+  });
+
+  describe('parseHTML', () => {
+    it('returns parsing rules for iframe and audio', () => {
+      const rules = Media.parseHTML();
+
+      expect(Array.isArray(rules)).toBe(true);
+      expect(rules).toHaveLength(2);
+      expect(rules[0].tag).toBe('iframe[data-type="video"]');
+      expect(rules[1].tag).toBe('audio');
+    });
+
+    it('parses video iframe attributes', () => {
+      const rules = Media.parseHTML();
+      const mockEl = {
+        getAttribute: jest.fn((attr) => {
+          const attrs = {
+            src: 'https://video.com/embed',
+            width: '640',
+            height: '480',
+          };
+          return attrs[attr] || null;
+        }),
+        dataset: {
+          title: 'Test Video',
+          starts: '10',
+          ends: '60',
+          url: 'https://video.com/watch',
+        },
+      };
+
+      const result = rules[0].getAttrs(mockEl);
+
+      expect(result.type).toBe('video');
+      expect(result.tag).toBe('iframe');
+      expect(result.src).toBe('https://video.com/embed');
+      expect(result.width).toBe('640');
+      expect(result.height).toBe('480');
+      expect(result.title).toBe('Test Video');
+    });
+
+    it('parses audio element attributes', () => {
+      const rules = Media.parseHTML();
+      const mockEl = {
+        querySelector: jest.fn(() => ({
+          getAttribute: jest.fn(() => 'https://audio.com/file.mp3'),
+        })),
+      };
+
+      const result = rules[1].getAttrs(mockEl);
+
+      expect(result.type).toBe('audio');
+      expect(result.tag).toBe('audio');
+      expect(result.src).toBe('https://audio.com/file.mp3');
+    });
+  });
+
+  describe('renderHTML', () => {
+    it('renders audio element for audio type', () => {
+      const HTMLAttributes = {
+        tag: 'audio',
+        src: 'test.mp3',
+      };
+
+      const result = Media.renderHTML({ HTMLAttributes });
+
+      expect(result[0]).toBe('audio');
+      expect(result[1]).toEqual({ controls: 'controls', controlsList: 'nodownload' });
+      expect(result[2][0]).toBe('source');
+      expect(result[2][1]).toEqual({ src: 'test.mp3', type: 'audio/mp3' });
+    });
+
+    it('renders iframe for video type', () => {
+      const HTMLAttributes = {
+        tag: 'iframe',
+        src: 'https://video.com/embed',
+        width: '640',
+        height: '480',
+      };
+
+      const result = Media.renderHTML({ HTMLAttributes });
+
+      expect(result[0]).toBe('iframe');
+      expect(result[1]).toHaveProperty('data-type', 'video');
+      expect(result[1]).toHaveProperty('frameborder', '0');
+      expect(result[1]).toHaveProperty('src', 'https://video.com/embed');
+      expect(result[1]).toHaveProperty('width', '640');
+      expect(result[1]).toHaveProperty('height', '480');
+    });
+
+    it('renders iframe without dimensions if not provided', () => {
+      const HTMLAttributes = {
+        tag: 'iframe',
+        src: 'https://video.com/embed',
+      };
+
+      const result = Media.renderHTML({ HTMLAttributes });
+
+      expect(result[1]).not.toHaveProperty('width');
+      expect(result[1]).not.toHaveProperty('height');
+    });
+  });
+
+  describe('addCommands', () => {
+    it('returns insertMedia and updateMedia commands', () => {
+      const commands = Media.addCommands();
+
+      expect(commands).toHaveProperty('insertMedia');
+      expect(commands).toHaveProperty('updateMedia');
+      expect(typeof commands.insertMedia).toBe('function');
+      expect(typeof commands.updateMedia).toBe('function');
+    });
+
+    it('insertMedia inserts content with attributes', () => {
+      const context = { name: 'media' };
+      const commands = Media.addCommands.call(context);
+      const mockCommands = {
+        insertContent: jest.fn(() => true),
+      };
+      const attrs = { type: 'video', src: 'test.mp4' };
+
+      const result = commands.insertMedia(attrs)({ commands: mockCommands });
+
+      expect(mockCommands.insertContent).toHaveBeenCalledWith({
+        type: 'media',
+        attrs,
+      });
+      expect(result).toBe(true);
+    });
+
+    it('updateMedia updates attributes', () => {
+      const context = { name: 'media' };
+      const commands = Media.addCommands.call(context);
+      const mockCommands = {
+        updateAttributes: jest.fn(() => true),
+      };
+      const attrs = { width: '800' };
+
+      const result = commands.updateMedia(attrs)({ commands: mockCommands });
+
+      expect(mockCommands.updateAttributes).toHaveBeenCalledWith('media', attrs);
+      expect(result).toBe(true);
+    });
+  });
+
+  describe('addNodeView', () => {
+    it('returns ReactNodeViewRenderer result', () => {
+      const result = Media.addNodeView();
+
+      expect(result).toBeDefined();
+    });
+  });
+});
+
+describe('insertDialog', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    document.body.style.overflow = 'auto';
+  });
+
+  it('creates dialog element', () => {
+    const mockCallback = jest.fn();
+    const props = {
+      type: 'video',
+      callback: mockCallback,
+      options: {},
+    };
+
+    insertDialog(props);
+
+    const dialog = document.querySelector('.insert-media-dialog');
+    expect(dialog).toBeTruthy();
+  });
+
+  it('sets body overflow to hidden', () => {
+    const mockCallback = jest.fn();
+    const props = {
+      type: 'video',
+      callback: mockCallback,
+      options: {},
+    };
+
+    insertDialog(props);
+
+    expect(document.body.style.overflow).toBe('hidden');
+  });
+
+  it('removes previous dialogs', () => {
+    const existingDialog = document.createElement('div');
+    existingDialog.className = 'insert-media-dialog';
+    document.body.appendChild(existingDialog);
+
+    const mockCallback = jest.fn();
+    const props = {
+      type: 'video',
+      callback: mockCallback,
+      options: {},
+    };
+
+    insertDialog(props);
+
+    const dialogs = document.querySelectorAll('.insert-media-dialog');
+    expect(dialogs).toHaveLength(1);
+  });
+});

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

@@ -0,0 +1,310 @@
+import {
+  ResponseAreaExtension,
+  ExplicitConstructedResponseNode,
+  DragInTheBlankNode,
+  InlineDropdownNode,
+} from '../responseArea';
+
+jest.mock('@tiptap/core', () => ({
+  Extension: { create: jest.fn((config) => config) },
+  Node: { create: jest.fn((config) => config) },
+}));
+
+jest.mock('@tiptap/react', () => ({
+  Node: { create: jest.fn((config) => config) },
+  ReactNodeViewRenderer: jest.fn((component) => component),
+}));
+
+jest.mock('prosemirror-state', () => ({
+  Plugin: jest.fn(function (config) {
+    return config;
+  }),
+  PluginKey: jest.fn(function (key) {
+    this.key = key;
+  }),
+  TextSelection: {
+    near: jest.fn((pos, dir) => ({ type: 'text', pos, dir })),
+    create: jest.fn((doc, pos) => ({ type: 'text', pos })),
+  },
+  NodeSelection: {
+    create: jest.fn((doc, pos) => ({ type: 'node', pos })),
+  },
+}));
+
+jest.mock('../../components/respArea/ExplicitConstructedResponse', () => ({
+  __esModule: true,
+  default: jest.fn(() => <div data-testid="explicit-constructed-response" />),
+}));
+
+jest.mock('../../components/respArea/DragInTheBlank/DragInTheBlank', () => ({
+  __esModule: true,
+  default: jest.fn(() => <div data-testid="drag-in-the-blank" />),
+}));
+
+jest.mock('../../components/respArea/InlineDropdown', () => ({
+  __esModule: true,
+  default: jest.fn(() => <div data-testid="inline-dropdown" />),
+}));
+
+describe('ResponseAreaExtension', () => {
+  describe('configuration', () => {
+    it('has correct name', () => {
+      expect(ResponseAreaExtension.name).toBe('responseArea');
+    });
+  });
+
+  describe('addOptions', () => {
+    it('returns default options', () => {
+      const options = ResponseAreaExtension.addOptions();
+
+      expect(options).toHaveProperty('maxResponseAreas', null);
+      expect(options).toHaveProperty('error', null);
+      expect(options).toHaveProperty('options', null);
+      expect(options).toHaveProperty('respAreaToolbar', null);
+      expect(options).toHaveProperty('onHandleAreaChange', null);
+    });
+  });
+
+  describe('addProseMirrorPlugins', () => {
+    it('returns empty array when no type specified', () => {
+      const context = {
+        options: {},
+      };
+
+      const plugins = ResponseAreaExtension.addProseMirrorPlugins.call(context);
+
+      expect(Array.isArray(plugins)).toBe(true);
+      expect(plugins).toHaveLength(0);
+    });
+
+    it('returns plugin array when type is specified', () => {
+      const context = {
+        options: {
+          type: 'explicit-constructed-response',
+          maxResponseAreas: 5,
+        },
+      };
+
+      const plugins = ResponseAreaExtension.addProseMirrorPlugins.call(context);
+
+      expect(Array.isArray(plugins)).toBe(true);
+      expect(plugins).toHaveLength(1);
+      expect(plugins[0]).toHaveProperty('key');
+      expect(plugins[0]).toHaveProperty('view');
+    });
+  });
+
+  describe('addCommands', () => {
+    it('returns insertResponseArea command', () => {
+      const commands = ResponseAreaExtension.addCommands();
+
+      expect(commands).toHaveProperty('insertResponseArea');
+      expect(typeof commands.insertResponseArea).toBe('function');
+    });
+  });
+});
+
+describe('ExplicitConstructedResponseNode', () => {
+  describe('configuration', () => {
+    it('has correct name', () => {
+      expect(ExplicitConstructedResponseNode.name).toBe('explicit_constructed_response');
+    });
+
+    it('is inline', () => {
+      expect(ExplicitConstructedResponseNode.inline).toBe(true);
+    });
+
+    it('is in inline group', () => {
+      expect(ExplicitConstructedResponseNode.group).toBe('inline');
+    });
+
+    it('is atomic', () => {
+      expect(ExplicitConstructedResponseNode.atom).toBe(true);
+    });
+  });
+
+  describe('addAttributes', () => {
+    it('returns required attributes', () => {
+      const attributes = ExplicitConstructedResponseNode.addAttributes();
+
+      expect(attributes).toHaveProperty('index');
+      expect(attributes).toHaveProperty('value');
+      expect(attributes).toHaveProperty('updated');
+
+      expect(attributes.index).toEqual({ default: null });
+      expect(attributes.value).toEqual({ default: '' });
+      expect(attributes.updated).toEqual({ default: '' });
+    });
+  });
+
+  describe('parseHTML', () => {
+    it('returns parsing rules', () => {
+      const rules = ExplicitConstructedResponseNode.parseHTML();
+
+      expect(Array.isArray(rules)).toBe(true);
+      expect(rules).toHaveLength(1);
+      expect(rules[0]).toHaveProperty('tag');
+    });
+  });
+
+  describe('renderHTML', () => {
+    it('renders span with attributes', () => {
+      const result = ExplicitConstructedResponseNode.renderHTML({
+        HTMLAttributes: {
+          index: '1',
+          id: '1',
+          value: 'test',
+        },
+      });
+
+      expect(result[0]).toBe('span');
+      expect(result[1]).toHaveProperty('data-type', 'explicit_constructed_response');
+    });
+  });
+
+  describe('addNodeView', () => {
+    it('returns ReactNodeViewRenderer result', () => {
+      const result = ExplicitConstructedResponseNode.addNodeView();
+
+      expect(result).toBeDefined();
+    });
+  });
+});
+
+describe('DragInTheBlankNode', () => {
+  describe('configuration', () => {
+    it('has correct name', () => {
+      expect(DragInTheBlankNode.name).toBe('drag_in_the_blank');
+    });
+
+    it('is inline', () => {
+      expect(DragInTheBlankNode.inline).toBe(true);
+    });
+
+    it('is in inline group', () => {
+      expect(DragInTheBlankNode.group).toBe('inline');
+    });
+
+    it('is atomic', () => {
+      expect(DragInTheBlankNode.atom).toBe(true);
+    });
+  });
+
+  describe('addAttributes', () => {
+    it('returns required attributes', () => {
+      const attributes = DragInTheBlankNode.addAttributes();
+
+      expect(attributes).toHaveProperty('index');
+      expect(attributes).toHaveProperty('id');
+      expect(attributes).toHaveProperty('value');
+      expect(attributes).toHaveProperty('inTable');
+      expect(attributes).toHaveProperty('updated');
+
+      expect(attributes.index).toEqual({ default: null });
+      expect(attributes.id).toEqual({ default: null });
+      expect(attributes.value).toEqual({ default: '' });
+      expect(attributes.inTable).toEqual({ default: null });
+      expect(attributes.updated).toEqual({ default: '' });
+    });
+  });
+
+  describe('parseHTML', () => {
+    it('returns parsing rules', () => {
+      const rules = DragInTheBlankNode.parseHTML();
+
+      expect(Array.isArray(rules)).toBe(true);
+      expect(rules).toHaveLength(1);
+      expect(rules[0]).toHaveProperty('tag');
+    });
+  });
+
+  describe('renderHTML', () => {
+    it('renders span with attributes', () => {
+      const result = DragInTheBlankNode.renderHTML({
+        HTMLAttributes: {
+          index: '1',
+          id: '1',
+          value: 'test',
+        },
+      });
+
+      expect(result[0]).toBe('span');
+      expect(result[1]).toHaveProperty('data-type', 'drag_in_the_blank');
+    });
+  });
+
+  describe('addNodeView', () => {
+    it('returns ReactNodeViewRenderer result', () => {
+      const result = DragInTheBlankNode.addNodeView();
+
+      expect(result).toBeDefined();
+    });
+  });
+});
+
+describe('InlineDropdownNode', () => {
+  describe('configuration', () => {
+    it('has correct name', () => {
+      expect(InlineDropdownNode.name).toBe('inline_dropdown');
+    });
+
+    it('is inline', () => {
+      expect(InlineDropdownNode.inline).toBe(true);
+    });
+
+    it('is in inline group', () => {
+      expect(InlineDropdownNode.group).toBe('inline');
+    });
+
+    it('is atomic', () => {
+      expect(InlineDropdownNode.atom).toBe(true);
+    });
+  });
+
+  describe('addAttributes', () => {
+    it('returns required attributes', () => {
+      const attributes = InlineDropdownNode.addAttributes();
+
+      expect(attributes).toHaveProperty('index');
+      expect(attributes).toHaveProperty('value');
+      expect(attributes).toHaveProperty('updated');
+
+      expect(attributes.index).toEqual({ default: null });
+      expect(attributes.value).toEqual({ default: '' });
+      expect(attributes.updated).toEqual({ default: '' });
+    });
+  });
+
+  describe('parseHTML', () => {
+    it('returns parsing rules', () => {
+      const rules = InlineDropdownNode.parseHTML();
+
+      expect(Array.isArray(rules)).toBe(true);
+      expect(rules).toHaveLength(1);
+      expect(rules[0]).toHaveProperty('tag');
+    });
+  });
+
+  describe('renderHTML', () => {
+    it('renders span with attributes', () => {
+      const result = InlineDropdownNode.renderHTML({
+        HTMLAttributes: {
+          index: '1',
+          id: '1',
+          value: 'test',
+        },
+      });
+
+      expect(result[0]).toBe('span');
+      expect(result[1]).toHaveProperty('data-type', 'inline_dropdown');
+    });
+  });
+
+  describe('addNodeView', () => {
+    it('returns ReactNodeViewRenderer result', () => {
+      const result = InlineDropdownNode.addNodeView();
+
+      expect(result).toBeDefined();
+    });
+  });
+});

package/src/extensions/{component.jsx → image-component.jsx}

@@ -80,6 +80,7 @@ function ImageComponent(props) {
 
   const [showToolbar, setShowToolbar] = useState(false);
 
+  const latestNodeRef = useRef(node);
   const imgRef = useRef(null);
   const resizeRef = useRef(null);
   const toolbarRef = useRef(null);
@@ -102,6 +103,11 @@ function ImageComponent(props) {
     }
   }, [editor, node.attrs, getPercentFromWidth]);
 
+  // keep ref in sync with latest node
+  useEffect(() => {
+    latestNodeRef.current = node;
+  }, [node]);
+
   useEffect(() => {
     const { selection } = editor.state;
     const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;
@@ -124,7 +130,11 @@ function ImageComponent(props) {
       resizeHandle.addEventListener('mousedown', initResize, false);
     }
     return () => {
-      if (resizeHandle) resizeHandle.removeEventListener('mousedown', initResize, false);
+      if (resizeHandle) {
+        resizeHandle.removeEventListener('mousedown', initResize, false);
+      }
+
+      options.imageHandling.onDelete(latestNodeRef.current);
     };
   }, []);
 

package/src/extensions/image.js

@@ -1,7 +1,7 @@
 import { Node, mergeAttributes } from '@tiptap/core';
 import { ReactNodeViewRenderer } from '@tiptap/react';
 import React from 'react';
-import ImageComponent from './component';
+import ImageComponent from './image-component';
 
 export const ImageUploadNode = Node.create({
   name: 'imageUploadNode',

package/src/extensions/index.js

@@ -30,6 +30,10 @@ export const ALL_PLUGINS = [
   'subscript',
 ];
 
+export const PLUGINS_MAP = {
+  'text-align': 'textAlign',
+};
+
 export const DEFAULT_PLUGINS = ALL_PLUGINS.filter((plug) => !['responseArea', 'h3', 'blockquote'].includes(plug));
 
 export const buildExtensions = (activeExtensions, customExtensions, opts) => {
@@ -39,7 +43,7 @@ export const buildExtensions = (activeExtensions, customExtensions, opts) => {
 
   const addIf = (key, shouldAdd = true) => activeExtensions.includes(key) && shouldAdd && key;
 
-  const imagePlugin = opts.image && opts.image.onDelete;
+  const imagePlugin = opts.image && opts.image.delete;
   const mathPlugin = opts.math;
   const respAreaPlugin = opts.responseArea && opts.responseArea.type;
   const cssPlugin = !isEmpty(opts.extraCSSRules);

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/NEXT.CHANGELOG.json

@@ -1 +0,0 @@
-[]