codex-team/editor.js

Minimal Code not working when following "Getting Started" instructions

Open

#2,584 opened on 2024年1月7日

GitHub で見る
 (3 comments) (0 reactions) (0 assignees)TypeScript (26,602 stars) (1,985 forks)batch import
good first issueissue for docs

説明

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.

コントリビューターガイド