BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

Published 20 hours ago • verified publisher icon TypeCellOS

Compiled ready to use js + css + minimalistic vanilla init

Open adoconnection opened this issue 2 years ago • 0 comments

Hi Yousef! Your editor looks very nice and promising!

I was about to give it a try, but stumbled upon vanilla setup (we dont use React) I was expecting vanilla setup to be like this:

<html>
  <head>
    <script src="BlockNoteEditor.min.js" type="text/javascript"></script>
    <link href="BlockNoteEditor.min.css" rel="stylesheet" />
  </head>
  <body>
    <h1>BlockNoteEditor demo</h1>
    <hr />
    <div id="root"></div>
    
    <script>
      var editor = new BlockNoteEditor({
        parentElement: document.getElementById("root"),
        onEditorContentChange: () => {
          console.log(editor.topLevelBlocks);
        },
        domAttributes: {
          editor: {
            class: "editor",
          },
        },
      });
      
      console.log("editor created", editor);
      
      addSideMenu(editor);
      addFormattingToolbar(editor);
      addSlashMenu(editor);
      addHyperlinkToolbar(editor);
    
    </script>
  </body>
</html>

This kind of example open doors for using BlockNote editor anywhere on the web and eady drop in for any existing apps with all kinds of frameworks they might use.

I have a small angularjs app, so this would have allowed me to make a new componet in a matter of minues but instead i have to spin up node, load packages, build and so on. Its not that im lazy but see how convinient Ace did it: https://ace.c9.io/#nav=embedding https://ace.c9.io/#nav=howto

adoconnection avatar Oct 13 '23 08:10 adoconnection