@pie-lib/editable-html-tip-tap 1.2.0-next.8 → 2.0.0

package/src/components/__tests__/InsertImageHandler.test.js

@@ -6,13 +6,14 @@ describe('InsertImageHandler', () => {
     nodeSize: 1,
   };
 
+  const NODE_POS = 5;
+
+  const nodeInfo = (node = mockNode, pos = NODE_POS) => [node, pos];
+
   const createMockEditor = () => ({
+    _insertingImage: true,
     state: {
-      doc: {
-        descendants: jest.fn((callback) => {
-          callback(mockNode, 5);
-        }),
-      },
+      doc: {},
       tr: {
         setNodeMarkup: jest.fn((pos, type, attrs) => ({ setNodeMarkup: jest.fn() })),
         delete: jest.fn((from, to) => ({ delete: jest.fn() })),
@@ -31,36 +32,39 @@ describe('InsertImageHandler', () => {
 
   it('creates handler instance', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const info = nodeInfo();
+    const handler = new InsertImageHandler(editor, info, mockOnFinish);
     expect(handler).toBeDefined();
     expect(handler.editor).toBe(editor);
+    expect(handler.nodeInfo).toBe(info);
     expect(handler.node).toBe(mockNode);
     expect(handler.onFinish).toBe(mockOnFinish);
   });
 
-  it('stores nodePos from descendants', () => {
+  it('stores nodePos from nodeInfo tuple', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
-    expect(handler.nodePos).toBe(5);
+    const handler = new InsertImageHandler(editor, nodeInfo(mockNode, 42), mockOnFinish);
+    expect(handler.nodePos).toBe(42);
   });
 
   it('stores isPasted parameter', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish, true);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish, true);
     expect(handler.isPasted).toBe(true);
   });
 
   it('defaults isPasted to false', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     expect(handler.isPasted).toBe(false);
   });
 
   it('cancel deletes node and calls onFinish', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.cancel();
     expect(mockOnFinish).toHaveBeenCalledWith(false);
+    expect(editor._insertingImage).toBe(false);
   });
 
   it('updateNode dispatches transaction with new attributes', () => {
@@ -68,22 +72,23 @@ describe('InsertImageHandler', () => {
     const mockNodeAt = jest.fn(() => ({ attrs: { existing: 'value' } }));
     editor.state.doc.nodeAt = mockNodeAt;
 
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.updateNode({ newAttr: 'newValue' });
 
-    expect(mockNodeAt).toHaveBeenCalledWith(5);
+    expect(mockNodeAt).toHaveBeenCalledWith(NODE_POS);
     expect(editor.view.dispatch).toHaveBeenCalled();
   });
 
   it('done calls onFinish with false on error', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation();
 
     handler.done('error', null);
 
     expect(consoleLogSpy).toHaveBeenCalledWith('error');
     expect(mockOnFinish).toHaveBeenCalledWith(false);
+    expect(editor._insertingImage).toBe(false);
     consoleLogSpy.mockRestore();
   });
 
@@ -92,16 +97,17 @@ describe('InsertImageHandler', () => {
     const mockNodeAt = jest.fn(() => ({ attrs: {} }));
     editor.state.doc.nodeAt = mockNodeAt;
 
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.done(null, 'http://example.com/image.jpg');
 
     expect(editor.view.dispatch).toHaveBeenCalled();
     expect(mockOnFinish).toHaveBeenCalledWith(true);
+    expect(editor._insertingImage).toBe(false);
   });
 
   it('fileChosen returns early when no file provided', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.fileChosen(null);
     expect(editor.view.dispatch).not.toHaveBeenCalled();
   });
@@ -111,7 +117,7 @@ describe('InsertImageHandler', () => {
     const mockNodeAt = jest.fn(() => ({ attrs: {} }));
     editor.state.doc.nodeAt = mockNodeAt;
 
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     const mockFile = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
 
     global.FileReader = jest.fn(function () {
@@ -124,6 +130,7 @@ describe('InsertImageHandler', () => {
     handler.fileChosen(mockFile);
 
     expect(handler.chosenFile).toBe(mockFile);
+    expect(editor._insertingImage).toBe(false);
   });
 
   it('progress updates node with percent', () => {
@@ -131,7 +138,7 @@ describe('InsertImageHandler', () => {
     const mockNodeAt = jest.fn(() => ({ attrs: {} }));
     editor.state.doc.nodeAt = mockNodeAt;
 
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.progress(50, 500, 1000);
 
     expect(editor.view.dispatch).toHaveBeenCalled();
@@ -139,7 +146,7 @@ describe('InsertImageHandler', () => {
 
   it('getChosenFile returns the chosen file', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     const mockFile = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
     handler.chosenFile = mockFile;
 
@@ -148,7 +155,7 @@ describe('InsertImageHandler', () => {
 
   it('getChosenFile returns null initially', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     expect(handler.getChosenFile()).toBeNull();
   });
 });

package/src/components/__tests__/MenuBar.test.jsx

@@ -214,4 +214,36 @@ describe('StyledMenuBar', () => {
     toolbar?.dispatchEvent(event);
     expect(preventDefaultSpy).toHaveBeenCalled();
   });
+
+  it('calculates hasTextSelectionInTable correctly when selection is not empty in table', () => {
+    // This test verifies the hasTextSelectionInTable state computation
+    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table', 'bold', 'italic']} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('hides table manipulation buttons when text is selected in table', () => {
+    // When hasTextSelectionInTable is true, table row/column buttons should be hidden
+    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table']} />);
+    // The component should render but table manipulation buttons should be conditional
+    expect(container).toBeInTheDocument();
+  });
+
+  it('shows table manipulation buttons when no text is selected in table', () => {
+    // When hasTextSelectionInTable is false, table row/column buttons should be visible
+    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table']} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('shows text formatting buttons regardless of table state', () => {
+    // Bold, italic, etc. should always be visible when their plugin is active
+    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['bold', 'italic', 'underline']} />);
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBeGreaterThan(0);
+  });
+
+  it('does not hide text formatting buttons when in table', () => {
+    // Verify that the removal of "|| state.isTable" condition works correctly
+    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table', 'bold', 'italic']} />);
+    expect(container).toBeInTheDocument();
+  });
 });

package/src/components/icons/TextAlign.jsx

@@ -60,7 +60,7 @@ export default ({ editor, onChange }) => {
   }
 
   const applyAlignment = (event) => {
-    const alignType = event.target?.closest('div')?.getAttribute('value');
+    const alignType = event.currentTarget?.getAttribute('value');
 
     if (alignType) {
       editor.commands.setTextAlign(alignType);

package/src/components/image/InsertImageHandler.js

@@ -11,20 +11,11 @@ const log = debug('@pie-lib:editable-html:image:insert-image-handler');
  * @param {Boolean} isPasted - a boolean that keeps track if the file is pasted
  */
 class InsertImageHandler {
-  constructor(editor, node, onFinish, isPasted = false) {
+  constructor(editor, nodeInfo, onFinish, isPasted = false) {
     this.editor = editor;
-    this.node = node;
-
-    let nodePos;
-
-    editor.state.doc.descendants((node, pos) => {
-      if (node === this.node) {
-        nodePos = pos;
-        return false;
-      }
-    });
-
-    this.nodePos = nodePos;
+    this.nodeInfo = nodeInfo;
+    this.node = nodeInfo[0];
+    this.nodePos = nodeInfo[1];
     this.onFinish = onFinish;
     this.isPasted = isPasted;
     this.chosenFile = null;
@@ -38,6 +29,8 @@ class InsertImageHandler {
       this.onFinish(false);
     } catch (err) {
       //
+    } finally {
+      this.editor._insertingImage = false;
     }
   }
 
@@ -72,6 +65,8 @@ class InsertImageHandler {
       this.updateNode({ loaded: true, src, percent: 100 });
       this.onFinish(true);
     }
+
+    this.editor._insertingImage = false;
   }
 
   /**
@@ -86,6 +81,7 @@ class InsertImageHandler {
 
     // Save the chosen file to this.chosenFile
     this.chosenFile = file;
+    this.editor._insertingImage = false;
 
     log('[fileChosen] file: ', file);
     const reader = new FileReader();

package/src/components/respArea/DragInTheBlank/DragInTheBlank.jsx

@@ -33,7 +33,11 @@ const DragDrop = (props) => {
 
   // console.log({nodeProps.children})
   return (
-    <NodeViewWrapper className="drag-in-the-blank" data-selected={selected}>
+    <NodeViewWrapper
+      className="drag-in-the-blank"
+      data-selected={selected}
+      style={{ display: 'inline', whiteSpace: 'normal' }}
+    >
       <span
         {...attributes}
         style={{
@@ -52,6 +56,7 @@ const DragDrop = (props) => {
           pos={pos}
           value={attributes}
           duplicates={options.duplicates}
+          selected={selected}
           onChange={(choice) => onValueChange(editor, node, pos, choice)}
           removeResponse={(choice) => onRemoveResponse(editor, node, choice)}
         ></DragDropTile>

package/src/components/respArea/DragInTheBlank/choice.jsx

@@ -15,7 +15,7 @@ const StyledContent = styled('span')(({ theme }) => ({
   },
 }));
 
-export function BlankContent({ n, children, isDragging, isOver, dragItem, value }) {
+export function BlankContent({ n, children, isDragging, isOver, dragItem, value, selected }) {
   const [hoveredElementSize, setHoveredElementSize] = useState(null);
   const elementRef = useRef(null);
 
@@ -56,15 +56,22 @@ export function BlankContent({ n, children, isDragging, isOver, dragItem, value
   const hasGrip = finalLabel !== '\u00A0';
   const isPreview = dragItem && isOver;
 
+  const borderStyle = selected
+    ? `2px solid ${color.primaryDark()}`
+    : isPreview
+      ? `1px solid ${color.defaults.BORDER_DARK}`
+      : `1px solid ${color.defaults.BORDER_LIGHT}`;
+
   return (
     <div
       ref={elementRef}
+      className={selected ? 'selected' : undefined}
       style={{
         display: 'inline-flex',
         minWidth: '178px',
         minHeight: '36px',
         background: isPreview ? `${color.defaults.BORDER_LIGHT}` : `${color.defaults.WHITE}`,
-        border: isPreview ? `1px solid  ${color.defaults.BORDER_DARK}` : `1px solid  ${color.defaults.BORDER_LIGHT}`,
+        border: borderStyle,
         boxSizing: 'border-box',
         borderRadius: '3px',
         overflow: 'hidden',
@@ -72,6 +79,7 @@ export function BlankContent({ n, children, isDragging, isOver, dragItem, value
         padding: '8px 8px 8px 35px',
         width: hoveredElementSize ? hoveredElementSize.width : undefined,
         height: hoveredElementSize ? hoveredElementSize.height : undefined,
+        touchAction: 'none',
       }}
       data-key={n.index}
       contentEditable={false}
@@ -104,9 +112,21 @@ BlankContent.propTypes = {
   isOver: PropTypes.bool,
   dragItem: PropTypes.object,
   value: PropTypes.object,
+  selected: PropTypes.bool,
 };
 
-function DragDropChoice({ value, disabled, instanceId, children, n, onChange, removeResponse, duplicates, pos }) {
+function DragDropChoice({
+  value,
+  disabled,
+  instanceId,
+  children,
+  n,
+  onChange,
+  removeResponse,
+  duplicates,
+  pos,
+  selected,
+}) {
   const {
     attributes: dragAttributes,
     listeners: dragListeners,
@@ -196,7 +216,14 @@ function DragDropChoice({ value, disabled, instanceId, children, n, onChange, re
   };
 
   const dragContent = (
-    <BlankContent n={n} isDragging={isDragging} isOver={isOver} dragItem={dragItem?.data?.current} value={value}>
+    <BlankContent
+      n={n}
+      isDragging={isDragging}
+      isOver={isOver}
+      dragItem={dragItem?.data?.current}
+      value={value}
+      selected={selected}
+    >
       {children}
     </BlankContent>
   );
@@ -223,6 +250,7 @@ DragDropChoice.propTypes = {
   onChange: PropTypes.func.isRequired,
   removeResponse: PropTypes.func.isRequired,
   duplicates: PropTypes.bool,
+  selected: PropTypes.bool,
 };
 
 export default DragDropChoice;

package/src/components/respArea/ExplicitConstructedResponse.jsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { NodeViewWrapper } from '@tiptap/react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import CustomToolbarWrapper from '../../extensions/custom-toolbar-wrapper';
 
 const ExplicitConstructedResponse = (props) => {
   const { editor, node, getPos, options, selected } = props;
@@ -9,7 +11,7 @@ const ExplicitConstructedResponse = (props) => {
   const { respAreaToolbar, error: errorFn } = options;
   const pos = getPos();
   const [showToolbar, setShowToolbar] = useState(false);
-  const EcrToolbar = respAreaToolbar(node, editor, () => {});
+  const EcrToolbar = respAreaToolbar([node, pos], editor, () => {});
   const toolbarRef = useRef(null);
 
   let error;
@@ -21,12 +23,6 @@ const ExplicitConstructedResponse = (props) => {
     error = !!errorValue?.[respIndex]?.[0];
   }
 
-  const handleDone = (newLatex) => {
-    updateAttributes({ latex: newLatex });
-    setShowToolbar(false);
-    editor.commands.focus();
-  };
-
   useEffect(() => {
     const { selection } = editor.state;
     const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;
@@ -42,7 +38,11 @@ const ExplicitConstructedResponse = (props) => {
 
   useEffect(() => {
     const handleClickOutside = (event) => {
+      const insideCharacterPicker =
+        event.target.closest('.insert-character-dialog') || event.target.closest('[data-toolbar-for]');
+
       if (
+        !insideCharacterPicker &&
         toolbarRef.current &&
         !toolbarRef.current.contains(event.target) &&
         !event.target.closest('[data-inline-node]')
@@ -94,9 +94,32 @@ const ExplicitConstructedResponse = (props) => {
         }}
       />
       {showToolbar && (
-        <div ref={toolbarRef} className="absolute z-50 bg-white shadow-lg rounded p-2" style={{ zIndex: 1 }}>
-          <EcrToolbar />
-        </div>
+        <React.Fragment>
+          <div ref={toolbarRef} className="absolute z-50 bg-white shadow-lg rounded p-2" style={{ zIndex: 1 }}>
+            <EcrToolbar />
+          </div>
+          {editor._tiptapContainerEl &&
+            ReactDOM.createPortal(
+              <CustomToolbarWrapper
+                deletable
+                toolbarOpts={{ minWidth: 'auto' }}
+                autoWidth
+                style={{ top: -40, left: 0, right: 0 }}
+                onDelete={() => {
+                  const { tr } = editor.state;
+                  tr.delete(pos, pos + node.nodeSize);
+                  // Prevent the debounced onBlur/onDone from firing into the
+                  // now-deleted node's stale position
+                  editor._toolbarOpened = false;
+                  editor.view.dispatch(tr);
+                  setShowToolbar(false);
+                  editor.commands.focus();
+                }}
+                showDone={false}
+              />,
+              editor._tiptapContainerEl,
+            )}
+        </React.Fragment>
       )}
     </NodeViewWrapper>
   );

package/src/components/respArea/InlineDropdown.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { NodeViewWrapper } from '@tiptap/react';
 import { Chevron } from '../icons/RespArea';
 import ReactDOM from 'react-dom';
+import CustomToolbarWrapper from '../../extensions/custom-toolbar-wrapper';
 
 const InlineDropdown = (props) => {
   const { editor, node, getPos, options, selected } = props;
@@ -11,10 +12,12 @@ const InlineDropdown = (props) => {
   // TODO: Investigate
   // Needed because items with values inside have different positioning for some reason
   const html = value || '<div>&nbsp</div>';
+  const pos = getPos();
   const toolbarRef = useRef(null);
+  const toolbarEditor = useRef(null);
   const [showToolbar, setShowToolbar] = useState(false);
   const [position, setPosition] = useState({ top: 0, left: 0 });
-  const InlineDropdownToolbar = options.respAreaToolbar(node, editor, () => {});
+  const InlineDropdownToolbar = options.respAreaToolbar([node, pos], editor, () => {});
 
   useEffect(() => {
     const { selection } = editor.state;
@@ -41,7 +44,11 @@ const InlineDropdown = (props) => {
     });
 
     const handleClickOutside = (event) => {
+      const insideSomeEditor = event.target.closest('[data-toolbar-for]');
+
       if (
+        (!insideSomeEditor || insideSomeEditor.dataset.toolbarFor !== toolbarEditor.current.instanceId) &&
+        !editor._toolbarOpened &&
         toolbarRef.current &&
         !toolbarRef.current.contains(event.target) &&
         !event.target.closest('[data-inline-node]')
@@ -66,7 +73,6 @@ const InlineDropdown = (props) => {
       style={{
         display: 'inline-flex',
         height: '50px',
-        margin: '0 5px',
         cursor: 'pointer',
       }}
     >
@@ -79,7 +85,7 @@ const InlineDropdown = (props) => {
           border: '1px solid #C0C3CF',
           boxSizing: 'border-box',
           borderRadius: '3px',
-          margin: '0 4px',
+          margin: '0 2px',
           position: 'relative',
           alignItems: 'center',
         }}
@@ -113,13 +119,42 @@ const InlineDropdown = (props) => {
           }}
         />
       </div>
-      {showToolbar &&
-        ReactDOM.createPortal(
-          <div ref={toolbarRef} style={{ zIndex: 1 }}>
-            <InlineDropdownToolbar />
-          </div>,
-          document.body,
-        )}
+      {showToolbar && (
+        <React.Fragment>
+          {ReactDOM.createPortal(
+            <div ref={toolbarRef} style={{ zIndex: 1 }}>
+              <InlineDropdownToolbar
+                editorCallback={(instance) => {
+                  toolbarEditor.current = instance;
+                }}
+              />
+            </div>,
+            document.body,
+          )}
+
+          {editor._tiptapContainerEl &&
+            ReactDOM.createPortal(
+              <CustomToolbarWrapper
+                deletable
+                toolbarOpts={{ minWidth: 'auto' }}
+                autoWidth
+                style={{ top: -40, left: 0, right: 0 }}
+                onDelete={() => {
+                  const { tr } = editor.state;
+                  tr.delete(pos, pos + node.nodeSize);
+                  // Prevent the debounced onBlur/onDone from firing into the
+                  // now-deleted node's stale position
+                  editor._toolbarOpened = false;
+                  editor.view.dispatch(tr);
+                  setShowToolbar(false);
+                  editor.commands.focus();
+                }}
+                showDone={false}
+              />,
+              editor._tiptapContainerEl,
+            )}
+        </React.Fragment>
+      )}
     </NodeViewWrapper>
   );
 };

package/src/components/respArea/MathTemplated.jsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NodeViewWrapper } from '@tiptap/react';
+import { mq } from '@pie-lib/math-input';
+import { styled } from '@mui/material/styles';
+
+const StyledSpanContainer = styled('span')(() => ({
+  display: 'inline-flex',
+  border: '1px solid #C0C3CF',
+  margin: '1px 5px',
+  cursor: 'pointer',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: '50px',
+  minHeight: '36px',
+  height: 'fit-content',
+}));
+
+const StyledResponseBox = styled('div')(({ theme }) => ({
+  background: theme.palette.grey['A100'],
+  color: theme.palette.grey['A700'],
+  display: 'inline-flex',
+  borderRight: '2px solid #C0C3CF',
+  boxSizing: 'border-box',
+  overflow: 'hidden',
+  fontSize: '12px',
+  minHeight: '36px',
+  height: '100%',
+  alignItems: 'center',
+  fontFamily: 'Symbola, Times New Roman, serif',
+  padding: '0 2px',
+}));
+
+const StyledMathBlock = styled('div')(() => ({
+  flex: 8,
+  color: 'var(--pie-text, black)',
+  padding: '4px !important',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: 'var(--pie-background, rgba(255, 255, 255, 0))',
+  '& > .mq-math-mode sup.mq-nthroot': {
+    fontSize: '70% !important',
+    verticalAlign: '1em !important',
+  },
+  '& > .mq-math-mode .mq-sqrt-stem': {
+    borderTop: '0.07em solid',
+    marginLeft: '-1.5px',
+    marginTop: '-2px !important',
+    paddingTop: '5px !important',
+  },
+  '& .mq-overarrow-inner': {
+    paddingTop: '0 !important',
+    border: 'none !important',
+  },
+  '& .mq-overarrow.mq-arrow-both': {
+    marginTop: '0px',
+    minWidth: '1.23em',
+    '& *': {
+      lineHeight: '1 !important',
+    },
+    '&:before': {
+      top: '-0.4em',
+      left: '-1px',
+    },
+    '&:after': {
+      top: '0px !important',
+      position: 'absolute !important',
+      right: '-2px',
+    },
+    '&.mq-empty:after': {
+      top: '-0.45em',
+    },
+  },
+  '& .mq-overarrow.mq-arrow-right': {
+    '&:before': {
+      top: '-0.4em',
+      right: '-1px',
+    },
+  },
+  '& .mq-overarrow-inner-right': {
+    display: 'none !important',
+  },
+  '& .mq-overarrow-inner-left': {
+    display: 'none !important',
+  },
+}));
+const MathTemplated = (props) => {
+  const { node, options, selected } = props;
+  const { attrs: attributes } = node;
+  const { value, index } = attributes;
+
+  // add 1 to index to display R 1 instead of R 0
+  const keyToDisplay = `R ${parseInt(index) + 1}`;
+
+  // console.log({nodeProps.children})
+  return (
+    <NodeViewWrapper
+      className="math-templated"
+      data-selected={selected}
+      style={{
+        display: 'inline-flex',
+        minHeight: '36px',
+        minWidth: '50px',
+        cursor: 'pointer',
+      }}
+    >
+      <StyledSpanContainer {...attributes}>
+        <StyledResponseBox>{keyToDisplay}</StyledResponseBox>
+        <StyledMathBlock>
+          <mq.Static latex={value} />
+        </StyledMathBlock>
+      </StyledSpanContainer>
+    </NodeViewWrapper>
+  );
+};
+
+MathTemplated.propTypes = {
+  attributes: PropTypes.object,
+  value: PropTypes.string,
+  keyToDisplay: PropTypes.string,
+};
+
+export default MathTemplated;