@pie-lib/editable-html-tip-tap 2.1.2-next.31 → 2.1.2-next.34

package/src/extensions/responseArea.js

@@ -0,0 +1,401 @@
+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) ---
+          if (['math_templated', '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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,145 @@
+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

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

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

@@ -0,0 +1,126 @@
+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);
+    });
+  });
+});