@ebl-vue/editor-full 1.0.11 → 1.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/index.d.ts +5 -0
  2. package/dist/index.mjs +733 -440
  3. package/dist/index.mjs.map +1 -1
  4. package/package.json +3 -1
  5. package/src/components/Editor/Editor.vue +34 -10
  6. package/src/i18n/zh-cn.ts +6 -1
  7. package/src/icons/index.ts +15 -0
  8. package/src/installer.ts +4 -3
  9. package/src/plugins/alert/index.ts +19 -27
  10. package/src/plugins/block-alignment/index.ts +4 -3
  11. package/src/plugins/code/index.ts +3 -2
  12. package/src/plugins/color-picker/index.ts +3 -11
  13. package/src/plugins/delimiter/index.ts +5 -6
  14. package/src/plugins/header/H1.ts +1 -1
  15. package/src/plugins/header/H2.ts +1 -1
  16. package/src/plugins/header/H3.ts +1 -1
  17. package/src/plugins/header/H4.ts +1 -2
  18. package/src/plugins/header/H5.ts +1 -3
  19. package/src/plugins/header/H6.ts +1 -3
  20. package/src/plugins/imageTool/index.css +145 -0
  21. package/src/plugins/imageTool/index.ts +519 -0
  22. package/src/plugins/imageTool/types/codexteam__ajax.d.ts +89 -0
  23. package/src/plugins/imageTool/types/types.ts +234 -0
  24. package/src/plugins/imageTool/ui.ts +312 -0
  25. package/src/plugins/imageTool/uploader.ts +234 -0
  26. package/src/plugins/imageTool/utils/dom.ts +24 -0
  27. package/src/plugins/imageTool/utils/isPromise.ts +10 -0
  28. package/src/plugins/indent/index.ts +5 -7
  29. package/src/plugins/inline-code/index.ts +2 -5
  30. package/src/plugins/list/ListRenderer/ChecklistRenderer.ts +1 -4
  31. package/src/plugins/list/index.ts +20 -37
  32. package/src/plugins/list/types/OlCounterType.ts +1 -1
  33. package/src/plugins/marker/index.ts +28 -16
  34. package/src/plugins/paragraph/index.ts +3 -2
  35. package/src/plugins/quote/index.ts +1 -4
  36. package/src/plugins/table/plugin.ts +1 -1
  37. package/src/plugins/table/table.ts +40 -38
  38. package/src/plugins/table/toolbox.ts +5 -4
  39. package/src/plugins/table/utils/dom.ts +15 -14
  40. package/src/plugins/table/utils/popover.ts +28 -15
  41. package/src/plugins/underline/index.ts +2 -4
  42. package/src/plugins/undo/index.ts +48 -33
  43. package/src/plugins/undo/observer.ts +3 -3
  44. package/src/style.css +6 -0
  45. package/types/index.d.ts +5 -0
  46. package/vite.config.ts +3 -1
  47. package/src/plugins/list/styles/icons/index.ts +0 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ebl-vue/editor-full",
3
- "version": "1.0.11",
3
+ "version": "1.0.13",
4
4
  "type": "module",
5
5
  "author": "lrj525@sina.com",
6
6
  "description": "结构化编辑器",
@@ -39,8 +39,10 @@
39
39
  "url": "ssh://git@git.jianguodata.com:9082/lirujin/ebl-vue.git"
40
40
  },
41
41
  "dependencies": {
42
+ "@codexteam/ajax": "^4.2.0",
42
43
  "@editorjs/caret": "^1.0.3",
43
44
  "@editorjs/dom": "^1.0.1",
45
+ "axios": "^1.13.2",
44
46
  "shiki": "^3.15.0",
45
47
  "vanilla-caret-js": "^1.1.0"
46
48
  },
package/src/components/Editor/Editor.vue CHANGED
@@ -14,11 +14,11 @@
14
14
 
15
15
  import EditorJS from '@ebl-vue/editorjs';
16
16
  //import EditorJS from '../../../../editorjs/src/codex';
17
- window.VERSION="2.31.0"; //如果是用源码模式时，需要设置全局变量
17
+ //window.VERSION="2.31.0"; //如果是用源码模式时，需要设置全局变量
18
18
 
19
19
  import { onMounted, onUnmounted, ref, inject } from 'vue';
20
20
  import { toRaw } from 'vue';
