@pie-lib/editable-html-tip-tap 1.0.11 → 1.0.13

package/src/extensions/index.js

@@ -57,10 +57,10 @@ export const buildExtensions = (activeExtensions, customExtensions, opts) => {
     addIf('superscript'),
     // icon should be modifies accordingly
     addIf('subscript'),
-    addIf('image', imagePlugin),
+    addIf('image', !!imagePlugin),
     addIf('video'),
     addIf('audio'),
-    addIf('math', mathPlugin),
+    addIf('math', !!mathPlugin),
     ...languageCharactersPlugins.map((plugin) => addIf('languageCharacters', plugin)),
     addIf('text-align'),
     addIf('blockquote'),
@@ -69,8 +69,8 @@ export const buildExtensions = (activeExtensions, customExtensions, opts) => {
     addIf('numbered-list'),
     addIf('undo'),
     addIf('redo'),
-    addIf('responseArea', respAreaPlugin),
-    addIf('css', cssPlugin),
+    addIf('responseArea', !!respAreaPlugin),
+    addIf('css', !!cssPlugin),
     addIf('html', !!opts.html),
   ]);
 };

package/src/extensions/math.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
 import { Extension, Node, mergeAttributes } from '@tiptap/core';
 import { NodeViewWrapper, ReactRenderer, ReactNodeViewRenderer } from '@tiptap/react';
 import { Plugin, PluginKey, NodeSelection, TextSelection } from 'prosemirror-state';
@@ -118,7 +119,6 @@ export const MathNode = Node.create({
   addCommands() {
     return {
       insertMath: (latex = '') => ({ tr, editor, dispatch }) => {
-        // 2) Now the editor.view.state reflects the insertion
         const { state } = editor.view;
         const node = state.schema.nodes.math.create({
           latex,
@@ -172,6 +172,7 @@ export const MathNodeView = (props) => {
   const { node, updateAttributes, editor, selected, options } = props;
   const [showToolbar, setShowToolbar] = useState(selected);
   const toolbarRef = useRef(null);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
 
   const latex = node.attrs.latex || '';
 
@@ -186,6 +187,15 @@ export const MathNodeView = (props) => {
   }, [showToolbar]);
 
   useEffect(() => {
+    // Calculate position relative to selection
+    const bodyRect = document.body.getBoundingClientRect();
+    const { from } = editor.state.selection;
+    const start = editor.view.coordsAtPos(from);
+    setPosition({
+      top: start.top + Math.abs(bodyRect.top) + 40, // shift above
+      left: start.left,
+    });
+
     const handleClickOutside = (event) => {
       if (
         toolbarRef.current &&
@@ -203,7 +213,7 @@ export const MathNodeView = (props) => {
     }
 
     return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [showToolbar]);
+  }, [editor, showToolbar]);
 
   const handleChange = (newLatex) => {
     updateAttributes({ latex: newLatex });
@@ -237,23 +247,24 @@ export const MathNodeView = (props) => {
       <div onClick={() => setShowToolbar(true)} contentEditable={false}>
         <MathPreview latex={latex} />
       </div>
-
-      {showToolbar && (
-        <div
-          ref={toolbarRef}
-          style={{
-            position: 'absolute',
-            top: '100%',
-            left: 0,
-            zIndex: 20,
-            background: 'var(--editable-html-toolbar-bg, #efefef)',
-            boxShadow:
-              '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
-          }}
-        >
-          <MathToolbar latex={latex} autoFocus onChange={handleChange} onDone={handleDone} keypadMode="basic" />
-        </div>
-      )}
+      {showToolbar &&
+        ReactDOM.createPortal(
+          <div
+            ref={toolbarRef}
+            style={{
+              position: 'absolute',
+              top: `${position.top}px`,
+              left: `${position.left}px`,
+              zIndex: 20,
+              background: 'var(--editable-html-toolbar-bg, #efefef)',
+              boxShadow:
+                '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
+            }}
+          >
+            <MathToolbar latex={latex} autoFocus onChange={handleChange} onDone={handleDone} keypadMode="basic" />
+          </div>,
+          document.body,
+        )}
     </NodeViewWrapper>
   );
 };

package/src/extensions/responseArea.js

@@ -1,12 +1,9 @@
-// InlineNodes.js
 import React from 'react';
 import { Node, ReactNodeViewRenderer, ReactRenderer } from '@tiptap/react';
 import ExplicitConstructedResponse from '../components/respArea/ExplicitConstructedResponse';
 import DragInTheBlank from '../components/respArea/DragInTheBlank/DragInTheBlank';
 import InlineDropdown from '../components/respArea/InlineDropdown';
 import { Extension } from '@tiptap/core';
-import { MathToolbar } from '@pie-lib/math-toolbar';
-import tippy from 'tippy.js';
 
 export const ResponseAreaExtension = Extension.create({
   name: 'responseArea',

package/src/styles/editorContainerStyles.js

@@ -120,36 +120,6 @@ const styles = (theme) => ({
     overflowY: 'auto',
     color: color.text(),
     backgroundColor: color.background(),
-    '&::before': {
-      left: '0',
-      right: '0',
-      bottom: '0',
-      height: '1px',
-      content: '""',
-      position: 'absolute',
-      transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-      pointerEvents: 'none',
-      backgroundColor: 'rgba(0, 0, 0, 0.42)',
-    },
-    '&::after': {
-      left: '0',
-      right: '0',
-      bottom: '0',
-      height: '1px',
-      content: '""',
-      position: 'absolute',
-      transform: 'scaleX(0)',
-      transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 200ms linear',
-      backgroundColor: 'rgba(0, 0, 0, 0.42)',
-    },
-  },
-  disabledUnderline: {
-    '&::before': {
-      display: 'none',
-    },
-    '&::after': {
-      display: 'none',
-    },
   },
   disabledScrollbar: {
     '&::-webkit-scrollbar': {
@@ -158,33 +128,6 @@ const styles = (theme) => ({
     scrollbarWidth: 'none',
     '-ms-overflow-style': 'none',
   },
-  readOnly: {
-    '&::before': {
-      background: 'transparent',
-      backgroundSize: '5px 1px',
-      backgroundImage: 'linear-gradient(to right, rgba(0, 0, 0, 0.42) 33%, transparent 0%)',
-      backgroundRepeat: 'repeat-x',
-      backgroundPosition: 'left top',
-    },
-    '&::after': {
-      left: '0',
-      right: '0',
-      bottom: '0',
-      height: '1px',
-      content: '""',
-      position: 'absolute',
-      transform: 'scaleX(0)',
-      transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 0ms linear',
-      backgroundColor: 'rgba(0, 0, 0, 0)',
-    },
-    '&:hover': {
-      '&::after': {
-        transform: 'scaleX(0)',
-        backgroundColor: theme.palette.common.black,
-        height: '2px',
-      },
-    },
-  },
   error: {
     border: `2px solid ${theme.palette.error.main} !important`,
   },