feat: new tiptap

examples/tiptap/package.json

@@ -18,32 +18,22 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@radix-ui/react-dialog": "^1.0.2",
-    "@radix-ui/react-popover": "^1.0.2",
-    "@radix-ui/react-select": "^1.1.1",
-    "@radix-ui/react-tabs": "^1.0.1",
-    "@radix-ui/react-tooltip": "^1.0.2",
-    "@rocicorp/reflect-yjs": "0.0.1",
     "@rocicorp/reflect": "^0.38.202311200859",
-    "@tiptap/extension-collaboration-cursor": "^2.0.4",
+    "@rocicorp/reflect-yjs": "0.0.1",
+    "@tiptap/core": "^2.0.4",
+    "@tiptap/extension-character-count": "^2.0.4",
     "@tiptap/extension-collaboration": "^2.0.4",
+    "@tiptap/extension-collaboration-cursor": "^2.0.4",
     "@tiptap/extension-highlight": "^2.0.4",
-    "@tiptap/extension-image": "^2.0.4",
-    "@tiptap/extension-link": "^2.0.4",
-    "@tiptap/extension-placeholder": "^2.0.4",
     "@tiptap/extension-task-item": "^2.0.4",
     "@tiptap/extension-task-list": "^2.0.4",
-    "@tiptap/extension-text-align": "^2.0.4",
-    "@tiptap/extension-typography": "^2.0.4",
-    "@tiptap/extension-youtube": "^2.0.4",
-    "@tiptap/pm": "^2.0.4",
     "@tiptap/react": "^2.0.4",
     "@tiptap/starter-kit": "^2.0.4",
     "@types/node": "^20.3.1",
-    "@types/react-dom": "^18.2.17",
     "@types/react": "^18.2.38",
-    "clsx": "^2.0.0",
+    "@types/react-dom": "^18.2.17",
     "concurrently": "^8.2.2",
+    "lexical": "^0.11.1",
     "nanoid": "^5.0.3",
     "next": "^13.5.4",
     "typescript": "^5.3.2",

examples/tiptap/src/components/MenuBar.css

