Feat: more text formats in the WYSIWYG toolbar

visual-editor/package.json

@@ -42,7 +42,7 @@
     "@tiptap/extension-bold": "^3.0.7",
     "@tiptap/extension-bubble-menu": "^3.0.7",
     "@tiptap/extension-bullet-list": "^3.0.7",
-    "@tiptap/extension-color": "^3.0.7",
+    "@tiptap/extension-code": "^3.0.7",
     "@tiptap/extension-document": "^3.0.7",
     "@tiptap/extension-hard-break": "^3.0.7",
     "@tiptap/extension-heading": "^3.0.7",
@@ -53,6 +53,9 @@
     "@tiptap/extension-list-item": "^3.0.7",
     "@tiptap/extension-ordered-list": "^3.0.7",
     "@tiptap/extension-paragraph": "^3.0.7",
+    "@tiptap/extension-strike": "^3.0.7",
+    "@tiptap/extension-subscript": "^3.0.7",
+    "@tiptap/extension-superscript": "^3.0.7",
     "@tiptap/extension-text": "^3.0.7",
     "@tiptap/extension-text-align": "^3.0.7",
     "@tiptap/extension-text-style": "^3.0.7",
@@ -72,6 +75,7 @@
     "@types/react": "^18.2.25",
     "@types/react-datepicker": "^4.15.1",
     "@types/react-dom": "^18.2.10",
+    "@vitejs/plugin-react": "^4.7.0",
     "concurrently": "^7.6.0",
     "cypress": "^15.6.0",
     "esbuild": "^0.27.3",
@@ -84,8 +88,7 @@
     "tsc-alias": "^1.8.8",
     "typescript": "^4.9.5",
     "vite": "^7.3.1",
-    "vitest": "^3.2.4",
-    "@vitejs/plugin-react": "^4.7.0"
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "react": "^18.0.0",

visual-editor/src/components/Editor/TiptapEditor/TiptapColorPicker.tsx

@@ -5,6 +5,7 @@ import { colorToProperty } from 'src/functions/css'
 import styled from '@emotion/styled'
 import { prevent } from 'src/functions/functions'
 import { useToggle } from 'src/hooks/useToggle'
+import { Styles } from 'src/components/ui'
 
 type Props = {
   editor: Editor
@@ -19,9 +20,16 @@ export function TiptapColorPicker({ editor, colors }: Props) {
   ) as string[]
   const [expanded, toggleExpanded, setExpanded] = useToggle()
 
-  const handleChange = (color: string) => {
+  // A null color removes the color from the selection
+  const handleChange = (color: string | null) => {
     toggleExpanded()
-    editor.chain().focus().setColor(color).run()
+    const chain = editor.chain().focus()
+    if (color) {
+      chain.setColor(color)
+    } else {
+      chain.unsetColor()
+    }
+    chain.run()
   }
 
   useEffect(() => {
@@ -36,7 +44,7 @@ export function TiptapColorPicker({ editor, colors }: Props) {
 
   return (
     <div css={{ position: 'relative' }}>
-      <Button onClick={prevent(toggleExpanded)}>
+      <Button onClick={prevent(toggleExpanded)} title="Color">
         <svg
           width={16}
           height={16}
@@ -82,16 +90,37 @@ const PaletteItem = styled.button({
   },
 })
 
+/**
+ * Checkerboard swatch with a red diagonal, same visual as the Color field
+ */
+const PaletteItemReset = styled(PaletteItem)({
+  ...Styles.Mosaic,
+  position: 'relative',
+  overflow: 'hidden',
+  padding: 0,
+  '&::before': {
+    position: 'absolute',
+    top: -6,
+    left: 'calc(50% - 1px)',
+    content: "''",
+    width: 2,
+    height: 28,
+    background: 'red',
+    transform: 'rotate(45deg)',
+  },
+})
+
 export function Palette({
   colors,
   onChange,
 }: {
   colors: string[]
-  onChange: (v: string) => void
+  onChange: (v: string | null) => void
 }) {
-  const changeHandler = (color: string) => prevent(() => onChange(color))
+  const changeHandler = (color: string | null) => prevent(() => onChange(color))
   return (
-    <PaletteWrapper size={colors.length}>
+    <PaletteWrapper size={colors.length + 1}>
+      <PaletteItemReset onClick={changeHandler(null)} title="No color" />
       {colors.map((color) => (
         <PaletteItem
           key={color}

visual-editor/src/components/Editor/TiptapEditor/TiptapEditor.tsx

@@ -3,7 +3,7 @@ import { Node } from '@tiptap/core'
 import Blockquote from '@tiptap/extension-blockquote'
 import Bold from '@tiptap/extension-bold'
 import BulletList from '@tiptap/extension-bullet-list'
-import { Color } from '@tiptap/extension-color'
+import Code from '@tiptap/extension-code'
 import Document from '@tiptap/extension-document'
 import HardBreak from '@tiptap/extension-hard-break'
 import Heading from '@tiptap/extension-heading'
@@ -14,6 +14,9 @@ import Link from '@tiptap/extension-link'
 import ListItem from '@tiptap/extension-list-item'
 import OrderedList from '@tiptap/extension-ordered-list'
 import Paragraph from '@tiptap/extension-paragraph'
+import Strike from '@tiptap/extension-strike'
+import Subscript from '@tiptap/extension-subscript'
+import Superscript from '@tiptap/extension-superscript'
 import Text from '@tiptap/extension-text'
 import TextAlign from '@tiptap/extension-text-align'
 import { TextStyleKit } from '@tiptap/extension-text-style'
@@ -30,6 +33,13 @@ const SingleDocument = Node.create({
   content: 'inline*',
 })
 
+// Superscript and subscript cannot apply to the same text
+const ExclusiveSuperscript = Superscript.extend({ excludes: 'subscript' })
+const ExclusiveSubscript = Subscript.extend({ excludes: 'superscript' })
+// Tiptap's Code excludes every other mark by default, here it combines
+// with bold, links, colors... like any other format
+const InlineCode = Code.extend({ excludes: '' })
+
 type TiptapEditorProps = {
   value: string
   onChange: (v: string) => void
@@ -64,12 +74,20 @@ export function TiptapEditor({
       Italic,
       Highlight,
       Underline,
+      Strike,
+      ExclusiveSuperscript,
+      ExclusiveSubscript,
+      InlineCode,
+      // TextStyleKit already registers the Color extension (setColor / unsetColor)
       TextStyleKit,
-      Color,
       HardBreak,
       History,
       Blockquote,
-      Link.configure({ openOnClick: false }),
+      Link.configure({
+        openOnClick: false,
+        // Links open in the same tab unless the user asks for a new one
+        HTMLAttributes: { target: null, rel: null },
+      }),
       Heading.configure({ levels: [1, 2, 3, 4, 5, 6] }),
       TextAlign.configure({
         types: [