RFC: Headless core components & imperative support

[andrewdoro]

@steven-tey Really cool project, I really love it 😍

The whole purpose of this PR is to radixify the core package and make it easier to add custom behaviour and most essentially custom styling. It decouples the styling from tailwind completely. It also enables custom bubble & slash command components. (#128,#135, #134)

The code is still not perfect, I just started this a few hours ago and I need to sleep. The structure and the naming conventions are still shady (also the TS types), but overall the direction is to have something headless like Radix-UI.

I also want to add an example with different styling methods (CSS Modules, PandaCSS).

Main changes:

• Refactored editor/index.tsx to use EditorProvider and exposed useCurrentEditor to user

• Created createDefaultExtensions fn util for default styling

• Added BubbleMenuItem unstyled component with polymorphic asChild being used for commands in the bubble

   const item = {
        name: "bold",
        isActive: (editor) => editor.isActive("bold"),
        command: (editor) => editor.chain().focus().toggleBold().run(),
        icon: BoldIcon,
      } as BubbleMenuItemType
  
   <BubbleMenuItem
            command={item.command}
            className="p-2 text-stone-600 hover:bg-stone-100 active:bg-stone-200"
            type="button"
          >
           {...}
  </BubbleMenuItem>

• Added BubbleMenu wrapper over @tiptap/react/BubbleMenu

• Exposes SlashCommand as fn

const SlashCommand = (list: ComponentType<any>) =>
  Command.configure({
    suggestion: {
      items: getSuggestionItems,
      render: renderItems(list),
    },
  });

• Migrated example app to use the new approach (maybe some users would still want the default tailwind behavirour, this is just for testing now)
• The consumer app codes becomes something like this where children of BubbleMenu use BubbleMenuItem internally

 <NovelEditor>
       <BubbleMenu >
         <NodeSelector />
         <LinkSelector />
         <TextBubbles />
         <ColorSelector />
       </BubbleMenu>
 </NovelEditor>

[vercel]

@andrewdoro is attempting to deploy a commit to the Elegance Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
novel	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 5, 2023 8:57pm

[andrewdoro]

I will make some changes to this to be non-destructive

[andrewdoro]

Update

@steven-tey

• Kept core package until a decision is made (nothing changed here)
• Added @novel/headless package which exposes unstyled components and utility functions. This package is unstyled and components can be used to build an Editor. I think we should publish it.
• NodeSelector, LinkSelector and ColorSelector are not part of the headless because they can easily be created with the new EditorBubbleItem. This also helps in decoupling the selectors from Radix.
• Added @novel/tailwind package which uses the headless package and exports a styled Editor
• Currently the @novel/tailwind package is used more for showing how to build your own editor with custom styled bubble and command list components. If we publish this package we should export individual styled components and then compose them in the consumer app.

If we require full flexibility we should also look over implementing a CLI that copies the headless and tailwind package giving user full control, similar to https://github.com/shadcn-ui/ui.

Editor anatomy

import {
  EditorProvider,
  EditorBubble,
  EditorBubbleItem,
  EditorCommandItem,
  EditorCommandList,
  CommandListProps,
  CommandListItemProps,
  createEditorSlashCommand,
} from "@novel/headless";
import { Popover } from "@radix-ui/react-popover";

const Selector = () => {
  return (
    <Popover>
      <Popover.Trigger />
      <Popover.Content>
        <EditorBubbleItem />
        <EditorBubbleItem />
        <EditorBubbleItem />
      </Popover.Content>
    </Popover>
  );
};

const CommandItem = (props: CommandListItemProps) => (
  <EditorCommandItem {...props}></EditorCommandItem>
);
const CommandList = (props: CommandListProps) => (
  <EditorCommandList {...props} Element={CommandItem} />
);

const Editor = () => {
  return (
    <EditorProvider extensions={[createEditorSlashCommand(CommandList)]}>
      <EditorBubble>
        <EditorBubbleItem />
        <EditorBubbleItem />
        <EditorBubbleItem />
        <Selector />
      </EditorBubble>
    </EditorProvider>
  );
};

export default Anatomy;

[jeloi]

could we make this a param thats passed in? alternative is to just supporting override extensions entirely to configure a custom one, but could be too heavy handed.

[JimmyLv]

any update? 😁

[gediminastub]

Maybe any update? Looking forward to this very much! Thanks!

[George-field]

Any updates on this? happy to help out if not 😄

[FranciscoMoretti]

Give this PR a cookie 🍪

[andrewdoro]

Update: Just wanted to share an update related to this PR. I've spoken with @steven-tey and I'll join the project as a maintainer. I'll first start by finishing this PR and have it merged. Also added this discussion about a potential roadmap #273.

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@radix-ui/react-dialog@1.0.5	Transitive: environment	+38	7.6 MB	benoitgrelard
npm/@radix-ui/react-select@2.0.0	Transitive: environment	+51	8.48 MB	benoitgrelard
npm/@radix-ui/react-separator@1.0.3	Transitive: environment	+15	6.73 MB	benoitgrelard
npm/@tailwindcss/typography@0.5.10	Transitive: environment, filesystem, shell, unsafe	+74	11.8 MB	thecrypticace
npm/ai@2.2.33	Transitive: environment, eval, filesystem, network, unsafe	+52	23 MB	chriswdmr, ijjk, matheuss, ...8 more
npm/autoprefixer@10.4.17	environment Transitive: filesystem, shell	+12	2.9 MB	ai
npm/class-variance-authority@0.7.0	None	+1	15.7 kB	joebell93
npm/cmdk@0.2.1	Transitive: environment	+38	7.6 MB	paco
npm/jotai@2.6.4	Transitive: environment	+7	2.16 MB	daishi, drcmda
npm/next@14.1.0	environment, filesystem, network, shell, unsafe	+17	95 MB	vercel-release-bot
npm/novel@0.1.19	network Transitive: environment, eval, filesystem, shell, unsafe	+456	105 MB	steventey
npm/react-moveable@0.56.0	None	+19	9.09 MB	younkue
npm/tailwindcss@3.4.1	environment, filesystem Transitive: shell, unsafe	+69	11.4 MB	adamwathan
npm/tunnel-rat@0.1.2	Transitive: environment	+9	2.14 MB	drcmda
npm/typescript@5.3.3	None	0	32 MB	typescript-bot

🚮 Removed packages: npm/@tailwindcss/typography@0.5.9, npm/@tiptap/core@2.0.3, npm/@tiptap/core@2.0.4, npm/@tiptap/extension-color@2.0.3, npm/@tiptap/extension-color@2.0.4, npm/@tiptap/extension-highlight@2.0.3, npm/@tiptap/extension-highlight@2.0.4, npm/@tiptap/extension-horizontal-rule@2.0.3, npm/@tiptap/extension-horizontal-rule@2.0.4, npm/@tiptap/extension-image@2.0.3, npm/@tiptap/extension-image@2.0.4, npm/@tiptap/extension-link@2.0.3, npm/@tiptap/extension-link@2.0.4, npm/@tiptap/extension-task-item@2.0.3, npm/@tiptap/extension-task-item@2.0.4, npm/@tiptap/extension-task-list@2.0.3, npm/@tiptap/extension-task-list@2.0.4, npm/@tiptap/extension-text-style@2.0.3, npm/@tiptap/extension-text-style@2.0.4, npm/@tiptap/extension-underline@2.0.3, npm/@tiptap/extension-underline@2.0.4, npm/@tiptap/pm@2.0.3, npm/@tiptap/pm@2.0.4, npm/@tiptap/react@2.0.3, npm/@tiptap/react@2.0.4, npm/@tiptap/starter-kit@2.0.3, npm/@tiptap/starter-kit@2.0.4, npm/@tiptap/suggestion@2.0.3, npm/@tiptap/suggestion@2.0.4, npm/@vercel/blob@0.9.2, npm/@vercel/kv@0.2.1, npm/ai@2.1.3, npm/ai@2.2.9, npm/autoprefixer@10.4.14, npm/framer-motion@10.12.18, npm/framer-motion@10.15.1, npm/next@13.4.20-canary.9, npm/next@13.4.8-canary.14, npm/novel@0.1.22, npm/openai-edge@1.0.0, npm/openai-edge@1.2.2, npm/openai@4.3.1, npm/postcss@8.4.24, npm/react-moveable@0.54.1, npm/sonner@0.5.0, npm/tailwindcss@3.3.2, npm/tailwindcss@3.3.3, npm/tiptap-markdown@0.8.1, npm/typescript@4.9.5

View full report↗︎