@samhammer/tiptob 2.2.2 → 2.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -29
- package/dist/extensions.js +5253 -4263
- package/dist/extensions.js.map +1 -1
- package/dist/plugins/FontHighlight/HighlightExtension.d.ts +2 -1
- package/dist/web-components.js +2483 -2433
- package/dist/web-components.js.map +1 -1
- package/package.json +15 -15
package/README.md
CHANGED
|
@@ -48,32 +48,34 @@ You can now use the provided custom elements in your HTML:
|
|
|
48
48
|
Import the extensions bundle to use with your TipTap editor instance:
|
|
49
49
|
|
|
50
50
|
```js
|
|
51
|
-
import { ImageExtension, KnowledgeExtension, SelectionDecoration, TableBubbleMenuExtension } from '@samhammer/tiptob/extensions
|
|
51
|
+
import { ImageExtension, KnowledgeExtension, SelectionDecoration, TableBubbleMenuExtension } from '@samhammer/tiptob/extensions';
|
|
52
52
|
```
|
|
53
53
|
|
|
54
54
|
---
|
|
55
55
|
|
|
56
56
|
## 🧩 Components
|
|
57
57
|
|
|
58
|
+
|
|
58
59
|
TipToB provides the following web components:
|
|
59
60
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
61
|
+
| Web Component | Required TipTap Extension(s) and Import |
|
|
62
|
+
|-----------------------------|---------------------------------------------|
|
|
63
|
+
| `<tiptob-bold-button>` | `@tiptap/extension-bold (Bold)` |
|
|
64
|
+
| `<tiptob-italic-button>` | `@tiptap/extension-italic (Italic)` |
|
|
65
|
+
| `<tiptob-underline-button>` | `@tiptap/extension-underline (Underline)` |
|
|
66
|
+
| `<tiptob-strike-button>` | `@tiptap/extension-strike (Strike)` |
|
|
67
|
+
| `<tiptob-bullet-list-button>`| `@tiptap/extension-list (ListKit)` |
|
|
68
|
+
| `<tiptob-ordered-list-button>`| `@tiptap/extension-list (ListKit)`|
|
|
69
|
+
| `<tiptob-font-color-button>`| `@tiptap/extension-color (Color)`, `@tiptap/extension-text-style (TextStyleKit)` |
|
|
70
|
+
| `<tiptob-font-highlight-button>`| `HighlightExtension` (from TipToB), `@tiptap/extension-text-style (TextStyleKit)` |
|
|
71
|
+
| `<tiptob-image-button>` | `ImageExtension` (from TipToB) |
|
|
72
|
+
| `<tiptob-redo-button>` | `@tiptap/extensions (UndoRedo)` |
|
|
73
|
+
| `<tiptob-undo-button>` | `@tiptap/extensions (UndoRedo)` |
|
|
74
|
+
| `<tiptob-remove-format-button>`||
|
|
75
|
+
| `<tiptob-hyperlink-button>` | `@tiptap/extension-link (Link)` |
|
|
76
|
+
| `<tiptob-table-button>` | `@tiptap/extension-table (Table, TableCell, TableHeader, TableRow)`|
|
|
77
|
+
| `<tiptob-table-bubble-menu>`| `TableBubbleMenuExtension` (from TipToB), `@tiptap/extension-table (Table, TableCell, TableHeader, TableRow)` |
|
|
78
|
+
| `<tiptob-text-align-button>`| `@tiptap/extension-text-align (TextAlign)` |
|
|
77
79
|
|
|
78
80
|
---
|
|
79
81
|
|
|
@@ -83,7 +85,6 @@ TipToB provides the following web components:
|
|
|
83
85
|
```js
|
|
84
86
|
uploadInlineImage(file: File): Promise<string>;
|
|
85
87
|
```
|
|
86
|
-
- **SelectionDecoration**: Visual selection highlighting.
|
|
87
88
|
- **TableBubbleMenuExtension**: Bubble Menu for table editing support.
|
|
88
89
|
|
|
89
90
|
---
|
|
@@ -95,26 +96,19 @@ Below is a minimal example of initializing a TipTap editor. For more advanced us
|
|
|
95
96
|
```js
|
|
96
97
|
import { Editor } from '@tiptap/core';
|
|
97
98
|
import StarterKit from '@tiptap/starter-kit';
|
|
98
|
-
|
|
99
|
-
ImageExtension,
|
|
100
|
-
SelectionDecoration,
|
|
101
|
-
TableBubbleMenuExtension
|
|
102
|
-
} from '@samhammer/tiptob/extensions.js';
|
|
99
|
+
|
|
103
100
|
|
|
104
101
|
const editor = new Editor({
|
|
105
|
-
element: document.querySelector('
|
|
102
|
+
element: document.querySelector('.editor'),
|
|
106
103
|
extensions: [
|
|
107
104
|
StarterKit,
|
|
108
|
-
ImageExtension,
|
|
109
|
-
SelectionDecoration,
|
|
110
|
-
TableBubbleMenuExtension
|
|
111
105
|
],
|
|
112
106
|
content: '<p>Hello World!</p>',
|
|
113
107
|
});
|
|
114
108
|
```
|
|
115
109
|
|
|
116
110
|
```html
|
|
117
|
-
<div
|
|
111
|
+
<div class="editor"></div>
|
|
118
112
|
```
|
|
119
113
|
|
|
120
114
|
For more details and advanced configuration, visit the [TipTap documentation](https://tiptap.dev/).
|