@pie-lib/editable-html-tip-tap 2.2.0-beta.9 → 3.0.0-next.36

package/src/extensions/media.js

@@ -1,188 +0,0 @@
-import React, { useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { mergeAttributes, Node } from '@tiptap/core';
-import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
-import MediaDialog from '../components/media/MediaDialog';
-import MediaToolbar from '../components/media/MediaToolbar';
-
-export const Media = Node.create({
-  name: 'media',
-  group: 'inline',
-  inline: true,
-  atom: true,
-
-  addAttributes() {
-    return {
-      type: { default: 'video' },
-      src: { default: null },
-      width: { default: null },
-      height: { default: null },
-      title: { default: null },
-      starts: { default: null },
-      ends: { default: null },
-      editing: { default: false },
-      tag: { default: 'iframe' }, // 'iframe' or 'audio'
-      url: { default: null },
-    };
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: 'iframe[data-type="video"]',
-        getAttrs: (el) => ({
-          type: 'video',
-          tag: 'iframe',
-          src: el.getAttribute('src'),
-          width: el.getAttribute('width'),
-          height: el.getAttribute('height'),
-          title: el.dataset.title,
-          starts: el.dataset.starts,
-          ends: el.dataset.ends,
-          url: el.dataset.url,
-        }),
-      },
-      {
-        tag: 'audio',
-        getAttrs: (el) => ({
-          type: 'audio',
-          tag: 'audio',
-          src: el.querySelector('source')?.getAttribute('src'),
-        }),
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    const { tag, src, width, height } = HTMLAttributes;
-
-    if (tag === 'audio') {
-      return ['audio', { controls: 'controls', controlsList: 'nodownload' }, ['source', { src, type: 'audio/mp3' }]];
-    }
-
-    return [
-      'iframe',
-      mergeAttributes(
-        {
-          'data-type': 'video',
-          frameborder: '0',
-          allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
-          allowfullscreen: '',
-          src,
-        },
-        width ? { width } : {},
-        height ? { height } : {},
-      ),
-    ];
-  },
-
-  addCommands() {
-    return {
-      insertMedia:
-        (attrs) =>
-        ({ commands }) => {
-          return commands.insertContent({ type: this.name, attrs });
-        },
-      updateMedia:
-        (attrs) =>
-        ({ commands }) => {
-          return commands.updateAttributes(this.name, attrs);
-        },
-    };
-  },
-
-  addNodeView() {
-    return ReactNodeViewRenderer((props) => <MediaNodeView {...{ ...props, options: this.options }} />);
-  },
-});
-
-const removeDialogs = () => {
-  const prevDialogs = document.querySelectorAll('.insert-media-dialog');
-
-  prevDialogs.forEach((s) => s.remove());
-};
-
-export const insertDialog = (props) => {
-  const newEl = document.createElement('div');
-  const { type, callback, options, ...rest } = props;
-  const initialBodyOverflow = document.body.style.overflow;
-
-  removeDialogs();
-
-  newEl.className = 'insert-media-dialog';
-  document.body.style.overflow = 'hidden';
-
-  const handleClose = (val, data) => {
-    callback(val, data);
-    newEl.remove();
-    document.body.style.overflow = initialBodyOverflow;
-  };
-
-  const el = (
-    <MediaDialog
-      {...rest}
-      uploadSoundSupport={options.uploadSoundSupport}
-      type={type}
-      disablePortal={true}
-      open={true}
-      handleClose={handleClose}
-    />
-  );
-
-  ReactDOM.render(el, newEl);
-
-  document.body.appendChild(newEl);
-};
-
-export default function MediaNodeView({ editor, node, updateAttributes, deleteNode, options }) {
-  const { type, src, width, height, tag } = node.attrs;
-
-  const handleEdit = () => {
-    insertDialog({
-      ...node.attrs,
-      options: options,
-      edit: true,
-      callback: (val, data) => {
-        if (val) {
-          updateAttributes(data);
-        }
-
-        editor.chain().focus().run();
-      },
-    });
-  };
-
-  useEffect(() => {
-    // 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 (
-    <NodeViewWrapper data-type={type} style={{ width, height }}>
-      {tag === 'audio' ? (
-        <audio controls controlsList="nodownload">
-          <source type="audio/mp3" src={src} />
-        </audio>
-      ) : (
-        <iframe src={src} allowFullScreen frameBorder="0" width={width} height={height} />
-      )}
-
-      <MediaToolbar onEdit={handleEdit} onRemove={deleteNode} />
-    </NodeViewWrapper>
-  );
-}

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;