@pie-lib/editable-html-tip-tap 2.1.19 → 2.1.20-beta.2

package/src/components/EditableHtml.jsx

@@ -96,25 +96,6 @@ const cssVariables = {
                0px 3.618px 9.949px 0px rgba(0, 0, 0, .04)`,
 };
 
-// Attributes PIE puts on the editor's contenteditable element.
-//
-// ProseMirror rebuilds the element's attribute set from editorProps.attributes on every view
-// update and removes anything no longer listed, and Tiptap merges its own role="textbox" only in
-// createView - not into editor.options, which is what setOptions re-pushes. So every attribute we
-// want to survive has to be listed here. See PIE-1015.
-const editorAttributes = (spellCheckEnabled) => ({
-  // Tiptap's own attribute, re-declared so it survives setOptions. setEditable alone re-pushes
-  // editorProps on every mount, which is what removed it in 2.1.17.
-  role: 'textbox',
-  // PIE-owned hook for external consumers - see PIE-1016. Query [data-pie-editor], or
-  // [data-pie-editor][contenteditable="true"] to skip read-only renders.
-  'data-pie-editor': 'true',
-  // Without these the browser spellchecks the editor regardless of the spellCheck prop.
-  spellcheck: spellCheckEnabled ? 'true' : 'false',
-  autocorrect: spellCheckEnabled ? 'on' : 'off',
-  autocapitalize: spellCheckEnabled ? 'on' : 'off',
-});
-
 export const EditableHtml = (props) => {
   const { showParagraphs, separateParagraphs } = props.pluginProps || {};
   const [pendingImages, setPendingImages] = useState([]);
@@ -209,13 +190,6 @@ export const EditableHtml = (props) => {
         node: 'paragraph',
         notAfter: ['paragraph', 'div'],
       },
-      // StarterKit bundles the link extension, which turns anything that looks like a URL into
-      // a hyperlink as it is typed or pasted. See PIE-980 - we don't want that in any editor.
-      // The mark itself stays registered so links already in the markup keep round-tripping.
-      link: {
-        autolink: false,
-        linkOnPaste: false,
-      },
     }),
     ExtendedListItem,
     DivNode,
@@ -321,17 +295,11 @@ export const EditableHtml = (props) => {
     }),
   ];
 
-  // Callers that don't pass spellCheck keep the browser default (on), as they did with the
-  // slate-based editor. Players that have to default to off - extended-text-entry, see
-  // PIE-978 - resolve that in their controller and pass an explicit false.
-  const spellCheckEnabled = props.spellCheck !== false;
-
   const editor = useEditor(
     {
       extensions,
       immediatelyRender: false,
       editorProps: {
-        attributes: editorAttributes(spellCheckEnabled),
         handleKeyDown(view, event) {
           if (props.onKeyDown) {
             return props.onKeyDown(event);
@@ -375,26 +343,6 @@ export const EditableHtml = (props) => {
     editor?.setEditable(!props.disabled);
   }, [props.disabled, editor]);
 
-  // useEditor only re-applies options on its own when it is called with an empty dependency
-  // array, and this call site depends on charactersLimit, so a spellCheck change on a mounted
-  // editor has to be pushed in. The rest of editorProps stays as the editor already has it, and
-  // the attributes are merged rather than replaced so an attribute contributed by Tiptap or an
-  // extension can't be dropped the way role="textbox" was - see PIE-1015.
-  useEffect(() => {
-    if (!editor) {
-      return;
-    }
-
-    const currentEditorProps = editor.options?.editorProps;
-    const attributes = { ...currentEditorProps?.attributes, ...editorAttributes(spellCheckEnabled) };
-
-    if (currentEditorProps?.attributes?.spellcheck === attributes.spellcheck) {
-      return;
-    }
-
-    editor.setOptions({ editorProps: { ...currentEditorProps, attributes } });
-  }, [spellCheckEnabled, editor]);
-
   useEffect(() => {
     if (!editor) {
       return;

package/src/components/MenuBar.jsx

@@ -2,7 +2,6 @@ import React, { useMemo, useState } from 'react';
 import classNames from 'classnames';
 import { styled, useTheme } from '@mui/material/styles';
 import { NodeSelection } from 'prosemirror-state';
-import { color } from '@pie-lib/render-ui';
 
 import Bold from '@mui/icons-material/FormatBold';
 import Italic from '@mui/icons-material/FormatItalic';
@@ -35,15 +34,7 @@ import { CharacterIcon, CharacterPicker } from './CharacterPicker';
 import { DoneButton } from './common/done-button';
 
 const SuperscriptIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height="24px"
-    viewBox="0 0 24 24"
-    width="24px"
-    fill="none"
-    aria-hidden="true"
-    focusable="false"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="none">
     <path
       d="M22,7h-2v1h3v1h-4V7c0-0.55,0.45-1,1-1h2V5h-3V4h3c0.55,0,1,0.45,1,1v1C23,6.55,22.55,7,22,7z M5.88,20h2.66l3.4-5.42h0.12 l3.4,5.42h2.66l-4.65-7.27L17.81,6h-2.68l-3.07,4.99h-0.12L8.85,6H6.19l4.32,6.73L5.88,20z"
       fill="currentColor"
@@ -52,15 +43,7 @@ const SuperscriptIcon = () => (
 );
 
 const SubscriptIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height="24px"
-    viewBox="0 0 24 24"
-    width="24px"
-    fill="none"
-    aria-hidden="true"
-    focusable="false"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="none">
     <path
       d="M22,18h-2v1h3v1h-4v-2c0-0.55,0.45-1,1-1h2v-1h-3v-1h3c0.55,0,1,0.45,1,1v1C23,17.55,22.55,18,22,18z M5.88,18h2.66 l3.4-5.42h0.12l3.4,5.42h2.66l-4.65-7.27L17.81,4h-2.68l-3.07,4.99h-0.12L8.85,4H6.19l4.32,6.73L5.88,18z"
       fill="currentColor"
@@ -76,8 +59,6 @@ const HeadingIcon = () => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     style={{ width: '20px', height: '18px' }}
-    aria-hidden="true"
-    focusable="false"
   >
     <path
       d="M27 4V24H29C29.5 24 30 24.5 30 25V27C30 27.5625 29.5 28 29 28H19C18.4375 28 18 27.5625 18 27V25C18 24.5 18.4375 24 19 24H21V16H9V24H11C11.5 24 12 24.5 12 25V27C12 27.5625 11.5 28 11 28H1C0.4375 28 0 27.5625 0 27V25C0 24.5 0.4375 24 1 24H3V4H1C0.4375 4 0 3.5625 0 3V1C0 0.5 0.4375 0 1 0H11C11.5 0 12 0.5 12 1V3C12 3.5625 11.5 4 11 4H9V12H21V4H19C18.4375 4 18 3.5625 18 3V1C18 0.5 18.4375 0 19 0H29C29.5 0 30 0.5 30 1V3C30 3.5625 29.5 4 29 4H27Z"
@@ -185,7 +166,6 @@ function MenuBar({
     () => [
       {
         icon: <GridOn />,
-        label: 'Insert table',
         onClick: (editor) => editor.chain().focus().insertTable({ rows: 2, cols: 2, withHeaderRow: false }).run(),
         hidden: (state) => !activePlugins?.includes('table') || state.isTable,
         isActive: (state) => state.isTable,
@@ -193,7 +173,6 @@ function MenuBar({
       },
       {
         icon: <AddRow />,
-        label: 'Add table row',
         onClick: (editor) => editor.chain().focus().addRowAfter().run(),
         hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.isTable,
@@ -201,7 +180,6 @@ function MenuBar({
       },
       {
         icon: <RemoveRow />,
-        label: 'Remove table row',
         onClick: (editor) => editor.chain().focus().deleteRow().run(),
         hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.isTable,
@@ -209,7 +187,6 @@ function MenuBar({
       },
       {
         icon: <AddColumn />,
-        label: 'Add table column',
         onClick: (editor) => editor.chain().focus().addColumnAfter().run(),
         hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.isTable,
@@ -217,7 +194,6 @@ function MenuBar({
       },
       {
         icon: <RemoveColumn />,
-        label: 'Remove table column',
         onClick: (editor) => editor.chain().focus().deleteColumn().run(),
         hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.isTable,
@@ -225,7 +201,6 @@ function MenuBar({
       },
       {
         icon: <RemoveTable />,
-        label: 'Remove table',
         onClick: (editor) => editor.chain().focus().deleteTable().run(),
         hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.isTable,
@@ -233,8 +208,6 @@ function MenuBar({
       },
       {
         icon: <BorderAll />,
-        label: 'Table borders',
-        toggle: true,
         onClick: (editor) => {
           const tableAttrs = editor.getAttributes('table');
 
@@ -251,8 +224,6 @@ function MenuBar({
       },
       {
         icon: <Bold />,
-        label: 'Bold',
-        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleBold().run(),
         hidden: () => !activePlugins?.includes('bold'),
         isActive: (state) => state.isBold,
@@ -260,8 +231,6 @@ function MenuBar({
       },
       {
         icon: <Italic />,
-        label: 'Italic',
-        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleItalic().run(),
         hidden: () => !activePlugins?.includes('italic'),
         isActive: (state) => state.isItalic,
@@ -269,8 +238,6 @@ function MenuBar({
       },
       {
         icon: <Strikethrough />,
-        label: 'Strikethrough',
-        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleStrike().run(),
         hidden: () => !activePlugins?.includes('strikethrough'),
         isActive: (state) => state.isStrike,
@@ -278,8 +245,6 @@ function MenuBar({
       },
       {
         icon: <Code />,
-        label: 'Code',
-        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleCode().run(),
         hidden: () => !activePlugins?.includes('code'),
         isActive: (state) => state.isCode,
@@ -287,118 +252,94 @@ function MenuBar({
       },
       {
         icon: <Underline />,
-        label: 'Underline',
-        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleUnderline().run(),
         hidden: () => !activePlugins?.includes('underline'),
         isActive: (state) => state.isUnderline,
       },
       {
         icon: <SubscriptIcon />,
-        label: 'Subscript',
-        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleSubscript().run(),
         hidden: () => !activePlugins?.includes('subscript'),
         isActive: (state) => state.isSubScript,
       },
       {
         icon: <SuperscriptIcon />,
-        label: 'Superscript',
-        toggle: true,
         onClick: (editor) => editor.chain().focus().toggleSuperscript().run(),
         hidden: () => !activePlugins?.includes('superscript'),
         isActive: (state) => state.isSuperScript,
       },
       {
         icon: <ImageIcon />,
-        label: 'Insert image',
         hidden: () => !activePlugins?.includes('image'),
         onClick: (editor) => editor.chain().focus().setImageUploadNode().run(),
       },
       {
         icon: <TheatersIcon />,
-        label: 'Insert video',
         hidden: () => !activePlugins?.includes('video'),
         onClick: (editor) => editor.chain().focus().insertMedia({ type: 'video' }).run(),
       },
       {
         icon: <VolumeUpIcon />,
-        label: 'Insert audio',
         hidden: () => !activePlugins?.includes('audio'),
         onClick: (editor) => editor.chain().focus().insertMedia({ type: 'audio', tag: 'audio' }).run(),
       },
       {
         icon: <CSSIcon />,
-        label: 'CSS classes',
         hidden: () => !activePlugins?.includes('css'),
         onClick: (editor) => editor.commands.openCSSClassDialog(),
       },
       {
         icon: <FormatQuote />,
-        label: 'Blockquote',
-        toggle: true,
         hidden: () => !activePlugins?.includes('blockquote'),
         onClick: (editor) => editor.chain().focus().toggleBlockquote().run(),
         isActive: (state) => state.isBlockquote,
       },
       {
         icon: <HeadingIcon />,
-        label: 'Heading',
-        toggle: true,
         hidden: () => !activePlugins?.includes('h3'),
         onClick: (editor) => editor.chain().focus().toggleHeadingParagraph().run(),
         isActive: (state) => state.isHeadingParagraph,
       },
       {
         icon: <Functions />,
-        label: 'Insert math',
         hidden: () => !activePlugins?.includes('math'),
         onClick: (editor) => editor.chain().focus().insertMath('').run(),
       },
       {
         icon: <CharacterIcon letter="ñ" />,
-        label: 'Spanish characters (ñ)',
         hidden: () => !activePlugins?.includes('languageCharacters'),
         onClick: () => setShowPicker(spanishConfig),
       },
       {
         icon: <CharacterIcon letter="€" />,
-        label: 'Special characters (€)',
         hidden: () => activePlugins?.filter((p) => p === 'languageCharacters').length !== 2,
         onClick: () => setShowPicker(specialConfig),
       },
       {
         icon: <TextAlignIcon editor={editor} />,
-        label: 'Text alignment',
         hidden: () => !activePlugins?.includes('text-align'),
         onClick: () => {},
       },
       {
         icon: <BulletedListIcon />,
-        label: 'Bulleted list',
-        toggle: true,
         hidden: () => !activePlugins?.includes('bulleted-list'),
         onClick: (editor) => editor.chain().focus().toggleBulletList().run(),
         isActive: (state) => state.isBulletList,
       },
       {
         icon: <NumberedListIcon />,
-        label: 'Numbered list',
-        toggle: true,
         hidden: () => !activePlugins?.includes('numbered-list'),
         onClick: (editor) => editor.chain().focus().toggleOrderedList().run(),
         isActive: (state) => state.isOrderedList,
       },
       {
         icon: <Undo />,
-        label: 'Undo',
         hidden: () => !activePlugins?.includes('undo'),
         onClick: (editor) => editor.chain().focus().undo().run(),
         isDisabled: (state) => !state.canUndo,
       },
       {
         icon: <Redo />,
-        label: 'Redo',
         hidden: () => !activePlugins?.includes('redo'),
         onClick: (editor) => editor.chain().focus().redo().run(),
         isDisabled: (state) => !state.canRedo,
@@ -424,7 +365,6 @@ function MenuBar({
                 onChange?.(editor.getHTML());
               }}
               aria-label="Delete response area"
-              title="Delete response area"
             >
               <Delete />
             </button>
@@ -443,11 +383,7 @@ function MenuBar({
                 return (
                   <button
                     key={index}
-                    type="button"
                     disabled={disabled}
-                    aria-label={btn.label}
-                    title={btn.label}
-                    aria-pressed={btn.toggle ? !!active : undefined}
                     onClick={(e) => {
                       e.preventDefault();
                       btn.onClick(editor);
@@ -461,9 +397,6 @@ function MenuBar({
           </div>
           {activePlugins?.includes('responseArea') && (
             <button
-              type="button"
-              aria-label="Insert response area"
-              title="Insert response area"
               onClick={() => {
                 editor.chain().focus().insertResponseArea(responseAreaProps.type).run();
               }}
@@ -529,11 +462,7 @@ const StyledMenuBar = (props) => {
   );
 };
 
-const StyledMenuBarRoot = styled('div')(() => ({
-  // A zero-height slot the toolbar overflows out of, so the toolbar rides normal flow while the
-  // root's geometry stays as it was.
-  height: 0,
-  overflow: 'visible',
+const StyledMenuBarRoot = styled('div')(({ theme }) => ({
   '& .defaultToolbar': {
     display: 'flex',
     width: '100%',
@@ -557,26 +486,20 @@ const StyledMenuBarRoot = styled('div')(() => ({
       height: '24px',
     },
     '&:hover': {
-      color: color.text(),
+      color: 'black',
     },
     '&:focus': {
-      /*
-       * A focus ring is the one thing a keyboard user cannot do without, so it takes
-       * the registered focus token rather than a grey. `--pie-button-focus-outline`
-       * measures at least 3.68:1 against every scheme's own background; MUI's
-       * grey[700] fell to 1.28:1 on yellow-on-navy.
-       */
-      outline: `2px solid ${color.buttonFocusOutline()}`,
+      outline: `2px solid ${theme.palette.grey[700]}`,
     },
   },
   '& .active': {
-    color: color.text(),
+    color: 'black',
   },
   '& .disabled': {
     opacity: 0.7,
     cursor: 'not-allowed',
     '& :hover': {
-      color: color.disabled(),
+      color: 'grey',
     },
   },
   '& .isActive': {
@@ -584,16 +507,13 @@ const StyledMenuBarRoot = styled('div')(() => ({
     color: 'var(--white)',
   },
   '& .toolbar': {
-    // Offset from its own in-flow position: no containing block and no static position to resolve,
-    // either of which a lockdown browser extension can get wrong as the editor grows.
-    position: 'relative',
-    top: '5px',
+    position: 'absolute',
     zIndex: 20,
     cursor: 'pointer',
     justifyContent: 'space-between',
     background: 'var(--editable-html-toolbar-bg, #efefef)',
     minWidth: '280px',
-    margin: 0,
+    margin: '5px 0 0 0',
     padding: '2px',
     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)',
@@ -606,8 +526,6 @@ const StyledMenuBarRoot = styled('div')(() => ({
     minWidth: '265px',
   },
   '& .toolbarTop': {
-    // Anchored to the root's top, which never depended on the editor's height.
-    position: 'absolute',
     top: '-45px',
   },
   '& .toolbarRight': {

package/src/components/TiptapContainer.jsx

@@ -89,14 +89,14 @@ const StyledRoot = styled('div', {
     backgroundColor: color.background(),
   },
   '& table:not([border="1"]) tr': {
-    borderTop: `1px solid ${color.tableGridLight()}`,
+    borderTop: '1px solid #dfe2e5',
   },
   '& td, th': {
     padding: '.6em 1em',
     textAlign: 'center',
   },
   '& table:not([border="1"]) td, th': {
-    border: `1px solid ${color.tableGridLight()}`,
+    border: '1px solid #dfe2e5',
   },
   ...(error && {
     border: `2px solid ${theme.palette.error.main} !important`,

package/src/components/common/toolbar-buttons.jsx

@@ -2,12 +2,11 @@ import React from 'react';
 import debug from 'debug';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import { color } from '@pie-lib/render-ui';
 
 const StyledButton = styled('button', {
   shouldForwardProp: (prop) => !['active', 'disabled', 'extraStyles'].includes(prop),
-})(({ active, disabled }) => ({
-  color: active ? color.text() : color.disabled(),
+})(({ theme, active, disabled }) => ({
+  color: active ? 'black' : 'grey',
   display: 'inline-flex',
   padding: '2px',
   background: 'none',
@@ -19,11 +18,10 @@ const StyledButton = styled('button', {
     height: '24px',
   },
   '&:hover': {
-    color: disabled ? color.disabled() : color.text(),
+    color: disabled ? 'grey' : 'black',
   },
   '&:focus': {
-    // See MenuBar: the focus ring takes the registered focus token, not a grey.
-    outline: `2px solid ${color.buttonFocusOutline()}`,
+    outline: `2px solid ${theme.palette.grey[700]}`,
   },
   ...(disabled && {
     opacity: 0.7,

package/src/components/icons/TableIcons.jsx

@@ -10,15 +10,7 @@ const StyledPath = styled('path')({
 
 const SvgIcon = (Component) => {
   return (props) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      aria-hidden="true"
-      focusable="false"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
       <Component {...props} />
     </svg>
   );

package/src/components/icons/TextAlign.jsx

@@ -4,15 +4,7 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 
 export const AlignLeft = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 66 66"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-    focusable="false"
-  >
+  <svg width="20" height="20" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M42.1875 4.75C42.1875 7.38672 39.9902 9.4375 37.5 9.4375H4.6875C2.05078 9.4375 0 7.38672 0 4.75C0 2.25977 2.05078 0.0625 4.6875 0.0625H37.5C39.9902 0.0625 42.1875 2.25977 42.1875 4.75ZM42.1875 42.25C42.1875 44.8867 39.9902 46.9375 37.5 46.9375H4.6875C2.05078 46.9375 0 44.8867 0 42.25C0 39.7598 2.05078 37.5625 4.6875 37.5625H37.5C39.9902 37.5625 42.1875 39.7598 42.1875 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z"
       fill="currentColor"
@@ -21,15 +13,7 @@ export const AlignLeft = () => (
 );
 
 export const AlignRight = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 66 66"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-    focusable="false"
-  >
+  <svg width="20" height="20" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M65.625 4.75C65.625 7.38672 63.4277 9.4375 60.9375 9.4375H28.125C25.4883 9.4375 23.4375 7.38672 23.4375 4.75C23.4375 2.25977 25.4883 0.0625 28.125 0.0625H60.9375C63.4277 0.0625 65.625 2.25977 65.625 4.75ZM65.625 42.25C65.625 44.8867 63.4277 46.9375 60.9375 46.9375H28.125C25.4883 46.9375 23.4375 44.8867 23.4375 42.25C23.4375 39.7598 25.4883 37.5625 28.125 37.5625H60.9375C63.4277 37.5625 65.625 39.7598 65.625 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z"
       fill="currentColor"
@@ -38,15 +22,7 @@ export const AlignRight = () => (
 );
 
 export const AlignCenter = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 66 66"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-    focusable="false"
-  >
+  <svg width="20" height="20" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M51.5625 4.75C51.5625 7.38672 49.3652 9.4375 46.875 9.4375H18.75C16.1133 9.4375 14.0625 7.38672 14.0625 4.75C14.0625 2.25977 16.1133 0.0625 18.75 0.0625H46.875C49.3652 0.0625 51.5625 2.25977 51.5625 4.75ZM65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5ZM0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61ZM51.5625 42.25C51.5625 44.8867 49.3652 46.9375 46.875 46.9375H18.75C16.1133 46.9375 14.0625 44.8867 14.0625 42.25C14.0625 39.7598 16.1133 37.5625 18.75 37.5625H46.875C49.3652 37.5625 51.5625 39.7598 51.5625 42.25Z"
       fill="currentColor"
@@ -55,15 +31,7 @@ export const AlignCenter = () => (
 );
 
 export const AlignJustify = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 66 66"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-    focusable="false"
-  >
+  <svg width="20" height="20" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M65.625 4.75C65.625 7.38672 63.4277 9.4375 60.9375 9.4375H4.6875C2.05078 9.4375 0 7.38672 0 4.75C0 2.25977 2.05078 0.0625 4.6875 0.0625H60.9375C63.4277 0.0625 65.625 2.25977 65.625 4.75ZM65.625 42.25C65.625 44.8867 63.4277 46.9375 60.9375 46.9375H4.6875C2.05078 46.9375 0 44.8867 0 42.25C0 39.7598 2.05078 37.5625 4.6875 37.5625H60.9375C63.4277 37.5625 65.625 39.7598 65.625 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z"
       fill="currentColor"
@@ -111,9 +79,7 @@ export default ({ editor, onChange }) => {
     <div>
       <div style={{ display: 'flex', alignItems: 'center' }} onClick={onMouseDown}>
         {icon}
-        <span style={{ marginLeft: '5px', fontSize: '8px' }} aria-hidden="true">
-          &#9660;
-        </span>
+        <span style={{ marginLeft: '5px', fontSize: '8px' }}>&#9660;</span>
       </div>
       <Collapse in={open} timeout="auto" unmountOnExit style={{ position: 'absolute' }}>
         <List

package/src/components/respArea/MathTemplated.jsx

@@ -1,18 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { NodeViewWrapper } from '@tiptap/react';
-import { mq } from '@pie-lib/math-input';
+import { mq } from '@pie-lib/math-input-mathlive';
 import { styled } from '@mui/material/styles';
-import { color } from '@pie-lib/render-ui';
 
 const StyledSpanContainer = styled('span')(() => ({
   display: 'inline-flex',
-  /*
-   * #C0C3CF is `--pie-blue-grey-300`'s default value, but that token is a fill: it
-   * measures 1.00:1 against black-on-rose's own background. The box outline is what
-   * marks the response slot in running text, so it takes the stroke token instead.
-   */
-  border: `1px solid ${color.border()}`,
+  border: '1px solid #C0C3CF',
   margin: '1px 5px',
   cursor: 'pointer',
   alignItems: 'center',
@@ -22,12 +16,11 @@ const StyledSpanContainer = styled('span')(() => ({
   height: 'fit-content',
 }));
 
-const StyledResponseBox = styled('div')(() => ({
-  // Fill and ink move together so the label stays legible on whatever the fill becomes.
-  background: color.backgroundDark(),
-  color: color.text(),
+const StyledResponseBox = styled('div')(({ theme }) => ({
+  background: theme.palette.grey['A100'],
+  color: theme.palette.grey['A700'],
   display: 'inline-flex',
-  borderRight: `2px solid ${color.border()}`,
+  borderRight: '2px solid #C0C3CF',
   boxSizing: 'border-box',
   overflow: 'hidden',
   fontSize: '12px',