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

package/src/extensions/responseArea.js

@@ -1,407 +0,0 @@
-import React from 'react';
-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 MathTemplated from '../components/respArea/MathTemplated';
-
-const lastIndexMap = {};
-
-const normalizeType = (type) => String(type || '').replace(/-/g, '_');
-
-const getAttrIndex = (node) => (node && node.attrs && node.attrs.index != null ? String(node.attrs.index) : null);
-
-const collectNodesOfType = (doc, typeName) => {
-  const results = [];
-
-  doc.descendants((node, pos) => {
-    if (node.type && node.type.name === typeName) {
-      const index = getAttrIndex(node);
-      if (index != null) results.push({ index, pos, node });
-    }
-    return true;
-  });
-
-  return results;
-};
-
-const countNodesOfType = (doc, typeName) => {
-  let count = 0;
-  doc.descendants((node) => {
-    if (node.type && node.type.name === typeName) count += 1;
-    return true;
-  });
-  return count;
-};
-
-const getDefaultNode = ({ schema, typeName, index }) => {
-  const nodeType = schema.nodes[typeName];
-  if (!nodeType) return null;
-
-  // mirror your Slate "getDefaultElement(opts, newIndex)"
-  // customize attrs as needed:
-  return nodeType.create({
-    index: String(index),
-    id: String(index),
-    value: '',
-  });
-};
-
-// Find a good cursor position *after* an inserted node.
-const selectionAfterPos = (doc, pos) => {
-  const $pos = doc.resolve(Math.min(pos, doc.content.size));
-  return TextSelection.near($pos, 1);
-};
-
-export const ResponseAreaExtension = Extension.create({
-  name: 'responseArea',
-
-  addOptions() {
-    return {
-      maxResponseAreas: null,
-      error: null,
-      options: null,
-      respAreaToolbar: null,
-      onHandleAreaChange: null,
-    };
-  },
-
-  addProseMirrorPlugins() {
-    if (!this.options.type) {
-      return [];
-    }
-
-    const typeName = normalizeType(this.options.type);
-    const key = new PluginKey(`response-area-watcher:${typeName}`);
-
-    return [
-      new Plugin({
-        key,
-
-        view: (view) => {
-          // Lazy init lastIndexMap[typeName]
-          if (lastIndexMap[typeName] === undefined) {
-            lastIndexMap[typeName] = 0;
-
-            view.state.doc.descendants((node) => {
-              if (node.type && node.type.name === typeName) {
-                const idx = getAttrIndex(node);
-                if (idx != null) {
-                  const n = parseInt(idx, 10);
-                  if (!Number.isNaN(n) && n > lastIndexMap[typeName]) {
-                    lastIndexMap[typeName] = n;
-                  }
-                }
-              }
-              return true;
-            });
-          }
-
-          return {
-            update: (view, prevState) => {
-              const state = view.state;
-              if (prevState.doc.eq(state.doc)) return;
-
-              const currentList = collectNodesOfType(state.doc, typeName);
-              const oldList = collectNodesOfType(prevState.doc, typeName);
-
-              if (this.options.toolbar) {
-                this.options.toolbar.disabled = currentList.length >= this.options.maxResponseAreas;
-              }
-
-              // Removed elements (same logic as Slate)
-              if (oldList.length > currentList.length) {
-                const currentIndexSet = new Set(currentList.map((x) => x.index));
-
-                const removed = oldList.filter((x) => !currentIndexSet.has(x.index));
-
-                if (removed.length && typeof this.options.onHandleAreaChange === 'function') {
-                  this.options.onHandleAreaChange(removed);
-                }
-              }
-            },
-          };
-        },
-      }),
-    ];
-  },
-
-  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 + 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;
-            }
-          };
-
-          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) ---
-          // Only types whose node view opens its own toolbar on selection
-          // (inline_dropdown, explicit_constructed_response) benefit from a
-          // NodeSelection here — the toolbar is the visual feedback that it's
-          // selected. math_templated has no such UI, so a NodeSelection there
-          // just looks unfocused (a highlighted node, no blinking caret);
-          // moving the cursor to just after it gives a real, visible caret.
-          if (['inline_dropdown', 'explicit_constructed_response'].includes(typeName)) {
-            tr.setSelection(NodeSelection.create(tr.doc, usedPos));
-          } else {
-            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;
-        },
-    };
-  },
-});
-
-/**
- * ExplicitConstructedResponse Node
- */
-export const ExplicitConstructedResponseNode = Node.create({
-  name: 'explicit_constructed_response',
-  group: 'inline',
-  inline: true,
-  atom: true,
-  addAttributes() {
-    return {
-      index: { default: null },
-      value: { default: '' },
-      updated: { default: '' },
-    };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: 'span[data-type="explicit_constructed_response"]',
-        getAttrs: (el) => ({
-          index: el.dataset.index,
-          value: el.dataset.value,
-        }),
-      },
-    ];
-  },
-  renderHTML({ HTMLAttributes }) {
-    return [
-      'span',
-      {
-        'data-type': 'explicit_constructed_response',
-        'data-index': HTMLAttributes.index,
-        'data-value': HTMLAttributes.value,
-      },
-    ];
-  },
-  addNodeView() {
-    return ReactNodeViewRenderer((props) => <ExplicitConstructedResponse {...{ ...props, options: this.options }} />);
-  },
-});
-
-/**
- * MathTemplated Node
- */
-export const MathTemplatedNode = Node.create({
-  name: 'math_templated',
-  group: 'inline',
-  inline: true,
-  atom: true,
-  addAttributes() {
-    return {
-      index: { default: null },
-      value: { default: '' },
-      updated: { default: '' },
-    };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: 'span[data-type="math_templated"]',
-        getAttrs: (el) => ({
-          index: el.dataset.index,
-          value: el.dataset.value,
-        }),
-      },
-    ];
-  },
-  renderHTML({ HTMLAttributes }) {
-    return [
-      'span',
-      {
-        'data-type': 'math_templated',
-        'data-index': HTMLAttributes.index,
-        'data-value': HTMLAttributes.value,
-      },
-    ];
-  },
-  addNodeView() {
-    return ReactNodeViewRenderer((props) => <MathTemplated {...{ ...props, options: this.options }} />);
-  },
-});
-
-/**
- * DragInTheBlank Node
- */
-export const DragInTheBlankNode = Node.create({
-  name: 'drag_in_the_blank',
-  group: 'inline',
-  inline: true,
-  atom: true,
-  addAttributes() {
-    return {
-      index: { default: null },
-      id: { default: null },
-      value: { default: '' },
-      inTable: { default: null },
-      updated: { default: '' },
-    };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: 'span[data-type="drag_in_the_blank"]',
-        getAttrs: (el) => ({
-          index: el.dataset.index,
-          id: el.dataset.id,
-          value: el.dataset.value,
-          inTable: el.dataset.inTable,
-        }),
-      },
-    ];
-  },
-  renderHTML({ HTMLAttributes }) {
-    return [
-      'span',
-      {
-        'data-type': 'drag_in_the_blank',
-        'data-index': HTMLAttributes.index,
-        'data-id': HTMLAttributes.id,
-        'data-value': HTMLAttributes.value,
-        'data-in-table': HTMLAttributes.inTable,
-      },
-    ];
-  },
-  addNodeView() {
-    return ReactNodeViewRenderer((props) => <DragInTheBlank {...{ ...props, options: this.options }} />);
-  },
-});
-
-/**
- * InlineDropdown Node
- */
-export const InlineDropdownNode = Node.create({
-  name: 'inline_dropdown',
-  group: 'inline',
-  inline: true,
-  atom: true,
-  addAttributes() {
-    return {
-      index: { default: null },
-      value: { default: '' },
-      updated: { default: '' },
-    };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: 'span[data-type="inline_dropdown"]',
-        getAttrs: (el) => ({
-          index: el.dataset.index,
-          value: el.dataset.value,
-        }),
-      },
-    ];
-  },
-  renderHTML({ HTMLAttributes }) {
-    return [
-      'span',
-      {
-        'data-type': 'inline_dropdown',
-        'data-index': HTMLAttributes.index,
-        'data-value': HTMLAttributes.value,
-      },
-    ];
-  },
-  addNodeView() {
-    return ReactNodeViewRenderer((props) => <InlineDropdown {...{ ...props, options: this.options }} />);
-  },
-});

