@pie-lib/editable-html-tip-tap 1.0.10 → 1.0.12

package/src/components/characters/characterUtils.js

@@ -117,7 +117,327 @@ export const specialConfig = {
         label: 'Ñ',
       },
     ],
-    // remaining rows kept identical to original utils.js...
+    [
+      {
+        unicode: 'U+00A3',
+        description: 'POUND SIGN',
+        write: '£',
+        label: '£',
+      },
+      {
+        unicode: 'U+00AB',
+        description: 'LEFT-POINTING DOUBLE ANGLE QUOTATION MARK',
+        write: '«',
+        label: '«',
+      },
+      {
+        unicode: 'U+005E',
+        description: 'CIRCUMFLEX ACCENT',
+        write: '^',
+        label: '^',
+        extraProps: { style: { gridRow: 'span 2' } },
+      },
+      {
+        unicode: 'U+00E2',
+        description: 'LATIN SMALL LETTER A WITH CIRCUMFLEX',
+        write: 'â',
+        label: 'â',
+      },
+      {
+        unicode: 'U+00EA',
+        description: 'LATIN SMALL LETTER E WITH CIRCUMFLEX',
+        write: 'ê',
+        label: 'ê',
+      },
+      {
+        unicode: 'U+00EE',
+        description: 'LATIN SMALL LETTER I WITH CIRCUMFLEX',
+        write: 'î',
+        label: 'î',
+      },
+      {
+        unicode: 'U+00F4',
+        description: 'LATIN SMALL LETTER O WITH CIRCUMFLEX',
+        write: 'ô',
+        label: 'ô',
+      },
+      {
+        unicode: 'U+00FB',
+        description: 'LATIN SMALL LETTER U WITH CIRCUMFLEX',
+        write: 'û',
+        label: 'û',
+      },
+      {
+        unicode: 'U+00E7',
+        description: 'LATIN SMALL LETTER C WITH CEDILLA',
+        write: 'ç',
+        label: 'ç',
+      },
+    ],
+    [
+      {
+        unicode: 'U+00A5',
+        description: 'YEN SIGN',
+        write: '¥',
+        label: '¥',
+      },
+      {
+        unicode: 'U+00BB',
+        description: 'RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK',
+        write: '»',
+        label: '»',
+      },
+      {
+        unicode: 'U+00C2',
+        description: 'LATIN CAPITAL LETTER A WITH CIRCUMFLEX',
+        write: 'Â',
+        label: 'Â',
+      },
+      {
+        unicode: 'U+00CA',
+        description: 'LATIN CAPITAL LETTER E WITH CIRCUMFLEX',
+        write: 'Ê',
+        label: 'Ê',
+      },
+      {
+        unicode: 'U+00CE',
+        description: 'LATIN CAPITAL LETTER I WITH CIRCUMFLEX',
+        write: 'Î',
+        label: 'Î',
+      },
+      {
+        unicode: 'U+00D4',
+        description: 'LATIN CAPITAL LETTER O WITH CIRCUMFLEX',
+        write: 'Ô',
+        label: 'Ô',
+      },
+      {
+        unicode: 'U+00DB',
+        description: 'LATIN CAPITAL LETTER U WITH CIRCUMFLEX',
+        write: 'Û',
+        label: 'Û',
+      },
+      {
+        unicode: 'U+00C7',
+        description: 'LATIN CAPITAL LETTER C WITH CEDILLA',
+        write: 'Ç',
+        label: 'Ç',
+      },
+    ],
+    [
+      {
+        unicode: 'U+200A',
+        description: 'HAIR SPACE',
+        write: String.fromCodePoint('0x200A'),
+        label: ' ',
+      },
+      {
+        unicode: 'U+00A7',
+        description: 'SECTION SIGN',
+        write: '§',
+        label: '§',
+      },
+      {
+        unicode: 'U+00A8',
+        description: 'DIAERESIS',
+        write: '¨',
+        label: '¨',
+        extraProps: { style: { gridRow: 'span 2' } },
+      },
+      {
+        unicode: 'U+00E4',
+        description: 'LATIN SMALL LETTER A WITH DIAERESIS',
+        write: 'ä',
+        label: 'ä',
+      },
+      {
+        unicode: 'U+00EB',
+        description: 'LATIN SMALL LETTER E WITH DIAERESIS',
+        write: 'ë',
+        label: 'ë',
+      },
+      {
+        unicode: 'U+00EF',
+        description: 'LATIN SMALL LETTER I WITH DIAERESIS',
+        write: 'ï',
+        label: 'ï',
+      },
+      {
+        unicode: 'U+00F6',
+        description: 'LATIN SMALL LETTER O WITH DIAERESIS',
+        write: 'ö',
+        label: 'ö',
+      },
+      {
+        unicode: 'U+00FC',
+        description: 'LATIN SMALL LETTER U WITH DIAERESIS',
+        write: 'ü',
+        label: 'ü',
+      },
+      {
+        unicode: 'U+00DF',
+        description: 'LATIN SMALL LETTER SHARP S',
+        write: 'ß',
+        label: 'ß',
+      },
+    ],
+    [
+      {
+        unicode: 'U+2009',
+        description: 'THIN SPACE',
+        write: String.fromCodePoint('0x2009'),
+        label: ' ',
+      },
+      {
+        unicode: 'U+2026',
+        description: 'HORIZONTAL ELLIPSIS',
+        write: '…',
+        label: '…',
+      },
+      {
+        unicode: 'U+00C4',
+        description: 'LATIN CAPITAL LETTER A WITH DIAERESIS',
+        write: 'Ä',
+        label: 'Ä',
+      },
+      {
+        unicode: 'U+00CB',
+        description: 'LATIN CAPITAL LETTER E WITH DIAERESIS',
+        write: 'Ë',
+        label: 'Ë',
+      },
+      {
+        unicode: 'U+00CF',
+        description: 'LATIN CAPITAL LETTER I WITH DIAERESIS',
+        write: 'Ï',
+        label: 'Ï',
+      },
+      {
+        unicode: 'U+00D6',
+        description: 'LATIN CAPITAL LETTER O WITH DIAERESIS',
+        write: 'Ö',
+        label: 'Ö',
+      },
+      {
+        unicode: 'U+00DC',
+        description: 'LATIN CAPITAL LETTER U WITH DIAERESIS',
+        write: 'Ü',
+        label: 'Ü',
+      },
+      {
+        unicode: 'U+2212',
+        description: 'MINUS SIGN',
+        write: '−',
+        label: '−',
+      },
+    ],
+    [
+      {
+        unicode: 'U+00A0',
+        description: 'NO-BREAK SPACE',
+        write: String.fromCodePoint('0x00A0'),
+        label: ' ',
+      },
+      {
+        unicode: 'U+2022',
+        description: 'BULLET',
+        write: '•',
+        label: '•',
+      },
+      {
+        unicode: 'U+0060',
+        description: 'GRAVE ACCENT',
+        write: '`',
+        label: '`',
+        extraProps: { style: { gridRow: 'span 2' } },
+      },
+      {
+        unicode: 'U+00E0',
+        description: 'LATIN SMALL LETTER A WITH GRAVE',
+        write: 'à',
+        label: 'à',
+      },
+      {
+        unicode: 'U+00E8',
+        description: 'LATIN SMALL LETTER E WITH GRAVE',
+        write: 'è',
+        label: 'è',
+      },
+      {
+        unicode: 'U+00EC',
+        description: 'LATIN SMALL LETTER I WITH GRAVE',
+        write: 'ì',
+        label: 'ì',
+      },
+      {
+        unicode: 'U+00F2',
+        description: 'LATIN SMALL LETTER O WITH GRAVE',
+        write: 'ò',
+        label: 'ò',
+      },
+      {
+        unicode: 'U+00F9',
+        description: 'LATIN SMALL LETTER U WITH GRAVE',
+        write: 'ù',
+        label: 'ù',
+      },
+      {
+        unicode: 'U+2013',
+        description: 'EN DASH',
+        write: '–',
+        label: '–',
+      },
+    ],
+    [
+      {
+        unicode: 'U+2003',
+        description: 'EM SPACE',
+        write: String.fromCodePoint('0x2003'),
+        label: ' ',
+      },
+      {
+        unicode: 'U+25E6',
+        description: 'WHITE BULLET',
+        write: '◦',
+        label: '◦',
+      },
+      {
+        unicode: 'U+00C0',
+        description: 'LATIN CAPITAL LETTER A WITH GRAVE',
+        write: 'À',
+        label: 'À',
+      },
+      {
+        unicode: 'U+00C8',
+        description: 'LATIN CAPITAL LETTER E WITH GRAVE',
+        write: 'È',
+        label: 'È',
+      },
+      {
+        unicode: 'U+00CC',
+        description: 'LATIN CAPITAL LETTER I WITH GRAVE',
+        write: 'Ì',
+        label: 'Ì',
+      },
+      {
+        unicode: 'U+00D2',
+        description: 'LATIN CAPITAL LETTER O WITH GRAVE',
+        write: 'Ò',
+        label: 'Ò',
+      },
+      {
+        unicode: 'U+00D9',
+        description: 'LATIN CAPITAL LETTER U WITH GRAVE',
+        write: 'Ù',
+        label: 'Ù',
+      },
+      {
+        unicode: 'U+2014',
+        description: 'EM DASH',
+        write: '—',
+        label: '—',
+      },
+    ],
   ],
 };
 

