Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CRISTAL-471: Blocknote integration POC #712

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

ClementEXWiki
Copy link
Contributor

@ClementEXWiki ClementEXWiki commented Feb 27, 2025

Jira URL

https://jira.xwiki.org/browse/CRISTAL-471

Changes

Description

  • PoC for integrating BlockNote as an editor to optionally replace TipTap
  • Now uses in-house Reactivue library for React-in-Vue and Vue-in-React integration

TODOS

  • missing support for h4, h5, h6
  • missing parsing and serialization of internal links and images
  • missing blockquote support
  • need to check support for code blocks

Clarifications

Current content (will evolve):

  • The wiki's configuration (config.json) now has an editor field to choose between tiptap and blocknote
  • Editors are lazy-loaded to avoid loading both TipTap and BlockNote in memory
  • Pages written in Markdown can be edited in BlockNote with full Markdown-based WYSIWYG support (no save feature yet)
  • The editor's toolbar can be reimplemented in Vue
  • Everything is typesafe ; some type wrappers may be pretty complex due to the nature of wrapping React components inside Vue

Screenshots & Video

Coming soon.

Executed Tests

Coming soon.

Expected merging strategy

  • Prefers squash: Yes
  • Backport on branches:
    • N/A

@manuelleduc manuelleduc marked this pull request as draft February 27, 2025 08:28
@manuelleduc manuelleduc changed the title [Draft] Blocknote CRISTAL-471: Blocknote integration POC Feb 27, 2025
@@ -62,6 +62,9 @@ export class DefaultWikiConfig implements WikiConfig {
public designSystem: string;
// @ts-expect-error offline is temporarily undefined during class
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// @ts-expect-error offline is temporarily undefined during class
// @ts-expect-error editor is temporarily undefined during class

Comment on lines +1 to +24
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be removed and merged with the root .gitignore

Comment on lines +1 to +12
{
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
"organizeImports": {
"enabled": false
},
"javascript": {
"formatter": {
"quoteStyle": "single",
"semicolons": "asNeeded"
}
}
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be replaced by eslint/prettifier

@@ -0,0 +1,48 @@
{
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We use prettier-package-json to uniformize package.json files, see https://cristal.xwiki.org/xwiki/bin/view/Developers/CodeStyle/#Hpackage.json
You can run fd package.json -x pnpx prettier-package-json --write at the root of the project to batch format all the package.json files.

@@ -0,0 +1,321 @@
/* eslint-disable vue/multi-word-component-names */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing license header.

@@ -0,0 +1,28 @@
{
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file must extend the root tsconfig.json, possibly with overriding for things specific to this package

Comment on lines +43 to +44
"react": "19.0.0",
"react-dom": "19.0.0",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO: double check that importing React in web is really required.
Moreover, if that's indeed the case, it's probably also required in the electron renderer package.

@@ -41,6 +44,7 @@
"baseRestURL": "/rest/cristal/page?media=json",
"homePage": "Main.WebHome",
"designSystem": "dsfr",
"editor": "tiptap",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another option is to allow for the editor key to be missing. When undefined, the default editor (tiptap currently) is loaded.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants