codex-team/editor.js

Minimal Code not working when following "Getting Started" instructions

Open

#2.584 aberto em 7 de jan. de 2024

Ver no GitHub
 (3 comments) (0 reactions) (0 assignees)TypeScript (1.985 forks)batch import
good first issueissue for docs

Métricas do repositório

Stars
 (26.602 stars)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

Description

I am new to modern web development so I am carefully following the instructions at the "Getting Started" page.

Context

I am using a python Flask web application server which successfully responds to a web browser with HTML and static content like CSS and javascript. There is no issue with these being correctly sent to the browser, as verified by "Inspect element / view source".

I have tried loading the editorjs using two methods: (1) CDN and (2) static file sent from the web server to the browser. Both of these follow the Getting Started instructions:

<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>

or

<script src="editor.js"></script>

Problem 1: Which Library?

Actually, the link on the Getting Started page doesn't point to an official release of editor.js but a page of mostly pre-release versions. This is confusing for newcomers like me. However I scrolled down and found version v2.28.1 which didn't have a pre-release tag against it, and clicked on that. In the zip file there is no editor.js ... is this "release" meant for us to compile ourselves? If I then click on the "tags" tab and scroll down the list I see a v2.28.2 but again the zip doesn't have an editor.js (and why is this not on the main list?). If I go to the main git hub page - not linked from the Getting Started tutorial - I can see on the right that v.2.28.0 is the latest. Yes, I'm confused. This has editor.mjs and editor.umd.js .. as a newbie I don't know what these are and the Getting Started instructions don't mention it. I tried both.

Problem 2: Loading Library Fails

Back to the Getting Started tutorial, at the top of a new javascript file, includes as just after the library is imported, I immediately import the library, as per the tutorial's example code

import EditorJS from '@editorjs/editor.mjs'; // and also tried editor.umd.js

This leads to an error in Firefox latest (

Uncaught SyntaxError: import declarations may only appear at top level of a module

In Safari latest, the error is different

SyntaxError: Unexpected identifier 'EditorJS'. import call expects one or two arguments.

I also tried the other options in the tutorial eg:

import EditorJS from '@editorjs/editorjs';

const editor = new EditorJS({
  /**
   * Id of Element that should contain Editor instance
   */
  holder: 'editorjs'
});

My Attempts to Solve This

I have been coding since the 1980s (!) but not modern web stuff, so I understand fundamentals but not the specifics. I asked around and people who are expert front end developers tell me I need "node/npm". This, if I understand, is a server-side javascript runtime framework. I'm not trying to do that - I',m just trying to load the library into the web browser and use it client side - as the Getting Started page suggests I can and should.

Also, is the use of "@" in the import statement something I need to replace when loading from a CDN or from a web server? Is it an alias that is resolved by node compiling it?

Summary

There are two key problems, irrespective of my own inexperience:

  1. Following the tutorial at the Getting Started pages doesn't work for newcomers as clearly some guidance / information is missing.

  2. There's a mismatch between the linked editor.js and actually finding the lates/official release. I still can't find a file named exactly "editor.js" on the GitHub pages.

Guia do colaborador