package/src/index.jsx

@@ -1,5 +0,0 @@
-import StyledEditor, { EditableHtml } from './components/EditableHtml';
-import { ALL_PLUGINS, DEFAULT_PLUGINS } from './extensions';
-import { deleteInlineDropdownByIndex } from './components/respArea/inlineDropdownUtils';
-export { EditableHtml, ALL_PLUGINS, DEFAULT_PLUGINS, deleteInlineDropdownByIndex };
-export default StyledEditor;

package/src/styles/editorContainerStyles.js

@@ -1,145 +0,0 @@
-import { color } from '@pie-lib/render-ui';
-
-const styles = (theme) => ({
-  root: {
-    position: 'relative',
-    padding: '0px',
-    border: '1px solid #ccc',
-    borderRadius: '4px',
-    cursor: 'text',
-    '& [data-slate-editor="true"]': {
-      wordBreak: 'break-word',
-      overflow: 'visible',
-      maxHeight: '500px',
-      // needed in order to be able to put the focus before a void element when it is the first one in the editor
-      padding: '5px',
-    },
-
-    '&:first-child': {
-      marginTop: 0,
-    },
-
-    '& ul, & ol': {
-      padding: '0 1rem',
-      margin: '1.25rem 1rem 1.25rem 0.4rem',
-    },
-
-    '& ul li p, & ol li p': {
-      marginTop: '0.25em',
-      marginBottom: '0.25em',
-    },
-
-    '& h1, & h2, & h3, & h4, & h5, & h6': {
-      lineHeight: 1.1,
-      marginTop: '2.5rem',
-      textWrap: 'pretty',
-    },
-
-    '& h1, & h2': {
-      marginTop: '3.5rem',
-      marginBottom: '1.5rem',
-    },
-
-    '& h1': {
-      fontSize: '1.4rem',
-    },
-
-    '& h2': {
-      fontSize: '1.2rem',
-    },
-
-    '& h3': {
-      fontSize: '1.1rem',
-    },
-
-    '& h4, & h5, & h6': {
-      fontSize: '1rem',
-    },
-
-    '& code': {
-      backgroundColor: 'var(--purple-light)',
-      borderRadius: '0.4rem',
-      color: 'var(--black)',
-      fontSize: '0.85rem',
-      padding: '0.25em 0.3em',
-    },
-
-    '& pre': {
-      background: 'var(--black)',
-      borderRadius: '0.5rem',
-      color: 'var(--white)',
-      fontFamily: '\'JetBrainsMono\', monospace',
-      margin: '1.5rem 0',
-      padding: '0.75rem 1rem',
-
-      '& code': {
-        background: 'none',
-        color: 'inherit',
-        fontSize: '0.8rem',
-        padding: 0,
-      },
-    },
-
-    '& blockquote': {
-      background: '#f9f9f9',
-      borderLeft: '5px solid #ccc',
-      margin: '1.5em 10px',
-      padding: '.5em 10px',
-    },
-
-    '& hr': {
-      border: 'none',
-      borderTop: '1px solid var(--gray-2)',
-      margin: '2rem 0',
-    },
-
-    '& table': {
-      tableLayout: 'fixed',
-      width: '100%',
-      borderCollapse: 'collapse',
-      color: color.text(),
-      backgroundColor: color.background(),
-    },
-    '& table:not([border="1"]) tr': {
-      borderTop: '1px solid #dfe2e5',
-    },
-    '& td, th': {
-      padding: '.6em 1em',
-      textAlign: 'center',
-    },
-    '& table:not([border="1"]) td, th': {
-      border: '1px solid #dfe2e5',
-    },
-  },
-  children: {
-    padding: '10px 16px',
-  },
-  editorHolder: {
-    position: 'relative',
-    padding: '0px',
-    overflowY: 'auto',
-    color: color.text(),
-    backgroundColor: color.background(),
-  },
-  disabledScrollbar: {
-    '&::-webkit-scrollbar': {
-      display: 'none',
-    },
-    scrollbarWidth: 'none',
-    '-ms-overflow-style': 'none',
-  },
-  error: {
-    border: `2px solid ${theme.palette.error.main} !important`,
-  },
-  noBorder: {
-    border: 'none',
-  },
-  noPadding: {
-    padding: 0,
-  },
-  toolbarOnTop: {
-    marginTop: '45px',
-  },
-});
-
-export default styles;

