@samemichaeltadele/tiptap-compare 0.0.1 → 0.0.3
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 +62 -62
- package/package.json +39 -38
package/README.md
CHANGED
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
# TiptapCompare
|
|
2
|
-
|
|
3
|
-
A Tiptap extension that provides real-time visual comparison between two versions of content in your editor. This plugin helps you track changes by highlighting additions, modifications, and deletions with different colors and styles.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- Visual diff highlighting for tiptap editor changes changes
|
|
8
|
-
- Support for different types of blocks (text, paragraphs, images)
|
|
9
|
-
- Color-coded changes:
|
|
10
|
-
- Green background for added content
|
|
11
|
-
- Red background with strikethrough for removed content
|
|
12
|
-
- Yellow background for modified content
|
|
13
|
-
- Real-time comparison updates
|
|
14
|
-
- Support for nested content structures
|
|
15
|
-
|
|
16
|
-
## Installation
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
npm install @samemichaeltadele/tiptap-compare
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
## Usage
|
|
23
|
-
|
|
24
|
-
```typescript
|
|
25
|
-
import { ComparePlugin } from 'tiptap-compare'
|
|
26
|
-
import { Editor } from '@tiptap/core'
|
|
27
|
-
|
|
28
|
-
const editor = new Editor({
|
|
29
|
-
extensions: [
|
|
30
|
-
// ... other extensions
|
|
31
|
-
ComparePlugin.configure({
|
|
32
|
-
comparisonContent: ""
|
|
33
|
-
})
|
|
34
|
-
]
|
|
35
|
-
})
|
|
36
|
-
|
|
37
|
-
// Update comparison content
|
|
38
|
-
editor.commands.setComparisonContent(newContent)
|
|
39
|
-
```
|
|
40
|
-
New content should be json format like you would get
|
|
41
|
-
|
|
42
|
-
## Configuration
|
|
43
|
-
|
|
44
|
-
The plugin accepts the following options:
|
|
45
|
-
|
|
46
|
-
- `comparisonContent`: The content to compare against (default: empty string), should be the content with which it should be compared in json format.
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
## Styling
|
|
50
|
-
|
|
51
|
-
The plugin uses the following CSS classes for styling:
|
|
52
|
-
|
|
53
|
-
- `diff-added`: Applied to added content (green background)
|
|
54
|
-
- `diff-removed`: Applied to removed content (red background with strikethrough)
|
|
55
|
-
- `diff-modified`: Applied to modified content (yellow background)
|
|
56
|
-
|
|
57
|
-
## License
|
|
58
|
-
|
|
59
|
-
MIT
|
|
60
|
-
|
|
61
|
-
## Author
|
|
62
|
-
|
|
1
|
+
# TiptapCompare
|
|
2
|
+
|
|
3
|
+
A Tiptap extension that provides real-time visual comparison between two versions of content in your editor. This plugin helps you track changes by highlighting additions, modifications, and deletions with different colors and styles.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Visual diff highlighting for tiptap editor changes changes
|
|
8
|
+
- Support for different types of blocks (text, paragraphs, images)
|
|
9
|
+
- Color-coded changes:
|
|
10
|
+
- Green background for added content
|
|
11
|
+
- Red background with strikethrough for removed content
|
|
12
|
+
- Yellow background for modified content
|
|
13
|
+
- Real-time comparison updates
|
|
14
|
+
- Support for nested content structures
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @samemichaeltadele/tiptap-compare
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
```typescript
|
|
25
|
+
import { ComparePlugin } from 'tiptap-compare'
|
|
26
|
+
import { Editor } from '@tiptap/core'
|
|
27
|
+
|
|
28
|
+
const editor = new Editor({
|
|
29
|
+
extensions: [
|
|
30
|
+
// ... other extensions
|
|
31
|
+
ComparePlugin.configure({
|
|
32
|
+
comparisonContent: ""
|
|
33
|
+
})
|
|
34
|
+
]
|
|
35
|
+
})
|
|
36
|
+
|
|
37
|
+
// Update comparison content
|
|
38
|
+
editor.commands.setComparisonContent(newContent)
|
|
39
|
+
```
|
|
40
|
+
New content should be in json format like you would get by using the getJSON() comand on an editor
|
|
41
|
+
|
|
42
|
+
## Configuration
|
|
43
|
+
|
|
44
|
+
The plugin accepts the following options:
|
|
45
|
+
|
|
46
|
+
- `comparisonContent`: The content to compare against (default: empty string), should be the content with which it should be compared in json format.
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
## Styling
|
|
50
|
+
|
|
51
|
+
The plugin uses the following CSS classes for styling:
|
|
52
|
+
|
|
53
|
+
- `diff-added`: Applied to added content (green background)
|
|
54
|
+
- `diff-removed`: Applied to removed content (red background with strikethrough)
|
|
55
|
+
- `diff-modified`: Applied to modified content (yellow background)
|
|
56
|
+
|
|
57
|
+
## License
|
|
58
|
+
|
|
59
|
+
MIT
|
|
60
|
+
|
|
61
|
+
## Author
|
|
62
|
+
|
|
63
63
|
SameC137 <samemichael1415@gmail.com>
|
package/package.json
CHANGED
|
@@ -1,38 +1,39 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@samemichaeltadele/tiptap-compare",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "Tip Tap
|
|
5
|
-
"keywords": ["tiptap", "compare", "diff", "highlight", "highlighting", "diffing", "diff-highlighting", "diff-highlighting-tiptap", "tiptap-compare", "tiptap-diff", "tiptap-highlight", "tiptap-highlighting", "tiptap-diff-highlighting", "tiptap-diff-highlighting-tiptap"],
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
"
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
"@rollup/plugin-
|
|
23
|
-
"@
|
|
24
|
-
"@tiptap/
|
|
25
|
-
"
|
|
26
|
-
"rollup
|
|
27
|
-
"rollup-plugin-
|
|
28
|
-
"rollup-plugin-
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
"@tiptap/
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@samemichaeltadele/tiptap-compare",
|
|
3
|
+
"version": "0.0.3",
|
|
4
|
+
"description": "Tip Tap change compare plugin ",
|
|
5
|
+
"keywords": ["tiptap", "compare", "diff", "highlight", "highlighting", "diffing", "diff-highlighting", "diff-highlighting-tiptap", "tiptap-compare", "tiptap-diff", "tiptap-highlight", "tiptap-highlighting", "tiptap-diff-highlighting", "tiptap-diff-highlighting-tiptap", "Tip Tap Compare"],
|
|
6
|
+
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/SameC137/tiptap-compare.git"
|
|
10
|
+
},
|
|
11
|
+
"author": "SameC137 <samemichael1415@gmail.com>",
|
|
12
|
+
"license": "MIT",
|
|
13
|
+
"main": "dist/index.cjs.js",
|
|
14
|
+
"module": "dist/index.js",
|
|
15
|
+
"types": "dist/index.d.ts",
|
|
16
|
+
"scripts": {
|
|
17
|
+
"clean": "rm -r -Force dist",
|
|
18
|
+
"build": "rollup -c",
|
|
19
|
+
"dev": " rollup -c -w"
|
|
20
|
+
},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"@rollup/plugin-babel": "^6.0.3",
|
|
23
|
+
"@rollup/plugin-commonjs": "^24.0.1",
|
|
24
|
+
"@tiptap/core": "^2.0.0-beta.220",
|
|
25
|
+
"@tiptap/pm": "^2.0.0-beta.220",
|
|
26
|
+
"rollup": "^3.30.0",
|
|
27
|
+
"rollup-plugin-auto-external": "^2.0.0",
|
|
28
|
+
"rollup-plugin-sourcemaps": "^0.6.3",
|
|
29
|
+
"rollup-plugin-typescript2": "^0.34.1",
|
|
30
|
+
"typescript": "^4.9.5"
|
|
31
|
+
},
|
|
32
|
+
"peerDependencies": {
|
|
33
|
+
"@tiptap/core": "^2.0.0-beta.220",
|
|
34
|
+
"@tiptap/pm": "^2.0.0-beta.220"
|
|
35
|
+
},
|
|
36
|
+
"dependencies": {
|
|
37
|
+
"diff": "^8.0.3"
|
|
38
|
+
}
|
|
39
|
+
}
|