Initial Tiptap Editor

frontends/.eslintrc.js

@@ -14,6 +14,10 @@ module.exports = {
     "mit-learn",
     "github-pages",
     "storybook-static",
+    "**/TiptapEditor/components/**/*.tsx",
+    "**/TiptapEditor/components/**/*.ts",
+    "**/TiptapEditor/hooks/**/*.ts",
+    "**/TiptapEditor/lib/**/*.ts",
   ],
   settings: {
     "import/resolver": {

frontends/.stylelintrc.yaml

@@ -6,6 +6,8 @@ rules:
     - message: "Expected class selector to be kebab-case"
 ignoreFiles:
   - "**/*.vendor.css"
+  - "**/TiptapEditor/components/**/*.scss"
+  - "**/TiptapEditor/styles/**/*.scss"
 overrides:
   - files:
       - "**/*.scss"

frontends/main/jest.config.ts

@@ -7,7 +7,9 @@ const config: Config.InitialOptions = {
     ...baseConfig.setupFilesAfterEnv,
     "./test-utils/setupJest.tsx",
   ],
-  transformIgnorePatterns: ["node_modules/(?!@faker-js).+"],
+  transformIgnorePatterns: [
+    "node_modules/(?!(@faker-js|react-hotkeys-hook)).+",
+  ],
   moduleNameMapper: {
     ...baseConfig.moduleNameMapper,
     "^@/(.*)$": path.resolve(__dirname, "src/$1"),

frontends/main/next.config.js

@@ -128,7 +128,7 @@ const nextConfig = {
         allowCollectingMemory: true,
       })
     }
-    // Important: return the modified config
+
     return config
   },
 }

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

@@ -0,0 +1,36 @@
+"use client"
+
+import React from "react"
+import { TiptapEditor, theme, styled, HEADER_HEIGHT } from "ol-components"
+import { Permission } from "api/hooks/user"
+import RestrictedRoute from "@/components/RestrictedRoute/RestrictedRoute"
+
+const PageContainer = styled.div({
+  color: theme.custom.colors.darkGray2,
+  display: "flex",
+  height: `calc(100vh - ${HEADER_HEIGHT}px - 132px)`,
+})
+
+const EditorContainer = styled.div({
+  minHeight: 0,
+})
+
+const StyledTiptapEditor = styled(TiptapEditor)({
+  width: "70vw",
+  height: `calc(100% - ${HEADER_HEIGHT}px - 132px)`,
+  overscrollBehavior: "contain",
+})
+
+const NewArticlePage: React.FC = () => {
+  return (
+    <RestrictedRoute requires={Permission.ArticleEditor}>
+      <PageContainer>
+        <EditorContainer>
+          <StyledTiptapEditor />
+        </EditorContainer>
+      </PageContainer>
+    </RestrictedRoute>
+  )
+}
+
+export { NewArticlePage }

frontends/main/src/app/article/new/page.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+import { Metadata } from "next"
+import { standardizeMetadata } from "@/common/metadata"
+import { NewArticlePage } from "@/app-pages/ArticlePage/NewArticlePage"
+
+export const metadata: Metadata = standardizeMetadata({
+  title: "New Article",
+  robots: "noindex, nofollow",
+})
+
+const Page: React.FC<PageProps<"/article/new">> = () => {
+  return <NewArticlePage />
+}
+
+export default Page

frontends/ol-components/package.json

@@ -19,26 +19,43 @@
     "@dnd-kit/utilities": "^3.2.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@floating-ui/react": "^0.27.16",
     "@mui/base": "5.0.0-beta.70",
     "@mui/lab": "6.0.0-dev.240424162023-9968b4889d",
     "@mui/material": "^6.4.5",
     "@mui/material-nextjs": "^6.4.3",
     "@mui/system": "^6.4.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
     "@remixicon/react": "^4.2.0",
     "@testing-library/dom": "^10.4.0",
