RFC: Headless core components & imperative support

.eslintrc.json

@@ -6,5 +6,8 @@
  "next": {
  "rootDir": ["apps/*/"]
  }
+ },
+ "rules": {
+ "no-unused-vars": "off"
  }
 }

apps/web/app/page.tsx

@@ -1,6 +1,6 @@
 import { Github } from "@/ui/icons";
 import Menu from "@/ui/menu";
-import Editor from "@/ui/editor";
+import { Editor } from "@novel/tailwind";
 
 export default function Page() {
  return (

apps/web/next.config.js

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+ transpilePackages: ["@novel/headless"],
  redirects: async () => {
  return [
  {

apps/web/package.json

@@ -11,6 +11,8 @@
  "lint": "next lint"
  },
  "dependencies": {
+ "@novel/headless": "workspace:^",
+ "@novel/tailwind": "workspace:^",
  "@radix-ui/react-popover": "^1.0.6",
  "@tiptap/core": "^2.0.3",
  "@tiptap/extension-color": "^2.0.3",
@@ -41,7 +43,6 @@
  "eventsource-parser": "^0.1.0",
  "lucide-react": "^0.244.0",
  "next": "13.4.8-canary.14",
- "novel": "workspace:^",
  "openai": "^4.3.1",
  "react": "18.2.0",
  "react-dom": "18.2.0",

packages/core/package.json

@@ -19,7 +19,6 @@
  },
  "scripts": {
  "build": "tsup",
- "dev": "tsup --watch",
  "check-types": "tsc --noEmit"
  },
  "peerDependencies": {

packages/core/src/ui/editor/plugins/upload-images.tsx

@@ -22,20 +22,15 @@ const UploadImagesPlugin = () =>
  const placeholder = document.createElement("div");
  placeholder.setAttribute("class", "img-placeholder");
  const image = document.createElement("img");
- image.setAttribute(
- "class",
- "opacity-40 rounded-lg border border-stone-200"
- );
+ image.setAttribute("class", "opacity-40 rounded-lg border border-stone-200");
  image.src = src;
  placeholder.appendChild(image);
  const deco = Decoration.widget(pos + 1, placeholder, {
  id,
  });
  set = set.add(tr.doc, [deco]);
  } else if (action && action.remove) {
- set = set.remove(
- set.find(null, null, (spec) => spec.id == action.remove.id)
- );
+ set = set.remove(set.find(null, null, (spec) => spec.id == action.remove.id));
  }
  return set;
  },

packages/headless/package.json

@@ -0,0 +1,82 @@
+{
+ "name": "@novel/headless",
+ "version": "0.1.19",
+ "description": "Notion-style WYSIWYG editor with AI-powered autocompletions",
+ "license": "Apache-2.0",
+ "main": "src/index.ts",
+ "scripts": {
+ "check-types": "tsc --noEmit"
+ },
+ "peerDependencies": {
+ "react": "^18.2.0"
+ },
+ "dependencies": {
+ "@radix-ui/react-popover": "^1.0.6",
+ "@radix-ui/react-slot": "^1.0.2",
+ "@tiptap/core": "^2.1.7",
+ "@tiptap/extension-color": "^2.1.7",
+ "@tiptap/extension-highlight": "^2.1.7",
+ "@tiptap/extension-horizontal-rule": "^2.1.7",
+ "@tiptap/extension-image": "^2.1.7",
+ "@tiptap/extension-link": "^2.1.7",
+ "@tiptap/extension-placeholder": "2.0.3",
+ "@tiptap/extension-task-item": "^2.1.7",
+ "@tiptap/extension-task-list": "^2.1.7",
+ "@tiptap/extension-text-style": "^2.1.7",
+ "@tiptap/extension-underline": "^2.1.7",
+ "@tiptap/pm": "^2.1.7",
+ "@tiptap/react": "^2.1.7",
+ "@tiptap/starter-kit": "^2.1.7",
+ "@tiptap/suggestion": "^2.1.7",
+ "@types/node": "18.15.3",
+ "@types/react": "18.0.28",
+ "@types/react-dom": "18.0.11",
+ "@upstash/ratelimit": "^0.4.4",
+ "@vercel/analytics": "^1.0.2",
+ "@vercel/blob": "^0.9.3",
+ "@vercel/kv": "^0.2.2",
+ "ai": "^2.2.11",
+ "clsx": "^1.2.1",
+ "eslint": "8.36.0",
+ "eslint-config-next": "13.2.4",
+ "eventsource-parser": "^0.1.0",
+ "lucide-react": "^0.244.0",
+ "next": "13.4.20-canary.15",
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
+ "react-markdown": "^8.0.7",
+ "sonner": "^0.7.0",
+ "tailwind-merge": "^1.14.0",
+ "tippy.js": "^6.3.7",
+ "tiptap-markdown": "^0.8.2",
+ "typescript": "4.9.5",
+ "use-debounce": "^9.0.4"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.5",
+ "eslint": "^7.32.0",
+ "postcss": "^8.4.29",
+ "react": "^18.2.0",
+ "tailwind-config": "workspace:*",
+ "tsconfig": "workspace:*",
+ "tsup": "^7.2.0",
+ "typescript": "^4.9.4"
+ },
+ "author": "Steven Tey <[email protected]>",
+ "homepage": "https://novel.sh",
+ "repository": {
+ "type": "git",
+ "url": "git+https:/steven-tey/novel.git"
+ },
+ "bugs": {
+ "url": "https:/steven-tey/novel/issues"
+ },
+ "keywords": [
+ "ai",
+ "novel",
+ "editor",
+ "markdown",
+ "nextjs",
+ "react"
+ ]
+}

packages/headless/src/components/bubble/editor-bubble-item.tsx

@@ -0,0 +1,36 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { Editor } from "@tiptap/core";
+import useEditor from "../../hooks/useEditor";
+interface EditorBubbleItemProps extends ComponentPropsWithoutRef<"button"> {
+ children: ReactNode;
+ asChild?: boolean;
+ command: (editor: Editor) => void;
+}
+
+export interface BubbleMenuItem {
+ name: string;
+ isActive: (editor: Editor) => boolean;
+ command: (editor: Editor) => void;
+ icon: any;
+}
+
+const EditorBubbleItem = ({
+ children,
+ asChild = false,
+ command,
+ ...props
+}: EditorBubbleItemProps) => {
+ const { editor } = useEditor();
+ const Comp = asChild ? Slot : "button";
+
+ if (!editor) return null;
+
+ return (
+ <Comp {...props} onClick={() => command(editor)} type='button'>
+ {children}
+ </Comp>
+ );
+};
+
+export default EditorBubbleItem;

packages/headless/src/components/bubble/editor-bubble.tsx

@@ -0,0 +1,41 @@
+import { BubbleMenuProps, BubbleMenu as Menu, isNodeSelection } from "@tiptap/react";
+import useEditor from "../../hooks/useEditor";
+
+type Props = {
+ onHidden: () => void;
+} & BubbleMenuProps;
+
+const BubbleMenu = ({ children, onHidden, ...props }: Props) => {
+ const { editor } = useEditor();
+
+ if (!editor) return null;
+
+ const bubbleMenuProps: Omit<BubbleMenuProps, "children"> = {
+ editor,
+ shouldShow: ({ editor, state }) => {
+ const { selection } = state;
+ const { empty } = selection;
+
+ // don't show bubble menu if:
+ // - the selected node is an image
+ // - the selection is empty
+ // - the selection is a node selection (for drag handles)
+ if (editor.isActive("image") || empty || isNodeSelection(selection)) {
+ return false;
+ }
+ return true;
+ },
+ tippyOptions: {
+ moveTransition: "transform 0.15s ease-out",
+ onHidden,
+ },
+ };
+
+ return (
+ <Menu {...props} {...bubbleMenuProps}>
+ {children}
+ </Menu>
+ );
+};
+
+export default BubbleMenu;

packages/headless/src/components/command/command-list-item.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import useEditor from "../../hooks/useEditor";
+
+export interface CommandListItemProps {
+ title: string;
+ description: string;
+ icon: ReactNode;
+ active: boolean;
+ isLoading: boolean;
+ className: string;
+ onSelect: () => void;
+ asChild?: boolean;
+ children?: ReactNode;
+}
+
+const CommandListItem = ({
+ children,
+ asChild = false,
+ onSelect,
+ ...props
+}: CommandListItemProps) => {
+ const { editor } = useEditor();
+ const Comp = asChild ? Slot : "button";
+
+ if (!editor) return null;
+
+ return (
+ <Comp {...props} onClick={onSelect} type='button'>
+ {children}
+ </Comp>
+ );
+};
+
+export default CommandListItem;