21
-
21
+ import { IEblEditorSettings } from '@/types';
22
22
 
23
23
  /**
24
24
  * 插件
@@ -41,9 +41,12 @@ import { ColorPickerWithoutSanitize } from "../../plugins/color-picker";
41
41
  import Underline from "../../plugins/underline";
42
42
  import InlineCode from "../../plugins/inline-code";
43
43
  import Table from '../../plugins/table';
44
+ import ImageTool from "../../plugins/imageTool";
45
+ import Uploader from '@/plugins/imageTool/uploader';
46
+
44
47
 
45
48
 
46
- const locale: any | undefined = inject("locale");
49
+ const EblEditorSettings: IEblEditorSettings | undefined = inject("EblEditorSettings");
47
50
 
48
51
  defineOptions({
49
52
  name: 'EblEditor',
@@ -59,7 +62,8 @@ interface Props {
59
62
  placeholder: string,
60
63
  title: string,
61
64
  lastUpdateTime: string,
62
- data: OutputData
65
+ data: OutputData,
66
+ locale:any
63
67
  }
64
68
 
65
69
  const props = withDefaults(defineProps<Props>(), {
@@ -69,7 +73,8 @@ const props = withDefaults(defineProps<Props>(), {
69
73
  lastUpdateTime: "",
70
74
  data: ()=>({
71
75
  blocks: []
72
- })
76
+ }),
77
+ locale:{}
73
78
  });
74
79
 
75
80
 
@@ -87,7 +92,7 @@ onMounted(() => {
87
92
  inlineCode: InlineCode,
88
93
  underline: Underline,
89
94
  Color: {
90
- class: ColorPickerWithoutSanitize
95
+ class: ColorPickerWithoutSanitize
91
96
  },
92
97
  marker: {
93
98
  class: Marker
@@ -158,13 +163,32 @@ onMounted(() => {
158
163
  rows: 2,
159
164
  cols: 3,
160
165
  }
161
- }
162
-
166
+ },
167
+ image: {
168
+ class: ImageTool,
169
+ inlineToolbar: true,
170
+ config: {
171
+ endpoints: {
172
+ byFile: EblEditorSettings?.fileUploadEndpoint,
173
+ byUrl: EblEditorSettings?.urlUploadEndpoint
174
+ },
175
+ features: {
176
+ caption: false,
177
+ stretch: false,
178
+ border: false,
179
+ background: false,
180
+ }
181
+
182
+
183
+ }
184
+ },
185
+
186
+
163
187
  },
164
188
 
165
189
  data: editorData,
166
190
  readOnly: props.readOnly,
167
- i18n: locale,
191
+ i18n: props.locale,
168
192
  onChange: (api, event) => {
169
193
  emits("onChange", api, event);
170
194
  },
@@ -175,7 +199,7 @@ onMounted(() => {
175
199
  maxLength:100
176
200
  }
177
201
  const undo = new Undo({
178
- editor: editor,
202
+ editor: editor!,
179
203
  config: undoConfig,
180
204
  onUpdate: () => {
181
205
  }
package/src/i18n/zh-cn.ts CHANGED
@@ -53,11 +53,16 @@ const zhCn: I18nConfig = {
53
53
  "Color": "文本颜色",
54
54
  "Underline": "下划线",
55
55
  "InlineCode": "行内代码",
56
- "Table": "表格"
56
+ "Table": "表格",
57
+ "Image": "图片",
58
+
57
59
 
58
60
 
59
61
  },
60
62
  "tools": {
63
+ image: {
64
+ "Couldn’t upload image. Please try another.": "上传图片失败，请稍后重试。"
65
+ },
61
66
  table: {
62
67
  "Add row above": "在下面插入行",
63
68
  "Add row below": "在下面插入行",
package/src/icons/index.ts CHANGED
@@ -76,3 +76,18 @@ export const IconUnlink: string = '<svg xmlns="http://www.w3.org/2000/svg" width
76
76
  export const IconUser: string = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-width="2" d="M12 10C12.7145 10 13.239 9.56559 13.5392 9.11536C13.844 8.65814 14 8.0841 14 7.5C14 6.9159 13.844 6.34186 13.5392 5.88464C13.239 5.43441 12.7145 5 12 5C11.2855 5 10.761 5.43441 10.4608 5.88464C10.156 6.34186 10 6.9159 10 7.5C10 8.0841 10.156 8.65814 10.4608 9.11536C10.761 9.56559 11.2855 10 12 10Z"/><ellipse cx="12" cy="16" stroke="currentColor" stroke-width="2" rx="3" ry="5" transform="rotate(-90 12 16)"/></svg>';
77
77
  export const IconUsersGroup: string = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-width="2" d="M10 10C10.7145 10 11.239 9.56559 11.5392 9.11536C11.844 8.65814 12 8.0841 12 7.5C12 6.9159 11.844 6.34186 11.5392 5.88464C11.239 5.43441 10.7145 5 10 5C9.28547 5 8.761 5.43441 8.46084 5.88464C8.15603 6.34186 8 6.9159 8 7.5C8 8.0841 8.15603 8.65814 8.46084 9.11536C8.761 9.56559 9.28547 10 10 10Z"/><ellipse cx="10" cy="16" stroke="currentColor" stroke-width="2" rx="3" ry="5" transform="rotate(-90 10 16)"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M15.5555 10.2222C16.5374 10.2222 17.3333 9.42629 17.3333 8.44445C17.3333 7.46261 16.5374 6.66667 15.5555 6.66667"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M17.5 13C21 14.5 20.5 18 18 18.5"/></svg>';
78
78
  export const IconWarning: string = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><rect width="14" height="14" x="5" y="5" stroke="currentColor" stroke-width="2" rx="4"/><line x1="12" x2="12" y1="9" y2="12" stroke="currentColor" stroke-linecap="round" stroke-width="2"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M12 15.02V15.01"/></svg>';
79
+
80
+ export const IconToolboxAlert: string = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1763693072662" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2633" id="mx_n_1763693072663" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M83.2 147.2V448c0 25.6 19.2 44.8 44.8 44.8h768c25.6 0 44.8-19.2 44.8-44.8V147.2c0-25.6-19.2-44.8-44.8-44.8H128c-25.6 6.4-44.8 25.6-44.8 44.8z m89.6 256V192h684.8v211.2H172.8zM810.24 642.56c0-25.6-19.2-44.8-44.8-44.8h-640c-25.6 0-44.8 19.2-44.8 44.8 0 25.6 19.2 44.8 44.8 44.8h640c25.6 6.4 44.8-12.8 44.8-44.8zM554.56 866.24c0-25.6-19.2-44.8-44.8-44.8h-384c-25.6 0-44.8 19.2-44.8 44.8 0 25.6 19.2 44.8 44.8 44.8h384c25.6 6.4 44.8-12.8 44.8-44.8z" fill="#262626" p-id="2634"></path></svg>';
81
+
82
+ export const IconCode: string = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17C7 17 7 15.2536 7 13.5L5.5 12L7 10.5C7 8.74644 7 7 9 7"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17C17 17 17 15.2536 17 13.5L18.5 12L17 10.5C17 8.74644 17 7 15 7"/></svg>';
83
+
84
+ export const IconIndentLeft: string = '<svg t="1763708081701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2604" width="24" height="24"><path d="M469.3330000000001 725.333H896V640H469.3330000000001v85.333zM128 512l170.667 170.667V341.3330000000001L128 512z m0 384h768v-85.333H128V896z m0-768v85.333h768V128H128z m341.333 256H896v-85.333H469.3330000000001V384z m0 170.667H896v-85.334H469.3330000000001v85.334z" p-id="2605" fill="#000000"></path></svg>';
85
+ export const IconIndentRight: string = '<svg t="1763708124227" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2788" width="24" height="24"><path d="M128 896h768v-85.333H128V896z m0-554.667v341.334L298.667 512 128 341.333z m341.333 384H896V640H469.333v85.333zM128 128v85.333h768V128H128z m341.333 256H896v-85.333H469.333V384z m0 170.667H896v-85.334H469.333v85.334z" p-id="2789" fill="#000000"></path></svg>';
86
+
87
+
88
+ export const IconNumber = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 14.2L10 7.4135C10 7.32872 9.90111 7.28241 9.83598 7.33668L7 9.7" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M13.2087 14.2H13.2" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>';
89
+ export const IconLowerRoman = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.2087 14.2H13.2" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M10 14.2L10 9.5" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M10 7.01L10 7" stroke="black" stroke-width="1.8" stroke-linecap="round"/></svg>';
90
+ export const IconUpperRoman = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.2087 14.2H13.2" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M10 14.2L10 7.2" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>';
91
+ export const IconUpperAlpha = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.0087 14.2H16" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M7 14.2L7.78865 12M13 14.2L12.1377 12M7.78865 12C7.78865 12 9.68362 7 10 7C10.3065 7 12.1377 12 12.1377 12M7.78865 12L12.1377 12" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>';
92
+ export const IconLowerAlpha = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.2087 14.2H14.2" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M11.5 14.5C11.5 14.5 11 13.281 11 12.5M7 9.5C7 9.5 7.5 8.5 9 8.5C10.5 8.5 11 9.5 11 10.5L11 11.5M11 11.5L11 12.5M11 11.5C11 11.5 7 11 7 13C7 15.3031 11 15 11 12.5" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>';
93
+ export const IconStartWith = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 14.2L8 7.4135C8 7.32872 7.90111 7.28241 7.83598 7.33668L5 9.7" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M14 13L16.4167 10.7778M16.4167 10.7778L14 8.5M16.4167 10.7778H11.6562" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
package/src/installer.ts CHANGED
@@ -2,15 +2,16 @@ import type { App, Plugin } from 'vue'
2
2
  import { version } from '../package.json'
3
3
 
4
4
  import { INSTALLED_KEY } from "./constants";
5
+ import { IEblEditorSettings } from '@/types';
5
6
 
6
7
  export const createInstaller = (components: Plugin[] = []) => {
7
- const install = (app: App,iconfig?: any) => {
8
+ const install = (app: App,config?: IEblEditorSettings) => {
8
9
  if (app[INSTALLED_KEY]) return
9
10
 
10
11
  app[INSTALLED_KEY] = true
11
12
  components.forEach((c) => app.use(c))
12
- if(iconfig) {
13
- app.provide("locale",iconfig.locale);
13
+ if(config) {
14
+ app.provide("EblEditorSettings",config);
14
15
  }
15
16
 
16
17
  }
package/src/plugins/alert/index.ts CHANGED
@@ -11,21 +11,10 @@
11
11
 
12
12
  import type { API,BlockTool,BlockToolConstructorOptions } from "@ebl-vue/editorjs/types";
13
13
  import './index.css';
14
+ import type { HTMLPasteEvent } from '@ebl-vue/editorjs';
15
+ import { IconToolboxAlert as ToolboxIcon,IconAlignLeft as AlignLeftIcon,IconAlignCenter as AlignCenterIcon,IconAlignRight as AlignRightIcon } from "../../icons";
14
16
 
15
17
 
16
-
17
- /**
18
- * Import Tool's icons
19
- */
20
- const ToolboxIcon = `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1763693072662" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2633" id="mx_n_1763693072663" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M83.2 147.2V448c0 25.6 19.2 44.8 44.8 44.8h768c25.6 0 44.8-19.2 44.8-44.8V147.2c0-25.6-19.2-44.8-44.8-44.8H128c-25.6 6.4-44.8 25.6-44.8 44.8z m89.6 256V192h684.8v211.2H172.8zM810.24 642.56c0-25.6-19.2-44.8-44.8-44.8h-640c-25.6 0-44.8 19.2-44.8 44.8 0 25.6 19.2 44.8 44.8 44.8h640c25.6 6.4 44.8-12.8 44.8-44.8zM554.56 866.24c0-25.6-19.2-44.8-44.8-44.8h-384c-25.6 0-44.8 19.2-44.8 44.8 0 25.6 19.2 44.8 44.8 44.8h384c25.6 6.4 44.8-12.8 44.8-44.8z" fill="#262626" p-id="2634"></path></svg>`;
21
-
22
-
23
- const AlignLeftIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M17 7L5 7"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M17 17H5"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M13 12L5 12"/></svg>`;
24
-
25
- const AlignCenterIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M18 7L6 7"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M18 17H6"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M16 12L8 12"/></svg>`;
26
-
27
- const AlignRightIcon =`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M19 7L7 7"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M19 17H7"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M19 12L11 12"/></svg>`;
28
-
29
18
  /**
30
19
  * @class Alert
31
20
  * @classdesc Alert Tool for Editor.js
@@ -134,8 +123,8 @@ export default class Alert implements BlockTool{
134
123
  get CSS() {
135
124
  return {
136
125
  wrapper: 'cdx-alert',
137
- wrapperForType: (type) => `cdx-alert-${type}`,
138
- wrapperForAlignType: (alignType) => `cdx-alert-align-${alignType}`,
126
+ wrapperForType: (type:string) => `cdx-alert-${type}`,
127
+ wrapperForAlignType: (alignType:string) => `cdx-alert-align-${alignType}`,
139
128
  message: 'cdx-alert__message',
140
129
  };
141
130
  }
@@ -145,6 +134,8 @@ export default class Alert implements BlockTool{
145
134
  private messagePlaceholder: string;
146
135
  private data: any;
147
136
  private api: API;
137
+ private container: any;
138
+ private readOnly: boolean;
148
139
 
149
140
  /**
150
141
  * Render plugin`s main Element and fill it with saved data
@@ -268,7 +259,7 @@ export default class Alert implements BlockTool{
268
259
  alertWrapper.appendChild(button);
269
260
  return button;
270
261
  }).forEach((button, index, buttons) => {
271
- const type = button.getAttribute('data-type');
262
+ const type: string = button.getAttribute('data-type') || "";
272
263
  button.addEventListener('click', () => {
273
264
  this._changeAlertType(type);
274
265
  buttons.forEach((el, index) => {
@@ -309,7 +300,7 @@ export default class Alert implements BlockTool{
309
300
  alignWrapper.appendChild(button!);
310
301
  return button;
311
302
  }).forEach((button, index, buttons) => {
312
- const align = button!.getAttribute('data-align');
303
+ const align: string = button!.getAttribute('data-align') || "";
313
304
  button!.addEventListener('click', () => {
314
305
  this._changeAlignType(align);
315
306
  buttons.forEach((el, index) => {
@@ -330,7 +321,7 @@ export default class Alert implements BlockTool{
330
321
  * @param {string} type - Alert type or Align type
331
322
  * @returns {string}
332
323
  */