package/src/components/respArea/ExplicitConstructedResponse.jsx

@@ -18,8 +18,17 @@ const ExplicitConstructedResponse = (props) => {
   };
 
   useEffect(() => {
-    setShowToolbar(selected);
-  }, [selected]);
+    const { selection } = editor.state;
+    const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;
+
+    if (selected) {
+      if (onlyThisNodeSelected) {
+        setShowToolbar(selected);
+      }
+    } else {
+      setShowToolbar(selected);
+    }
+  }, [editor, node, selected]);
 
   useEffect(() => {
     const handleClickOutside = (event) => {

package/src/components/respArea/InlineDropdown.jsx

@@ -15,8 +15,17 @@ const InlineDropdown = (props) => {
   const InlineDropdownToolbar = options.respAreaToolbar(node, editor, () => {});
 
   useEffect(() => {
-    setShowToolbar(selected);
-  }, [selected]);
+    const { selection } = editor.state;
+    const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;
+
+    if (selected) {
+      if (onlyThisNodeSelected) {
+        setShowToolbar(selected);
+      }
+    } else {
+      setShowToolbar(selected);
+    }
+  }, [editor, node, selected]);
 
   useEffect(() => {
     const handleClickOutside = (event) => {

package/src/extensions/component.jsx

@@ -56,8 +56,17 @@ function ImageComponent(props) {
   }, [editor, node.attrs, getPercentFromWidth]);
 
   useEffect(() => {
-    setShowToolbar(selected);
-  }, [selected]);
+    const { selection } = editor.state;
+    const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;
+
+    if (selected) {
+      if (onlyThisNodeSelected) {
+        setShowToolbar(selected);
+      }
+    } else {
+      setShowToolbar(selected);
+    }
+  }, [editor, node, selected]);
 
   useEffect(() => {
     options.imageHandling.insertImageRequested(node, (finish) => new InsertImageHandler(editor, node, finish));

package/src/extensions/image.js

@@ -3,8 +3,6 @@ import { ReactNodeViewRenderer } from '@tiptap/react';
 import React from 'react';
 import ImageComponent from './component';
 
-// ---- Tiptap Extension ---- //
-
 export const ImageUploadNode = Node.create({
   name: 'imageUploadNode',
 
@@ -34,7 +32,6 @@ export const ImageUploadNode = Node.create({
     ];
   },
 
-  // ✅ No `0` here!
   renderHTML({ HTMLAttributes }) {
     return ['img', mergeAttributes(HTMLAttributes, { 'data-type': 'image-upload-node' })];
   },

package/src/extensions/math.js

@@ -4,6 +4,8 @@ import { NodeViewWrapper, ReactRenderer, ReactNodeViewRenderer } from '@tiptap/r
 import { Plugin, PluginKey, NodeSelection, TextSelection } from 'prosemirror-state';
 import { MathPreview, MathToolbar } from '@pie-lib/math-toolbar';
 import { wrapMath, mmlToLatex, renderMath } from '@pie-lib/math-rendering';
+import ReactDOM from 'react-dom';
+import CustomPopper from '../components/characters/custom-popper';
 
 const ensureTextAfterMathPluginKey = new PluginKey('ensureTextAfterMath');
 
@@ -118,7 +120,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 +173,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 +188,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 +214,7 @@ export const MathNodeView = (props) => {
     }
 
     return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [showToolbar]);
+  }, [editor, showToolbar]);
 
   const handleChange = (newLatex) => {
     updateAttributes({ latex: newLatex });
@@ -237,23 +248,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

@@ -117,40 +117,9 @@ const styles = (theme) => ({
   editorHolder: {
     position: 'relative',
     padding: '0px',
-    // overflowY: 'auto',
-    overflow: 'visible',
+    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': {
@@ -159,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`,
   },