editor-js · e11sy · Aug 7, 2024 · Aug 1, 2024 · Aug 1, 2024 · Aug 1, 2024
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"
   }
 }