333
- _getFormattedName(name) {
324
+ _getFormattedName(name: string) {
334
325
  return this.api.i18n.t(name.charAt(0).toUpperCase() + name.slice(1));
335
326
  }
336
327
 
@@ -340,7 +331,7 @@ export default class Alert implements BlockTool{
340
331
  * @param {string} newType - new Alert type to be applied to the block
341
332
  * @private
342
333
  */
343
- _changeAlertType(newType) {
334
+ _changeAlertType(newType: string) {
344
335
  // Save new type
345
336
  this.data.type = newType;
346
337
 
@@ -363,7 +354,7 @@ export default class Alert implements BlockTool{
363
354
  * @param {string} newAlign - new align type to be applied to the block
364
355
  * @private
365
356
  */
366
- _changeAlignType(newAlign) {
357
+ _changeAlignType(newAlign: string) {
367
358
  // Save new type
368
359
  this.data.align = newAlign;
369
360
 
@@ -386,10 +377,10 @@ export default class Alert implements BlockTool{
386
377
  * @param {HTMLDivElement} alertElement - element to save
387
378
  * @returns {AlertData}
388
379
  */
389
- save(alertElement) {
380
+ save(alertElement: HTMLElement) {
390
381
  const messageEl = alertElement.querySelector(`.${this.CSS.message}`);
391
382
 
392
- return { ...this.data, message: messageEl.innerHTML };
383
+ return { ...this.data, message: messageEl?.innerHTML || '' };
393
384
  }
394
385
 
395
386
  /**
@@ -401,7 +392,7 @@ export default class Alert implements BlockTool{
401
392
  * @returns {Element}
402
393
  * @private
403
394
  */
404
- _make(tagName, classNames = null, attributes = {}) {
395
+ _make(tagName:string, classNames:string[]|string|null, attributes:Record<string, any> = {}) {
405
396
  let el = document.createElement(tagName);
406
397
 
407
398
  if (Array.isArray(classNames)) {
@@ -411,7 +402,8 @@ export default class Alert implements BlockTool{
411
402
  }
412
403
 
413
404
  for (let attrName in attributes) {
414
- el[attrName] = attributes[attrName];
405
+ //el[attrName] = attributes[attrName];
406
+ el.setAttribute(attrName, attributes[attrName]);
415
407
  }
416
408
 
417
409
  return el;
@@ -422,7 +414,7 @@ export default class Alert implements BlockTool{
422
414
  *
423
415
  * @param {PasteEvent} event - event with pasted content
424
416
  */
425
- onPaste(event) {
417
+ onPaste(event:HTMLPasteEvent) {
426
418
  const { data } = event.detail;
427
419
 
428
420
  this.data = {
@@ -437,9 +429,9 @@ export default class Alert implements BlockTool{
437
429
  static get conversionConfig() {
438
430
  return {
439
431
  // export Alert's message for other blocks
440
- export: (data) => data.message,
432
+ export: (data:any) => data.message,
441
433
  // fill Alert's message from other block's export string
442
- import: (string) => {
434
+ import: (string:string) => {
443
435
  return {
444
436
  message: string,
445
437
  type: this.DEFAULT_TYPE,
package/src/plugins/block-alignment/index.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import "./index.css"
2
2
  import type { API, BlockTune, ToolConfig } from "@ebl-vue/editorjs/types";
3
+ import { IconAlignLeft,IconAlignCenter,IconAlignRight } from "../../icons";
3
4
 
4
5
  interface ConstructorArgs {
5
6
  data: AlignmentData;
@@ -49,15 +50,15 @@ export default class BlockAlignment implements BlockTune{
49
50
  this.alignmentSettings = [
50
51
  {
51
52
  name: 'left',
52
- icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M17 7L5 7"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M17 17H5"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M13 12L5 12"/></svg>`
53
+ icon: IconAlignLeft
53
54
  },
54
55
  {
55
56
  name: 'center',
56
- icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M18 7L6 7"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M18 17H6"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M16 12L8 12"/></svg>`
57
+ icon: IconAlignCenter
57
58
  },
58
59
  {
59
60
  name: 'right',
60
- icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M19 7L7 7"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M19 17H7"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M19 12L11 12"/></svg>`
61
+ icon: IconAlignRight
61
62
  }
62
63
  ];
63
64
  this._CSS = {
package/src/plugins/code/index.ts CHANGED
@@ -3,6 +3,7 @@ import './index.css';
3
3
  import type { API, BlockTool, BlockToolConstructorOptions, BlockToolData, PasteConfig, PasteEvent, SanitizerConfig, ToolboxConfig } from '@ebl-vue/editorjs';
4
4
  import { codeToHtml, bundledLanguagesInfo as languages } from 'shiki'
5
5
  import { getLineStartPosition } from './utils/string';
6
+ import { IconCode ,IconCopy} from "../../icons";
6
7
 
7
8
  /**
8
9
  * CodeTool for Editor.js
@@ -229,7 +230,7 @@ export default class CodeTool implements BlockTool {
229
230
  */
230
231
  public static get toolbox(): ToolboxConfig {
231
232
  return {
232
- icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17C7 17 7 15.2536 7 13.5L5.5 12L7 10.5C7 8.74644 7 7 9 7"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17C17 17 17 15.2536 17 13.5L18.5 12L17 10.5C17 8.74644 17 7 15 7"/></svg>',
233
+ icon: IconCode,
233
234
  title: 'Code',
234
235
  };
235
236
  }
@@ -363,7 +364,7 @@ export default class CodeTool implements BlockTool {
363
364
  textarea.classList.add(this.CSS.textarea, this.CSS.input);
364
365
 
365
366
  wrapperLang.innerHTML = this.data.lang
366
- wrapperCopy.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.25 8.5H10.25C9.2835 8.5 8.5 9.2835 8.5 10.25V17.25C8.5 18.2165 9.2835 19 10.25 19H17.25C18.2165 19 19 18.2165 19 17.25V10.25C19 9.2835 18.2165 8.5 17.25 8.5Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.5 8.5V6.75C15.5 6.28587 15.3156 5.84075 14.9874 5.51256C14.6592 5.18437 14.2141 5 13.75 5H6.75C6.28587 5 5.84075 5.18437 5.51256 5.51256C5.18437 5.84075 5 6.28587 5 6.75V13.75C5 14.2141 5.18437 14.6592 5.51256 14.9874C5.84075 15.3156 6.28587 15.5 6.75 15.5H8.5"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 12L15.5 12"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.5L15.5 15.5"/></svg>`;
367
+ wrapperCopy.innerHTML = IconCopy;
367
368
  wrapperCopyTip.innerText=this.api.i18n.t('Copied');
368
369
 
369
370
 
package/src/plugins/color-picker/index.ts CHANGED
@@ -1,20 +1,12 @@
1
1
  import { API } from '@ebl-vue/editorjs';
2
- import type { InlineTool } from "@ebl-vue/editorjs/types/inline-tool";
3
- const IconColor = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.24296 11.4075C5.23167 10.6253 5.52446 9.8395 6.12132 9.24264L9.65686 5.70711C10.0474 5.31658 10.6809 5.31693 11.0714 5.70745L16.0205 10.6565C16.2268 10.8629 16.3243 11.1371 16.3126 11.4075M5.24296 11.4075C5.25382 12.1607 5.54661 12.9106 6.12132 13.4853L8 15.364M5.24296 11.4075H11.9565M16.3126 11.4075C16.3022 11.6487 16.205 11.8869 16.0208 12.0711L12.4853 15.6066C11.3137 16.7782 9.41421 16.7782 8.24264 15.6066L8 15.364M16.3126 11.4075H11.9565M8 15.364L11.9565 11.4075" stroke="black" stroke-width="2"/>
4
- <path d="M20 17.4615C20 18.3112 19.3284 19 18.5 19C17.6716 19 17 18.3112 17 17.4615C17 16.6119 17.9 15.6154 18.5 15C19.1 15.6154 20 16.6119 20 17.4615Z" stroke="black" stroke-width="2"/></svg>`;
2
+ import { IconColor } from "../../icons";
3
+
4
+
5
5
  import './styles.css';
6
6
 
7
7
  import {type InlineToolConstructorOptions} from "@ebl-vue/editorjs/types/tools/inline-tool";
8
8
 
9
- type ColorPickerConfig = {
10
- colors: string[];
11
- columns: number;
12
- };
13
9
 
14
- // interface ConstructorArgs {
15
- // api: API;
16
- // config: ColorPickerConfig;
17
- // }
18
10
 
19
11
  export default class ColorPicker {
20
12
  private api: API;
package/src/plugins/delimiter/index.ts CHANGED
@@ -4,12 +4,9 @@
4
4
  import './index.css';
5
5
  import {API, BlockTool, BlockToolConstructorOptions, BlockToolData, ToolboxConfig, PasteConfig, PasteEvent} from "@ebl-vue/editorjs";
6
6
 
7
+ import {IconDelimiter} from '../../icons';
8
+
7
9
 
8
- const IconDelimiter = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
9
- <line x1="6" y1="12" x2="10" y2="12" stroke="black" stroke-width="2" stroke-linecap="round"/>
10
- <line x1="14" y1="12" x2="18" y2="12" stroke="black" stroke-width="2" stroke-linecap="round"/>
11
- </svg>
12
- `;
13
10
 
14
11
 
15
12
  export default class Delimiter implements BlockTool {
@@ -33,6 +30,7 @@ export default class Delimiter implements BlockTool {
33
30
 
34
31
 
35
32
  private _element: HTMLDivElement
33
+ private data: any;
36
34
 
37
35
 
38
36
  constructor({data, config, api}: BlockToolConstructorOptions) {
@@ -44,7 +42,7 @@ export default class Delimiter implements BlockTool {
44
42
  };
45
43
 
46
44
  this._element = this.drawView();
47
-
45
+ this.data = data;
48
46
 
49
47
  }
50
48
 
@@ -74,6 +72,7 @@ export default class Delimiter implements BlockTool {
74
72
  * @public
75
73
  */
76
74
  render(): HTMLDivElement {
75
+ console.log(this.data);
77
76
  return this._element;
78
77
  }
79
78
 
package/src/plugins/header/H1.ts CHANGED
@@ -8,9 +8,9 @@ import { API, PasteEvent } from '@ebl-vue/editorjs';
8
8
  import type { HeaderData, HeaderConfig, Level } from './types';
9
9
  import type { BlockTool,BlockToolConstructorOptions } from '@ebl-vue/editorjs';
10
10
 
11
+ import { IconH1 } from '../../icons';
11
12
 
12
13
 
13
- const IconH1: string = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M6 7L6 12M6 17L6 12M6 12L12 12M12 7V12M12 17L12 12"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M19 17V10.2135C19 10.1287 18.9011 10.0824 18.836 10.1367L16 12.5"/></svg>`;
14
14
 
15
15
  /**
16
16
  * Header block for the Editor.js.
package/src/plugins/header/H2.ts CHANGED
@@ -7,9 +7,9 @@ import './index.css';
7
7
  import { API, PasteEvent } from '@ebl-vue/editorjs';
8
8
  import type { HeaderData, HeaderConfig, Level } from './types';
9
9
  import type { BlockTool, BlockToolConstructorOptions } from '@ebl-vue/editorjs';
10
+ import { IconH2 } from '../../icons';
10
11
 
11
12
 
12
- const IconH2: string = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M6 7L6 12M6 17L6 12M6 12L12 12M12 7V12M12 17L12 12"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M16 11C16 10 19 9.5 19 12C19 13.9771 16.0684 13.9997 16.0012 16.8981C15.9999 16.9533 16.0448 17 16.1 17L19.3 17"/></svg>`;
13
13
 
14
14
  /**
15
15
  * Header block for the Editor.js.
package/src/plugins/header/H3.ts CHANGED
@@ -8,9 +8,9 @@ import { API, PasteEvent } from '@ebl-vue/editorjs';
8
8
  import type { HeaderData, HeaderConfig, Level } from './types';
9
9
  import type { BlockTool, BlockToolConstructorOptions } from '@ebl-vue/editorjs';
10
10
 
11
+ import { IconH3 } from '../../icons';
11
12
 
12
13
 
13
- const IconH3: string = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M6 7L6 12M6 17L6 12M6 12L12 12M12 7V12M12 17L12 12"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M16 11C16 10.5 16.8323 10 17.6 10C18.3677 10 19.5 10.311 19.5 11.5C19.5 12.5315 18.7474 12.9022 18.548 12.9823C18.5378 12.9864 18.5395 13.0047 18.5503 13.0063C18.8115 13.0456 20 13.3065 20 14.8C20 16 19.5 17 17.8 17C17.8 17 16 17 16 16.3"/></svg>`;
14
14
 
15
15
  /**
16
16
  * Header block for the Editor.js.
package/src/plugins/header/H4.ts CHANGED
@@ -10,8 +10,7 @@ import type { BlockTool, BlockToolConstructorOptions } from '@ebl-vue/editorjs';
10
10
 
11
11
 
12
12
 
13
-
14
- const IconH4: string = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M6 7L6 12M6 17L6 12M6 12L12 12M12 7V12M12 17L12 12"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M18 10L15.2834 14.8511C15.246 14.9178 15.294 15 15.3704 15C16.8489 15 18.7561 15 20.2 15M19 17C19 15.7187 19 14.8813 19 13.6"/></svg>`;
13
+ import { IconH4 } from '../../icons';
15
14
 
16
15
  /**
17
16
  * Header block for the Editor.js.
package/src/plugins/header/H5.ts CHANGED
@@ -9,9 +9,7 @@ import type { HeaderData, HeaderConfig, Level } from './types';
9
9
  import type { BlockTool, BlockToolConstructorOptions } from '@ebl-vue/editorjs';
10
10
 
11
11
 
12
-
13
-
14
- const IconH5: string = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M6 7L6 12M6 17L6 12M6 12L12 12M12 7V12M12 17L12 12"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M16 15.9C16 15.9 16.3768 17 17.8 17C19.5 17 20 15.6199 20 14.7C20 12.7323 17.6745 12.0486 16.1635 12.9894C16.094 13.0327 16 12.9846 16 12.9027V10.1C16 10.0448 16.0448 10 16.1 10H19.8"/></svg>`;
12
+ import { IconH5 } from '../../icons';
15
13
 
16
14
  /**
17
15
  * Header block for the Editor.js.
package/src/plugins/header/H6.ts CHANGED
@@ -9,9 +9,7 @@ import type { HeaderData, HeaderConfig, Level } from './types';
9
9
  import type { BlockTool, BlockToolConstructorOptions } from '@ebl-vue/editorjs';
10
10
 
11
11
 
12
-
13
-
14
- const IconH6: string = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M6 7L6 12M6 17L6 12M6 12L12 12M12 7V12M12 17L12 12"/><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M19.5 10C16.5 10.5 16 13.3285 16 15M16 15V15C16 16.1046 16.8954 17 18 17H18.3246C19.3251 17 20.3191 16.3492 20.2522 15.3509C20.0612 12.4958 16 12.6611 16 15Z"/></svg>`;
12
+ import { IconH6 } from '../../icons';
15
13
 
16
14
  /**
17
15
  * Header block for the Editor.js.