+    "@tiptap/extension-highlight": "^3.10.5",
+    "@tiptap/extension-horizontal-rule": "^3.10.5",
+    "@tiptap/extension-image": "^3.10.5",
+    "@tiptap/extension-list": "^3.10.5",
+    "@tiptap/extension-subscript": "^3.10.5",
+    "@tiptap/extension-superscript": "^3.10.5",
+    "@tiptap/extension-text-align": "^3.10.5",
+    "@tiptap/extension-typography": "^3.10.5",
+    "@tiptap/extensions": "^3.10.5",
+    "@tiptap/pm": "^3.10.5",
+    "@tiptap/react": "^3.10.5",
+    "@tiptap/starter-kit": "^3.10.5",
     "@types/react-dom": "^19",
     "@types/tinycolor2": "^1.4.6",
     "api": "workspace:*",
     "classnames": "^2.5.1",
     "embla-carousel-react": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.0.2",
     "lodash": "^4.17.21",
+    "lodash.throttle": "^4.1.1",
     "material-ui-popup-state": "^5.1.0",
     "next": "^15.5.2",
     "ol-test-utilities": "0.0.0",
     "ol-utilities": "0.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hotkeys-hook": "^5.2.1",
     "react-select": "^5.7.7",
     "react-share": "^5.0.3",
     "react-slick": "^0.30.2",
@@ -65,10 +82,13 @@
     "@storybook/types": "^8.2.9",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",
+    "@types/lodash.throttle": "^4.1.9",
     "@types/react-slick": "^0",
     "dotenv": "^17.0.0",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
+    "sass": "^1.93.3",
+    "sass-embedded": "^1.93.3",
     "storybook": "^8.2.9",
     "typescript": "^5.5.4",
     "webpack": "^5.94.0"

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

