tiptop-editor 1.1.0 → 1.2.0

package/README.md

@@ -45,6 +45,40 @@ export function Editor() {
 
 `editorOptions` accepts the same options as `useEditor` from `@tiptap/react`, except `extensions`, which is managed internally by the package.
 
+## Editor Ref and Events
+
+You can access the editor instance and bind Tiptap runtime event listeners through the component ref.
+
+```tsx
+import { useEffect, useRef } from 'react'
+import { TiptopEditor, type TiptopEditorHandle } from 'tiptop-editor'
+
+export function EditorWithEvents() {
+  const editorRef = useRef<TiptopEditorHandle>(null)
+
+  useEffect(() => {
+    const handleUpdate = ({ editor }: { editor: NonNullable<ReturnType<TiptopEditorHandle['getEditor']>> }) => {
+      console.log(editor.getHTML())
+    }
+
+    editorRef.current?.on('update', handleUpdate)
+
+    return () => {
+      editorRef.current?.off('update', handleUpdate)
+    }
+  }, [])
+
+  return <TiptopEditor ref={editorRef} />
+}
+```
+
+Available ref methods:
+
+- `getEditor()`
+- `on(event, callback)`
+- `off(event, callback?)`
+- `once(event, callback)`
+
 ## Custom Editor UI Options
 
 `TiptopEditor` also supports a few package-specific options inside `editorOptions`:

package/dist/components/{TableSelectionMenu.d.ts → editor/TableSelectionMenu.d.ts}

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
-import { TextSelectionMenuProps } from '../types';
+import { TextSelectionMenuProps } from '../../types';
 declare const _default: React.MemoExoticComponent<({ editor }: TextSelectionMenuProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/components/editor/TiptopEditor.d.ts

@@ -0,0 +1,3 @@
+import { TiptopEditorHandle, TiptopEditorProps } from '../../types';
+declare const TiptopEditor: import('react').ForwardRefExoticComponent<Omit<TiptopEditorProps, "ref"> & import('react').RefAttributes<TiptopEditorHandle>>;
+export default TiptopEditor;

package/dist/components/editor/TiptopEditor.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<import('../..').TiptopEditorProps, "ref"> & import('react').RefAttributes<import('../..').TiptopEditorHandle>>;
+    tags: string[];
+    args: {
+        editorOptions: {
+            content: string;
+            immediatelyRender: false;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Frameless: Story;

package/dist/components/{ColorButton.d.ts → menus/ColorButton.d.ts}

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
-import { ColorButtonProps } from '../types';
+import { ColorButtonProps } from '../../types';
 declare const _default: React.MemoExoticComponent<({ editor, buttonType, hsl, color, bgColor, tooltipText, tooltipDisabled, }: ColorButtonProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/components/{TextSelectionMenu.d.ts → menus/TextSelectionMenu.d.ts}

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
-import { TextSelectionMenuProps } from '../types';
+import { TextSelectionMenuProps } from '../../types';
 declare const _default: React.MemoExoticComponent<({ editor, prepend, append }: TextSelectionMenuProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/components/{EditorButton.d.ts → ui/EditorButton.d.ts}

@@ -1,4 +1,4 @@
-import { EditorButtonProps } from '../types';
+import { EditorButtonProps } from '../../types';
 import { default as React } from 'react';
 declare const _default: React.MemoExoticComponent<({ editor, buttonKey, tooltipText, isIconOnly, color, variant, isDisabled, icon, iconClass, text, withActive, onPressed, }: EditorButtonProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { default as TiptopEditor } from './components/TiptopEditor';
+export { default as TiptopEditor } from './components/editor/TiptopEditor';
 export * from './types';