Novel Svelte

To render the slash command menu, you must implement a render function that returns a lifecycle object. This object manages a Svelte component (e.g., CommandList) and a floating UI element (typically using tippy.js).

Lifecycle Hooks

• onStart({ editor, clientRect }): Initializes the Svelte component and the floating popup. clientRect provides the position of the cursor/range.
• onUpdate({ editor, clientRect }): Updates the Svelte component's props and repositions the popup as the user types or moves the cursor.
• onKeyDown({ event }): Handles keyboard interactions, such as closing the menu when the Escape key is pressed.
• onExit(): Cleans up the Svelte component and destroys the popup element.

// The render function structure required by the SlashCommand extension
const renderItems = () => {
  let component: any = null;
  let popup: any = null;

  return {
    onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
      // Initialize Svelte component and Tippy popup
    },
    onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
      // Update component props and popup position
    },
    onKeyDown: (props: { event: KeyboardEvent }) => {
      // Handle key events like 'Escape'
    },
    onExit: () => {
      // Cleanup component and popup
    }
  };
};

To enable image uploading with visual placeholders, you need to use the UploadImagesPlugin and the startImageUpload function.

1. Register the plugin: Add UploadImagesPlugin to your Tiptap editor configuration. This plugin manages the lifecycle of image placeholders (showing a low-opacity version of the image while it uploads).
2. Trigger the upload: Call startImageUpload(file, view, pos) when a user selects a file.

Validation Rules:

• Only files with an image/ MIME type are accepted.
• Maximum file size is 20MB.
• If validation fails, an error toast is displayed via addToast.

Workflow:

• startImageUpload immediately creates a local Data URL preview and inserts a placeholder widget into the editor at the specified pos.
• It then calls handleImageUpload(file) to perform the actual upload.
• Once the upload completes, the placeholder is removed and the actual image node is inserted into the document.

import UploadImagesPlugin, { startImageUpload } from './path-to/upload-images';

// In your editor setup
const editor = new Editor({
  // ... other config
  extensions: [
    // ... other extensions
    UploadImagesPlugin(),
  ],
});

// When a file is dropped or selected
const onFileSelect = (file: File) => {
  const { view } = editor;
  const { state } = view;
  const pos = state.selection.from;
  startImageUpload(file, view, pos);
};

The BubbleMenu component provides a floating UI toolbar that appears when text is selected in a Tiptap editor. It includes built-in support for common text formatting (Bold, Italic, Underline, Strike, Code) as well as specialized selectors for Nodes, Links, and Colors.

To use it, pass an active Tiptap Editor instance to the component. You can customize its behavior using props like tippyOptions, shouldShow, and updateDelay.

Props

• editor: (Required) The Tiptap Editor instance.
• tippyOptions: Configuration for the underlying Tippy.js positioning engine. Includes an onHidden callback to reset internal selector states.
• pluginKey: A unique string identifier for the bubble menu plugin (defaults to 'SvelteTiptapBubbleMenu').
• shouldShow: A function determining when the menu is visible. The default implementation hides the menu if an image is selected or if the selection size is 0.
• updateDelay: The delay in milliseconds before the menu updates its position/visibility (defaults to 250).

<script>
  import { Editor } from '@tiptap/core';
  import BubbleMenu from '$lib/ui/editor/bubble-menu';

  let editor = new Editor({ /* ... */ });
</script>

<BubbleMenu {editor} />

The following props can be passed to the Editor component to customize its behavior:

The ColorSelector component is a bubble menu UI element used to change text color and background highlight color in a Tiptap editor. It requires an instance of a Tiptap Editor and a boolean isOpen state to manage its visibility.

Props

• editor: The Tiptap Editor instance.
• isOpen: A boolean controlling whether the color popover is currently visible.

Behavior

• Text Color: Selecting a color (other than 'Default') applies the color using editor.chain().focus().setColor(color).run(). Selecting 'Default' calls editor.commands.unsetColor().
• Background Highlight: Selecting a color (other than 'Default') applies the highlight using editor.commands.setHighlight({ color }). Selecting 'Default' calls editor.commands.unsetHighlight().
• State Sync: The component uses Melt UI's popover logic and synchronizes its internal open state with the isOpen prop via an onOpenChange callback.

<script>
  import ColorSelector from './path/to/color-selector.svelte';
  import { editor } from './your-editor-setup';
  let isColorMenuOpen = false;
</script>

<ColorSelector {editor} bind:isOpen={isColorMenuOpen} />