feat: incorporating the tiptap in articles CRUD operations #2693

ahtesham-quraish · 2025-11-11T12:37:55Z

What are the relevant tickets?

In reference to #2691

Description (What does it do?)

This is about to consume the tiptap component that is created in #2691 and make changes in unit test as well

Screenshots (if appropriate):

Screen.Recording.2025-11-11.at.5.54.13.PM.mov

How can this be tested?

Hit the following url for create new articles '/articles/new'
Once you create new article then you can see the detail and edit

Additional Context

for more information, see https://pre-commit.ci

merging with main branch

jonkafton · 2025-11-12T14:26:49Z

...components/src/components/TiptapEditor/components/tiptap-templates/simple/simple-editor.scss


 .simple-editor-wrapper {
-  width: 100vw;
-  height: 100vh;


Let's override these from our parent code to avoid modifying ejected library css. This should smooth the ride when we upgrade to new Tiptap versions.

You can do e.g.

styled(TiptapEditor)({ ".simple-editor-wrapper": { width: "auto", height: "auto" } })

jonkafton

I left some comments. Let's improve the layout by pinning the toolbar to the header as we discussed (assuming not too much effort).

jonkafton · 2025-11-12T15:45:27Z

frontends/main/src/app-pages/Articles/ArticleEditPage.tsx

          className="input-field"
        />

        <ClientContainer className="editor-box">


From a previous PR, but this classname isn't referenced - can be removed

jonkafton · 2025-11-12T15:46:51Z

frontends/main/src/app-pages/Articles/ArticleEditPage.tsx

+
  return (
    <RestrictedRoute requires={Permission.ArticleEditor}>
      <Container className="article-wrapper">


From a previous PR, but this classname isn't referenced - can be removed

jonkafton · 2025-11-12T15:49:02Z

frontends/main/src/app-pages/Articles/ArticleNewPage.tsx

  margin: "10px 0",
 })

