Page Editing

[Legonois]

User Story

As a User, I would like to edit existing pages directly on the site

Criteria

• WYSIWYG editor should be integrated into the page editing endpoint
  • Use Facebook's Lexical
  • Look at Notion as a WYSIWYG editor reference
• Should support undo and redo
• Autosave Content?
• Users should be able to format texts in according to MDX standards (for advanced users)
• Client Side Verification so that when submitting a page the endpoint doesn't have to send back an error
• Validation Errors should appear next to the field with issues
• Error Toasts should appear for a submission failure
• Submission endpoint should take XSS attacks, and sanitize input
• Users should be able to see their updated content instantly

Tasks

• [x] Find WYSIWYG Editor
• [ ] Implement Editor Feature List
• [ ] Implement Client Side Field Verification
• [ ] Create Frontend
• [ ] Do Testing

[Legonois]

HYDRATION ERROR with lexical, <p> component has child

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

In HTML, <pre> cannot be a descendant of <p>.
This will cause a hydration error.

<Dev>
  <div>
    <StripeBackDrop>
      <div>
        <div>
          <Card>
            <div>
              <p>
              ^^^
                <pre>

This happens when rendering the actual lexical editor, as it is a child of the card. So I have to figure out where its going wrong

edit: SOLVED So, stupid thing, that hydration error was because I used a query function wrong in the same page, that is 100% on me.

[Legonois]

Node Pre-Population in Lexical Editor

Prepopulating the editor with nodes has felt impossible! I found a code base that does it properly, and my own nextjs project even works earlier, but as I began to rewrite the editor, it just stopped working!

This is my starting point, using a forked version of the Lexical monorepo.

Lexical/examples/react-rich/src/App.tsx

function $prepopulatedRichText() {
  const root = $getRoot();
  if (root.getFirstChild() === null) {
    const heading = $createHeadingNode('h1');
    heading.append($createTextNode('Welcome to the playground'));
    root.append(heading);
  }
}

const editorConfig = {
  EditorState: $prepopulatedRichText, // Added for the editor state!
  namespace: 'React.js Demo',
  nodes: PlaygroundNodes, // Copied the node imports from the playground demo
  // Handling of errors during update
  onError(error: Error) {
    throw error;
  },
  // The editor theme
  theme: ExampleTheme,
};

When running this, it straight up doesn't change the default editor state. Still trying to figure out why tbh.

Edit:

it was... a flipping typo. I HATE THIS THANKS GITHUB COPILOT FOR AUTO CAPITALIZATION

We need type error support in lexical to prevent his

function $prepopulatedRichText() {
  const root = $getRoot();
  if (root.getFirstChild() === null) {
    const heading = $createHeadingNode('h1');
    heading.append($createTextNode('Welcome to the playground'));
    root.append(heading);
  }
}

const editorConfig = {
  // EditorState: $prepopulatedRichText,
  editorState: $prepopulatedRichText, // editorState should not be capitalized
  namespace: 'React.js Demo',
  nodes: PlaygroundNodes, // Copied the node imports from the playground demo
  // Handling of errors during update
  onError(error: Error) {
    throw error;
  },
  // The editor theme
  theme: ExampleTheme,
};

[Legonois]

https://github.com/shadcn-ui/ui/issues/2944

Downgraded cmdk version so the combobox works properly