@@ -0,0 +1,7 @@
+.divider {
+  background-color: rgba(#fff, 0.25);
+  height: 1.25rem;
+  margin-left: 0.5rem;
+  margin-right: 0.75rem;
+  width: 1px;
+}

examples/tiptap/src/components/MenuBar.tsx

@@ -0,0 +1,151 @@
+"use client";
+import "./MenuBar.css";
+
+import React, { Fragment } from "react";
+import { Editor } from "@tiptap/core";
+
+import MenuItem from "./MenuItem";
+
+export type Item = {
+  icon?: string | undefined;
+  title?: string | undefined;
+  action?: () => boolean | undefined;
+  isActive?: () => boolean | undefined;
+  type?: "divider" | undefined;
+};
+
+export function MenuBar({ editor }: { editor: Editor }) {
+  const items: Item[] = [
+    {
+      icon: "bold",
+      title: "Bold",
+      action: () => editor.chain().focus().toggleBold().run(),
+      isActive: () => editor.isActive("bold"),
+    },
+    {
+      icon: "italic",
+      title: "Italic",
+      action: () => editor.chain().focus().toggleItalic().run(),
+      isActive: () => editor.isActive("italic"),
+    },
+    {
+      icon: "strikethrough",
+      title: "Strike",
+      action: () => editor.chain().focus().toggleStrike().run(),
+      isActive: () => editor.isActive("strike"),
+    },
+    {
+      icon: "code-view",
+      title: "Code",
+      action: () => editor.chain().focus().toggleCode().run(),
+      isActive: () => editor.isActive("code"),
+    },
+    {
+      icon: "mark-pen-line",
+      title: "Highlight",
+      action: () => editor.chain().focus().toggleHighlight().run(),
+      isActive: () => editor.isActive("highlight"),
+    },
+    {
+      type: "divider",
+    },
+    {
+      icon: "h-1",
+      title: "Heading 1",
+      action: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+      isActive: () => editor.isActive("heading", { level: 1 }),
+    },
+    {
+      icon: "h-2",
+      title: "Heading 2",
+      action: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+      isActive: () => editor.isActive("heading", { level: 2 }),
+    },
+    {
+      icon: "paragraph",
+      title: "Paragraph",
+      action: () => editor.chain().focus().setParagraph().run(),
+      isActive: () => editor.isActive("paragraph"),
+    },
+    {
+      icon: "list-unordered",
+      title: "Bullet List",
+      action: () => editor.chain().focus().toggleBulletList().run(),
+      isActive: () => editor.isActive("bulletList"),
+    },
+    {
+      icon: "list-ordered",
+      title: "Ordered List",
+      action: () => editor.chain().focus().toggleOrderedList().run(),
+      isActive: () => editor.isActive("orderedList"),
+    },
+    {
+      icon: "list-check-2",
+      title: "Task List",
+      action: () => editor.chain().focus().toggleTaskList().run(),
+      isActive: () => editor.isActive("taskList"),
+    },
+    {
+      icon: "code-box-line",
+      title: "Code Block",
+      action: () => editor.chain().focus().toggleCodeBlock().run(),
+      isActive: () => editor.isActive("codeBlock"),
+    },
+    {
+      type: "divider",
+    },
+    {
+      icon: "double-quotes-l",
+      title: "Blockquote",
+      action: () => editor.chain().focus().toggleBlockquote().run(),
+      isActive: () => editor.isActive("blockquote"),
+    },
+    {
+      icon: "separator",
+      title: "Horizontal Rule",
+      action: () => editor.chain().focus().setHorizontalRule().run(),
+    },
+    {
+      type: "divider",
+    },
+    {
+      icon: "text-wrap",
+      title: "Hard Break",
+      action: () => editor.chain().focus().setHardBreak().run(),
+    },
+    {
+      icon: "format-clear",
+      title: "Clear Format",
+      action: () => editor.chain().focus().clearNodes().unsetAllMarks().run(),
+    },
+    {
+      type: "divider",
+    },
+    {
+      icon: "arrow-go-back-line",
+      title: "Undo",
+      action: () => editor.chain().focus().undo().run(),
+    },
+    {
+      icon: "arrow-go-forward-line",
+      title: "Redo",
+      action: () => editor.chain().focus().redo().run(),
+    },
+  ];
+
+  return (
+    <div className="editor__header">
+      {items.map((item, index) => (
+        <Fragment key={index}>
+          {item.type === "divider" ? (
+            <div className="divider" />
+          ) : (
+            <MenuItem {...item} />
+          )}
+        </Fragment>
+      ))}
+    </div>
+  );
+}
+
+export default MenuBar;

examples/tiptap/src/components/MenuItem.css

@@ -0,0 +1,22 @@
+.menu-item {
+  background-color: transparent;
+  border: none;
+  border-radius: 0.4rem;
+  color: #fff;
+  cursor: pointer;
+  height: 1.75rem;
+  margin-right: 0.25rem;
+  padding: 0.25rem;
+  width: 1.75rem;
+}
+
+.menu-item svg {
+  fill: currentColor;
+  height: 100%;
+  width: 100%;
+}
+
+.menu-item:hover,
+.menu-item.is-active {
+  background-color: #303030;
+}

examples/tiptap/src/components/MenuItem.tsx

@@ -0,0 +1,21 @@
+"use client";
+import "./MenuItem.css";
+
+import React from "react";
+
+import { Item } from "./MenuBar";
+export function MenuItem({ icon, title, action, isActive }: Item) {
+  return (
+    <button
+      className={`menu-item${isActive && isActive() ? " is-active" : ""}`}
+      onClick={action}
+      title={title}
+    >
+      <svg className="remix">
+        <use xlinkHref={`/remixicon.symbol.svg#ri-${icon}`} />
+      </svg>
+    </button>
+  );
+}
+
+export default MenuItem;