tiptop-editor 1.0.12 → 1.0.14

package/README.md

@@ -1,6 +1,63 @@
-# ATTENTION:
-I'am still working on the package, and finising the last touches.
-I will update this README with all there is to know when I'm done.
-So please do not be mad at me if you don't understand how to use the package, it will be dealt with very soon.
+# 📝 Tiptop Editor
 
-Thank you.
+A Notion-like rich text editor built with [Tiptap v3](https://tiptap.dev/), [HeroUI](https://heroui.dev/), [Tailwind v4](https://https://tailwindcss.com) packaged as a plug-and-play React component.
+
+![npm version](https://img.shields.io/npm/v/tiptop-editor.svg)
+![bundle size](https://img.shields.io/bundlephobia/minzip/tiptop-editor)
+![license](https://img.shields.io/npm/l/tiptop-editor)
+
+---
+
+## ✨ Features
+
+- Built on **Tiptap v3** — a powerful, headless rich-text editor
+- Styled with **HeroUI** + **Tailwind**
+- Fully typed with **TypeScript**
+- Ready to embed in any React app
+- Designed for **Notion-like UX**
+
+---
+
+## ⚙️ Installation
+```bash
+npm install tiptop-editor
+```
+
+## 🚀 Usage
+
+**Import the component in your app**
+  ```tsx
+  import { TiptopEditor } from "tiptop-editor";
+
+  <TiptopEditor />
+  ```
+**Add the CSS code to your app**
+For the package to behave like it should, you have to import the compiled CSS file. Add this line in your main css file, or import it directly in the component file that's going to host the **TiptopEditor**.
+- In your main css file
+  ```css
+  @import '../node_modules/tiptop-editor/dist/tiptop-editor.css';
+- In any component file
+  ```tsx
+  import 'tiptop-editor/dist/tiptop-editor.css'
+**Example**
+The Tiptop component takes as props all the props from the `UseEditorOptions` from [*@tiptap/react*](https://www.npmjs.com/package/@tiptap/react), except the `extensions` prop.
+*Why only that prop, you ask ? Well, since this package is intended to *replicate* the Notion-like style with all their blocks/extensions, as of now, I have not allowed users to pass their own extensions. But that can change in the future, just not now.*
+Anyway, to use the package, just pass your props to `editorOptions` and you're good to go. Customize the Tiptop component will the props you want, as if you were using *EditorContent and passing props to the editor*.
+```tsx
+<TiptopEditor editorOptions={{
+    immediatelyRender: false
+    content: '<p>I am the Tiptop Editor</p>'
+    ... // Other props
+  }}
+/>
+```
+
+
+##### 🎨 Of course, I will continue to improve this project over time, as I have many more ideas (more extensions, more customizations, etc..)
+
+I will also continue to update this Readme with relevant information.
+
+*If you have any suggestions/recommendations to improve this project, any feedback is much appreciated (PRs welcome) !*
+*I also encourage you to open up *Issues* if you find releveant bugs inside the package.*
+
+**Thank you, and Happy Coding !**

package/dist/components/ColorButton.d.ts

@@ -1,11 +1,4 @@
-import { Editor } from '@tiptap/react';
-declare const ColorButton: ({ editor, buttonType, hsl, color, bgColor, tooltipText, tooltipDisabled }: {
-    editor: Editor;
-    buttonType: string;
-    hsl: string;
-    color: string;
-    bgColor: string;
-    tooltipText?: string;
-    tooltipDisabled?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ColorButton;
+import { default as React } from 'react';
+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/ColorButtonMenu.d.ts

@@ -1,5 +1,7 @@
+import { default as React } from 'react';
 import { Editor } from '@tiptap/react';
-declare const ColorButtonMenu: ({ editor }: {
+interface ColorButtonMenuProps {
     editor: Editor;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ColorButtonMenu;
+}
+declare const _default: React.MemoExoticComponent<({ editor }: ColorButtonMenuProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/EditorButton.d.ts

@@ -1,3 +1,4 @@
 import { EditorButtonProps } from '../types';
-declare const EditorButton: (props: EditorButtonProps) => import("react/jsx-runtime").JSX.Element;
-export default EditorButton;
+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/components/LinkButtonMenu.d.ts

@@ -1,5 +1,7 @@
+import { default as React } from 'react';
 import { Editor } from '@tiptap/react';
-declare const LinkButtonMenu: ({ editor }: {
+interface LinkButtonMenuProps {
     editor: Editor;
-}) => import("react/jsx-runtime").JSX.Element;
-export default LinkButtonMenu;
+}
+declare const _default: React.MemoExoticComponent<({ editor }: LinkButtonMenuProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/MoreOptionsButtonMenu.d.ts

@@ -1,5 +1,7 @@
+import { default as React } from 'react';
 import { Editor } from '@tiptap/react';
-declare const MoreOptionsButtonMenu: ({ editor }: {
+interface MoreOptionsButtonMenuProps {
     editor: Editor;
-}) => import("react/jsx-runtime").JSX.Element;
-export default MoreOptionsButtonMenu;
+}
+declare const _default: React.MemoExoticComponent<({ editor }: MoreOptionsButtonMenuProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/TextSelectionMenu.d.ts

@@ -1,7 +1,4 @@
-import { Editor } from '@tiptap/react';
-declare const TextSelectionMenu: ({ editor, prepend, append }: {
-    editor: Editor;
-    prepend?: React.ReactNode;
-    append?: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element | null;
-export default TextSelectionMenu;
+import { default as React } from 'react';
+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/TransformIntoButtonMenu.d.ts

@@ -1,5 +1,7 @@
+import { default as React } from 'react';
 import { Editor } from '@tiptap/react';
-declare const TransformIntoButtonMenu: ({ editor }: {
+interface TransformIntoButtonMenuProps {
     editor: Editor;
-}) => import("react/jsx-runtime").JSX.Element;
-export default TransformIntoButtonMenu;
+}
+declare const _default: React.MemoExoticComponent<({ editor }: TransformIntoButtonMenuProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/helpers.d.ts

@@ -12,3 +12,5 @@ export declare const copyNodeTextContent: (editor: Editor) => void;
 export declare const deleteNode: (editor: Editor) => void;
 export declare const removeAllFormatting: (editor: Editor) => void;
 export declare const transformNodeToAlternative: (editor: Editor, targetOption: SlashCommandGroupCommandsProps) => void;
+export declare const addOrUpdateLink: (editor: Editor, url: string) => void;
+export declare const unsetLink: (editor: Editor) => void;