Tiptap Editor POC

frontends/.eslintrc.js

@@ -33,6 +33,7 @@ module.exports = {
     },
   },
   rules: {
+    "react/react-in-jsx-scope": "off",
     ...restrictedImports({
       paths: [
         {

frontends/main/package.json

@@ -13,21 +13,41 @@
     "@ebay/nice-modal-react": "^1.2.13",
     "@emotion/cache": "^11.13.1",
     "@emotion/styled": "^11.11.0",
+    "@floating-ui/react": "^0.27.16",
     "@mitodl/course-search-utils": "^3.5.0",
     "@mitodl/mitxonline-api-axios": "^2025.10.21",
     "@mitodl/smoot-design": "^6.17.1",
     "@next/bundle-analyzer": "^14.2.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
     "@react-pdf/renderer": "^4.3.0",
-    "@remixicon/react": "^4.2.0",
+    "@remixicon/react": "^4.7.0",
     "@sentry/nextjs": "^10.0.0",
     "@tanstack/react-query": "^5.66",
+    "@tiptap/core": "^3.10.2",
+    "@tiptap/extension-document": "^3.10.2",
+    "@tiptap/extension-highlight": "^3.10.1",
+    "@tiptap/extension-horizontal-rule": "^3.10.1",
+    "@tiptap/extension-image": "^3.10.1",
+    "@tiptap/extension-list": "^3.10.1",
+    "@tiptap/extension-subscript": "^3.10.1",
+    "@tiptap/extension-superscript": "^3.10.1",
+    "@tiptap/extension-text-align": "^3.10.1",
+    "@tiptap/extension-typography": "^3.10.1",
+    "@tiptap/extensions": "^3.10.1",
+    "@tiptap/markdown": "^3.10.1",
+    "@tiptap/pm": "^3.10.1",
+    "@tiptap/react": "^3.10.1",
+    "@tiptap/starter-kit": "^3.10.1",
+    "@tiptap/suggestion": "^3.10.2",
     "api": "workspace:*",
     "classnames": "^2.5.1",
     "formik": "^2.4.6",
     "iso-639-1": "^3.1.4",
     "isomorphic-dompurify": "^2.27.0",
     "jsdom": "^27",
     "lodash": "^4.17.21",
+    "lodash.throttle": "^4.1.1",
     "moment": "^2.30.1",
     "next": "^15.5.2",
     "next-nprogress-bar": "^2.4.2",
@@ -36,6 +56,7 @@
     "posthog-js": "^1.157.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hotkeys-hook": "^5.2.1",
     "react-slick": "^0.30.2",
     "sharp": "0.34.4",
     "slick-carousel": "^1.8.1",
@@ -49,6 +70,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.7",
+    "@types/lodash.throttle": "^4.1.9",
     "@types/node": "^22.0.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
@@ -62,6 +84,7 @@
     "jest-next-dynamic-ts": "^0.1.1",
     "next-router-mock": "^1.0.2",
     "ol-test-utilities": "0.0.0",
+    "sass": "^1.93.3",
     "ts-jest": "^29.2.4",
     "type-fest": "^5.0.1",
     "typescript": "^5"

frontends/main/src/app-pages/ArticlePage/AskTimDrawerButtonExtension.tsx

@@ -0,0 +1,55 @@
+import { ReactNodeViewRenderer, Node, NodeViewWrapper } from "@tiptap/react"
+import AskTimDrawerButton from "@/page-components/AiChat/AskTimDrawerButton"
+
+const AskTimDrawerButtonWrapper = () => {
+  return (
+    <NodeViewWrapper>
+      <AskTimDrawerButton />
+    </NodeViewWrapper>
+  )
+}
+
+const AskTimDrawerButtonExtension = Node.create({
+  name: "askTimDrawerButton",
+  group: "block",
+  atom: true,
+  selectable: true,
+
+  markdownTokenizer: {
+    name: "askTimDrawerButton",
+    level: "block",
+
+    start: (src) => {
+      return src.indexOf("[[asktim]]")
+    },
+
+    tokenize: (src, _tokens, _lexer) => {
+      // Match [[asktim]]
+      const match = /^\[\[asktim\]\]/.exec(src)
+
+      if (!match) {
+        return undefined
+      }
+
+      return {
+        type: "askTimDrawerButton",
+        raw: match[0],
+      }
+    },
+  },
+
+  parseMarkdown: (_token, _helpers) => {
+    return {
+      type: "askTimDrawerButton",
+    }
+  },
+
+  renderMarkdown: (_node, _helpers) => {
+    return "[[asktim]]\n\n"
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(AskTimDrawerButtonWrapper)
+  },
+})
+export { AskTimDrawerButtonExtension }

frontends/main/src/app-pages/ArticlePage/DescriptionExtension.tsx

@@ -0,0 +1,42 @@
+import { Node, mergeAttributes } from "@tiptap/core"
+
+export const Description = Node.create({
+  name: "description",
+
+  group: "block",
+  content: "inline*",
+
+  parseHTML() {
+    return [
+      {
+        tag: "p[data-type='description']",
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "p",
+      mergeAttributes(HTMLAttributes, { "data-type": "description" }),
+      0,
+    ]
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      // Prevent Enter from creating a new description
+      Enter: ({ editor }) => {
+        const { state } = editor
+        const { $from } = state.selection
+
+        // Check if we're in a description node
+        if ($from.parent.type.name === "description") {
+          // Try to move to the next node instead of creating a new line
+          return editor.commands.focus("end")
+        }
+
+        return false
+      },
+    }
+  },
+})