Add the ability to set the editor's settings on load

computablefacts · Nov 15, 2024 · 156019b · 156019b
1 parent bb146cb
commit 156019b
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 7 deletions.
diff --git a/public/js/app.js b/public/js/app.js
@@ -8891,15 +8891,17 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+var ctx = {};
 function BlockNoteElement() {
-  var editor = (0,_blocknote_react__WEBPACK_IMPORTED_MODULE_5__.useCreateBlockNote)();
+  var editor = (0,_blocknote_react__WEBPACK_IMPORTED_MODULE_5__.useCreateBlockNote)(ctx.settings);
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_blocknote_mantine__WEBPACK_IMPORTED_MODULE_6__.BlockNoteView, {
     editor: editor
   });
 }
-function renderBlockNote(id) {
+function renderBlockNote(id, settings) {
   var el = document.getElementById(id);
   if (el) {
+    ctx.settings = settings;
     react_dom__WEBPACK_IMPORTED_MODULE_1__.render(/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(BlockNoteElement, {}), el);
   }
 }

diff --git a/public/js/block-note.js b/public/js/block-note.js
@@ -144573,15 +144573,17 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+var ctx = {};
 function BlockNoteElement() {
-  var editor = (0,_blocknote_react__WEBPACK_IMPORTED_MODULE_5__.useCreateBlockNote)();
+  var editor = (0,_blocknote_react__WEBPACK_IMPORTED_MODULE_5__.useCreateBlockNote)(ctx.settings);
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_blocknote_mantine__WEBPACK_IMPORTED_MODULE_6__.BlockNoteView, {
     editor: editor
   });
 }
-function renderBlockNote(id) {
+function renderBlockNote(id, settings) {
   var el = document.getElementById(id);
   if (el) {
+    ctx.settings = settings;
     react_dom__WEBPACK_IMPORTED_MODULE_1__.render(/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(BlockNoteElement, {}), el);
   }
 }

diff --git a/resources/js/block-note.js b/resources/js/block-note.js
@@ -5,14 +5,17 @@ import {BlockNoteView} from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 import {useCreateBlockNote} from "@blocknote/react";
 
+const ctx = {};
+
 function BlockNoteElement() {
-  const editor = useCreateBlockNote();
+  const editor = useCreateBlockNote(ctx.settings);
   return (<BlockNoteView editor={editor}/>);
 }
 
-function renderBlockNote(id) {
+function renderBlockNote(id, settings) {
   const el = document.getElementById(id);
   if (el) {
+    ctx.settings = settings;
     ReactDOM.render(<BlockNoteElement/>, el);
   }
 }

diff --git a/resources/views/components/block-note.blade.php b/resources/views/components/block-note.blade.php
@@ -1,4 +1,21 @@
 <div id="block-note"></div>
 <script>
-  window.addEventListener('load',  () => window.BlockNote.render("block-note"));
+  window.addEventListener('load', function () {
+    const settings = {
+      initialContent: [{
+        type: "paragraph", content: "Welcome to this demo!", props: {
+          "textColor": "default", "backgroundColor": "yellow", "textAlignment": "left"
+        },
+      }, {
+        type: "heading", content: "This is a heading block",
+      }, {
+        type: "paragraph", content: "This is a paragraph block", props: {
+          "textColor": "red", "backgroundColor": "default", "textAlignment": "left"
+        },
+      }, {
+        type: "paragraph",
+      },],
+    };
+    window.BlockNote.render("block-note", settings);
+  });
 </script>