feat: course card embedding plugin (#2717)

* feat: adding course plugin in tiptap

---------
Co-authored-by: Ahtesham Quraish <[email protected]>

Author: ahtesham-quraish

frontends/ol-components/package.json

@@ -17,6 +17,7 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.1",
+    "@ebay/nice-modal-react": "^1.2.13",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react": "^0.27.16",
@@ -29,6 +30,7 @@
     "@radix-ui/react-popover": "^1.1.15",
     "@remixicon/react": "^4.2.0",
     "@testing-library/dom": "^10.4.0",
+    "@tiptap/core": "^3.10.5",
     "@tiptap/extension-highlight": "^3.10.5",
     "@tiptap/extension-horizontal-rule": "^3.10.5",
     "@tiptap/extension-image": "^3.10.5",

frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx

@@ -27,6 +27,7 @@ import TiptapEditor, { MainToolbarContent } from "./TiptapEditor"
 
 // --- Tiptap Node ---
 import { ImageUploadNode } from "./components/tiptap-node/image-upload-node/image-upload-node-extension"
+import { LearningResourceNode } from "./extensions/node/learning-resource-node/learning-resource-node"
 import { MediaEmbed } from "./components/tiptap-node/media-embed/media-embed-extension"
 import { HorizontalRule } from "./components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension"
 
@@ -177,6 +178,7 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
         },
       }),
       HorizontalRule,
+      LearningResourceNode,
       TextAlign.configure({ types: ["heading", "paragraph"] }),
       TaskList,
       TaskItem.configure({ nested: true }),

frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx

@@ -35,6 +35,7 @@ import { LinkPopover } from "./components/tiptap-ui/link-popover"
 import { MarkButton } from "./components/tiptap-ui/mark-button"
 import { TextAlignButton } from "./components/tiptap-ui/text-align-button"
 import { UndoRedoButton } from "./components/tiptap-ui/undo-redo-button"
+import { LearningResourceEmbedButton } from "./extensions/ui/learning-resource-button/learning-resource-button"
 
 // --- Styles ---
 import "./styles/_keyframe-animations.scss"
@@ -117,6 +118,7 @@ export const MainToolbarContent = ({ editor }: TiptapEditorToolbarProps) => {
         <ImageUploadButton text="Add" />
       </ToolbarGroup>
       <ToolbarGroup>
+        <LearningResourceEmbedButton editor={editor} text="Course" />
         <MediaEmbedButton editor={editor} text="Embed" />
       </ToolbarGroup>
       <Spacer />

frontends/ol-components/src/components/TiptapEditor/extensions/node/learning-resource-node/LearningResourceListCard.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { NodeViewWrapper } from "@tiptap/react"
+import { LearningResourceListCard, styled } from "ol-components"
+import { useLearningResourcesDetail } from "api/hooks/learningResources"
+import type { ReactNodeViewProps } from "@tiptap/react"
+
+const StyledLearningResourceListCard = styled(LearningResourceListCard)({
+  "&& a": {
+    color: "inherit",
+    textDecoration: "none",
+  },
+  "&& a span": {
+    textDecoration: "none",
+  },
+})
+
+export const LearningResourceNodeView = ({ node }: ReactNodeViewProps) => {
+  const resourceId = node.attrs.resourceId
+  const href = node.attrs.href
+
+  const { data, isLoading } = useLearningResourcesDetail(resourceId)
+
+  return (
+    <NodeViewWrapper className="learning-resource-node">
+      <StyledLearningResourceListCard
+        resource={data}
+        href={href}
+        isLoading={isLoading}
+      />
+    </NodeViewWrapper>
+  )
+}

frontends/ol-components/src/components/TiptapEditor/extensions/node/learning-resource-node/learning-resource-node.ts

@@ -0,0 +1,57 @@
+import { Node, mergeAttributes, type CommandProps } from "@tiptap/core"
+import { ReactNodeViewRenderer } from "@tiptap/react"
+import { LearningResourceNodeView } from "./LearningResourceListCard"
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    learningResource: {
+      insertLearningResource: (resourceId: number, href?: string) => ReturnType
+    }
+  }
+}
+export interface LearningResourceOptions {
+  HTMLAttributes: Record<string, string | number | null | undefined>
+}
+
+export const LearningResourceNode = Node.create<LearningResourceOptions>({
+  name: "learningResource",
+
+  group: "block",
+  atom: true,
+  selectable: true,
+
+  addAttributes() {
+    return {
+      resourceId: {
+        default: null,
+      },
+      href: {
+        default: null,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: "learning-resource" }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["learning-resource", mergeAttributes(HTMLAttributes)]
+  },
+
+  addCommands() {
+    return {
+      insertLearningResource:
+        (resourceId: number, href?: string) =>
+        ({ commands }: CommandProps) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs: { resourceId, href },
+          })
+        },
+    }
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(LearningResourceNodeView)
+  },
+})

frontends/ol-components/src/components/TiptapEditor/extensions/ui/learning-resource-button/Icon.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+
+export const Icon: React.FC<React.SVGProps<SVGSVGElement>> = ({
+  className,
+  ...props
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    width="34"
+    height="34"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={1.8}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className ?? "tiptap-button-icon"}
+    aria-hidden="true"
+    {...props}
+  >
+    <title>Insert course</title>
+
+    {/* Rounded Book */}
+    <rect x="4" y="3" width="16" height="18" rx="3" ry="3" />
+
+    {/* Content lines */}
+    <line x1="8" y1="8" x2="14" y2="8" />
+    <line x1="8" y1="11" x2="12" y2="11" />
+  </svg>
+)

