Merge pull request #76 from editor-js/List-2.0

feat: List 2.0
editor-js · Aug 7, 2024 · d14575d · d14575d
2 parents 591bd2c + d38e7b2
commit d14575d
Show file tree

Hide file tree

Showing 17 changed files with 1,779 additions and 954 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Editor.js 🤩🧦🤨 example</title>
+ <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
+ <link href="/example/assets/demo.css" rel="stylesheet">
+ <script src="/example/assets/json-preview.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+</head>
+<body>
+ <div class="ce-example">
+ <div class="ce-example__header">
+ <a class="ce-example__header-logo" href="https://codex.so/editor">Editor.js 🤩🧦🤨</a>
+
+ <div class="ce-example__header-menu">
+ <a href="https://github.com/editor-js" target="_blank">Plugins</a>
+ <a href="https://editorjs.io/usage" target="_blank">Usage</a>
+ <a href="https://editorjs.io/configuration" target="_blank">Configuration</a>
+ <a href="https://editorjs.io/creating-a-block-tool" target="_blank">API</a>
+ </div>
+ </div>
+ <div class="ce-example__content _ce-example__content--small">
+ <div id="editorjs"></div>
+
+ <div class="ce-example__button" id="saveButton">
+ editor.save()
+ </div>
+
+ <div class="ce-example__statusbar">
+ Readonly:
+ <b id="readonly-state">
+ Off
+ </b>
+ <div class="ce-example__statusbar-button" id="toggleReadOnlyButton">
+ toggle
+ </div>
+ </div>
+ </div>
+ <div class="ce-example__output">
+ <pre class="ce-example__output-content" id="output"></pre>
+
+ <div class="ce-example__output-footer">
+ <a href="https://codex.so" style="font-weight: bold;">Made by CodeX</a>
+ </div>
+ </div>
+ </div>
+
+ <!-- Load Tools -->
+ <!--
+ You can upload Tools to your project's directory and connect them by relative links.
+
+ Also you can load each Tool from CDN or use NPM/Yarn packages.
+
+ Read more at Tools Connection doc:
+ https://editorjs.io/getting-started#tools-connection
+ -->
+
+ <!-- Load Editor.js's Core -->
+ <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
+
+ <!-- Initialization -->
+ <script type="module">
+ import List from './src/index.ts';
+
+ /**
+ * To initialize the Editor, create a new instance with configuration object
+ * @see docs/installation.md for mode details
+ */
+ var editor = new EditorJS({
+ /**
+ * Enable/Disable the read only mode
+ */
+ readOnly: false,
+
+ /**
+ * Wrapper of Editor
+ */
+ holder: 'editorjs',
+
+ /**
+ * Common Inline Toolbar settings
+ * - if true (or not specified), the order from 'tool' property will be used
+ * - if an array of tool names, this order will be used
+ */
+ // inlineToolbar: ['link', 'marker', 'bold', 'italic'],
+ // inlineToolbar: true,
+
+ /**
+ * Tools list
+ */
+ tools: {
+ /**
+ * Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
+ */
+ List: {
+ class: List,
+ inlineToolbar: true,
+ shortcut: 'CMD+SHIFT+L',
+ config: {
+ defaultStyle: 'checklist'
+ }
+ },
+ },
+
+ /**
+ * This Tool will be used as default
+ */
+ // defaultBlock: 'paragraph',
+
+ /**
+ * Initial Editor data
+ */
+ data: {
+ blocks: [
+ {
+ type : 'List',
+ data : {
+ items : [
+ {
+ "content": "Canon",
+ "items": [
+ {
+ "content": "Fisheye",
+ "items": [
+ {
+ "content": "Canon 15mm f/2.8",
+ "items": []
+ },
+ ]
+ },
+ {
+ "content": "Normal",
+ "items": [
+ {
+ "content": "Canon 40mm f/2.8",
+ "items": []
+ },
+ {
+ "content": "Canon 50mm f/1.8",
+ "items": []
+ },
+ ]
+ },
+ {
+ "content": "Zoom",
+ "items": [
+ {
+ "content": "Canon 75-300mm f/4-5.6",
+ "items": []
+ },
+ ]
+ },
+ ]
+ },
+ {
+ "content": "Tamron",
+ "items": [
+ {
+ "content": "Zoom",
+ "items": [
+ {
+ "content": "Tamron 28-75mm f/2.8",
+ "items": []
+ },
+ ]
+ },
+ ]
+ },
+ {
+ "content": "Samyang",
+ "items": [
+ {
+ "content": "Wide",
+ "items": [
+ {
+ "content": "Samyang 14mm f/2.8",
+ "items": []
+ },
+ ]
+ },
+ ]
+ },
+ ],
+ style: 'checklist'
+ }
+ },
+ ]
+ },
+ onReady: function(){
+ saveButton.click();
+ },
+ onChange: function() {
+ console.log('something changed');
+ }
+ });
+
+ /**
+ * Saving button
+ */
+ const saveButton = document.getElementById('saveButton');
+
+ /**
+ * Toggle read-only button
+ */
+ const toggleReadOnlyButton = document.getElementById('toggleReadOnlyButton');
+ const readOnlyIndicator = document.getElementById('readonly-state');
+
+ /**
+ * Saving example
+ */
+ saveButton.addEventListener('click', function () {
+ editor.save()
+ .then((savedData) => {
+ cPreview.show(savedData, document.getElementById("output"));
+ })
+ .catch((error) => {
+ console.error('Saving error', error);
+ });
+ });
+
+ /**
+ * Toggle read-only example
+ */
+ toggleReadOnlyButton.addEventListener('click', async () => {
+ const readOnlyState = await editor.readOnly.toggle();
+
+ readOnlyIndicator.textContent = readOnlyState ? 'On' : 'Off';
+ });
+ </script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -45,6 +45,6 @@
  "vite-plugin-dts": "^3.9.1"
  },
  "dependencies": {
- "@codexteam/icons": "^0.0.2"
+ "@codexteam/icons": "^0.3.2"
  }
 }