Skip to content

Commit ef10613

Browse files
fgatti675fgatti675
committed
Fix TipTap dependencies and added table
1 parent f06a0f0 commit ef10613

File tree

7 files changed

+1299
-1738
lines changed

7 files changed

+1299
-1738
lines changed

‎examples/example_pro/src/FirestoreApp/views/TestEditorView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@ export function TestEditorView() {
6161
)
6262
}
6363

64-
const defaultEditorContent = `![](https://firebasestorage.googleapis.com/v0/b/firecms-demo-27150.appspot.com/o/editor_test%2Fimage.png?alt=media&token=c5cae8f7-e13d-4b95-aee2-55962b5fbc57)
64+
const defaultEditorContent = `
65+
![](https://firebasestorage.googleapis.com/v0/b/firecms-demo-27150.appspot.com/o/editor_test%2Flogo_192.png?alt=media&token=8e1f2d8f-2fd3-406c-942d-3b9a848e2cff)
6566
# Introducing the FireCMS editor
6667
6768
> The [FireCMS editor](https://firecms.co/) is a Notion-style WYSIWYG editor built with [Tiptap](https://tiptap.dev/).
@@ -81,7 +82,6 @@ code blocks
8182
8283
> I like to look at one or two random quotes each morning.
8384
84-
![](https://firebasestorage.googleapis.com/v0/b/firecms-demo-27150.appspot.com/o/editor_test%2Flogo_192.png?alt=media&token=8e1f2d8f-2fd3-406c-942d-3b9a848e2cff)
8585
## Learn more
8686
8787
This editor is in development and your **feedback** is very **valuable**. The content of this editor is only stored locally in this demo.

‎packages/data_enhancement/src/api.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -158,11 +158,6 @@ export async function autocompleteStream(props: {
158158
onUpdate: (delta: string) => void;
159159
}) {
160160

161-
console.debug("autocomplete", {
162-
textBefore: props.textBefore,
163-
textAfter: props.textAfter
164-
});
165-
166161
let result = "";
167162
return fetch((props.host ?? DEFAULT_SERVER) + "/data/autocomplete/",
168163
{
@@ -191,10 +186,12 @@ export async function autocompleteStream(props: {
191186
for await (const chunk of readChunks(reader)) {
192187
const str = new TextDecoder().decode(chunk);
193188
result += str;
189+
console.debug("Autocomplete update:", str);
194190
props.onUpdate(str);
195191
}
196192

197193
}).then(() => {
194+
console.debug("Autocomplete result:", result);
198195
return result;
199196
});
200197

‎packages/editor/package.json

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,21 +32,28 @@
3232
"dependencies": {
3333
"@firecms/ui": "^3.0.0-canary.136",
3434
"@radix-ui/react-slot": "^1.1.0",
35-
"@tiptap/core": "^2.8.0",
36-
"@tiptap/extension-color": "^2.8.0",
37-
"@tiptap/extension-highlight": "^2.8.0",
38-
"@tiptap/extension-horizontal-rule": "^2.8.0",
39-
"@tiptap/extension-image": "^2.8.0",
40-
"@tiptap/extension-link": "^2.8.0",
35+
"@tiptap/core": "2.8.0",
36+
"@tiptap/extension-bold": "2.8.0",
37+
"@tiptap/extension-bullet-list": "2.8.0",
38+
"@tiptap/extension-color": "2.8.0",
39+
"@tiptap/extension-document": "2.8.0",
40+
"@tiptap/extension-highlight": "2.8.0",
41+
"@tiptap/extension-horizontal-rule": "2.8.0",
42+
"@tiptap/extension-image": "2.8.0",
43+
"@tiptap/extension-link": "2.8.0",
4144
"@tiptap/extension-placeholder": "2.8.0",
42-
"@tiptap/extension-task-item": "^2.8.0",
43-
"@tiptap/extension-task-list": "^2.8.0",
44-
"@tiptap/extension-text-style": "^2.8.0",
45-
"@tiptap/extension-underline": "^2.8.0",
46-
"@tiptap/pm": "^2.8.0",
47-
"@tiptap/react": "^2.8.0",
48-
"@tiptap/starter-kit": "^2.8.0",
49-
"@tiptap/suggestion": "^2.8.0",
45+
"@tiptap/extension-table": "2.8.0",
46+
"@tiptap/extension-table-cell": "2.8.0",
47+
"@tiptap/extension-table-header": "2.8.0",
48+
"@tiptap/extension-table-row": "2.8.0",
49+
"@tiptap/extension-task-item": "2.8.0",
50+
"@tiptap/extension-task-list": "2.8.0",
51+
"@tiptap/extension-text-style": "2.8.0",
52+
"@tiptap/extension-underline": "2.8.0",
53+
"@tiptap/pm": "2.8.0",
54+
"@tiptap/react": "2.8.0",
55+
"@tiptap/starter-kit": "2.8.0",
56+
"@tiptap/suggestion": "2.8.0",
5057
"@types/node": "20.16.11",
5158
"react-markdown": "^9.0.1",
5259
"react-moveable": "^0.56.0",

‎packages/editor/src/editor.tsx

Lines changed: 69 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
11
"use client";
2-
import React, { useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
2+
import React, { useDeferredValue, useEffect, useMemo, useState } from "react";
33

44
import { Underline } from "@tiptap/extension-underline";
55
import TextStyle from "@tiptap/extension-text-style";
66
import { Color } from "@tiptap/extension-color";
77
import BulletList from "@tiptap/extension-bullet-list"
88
import Highlight from "@tiptap/extension-highlight";
99

10+
import Table from "@tiptap/extension-table"
11+
import TableCell from "@tiptap/extension-table-cell"
12+
import TableHeader from "@tiptap/extension-table-header"
13+
import TableRow from "@tiptap/extension-table-row"
14+
1015
import { EditorBubble, type JSONContent } from "./components";
1116

1217
import { NodeSelector } from "./selectors/node-selector";
1318
import { LinkSelector } from "./selectors/link-selector";
1419
import { TextButtons } from "./selectors/text-buttons";
1520

16-
import { cls, defaultBorderMixin, Separator, useInjectStyles } from "@firecms/ui";
17-
import { Editor, EditorProvider } from "@tiptap/react";
21+
import { Button, cls, defaultBorderMixin, Separator, useInjectStyles } from "@firecms/ui";
22+
import { Editor, EditorProvider, Extensions } from "@tiptap/react";
1823
import { removeClassesFromJson } from "./utils/remove_classes";
1924
import {
2025
horizontalRule,
@@ -99,7 +104,7 @@ export const FireCMSEditor = ({
99104
const chain = editorRef.current.chain();
100105

101106
if (deferredHighlight) {
102-
chain.focus().toggleAutocompleteHighlight(deferredHighlight).run();
107+
chain.focus().toggleAutocompleteHighlight(deferredHighlight).run();
103108
} else {
104109
chain.focus().removeAutocompleteHighlight().run();
105110
}
@@ -124,7 +129,7 @@ export const FireCMSEditor = ({
124129

125130
const proseClass = proseClasses[textSize];
126131

127-
const extensions = useMemo(() => ([
132+
const extensions:Extensions = useMemo(() => ([
128133
starterKit,
129134
CustomDocument,
130135
HighlightDecorationExtension(highlight),
@@ -154,13 +159,67 @@ export const FireCMSEditor = ({
154159
aiController,
155160
onDisabledAutocompleteClick
156161
})
157-
})
162+
}),
163+
Table.configure({
164+
resizable: false,
165+
}),
166+
TableRow,
167+
TableHeader,
168+
TableCell,
158169
]), []);
159170

160171
return (
161172
<div
162173
ref={ref}
163174
className="relative min-h-[300px] w-full">
175+
{/*<Button onClick={() => {*/}
176+
{/* // add content at the end*/}
177+
{/* editorRef.current?.commands.setContent(content + "\n" +*/}
178+
{/* " <table border=\"1\">\n" +*/}
179+
{/* " <thead>\n" +*/}
180+
{/* " <tr>\n" +*/}
181+
{/* " <th>Rank</th>\n" +*/}
182+
{/* " <th>Company Name</th>\n" +*/}
183+
{/* " <th>Revenue (in millions)</th>\n" +*/}
184+
{/* " <th>Profit (in millions)</th>\n" +*/}
185+
{/* " </tr>\n" +*/}
186+
{/* " </thead>\n" +*/}
187+
{/* " <tbody>\n" +*/}
188+
{/* " <tr>\n" +*/}
189+
{/* " <td>1</td>\n" +*/}
190+
{/* " <td>Walmart</td>\n" +*/}
191+
{/* " <td>$524,000</td>\n" +*/}
192+
{/* " <td>$15,000</td>\n" +*/}
193+
{/* " </tr>\n" +*/}
194+
{/* " <tr>\n" +*/}
195+
{/* " <td>2</td>\n" +*/}
196+
{/* " <td>Amazon</td>\n" +*/}
197+
{/* " <td>$280,522</td>\n" +*/}
198+
{/* " <td>$11,588</td>\n" +*/}
199+
{/* " </tr>\n" +*/}
200+
{/* " <tr>\n" +*/}
201+
{/* " <td>3</td>\n" +*/}
202+
{/* " <td>Apple</td>\n" +*/}
203+
{/* " <td>$260,174</td>\n" +*/}
204+
{/* " <td>$55,256</td>\n" +*/}
205+
{/* " </tr>\n" +*/}
206+
{/* " <tr>\n" +*/}
207+
{/* " <td>4</td>\n" +*/}
208+
{/* " <td>CVS Health</td>\n" +*/}
209+
{/* " <td>$256,776</td>\n" +*/}
210+
{/* " <td>$6,634</td>\n" +*/}
211+
{/* " </tr>\n" +*/}
212+
{/* " <tr>\n" +*/}
213+
{/* " <td>5</td>\n" +*/}
214+
{/* " <td>UnitedHealth Group</td>\n" +*/}
215+
{/* " <td>$242,155</td>\n" +*/}
216+
{/* " <td>$13,839</td>\n" +*/}
217+
{/* " </tr>\n" +*/}
218+
{/* " </tbody>\n" +*/}
219+
{/* "</table>");*/}
220+
{/*}}>*/}
221+
{/* Add table*/}
222+
{/*</Button>*/}
164223
<EditorProvider
165224
content={content ?? ""}
166225
extensions={extensions}
@@ -356,6 +415,10 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
356415
background-color: rgb(51 65 85); // 700
357416
}
358417
418+
.prose-base table p {
419+
margin: 0;
420+
}
421+
359422
.drag-handle {
360423
position: absolute;
361424
opacity: 1;

‎packages/editor/src/editor_extensions.tsx

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,20 @@
1-
import { HorizontalRule, Placeholder, StarterKit, TaskItem, TaskList, TiptapLink, } from "./extensions";
1+
import StarterKit from "@tiptap/starter-kit";
2+
3+
import { HorizontalRule, Placeholder, TaskItem, TaskList, TiptapLink, } from "./extensions";
24

35
import { cls, defaultBorderMixin } from "@firecms/ui";
46
import { Markdown } from "tiptap-markdown";
57

6-
//You can overwrite the placeholder with your own configuration
78
export const placeholder = Placeholder;
9+
810
export const tiptapLink = TiptapLink.configure({
911
HTMLAttributes: {
1012
class: cls(
11-
"text-gray-600 dark:text-slate-300 underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer",
13+
"text-gray-700 dark:text-slate-200 underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer",
1214
),
1315
},
1416
});
1517

16-
// export const tiptapImage = TiptapImage.extend({
17-
// addProseMirrorPlugins() {
18-
// return [UploadImagesPlugin()];
19-
// },
20-
// }).configure({
21-
// allowBase64: true,
22-
// HTMLAttributes: {
23-
// class: cn("rounded-lg border", defaultBorderMixin),
24-
// },
25-
// });
26-
27-
// const updatedImage = UpdatedImage.configure({
28-
// HTMLAttributes: {
29-
// class: cn("rounded-lg border", defaultBorderMixin),
30-
// },
31-
// });
32-
3318
export const taskList = TaskList.configure({
3419
HTMLAttributes: {
3520
class: cls("not-prose"),

‎packages/editor/src/extensions/index.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const PlaceholderExtension = Placeholder.configure({
3434
}
3535
return "Press '/' for commands";
3636
},
37-
includeChildren: true,
37+
includeChildren: true
3838
});
3939

4040
const Horizontal = HorizontalRule.extend({
@@ -56,10 +56,10 @@ const Horizontal = HorizontalRule.extend({
5656
tr.mapping.map(start),
5757
tr.mapping.map(end)
5858
);
59-
},
60-
}),
59+
}
60+
})
6161
];
62-
},
62+
}
6363
});
6464

6565
export {
@@ -70,7 +70,7 @@ export {
7070
TiptapImage,
7171
TaskItem,
7272
TaskList,
73-
InputRule,
73+
InputRule
7474
};
7575

7676
export { getPrevText } from "../utils/utils";

0 commit comments

Comments
 (0)