feat: add editor custom element

764eaed0 · Yoelis Acourt · 514d1318 · 764eaed0 · 764eaed0 · 764eaed0
Commit 764eaed0 authored Dec 16, 2024 by Yoelis Acourt
6 changed files
--- a/.parcelrc
+++ b/.parcelrc
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.wasm": ["@parcel/transformer-raw"]
+  }
+}
+
--- a/dist/dev/index.html
+++ b/dist/dev/index.html
@@ -11,9 +11,11 @@
    </head>
    <body>
        <div id="app"></div>
+        <!-- <block-note-editor></block-note-editor> -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>        <div id="portal"></div>
+        <script type="module" src="../../src/external-deps/blocknote.js"></script>
        <!-- <script type="module" src="../js/jquery.js"></script> -->
        <!-- <script type="module" src="../js/bootstrap@4.6.2/bootstrap.bundle.min.js"></script> -->
        <script type="module" src="../bundle.min.js"></script>

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -23,14 +23,28 @@
    "serve": "npx parcel serve --dist-dir ./dist/dev/bundle ./dist/dev/index.html",
    "prepare": "husky"
  },
+  "alias": {
+    "prosemirror-highlight/shiki": "./node_modules/prosemirror-highlight/dist/shiki",
+    "shiki/wasm": "./node_modules/shiki/dist/onig.wasm",
+    "@blocknote/mantine/style.css": "./node_modules/@blocknote/mantine/dist/style.css",
+    "@blocknote/react/style.css": "./node_modules/@blocknote/react/dist/style.css",
+    "@blocknote/core/fonts/inter.css": "./node_modules/@blocknote/core/src/fonts/inter.css",
+    "@mantine/core/styles/*": "./node_modules/@mantine/core/styles",
+    "unist-util-visit-parents/do-not-use-color": "./node_modules/unist-util-visit-parents/lib/color.js"
+  },
  "dependencies": {
+    "@blocknote/core": "^0.20.0",
+    "@blocknote/mantine": "^0.20.0",
+    "@blocknote/react": "^0.20.0",
    "@fontsource/crete-round": "~5.0.12",
    "@fontsource/montserrat": "~5.0.17",
    "@fontsource/mulish": "^5.0.16",
    "@fontsource/nunito": "^5.0.17",
    "@fontsource/open-sans": "~5.0.25",
    "@fontsource/oswald": "~5.0.18",
+    "@parcel/config-default": "^2.13.2",
    "@popperjs/core": "~2.9.2",
+    "@tiptap/pm": "^2.10.3",
    "@urql/core": "~2.3.3",
    "aes-js": "~3.1.1",
    "base-x": "~3.0.2",
@@ -52,6 +66,7 @@
    "graphology-operators": "~1.6.0",
    "graphql": "~15.6.1",
    "graphql-ws": "~5.5.0",
+    "hast-util-format": "^1.1.0",
    "highlightjs": "~9.16.2",
    "http-proxy-middleware": "^3.0.3",
    "immer": "~9.0.5",
@@ -60,14 +75,18 @@
    "markdown-it": "~13.0.1",
    "minify": "^11.3.0",
    "prop-types": "~15.6.2",
+    "prosemirror-highlight": "^0.11.0",
    "react": "~18.2.0",
    "react-awesome-popover": "~6.1.1",
    "react-bootstrap": "~1.5.2",
    "react-dom": "~18.2.0",
+    "react-to-webcomponent": "^2.0.1",
    "react-tooltip": "~4.2.8",
    "secp256k1": "~4.0.2",
+    "shiki": "^1.24.2",
    "sigma": "~2.4.0",
    "twgl.js": "~5.0.4",
+    "unist-util-visit-parents": "^6.0.1",
    "use-debounce": "^10.0.0",
    "uuid": "8.3.2"
  },
@@ -78,7 +97,7 @@
    "@getgauge/cli": "~1.4.0",
    "esbuild": "~0.21.1",
    "husky": "^9.1.7",
-    "parcel": "~2.8.2",
+    "parcel": "^2.13.2",
    "process": "^0.11.10",
    "react-testing-library": "~8.0.1",
    "sass": "~1.77.0",

--- a/src/Gargantext/Components/Editor.purs
+++ b/src/Gargantext/Components/Editor.purs
+module Gargantext.Components.Editor (render) where
+
+import Reactix.DOM.HTML as H
+
+render :: H.ElemFactory
+render = H.createDOM "block-note-editor"
+
--- a/src/external-deps/blocknote.js
+++ b/src/external-deps/blocknote.js
+import "@blocknote/core/fonts/inter.css";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
+import React from "react";
+import ReactDOM from "react-dom/client"
+import { createRoot } from "react-dom/client";
+import r2wc from "react-to-webcomponent"
+
+
+function Editor() {
+  const editor = useCreateBlockNote();
+  return React.createElement(BlockNoteView, { editor });
+}
+
+const WCEditor = r2wc(Editor, React, ReactDOM)
+customElements.define("block-note-editor", WCEditor);