feat: Support read only mode

Author: hata6502

docs/index.html

@@ -18,6 +18,11 @@
     <button id="button" type="button">Save</button>
     <div id="output-data"></div>
 
+    <br />
+
+    read only mode
+    <div id="read-only-editorjs"></div>
+
     <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
 
     <!-- For demo -->
@@ -66,95 +71,93 @@
 
       const editorJSConfig = {};
 
-      const editorJS = new EditorJS({
-        data,
-        tools: {
-          layout: {
-            class: EditorJSLayout.LayoutBlockTool,
-            config: {
-              EditorJS,
-              editorJSConfig,
-              enableLayoutEditing: false,
-              enableLayoutSaving: true,
-              initialData: {
-                itemContent: {
-                  1: {
-                    blocks: [],
-                  },
-                },
-                layout: {
-                  type: "container",
-                  id: "",
-                  className: "",
-                  style: "border: 1px solid #000000; ",
-                  children: [
-                    {
-                      type: "item",
-                      id: "",
-                      className: "",
-                      style:
-                        "border: 1px solid #000000; display: inline-block; ",
-                      itemContentId: "1",
-                    },
-                  ],
+      const tools = {
+        layout: {
+          class: EditorJSLayout.LayoutBlockTool,
+          config: {
+            EditorJS,
+            editorJSConfig,
+            enableLayoutEditing: false,
+            enableLayoutSaving: true,
+            initialData: {
+              itemContent: {
+                1: {
+                  blocks: [],
                 },
               },
+              layout: {
+                type: "container",
+                id: "",
+                className: "",
+                style: "border: 1px solid #000000; ",
+                children: [
+                  {
+                    type: "item",
+                    id: "",
+                    className: "",
+                    style: "border: 1px solid #000000; display: inline-block; ",
+                    itemContentId: "1",
+                  },
+                ],
+              },
             },
           },
-          twoColumns: {
-            class: EditorJSLayout.LayoutBlockTool,
-            config: {
-              EditorJS,
-              editorJSConfig,
-              enableLayoutEditing: false,
-              enableLayoutSaving: false,
-              initialData: {
-                itemContent: {
-                  1: {
-                    blocks: [],
-                  },
-                  2: {
-                    blocks: [],
-                  },
+        },
+        twoColumns: {
+          class: EditorJSLayout.LayoutBlockTool,
+          config: {
+            EditorJS,
+            editorJSConfig,
+            enableLayoutEditing: false,
+            enableLayoutSaving: false,
+            initialData: {
+              itemContent: {
+                1: {
+                  blocks: [],
                 },
-                layout: {
-                  type: "container",
-                  id: "",
-                  className: "",
-                  style:
-                    "border: 1px solid #000000; display: flex; justify-content: space-around; padding: 16px; ",
-                  children: [
-                    {
-                      type: "item",
-                      id: "",
-                      className: "",
-                      style: "border: 1px solid #000000; padding: 8px; ",
-                      itemContentId: "1",
-                    },
-                    {
-                      type: "item",
-                      id: "",
-                      className: "",
-                      style: "border: 1px solid #000000; padding: 8px; ",
-                      itemContentId: "2",
-                    },
-                  ],
+                2: {
+                  blocks: [],
                 },
               },
+              layout: {
+                type: "container",
+                id: "",
+                className: "",
+                style:
+                  "border: 1px solid #000000; display: flex; justify-content: space-around; padding: 16px; ",
+                children: [
+                  {
+                    type: "item",
+                    id: "",
+                    className: "",
+                    style: "border: 1px solid #000000; padding: 8px; ",
+                    itemContentId: "1",
+                  },
+                  {
+                    type: "item",
+                    id: "",
+                    className: "",
+                    style: "border: 1px solid #000000; padding: 8px; ",
+                    itemContentId: "2",
+                  },
+                ],
+              },
             },
-            shortcut: "CMD+2",
-            toolbox: {
-              icon: `
-                <svg xmlns='http://www.w3.org/2000/svg' width="16" height="16" viewBox='0 0 512 512'>
-                  <rect x='128' y='128' width='336' height='336' rx='57' ry='57' fill='none' stroke='currentColor' stroke-linejoin='round' stroke-width='32'/>
-                  <path d='M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/>
-                </svg>
-              `,
-              title: "2 columns",
-            },
+          },
+          shortcut: "CMD+2",
+          toolbox: {
+            icon: `
+              <svg xmlns='http://www.w3.org/2000/svg' width="16" height="16" viewBox='0 0 512 512'>
+                <rect x='128' y='128' width='336' height='336' rx='57' ry='57' fill='none' stroke='currentColor' stroke-linejoin='round' stroke-width='32'/>
+                <path d='M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/>
+              </svg>
+            `,
+            title: "2 columns",
           },
         },
-      });
+      };
+
+      const editorJS = new EditorJS({ data, tools });
 
       document.querySelector("#button").addEventListener("click", async () => {
         const outputData = await editorJS.save();
@@ -163,6 +166,13 @@
           outputData
         );
       });
+
+      new EditorJS({
+        holder: "read-only-editorjs",
+        data,
+        readOnly: true,
+        tools,
+      });
     </script>
   </body>
 </html>

src/LayoutBlockTool.ts

@@ -49,6 +49,10 @@ interface LayoutBlockToolDispatchData {
 }
 
 class LayoutBlockTool implements BlockTool {
+  static get isReadOnlySupported() {
+    return true;
+  }
+
   static get shortcut() {
     return "CMD+L";
   }
@@ -68,6 +72,7 @@ class LayoutBlockTool implements BlockTool {
   }
 
   #config!: LayoutBlockToolConfig;
+  #readOnly: boolean;
   #wrapper: HTMLDivElement;
 
   #itemContent: LayoutBlockItemContentData;
@@ -76,7 +81,9 @@ class LayoutBlockTool implements BlockTool {
   constructor({
     config,
     data,
+    readOnly,
   }: BlockToolConstructorOptions<LayoutBlockToolData, LayoutBlockToolConfig>) {
+    this.#readOnly = readOnly;
     this.#wrapper = document.createElement("div");
 
     this.#itemContent = {};
@@ -152,6 +159,7 @@ class LayoutBlockTool implements BlockTool {
         dispatchData: this.#dispatchData,
         editorJSConfig: this.#config.editorJSConfig,
         itemContentData: this.#itemContent,
+        readOnly: this.#readOnly,
       })
     );
   }

src/container.ts

@@ -22,19 +22,23 @@ interface ValidatedLayoutBlockContainerData extends LayoutBlockContainerData {
   )[];
 }
 
-const renderContainer = ({
-  EditorJS,
-  data,
-  dispatchData,
-  editorJSConfig,
-  itemContentData,
-}: {
+interface RenderContext {
   EditorJS: LayoutBlockToolConfig["EditorJS"];
-  data: LayoutBlockContainerData;
   dispatchData: LayoutBlockToolDispatchData;
   editorJSConfig: LayoutBlockToolConfig["editorJSConfig"];
+  readOnly: boolean;
+}
+
+interface RenderContainerProps extends RenderContext {
+  data: LayoutBlockContainerData;
   itemContentData: LayoutBlockItemContentData;
-}) => {
+}
+
+const renderContainer = ({
+  data,
+  itemContentData,
+  ...context
+}: RenderContainerProps) => {
   const wrapper = document.createElement("div");
 
   wrapper.id = data.id;
@@ -47,10 +51,8 @@ const renderContainer = ({
     switch (child.type) {
       case "container": {
         childElement = renderContainer({
-          EditorJS,
+          ...context,
           data: child,
-          dispatchData,
-          editorJSConfig,
           itemContentData,
         });
 
@@ -59,10 +61,8 @@ const renderContainer = ({
 
       case "item": {
         childElement = renderItem({
-          EditorJS,
+          ...context,
           data: child,
-          dispatchData,
-          editorJSConfig,
           itemContentData,
         });
 
@@ -83,4 +83,9 @@ const renderContainer = ({
 };
 
 export { renderContainer };
-export type { LayoutBlockContainerData, ValidatedLayoutBlockContainerData };
+export type {
+  LayoutBlockContainerData,
+  RenderContainerProps,
+  RenderContext,
+  ValidatedLayoutBlockContainerData,
+};

src/item.ts

@@ -1,7 +1,4 @@
-import type {
-  LayoutBlockToolConfig,
-  LayoutBlockToolDispatchData,
-} from "./LayoutBlockTool";
+import type { RenderContext } from "./container";
 import { renderItemContent } from "./itemContent";
 import type { LayoutBlockItemContentData } from "./itemContent";
 
@@ -15,19 +12,12 @@ interface LayoutBlockItemData {
 
 interface ValidatedLayoutBlockItemData extends LayoutBlockItemData {}
 
-const renderItem = ({
-  EditorJS,
-  data,
-  dispatchData,
-  editorJSConfig,
-  itemContentData,
-}: {
-  EditorJS: LayoutBlockToolConfig["EditorJS"];
+interface RenderItemProps extends RenderContext {
   data: LayoutBlockItemData;
-  dispatchData: LayoutBlockToolDispatchData;
-  editorJSConfig: LayoutBlockToolConfig["editorJSConfig"];
   itemContentData: LayoutBlockItemContentData;
-}) => {
+}
+
+const renderItem = ({ data, itemContentData, ...context }: RenderItemProps) => {
   const wrapper = document.createElement("div");
 
   wrapper.id = data.id;
@@ -38,10 +28,8 @@ const renderItem = ({
 
   wrapper.append(
     renderItemContent({
-      EditorJS,
+      ...context,
       data: editorJSData,
-      dispatchData,
-      editorJSConfig,
       itemContentId: data.itemContentId,
     })
   );
@@ -50,4 +38,8 @@ const renderItem = ({
 };
 
 export { renderItem };
-export type { LayoutBlockItemData, ValidatedLayoutBlockItemData };
+export type {
+  LayoutBlockItemData,
+  RenderItemProps,
+  ValidatedLayoutBlockItemData,
+};