@vizel/svelte 0.0.1-alpha.1

package/README.md

@@ -0,0 +1,83 @@
+# @vizel/svelte
+
+Svelte 5 components for Vizel block-based Markdown editor.
+
+## Installation
+
+```bash
+npm install @vizel/svelte @vizel/core
+```
+
+## Requirements
+
+- Svelte 5+
+
+## Usage
+
+### Basic Setup
+
+```svelte
+<script lang="ts">
+import { Vizel } from "@vizel/svelte";
+import "@vizel/core/styles.css";
+</script>
+
+<Vizel />
+```
+
+### With Editor Control
+
+```svelte
+<script lang="ts">
+import { VizelEditor, VizelBubbleMenu, createVizelEditor } from "@vizel/svelte";
+import "@vizel/core/styles.css";
+
+const editor = createVizelEditor();
+</script>
+
+<VizelEditor editor={editor.current} />
+<VizelBubbleMenu editor={editor.current} />
+```
+
+### Markdown Import/Export
+
+```svelte
+<script lang="ts">
+import { createVizelEditor, createVizelMarkdown } from "@vizel/svelte";
+
+const editor = createVizelEditor();
+const { getMarkdown, setMarkdown } = createVizelMarkdown(() => editor.current);
+
+const handleExport = () => {
+  const markdown = getMarkdown();
+  console.log(markdown);
+};
+</script>
+```
+
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| `Vizel` | All-in-one editor with bubble menu |
+| `VizelEditor` | Editor component |
+| `VizelBubbleMenu` | Floating formatting toolbar |
+| `VizelSlashMenu` | Slash command menu |
+| `VizelIconProvider` | Custom icon provider |
+
+## Runes
+
+| Rune | Description |
+|------|-------------|
+| `createVizelEditor` | Create and manage editor instance |
+| `createVizelMarkdown` | Markdown import/export |
+| `createVizelAutoSave` | Auto-save functionality |
+| `createVizelState` | Editor state management |
+
+## Documentation
+
+See the [main repository](https://github.com/seijikohara/vizel) for full documentation.
+
+## License
+
+MIT

package/dist/components/Vizel.svelte

@@ -0,0 +1,158 @@
+<script lang="ts" module>
+import type { Editor, JSONContent, VizelFeatureOptions } from "@vizel/core";
+import type { Snippet } from "svelte";
+
+/**
+ * Exposed ref type for Vizel component.
+ * Use with `bind:this` and access the `editor` property.
+ */
+export interface VizelRef {
+  /** The underlying Tiptap editor instance */
+  readonly editor: Editor | null;
+}
+
+export interface VizelProps {
+  /** Initial content in JSON format */
+  initialContent?: JSONContent;
+  /**
+   * Initial content in Markdown format.
+   * If both initialContent and initialMarkdown are provided, initialMarkdown takes precedence.
+   * @example
+   * ```svelte
+   * <Vizel initialMarkdown="# Hello World\n\nThis is **bold** text." />
+   * ```
+   */
+  initialMarkdown?: string;
+  /**
+   * Automatically transform diagram code blocks (mermaid, graphviz) to diagram nodes
+   * when importing markdown content. Only applies when initialMarkdown is provided.
+   * @default true
+   */
+  transformDiagramsOnImport?: boolean;
+  /**
+   * Two-way binding for markdown content (bind:markdown).
+   * When set, markdown will be synchronized with the editor content.
+   */
+  markdown?: string;
+  /** Placeholder text when editor is empty */
+  placeholder?: string;
+  /** Whether the editor is editable (default: true) */
+  editable?: boolean;
+  /** Auto focus on mount */
+  autofocus?: boolean | "start" | "end" | "all" | number;
+  /** Feature configuration */
+  features?: VizelFeatureOptions;
+  /** Custom class name for the editor container */
+  class?: string;
+  /** Whether to show the bubble menu (default: true) */
+  showBubbleMenu?: boolean;
+  /** Enable embed option in bubble menu link editor (requires Embed extension) */
+  enableEmbed?: boolean;
+  /** Custom bubble menu content */
+  bubbleMenu?: Snippet<[{ editor: Editor }]>;
+  /** Additional children to render inside the editor root */
+  children?: Snippet<[{ editor: Editor | null }]>;
+  /** Callback when content changes */
+  onUpdate?: (props: { editor: Editor }) => void;
+  /** Callback when editor is created */
+  onCreate?: (props: { editor: Editor }) => void;
+  /** Callback when editor is destroyed */
+  onDestroy?: () => void;
+  /** Callback when selection changes */
+  onSelectionUpdate?: (props: { editor: Editor }) => void;
+  /** Callback when editor gets focus */
+  onFocus?: (props: { editor: Editor }) => void;
+  /** Callback when editor loses focus */
+  onBlur?: (props: { editor: Editor }) => void;
+}
+</script>
+
+<script lang="ts">
+// Vizel - All-in-one editor component
+// A complete editor component that includes EditorContent and BubbleMenu.
+// This is the recommended way to use Vizel for most use cases.
+import { getVizelMarkdown, setVizelMarkdown } from "@vizel/core";
+import { createVizelEditor } from "../runes/createVizelEditor.svelte.ts";
+import VizelBubbleMenu from "./VizelBubbleMenu.svelte";
+import VizelEditor from "./VizelEditor.svelte";
+
+// Use $props() without destructuring to avoid state_referenced_locally warnings
+// Props are intentionally captured once at editor creation time
+let {
+  class: className,
+  showBubbleMenu = true,
+  enableEmbed = false,
+  bubbleMenu,
+  children,
+  markdown = $bindable(),
+  transformDiagramsOnImport = true,
+  ...restProps
+}: VizelProps = $props();
+
+// Track whether we're currently updating from external markdown change
+let isUpdatingFromMarkdown = false;
+
+// Wrap onUpdate to sync markdown
+const originalOnUpdate = restProps.onUpdate;
+const wrappedOnUpdate = (e: { editor: import("@vizel/core").Editor }) => {
+  originalOnUpdate?.(e);
+  // Update markdown binding if not updating from external change
+  if (!isUpdatingFromMarkdown && markdown !== undefined) {
+    markdown = getVizelMarkdown(e.editor);
+  }
+};
+
+// Capture initial values for editor creation (these are intentionally not reactive)
+// The editor is created once and should not be recreated when props change
+// svelte-ignore state_referenced_locally
+const initialTransformDiagrams = transformDiagramsOnImport;
+
+// Create editor with initial props - editor is intentionally created once
+const editorState = createVizelEditor({
+  ...(restProps.initialContent !== undefined && { initialContent: restProps.initialContent }),
+  ...(restProps.initialMarkdown !== undefined && { initialMarkdown: restProps.initialMarkdown }),
+  transformDiagramsOnImport: initialTransformDiagrams,
+  ...(restProps.placeholder !== undefined && { placeholder: restProps.placeholder }),
+  editable: restProps.editable ?? true,
+  autofocus: restProps.autofocus ?? false,
+  ...(restProps.features !== undefined && { features: restProps.features }),
+  onUpdate: wrappedOnUpdate,
+  ...(restProps.onCreate !== undefined && { onCreate: restProps.onCreate }),
+  ...(restProps.onDestroy !== undefined && { onDestroy: restProps.onDestroy }),
+  ...(restProps.onSelectionUpdate !== undefined && { onSelectionUpdate: restProps.onSelectionUpdate }),
+  ...(restProps.onFocus !== undefined && { onFocus: restProps.onFocus }),
+  ...(restProps.onBlur !== undefined && { onBlur: restProps.onBlur }),
+});
+
+const editor = $derived(editorState.current);
+
+// Watch for external markdown changes (bind:markdown)
+$effect(() => {
+  if (markdown === undefined || !editor) return;
+
+  // Get current editor markdown
+  const currentMarkdown = getVizelMarkdown(editor);
+  if (markdown === currentMarkdown) return;
+
+  // Set flag to prevent emitting update during this update
+  isUpdatingFromMarkdown = true;
+  setVizelMarkdown(editor, markdown, {
+    transformDiagrams: transformDiagramsOnImport,
+  });
+  isUpdatingFromMarkdown = false;
+});
+</script>
+
+<div class="vizel-root {className ?? ''}" data-vizel-root>
+  <VizelEditor {editor} />
+  {#if showBubbleMenu && editor && bubbleMenu}
+    <VizelBubbleMenu {editor} {enableEmbed}>
+      {@render bubbleMenu({ editor })}
+    </VizelBubbleMenu>
+  {:else if showBubbleMenu && editor}
+    <VizelBubbleMenu {editor} {enableEmbed} />
+  {/if}
+  {#if children}
+    {@render children({ editor })}
+  {/if}
+</div>

package/dist/components/Vizel.svelte.d.ts

@@ -0,0 +1,82 @@
+import type { Editor, JSONContent, VizelFeatureOptions } from "@vizel/core";
+import type { Snippet } from "svelte";
+/**
+ * Exposed ref type for Vizel component.
+ * Use with `bind:this` and access the `editor` property.
+ */
+export interface VizelRef {
+    /** The underlying Tiptap editor instance */
+    readonly editor: Editor | null;
+}
+export interface VizelProps {
+    /** Initial content in JSON format */
+    initialContent?: JSONContent;
+    /**
+     * Initial content in Markdown format.
+     * If both initialContent and initialMarkdown are provided, initialMarkdown takes precedence.
+     * @example
+     * ```svelte
+     * <Vizel initialMarkdown="# Hello World\n\nThis is **bold** text." />
+     * ```
+     */
+    initialMarkdown?: string;
+    /**
+     * Automatically transform diagram code blocks (mermaid, graphviz) to diagram nodes
+     * when importing markdown content. Only applies when initialMarkdown is provided.
+     * @default true
+     */
+    transformDiagramsOnImport?: boolean;
+    /**
+     * Two-way binding for markdown content (bind:markdown).
+     * When set, markdown will be synchronized with the editor content.
+     */
+    markdown?: string;
+    /** Placeholder text when editor is empty */
+    placeholder?: string;
+    /** Whether the editor is editable (default: true) */
+    editable?: boolean;
+    /** Auto focus on mount */
+    autofocus?: boolean | "start" | "end" | "all" | number;
+    /** Feature configuration */
+    features?: VizelFeatureOptions;
+    /** Custom class name for the editor container */
+    class?: string;
+    /** Whether to show the bubble menu (default: true) */
+    showBubbleMenu?: boolean;
+    /** Enable embed option in bubble menu link editor (requires Embed extension) */
+    enableEmbed?: boolean;
+    /** Custom bubble menu content */
+    bubbleMenu?: Snippet<[{
+        editor: Editor;
+    }]>;
+    /** Additional children to render inside the editor root */
+    children?: Snippet<[{
+        editor: Editor | null;
+    }]>;
+    /** Callback when content changes */
+    onUpdate?: (props: {
+        editor: Editor;
+    }) => void;
+    /** Callback when editor is created */
+    onCreate?: (props: {
+        editor: Editor;
+    }) => void;
+    /** Callback when editor is destroyed */
+    onDestroy?: () => void;
+    /** Callback when selection changes */
+    onSelectionUpdate?: (props: {
+        editor: Editor;
+    }) => void;
+    /** Callback when editor gets focus */
+    onFocus?: (props: {
+        editor: Editor;
+    }) => void;
+    /** Callback when editor loses focus */
+    onBlur?: (props: {
+        editor: Editor;
+    }) => void;
+}
+declare const Vizel: import("svelte").Component<VizelProps, {}, "markdown">;
+type Vizel = ReturnType<typeof Vizel>;
+export default Vizel;
+//# sourceMappingURL=Vizel.svelte.d.ts.map

package/dist/components/Vizel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Vizel.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Vizel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAC5E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,UAAU;IACzB,qCAAqC;IACrC,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IACvD,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gFAAgF;IAChF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC3C,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC,CAAC;IAChD,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/C,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/C,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACxD,sCAAsC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C,uCAAuC;IACvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9C;AAyGD,QAAA,MAAM,KAAK,wDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/VizelBubbleMenu.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" module>
+import type { Editor } from "@vizel/core";
+import type { Snippet } from "svelte";
+
+export interface VizelBubbleMenuProps {
+  /** Override the editor from context */
+  editor?: Editor | null;
+  /** Custom class name for the menu container */
+  class?: string;
+  /** Whether to show the default formatting menu */
+  showDefaultMenu?: boolean;
+  /** Plugin key for the bubble menu */
+  pluginKey?: string;
+  /** Delay in ms before updating the menu position */
+  updateDelay?: number;
+  /** Custom shouldShow function */
+  shouldShow?: (props: { editor: Editor; from: number; to: number }) => boolean;
+  /** Custom menu items (overrides default menu) */
+  children?: Snippet;
+  /** Enable embed option in link editor (requires Embed extension) */
+  enableEmbed?: boolean;
+}
+</script>
+
+<script lang="ts">
+import { BubbleMenuPlugin } from "@vizel/core";
+import VizelBubbleMenuDefault from "./VizelBubbleMenuDefault.svelte";
+import { getVizelContextSafe } from "./VizelContext.ts";
+
+let {
+  editor: editorProp,
+  class: className,
+  showDefaultMenu = true,
+  pluginKey = "vizelBubbleMenu",
+  updateDelay = 100,
+  shouldShow,
+  children,
+  enableEmbed,
+}: VizelBubbleMenuProps = $props();
+
+const contextEditor = getVizelContextSafe();
+const editor = $derived(editorProp ?? contextEditor?.());
+
+let menuElement = $state<HTMLElement | null>(null);
+
+// Handle Escape key to hide bubble menu by collapsing selection
+function handleKeyDown(event: KeyboardEvent) {
+  if (event.key === "Escape" && editor && !editor.view.state.selection.empty) {
+    event.preventDefault();
+    editor.commands.setTextSelection(editor.view.state.selection.to);
+  }
+}
+
+$effect(() => {
+  if (!(editor && menuElement)) return;
+
+  const currentEditor = editor;
+  const currentPluginKey = pluginKey;
+
+  const plugin = BubbleMenuPlugin({
+    pluginKey: currentPluginKey,
+    editor: currentEditor,
+    element: menuElement,
+    updateDelay,
+    ...(shouldShow && {
+      shouldShow: ({ editor: e, from, to }) => shouldShow({ editor: e as Editor, from, to }),
+    }),
+    options: {
+      placement: "top",
+    },
+  });
+
+  currentEditor.registerPlugin(plugin);
+  document.addEventListener("keydown", handleKeyDown);
+
+  return () => {
+    currentEditor.unregisterPlugin(currentPluginKey);
+    document.removeEventListener("keydown", handleKeyDown);
+  };
+});
+</script>
+
+{#if editor}
+  <div
+    bind:this={menuElement}
+    class="vizel-bubble-menu {className ?? ''}"
+    data-vizel-bubble-menu
+    style="visibility: hidden"
+  >
+    {#if children}
+      {@render children()}
+    {:else if showDefaultMenu}
+      <VizelBubbleMenuDefault {editor} {...(enableEmbed ? { enableEmbed } : {})} />
+    {/if}
+  </div>
+{/if}

package/dist/components/VizelBubbleMenu.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Editor } from "@vizel/core";
+import type { Snippet } from "svelte";
+export interface VizelBubbleMenuProps {
+    /** Override the editor from context */
+    editor?: Editor | null;
+    /** Custom class name for the menu container */
+    class?: string;
+    /** Whether to show the default formatting menu */
+    showDefaultMenu?: boolean;
+    /** Plugin key for the bubble menu */
+    pluginKey?: string;
+    /** Delay in ms before updating the menu position */
+    updateDelay?: number;
+    /** Custom shouldShow function */
+    shouldShow?: (props: {
+        editor: Editor;
+        from: number;
+        to: number;
+    }) => boolean;
+    /** Custom menu items (overrides default menu) */
+    children?: Snippet;
+    /** Enable embed option in link editor (requires Embed extension) */
+    enableEmbed?: boolean;
+}
+declare const VizelBubbleMenu: import("svelte").Component<VizelBubbleMenuProps, {}, "">;
+type VizelBubbleMenu = ReturnType<typeof VizelBubbleMenu>;
+export default VizelBubbleMenu;
+//# sourceMappingURL=VizelBubbleMenu.svelte.d.ts.map

package/dist/components/VizelBubbleMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelBubbleMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelBubbleMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,oBAAoB;IACnC,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC;IAC9E,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA+ED,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/VizelBubbleMenuButton.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+import type { Snippet } from "svelte";
+
+export interface VizelBubbleMenuButtonProps {
+  /** Whether the button is in active state */
+  isActive?: boolean;
+  /** Whether the button is disabled */
+  disabled?: boolean;
+  /** Tooltip title */
+  title?: string;
+  /** Custom class name */
+  class?: string;
+  /** Button content */
+  children: Snippet;
+  /** Click handler */
+  onclick?: () => void;
+  /** Action identifier for testing */
+  action?: string;
+}
+</script>
+
+<script lang="ts">
+let {
+  isActive = false,
+  disabled = false,
+  title,
+  class: className,
+  children,
+  onclick,
+  action,
+}: VizelBubbleMenuButtonProps = $props();
+</script>
+
+<button
+  type="button"
+  {disabled}
+  aria-pressed={isActive}
+  class="vizel-bubble-menu-button {isActive ? 'is-active' : ''} {className ?? ''}"
+  {title}
+  data-active={isActive || undefined}
+  data-action={action}
+  {onclick}
+>
+  {@render children()}
+</button>

package/dist/components/VizelBubbleMenuButton.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+export interface VizelBubbleMenuButtonProps {
+    /** Whether the button is in active state */
+    isActive?: boolean;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Tooltip title */
+    title?: string;
+    /** Custom class name */
+    class?: string;
+    /** Button content */
+    children: Snippet;
+    /** Click handler */
+    onclick?: () => void;
+    /** Action identifier for testing */
+    action?: string;
+}
+declare const VizelBubbleMenuButton: import("svelte").Component<VizelBubbleMenuButtonProps, {}, "">;
+type VizelBubbleMenuButton = ReturnType<typeof VizelBubbleMenuButton>;
+export default VizelBubbleMenuButton;
+//# sourceMappingURL=VizelBubbleMenuButton.svelte.d.ts.map

package/dist/components/VizelBubbleMenuButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelBubbleMenuButton.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelBubbleMenuButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,0BAA0B;IACzC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAsBD,QAAA,MAAM,qBAAqB,gEAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/components/VizelBubbleMenuColorPicker.svelte

@@ -0,0 +1,135 @@
+<script lang="ts" module>
+import type { Editor, VizelColorDefinition } from "@vizel/core";
+
+export interface VizelBubbleMenuColorPickerProps {
+  /** The editor instance */
+  editor: Editor;
+  /** Color picker type */
+  type: "textColor" | "highlight";
+  /** Custom color palette */
+  colors?: VizelColorDefinition[];
+  /** Custom class name */
+  class?: string;
+  /** Enable custom color input (default: true) */
+  allowCustomColor?: boolean;
+  /** Enable recent colors (default: true) */
+  showRecentColors?: boolean;
+}
+</script>
+
+<script lang="ts">
+import {
+  addVizelRecentColor,
+  getVizelRecentColors,
+  VIZEL_HIGHLIGHT_COLORS,
+  VIZEL_TEXT_COLORS,
+} from "@vizel/core";
+import VizelColorPicker from "./VizelColorPicker.svelte";
+import VizelIcon from "./VizelIcon.svelte";
+
+let {
+  editor,
+  type,
+  colors,
+  class: className,
+  allowCustomColor = true,
+  showRecentColors = true,
+}: VizelBubbleMenuColorPickerProps = $props();
+
+let isOpen = $state(false);
+let recentColors = $state<string[]>([]);
+let containerRef: HTMLDivElement | null = $state(null);
+
+const colorPalette = $derived(colors ?? (type === "textColor" ? VIZEL_TEXT_COLORS : VIZEL_HIGHLIGHT_COLORS));
+
+const currentColor = $derived.by(() => {
+  if (type === "textColor") {
+    return editor.getAttributes("textStyle").color;
+  }
+  return editor.getAttributes("highlight").color;
+});
+
+const isTextColor = $derived(type === "textColor");
+
+const noneValues = $derived(isTextColor ? ["inherit"] : ["transparent"]);
+
+// Load recent colors when dropdown opens
+$effect(() => {
+  if (isOpen && showRecentColors) {
+    recentColors = getVizelRecentColors(type);
+  }
+});
+
+function handleColorChange(color: string) {
+  if (type === "textColor") {
+    if (color === "inherit") {
+      editor.chain().focus().unsetColor().run();
+    } else {
+      editor.chain().focus().setColor(color).run();
+      addVizelRecentColor(type, color);
+    }
+  } else if (color === "transparent") {
+    editor.chain().focus().unsetHighlight().run();
+  } else {
+    editor.chain().focus().toggleHighlight({ color }).run();
+    addVizelRecentColor(type, color);
+  }
+  isOpen = false;
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (containerRef && !containerRef.contains(event.target as Node)) {
+    isOpen = false;
+  }
+}
+
+$effect(() => {
+  document.addEventListener("mousedown", handleClickOutside);
+  return () => {
+    document.removeEventListener("mousedown", handleClickOutside);
+  };
+});
+
+function getTriggerStyle(): string {
+  if (isTextColor) {
+    return `color: ${currentColor || "inherit"}`;
+  }
+  return `--highlight-color: ${currentColor || "transparent"}`;
+}
+</script>
+
+<div
+  bind:this={containerRef}
+  class="vizel-color-picker {className ?? ''}"
+  data-type={type}
+>
+  <button
+    type="button"
+    class="vizel-bubble-menu-button vizel-color-picker-trigger {currentColor ? 'has-color' : ''}"
+    title={isTextColor ? "Text Color" : "Highlight"}
+    data-action={type}
+    style={getTriggerStyle()}
+    onclick={() => (isOpen = !isOpen)}
+  >
+    {#if isTextColor}
+      <VizelIcon name="textColor" />
+    {:else}
+      <VizelIcon name="highlighter" />
+    {/if}
+  </button>
+
+  {#if isOpen}
+    <div class="vizel-color-picker-dropdown">
+      <VizelColorPicker
+        colors={colorPalette}
+        value={currentColor}
+        label={isTextColor ? "Text color palette" : "Highlight color palette"}
+        {allowCustomColor}
+        {recentColors}
+        {showRecentColors}
+        {noneValues}
+        onchange={handleColorChange}
+      />
+    </div>
+  {/if}
+</div>

package/dist/components/VizelBubbleMenuColorPicker.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Editor, VizelColorDefinition } from "@vizel/core";
+export interface VizelBubbleMenuColorPickerProps {
+    /** The editor instance */
+    editor: Editor;
+    /** Color picker type */
+    type: "textColor" | "highlight";
+    /** Custom color palette */
+    colors?: VizelColorDefinition[];
+    /** Custom class name */
+    class?: string;
+    /** Enable custom color input (default: true) */
+    allowCustomColor?: boolean;
+    /** Enable recent colors (default: true) */
+    showRecentColors?: boolean;
+}
+declare const VizelBubbleMenuColorPicker: import("svelte").Component<VizelBubbleMenuColorPickerProps, {}, "">;
+type VizelBubbleMenuColorPicker = ReturnType<typeof VizelBubbleMenuColorPicker>;
+export default VizelBubbleMenuColorPicker;
+//# sourceMappingURL=VizelBubbleMenuColorPicker.svelte.d.ts.map

package/dist/components/VizelBubbleMenuColorPicker.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelBubbleMenuColorPicker.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelBubbleMenuColorPicker.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEhE,MAAM,WAAW,+BAA+B;IAC9C,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,IAAI,EAAE,WAAW,GAAG,WAAW,CAAC;IAChC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAChC,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AA4GD,QAAA,MAAM,0BAA0B,qEAAwC,CAAC;AACzE,KAAK,0BAA0B,GAAG,UAAU,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAChF,eAAe,0BAA0B,CAAC"}