@itfin/components 1.3.4 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -19,6 +19,20 @@
     "src/"
   ],
   "dependencies": {
+    "@calumk/editorjs-codecup": "^1.1.1",
+    "@editorjs/attaches": "^1.3.0",
+    "@editorjs/code": "^2.9.0",
+    "@editorjs/delimiter": "^1.4.0",
+    "@editorjs/editorjs": "^2.29.0",
+    "@editorjs/embed": "^2.7.0",
+    "@editorjs/header": "^2.8.1",
+    "@editorjs/image": "^2.9.0",
+    "@editorjs/inline-code": "^1.5.0",
+    "@editorjs/link": "^2.6.2",
+    "@editorjs/marker": "^1.4.0",
+    "@editorjs/nested-list": "^1.4.2",
+    "@editorjs/quote": "^2.6.0",
+    "@editorjs/table": "^2.3.0",
     "@egjs/vue-flicking": "^4.10.4",
     "@mdi/js": "^7.2.96",
     "@popperjs/core": "^2.11.8",
@@ -26,7 +40,7 @@
     "@vue/cli-service": "^5.0.1",
     "@vue/composition-api": "^1.7.1",
     "air-datepicker": "^3.3.5",
-    "bootstrap": "^5.2.3",
+    "bootstrap": "^5.3.x",
     "core-js": "^3.7.0",
     "debug": "^4.2.0",
     "intersection-observer": "^0.12.2",
@@ -40,10 +54,10 @@
     "vue-virtual-scroller": "^1.1.2"
   },
   "devDependencies": {
-    "vue": "^2.6.12",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",
     "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
     "@storybook/addon-docs": "=6.3.8",
     "@storybook/addon-viewport": "=6.3.8",
     "@storybook/vue": "=6.3.8",
@@ -61,6 +75,7 @@
     "marked": "^4.2.5",
     "sass": "^1.29.0",
     "sass-loader": "^10.0.5",
+    "vue": "^2.6.12",
     "vue-class-component": "^7.2.6",
     "vue-eslint-parser": "^9.1.0",
     "vue-template-compiler": "=2.6.14"

package/src/components/editor/Editor.vue

@@ -0,0 +1,215 @@
+<template>
+  <div ref="container" class="editor" :class="{ readonly }" />
+</template>
+<style lang="scss">
+@font-face {
+  font-family: "Virgil";
+  src: url("https://unpkg.com/@excalidraw/excalidraw@0.16.1/dist/excalidraw-assets/Virgil.woff2");
+}
+@font-face {
+  font-family: "Cascadia";
+  src: url("https://unpkg.com/@excalidraw/excalidraw@0.16.1/dist/excalidraw-assets/Cascadia.woff2");
+}
+
+.editor {
+  &.readonly {
+    .cdx-input {
+      border: 0 none;
+      -webkit-box-shadow: none;
+      box-shadow: none;
+      padding: 0;
+    }
+
+    .image-tool__caption {
+      font-style: italic;
+      text-align: center;
+    }
+    .cdx-quote {
+      border-left: 3px solid #222;
+      padding: 0.5rem 1rem;
+      margin-bottom: .5rem;
+    }
+    .cdx-quote__text {
+      border-radius: 0;
+      min-height: auto;
+      margin-bottom: 0;
+    }
+    .cdx-quote__caption {
+      font-style: italic;
+
+      &:not(:empty) {
+        margin-top: 10px;
+      }
+
+      &:not(:empty)::before {
+        content: '— ';
+        padding-right: 20px;
+      }
+      &:after {
+        display: none !important;
+      }
+    }
+  }
+}
+</style>
+<script>
+import { Vue, Model, Component, Watch, Prop } from 'vue-property-decorator';
+import EditorJS from '@editorjs/editorjs';
+import Header from '@editorjs/header';
+import Embed from '@editorjs/embed';
+import Quote from '@editorjs/quote';
+import Marker from '@editorjs/marker';
+import LinkTool from '@editorjs/link';
+import Delimiter from '@editorjs/delimiter';
+import InlineCode from '@editorjs/inline-code';
+import Image from '@editorjs/image';
+import Table from '@editorjs/table';
+import AttachesTool from '@editorjs/attaches';
+import NestedList from '@editorjs/nested-list';
+import editorjsCodecup from './tools/highlightcode/codecup';
+import Drawing from './tools/drawing/drawing';
+import cloneDeep from 'lodash/cloneDeep';
+
+export default @Component({
+  components: {
+  }
+})
+class itfEditor extends Vue {
+  @Model('input') value;
+  @Prop(Boolean) readonly;
+  @Prop(String) imageEndpoint;
+  @Prop(String) fetchEndpoint;
+
+  editor = null;
+
+  isIgnoreReload = false;
+
+  mounted() {
+    this.onValueChanged(this.value);
+  }
+
+  beforeDestroy() {
+    if (this.editor && this.editor.destroy) {
+      this.editor.destroy();
+    }
+  }
+
+  @Watch('value')
+  onValueChanged(val, oldVal) {
+    if (this.editor && (this.isIgnoreReload || JSON.stringify(val) === JSON.stringify(oldVal))) {
+      return;
+    }
+    setTimeout(() => {
+      this.initEditor();
+    }, 200);
+  }
+
+  @Watch('readonly')
+  onReadonlyChange(val, oldVal) {
+    this.editor.readOnly.toggle(this.readonly);
+  }
+
+  initEditor() {
+    if (!this.$refs.container) {
+      return;
+    }
+    if (this.editor && this.editor.destroy) {
+      this.editor.destroy();
+    }
+    this.$refs.container.innerHTML = '';
+    const node = document.createElement('div');
+    this.$refs.container.appendChild(node);
+
+    this.editor = new EditorJS({
+      tools: {
+        header: Header,
+        embed: Embed,
+        quote: Quote,
+        marker: Marker,
+        code: editorjsCodecup,
+        delimiter: Delimiter,
+        drawing: {
+          inlineToolbar: true,
+          class: Drawing
+        },
+        // warning: Warning,
+        table: {
+          inlineToolbar: true,
+          class: Table
+        },
+        inlineCode: {
+          class: InlineCode,
+          shortcut: 'CMD+SHIFT+M',
+        },
+        list: {
+          class: NestedList,
+          inlineToolbar: true,
+          config: {
+            defaultStyle: 'unordered'
+          },
+        },
+        linkTool: {
+          class: LinkTool,
+          config: {
+            endpoint: this.fetchEndpoint, // Your backend endpoint for url data fetching,
+          }
+        },
+        attaches: {
+          class: AttachesTool,
+          config: {
+            endpoint: this.imageEndpoint
+          }
+        },
+        image: {
+          class: Image,
+          inlineToolbar: true,
+          config: {
+            endpoints: {
+              byFile: this.imageEndpoint, // Your backend file uploader endpoint
+              byUrl: this.fetchEndpoint, // Your endpoint that provides uploading by Url
+            },
+            /* actions: [
+              {
+                toggle: true,
+                icon: '<svg width="256px" height="256px" viewBox="-32 -32 320 320" xmlns="http://www.w3.org/2000/svg"><g opacity="0.2"><rect x="72" y="56" width="112" height="56" rx="8"/></g><g opacity="0.2"><rect x="72" y="144" width="152" height="56" rx="8"/></g><path fill="currentColor" d="M216,136H80a16.01833,16.01833,0,0,0-16,16v40a16.01833,16.01833,0,0,0,16,16H216a16.01833,16.01833,0,0,0,16-16V152A16.01833,16.01833,0,0,0,216,136Zm0,56H80V152H216l.01025,39.99951ZM47.99414,39.99512v176a8,8,0,0,1-16,0v-176a8,8,0,0,1,16,0ZM80,120h96a16.01833,16.01833,0,0,0,16-16V64a16.01833,16.01833,0,0,0-16-16H80A16.01833,16.01833,0,0,0,64,64v40A16.01833,16.01833,0,0,0,80,120Zm0-56h96l.01025,39.99951L176,104H80Z"/></svg>\n',
+                name: 'left',
+                title: 'Left',
+                action: (name) => {
+                  console.info(name)
+                }
+              },
+              {
+                toggle: true,
+                icon: '<svg width="256px" height="256px" viewBox="-32 -32 320 320" xmlns="http://www.w3.org/2000/svg"><g opacity="0.2"><rect x="64" y="56" width="128" height="56" rx="8"/></g><g opacity="0.2"><rect x="40" y="144" width="176" height="56" rx="8"/></g><path fill="currentColor" d="M208,136H136V120h48a16.01833,16.01833,0,0,0,16-16V64a16.01833,16.01833,0,0,0-16-16H136V31.99512a8,8,0,1,0-16,0V48H72A16.01833,16.01833,0,0,0,56,64v40a16.01833,16.01833,0,0,0,16,16h48v16H48a16.01833,16.01833,0,0,0-16,16v40a16.01833,16.01833,0,0,0,16,16h72v15.99512a8,8,0,0,0,16,0V208h72a16.01833,16.01833,0,0,0,16-16V152A16.01833,16.01833,0,0,0,208,136ZM72,64H184l.01025,39.99951L184,104H128.09668c-.03253-.00037-.064-.00488-.09668-.00488s-.06415.00451-.09668.00488H72ZM208,192H128.09668c-.03253-.00037-.064-.00488-.09668-.00488s-.06415.00451-.09668.00488H48V152H208l.01025,39.99951Z"/></svg>',
+                name: 'centered',
+                title: 'Centered'
+              },
+              {
+                toggle: true,
+                icon: '<svg width="256px" height="256px" viewBox="-32 -32 320 320" xmlns="http://www.w3.org/2000/svg"><g opacity="0.2"><rect x="72" y="56" width="112" height="56" rx="8" transform="translate(256 168) rotate(180)"/></g><g opacity="0.2"><rect x="32" y="144" width="152" height="56" rx="8"/></g><path fill="currentColor" d="M224.00586,39.99512v176a8,8,0,0,1-16,0v-176a8,8,0,0,1,16,0ZM192,64v40a16.01833,16.01833,0,0,1-16,16H80a16.01833,16.01833,0,0,1-16-16V64A16.01833,16.01833,0,0,1,80,48h96A16.01833,16.01833,0,0,1,192,64Zm-16,0H80v40h96Zm16,88v40a16.01833,16.01833,0,0,1-16,16H40a16.01833,16.01833,0,0,1-16-16V152a16.01833,16.01833,0,0,1,16-16H176A16.01833,16.01833,0,0,1,192,152Zm-16,0H40v40H176Z"/></svg>',
+                name: 'right',
+                title: 'Right'
+              }
+            ] */
+          }
+        }
+      },
+      readOnly: this.readonly,
+      holder: node,
+      data: cloneDeep(this.value || {}),
+      // autofocus: true,
+      minHeight: this.readonly ? 10 : 100,
+      placeholder: this.$t('workflows.clickToEdit'),
+
+      onChange: async (api, event) => {
+        if (!this.editor.save || this.readonly) {
+          return;
+        }
+        this.isIgnoreReload = true;
+        this.$emit('input', await this.editor.save());
+        this.$nextTick(() => { this.isIgnoreReload = false; });
+      }
+    });
+  }
+}
+</script>

package/src/components/editor/index.stories.js

@@ -0,0 +1,101 @@
+import { storiesOf } from '@storybook/vue';
+import itfEditor from './Editor.vue';
+
+storiesOf('Common', module)
+  .add('Editor', () => ({
+    components: {
+      itfEditor
+    },
+    data() {
+      return {
+        readonly: false,
+        content: {
+          "time": 1706814343900,
+          "blocks": [
+            {
+              "id": "VgKnTNZEFP",
+              "type": "drawing",
+              "data": {
+                "elements": [
+                  {
+                    "id": "V_vhPwm2mjt3E43Xzi-WD",
+                    "type": "rectangle",
+                    "x": 254.015625,
+                    "y": 163.17578125,
+                    "width": 255.75,
+                    "height": 174.87890625,
+                    "angle": 0,
+                    "strokeColor": "#1e1e1e",
+                    "backgroundColor": "transparent",
+                    "fillStyle": "hachure",
+                    "strokeWidth": 1,
+                    "strokeStyle": "solid",
+                    "roughness": 1,
+                    "opacity": 100,
+                    "groupIds": [],
+                    "frameId": null,
+                    "roundness": {
+                      "type": 3
+                    },
+                    "seed": 676042035,
+                    "version": 16,
+                    "versionNonce": 1604300829,
+                    "isDeleted": false,
+                    "boundElements": null,
+                    "updated": 1706814337975,
+                    "link": null,
+                    "locked": false
+                  },
+                  {
+                    "id": "V1K-7Khbdjtx9dp1WGSIN",
+                    "type": "ellipse",
+                    "x": 1249.26953125,
+                    "y": 216.703125,
+                    "width": 204.3515625,
+                    "height": 151.8046875,
+                    "angle": 0,
+                    "strokeColor": "#1e1e1e",
+                    "backgroundColor": "transparent",
+                    "fillStyle": "hachure",
+                    "strokeWidth": 1,
+                    "strokeStyle": "solid",
+                    "roughness": 1,
+                    "opacity": 100,
+                    "groupIds": [],
+                    "frameId": null,
+                    "roundness": {
+                      "type": 2
+                    },
+                    "seed": 89881459,
+                    "version": 19,
+                    "versionNonce": 259089235,
+                    "isDeleted": false,
+                    "boundElements": null,
+                    "updated": 1706814339583,
+                    "link": null,
+                    "locked": false
+                  }
+                ],
+                libraryItems: [],
+                "files": {},
+                "svg": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1219.60546875 225.33203125\" width=\"2439.2109375\" height=\"450.6640625\">\n  <!-- svg-source:excalidraw -->\n  \n  <defs>\n    <style class=\"style-fonts\">\n      @font-face {\n        font-family: \"Virgil\";\n        src: url(\"https://unpkg.com/@excalidraw/excalidraw@undefined/dist/excalidraw-assets/Virgil.woff2\");\n      }\n      @font-face {\n        font-family: \"Cascadia\";\n        src: url(\"https://unpkg.com/@excalidraw/excalidraw@undefined/dist/excalidraw-assets/Cascadia.woff2\");\n      }\n    </style>\n    \n  </defs>\n  <rect x=\"0\" y=\"0\" width=\"1219.60546875\" height=\"225.33203125\" fill=\"#ffffff\"></rect><g stroke-linecap=\"round\" transform=\"translate(10 10) rotate(0 127.875 87.439453125)\"><path d=\"M32 0 M32 0 C73.21 -0.81, 109.23 0.05, 223.75 0 M32 0 C83.63 -2.22, 135.03 -2.09, 223.75 0 M223.75 0 C246.32 0.1, 254.56 9.54, 255.75 32 M223.75 0 C246.69 -0.1, 256.41 8.39, 255.75 32 M255.75 32 C256.43 73.42, 254.51 116.2, 255.75 142.88 M255.75 32 C254.9 69.61, 253.88 107.88, 255.75 142.88 M255.75 142.88 C257.06 165.23, 246.74 176.15, 223.75 174.88 M255.75 142.88 C256.85 165.96, 243.04 176.99, 223.75 174.88 M223.75 174.88 C164.9 177.2, 106.98 175.67, 32 174.88 M223.75 174.88 C183.58 175.77, 143.17 174.95, 32 174.88 M32 174.88 C12.55 173.29, -0.42 162.63, 0 142.88 M32 174.88 C9.95 176.99, 0.49 164.59, 0 142.88 M0 142.88 C1.49 101.84, 2.03 59.86, 0 32 M0 142.88 C0.97 119.84, 0.26 97.53, 0 32 M0 32 C0.13 9.92, 9.71 0.96, 32 0 M0 32 C-2.28 9.05, 9.54 -0.3, 32 0\" stroke=\"#1e1e1e\" stroke-width=\"1\" fill=\"none\"></path></g><g stroke-linecap=\"round\" transform=\"translate(1005.25390625 63.52734375) rotate(0 102.17578125 75.90234375)\"><path d=\"M67.97 3.96 C79.04 -0.36, 94.17 -0.83, 107.47 -0.18 C120.77 0.47, 135.87 3.43, 147.75 7.85 C159.63 12.26, 170.43 19.14, 178.77 26.3 C187.1 33.46, 193.49 41.71, 197.76 50.8 C202.02 59.89, 204.91 71.07, 204.37 80.84 C203.84 90.61, 200.44 100.92, 194.55 109.44 C188.66 117.95, 179.04 125.55, 169.05 131.94 C159.06 138.34, 146.82 144.59, 134.62 147.79 C122.42 150.98, 108.65 151.71, 95.85 151.12 C83.04 150.53, 69.52 148.46, 57.77 144.24 C46.03 140.02, 33.99 133.22, 25.38 125.8 C16.77 118.38, 10.41 108.88, 6.1 99.73 C1.78 90.58, -1.2 80.25, -0.52 70.89 C0.15 61.53, 4.38 52.24, 10.14 43.59 C15.9 34.95, 22.58 26.06, 34.04 19.01 C45.51 11.97, 69.62 4.07, 78.92 1.33 C88.23 -1.41, 89.44 1.32, 89.88 2.57 M91.2 0.17 C103.32 -1.86, 118.33 1.78, 130.89 4.38 C143.46 6.97, 156.27 10.07, 166.59 15.73 C176.91 21.39, 186.61 29.77, 192.79 38.32 C198.98 46.87, 202.51 57.4, 203.7 67.04 C204.9 76.68, 203.65 86.74, 199.95 96.19 C196.26 105.64, 189.72 116.09, 181.53 123.76 C173.34 131.44, 162.1 137.56, 150.82 142.23 C139.54 146.89, 126.71 150.83, 113.85 151.76 C100.99 152.68, 86.45 150.77, 73.66 147.76 C60.88 144.75, 47.56 139.8, 37.14 133.7 C26.73 127.6, 17.28 119.59, 11.18 111.16 C5.07 102.73, 1.66 92.39, 0.52 83.11 C-0.62 73.84, 0.49 64.65, 4.32 55.51 C8.15 46.36, 15.55 36.06, 23.49 28.22 C31.43 20.39, 40.75 13.38, 51.93 8.5 C63.12 3.62, 84.12 0.19, 90.61 -1.05 C97.11 -2.3, 90.57 -0.73, 90.92 1.01\" stroke=\"#1e1e1e\" stroke-width=\"1\" fill=\"none\"></path></g></svg>"
+              }
+            }
+          ],
+          "version": "2.29.0"
+        }
+      }
+    },
+    methods: {
+    },
+    template: `<div>
+      <h2>Editor</h2>
+      <itf-editor v-model="content" :readonly="readonly" />
+
+      {{readonly}}
+      <div @click="readonly = !readonly">Readonly</div>
+
+      <h2>Code</h2>
+      <pre v-text="content"></pre>
+    </div>`,
+  }));

package/src/components/editor/tools/drawing/drawing.js

@@ -0,0 +1,151 @@
+import './drawing.scss';
+import cloneDeep from 'lodash/cloneDeep';
+
+const icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-8 -8 40 40">\n' +
+  '  <path d="m8.684,23.485c-.183.329-.523.515-.875.515-.164,0-.331-.04-.485-.126C2.669,21.288,0,16.96,0,12,0,5.383,5.383,0,12,0c.731,0,1.465.066,2.181.198.543.1.903.621.803,1.164-.1.544-.622.905-1.164.803-.597-.109-1.208-.165-1.819-.165C6.486,2,2,6.486,2,12c0,4.213,2.294,7.903,6.295,10.126.482.269.657.877.388,1.359Zm15.119-13.666c-.099-.543-.618-.907-1.164-.803-.543.1-.903.621-.803,1.164.109.595.165,1.207.165,1.819,0,3.309-2.691,6-6,6s-6-2.691-6-6c0-.553-.448-1-1-1s-1,.447-1,1c0,4.411,3.589,8,8,8s8-3.589,8-8c0-.733-.066-1.467-.198-2.181Zm-10.63-3.233L18.879.879c1.133-1.133,3.109-1.133,4.243,0,1.169,1.17,1.169,3.072,0,4.242l-5.707,5.707c-.755.756-1.76,1.172-2.828,1.172h-1.586c-.552,0-1-.447-1-1v-1.586c0-1.068.417-2.073,1.172-2.828Zm.828,3.414h.586c.526,0,1.042-.214,1.414-.586l5.707-5.707c.39-.39.39-1.024,0-1.414-.378-.379-1.037-.379-1.414,0l-5.708,5.707c-.378.378-.586.88-.586,1.414v.586Z"/>\n' +
+  '</svg>';
+
+const content = '' +
+'<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <script type="text/javascript" src="https://unpkg.com/@excalidraw/excalidraw@0.16.1/dist/excalidraw.production.min.js"></script></head><body class="excalidraw-container"><div id="app"></div><style> body { display: flex; width: 100vw; height: 100vh; padding: 0; margin: 0;}#app { flex-grow: 1;}.excalidraw .App-menu_top > .Stack.Stack_vertical > div:first-child, .excalidraw .disable-zen-mode, .excalidraw .layer-ui__wrapper__footer-right, .excalidraw .layer-ui__wrapper__github-corner, .excalidraw button.ToolIcon_type_button.ToolIcon.ToolIcon_size_m.Shape.ToolIcon_type_button--show, .excalidraw .library-menu-items-container__items .library-menu-items-container__header, .excalidraw .library-menu-control-buttons, .excalidraw .ToolIcon__library { display: none;} </style><script type="text/javascript"> const App = () => { const data = window.saveData || {}; return React.createElement(React.Fragment, null, React.createElement("div", {style: {height: "100%"},}, React.createElement(ExcalidrawLib.Excalidraw, { initialData: { elements: data.elements || [], libraryItems: data.libraryItems || [], appState: {zenModeEnabled: false}, scrollToContent: false }, onChange: (elements, state, files) => { window.saveData = window.saveData || {}; window.saveData.elements = elements; window.saveData.files = files; ExcalidrawLib.exportToSvg({ elements, state, files }).then(svg => { svg.removeAttribute(\'width\'); svg.removeAttribute(\'height\'); window.saveData.svg = svg.outerHTML; }); }, onLibraryChange: (items) => { window.saveData = window.saveData || {}; window.saveData.libraryItems = items; } })));};const excalidrawWrapper = document.getElementById("app");const root = ReactDOM.createRoot(excalidrawWrapper);root.render(React.createElement(App)); </script></body></html>';
+
+export default class Drawing {
+  data = null;
+  readOnly = false;
+
+  static get sanitize(){
+    return {
+      svg: true,
+      caption: {} // only tags from Inline Toolbar
+    }
+  }
+
+  /**
+   * Allow to use this tool in read only mode
+   */
+  static get isReadOnlySupported() {
+    return true;
+  }
+
+  constructor({ data, readOnly }){
+    this.data = data;
+    this.readOnly = readOnly;
+  }
+
+  static get toolbox() {
+    return {
+      title: 'Drawing',
+      icon
+    };
+  }
+  render(){
+    const wrapper = createWrapper(this.data, this.readOnly);
+    if (!this.readOnly) {
+      wrapper.classList.remove('readonly');
+      wrapper.addEventListener('dblclick', async () => {
+        const modal = document.createElement('div');
+        modal.classList.add('itf-modal');
+        modal.classList.add('modal');
+        modal.classList.add('fade');
+        modal.classList.add('editorjs-drawing-modal');
+        const modalDialog = document.createElement('div');
+        modalDialog.classList.add('modal-dialog');
+        modalDialog.classList.add('modal-fullscreen');
+        const modalContent = document.createElement('div');
+        modalContent.classList.add('modal-content');
+        const modalHeader = document.createElement('div');
+        modalHeader.classList.add('modal-header');
+        const modalTitle = document.createElement('h5');
+        modalTitle.classList.add('modal-title');
+        modalTitle.textContent = 'Drawing';
+        modalHeader.appendChild(modalTitle);
+        const btnHolder = document.createElement('div');
+        btnHolder.classList.add('d-flex');
+        const modalSaveBtn = document.createElement('button');
+        modalSaveBtn.classList.add('btn');
+        modalSaveBtn.classList.add('btn-primary');
+        modalSaveBtn.textContent = 'Save & Close';
+        const modalCancelBtn = document.createElement('button');
+        modalCancelBtn.classList.add('btn');
+        modalCancelBtn.classList.add('btn-secondary');
+        modalCancelBtn.classList.add('me-2');
+        modalCancelBtn.textContent = 'Cancel';
+        btnHolder.appendChild(modalCancelBtn);
+        btnHolder.appendChild(modalSaveBtn);
+        modalHeader.appendChild(modalTitle);
+        modalHeader.appendChild(btnHolder);
+        modalContent.appendChild(modalHeader);
+        const modalBody = document.createElement('div');
+        modalBody.classList.add('modal-body');
+        const iframe = document.createElement('iframe');
+        modalBody.appendChild(iframe);
+        modalContent.appendChild(modalBody);
+        modalDialog.appendChild(modalContent);
+        modal.appendChild(modalDialog);
+        document.body.appendChild(modal);
+        const {default: Modal} = await import('../../../modal/modalSrc');
+        const modalEl = new Modal(modal, {context: document.body, backdrop: 'static'});
+        modalEl.show();
+
+        iframe.classList.add('modal-body-content');
+        iframe.contentWindow.document.open();
+        iframe.contentWindow.document.write(content);
+        iframe.contentWindow.document.close();
+
+        iframe.contentWindow.saveData = this.data;
+        modalSaveBtn.addEventListener('click', () => {
+          this.data = iframe.contentWindow.saveData;
+          if (this.data.svg) {
+            createSvg(wrapper, this.data, this.readOnly);
+          }
+
+          modalEl.hide();
+        });
+        modalCancelBtn.addEventListener('click', () => {
+          modalEl.hide();
+        });
+      });
+    } else {
+      wrapper.classList.add('readonly');
+    }
+    return wrapper;
+
+    function createWrapper(data, readOnly) {
+      const wrapper = document.createElement('div');
+      wrapper.classList.add('editorjs-drawing');
+      if (data.svg) {
+        wrapper.classList.remove('empty');
+        createSvg(wrapper, data, readOnly);
+      } else {
+        wrapper.classList.add('empty');
+        wrapper.innerHTML = `<div class="text-muted icon">${icon}</div><div class="text-muted text">Double click to start sketching out your thoughts.</div>`;
+      }
+      return wrapper;
+    }
+
+    function createSvg(wrapper, { svg, caption }, readOnly) {
+      const svgContainer = document.createElement('div');
+      svgContainer.innerHTML = svg;
+
+      wrapper.innerHTML = '';
+      wrapper.appendChild(svgContainer.childNodes[0]);
+
+      const captionEl = document.createElement('div');
+      captionEl.contentEditable = !readOnly;
+      captionEl.classList.add('editorjs-drawing-caption');
+      captionEl.textContent = caption;
+      if (!readOnly) {
+        captionEl.setAttribute('data-text', 'Caption');
+        captionEl.addEventListener('dblclick', (e) => {
+          e.stopPropagation();
+        });
+      }
+      wrapper.appendChild(captionEl);
+    }
+  }
+  save(blockContent){
+    const caption = blockContent.querySelector('[contenteditable]');
+    const data = cloneDeep(this.data);
+    data.caption = caption.innerHTML;
+    return data;
+  }
+}

package/src/components/editor/tools/drawing/drawing.scss

@@ -0,0 +1,63 @@
+.editorjs-drawing {
+    --editorjs-drawing-border: #dcdfe6;
+
+    &.empty {
+        border: 1px dashed var(--editorjs-drawing-border);
+        min-height: 150px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    position: relative;
+    z-index: 0;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    height: max-content !important;
+
+    &:not(.readonly) {
+        cursor: pointer;
+
+        &:hover {
+            outline: 3px solid var(--editorjs-drawing-border);
+        }
+    }
+
+    .editorjs-drawing-caption {
+        margin-top: 1rem;
+        text-align: center;
+        &:empty:not(:focus):before {
+            content: attr(data-text);
+            opacity: .5;
+        }
+    }
+    svg {
+        width: 100%;
+        height: auto;
+        user-select: none;
+        pointer-events: none;
+    }
+    .icon {
+        width: 48px;
+        height: 48px;
+
+        path {
+            fill: currentColor;
+            stroke: none;
+        }
+    }
+    .text {
+
+    }
+}
+
+.editorjs-drawing-modal .modal-body {
+    padding: 0;
+    display: flex;
+}
+.editorjs-drawing-modal .modal-body-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}