+styled(TiptapEditor)({


This won't do anything unless used, ie.

const StyledTiptapEditor = styled(TiptapEditor)({ ... })

... and then use StyledTiptapEditor in the component

we don't need this for now lets remove it

jonkafton · 2025-11-12T15:58:12Z

frontends/main/src/app-pages/Articles/ArticleEditPage.tsx

-  const [text, setText] = useState("")
-  const [json, setJson] = useState({})
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [json, setJson] = useState<Record<string, any>>({


@tiptap/core exports type JSONContent so we can do useState<JSONContent>. We don't want to install @tiptap/core in the main workspace, but could re-export from ol-components as TiptapJSONContent, or better - add an export map to the ol-components package.json so we can do

import type { JSONContent } from "ol-components/tiptap-editor"

jonkafton · 2025-11-12T16:01:53Z

frontends/main/src/app-pages/Articles/ArticleNewPage.tsx

-  const [text, setText] = useState("")
-  const [json, setJson] = useState({})
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [json, setJson] = useState<Record<string, any>>({


JSONContent type here as well.

jonkafton · 2025-11-12T16:32:04Z

frontends/main/src/app-pages/Articles/NewArticlePage.test.tsx

+jest.mock("ol-components", () => {
+  // Reuse other exports from ol-components if needed
+  const actual = jest.requireActual("ol-components")
+  return {
+    ...actual,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    TiptapEditor: ({ value, onChange, "data-testid": testId }: any) => {
+      return (
+        <textarea
+          data-testid={testId || "editor"}
+          value={JSON.stringify(value, null, 2)}
+          onChange={(e) => {
+            try {
+              // Allow simulating JSON-like updates if needed
+              const parsed = JSON.parse(e.target.value)
+              onChange?.(parsed)
+            } catch {
+              // fallback to raw string for simple tests
+              onChange?.(e.target.value)
+            }
+          }}
+        />
+      )
+    },
+  }
+})
+


We shouldn't need to mock the editor here. For the actual instance to work, we'll need two things:

the data-testid to be passed to TiptapEditor and set on its containing div for the expect(screen.getByTestId("editor")).toBeInTheDocument() assertion. SimpleEditorProps could extend React.HTMLAttributes<HTMLDivElement> so we can set any div props on the contiainer, or just:

interface SimpleEditorProps { value?: object onChange?: (json: object) => void readOnly?: boolean "data-testid"?: string }

the article factory must return a valid document on the content, e.g.

const article = factories.articles.article({ id: 42, title: "Existing Title", content: { type: "doc", content: [ { type: "paragraph", content: [{ type: "text", text: "Existing content" }], }, ], }, })

jonkafton · 2025-11-12T16:40:36Z

frontends/main/public/images/tiptap-ui-placeholder-image.webp

If we need a placeholder image, let's use one already in the repo, e.g. https://github.com/mitodl/mit-learn/blob/main/frontends/main/public/mit-dome-2.jpg

jonkafton

👍 #2699 to follow up

jonkafton and others added 14 commits November 10, 2025 17:46

Initial Tiptap Editor

df648c9

Update lockfile

a98a0bc

Ignore stylelint errors in vendor sheets

65dd417

[pre-commit.ci] auto fixes from pre-commit.com hooks

8d1ae8c

for more information, see https://pre-commit.ci

Run fmt-fix

ff020e4

Eslint ignore vendor code

a28ac14

Revert main package.json

1a2c714

Remove aliases from Tiptap template code imports

335c7b9

Prettier fixes

f49a96e

CodeQL fix

0f94110

React in scope fixes

638411a

Format fix

8ca8b24

Transform react-hotkeys-hook to resolve esm error

ae1b0f5

Merge branch 'main' into jk/tiptap-editor

41f8931

merging with main branch

ahtesham-quraish changed the title ~~Ahtesham/consume tiptap~~ feat: incorporating the tiptap in articles CRUD operations Nov 11, 2025

feat: adding tiptap integration with article crud operation

7783bac

ahtesham-quraish force-pushed the ahtesham/consume-tiptap branch from 174efdc to 7783bac Compare November 11, 2025 12:48

feat: add upload image control in toolbar

4ada6d3

ahtesham-quraish force-pushed the ahtesham/consume-tiptap branch from 1313fb6 to 193468e Compare November 12, 2025 13:54

jonkafton reviewed Nov 12, 2025

View reviewed changes

ahtesham-quraish force-pushed the ahtesham/consume-tiptap branch from 193468e to fd4b9ff Compare November 12, 2025 14:37

rebase with master

d602fcb

ahtesham-quraish force-pushed the ahtesham/consume-tiptap branch from fd4b9ff to d602fcb Compare November 12, 2025 14:41

jonkafton reviewed Nov 12, 2025

View reviewed changes

ahtesham-quraish force-pushed the ahtesham/consume-tiptap branch 2 times, most recently from 848f12f to bb13dcd Compare November 12, 2025 17:59

made wrapper component for editor

a42a4c5

ahtesham-quraish force-pushed the ahtesham/consume-tiptap branch from bb13dcd to a42a4c5 Compare November 12, 2025 18:18

jonkafton approved these changes Nov 13, 2025

View reviewed changes

ahtesham-quraish merged commit 4169b0c into main Nov 13, 2025
13 checks passed

ahtesham-quraish deleted the ahtesham/consume-tiptap branch November 13, 2025 15:15

odlbot mentioned this pull request Nov 17, 2025

Release 0.47.13 #2713

Open

16 tasks

feat: incorporating the tiptap in articles CRUD operations #2693

feat: incorporating the tiptap in articles CRUD operations #2693

Uh oh!

Conversation

ahtesham-quraish commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What are the relevant tickets?

Description (What does it do?)

Screenshots (if appropriate):

How can this be tested?

Additional Context

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jonkafton left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jonkafton left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ahtesham-quraish commented Nov 11, 2025 •

edited

Loading