frontends/ol-components/src/components/TiptapEditor/extensions/ui/learning-resource-button/ResourceUrlInputDialog.tsx

@@ -0,0 +1,56 @@
+import React, { useState, useCallback } from "react"
+import NiceModal, { muiDialogV5 } from "@ebay/nice-modal-react"
+import { TextField, Alert } from "@mitodl/smoot-design"
+import { FormDialog } from "ol-components"
+
+const CourseUrlInputDialog = NiceModal.create(() => {
+  const modal = NiceModal.useModal()
+  const [url, setUrl] = useState("")
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = (e?: React.FormEvent) => {
+    e?.preventDefault()
+
+    if (!url.trim()) {
+      setError("URL is required")
+      return
+    }
+    modal.resolve(url)
+    modal.hide()
+  }
+
+  const handleReset = useCallback(() => {
+    setUrl("")
+    setError(null)
+  }, [setUrl, setError])
+
+  return (
+    <FormDialog
+      {...muiDialogV5(modal)}
+      title="Course Media"
+      confirmText="Insert"
+      onSubmit={handleSubmit}
+      onReset={handleReset}
+      noValidate
+      fullWidth
+    >
+      <TextField
+        name="courseUrl"
+        label="Course URL"
+        placeholder="learn.mit.edu/search?resource=297..."
+        value={url}
+        error={!!error}
+        errorText={error ?? ""}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          setError(null)
+          setUrl(e.target.value)
+        }}
+        fullWidth
+      />
+
+      {error && <Alert severity="error">{error}</Alert>}
+    </FormDialog>
+  )
+})
+
+export default CourseUrlInputDialog

frontends/ol-components/src/components/TiptapEditor/extensions/ui/learning-resource-button/learning-resource-button.tsx

@@ -0,0 +1,85 @@
+import React, { forwardRef, useCallback } from "react"
+import type { Editor } from "@tiptap/core"
+import { Button } from "../../../components/tiptap-ui-primitive/button"
+import { Badge } from "../../../components/tiptap-ui-primitive/badge"
+import { parseShortcutKeys } from "../../../lib/tiptap-utils"
+import {
+  useLearningResourceEmbed,
+  LEARNING_RESOURCE_SHORTCUT_KEY,
+} from "./useLearningResourceEmbed"
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+
+export interface LearningResourceEmbedButtonProps {
+  editor?: Editor
+  text?: string
+  showShortcut?: boolean
+  icon?: React.FC<React.SVGProps<SVGSVGElement>>
+  onClick?: (e: React.MouseEvent) => void
+}
+
+function LearningResourceShortcutBadge() {
+  return (
+    <Badge>
+      {parseShortcutKeys({ shortcutKeys: LEARNING_RESOURCE_SHORTCUT_KEY })}
+    </Badge>
+  )
+}
+
+export const LearningResourceEmbedButton = forwardRef<
+  HTMLButtonElement,
+  LearningResourceEmbedButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      showShortcut,
+      icon: CustomIcon,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+
+    const {
+      isVisible,
+      canInsert,
+      label,
+      Icon: DefaultIcon,
+      handleEmbed,
+    } = useLearningResourceEmbed(editor)
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleEmbed()
+      },
+      [handleEmbed, onClick],
+    )
+
+    if (!isVisible) return null
+
+    const RenderIcon = CustomIcon ?? DefaultIcon
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        disabled={!canInsert}
+        aria-label={label}
+        tooltip={label}
+        onClick={handleClick}
+        ref={ref}
+        {...props}
+      >
+        <RenderIcon />
+        {text && <span className="tiptap-button-text">{text}</span>}
+        {showShortcut && <LearningResourceShortcutBadge />}
+      </Button>
+    )
+  },
+)
+
+LearningResourceEmbedButton.displayName = "LearningResourceEmbedButton"

frontends/ol-components/src/components/TiptapEditor/extensions/ui/learning-resource-button/useLearningResourceEmbed.ts

@@ -0,0 +1,43 @@
+import { useCallback } from "react"
+import type { Editor } from "@tiptap/react"
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+import NiceModal from "@ebay/nice-modal-react"
+import CourseUrlInputDialog from "./ResourceUrlInputDialog"
+import { Icon } from "./Icon" // you create this SVG
+
+export const LEARNING_RESOURCE_SHORTCUT_KEY = "Mod+Shift+R"
+
+export function useLearningResourceEmbed(editor?: Editor | null) {
+  const resolved = useTiptapEditor(editor).editor
+
+  const isVisible = !!resolved
+  const canInsert = resolved?.isEditable ?? false
+  const label = "Insert Learning Resource"
+
+  const handleEmbed = useCallback(async () => {
+    const url: string = await NiceModal.show(CourseUrlInputDialog)
+    if (!url) return
+
+    // Extract `resource=123`
+    const match = url.match(/resource=(\d+)/)
+    if (!match) {
+      alert("Invalid URL. Must contain ?resource=ID")
+      return
+    }
+
+    const resourceId = Number(match[1])
+
+    resolved?.commands.insertLearningResource(resourceId, url)
+  }, [resolved])
+
+  return {
+    editor: resolved,
+    isVisible,
+    canInsert,
+    label,
+    Icon,
+    isActive: false,
+    shortcutKeys: LEARNING_RESOURCE_SHORTCUT_KEY,
+    handleEmbed,
+  }
+}