package/src/theme.js

@@ -1 +0,0 @@
-export const primary = '#304ffe';

package/src/utils/__tests__/helper.test.js

@@ -1,126 +0,0 @@
-import { normalizeInitialMarkup } from '../helper';
-
-describe('normalizeInitialMarkup', () => {
-  describe('basic normalization', () => {
-    it('returns empty div for empty string', () => {
-      expect(normalizeInitialMarkup('')).toBe('<div></div>');
-    });
-
-    it('returns empty div for null', () => {
-      expect(normalizeInitialMarkup(null)).toBe('<div></div>');
-    });
-
-    it('returns empty div for undefined', () => {
-      expect(normalizeInitialMarkup(undefined)).toBe('<div></div>');
-    });
-
-    it('wraps plain text in div', () => {
-      expect(normalizeInitialMarkup('Hello')).toBe('<div>Hello</div>');
-    });
-
-    it('returns HTML tags as-is when detected as HTML', () => {
-      // Since '<script>' matches the HTML pattern, it's returned as-is
-      // To be escaped, it would need to not match the HTML pattern
-      expect(normalizeInitialMarkup('<script>')).toBe('<script>');
-    });
-
-    it('escapes HTML entities in plain text', () => {
-      // Plain text without angle brackets gets escaped
-      expect(normalizeInitialMarkup('Hello & World')).toBe('<div>Hello &amp; World</div>');
-    });
-
-    it('returns single div as-is', () => {
-      const html = '<div>Hello</div>';
-      expect(normalizeInitialMarkup(html)).toBe(html);
-    });
-
-    it('returns paragraph as-is', () => {
-      const html = '<p>Hello</p>';
-      expect(normalizeInitialMarkup(html)).toBe(html);
-    });
-  });
-
-  describe('consecutive divs to paragraph conversion', () => {
-    it('converts two consecutive divs to paragraph with br', () => {
-      const input = '<div>A</div><div>B</div>';
-      const expected = '<p>A<br>B</p>';
-      expect(normalizeInitialMarkup(input)).toBe(expected);
-    });
-
-    it('converts three consecutive divs to paragraph with br tags', () => {
-      const input = '<div>A</div><div>B</div><div>C</div>';
-      const expected = '<p>A<br>B<br>C</p>';
-      expect(normalizeInitialMarkup(input)).toBe(expected);
-    });
-
-    it('handles divs with whitespace', () => {
-      const input = '<div>  A  </div><div>  B  </div>';
-      const expected = '<p>  A  <br>  B  </p>';
-      expect(normalizeInitialMarkup(input)).toBe(expected);
-    });
-
-    it('handles divs with inline elements', () => {
-      const input = '<div><strong>A</strong></div><div><em>B</em></div>';
-      const expected = '<p><strong>A</strong><br><em>B</em></p>';
-      expect(normalizeInitialMarkup(input)).toBe(expected);
-    });
-
-    it('handles empty divs', () => {
-      const input = '<div></div><div>B</div>';
-      const expected = '<p><br>B</p>';
-      expect(normalizeInitialMarkup(input)).toBe(expected);
-    });
-
-    it('preserves existing br tags within divs', () => {
-      const input = '<div>A<br>A2</div><div>B</div>';
-      const expected = '<p>A<br>A2<br>B</p>';
-      expect(normalizeInitialMarkup(input)).toBe(expected);
-    });
-  });
-
-  describe('cases that should NOT convert', () => {
-    it('does not convert single div', () => {
-      const input = '<div>Hello</div>';
-      expect(normalizeInitialMarkup(input)).toBe(input);
-    });
-
-    it('does not convert divs with nested block elements', () => {
-      const input = '<div><div>Nested</div></div><div>B</div>';
-      expect(normalizeInitialMarkup(input)).toBe(input);
-    });
-
-    it('does not convert divs containing tables', () => {
-      const input = '<div><table><tr><td>A</td></tr></table></div><div>B</div>';
-      expect(normalizeInitialMarkup(input)).toBe(input);
-    });
-
-    it('does not convert divs containing lists', () => {
-      const input = '<div><ul><li>Item</li></ul></div><div>B</div>';
-      expect(normalizeInitialMarkup(input)).toBe(input);
-    });
-
-    it('does not convert mixed element types', () => {
-      const input = '<div>A</div><p>B</p>';
-      expect(normalizeInitialMarkup(input)).toBe(input);
-    });
-
-    it('does not convert paragraphs', () => {
-      const input = '<p>A</p><p>B</p>';
-      expect(normalizeInitialMarkup(input)).toBe(input);
-    });
-  });
-
-  describe('edge cases', () => {
-    it('handles divs with attributes', () => {
-      const input = '<div class="test">A</div><div>B</div>';
-      // Should not convert since we only want simple divs
-      expect(normalizeInitialMarkup(input)).toBe(input);
-    });
-
-    it('handles complex inline formatting', () => {
-      const input = '<div><strong><em>A</em></strong></div><div><u>B</u></div>';
-      const expected = '<p><strong><em>A</em></strong><br><u>B</u></p>';
-      expect(normalizeInitialMarkup(input)).toBe(expected);
-    });
-  });
-});