feat: page editor #240

makeitrein · 2023-03-20T01:36:40Z

No description provided.

vercel · 2023-03-20T01:36:43Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
geogenesis	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 22, 2023 at 7:52PM (UTC)

apps/web/modules/components/entity-table/entity-input.tsx

apps/web/modules/components/entity-table/entity-table-container.tsx

apps/web/modules/components/entity-table/entity-table.tsx

makeitrein · 2023-03-20T03:53:26Z

apps/web/modules/components/entity/editor/command-list.tsx

+
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => setSelectedIndex(0), [items]);
+  useImperativeHandle(ref, () => ({


We should probably add this keyboard navigation to the TypeDialog in a future PR

Why are we using useIMperativeHandle instead of a useEffect?

It feels a little better to hook into ProseMirror's handleKeyDown event and call it in the command-extension.tsx file rather than having a global document listener in the react component, but both could work!

makeitrein · 2023-03-20T03:56:27Z

apps/web/modules/components/entity/editor/editor.tsx

+        entityStore.updateEditorBlocks(editor);
+      },
+    },
+    [editable]


useEditor takes a dependency array - I think there's potential for problems if entityStore.editorJson isn't fully hydrated by the time we reach this point.

We don't always want editorJson as a dependency however, since it will update onBlur and defocus and close our command popover triggered by the "/" or the "+" button.

Will know if this is a problem once we put it into our actual entity page.

makeitrein · 2023-03-20T03:57:04Z

apps/web/modules/components/entity/editor/editor.tsx

+      <EditorContent editor={editor} />
+      <FloatingMenu editor={editor}>
+        <div className="absolute -left-12 -top-3">
+          <SquareButton onClick={() => editor.chain().focus().insertContent('/').run()} icon="plus" />


A bit of a hack to open up the command menu, but dealing with the internals of Prosemirror can be very annoying.

Can you turn this into a function called openCommandMenu or something so it's clear what this chain of calls does?

apps/web/modules/components/entity/editor/id-extension.tsx

makeitrein · 2023-03-20T03:58:19Z

apps/web/modules/components/entity/editor/table-node.tsx

+  );
+});
+
+export const TableNodeChildren = React.memo(function TableNodeComponent({


Was running into a lot of excessive rerendering of the table, went ham on memoization to address the issue

Do you know why it was re-rendering? I'd rather not memoize everything if we know the root cause and if performance isn't actually an issue.

Good point. The problem is with const { types } = useEntityTable(); - if we remove the useMemo and memoized TableNodeChildren component, the table will flicker on every blur. It looks like we can safely remove the other memoizations.

apps/web/modules/components/filter/type-dialog.tsx

makeitrein · 2023-03-20T04:01:43Z

apps/web/pages/space/[id]/[entityId].tsx

@@ -45,9 +44,12 @@ export default function EntityPage(props: Props) {
  return (
    <EntityStoreProvider
      id={props.id}
+      name={props.name}


Name and the blockIdsTriple and blockTriples are now attributes of EntityStoreProvider

Perhaps name should be computed off triples, would that be cleaner @baiirun

This is probably okay, but now there's places in the codebase where we read the entity name using triples and places where we don't.

I'll switch it to a computed for cleanliness sake

baiirun · 2023-03-20T17:05:04Z

apps/web/modules/components/entity/editor/command-extension.tsx

+  suggestion: {
+    items: ({ query }) => {
+      return commandItems
+        .filter(v => v.command)


What is this filter doing? Don't all our commands in command-items have a command?

After the command menu opens, we can filter the menu options by typing in it! I left a comment, but we can also just remove this feature...

baiirun · 2023-03-20T17:06:14Z

apps/web/modules/components/entity/editor/command-extension.tsx

+          popup = tippy('body', {
+            getReferenceClientRect: props.clientRect as any, // fixme
+            appendTo: () => document.body,
+            content: reactRenderer.element,
+            showOnCreate: true,
+            interactive: true,
+            trigger: 'manual',
+            placement: 'bottom-start',
+          });
+        },


Can we somehow use Radix's popover elements instead of bringing in a new dependency?

I attempted to follow the code used in ueberdosis/tiptap#2305 for a more Reacty way of doing things, but Radix doesn't seem to expose a way to position a popover w/o a Popover.Trigger element.

baiirun · 2023-03-20T17:30:06Z

apps/web/modules/components/entity/editor/command-list.tsx

+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [mode, setMode] = useState<CommandListMode>('select-block');
+
+  const tableItem = items.find(item => item.title === 'Table') as CommandSuggestionItem;


Could this ever return undefined? When casting like this we gotta be careful that we aren't accidentally hiding a bug.

Cool, I extracted tableCommandItem to make sure we don't need this awkward find statement

baiirun · 2023-03-20T17:31:01Z

apps/web/modules/components/entity/editor/command-list.tsx

+  };
+
+  const invokeItem = (item: CommandSuggestionItem) => {
+    if (!item) {


When would we not pass an item? Based on the type parameter I'd expect it to always be non-null/undefined.

Good point!

baiirun · 2023-03-20T17:31:55Z

apps/web/modules/components/entity/editor/command-list.tsx

+
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => setSelectedIndex(0), [items]);
+  useImperativeHandle(ref, () => ({


Why are we using useIMperativeHandle instead of a useEffect?

baiirun · 2023-03-20T17:35:20Z

apps/web/modules/components/entity/editor/table-node.tsx

+
+  const selectedType = useMemo(() => {
+    return types.find(type => type.entityId === typeId) as Triple;
+  }, [types.length, typeId]); // eslint-disable-line react-hooks/exhaustive-deps


Are we sure this won't cause stale data if we get two types arrays that are the same length? We could stringify the types array if we know it's never very large.

JSON.stringify works!

baiirun · 2023-03-20T17:35:35Z

apps/web/modules/components/entity/editor/table-node.tsx

+  );
+});
+
+export const TableNodeChildren = React.memo(function TableNodeComponent({


Do you know why it was re-rendering? I'd rather not memoize everything if we know the root cause and if performance isn't actually an issue.

baiirun · 2023-03-20T17:40:55Z

apps/web/pages/space/[id]/[entityId].tsx

@@ -45,9 +44,12 @@ export default function EntityPage(props: Props) {
  return (
    <EntityStoreProvider
      id={props.id}
+      name={props.name}


This is probably okay, but now there's places in the codebase where we read the entity name using triples and places where we don't.

baiirun · 2023-03-20T17:41:59Z

apps/web/pages/space/[id]/[entityId]/v2.tsx

I'm making changes to the main [entityId].tsx page which will probably cause issues when you try and migrate this v2 page over. We might want to get in my versioning changes on the page before we migrate the editor over.

baiirun · 2023-03-20T17:43:02Z

apps/web/modules/entity/entity-table-store/entity-table-store.ts

+  initialRows?: Row[];
+  initialSelectedType?: TripleType | null;
+  initialTypes?: TripleType[];
+  initialColumns?: Column[];


Why are we making these optional?

Whoops, that should not have been committed

badgeth-dao added 30 commits March 1, 2023 12:25

TipTap basic editor

d3836a3

Merge branch 'master' into tip-tap

e11c45b

Exploring tip tap commands

202589a

Exploring how to toggle state

9059533

Rendering tip tap custom react component

8b42d2f

Show header boolean prop toggle added to entity table container

779f498

Rename react component to table-node

2e0ce78

Insert table with click

1633096

Memoize this shit

6536fc6

Inserting table node with a paragraph after

6542d84

Command list looking fly

766b9af

Image start

e11e8b2

Memoize some things

44bb000

Custom v2 page for reading/writing TipTap

10635d5

Exploring how to add this plus button in tiptap...

2c1efac

It works for plus button too

2c1ccf0

Commands looking good

9e2c9a8

Frustrating ability to style components

3f13cc7

Command list showing up properly

1d84ab5

Command list popover best

bf2e50b

Merge branch 'master' into tip-tap-v2-bugfix

0b1957d

Type fetching for table

2e5501d

Simpler command code

8f10b20

Inserting table of type

fbd4b86

Type fixing

e0fc423

Working on serializing data

b0f0379

Wire up Docker to TipTap's private registry

a2958f2

Producing a lot of blocks

2c9636b

Loading blocks step 1

ff7bf8f

Load blocks

8425719

badgeth-dao added 3 commits March 17, 2023 11:15

Clean up unused code in editor

1871b82

Figuring out how to create our home-brew UUID extension

f5bae4d

ID generation working

ae61e50

makeitrein requested a review from baiirun as a code owner March 20, 2023 01:36

Update test

6a3604e

vercel bot deployed to Preview March 20, 2023 01:40 View deployment

Fixing re-render and id problem

9290320

vercel bot deployed to Preview March 20, 2023 03:48 View deployment

makeitrein commented Mar 20, 2023

View reviewed changes

Remove unused packages

f82dd14

vercel bot had a problem deploying to Preview March 20, 2023 04:05 Failure

Ensure paste works for editor

d34e011

vercel bot deployed to Preview March 20, 2023 04:49 View deployment

baiirun changed the title ~~Tip Tap Editor~~ feat: page editor Mar 20, 2023

baiirun requested changes Mar 20, 2023

View reviewed changes

Make name property from EntityStore computed

f8ccffb

vercel bot deployed to Preview March 21, 2023 17:24 View deployment

Remove unneeded memoization and guard statement

d289bd4

vercel bot deployed to Preview March 21, 2023 17:43 View deployment

Remove uneeded useEffect

b36ff25

vercel bot had a problem deploying to Preview March 22, 2023 19:32 Failure

Rebuilt

63e6ce1

vercel bot deployed to Preview March 22, 2023 19:46 View deployment

Merge branch 'master' into tip-tap-editor

6e97e6c

vercel bot deployed to Preview March 22, 2023 19:52 View deployment

baiirun approved these changes Mar 22, 2023

View reviewed changes

baiirun merged commit 4e3c985 into master Mar 22, 2023

baiirun deleted the tip-tap-editor branch March 22, 2023 20:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: page editor #240

feat: page editor #240

makeitrein commented Mar 20, 2023

vercel bot commented Mar 20, 2023 •

edited

Loading

makeitrein Mar 20, 2023

baiirun Mar 20, 2023

makeitrein Mar 22, 2023 •

edited

Loading

makeitrein Mar 20, 2023

makeitrein Mar 20, 2023

baiirun Mar 20, 2023

makeitrein Mar 21, 2023

makeitrein Mar 20, 2023

baiirun Mar 20, 2023

makeitrein Mar 21, 2023

makeitrein Mar 20, 2023

baiirun Mar 20, 2023

makeitrein Mar 21, 2023

baiirun Mar 20, 2023

makeitrein Mar 21, 2023

baiirun Mar 20, 2023

makeitrein Mar 22, 2023

baiirun Mar 20, 2023

makeitrein Mar 21, 2023

baiirun Mar 20, 2023

makeitrein Mar 21, 2023

baiirun Mar 20, 2023

baiirun Mar 20, 2023

makeitrein Mar 21, 2023

baiirun Mar 20, 2023

baiirun Mar 20, 2023

baiirun Mar 20, 2023

baiirun Mar 20, 2023

makeitrein Mar 22, 2023

feat: page editor #240

feat: page editor #240

Conversation

makeitrein commented Mar 20, 2023

vercel bot commented Mar 20, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

makeitrein Mar 22, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vercel bot commented Mar 20, 2023 •

edited

Loading

makeitrein Mar 22, 2023 •

edited

Loading