@@ -0,0 +1,174 @@
+"use client"
+
+// Based on ./components/tiptap-templates/simple/simple-editor.tsx
+
+import React, { useRef } from "react"
+import { EditorContent, EditorContext, useEditor } from "@tiptap/react"
+
+// --- Tiptap Core Extensions ---
+import { StarterKit } from "@tiptap/starter-kit"
+import { TaskItem, TaskList } from "@tiptap/extension-list"
+import { TextAlign } from "@tiptap/extension-text-align"
+import { Typography } from "@tiptap/extension-typography"
+import { Highlight } from "@tiptap/extension-highlight"
+import { Subscript } from "@tiptap/extension-subscript"
+import { Superscript } from "@tiptap/extension-superscript"
+import { Selection } from "@tiptap/extensions"
+
+// --- UI Primitives ---
+import { Spacer } from "./components/tiptap-ui-primitive/spacer"
+import {
+  Toolbar,
+  ToolbarGroup,
+  ToolbarSeparator,
+} from "./components/tiptap-ui-primitive/toolbar"
+
+// --- Tiptap Node ---
+import { ImageUploadNode } from "./components/tiptap-node/image-upload-node/image-upload-node-extension"
+import { HorizontalRule } from "./components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension"
+import "./components/tiptap-node/blockquote-node/blockquote-node.scss"
+import "./components/tiptap-node/code-block-node/code-block-node.scss"
+import "./components/tiptap-node/horizontal-rule-node/horizontal-rule-node.scss"
+import "./components/tiptap-node/list-node/list-node.scss"
+import "./components/tiptap-node/image-node/image-node.scss"
+import "./components/tiptap-node/heading-node/heading-node.scss"
+import "./components/tiptap-node/paragraph-node/paragraph-node.scss"
+
+// --- Tiptap UI ---
+import { HeadingDropdownMenu } from "./components/tiptap-ui/heading-dropdown-menu"
+import { ListDropdownMenu } from "./components/tiptap-ui/list-dropdown-menu"
+import { BlockquoteButton } from "./components/tiptap-ui/blockquote-button"
+import { CodeBlockButton } from "./components/tiptap-ui/code-block-button"
+import { ColorHighlightPopover } from "./components/tiptap-ui/color-highlight-popover"
+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"
+
+// --- Lib ---
+import { handleImageUpload, MAX_FILE_SIZE } from "./lib/tiptap-utils"
+
+// --- Styles ---
+import "./styles/_keyframe-animations.scss"
+import "./styles/_variables.scss"
+import "./components/tiptap-templates/simple/simple-editor.scss"
+
+const MainToolbarContent = () => {
+  return (
+    <>
+      <Spacer />
+
+      <ToolbarGroup>
+        <UndoRedoButton action="undo" />
+        <UndoRedoButton action="redo" />
+      </ToolbarGroup>
+
+      <ToolbarSeparator />
+
+      <ToolbarGroup>
+        <HeadingDropdownMenu levels={[1, 2, 3, 4]} />
+        <ListDropdownMenu types={["bulletList", "orderedList", "taskList"]} />
+        <BlockquoteButton />
+        <CodeBlockButton />
+      </ToolbarGroup>
+
+      <ToolbarSeparator />
+
+      <ToolbarGroup>
+        <MarkButton type="bold" />
+        <MarkButton type="italic" />
+        <MarkButton type="strike" />
+        <MarkButton type="code" />
+        <MarkButton type="underline" />
+        <ColorHighlightPopover />
+        <LinkPopover />
+      </ToolbarGroup>
+
+      <ToolbarSeparator />
+
+      <ToolbarGroup>
+        <MarkButton type="superscript" />
+        <MarkButton type="subscript" />
+      </ToolbarGroup>
+
+      <ToolbarSeparator />
+
+      <ToolbarGroup>
+        <TextAlignButton align="left" />
+        <TextAlignButton align="center" />
+        <TextAlignButton align="right" />
+        <TextAlignButton align="justify" />
+      </ToolbarGroup>
+
+      <Spacer />
+    </>
+  )
+}
+
+export default function SimpleEditor() {
+  const toolbarRef = useRef<HTMLDivElement>(null)
+
+  const editor = useEditor({
+    immediatelyRender: false,
+    shouldRerenderOnTransaction: false,
+    editorProps: {
+      attributes: {
+        autocomplete: "off",
+        autocorrect: "off",
+        autocapitalize: "off",
+        "aria-label": "Main content area, start typing to enter text.",
+        class: "simple-editor",
+      },
+    },
+    extensions: [
+      StarterKit.configure({
+        horizontalRule: false,
+        link: {
+          openOnClick: false,
+          enableClickSelection: true,
+        },
+      }),
+      HorizontalRule,
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+      TaskList,
+      TaskItem.configure({ nested: true }),
+      Highlight.configure({ multicolor: true }),
+      Typography,
+      Superscript,
+      Subscript,
+      Selection,
+      ImageUploadNode.configure({
+        accept: "image/*",
+        maxSize: MAX_FILE_SIZE,
+        limit: 3,
+        upload: handleImageUpload,
+        onError: (error) => console.error("Upload failed:", error),
+      }),
+    ],
+    content: {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [],
+        },
+      ],
+    },
+  })
+
+  return (
+    <div className="simple-editor-wrapper">
+      <EditorContext.Provider value={{ editor }}>
+        <Toolbar ref={toolbarRef}>
+          <MainToolbarContent />
+        </Toolbar>
+
+        <EditorContent
+          editor={editor}
+          role="presentation"
+          className="simple-editor-content"
+        />
+      </EditorContext.Provider>
+    </div>
+  )
+}

frontends/ol-components/src/components/TiptapEditor/components/tiptap-icons/align-center-icon.tsx

@@ -0,0 +1,38 @@
+import React, { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const AlignCenterIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 18C4 17.4477 4.44772 17 5 17H19C19.5523 17 20 17.4477 20 18C20 18.5523 19.5523 19 19 19H5C4.44772 19 4 18.5523 4 18Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+AlignCenterIcon.displayName = "AlignCenterIcon"